/* CAER employer demo pages (overview, add-employee, payroll integration).
   Loaded only when the page Body Class contains bootstrap5.
   Does not load Bootstrap 5 CSS (that restyles the CAER header). Concatenated in
   this order so .cs-ppi rules win over shared .cs-pi-* add-employee spacing. */

/* Employer overview — loaded only when the page Body Class is bootstrap5.
   Layout for the pasted cs-* blocks. Does not load Bootstrap 5 (that restyles the CAER header). */

@font-face{font-family:"Poppins";font-style:normal;font-weight:300;src:url(https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLDz8Z1xlEw.woff) format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/poppins/v5/pxiEyp8kv8JHgFVrJJfedA.woff) format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;src:url(https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLGT9Z1xlEw.woff) format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;src:url(https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLEj6Z1xlEw.woff) format("woff")}

/* Employer overview (CAER home page)  */
/* =====================================================================
   Shared brand tokens, headings, reusable components
   ===================================================================== */

/* Page base — force 16px root (Bootstrap 3 sets body to 14px; demo uses Bootstrap 5 at 16px).
   Only applies when body has class bootstrap5, so other CAER pages stay 14px. */
body.bootstrap5 { font-size: 16px; line-height: 1.5; overflow-x: hidden; }

/* Block roots also set 16px explicitly so children inherit correctly */
.cs-hero, .cs-payroll, .cs-support, .cs-resources, .cs-features { background-clip: padding-box; font-size: 16px; line-height: 1.5; overflow-x: hidden; max-width: 100%; }
/* Getting Started tab outline uses negative margin; overflow-x:hidden clips it. */
.cs-htr { background-clip: padding-box; font-size: 16px; line-height: 1.5; overflow: visible; max-width: 100%; }
/* overflow-x:hidden on .cs-printable clips the Download language list (overflow-y becomes auto). */
.cs-printable { background-clip: padding-box; font-size: 16px; line-height: 1.5; overflow: visible; max-width: 100%; }

/* Override CalSavers brand stylesheet gold headings -> dark text */
.cs-hero h2, .cs-hero h3, .cs-hero h4,
.cs-htr h2, .cs-htr h3, .cs-htr h4,
.cs-payroll h2, .cs-payroll h3,
.cs-support h2, .cs-support h3,
.cs-resources h2, .cs-resources h3,
.cs-printable h2, .cs-printable h3,
.cs-features h2, .cs-features h3 { color: #000; font-family: "Poppins", sans-serif; font-weight: 500; }

/* Override brand sheet's "section svg, section img { width: 100% }" so icons size to their attributes */
.cs-hero svg, .cs-htr svg, .cs-htr img,
.cs-payroll svg, .cs-payroll img,
.cs-support svg, .cs-support img,
.cs-resources svg, .cs-resources img,
.cs-printable svg, .cs-printable img,
.cs-features svg, .cs-features img { width: auto; }

/* Constrain inner content to 2/3 of viewport on desktop, centered.
   Section background colors / images stay full-width since they're on the <section> element. */
@media (min-width: 1025px) {
  .cs-hero > .container,
  .cs-htr > .container,
  .cs-payroll > .container,
  .cs-support > .container,
  .cs-resources > .container,
  .cs-printable > .container,
  .cs-features > .container,
  #outer > .container {
    max-width: 66.666%;
  }
}

/* Video modal — black h2 title at weight 400, primary-green close button */
.cs-modal-title { color: #212529; font-weight: 400; font-size: 1.5rem; line-height: 1.3; margin: 0; }
.cs-modal-close {
  /* Replace Bootstrap's default black X with a primary-green one */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300594f'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
  opacity: 1;
}
.cs-modal-close:hover, .cs-modal-close:focus { opacity: 0.75; }

/* Banner heading — production CalSavers.com class. Local fallback at 54px with responsive scaling. */
.main-content-new .main-banner-nw h1.banner-header-text {
  font-size: 3.375rem; /* 54px */
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 1rem;
}
.main-banner-nw {
  width: 100%;
}
@media (max-width: 991.98px) {
  .main-content-new .main-banner-nw h1.banner-header-text { font-size: 2.5rem; /* 40px */ }
}
@media (max-width: 575.98px) {
  .main-content-new .main-banner-nw h1.banner-header-text { font-size: 2rem; /* 32px */ }
}

/* Single section-title class at 2rem — used by all section h2s */
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .section-title { font-size: 2rem; line-height: 1.25; color: #000; }
@media (max-width: 575.98px) {
  :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .section-title { font-size: 1.625rem; /* 26px */ }
}

/* Brand .link-primary tuned per spec: solid green, hover green, weight 500.
   Underline is drawn via ::before pseudo so it can animate from the center on hover.
   !important is required because Bootstrap 5.3's .link-primary forces blue with !important. */
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .link-primary {
  color: #00594f !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
}
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .link-primary:hover,
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .link-primary:focus {
  color: #00473F !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
/* Animated underline — grows from the center on hover */
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .link-primary::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: all 0.5s;
}
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .link-primary:hover::before,
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .link-primary:focus::before { width: 100%; }
/* Chevron-right after every .link-primary, 4px gap.
   Overrides the brand sheet's animated underline ::after which uses absolute positioning. */
.cs-hero a.link-primary, .cs-htr a.link-primary, .cs-payroll a.link-primary, .cs-support a.link-primary::after,
.cs-hero a.link-primary, .cs-htr a.link-primary, .cs-payroll a.link-primary, .cs-support a.link-primary:after,
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .link-primary::after,
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .link-primary:after {
  content: ">";
  position: static;
  display: inline-block;
  background: none;
  width: auto;
  height: auto;
  margin: 0 0 0 4px;
  color: inherit;
  transition: none;
  font-weight: 600;
  line-height: 1;
}
.cs-hero a.link-primary, .cs-htr a.link-primary, .cs-payroll a.link-primary, .cs-support a.link-primary:hover::after,
.cs-hero a.link-primary, .cs-htr a.link-primary, .cs-payroll a.link-primary, .cs-support a.link-primary:hover:after,
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .link-primary:hover::after,
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .link-primary:hover:after { width: auto; } /* defeat the brand's hover "width: 100%" */

/* =====================================================================
   Hero — CalSavers for Employers
   ===================================================================== */
body.bootstrap5 section.cs-hero-section-host,
body.bootstrap5 section:has(.cs-hero) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.cs-hero {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #00594f;
  color: #ffffff;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
}
.cs-hero__bg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  display: block;
}
.cs-hero__bg img,
section .cs-hero__bg img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
}
.cs-hero::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  background-color: rgba(0, 89, 79, 0.2);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cs-hero > .container {
  position: relative;
  z-index: 2;
  padding-left: 12px;
  padding-right: 12px;
}
.cs-hero .container.py-5,
.cs-hero .py-5 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
@media (min-width: 992px) {
  .cs-hero .py-lg-6 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}
.cs-hero h1,
.cs-hero h1.banner-header-text,
.cs-hero .banner-header-text {
  font-family: "Poppins", sans-serif;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.15;
  color: #ffffff !important;
  letter-spacing: normal;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
@media (max-width: 991.98px) {
  .cs-hero h1,
  .cs-hero h1.banner-header-text { font-size: 40px !important; }
}
@media (max-width: 575.98px) {
  .cs-hero h1,
  .cs-hero h1.banner-header-text { font-size: 32px !important; }
}
.cs-hero p.lead,
.cs-hero .lead {
  font-family: "Poppins", sans-serif;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  margin-bottom: 0 !important;
}
.cs-hero .main-banner-nw.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.cs-hero .main-banner-nw.row::before,
.cs-hero .main-banner-nw.row::after {
  display: none !important;
  content: none !important;
}
.cs-hero .main-banner-nw > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (min-width: 992px) {
  .cs-hero .main-banner-nw.row {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
.cs-hero .card,
.cs-hero .cs-hero__card {
  background-color: #ffffff;
  border: 0 !important;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.cs-hero .card-body,
.cs-hero .p-4 {
  padding: 24px !important;
}
.cs-hero .cs-hero__card h3,
.cs-hero h3.text-dark {
  font-family: "Poppins", sans-serif;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #212529 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.cs-hero .cs-hero__card p,
.cs-hero p.text-dark {
  font-family: "Poppins", sans-serif;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: #212529 !important;
}
.cs-hero .mb-0 { margin-bottom: 0 !important; }
.cs-hero .mb-3 { margin-bottom: 16px !important; }
.cs-hero .mb-4 { margin-bottom: 24px !important; }
.cs-hero .gap-3 { gap: 16px !important; }
.cs-hero .d-flex { display: flex !important; }
.cs-hero .flex-column { flex-direction: column !important; }
.cs-hero .flex-wrap { flex-wrap: wrap !important; }
.cs-hero .align-items-stretch { align-items: stretch !important; }
.cs-hero .align-items-center { align-items: center !important; }
@media (min-width: 576px) {
  .cs-hero .flex-sm-row { flex-direction: row !important; }
  .cs-hero .align-items-sm-center { align-items: center !important; }
}
.cs-hero .btn,
.cs-hero a.btn {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  padding: 6px 12px;
  border-radius: 4px;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}
.cs-hero .btn-primary {
  background-color: #00594f;
  border: 1px solid #00594f;
  color: #fff;
}
.cs-hero .btn-primary:hover,
.cs-hero .btn-primary:focus {
  background-color: #004038;
  border-color: #00594f;
  color: #fff;
}
.cs-hero .btn-secondary,
.cs-hero .btn-secondary-white {
  background-color: #fff;
  color: #00594f;
  border: 1px solid #00594f;
}
.cs-hero .btn-secondary:hover,
.cs-hero .btn-secondary-white:hover {
  background-color: #ccdddb;
  color: #00594f;
  border-color: #00594f;
}
.cs-hero a.link-primary {
  color: #00594f !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
}

/* =====================================================================
   How to register
   ===================================================================== */
.cs-htr { background-color: #F2F6F6; }

.cs-htr__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
}

.cs-htr__tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 78px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  color: #00594f;
}
/* Explicit colors so the title doesn't inherit brand body gray */
.cs-htr__tab .cs-htr__title { color: #00594f; }
.cs-htr__tab.is-active,
.cs-htr__tab.is-active .cs-htr__title { color: #ffffff; }
.cs-htr__tab:hover:not(.is-active) {
  background-color: rgba(0, 89, 79, 0.1);
  border-color: #00473F;
  color: #00473F;
}
.cs-htr__tab:hover:not(.is-active) .cs-htr__title {
  text-decoration: underline;
}
.cs-htr__tab.is-active {
  background-color: #00594f;
  border-color: #00594f;
  color: #ffffff;
}

.cs-htr__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #80641f;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
}

.cs-htr__labels {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.cs-htr__eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: #80641f;
}
.cs-htr__tab.is-active .cs-htr__eyebrow { color: #ffffff; opacity: 0.85; }
.cs-htr__title { font-weight: 500; font-size: 1rem; }

.cs-htr__chevron { flex-shrink: 0; transition: transform 0.2s ease; }
.cs-htr__tab[aria-expanded="true"] .cs-htr__chevron { transform: rotate(180deg); }

.cs-htr__panel { display: none; }
.cs-htr__panel.is-active { display: block; }

.cs-htr__panel-eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: #80641f;
}
.cs-htr__panel-body  { color: #6b6b6b; line-height: 1.6; }

/* Numbered/bulleted lists inside a panel — override the brand sheet's
   "section ol/ul" reset (0 padding on ol, square bullets on ul) so lists
   read as clearly indented from the surrounding body copy. */
ol.cs-htr__panel-body { padding-left: 1.75rem; }
ul.cs-htr__panel-body {
  padding-left: 2rem;
  list-style-type: disc;
}

/* Numbered lists — custom left-aligned counter instead of the native
   ::marker, whose right/end alignment within its box is inconsistent
   across browsers and reads as right-aligned. */
ol.cs-htr__panel-body { list-style: none; counter-reset: cs-ol; }
ol.cs-htr__panel-body > li { counter-increment: cs-ol; position: relative; padding-left: 1.5em; }
ol.cs-htr__panel-body > li::before {
  content: counter(cs-ol) ".";
  position: absolute;
  left: 0;
  text-align: left;
}

/* Buttons inherit the brand stylesheet's .btn / .btn-primary / .btn-secondary rules.
   Only the icon size is overridden here so the play SVGs don't stretch to 100%. */
.cs-htr__panel .btn svg {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Solid-white variant of the brand .btn-secondary (default is transparent).
   Hover still cascades to the brand's #ccdddb because :hover has higher specificity. */
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) body.bootstrap5 .btn-secondary-white { background-color: #ffffff; }

.cs-htr__divider {
  border-top: 1px solid rgba(0, 89, 79, 0.25);
  opacity: 1;
  margin-top: 0;
}

/* Inline subhead inside a panel (e.g. "Employee deductions") */
.cs-htr__panel-subhead {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: #000;
  font-size: 1rem;
  font-weight: 600;
}
.cs-htr__panel-subhead__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Mobile: stacked accordion — matches Payroll Integrations component style */
@media (max-width: 767.98px) {
  /* Hide the "STEP X:" eyebrow per design — number circle conveys the step */
  .cs-htr__eyebrow { display: none; }

  /* Title spans the full width between number and chevron; wraps only if forced */
  .cs-htr__labels { flex: 1 1 auto; min-width: 0; }
  .cs-htr__title { width: 100%; }

  /* Pin chevron to the far right edge */
  .cs-htr__chevron { margin-left: auto; flex-shrink: 0; }

  /* Active tab stays white (no green fill on mobile); just connects to the panel below */
  .cs-htr__tab.is-active {
    background-color: #ffffff;
    border-color: rgba(0, 89, 79, 0.5);
    color: #00594f;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .cs-htr__tab.is-active .cs-htr__title { color: #00594f; }

  .cs-htr__panel.is-active {
    background-color: #ffffff;
    border: 1px solid rgba(0, 89, 79, 0.5);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 1.25rem;
    margin-top: -0.75rem;
  }
}

/* Tablet + Desktop: tabs left, single content panel right */
@media (min-width: 768px) {
  .cs-htr__nav {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    grid-template-rows: repeat(4, 78px) auto; /* 4 locked 78px tab rows + flex row so the panel's overflow expands the grid */
    column-gap: 2rem; /* visible 16px gap between tabs-container border and panel border (the ::before below extends 16px past col 1) */
    row-gap: 0.75rem;
    align-content: start;
  }

  /* Visual container around the tab buttons. The pseudo is a regular grid item placed
     at col 1, rows 1-4. Negative margin pulls its border 16px outside that area on every
     side, creating the 16px "padding" between the border and the tabs.
     Tabs are explicitly placed into rows 1-4 so they can co-occupy the same cells as the
     pseudo (later in DOM order, they render on top). */
  .cs-htr__nav::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 5;
    border: 1px solid rgba(0, 89, 79, 0.25);
    border-radius: 8px;
    margin: -1rem;
    pointer-events: none;
  }

  .cs-htr__nav > li { display: contents; }
  .cs-htr__nav > li > p { display: contents; }
  .cs-htr__nav > li:nth-child(1) .cs-htr__tab { grid-column: 1; grid-row: 1; }
  .cs-htr__nav > li:nth-child(2) .cs-htr__tab { grid-column: 1; grid-row: 2; }
  .cs-htr__nav > li:nth-child(3) .cs-htr__tab { grid-column: 1; grid-row: 3; }
  .cs-htr__nav > li:nth-child(4) .cs-htr__tab { grid-column: 1; grid-row: 4; }
  .cs-htr__nav > li .cs-htr__panel {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    margin-top: -1rem;
    background-color: #ffffff;
    border: 1px solid rgba(0, 89, 79, 0.25);
    border-radius: 8px;
    padding: 1.5rem;
  }
  .cs-htr__chevron { display: none; }
  .cs-htr__num { display: none; } /* number badges only show on mobile */
}

.cs-htr .mt-2 { margin-top: 0.5rem !important; }
.cs-htr .btn-primary {
  background-color: #00594f;
  border: 1px solid #00594f;
  color: #fff;
}
.cs-htr .btn-primary:hover,
.cs-htr .btn-primary:focus {
  background-color: #004038;
  border-color: #00594f;
  color: #fff;
}
.cs-htr .btn-secondary,
.cs-htr .btn-secondary-white {
  background-color: #fff;
  color: #00594f;
  border: 1px solid #00594f;
}
.cs-htr .btn-secondary:hover,
.cs-htr .btn-secondary-white:hover {
  background-color: #ccdddb;
  color: #00594f;
  border-color: #00594f;
}
.cs-htr .btn {
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 4px;
  text-transform: none;
  white-space: normal;
}
p.cs-htr__panel-subhead,
.cs-htr__panel-subhead,
h3.cs-htr__panel-subhead {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.875rem !important;
  color: #000 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}
.cs-htr__panel-subhead.mb-2 {
  margin-bottom: 1rem !important;
}
.cs-htr__panel-subhead br {
  display: none !important;
}
.cs-htr__panel-subhead .cs-htr__panel-subhead__text,
.cs-htr__panel-subhead span {
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
section img.cs-htr__panel-subhead__icon,
img.cs-htr__panel-subhead__icon,
p.cs-htr__panel-subhead img,
.cs-htr__panel-subhead img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}
.cs-htr strong,
.cs-htr b { color: inherit; font-weight: 700; }
.cs-htr .dropdown-menu {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.cs-htr a.dropdown-item {
  display: block;
  padding: 0.25rem 1rem;
  color: #212529;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
.cs-htr a.dropdown-item:hover,
.cs-htr a.dropdown-item:focus {
  background-color: #e9ecef;
  color: #1e2125;
}
.cs-htr button.cs-resource-card,
.cs-htr .cs-resource-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(0, 89, 79, 0.5) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #00594f !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
}
.cs-htr .cs-resource-card__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.cs-htr .cs-resource-card__label {
  color: #00594f !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.cs-htr .cs-resource-card__eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #80641f !important;
  line-height: 1.25 !important;
}
.cs-htr .cs-resource-card__icon {
  flex-shrink: 0 !important;
  color: #00594f !important;
  line-height: 0 !important;
}
.cs-htr .cs-resource-card svg,
.cs-htr .cs-resource-card__icon svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  flex-shrink: 0 !important;
}
.cs-htr .d-flex.flex-column.gap-3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}
.cs-htr .d-flex.flex-column.gap-2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* Panel children: Bootstrap 5 spacing (demo mb-1/2/3/4). BS3 uses 10px/20px. */
.cs-htr__panel > *,
.cs-htr__panel p,
.cs-htr__panel h3,
.cs-htr__panel ul,
.cs-htr__panel ol,
.cs-htr__panel hr,
.cs-htr__panel .dropdown {
  margin-top: 0 !important;
}
.cs-htr__panel .mb-0 { margin-bottom: 0 !important; }
.cs-htr__panel .mb-1 { margin-bottom: 0.25rem !important; }
.cs-htr__panel .mb-2 { margin-bottom: 1rem !important; }
.cs-htr__panel .mb-3 { margin-bottom: 1rem !important; }
.cs-htr__panel .mb-4 { margin-bottom: 1.5rem !important; }
.cs-htr__panel hr.cs-htr__divider {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  padding: 0;
}
.cs-htr ul.cs-htr__panel-body {
  list-style-type: disc !important;
  list-style-position: outside !important;
  padding: 0 1.25rem 1.25rem 2rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #6b6b6b !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
.cs-htr ul.cs-htr__panel-body.mb-4 {
  margin-bottom: 1.5rem !important;
}
.cs-htr ul.cs-htr__panel-body > li {
  padding: 0.25rem 0.5rem !important;
  margin: 0 !important;
  color: #6b6b6b !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
section img.cs-htr__panel-subhead__icon,
img.cs-htr__panel-subhead__icon,
p.cs-htr__panel-subhead img,
.cs-htr__panel-subhead img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  flex-shrink: 0 !important;
  object-fit: contain;
}

/* =====================================================================
   Save time by automating your payroll
   ===================================================================== */
body.bootstrap5 section.cs-payroll-section-host,
body.bootstrap5 section:has(.cs-payroll) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.cs-payroll {
  margin: 0 !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  font-size: 16px;
  line-height: 1.5;
}
@media (min-width: 992px) {
  .cs-payroll.py-lg-6 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
.cs-payroll > .container {
  padding-left: 12px;
  padding-right: 12px;
}
.cs-payroll h2.section-title {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: #000;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.cs-payroll .mb-0 { margin-bottom: 0 !important; }
.cs-payroll .mb-1 { margin-bottom: 4px !important; }
.cs-payroll .mb-3 { margin-bottom: 16px !important; }
.cs-payroll .mb-4 { margin-bottom: 24px !important; }
.cs-payroll .mt-3 { margin-top: 16px !important; }
.cs-payroll .gap-2 { gap: 8px !important; }
.cs-payroll__lede {
  color: #6b6b6b !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}
.cs-payroll ul.cs-bullets,
.cs-payroll ul.list-unstyled {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}
.cs-bullets__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}
.cs-bullets__item + .cs-bullets__item { margin-top: 20px !important; }
.cs-bullets__icon {
  flex-shrink: 0;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #00594f;
  margin-top: 2px !important;
}
.cs-payroll .cs-bullets__icon svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
}
.cs-bullets__title {
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-bottom: 4px !important;
}
.cs-bullets__desc {
  color: #000 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
}
.cs-bullets--gold .cs-bullets__icon { color: #80641f !important; }

.cs-payroll .row.align-items-center.g-4 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
}
.cs-payroll .row.g-4::before,
.cs-payroll .row.g-4::after {
  display: none !important;
  content: none !important;
}
.cs-payroll .row.g-4 > [class*="col-"] {
  float: none !important;
  position: relative;
  width: 100%;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-bottom: 24px;
}
.cs-payroll .row.g-4 > [class*="col-"]:last-child { margin-bottom: 0; }
@media (min-width: 992px) {
  .cs-payroll .row.g-4.g-lg-5 {
    margin-left: -24px !important;
    margin-right: -24px !important;
  }
  .cs-payroll .row.g-4.g-lg-5 > [class*="col-"] {
    width: 50% !important;
    max-width: 50% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-bottom: 0 !important;
  }
}

.cs-video {
  overflow: hidden;
  border: 1px solid #c3c3c3;
}
.cs-payroll .cs-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.cs-video__label { color: #6b6b6b !important; font-size: 15px !important; line-height: 1.5 !important; }
.cs-payroll .cs-video__caption {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  gap: 8px !important;
  margin-top: 16px !important;
}
@media (min-width: 576px) {
  .cs-payroll .cs-video__caption.flex-sm-row {
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* =====================================================================
   Need additional support
   ===================================================================== */
body.bootstrap5 section.cs-support-section-host,
body.bootstrap5 section:has(.cs-support) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.cs-support {
  background-color: #F2F0E9 !important;
  margin: 0 !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  font-size: 16px;
  line-height: 1.5;
}
@media (min-width: 992px) {
  .cs-support.py-lg-6 {
    padding: 128px 0 !important;
  }
}
.cs-support > .container {
  padding-left: 12px;
  padding-right: 12px;
}
.cs-support h2.section-title {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: #000;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.cs-support .mb-0 { margin-bottom: 0 !important; }
.cs-support .mb-1 { margin-bottom: 4px !important; }
.cs-support .mb-2 { margin-bottom: 16px !important; }
.cs-support .mb-3 { margin-bottom: 16px !important; }
.cs-support__body {
  color: #000 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.cs-support ul.cs-bullets,
.cs-support ul.list-unstyled {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  color: inherit !important;
}
.cs-support .cs-bullets__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}
.cs-support .cs-bullets__item + .cs-bullets__item { margin-top: 20px !important; }
.cs-support .cs-bullets__icon {
  width: 22px !important;
  height: 22px !important;
  margin-top: 2px !important;
  color: #80641f !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cs-support .cs-bullets__icon svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
}
.cs-support .cs-bullets__title {
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-bottom: 4px !important;
}
.cs-support .cs-bullets__desc {
  color: #000 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
}
.cs-support .row.g-4 {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
}
.cs-support .row.g-4::before,
.cs-support .row.g-4::after {
  display: none !important;
  content: none !important;
}
.cs-support .row.g-4 > [class*="col-"] {
  float: none !important;
  position: relative;
  width: 100%;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-bottom: 24px;
}
.cs-support .row.g-4 > [class*="col-"]:last-child { margin-bottom: 0; }
@media (min-width: 992px) {
  .cs-support .row.g-4.g-lg-5 {
    margin-left: -24px !important;
    margin-right: -24px !important;
  }
  .cs-support .row.g-4.g-lg-5 > [class*="col-"] {
    width: 50% !important;
    max-width: 50% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-bottom: 0 !important;
  }
}
.cs-support .btn,
.cs-support a.btn {
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  text-transform: none !important;
  margin-left: 34px !important;
  background-color: #ffffff !important;
  color: #00594f !important;
  border: 1px solid #00594f !important;
}
.cs-support .btn:hover,
.cs-support a.btn:hover {
  background-color: #ccdddb !important;
  color: #00594f !important;
  border-color: #00594f !important;
}

/* =====================================================================
   Program Resources
   ===================================================================== */
body.bootstrap5 section.cs-resources-section-host,
body.bootstrap5 section:has(.cs-resources) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.cs-resources {
  margin: 0 !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  font-size: 16px;
  line-height: 1.5;
}
@media (min-width: 992px) {
  .cs-resources.py-lg-6 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
.cs-resources > .container {
  padding-left: 12px;
  padding-right: 12px;
}
.cs-resources .text-center { text-align: center !important; }
.cs-resources .mb-0 { margin-bottom: 0 !important; }
.cs-resources .mb-2 { margin-bottom: 16px !important; }
.cs-resources .mb-3 { margin-bottom: 16px !important; }
.cs-resources .mb-4 { margin-bottom: 24px !important; }
.cs-resources .mb-lg-5 { margin-bottom: 24px !important; }
@media (min-width: 992px) {
  .cs-resources .mb-lg-5 { margin-bottom: 48px !important; }
}
.cs-resources h2.section-title {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: #000;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.cs-resources__lede {
  color: #6b6b6b !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
.cs-resources__subhead {
  color: #000 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

.cs-resource-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  text-align: start;
  cursor: pointer;
  color: #00594f;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cs-resource-card:hover,
.cs-resource-card:focus {
  background-color: rgba(0, 89, 79, 0.1);
  border-color: #00473F;
  color: #00473F;
  outline: none;
}
.cs-resource-card:hover .cs-resource-card__label,
.cs-resource-card:focus .cs-resource-card__label {
  color: #00473F;
  text-decoration: underline;
}
.cs-resource-card__label {
  color: #00594f;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
/* Stacked eyebrow + label variant (e.g. "Recommended for 10 or more employees") */
.cs-resource-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}
.cs-resource-card__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #80641f;
}
.cs-resource-card__icon {
  flex-shrink: 0;
  color: #00594f;
  line-height: 0;
  transition: color 0.2s ease;
}
.cs-resource-card:hover .cs-resource-card__icon,
.cs-resource-card:focus .cs-resource-card__icon { color: #00473F; }
/* Disabled card — video not yet available */
.cs-resource-card:disabled,
.cs-resource-card[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.cs-resource-card:disabled:hover,
.cs-resource-card[aria-disabled="true"]:hover {
  background-color: #ffffff;
  border-color: rgba(0, 89, 79, 0.5);
  color: #00594f;
}
.cs-resource-card:disabled:hover .cs-resource-card__label,
.cs-resource-card[aria-disabled="true"]:hover .cs-resource-card__label {
  text-decoration: none;
}

/* Uniform card height across Video Resources — the eyebrow variant runs an
   extra line, so pad the single-line cards out to match at every width. */
.cs-video-resources .cs-resource-card {
  min-height: 5rem;
}

/* Stacked (mobile) view only: read column-major (left column's cards top
   to bottom, then right column's) instead of the row-major DOM order,
   so the pairing shown on the 2-column desktop layout is preserved. */
@media (max-width: 767.98px) {
  .cs-video-resources > div:nth-child(1) { order: 1; }
  .cs-video-resources > div:nth-child(3) { order: 2; }
  .cs-video-resources > div:nth-child(5) { order: 3; }
  .cs-video-resources > div:nth-child(7) { order: 4; }
  .cs-video-resources > div:nth-child(2) { order: 5; }
  .cs-video-resources > div:nth-child(4) { order: 6; }
  .cs-video-resources > div:nth-child(6) { order: 7; }
}

@media (min-width: 992px) {
  .cs-resources.py-lg-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

/* 32px horizontal gap between columns on md+ only — Bootstrap's gutter scale doesn't ship a 2rem step.
   Mobile (stacked) keeps the existing g-3 / g-4 vertical rhythm untouched. */
@media (min-width: 768px) {
  .cs-resources .row,
  .cs-printable .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
}

/* =====================================================================
   Printable Resources
   ===================================================================== */
body.bootstrap5 section.cs-printable-section-host,
body.bootstrap5 section:has(.cs-printable) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.cs-printable {
  position: relative;
  z-index: 4;
  margin: 0 !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  border-top: 1px solid rgba(0, 89, 79, 0.15);
  font-size: 16px;
  line-height: 1.5;
  overflow: visible !important;
}
@media (min-width: 992px) {
  .cs-printable.py-lg-6 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
.cs-printable > .container {
  padding-left: 12px;
  padding-right: 12px;
}
.cs-printable h3.cs-resources__subhead {
  color: #000 !important;
  font-family: "Poppins", sans-serif;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}
.cs-printable .mb-0 { margin-bottom: 0 !important; }
.cs-printable .mb-1 { margin-bottom: 4px !important; }
.cs-printable .mb-4 { margin-bottom: 24px !important; }

.cs-printable-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  overflow: visible;
}
@media (min-width: 768px) {
  .cs-printable-card {
    flex-direction: row;
    align-items: center;
  }
}
.cs-printable-card__text { flex: 1; min-width: 0; }
.cs-printable-card__title,
.cs-printable p.cs-printable-card__title {
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}
.cs-printable-card__desc,
.cs-printable p.cs-printable-card__desc {
  color: #6b6b6b !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.cs-printable-card__action { flex-shrink: 0; }
.cs-printable .dropdown {
  position: relative;
  z-index: 2;
}
.cs-printable .dropdown.open,
.cs-printable .dropdown.show {
  z-index: 40;
}
.cs-printable .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.cs-printable .btn,
.cs-printable a.btn,
.cs-printable button.btn {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  padding: 6px 12px;
  border-radius: 4px;
  text-transform: none;
  background-color: #ffffff;
  color: #00594f;
  border: 1px solid #00594f;
  box-shadow: none;
  white-space: nowrap;
}
.cs-printable .btn:hover,
.cs-printable .btn:focus,
.cs-printable a.btn:hover,
.cs-printable a.btn:focus {
  background-color: #ccdddb;
  color: #00594f;
  border-color: #00594f;
}
.cs-printable .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  z-index: 1050;
  min-width: 180px;
  list-style: none !important;
  padding: 8px 0 !important;
  margin: 2px 0 0 !important;
  color: #212529 !important;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.cs-printable .dropdown.open .dropdown-menu,
.cs-printable .dropdown.show .dropdown-menu,
.cs-printable .cs-printable-card__action.open .dropdown-menu {
  display: block !important;
}
body.bootstrap5 .dropdown.open > .dropdown-menu {
  display: block !important;
  position: absolute;
  z-index: 1050;
}
.cs-printable .dropdown-menu > li {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  color: inherit !important;
}
.cs-printable .dropdown-menu a,
.cs-printable a.dropdown-item {
  display: block;
  padding: 4px 16px;
  color: #212529;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
.cs-printable .dropdown-menu a:hover,
.cs-printable .dropdown-menu a:focus,
.cs-printable a.dropdown-item:hover,
.cs-printable a.dropdown-item:focus {
  background-color: #e9ecef;
  color: #1e2125;
}

/* =====================================================================
   Designed with you in mind
   ===================================================================== */
body.bootstrap5 section.cs-features-section-host,
body.bootstrap5 section:has(.cs-features) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.cs-features {
  margin: 0 !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  background-color: #F2F0E9 !important;
  font-size: 16px;
  line-height: 1.5;
}
@media (min-width: 992px) {
  .cs-features.py-lg-6 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}
.cs-features > .container {
  padding-left: 12px;
  padding-right: 12px;
}
.cs-features .text-center { text-align: center !important; }
.cs-features .mb-0 { margin-bottom: 0 !important; }
.cs-features .mb-2 { margin-bottom: 16px !important; }
.cs-features .mb-3 { margin-bottom: 16px !important; }
.cs-features .mb-4 { margin-bottom: 24px !important; }
.cs-features .mb-lg-5 { margin-bottom: 24px !important; }
@media (min-width: 992px) {
  .cs-features .mb-lg-5 { margin-bottom: 48px !important; }
}
.cs-features h2.section-title {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  color: #000;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.cs-features__lede,
.cs-features p.cs-features__lede {
  color: #6b6b6b !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  max-width: 720px;
  margin-top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
}
.cs-features .row {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  margin: 0 !important;
  text-align: center;
}
.cs-features .row::before,
.cs-features .row::after {
  display: none !important;
  content: none !important;
}
.cs-features .row > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .cs-features .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 24px !important;
  }
}
@media (min-width: 992px) {
  .cs-features .row.g-lg-5 {
    gap: 48px !important;
  }
}
.cs-feature {
  text-align: center;
}
.cs-feature__icon,
.cs-features svg.cs-feature__icon,
section .cs-features svg.cs-feature__icon {
  display: inline-block !important;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  margin-bottom: 16px !important;
}
.cs-feature__title,
.cs-features h3.cs-feature__title {
  color: #000 !important;
  font-family: "Poppins", sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.cs-feature__desc,
.cs-features p.cs-feature__desc {
  color: #6b6b6b !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* =====================================================================
   Trust Act callout
   ===================================================================== */
body.bootstrap5 section.cs-trustact-section-host,
body.bootstrap5 section:has(#outer.cs-trustact),
body.bootstrap5 section:has(.cs-trustact__logo) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
#outer.cs-trustact,
#outer:has(.cs-trustact__logo) {
  margin: 0 !important;
  padding: 48px 0 !important;
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 767.98px) {
  #outer.cs-trustact,
  #outer:has(.cs-trustact__logo) {
    padding: 0 32px !important;
  }
}
#outer.cs-trustact .inner-brd,
#outer:has(.cs-trustact__logo) .inner-brd {
  display: none !important;
}
#outer.cs-trustact > .container,
#outer:has(.cs-trustact__logo) > .container,
#outer.cs-trustact #inner,
#inner:has(.cs-trustact__logo) {
  background-color: #ffffff !important;
  border: 1.5px solid #00594f !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  #outer.cs-trustact #inner,
  #inner:has(.cs-trustact__logo) {
    padding: 0 32px !important;
  }
}
#outer.cs-trustact .d-flex {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}
@media (min-width: 768px) {
  #outer.cs-trustact .d-flex.flex-md-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
  }
}
#outer.cs-trustact .flex-shrink-0 { flex-shrink: 0 !important; }
#outer.cs-trustact .flex-grow-1 { flex: 1 1 auto !important; min-width: 0; }
#outer.cs-trustact .text-center { text-align: center !important; }
#outer.cs-trustact .text-start { text-align: left !important; }
@media (min-width: 768px) {
  #outer.cs-trustact .text-md-end { text-align: right !important; }
}
#outer.cs-trustact .mb-0 { margin-bottom: 0 !important; }
#outer.cs-trustact .mb-2 { margin-bottom: 8px !important; }
#outer.cs-trustact p {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #6b6b6b;
  margin-top: 0;
}
#outer.cs-trustact p.inner-title,
#outer.cs-trustact .inner-title {
  font-size: 16px !important;
  font-weight: 300 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #000 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}
#outer.cs-trustact .cs-trustact__logo,
section #outer.cs-trustact img.cs-trustact__logo {
  width: 100% !important;
  height: auto !important;
  max-width: 200px !important;
  min-width: 120px;
}
@media (max-width: 767.98px) {
  #outer.cs-trustact .cs-trustact__logo {
    max-width: 30% !important;
    min-width: 0;
  }
}
#outer.cs-trustact .btn,
#outer.cs-trustact a.btn,
#outer.cs-trustact a.rd-more-btn {
  display: inline-block !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  padding: 8px 24px !important;
  border-radius: 4px !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background-color: #00594f !important;
  color: #fff !important;
  border: 1px solid #00594f !important;
  box-shadow: none !important;
}
#outer.cs-trustact .btn:hover,
#outer.cs-trustact a.btn:hover,
#outer.cs-trustact a.rd-more-btn:hover {
  background-color: #004038 !important;
  color: #fff !important;
  border-color: #00594f !important;
}


/* Bootstrap 3 shims so demo (Bootstrap 5) markup lays out on CAER */
.cs-hero .card, .cs-hero__card { background-color: #fff; display: block; }
.cs-hero .card-body { padding: 1.5rem; }
.cs-hero .d-flex, .cs-htr .d-flex, .cs-payroll .d-flex, .cs-support .d-flex,
.cs-resources .d-flex, .cs-printable .d-flex, .cs-features .d-flex, #outer .d-flex { display: flex; }
.cs-htr .d-inline-flex { display: inline-flex; }
.cs-hero .flex-column, .cs-htr .flex-column, .cs-payroll .flex-column, .cs-printable .flex-column, #outer .flex-column { flex-direction: column; }
.cs-hero .flex-wrap, .cs-htr .flex-wrap { flex-wrap: wrap; }
.cs-hero .align-items-center, .cs-htr .align-items-center, .cs-payroll .align-items-center,
.cs-printable .align-items-center, #outer .align-items-center { align-items: center; }
.cs-hero .align-items-stretch { align-items: stretch; }
.cs-htr .align-items-start, .cs-printable .align-items-start { align-items: flex-start; }
.cs-hero .justify-content-between, .cs-payroll .justify-content-between { justify-content: space-between; }
@media (min-width: 576px) {
  .cs-hero .flex-sm-row, .cs-payroll .flex-sm-row { flex-direction: row; }
  .cs-hero .align-items-sm-center, .cs-payroll .align-items-sm-center { align-items: center; }
}
@media (min-width: 768px) {
  #outer .flex-md-row { flex-direction: row; }
  #outer .align-items-md-center { align-items: center; }
}
.cs-hero .text-dark, .cs-htr .text-dark { color: #212529; }
.cs-hero .text-start, .cs-htr .text-start, .cs-resources .text-start, .cs-printable .text-start, #outer .text-start { text-align: left; }
.cs-hero .border-0 { border: 0 !important; }
.cs-hero .p-4 { padding: 1.5rem !important; }
.cs-hero .mb-0, .cs-htr .mb-0, .cs-payroll .mb-0, .cs-support .mb-0,
.cs-resources .mb-0, .cs-printable .mb-0, .cs-features .mb-0, #outer .mb-0 { margin-bottom: 0 !important; }
.cs-hero .mb-1, .cs-htr .mb-1, .cs-printable .mb-1 { margin-bottom: 0.25rem !important; }
.cs-hero .mb-2, .cs-resources .mb-2, .cs-features .mb-2, #outer .mb-2 { margin-bottom: 0.5rem !important; }
.cs-htr .mb-2 { margin-bottom: 1rem !important; }
.cs-hero .mb-3, .cs-htr .mb-3, .cs-payroll .mb-3, .cs-support .mb-3,
.cs-resources .mb-3, .cs-features .mb-3 { margin-bottom: 1rem !important; }
.cs-hero .mb-4, .cs-htr .mb-4, .cs-payroll .mb-4, .cs-resources .mb-4, .cs-printable .mb-4 { margin-bottom: 1.5rem !important; }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .gap-2 { gap: 0.5rem; }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .gap-3 { gap: 1rem; }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .gap-md-4 { gap: 1.5rem; }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .g-3 { --cs-g: 1rem; }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .g-4 { --cs-g: 1.5rem; }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .row.g-3, :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .row.g-4, :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .row.g-lg-5 { margin-left: -0.75rem; margin-right: -0.75rem; }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .row.g-3 > [class*="col-"], :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .row.g-4 > [class*="col-"], :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .row.g-lg-5 > [class*="col-"] { padding-left: 0.75rem; padding-right: 0.75rem; }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .fw-semibold { font-weight: 600; }
.cs-hero.py-5, .cs-htr.py-5, .cs-payroll.py-5, .cs-support.py-5,
.cs-resources.py-5, .cs-printable.py-5, .cs-features.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 992px) {
  .cs-hero .py-lg-6, .cs-payroll.py-lg-6,
  .cs-resources.py-lg-6, .cs-printable.py-lg-6, .cs-features.py-lg-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .cs-hero .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .ratio { position: relative; width: 100%; }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .ratio-16x9::before { display: block; padding-top: 56.25%; content: ""; }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .ratio > iframe, :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) .ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
button.close.cs-modal-close { opacity: 1; float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; background: none; border: 0; }
.cs-htr .list-unstyled, .cs-payroll .list-unstyled, .cs-support .list-unstyled { padding-left: 0; list-style: none; }
.cs-hero .lead { font-size: 1.25rem; font-weight: 300; line-height: 1.5; }
.cs-payroll .btn, .cs-support .btn, .cs-printable .btn, #outer .btn {
  font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5;
  padding: 0.5rem 1.25rem; border-radius: 4px; text-transform: none;
}
.cs-htr__tab { font-family: "Poppins", sans-serif; }
.cs-hero h1.banner-header-text {
  font-family: "Poppins", sans-serif;
  font-size: 3.375rem;
  font-weight: 500;
  line-height: 1.15;
  color: #ffffff !important;
}
@media (max-width: 991.98px) { .cs-hero h1.banner-header-text { font-size: 2.5rem; } }
@media (max-width: 575.98px) { .cs-hero h1.banner-header-text { font-size: 2rem; } }
:is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, #cs-video-modal) h2.section-title { font-family: "Poppins", sans-serif; font-weight: 500; }

/* Block 2 + 5 — match demo spacing/type on Bootstrap 3 (utilities the demo
   gets from Bootstrap 5, plus CAU 14px paragraphs vs 16px buttons). */
.cs-htr,
.cs-resources {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #6b6b6b;
}

/* Block 2 box model = live demo (Bootstrap 5.3 py-5 + CAU section ul).
   Jahia GRID wraps Text in <section> which adds 40px; strip that. */
body.bootstrap5 section.cs-htr-section-host,
body.bootstrap5 section:has(.cs-htr) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.cs-htr {
  margin: 0 !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 992px) {
  /* 4rem / 5rem so the right-hand panel does not bleed into the next section.
     Support page (.cs-htr-search) keeps the same values via a later rule. */
  .cs-htr.py-lg-6 {
    padding-top: 4rem !important;
    padding-bottom: 5rem !important;
  }
}
.cs-htr > .container,
.cs-resources > .container {
  padding-left: 12px;
  padding-right: 12px;
}
.cs-htr .mb-lg-5,
.cs-resources .mb-lg-5 { margin-bottom: 1.5rem !important; }
@media (min-width: 992px) {
  .cs-htr .mb-lg-5,
  .cs-resources .mb-lg-5 { margin-bottom: 3rem !important; }
  .cs-resources.py-lg-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}
.cs-htr p:not(.cs-htr__panel-eyebrow),
.cs-resources p,
.cs-resources .cs-resources__lede {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: #6b6b6b;
  margin-top: 0;
}
.cs-htr h2.section-title,
.cs-resources h2.section-title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.25;
  color: #000;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.cs-htr h2.section-title.mb-2 {
  margin-bottom: 1rem !important;
}
.cs-htr h3 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
  margin-top: 0;
  margin-bottom: 1rem;
}
.cs-resources h3.cs-resources__subhead {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: #000;
  margin-top: 0;
  margin-bottom: 1rem;
}
.cs-resources .text-center { text-align: center; }
.cs-htr__panel-body { font-size: 16px; line-height: 1.6; color: #6b6b6b; }
p.cs-htr__panel-body { font-size: 16px; }
.cs-htr__tab,
.cs-resource-card {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.cs-htr__eyebrow,
.cs-htr__tab .cs-htr__eyebrow {
  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #80641f !important;
}
.cs-htr__panel-eyebrow,
p.cs-htr__panel-eyebrow {
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #80641f !important;
}
.cs-htr__tab { color: #00594f !important; }
.cs-htr__title,
.cs-htr__tab .cs-htr__title {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #00594f !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.cs-htr__tab.is-active,
.cs-htr__tab.is-active .cs-htr__title { color: #ffffff !important; }
.cs-htr__tab.is-active .cs-htr__eyebrow { color: #ffffff !important; opacity: 0.85 !important; }
@media (max-width: 767.98px) {
  .cs-htr__tab.is-active,
  .cs-htr__tab.is-active .cs-htr__title { color: #00594f !important; }
  .cs-htr__tab.is-active .cs-htr__eyebrow { color: #80641f !important; opacity: 1 !important; }
}
.cs-htr__tab p,
.cs-resource-card p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
.cs-htr ul,
.cs-htr ol {
  margin-top: 0;
}
.cs-htr ul.mb-0,
.cs-htr ol.mb-0 { margin-bottom: 0; }
.cs-htr ul.mb-4,
.cs-htr ol.mb-4 { margin-bottom: 1.5rem; }

.cs-resources .cs-video-resources.row {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.cs-printable .row {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 24px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.cs-resources .cs-video-resources.row::before,
.cs-resources .cs-video-resources.row::after,
.cs-printable .row::before,
.cs-printable .row::after {
  display: none !important;
  content: none !important;
}
.cs-resources .cs-video-resources > [class*="col-"],
.cs-printable .row > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .cs-resources .cs-video-resources.row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .cs-printable .row {
    grid-template-columns: 1fr 1fr;
    gap: 24px !important;
  }
}
.cs-resources button.cs-resource-card,
.cs-resources .cs-video-resources .cs-resource-card {
  box-sizing: border-box !important;
  width: 100%;
  min-height: 80px !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.cs-resources .cs-resource-card__label {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.cs-resources .cs-resource-card__eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.25 !important;
}

/* Getting Started — pixel utilities matching the demo at 16px root (mb-2=16px, mb-4=24px) */
.cs-htr .mb-0 { margin-bottom: 0 !important; }
.cs-htr .mb-1 { margin-bottom: 4px !important; }
.cs-htr .mb-2,
.cs-htr li.mb-2 { margin-bottom: 16px !important; }
.cs-htr .mb-3,
.cs-htr a.btn.mb-3 { margin-bottom: 16px !important; }
.cs-htr .mb-4,
.cs-htr p.mb-4,
.cs-htr ol.mb-4,
.cs-htr ul.mb-4,
.cs-htr hr.mb-4,
.cs-htr header.mb-4,
.cs-htr .d-flex.mb-4 { margin-bottom: 24px !important; }
.cs-htr .mt-2 { margin-top: 8px !important; }
.cs-htr .gap-2 { gap: 8px !important; }
.cs-htr .gap-3 { gap: 16px !important; }
.cs-htr .mb-lg-5 { margin-bottom: 24px !important; }
@media (min-width: 992px) {
  .cs-htr .mb-lg-5 { margin-bottom: 48px !important; }
}
.cs-htr h2.section-title {
  margin-bottom: 16px !important;
}
.cs-htr p,
.cs-htr h2,
.cs-htr h3,
.cs-htr ul,
.cs-htr ol,
.cs-htr hr,
.cs-htr header {
  margin-top: 0 !important;
}
.cs-htr hr.cs-htr__divider {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(0, 89, 79, 0.25) !important;
}


/* Add Employee Information — from ux-calsaversdemo-beta/employers/add-employee-information.html
   Loaded when .cs-pi-hero (or body.bootstrap5 + these blocks) is on the page. */


/* =====================================================================
   Shared brand tokens, headings
   (mirrors payroll-integrations.html so pages stay visually aligned)
   ===================================================================== */


/* Constrain inner content to 2/3 of viewport on desktop, centered. */
@media (min-width: 1025px) {
  .cs-pi-hero > .container,
  .cs-pi-section > .container,
  .cs-eligibility > .container,
  .cs-pi-support > .container,
  .cs-pi-faq > .container {
    max-width: 66.666%;
  }
}

/* Section title — 2rem h2/h3 across the site */
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) .section-title { font-size: 1.5rem; line-height: 1.25; color: #000000; }
@media (max-width: 575.98px) { :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) .section-title { font-size: 1.625rem; } }

/* Link styling — solid green, hover green, animated underline from center,
   chevron after, weight 500. !important required because Bootstrap 5.3's
   body.bootstrap5 #accessible-main .link-primary forces blue with !important. */
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) .link-primary {
  color: #00594f !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
}
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) .link-primary:hover, :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) .link-primary:focus {
  color: #00473F !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) .link-primary::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: auto;
  width: 0; height: 1px;
  background-color: currentColor;
  transition: all 0.5s;
}
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) .link-primary:hover::before, :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) .link-primary:focus::before { width: 100%; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) a.link-primary::after,
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) .link-primary::after {
  content: "›";
  position: static;
  display: inline-block;
  background: none;
  width: auto; height: auto;
  margin: 0 0 0 4px;
  color: inherit;
  font-weight: 600;
  line-height: 1;
}
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) a.link-primary:hover::after,
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support) .link-primary:hover::after { width: auto; transform: translateX(4px); }

/* =====================================================================
   Checklists with icon bullets (mirrors employer-overview.html's cs-bullets)
   ===================================================================== */
.cs-bullets__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

.cs-bullets__icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00594f;
  margin-top: 2px;
}
.cs-bullets__title { color: #000; font-size: 1rem; }
.cs-bullets__desc  { color: #6b6b6b; font-size: 0.9375rem; line-height: 1.5; }
.cs-bullets--gold .cs-bullets__icon { color: #80641f; }

/* =====================================================================
   Employee Eligibility and Requirements
   ===================================================================== */
.cs-eligibility { border-top: 1px solid #c3c3c3; padding: 3rem 0; }
.cs-eligibility__body { color: #6b6b6b; line-height: 1.6; list-style-type: disc; }

/* Numbered lists — custom left-aligned counter instead of the native
   ::marker, whose right/end alignment within its box is inconsistent
   across browsers and reads as right-aligned. */
.cs-pi-section ol, .cs-pi-panel ol { list-style: none; counter-reset: cs-ol; }
.cs-pi-section ol > li, .cs-pi-panel ol > li { counter-increment: cs-ol; position: relative; padding-left: 1.5em; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.cs-pi-section ol > li::before, .cs-pi-panel ol > li::before {
  content: counter(cs-ol) ".";
  position: absolute;
  left: 0;
  text-align: left;
}

/* =====================================================================
   Hero — Add Employee Information
   ===================================================================== */
.cs-pi-hero {
  background-color: #ffffff;
  padding: 4rem 0 3rem;
  text-align: center;
}
.cs-pi-hero__title { font-size: 2.25rem; line-height: 1.2; color: #000000; margin-bottom: 1rem; }
.cs-pi-hero__rule {
  display: block;
  width: 100px; height: 4px;
  background-color: #347B73;
  border-radius: 2px;
  margin: 0.5rem auto 1.25rem;
}
.cs-pi-hero__lede { color: #6b6b6b; max-width: 720px; margin: 0 auto; font-weight: 500; }

/* =====================================================================
   Callout — "Looking for a more hands-off approach?"
   Background: primary green @ 5%, border: primary green @ 50%
   ===================================================================== */
.cs-pi-callout {
  background-color: rgba(0, 89, 79, 0.05);
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: start;
}
body.bootstrap5 .cs-pi-callout:has(> table) {
  display: block !important;
}
body.bootstrap5 .cs-pi-callout > table {
  width: 100%;
  border-collapse: collapse;
}
.cs-pi-callout__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.cs-pi-callout__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-pi-callout__icon img { width: 100%; height: 100%; }
.cs-pi-callout__text { flex: 1 1 auto; min-width: 0; }
.cs-pi-callout__title { font-weight: 600; color: #000000; margin-bottom: 0.25rem; font-size: 1rem; }
.cs-pi-callout__desc { color: #000000; margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.cs-pi-callout__action { flex-shrink: 0; }

.btn-white-outline {
  background-color: #ffffff;
  color: #00594f;
  border: 1px solid #00594f;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-white-outline:hover {
  background-color: #E5EEED;
  border-color: #00473F;
  color: #00473F;
}

@media (max-width: 767.98px) {
  .cs-pi-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .cs-pi-callout__action { align-self: flex-start; }
}

/* Gold variant — used for the inline "Tip" callout inside numbered steps */
.cs-pi-callout--gold {
  background-color: #F2F0E9;
  border-color: rgba(128, 100, 31, 0.35);
}
.cs-pi-callout--gold .cs-pi-callout__body { align-items: center; }
.cs-pi-callout--gold .cs-pi-callout__desc { color: #000000; }

/* Warning callout — left-accent variant for file-upload formatting warnings */
.cs-pi-warning {
  background-color: #ffffff;
  border: 1px solid #D3D3D3;
  border-left: 8px solid #C27800;
  border-radius: 0px;
  padding: 1rem 1.25rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.cs-pi-warning__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: #C27800; }
.cs-pi-warning__text { color: #000000; font-size: 1em; line-height: 1.5; margin: 0; }
.cs-pi-warning__text strong { color: #000000; }

/* HR divider in tab body (mirrors eligibilty-and-registration.html) */
.section-hr { border: none; border-top: 2px solid #c3c3c3; margin: 0; }

/* =====================================================================
   Need additional support? (ported verbatim from payroll-integrations.html)
   ===================================================================== */
.support-link { cursor: pointer; }
.arrow-wrapper { display: inline-flex; transition: transform 0.25s ease; }
.support-link:hover .arrow-wrapper { transform: translateX(6px); }
.support-link:hover p { text-decoration: underline; transition: transform 0.2s ease; }
.support-link p { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; }
.support-link:hover p { text-decoration-color: currentColor; }

.cs-pi-support {
  background-color: #F2F6F6;
  border-top: 1px solid rgba(0, 89, 79, 0.25);
  border-bottom: 1px solid rgba(0, 89, 79, 0.25);
  padding: 3rem 0;
}
.cs-pi-support__heading { text-align: left; color: #000000; margin-bottom: 1.5rem; }
/* Tablet — Bootstrap's col-lg-4/col-lg-8 stack the title above the cards
   before the mobile-only padding-bottom override below kicks in;
   restore the gap that .mb-0 zeroes out. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cs-pi-support__heading.mb-0 { margin-bottom: 1.5rem !important; }
}
.cs-pi-support__cards { display: flex; gap: 1.25rem; }
@media (min-width: 768px) { .cs-pi-support__cards { display: flex; gap: 1.25rem; } }
.cs-pi-support__card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.25);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 50%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cs-pi-support__card:hover { background-color: #F2F6F6; border-color: #00473F; }
.cs-pi-support__icon {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #846926;
}
.cs-pi-support__title { color: #000000; font-size: 1.125rem; margin-bottom: 0.5rem; }
.cs-pi-support__body { color: #6b6b6b; margin-bottom: 1rem; font-size: 0.9375rem; }

@media (max-width: 767.98px) {
  .cs-pi-support__cards { flex-direction: column; }
  .cs-pi-support__heading { text-align: center; padding-bottom: 24px; }
  .cs-pi-support__card { flex: 1 1 100%; }
}

/* =====================================================================
   "How to Add Your Employee Roster" — tab section
   (ported verbatim from payroll-integrations.html's cs-pi-tabs system)
   ===================================================================== */
.cs-pi-section { padding: 6rem 0 3rem; background-color: #F2F0E9; }
.cs-pi-section__header { text-align: center; margin-bottom: 2rem; }
.cs-pi-section__header h2 { color: #000000; }
.cs-pi-section__header p { color: #6b6b6b; max-width: 820px; margin: 0.75rem auto 0; }

.cs-pi-tabs { margin-top: 0; }

.cs-pi-tabs__row {
  display: none;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}
@media (min-width: 768px) { .cs-pi-tabs__row { display: flex; } }

.cs-pi-tab {
  flex: 1 1 220px;
  min-width: 0;
  background-color: #f2f0e9;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  text-align: start;
  display: flex; gap: 0.75rem; align-items: center;
  min-height: 64px;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: #00594f;
}
.cs-pi-tab:hover:not(.is-active) { background-color: #BFD5D3; }
.cs-pi-tab:hover:not(.is-active) .cs-pi-tab__title { color: #00473F; text-decoration: underline; }
.cs-pi-tab.is-active {
  background-color: #ffffff;
  color: #000000;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}
.cs-pi-tab:focus, .cs-pi-tab:focus-visible, .cs-pi-tab:active { outline: none; box-shadow: none; }

.cs-pi-tab__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #00594f;
}
.cs-pi-tab__labels { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cs-pi-tab__eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: #80641f;
  white-space: nowrap;
  padding-bottom: 4px;
}
.cs-pi-tab__title {
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
  white-space: normal;
  word-wrap: break-word;
}

.cs-pi-tabs__select { display: block; }
@media (min-width: 768px) { .cs-pi-tabs__select { display: none; } }
.cs-pi-tabs__select__label {
  display: block;
  font-size: 0.9375rem;
  color: #6b6b6b;
  margin-bottom: 0.5rem;
}
.cs-pi-tabs__select select {
  width: 100%;
  min-height: 60px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1px solid #D3D3D3;
  border-radius: 8px;
  background-color: #ffffff;
  color: #000000;
  font-weight: 400;
  font-size: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2300594f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
}
.cs-pi-tabs__select select:focus,
.cs-pi-tabs__select select:focus-visible,
.cs-pi-tabs__select select:active {
  outline: 1px solid #00594F;
  outline-offset: 0;
  border-color: #00594F;
  box-shadow: none;
}

.cs-pi-tab-body {
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 0 0 8px 8px;
  padding: 1.5rem 1.25rem;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .cs-pi-tab-body { padding: 2rem; border-top-left-radius: 0; border-top-right-radius: 0; }
}
@media (max-width: 767.98px) {
  .cs-pi-tab-body { border-radius: 8px; margin-top: 0.75rem; }
}

.cs-pi-panel { display: none; }
.cs-pi-panel.is-active { display: block; }
.cs-pi-panel-body { color: #6b6b6b; line-height: 1.6; }

/* =====================================================================
   FAQ section (mirrors eligibility-and-exemptions.html's cs-pi-faq)
   ===================================================================== */
.cs-pi-faq { padding: 3rem 0; background-color: #ffffff; }
.cs-pi-accordion { margin-bottom: 1.25rem; }
.cs-pi-accordion__header {
  display: flex; gap: 1rem; align-items: center;
  background-color: #ffffff;
  border: 1px solid #00594F;
  border-radius: 8px;
  padding: 1.25rem 1.25rem;
  cursor: pointer; width: 100%;
  text-align: start;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  color: #000000;
}
.cs-pi-accordion__header:hover { background-color: #E5EEED; border-color: #00473F; }
.cs-pi-accordion__header:hover .cs-pi-accordion__title { color: #00473F; text-decoration: underline; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__header { border-color: #00594f; }
.cs-pi-accordion__title { flex: 1; font-weight: 600; color: #00594f; }
.cs-pi-accordion__chevron { flex-shrink: 0; color: #00594f; transition: transform 0.2s ease; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__chevron { transform: rotate(180deg); }
.cs-pi-accordion__body { display: none; padding: 1.75rem; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__body { display: block; }

/* Accordion image container — consistent 480×300 max, responsive, no distortion */
.cs-pi-img-wrap {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 8 / 5;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cs-pi-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Zoomable accordion screenshots — click to enlarge */
.cs-pi-zoomable { cursor: zoom-in; }
.cs-pi-zoom-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 89, 79, 0.8);
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  padding: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.cs-pi-zoomable-wrap:hover .cs-pi-zoom-overlay { opacity: 1; }

/* FPO placeholder — stands in for a screenshot inside .cs-pi-img-wrap */
.cs-pi-fpo {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}

/* Embedded tab video — consistent square-cornered border across every state/tab */
.cs-pi-video-frame { border: 2px solid #c3c3c3; border-radius: 0 !important; overflow: hidden; }
.cs-pi-video-frame iframe { border-radius: 0 !important; }

/* React-exported interaction hooks (ported from src/app/App.tsx) */
[data-name="SupportCard"],
[data-name="Card"],
[data-name="Accordion/expanded"],
[data-name="Accordion/collapsed"] {
  transition: background-color 0.15s ease;
  cursor: pointer;
}
[data-name^="Step="] {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}
[data-name="chevron-up"], [data-name="chevron-down"] { transition: transform 0.3s ease; }
[data-name="Accordions"] { display: flex !important; flex-direction: column !important; gap: 24px !important; }
[data-name="Accordion/expanded"] > .overflow-hidden > .d-flex,
[data-name="Accordion/collapsed"] > .overflow-hidden > .d-flex {
  padding: 24px !important;
  min-height: 80px;
  align-items: center;
}
[data-name^="Step="] > .overflow-hidden > .d-flex { padding: 24px !important; }
[data-name^="Step="] [data-name="Step"], [data-name^="Step="] .row { align-items: flex-start !important; }
[data-name="Accordion/expanded"]:hover, [data-name="Accordion/collapsed"]:hover { background-color: #E5EEED !important; }
[data-name="Accordion/expanded"]:hover .accordion-border-overlay,
[data-name="Accordion/collapsed"]:hover .accordion-border-overlay { border-color: #00473F !important; }
[data-name="Accordion/expanded"]:hover [data-name="Text Container"] p,
[data-name="Accordion/collapsed"]:hover [data-name="Text Container"] p { color: #00473F !important; text-decoration: underline; }
[data-name="Toggle Switch"] button { cursor: pointer; }
[data-name="Toggle Switch"] button:focus-visible { outline: 2px solid rgba(0, 89, 79, 0.3); outline-offset: 2px; }
[data-name="QuickViewToggle"] { align-items: center !important; flex-wrap: nowrap !important; }
[data-name="Toggle Switch"] > p { white-space: nowrap; margin: 0 !important; }
@media (max-width: 1300px) { [data-name="Toggle Switch"] > p { white-space: normal; text-align: start; } }
[data-name="StepText"] > h3 { flex: 1 1 0; min-width: 0; }
[data-name="Group"], [data-name="Accordions"], [data-name="StepsContainer"] {
  width: 100% !important; max-width: 100% !important;
}
[data-name="Text Container"] > p { width: 100% !important; }
[data-name^="Step="] [data-name="Steps"] { width: 100% !important; max-width: 100% !important; }
.accordion-border-overlay { border: 1px solid #00594f; }
.pointer-events-none { pointer-events: none; }

@media (max-width: 767.98px) {
  [data-name="Group"] [data-name="StepText"], [data-name="StepText"] {
    flex-direction: column !important; align-items: stretch !important; gap: 16px !important;
  }
  [data-name="StepText"] > p, [data-name="StepText"] > div { width: 100% !important; min-width: 0 !important; }
  [data-name="StepsContainer"] [data-name="Row"] { flex-direction: column !important; gap: 16px !important; height: auto !important; }
  [data-name^="Step="] [data-name="Step"] { flex-direction: column !important; gap: 24px !important; }
  [data-name="Accordion"] [data-name^="Step="] > div > div { padding: 16px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  [data-name="StepText"] > p, [data-name="StepText"] > div { flex: 1 1 0; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; }
  [data-name="StepsContainer"] [data-name="Row"] { height: auto !important; }
}
  

/* GRID hosts — strip Jahia section padding */
body.bootstrap5 section.cs-pi-hero-section-host,
body.bootstrap5 section:has(.cs-pi-hero),
body.bootstrap5 section.cs-eligibility-section-host,
body.bootstrap5 section:has(.cs-eligibility),
body.bootstrap5 section.cs-pi-section-host,
body.bootstrap5 section:has(.cs-pi-section),
body.bootstrap5 section.cs-pi-faq-section-host,
body.bootstrap5 section:has(.cs-pi-faq),
body.bootstrap5 section.cs-pi-support-section-host,
body.bootstrap5 section:has(.cs-pi-support),
body.bootstrap5 section.cs-pi-video-section-host,
body.bootstrap5 section:has(.cs-pi-video) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.cs-pi-hero svg, .cs-eligibility svg, .cs-pi-section svg, .cs-pi-faq svg, .cs-pi-support svg,
.cs-pi-hero img, .cs-eligibility img, .cs-pi-section img, .cs-pi-faq img, .cs-pi-support img {
  width: auto;
}

/* Bootstrap 5-equivalent utilities used by the demo markup (CAER is Bootstrap 3) */
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .container { width: 100%; padding-left: 12px; padding-right: 12px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .row::before, :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .row::after { display: none !important; content: none !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) [class*="col-"] { position: relative; width: 100%; padding-left: 12px; padding-right: 12px; box-sizing: border-box; float: none; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .col-12 { width: 100%; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .g-4 { --cs-g: 1.5rem; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .gap-2 { gap: 8px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .gap-3 { gap: 16px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .gap-4 { gap: 24px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .gap-5 { gap: 48px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .d-flex { display: flex !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .d-inline-flex { display: inline-flex !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .d-block { display: block !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .flex-column { flex-direction: column !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .flex-shrink-0 { flex-shrink: 0 !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .flex-fill { flex: 1 1 auto !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .align-items-start { align-items: flex-start !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .align-items-center { align-items: center !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .align-items-stretch { align-items: stretch !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .justify-content-center { justify-content: center !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .justify-content-between { justify-content: space-between !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .w-100 { width: 100% !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .h-100 { height: 100% !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .mb-0 { margin-bottom: 0 !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .mb-1 { margin-bottom: 4px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .mb-2 { margin-bottom: 8px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .mb-3 { margin-bottom: 16px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .mt-1 { margin-top: 4px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .p-2 { padding: 8px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .p-4 { padding: 24px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .px-3 { padding-left: 16px !important; padding-right: 16px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .ps-3 { padding-left: 16px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .fw-semibold { font-weight: 600 !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .fw-medium { font-weight: 500 !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .text-center { text-align: center !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .text-white { color: #fff !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .text-dark { color: #212529 !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .text-secondary { color: #6c757d !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .text-decoration-none { text-decoration: none !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .text-decoration-underline { text-decoration: underline !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .text-nowrap { white-space: nowrap !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .bg-white { background-color: #fff !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .rounded { border-radius: 8px !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .rounded-circle { border-radius: 50% !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .overflow-hidden { overflow: hidden !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .position-relative { position: relative !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .position-absolute { position: absolute !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .pointer-events-none { pointer-events: none !important; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .img-fluid { max-width: 100%; height: auto; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .list-unstyled { padding-left: 0; list-style: none; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .ratio { position: relative; width: 100%; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .ratio-16x9::before { display: block; padding-top: 56.25%; content: ""; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .ratio > iframe, :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) {
  :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .col-lg-6 { width: 50%; }
  :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .col-lg-4 { width: 33.333%; }
  :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .col-lg-8 { width: 66.666%; }
  :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .row.g-lg-5 { margin-left: -24px; margin-right: -24px; }
  :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .row.g-lg-5 > [class*="col-"] { padding-left: 24px; padding-right: 24px; }
}

:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) button.cs-pi-tab,
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) button.cs-pi-accordion__header {
  font-family: "Poppins", sans-serif;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .btn, :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) a.btn {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 16px;
  border-radius: 4px;
  text-transform: none;
  text-decoration: none;
  display: inline-block;
}
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .btn-primary {
  background-color: #00594f;
  border: 1px solid #00594f;
  color: #fff;
}
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) .btn-primary:hover {
  background-color: #004038;
  color: #fff;
}
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) h1, :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) h2, :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) h3, :is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) h4 { color: #000; font-family: "Poppins", sans-serif; }
:is(.cs-pi-hero, .cs-eligibility, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, #cs-pi-image-modal, #cs-video-modal) p { margin-top: 0; }

/* Beat CAER brand sheet (gold h1–h3, 1.25rem heading margins, 14px buttons)
   with the demo’s 16px-root spacing. */
.cs-pi-hero,
.cs-eligibility,
.cs-pi-section,
.cs-pi-faq,
.cs-pi-support {
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  overflow-x: hidden;
  max-width: 100%;
}
/* .row.w-100 is 100% wide plus Bootstrap’s negative gutters, so the page
   is a few pixels too wide and the trackpad pans it sideways. */
.cs-pi-section .row.w-100,
.cs-eligibility .row,
.cs-pi-support .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
}
.cs-pi-hero h1,
.cs-pi-hero h2,
.cs-pi-hero h3,
.cs-eligibility h1,
.cs-eligibility h2,
.cs-eligibility h3,
.cs-pi-section h1,
.cs-pi-section h2,
.cs-pi-section h3,
.cs-pi-faq h2,
.cs-pi-faq h3,
.cs-pi-support h2,
.cs-pi-support h3 {
  color: #000 !important;
  font-family: "Poppins", sans-serif !important;
  margin-top: 0 !important;
}

.cs-pi-hero {
  padding: 64px 0 48px !important;
  background-color: #ffffff !important;
}
.cs-pi-hero h1.cs-pi-hero__title {
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #000 !important;
  margin-bottom: 16px !important;
}
.cs-pi-hero__rule {
  margin: 8px auto 20px !important;
}
.cs-pi-hero__lede {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #6b6b6b !important;
  margin: 0 auto !important;
}
.cs-pi-callout {
  padding: 20px 24px !important;
  margin-top: 32px !important;
  gap: 24px !important;
}
.cs-pi-callout__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
.cs-pi-callout__desc {
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.cs-eligibility {
  padding: 48px 0 !important;
}
.cs-eligibility h3.section-title,
.cs-pi-section h2.section-title,
.cs-pi-faq h2.section-title,
.cs-pi-support h2.section-title {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #000 !important;
  margin-bottom: 16px !important;
}
@media (max-width: 575.98px) {
  .cs-eligibility h3.section-title,
  .cs-pi-section h2.section-title,
  .cs-pi-faq h2.section-title,
  .cs-pi-support h2.section-title {
    font-size: 26px !important;
  }
}
.cs-eligibility__body {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #6b6b6b !important;
}
.cs-eligibility ul.cs-eligibility__body {
  list-style-type: disc !important;
  padding-left: 20px !important;
  margin-bottom: 0 !important;
  color: #6b6b6b !important;
}
.cs-eligibility ul.cs-eligibility__body li {
  padding: 0 !important;
  color: #6b6b6b !important;
}
.cs-eligibility .cs-bullets__item {
  gap: 12px !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}
.cs-eligibility .cs-bullets__item + .cs-bullets__item {
  margin-top: 0 !important;
}
.cs-eligibility .cs-bullets__title {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #000 !important;
  margin: 0 !important;
}

.cs-pi-section {
  padding: 96px 0 48px !important;
}
.cs-pi-section__header {
  margin-bottom: 32px !important;
}
.cs-pi-section__header h2.section-title {
  margin-bottom: 0 !important;
}
.cs-pi-tab {
  font-size: 16px !important;
  padding: 14px 20px !important;
}
.cs-pi-tab__title {
  font-size: 16px !important;
  font-weight: 600 !important;
}
.cs-pi-tab__eyebrow {
  font-size: 14px !important;
}
.cs-pi-panel-body,
.cs-pi-section p,
.cs-pi-section li {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
.cs-pi-section ol > li,
.cs-pi-panel ol > li {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.cs-pi-faq {
  padding: 48px 0 !important;
}
.cs-pi-faq .cs-pi-section__header h2.section-title {
  margin-bottom: 0 !important;
}
.cs-pi-accordion {
  margin-bottom: 20px !important;
}
.cs-pi-accordion__header {
  font-size: 16px !important;
  padding: 20px !important;
}
.cs-pi-accordion__title {
  font-size: 16px !important;
  font-weight: 600 !important;
}
.cs-pi-accordion__body {
  padding: 28px !important;
}
.cs-pi-accordion__body p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

.cs-pi-support {
  padding: 48px 0 !important;
}
.cs-pi-support__heading {
  font-size: 24px !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .cs-pi-support__heading.mb-0 { margin-bottom: 24px !important; }
}
@media (max-width: 767.98px) {
  .cs-pi-support__heading { padding-bottom: 24px !important; }
}
.cs-pi-support__title {
  font-size: 18px !important;
  margin-bottom: 8px !important;
}
.cs-pi-support__body {
  font-size: 15px !important;
  margin-bottom: 16px !important;
}
.cs-pi-support__card {
  padding: 24px !important;
}
.cs-pi-support__cards {
  gap: 20px !important;
}

.cs-pi-callout--gold {
  padding: 20px 24px !important;
}
.cs-pi-warning {
  padding: 16px 20px !important;
}
.cs-pi-warning__text {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.btn-white-outline {
  font-size: 16px !important;
  padding: 8px 16px !important;
}
.cs-pi-tab-body {
  padding: 24px 20px !important;
}
@media (min-width: 768px) {
  .cs-pi-tab-body { padding: 32px !important; }
}



/* Payroll Provider Integration — from
   https://ascensus-gs-ux.github.io/ux-calsaversdemo-beta/ and
   employers/payroll-integrations.html
   Loaded when .cs-ppi is on the page. */

/* =====================================================================
   Shared brand tokens, headings, reusable components
   (mirrors employer-overview.html so both pages stay visually aligned)
   ===================================================================== */

.cs-ppi { background-color: #ffffff; }
.cs-ppi h1, .cs-ppi h2, .cs-ppi h3, .cs-ppi h4 { color: #000000; }
.cs-ppi svg, .cs-ppi img { width: auto; }

/* Constrain inner content to 2/3 of viewport on desktop, centered.
   Section background colors stay full-width since they're on the <section> element. */
@media (min-width: 1025px) {
  .cs-ppi.cs-pi-hero > .container,
  .cs-ppi.cs-pi-section > .container,
  .cs-ppi.cs-pi-video > .container,
  .cs-ppi.cs-pi-support > .container {
    max-width: 66.666%;
  }
}

/* Section title — 2rem h2 across the site */
.cs-ppi .section-title { font-size: 1.5rem; line-height: 1.25; color: #000000; }
@media (max-width: 575.98px) { .cs-ppi .section-title { font-size: 1.625rem; } }

/* Link styling — solid green, hover green, animated underline from center,
   chevron after, weight 500. !important required because Bootstrap 5.3's
   .cs-ppi .link-primary forces blue with !important. */
.cs-ppi .link-primary {
  color: #00594f !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
}
.cs-ppi .link-primary:hover, .cs-ppi .link-primary:focus {
  color: #00473F !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.cs-ppi .support-link {
  cursor: pointer;
}

.cs-ppi .arrow-wrapper {
  display: inline-flex;
  transition: transform 0.25s ease;
}

.cs-ppi .support-link:hover .cs-ppi .arrow-wrapper {
  transform: translateX(6px);
}

.cs-ppi .support-link:hover p {
  text-decoration: underline;
  transition: transform 0.2s ease;
}

.cs-ppi .support-link p {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}

.cs-ppi .support-link:hover p {
  text-decoration-color: currentColor;
}

.cs-ppi .link-primary::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: auto;
  width: 0; height: 1px;
  background-color: currentColor;
  transition: all 0.5s;
}
.cs-ppi .link-primary:hover::before, .cs-ppi .link-primary:focus::before { width: 100%; }
.cs-ppi a.link-primary::after, .cs-ppi .link-primary::after {
  content: "›";
  position: static;
  display: inline-block;
  background: none;
  width: auto; height: auto;
  transition: transform 0.2s ease;
  margin: 0 0 0 4px;
  color: inherit;
  transition: none;
  font-weight: 600;
  line-height: 1;
}
.cs-ppi a.link-primary:hover::after, .cs-ppi .link-primary:hover::after { width: auto; transform: translateX(4px);}

/* Solid-white secondary button variant */
.cs-ppi body.bootstrap5 .btn-secondary-white { background-color: #ffffff; }

/* Video modal — black h3 title at weight 400, primary-green close button */
.cs-modal-title { color: #000000; font-weight: 400; font-size: 1.5rem; line-height: 1.3; margin: 0; }
.cs-modal-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300594f'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
  opacity: 1;
}
.cs-modal-close:hover, .cs-modal-close:focus { opacity: 0.75; }

/* Zoomable screenshot images */
.cs-pi-zoomable { cursor: zoom-in; }
.cs-pi-zoom-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 89, 79, 0.8);
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  padding: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.cs-pi-zoomable-wrap:hover .cs-pi-zoom-overlay { opacity: 1; }

/* Accordion image container — consistent 480×300 max, responsive, no distortion */
.cs-pi-img-wrap {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 8 / 5;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cs-pi-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* =====================================================================
   Hero — Payroll Provider Integration
   ===================================================================== */
.cs-pi-hero {
  background-color: #ffffff;
  padding: 4rem 0 3rem;
  text-align: center;
}
.cs-pi-hero__title { font-size: 2.25rem; line-height: 1.2; color: #000000; margin-bottom: 1rem; }
.cs-pi-hero__rule {
  display: block;
  width: 100px; height: 4px;
  background-color: #347B73;
  border-radius: 2px;
  margin: 0.5rem auto 1.25rem;
}
.cs-pi-hero__lede { color: #6b6b6b; max-width: 720px; margin: 0 auto; font-weight: 500; }

/* =====================================================================
   Section header — "Choose an integration type to learn more"
   ===================================================================== */
.cs-pi-section { padding: 2rem 0 3rem; background-color: #F2F0E9; }
.cs-pi-section__header { text-align: center; margin-bottom: 2rem; }
.cs-pi-section__header h2 { color: #000000; }
.cs-pi-section__header p { color: #6b6b6b; max-width: 820px; margin: 0.75rem auto 0; }

/* =====================================================================
   Integration type radio cards (360° / 180°)
   ===================================================================== */
.cs-pi-radios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .cs-pi-radios { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.cs-pi-radio {
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.25);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  display: flex; flex-direction: column; gap: 1rem;
  text-align: start;
  width: 100%;
}
.cs-pi-radio__head {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-height: 50px;
}
.cs-pi-radio:hover { background-color: #F2F6F6; border-color: #00473F; }
.cs-pi-radio.is-active { border: 2px solid #00594f; padding: calc(1.25rem - 1px) calc(1.5rem - 1px); }
/* Remove the browser-default blue focus/active ring on the radio buttons */
.cs-pi-radio:focus,
.cs-pi-radio:focus-visible,
.cs-pi-radio:active {
  outline: none;
  box-shadow: none;
}

.cs-pi-radio__selection {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid #1a1a1a;
  background-color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-pi-radio.is-active .cs-pi-radio__selection { border: 2px solid #1a1a1a; }
.cs-pi-radio.is-active .cs-pi-radio__selection::after {
  content: "";
  width: 14px; height: 14px; border-radius: 50%; background-color: #1a1a1a;
}

.cs-pi-radio__icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 50%;
  background-color: #343a40;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 0.15s ease;
}
.cs-pi-radio.is-active .cs-pi-radio__icon { background-color: #00594f; }
.cs-pi-radio__icon-stack {
  display: grid;
  grid-template-columns: repeat(3, 8px);
  gap: 2px;
  width: 28px;
  height: 22px;
}
.cs-pi-radio__icon-stack svg { width: 100%; height: 100%; display: block; }

.cs-pi-radio__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cs-pi-radio__eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: #80641f;
}
.cs-pi-radio__title { color: #000000; font-size: 1.125rem; margin-bottom: 0.75rem; }
.cs-pi-radio__body { color: #000000; margin: 0; font-size: 0.9375rem; line-height: 1.5; }

/* =====================================================================
   Tab navigation (desktop tabs / mobile select)
   ===================================================================== */
.cs-pi-tabs { margin-top: 2rem; }

/* Desktop tab row — flex with stretch so every tab in the row matches the
   tallest sibling's height (when a long title wraps), and all bottoms butt
   against the panel's top edge. */
.cs-pi-tabs__row {
  display: none;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}
@media (min-width: 768px) { .cs-pi-tabs__row { display: flex; } }

.cs-pi-tab {
  /* Equal-share sizing: each tab targets 220px but may shrink below that
     on tablet/small-desktop widths to avoid overflow. min-width: 0 is the
     flex escape hatch that lets it shrink below its content's natural width. */
  flex: 1 1 220px;
  min-width: 0;
  background-color: #f2f0e9;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  text-align: start;
  /* Icon centers vertically with the label text. Equal tab heights still
     come from .cs-pi-tabs__row's align-items: stretch above, so all tab
     bottoms continue to butt against the panel. */
  display: flex; gap: 0.75rem; align-items: center;
  min-height: 64px;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: #00594f;
}
/* Let the title wrap when its tab shrinks below the content's natural width */
.cs-pi-tab__labels { flex: 1 1 auto; min-width: 0; }
.cs-pi-tab__title { white-space: normal; word-wrap: break-word; }
.cs-pi-tab:hover:not(.is-active) {
  background-color: #BFD5D3;
}
.cs-pi-tab:hover:not(.is-active) .cs-pi-tab__title { color: #00473F; text-decoration: underline; }
.cs-pi-tab.is-active {
  background-color: #ffffff;
  color: #000000;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}

.cs-pi-tab__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #00594f;
}
.cs-pi-tab__labels { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cs-pi-tab__eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: #80641f;
  white-space: nowrap;
  padding-bottom: 4px;
}
.cs-pi-tab__title {
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
}

/* Mobile tab dropdown */
.cs-pi-tabs__select { display: block; }
@media (min-width: 768px) { .cs-pi-tabs__select { display: none; } }
.cs-pi-tabs__select__label {
  display: block;
  font-size: 0.9375rem;
  color: #6b6b6b;
  margin-bottom: 0.5rem;
}
.cs-pi-tabs__select select {
  width: 100%;
  min-height: 60px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1px solid #D3D3D3;
  border-radius: 8px;
  background-color: #ffffff;
  color: #000000;
  font-weight: 400;
  font-size: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2300594f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
}
/* Replace the browser-default blue focus/active ring with a 1px primary-green one */
.cs-pi-tabs__select select:focus,
.cs-pi-tabs__select select:focus-visible,
.cs-pi-tabs__select select:active {
  outline: 1px solid #00594F;
  outline-offset: 0;
  border-color: #00594F;
  box-shadow: none;
}
/* Tab body container */
.cs-pi-tab-body {
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 0 0 8px 8px;
  padding: 1.5rem 1.25rem;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .cs-pi-tab-body { padding: 2rem; border-top-left-radius: 0; border-top-right-radius: 0; }
}
@media (max-width: 767.98px) {
  .cs-pi-tab-body { border-radius: 8px; margin-top: 0.75rem; } 
.cs-pi-support__cards {
flex-direction: column;
  }
   .cs-pi-support__heading { text-align: center; padding-bottom: 24px;}
   
  .cs-pi-support__card {
flex: 1 1 100%;
  }

  
  .cs-pi-pricing {
flex-direction: column;
  }

  .cs-pi-pricing__column {
  flex: 0 0 auto !important;
  width: 100%;
min-height: auto;
  }


}

/* Panels — only the active one shows */
.cs-pi-panel { display: none; }
.cs-pi-panel.is-active { display: block; }

/* =====================================================================
   Quick-view toggle label spacing (switch itself is the .cs-ppi [data-name="Toggle
   Switch"] React-faithful markup, styled inline per instance)
   ===================================================================== */
.cs-pi-toggle-p { margin-bottom: 0 !important; }

/* =====================================================================
   Accordions (used inside several tabs)
   ===================================================================== */
.cs-pi-accordion { margin-bottom: 1.25rem; }
.cs-pi-accordion__header {
  display: flex; gap: 1rem; align-items: center;
  background-color: #ffffff;
  border: 1px solid #00594F;
  border-radius: 8px;
  padding: 1.25rem 1.25rem;
  cursor: pointer; width: 100%;
  text-align: start;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  color: #000000;
}
.cs-pi-accordion__header:hover { background-color: #E5EEED; border-color: #00473F; }
.cs-pi-accordion__header:hover .cs-pi-accordion__title { color: #00473F; text-decoration: underline; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__header { border-color: #00594f; }
.cs-pi-accordion__num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background-color: #80641f;
  color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.cs-pi-accordion__title { flex: 1; font-weight: 600; color: #00594f; }
.cs-pi-accordion__chevron { flex-shrink: 0; color: #00594f; transition: transform 0.2s ease; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__chevron { transform: rotate(180deg); }
.cs-pi-accordion__body {
  display: none;
  padding: 1.75rem;
}
.cs-pi-accordion.is-expanded .cs-pi-accordion__body { display: block; }
.cs-pi-accordion__step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .cs-pi-accordion__step { grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
}
.cs-pi-accordion__screenshot {
  width: 100%; height: auto;
  border: 1px solid #00594f;
  border-radius: 8px;
}

/* Provider search inside Tab 1 PII accordion */
.cs-pi-search { position: relative; width: 100%; }
.cs-pi-search__input {
  width: 100%;
  padding: 0.625rem 2.5rem 0.625rem 0.75rem;
  border: 1px solid #666666;
  border-radius: 6px;
  background-color: #ffffff;
  color: #000000;
}

 
.cs-pi-search__input::placeholder {
  position: relative;
  top: 1px;   /* tweak: 1–2px if needed */
}


.cs-pi-search__icon {
  position: absolute;
  top: 50%; right: 0.75rem;
  transform: translateY(-50%);
  color: #6b6b6b;
  pointer-events: none;
}
.cs-pi-search__results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #ffffff;
  border: 1px solid rgba(0,89,79,0.5);
  border-radius: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}
.cs-pi-search__results.is-open { display: block; }
.cs-pi-search__result {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: #000000;
  font-size: 0.9375rem;
}
.cs-pi-search__result:hover { background-color: #F2F6F6; color: #00594f; }
.cs-pi-validation { margin-top: 0.5rem; font-size: 0.9375rem; }
.cs-pi-validation--success { color: #1b6c2e; }
.cs-pi-validation--error { color: #b3261e; }

/* Pricing table — title + cards wrapped in a primary-green 25% bordered container */
.cs-pi-pricing-box {
  margin-top: 1.5rem;
  border: 1px solid rgba(0, 89, 79, 0.25);
  border-radius: 8px;
  padding: 1.25rem;
}
.cs-pi-pricing-box__title {
  color: #000000;
  font-weight: 400;
  margin-bottom: 1.25rem;
}

.cs-pi-pricing {
  display: flex;
  gap: 16px;
}

/* each “column card” */
.cs-pi-pricing__column { 
  flex: 1 1 auto;
  min-height: auto;
  border: 1px solid #d3d3d3;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* header */
.cs-pi-pricing__header {
  background: #f2f0e9;
  padding: 12px;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
}

/* value */
.cs-pi-pricing__cell {
  padding: 14px;
  text-align: center;
}

/* Body text utility for paragraphs in panels */
.cs-pi-panel-body { color: #6b6b6b; line-height: 1.6; }

/* Diagram image — cap width and center within its column */
.cs-pi-diagram {
  width: 100%;
  height: auto;
  display: block;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
   Interactions + hover states + responsive overrides
   (mirrors src/styles/theme.css and src/app/App.tsx's inline style block)
   ===================================================================== */

/* Base transitions for hover-able elements */
.cs-ppi [data-name="IntegrationRadios"],
.cs-ppi [data-name="SupportCard"],
.cs-ppi [data-name="Card"],
.cs-ppi [data-name="Accordion/expanded"],
.cs-ppi [data-name="Accordion/collapsed"] {
  transition: background-color 0.15s ease;
  cursor: pointer;
}

/* Accordion / expandable step bodies — smooth show/hide via max-height + opacity */
.cs-ppi [data-name^="Step="] {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}
.cs-ppi [data-name="chevron-up"],
.cs-ppi [data-name="chevron-down"] {
  transition: transform 0.3s ease;
}

/* Toggle OFF (quick view) — stack list items vertically on every breakpoint */
[data-toggle-state="off"] .cs-ppi [data-name="StepsContainer"] .cs-ppi [data-name="Row"] {
  flex-direction: column !important;
}

/* Accordion sizing — taller headers, generous body padding, 24px between items */
.cs-ppi [data-name="Accordions"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
.cs-ppi [data-name="Accordion/expanded"] > .overflow-hidden > .d-flex,
.cs-ppi [data-name="Accordion/collapsed"] > .overflow-hidden > .d-flex {
  padding: 24px !important;
  min-height: 80px;
  align-items: center;
}
.cs-ppi [data-name^="Step="] > .overflow-hidden > .d-flex {
  padding: 24px !important;
}
/* Body rows (text + screenshot) top-align */
.cs-ppi [data-name^="Step="] .cs-ppi [data-name="Step"],
.cs-ppi [data-name^="Step="] .row {
  align-items: flex-start !important;
}

/* Accordion hover — soft mint background + hover-green border.
   !important is required because the React markup uses Bootstrap's
   .bg-white utility on the same element (Bootstrap utilities are !important). */
.cs-ppi [data-name="Accordion/expanded"]:hover,
.cs-ppi [data-name="Accordion/collapsed"]:hover {
  background-color: #E5EEED !important;
}
.cs-ppi [data-name="Accordion/expanded"]:hover .cs-ppi .accordion-border-overlay,
.cs-ppi [data-name="Accordion/collapsed"]:hover .cs-ppi .accordion-border-overlay {
  border-color: #00473F !important;
}
.cs-ppi [data-name="Accordion/expanded"]:hover .cs-ppi [data-name="Text Container"] p,
.cs-ppi [data-name="Accordion/collapsed"]:hover .cs-ppi [data-name="Text Container"] p {
  color: #00473F !important;
  text-decoration: underline;
}

/* Toggle switch focus ring */
.cs-ppi [data-name="Toggle Switch"] button { cursor: pointer; }
.cs-ppi [data-name="Toggle Switch"] button:focus-visible {
  outline: 2px solid rgba(0, 89, 79, 0.3);
  outline-offset: 2px;
}

/* QuickViewToggle — vertically center label + toggle */
.cs-ppi [data-name="QuickViewToggle"] {
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.cs-ppi [data-name="Toggle Switch"] > p {
  white-space: nowrap;
  margin: 0 !important;
}
@media (max-width: 1300px) {
  .cs-ppi [data-name="Toggle Switch"] > p {
    white-space: normal;
    text-align: start;
  }
}

/* StepText — heading flexes alongside the toggle column on desktop */
.cs-ppi [data-name="StepText"] > h3 {
  flex: 1 1 0;
  min-width: 0;
}

/* Width-100 helpers for nested step content */
.cs-ppi [data-name="Group"],
.cs-ppi [data-name="Register/Novice"],
.cs-ppi [data-name="Register/Exerienced"],
.cs-ppi [data-name="Accordions"],
.cs-ppi [data-name="StepsContainer"] {
  width: 100% !important;
  max-width: 100% !important;
}
.cs-ppi [data-name="Text Container"] > p { width: 100% !important; }
.cs-ppi [data-name^="Step="] .cs-ppi [data-name="Steps"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ===== MOBILE breakpoint (<=767px) overrides ported from App.tsx ===== */
@media (max-width: 767.98px) {
  /* Stack heading + toggle vertically inside StepText */
  .cs-ppi [data-name="Group"] .cs-ppi [data-name="StepText"],
  .cs-ppi [data-name="StepText"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .cs-ppi [data-name="StepText"] > p,
  .cs-ppi [data-name="StepText"] > div {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Stack quick-view rows */
  .cs-ppi [data-name="StepsContainer"] .cs-ppi [data-name="Row"] {
    flex-direction: column !important;
    gap: 16px !important;
    height: auto !important;
  }
  /* Stack accordion step columns (text + screenshot) */
  .cs-ppi [data-name^="Step="] .cs-ppi [data-name="Step"] {
    flex-direction: column !important;
    gap: 24px !important;
  }
  /* Accordion bodies — full-width padding */
  .cs-ppi [data-name="Accordion"] .cs-ppi [data-name^="Step="] > div > div {
    padding: 16px !important;
  }
  /* Text wrapping safety net */
  p, span, div, a, button {
    min-width: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ===== TABLET breakpoint (768–1024) overrides ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* StepText — keep heading + toggle side-by-side but allow wrap */
  .cs-ppi [data-name="StepText"] > p,
  .cs-ppi [data-name="StepText"] > div {
    flex: 1 1 0;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .cs-ppi [data-name="StepsContainer"] .cs-ppi [data-name="Row"] {
    height: auto !important;
  }
}

/* Supporting classes pulled from the brand theme so the React-exported
   Bootstrap markup renders identically here. */
.cs-ppi .accordion-border-overlay { border: 1px solid #00594f; }
.cs-ppi .pointer-events-none { pointer-events: none; }

/* =====================================================================
   Video + Support sections (below tabs)
   ===================================================================== */
.cs-pi-video { padding: 3rem 0; }
.cs-pi-video__heading { color: #000000; font-size: 1.5rem; margin-bottom: 0.5rem; }
.cs-pi-video__lede { color: #6b6b6b; }
.cs-video {
  border: 1px solid #c3c3c3;
}
.cs-pi-video__caption { color: #6b6b6b; font-size: 0.9375rem; }

.cs-pi-support {
  background-color: #F2F6F6;
  border-top: 1px solid rgba(0, 89, 79, 0.25);
  border-bottom: 1px solid rgba(0, 89, 79, 0.25);
  padding: 3rem 0;
}
.cs-pi-support__heading { text-align: left; color: #000000; margin-bottom: 1.5rem; }
/* Tablet — Bootstrap's col-lg-4/col-lg-8 stack the title above the cards
   before the mobile-only padding-bottom override below kicks in;
   restore the gap that .mb-0 zeroes out. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cs-pi-support__heading.mb-0 { margin-bottom: 1.5rem !important; }
}
.cs-pi-support__cards { display: flex; gap: 1.25rem; }
.cs-pi-support__card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.25);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 50%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cs-pi-support__card:hover { background-color: #F2F6F6; border-color: #00473F; }
.cs-pi-support__icon {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #846926;
}
.cs-pi-support__title { color: #000000; font-size: 1.125rem; margin-bottom: 0.5rem; }
.cs-pi-support__body { color: #6b6b6b; margin-bottom: 1rem; font-size: 0.9375rem; }
  

/* GRID hosts */
body.bootstrap5 section.cs-ppi-section-host,
body.bootstrap5 section:has(.cs-ppi) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

.cs-ppi {
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.cs-ppi *, .cs-ppi *::before, .cs-ppi *::after { box-sizing: border-box; }

/* Bootstrap 5 utilities used by the demo (CAER is Bootstrap 3) */
.cs-ppi .container { width: 100%; padding-left: 12px; padding-right: 12px; margin-left: auto; margin-right: auto; }
.cs-ppi .row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
.cs-ppi .row::before, .cs-ppi .row::after { display: none !important; content: none !important; }
.cs-ppi [class*="col-"] { position: relative; width: 100%; padding-left: 12px; padding-right: 12px; float: none; }
.cs-ppi .col-12 { width: 100%; }
.cs-ppi .d-none { display: none !important; }
.cs-ppi .d-flex { display: flex !important; }
.cs-ppi .d-inline-flex { display: inline-flex !important; }
.cs-ppi .d-block { display: block !important; }
.cs-ppi .flex-column { flex-direction: column !important; }
.cs-ppi .flex-shrink-0 { flex-shrink: 0 !important; }
.cs-ppi .flex-fill { flex: 1 1 auto !important; }
.cs-ppi .align-items-start { align-items: flex-start !important; }
.cs-ppi .align-items-center { align-items: center !important; }
.cs-ppi .align-items-stretch { align-items: stretch !important; }
.cs-ppi .align-self-start { align-self: flex-start !important; }
.cs-ppi .justify-content-center { justify-content: center !important; }
.cs-ppi .justify-content-between { justify-content: space-between !important; }
.cs-ppi .w-100 { width: 100% !important; }
.cs-ppi .h-100 { height: 100% !important; }
.cs-ppi .mb-0 { margin-bottom: 0 !important; }
.cs-ppi .mb-1 { margin-bottom: 4px !important; }
.cs-ppi .mb-2 { margin-bottom: 8px !important; }
.cs-ppi .mb-3 { margin-bottom: 16px !important; }
.cs-ppi .mb-4 { margin-bottom: 24px !important; }
.cs-ppi .mt-2 { margin-top: 8px !important; }
.cs-ppi .mt-3 { margin-top: 16px !important; }
.cs-ppi .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.cs-ppi .p-0 { padding: 0 !important; }
.cs-ppi .p-2 { padding: 8px !important; }
.cs-ppi .p-4 { padding: 24px !important; }
.cs-ppi .px-3 { padding-left: 16px !important; padding-right: 16px !important; }
.cs-ppi .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.cs-ppi .gap-1 { gap: 4px !important; }
.cs-ppi .gap-2 { gap: 8px !important; }
.cs-ppi .gap-3 { gap: 16px !important; }
.cs-ppi .gap-4 { gap: 24px !important; }
.cs-ppi .gap-5 { gap: 48px !important; }
.cs-ppi .fw-semibold { font-weight: 600 !important; }
.cs-ppi .fw-medium { font-weight: 500 !important; }
.cs-ppi .fst-italic { font-style: italic !important; }
.cs-ppi .text-center { text-align: center !important; }
.cs-ppi .text-white { color: #fff !important; }
.cs-ppi .text-dark { color: #212529 !important; }
.cs-ppi .text-secondary { color: #6c757d !important; }
.cs-ppi .text-decoration-none { text-decoration: none !important; }
.cs-ppi .text-decoration-underline { text-decoration: underline !important; }
.cs-ppi .text-nowrap { white-space: nowrap !important; }
.cs-ppi .bg-white { background-color: #fff !important; }
.cs-ppi .bg-transparent { background-color: transparent !important; }
.cs-ppi .border-0 { border: 0 !important; }
.cs-ppi .rounded { border-radius: 8px !important; }
.cs-ppi .rounded-circle { border-radius: 50% !important; }
.cs-ppi .rounded-pill { border-radius: 50rem !important; }
.cs-ppi .overflow-hidden { overflow: hidden !important; }
.cs-ppi .position-relative { position: relative !important; }
.cs-ppi .position-absolute { position: absolute !important; }
.cs-ppi .pointer-events-none { pointer-events: none !important; }
.cs-ppi .img-fluid { max-width: 100%; height: auto; }
.cs-ppi .ratio { position: relative; width: 100%; }
.cs-ppi .ratio-16x9::before { display: block; padding-top: 56.25%; content: ""; }
.cs-ppi .ratio > iframe, .cs-ppi .ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 576px) {
  .cs-ppi .flex-sm-row { flex-direction: row !important; }
  .cs-ppi .align-items-sm-center { align-items: center !important; }
}
@media (min-width: 768px) {
  .cs-ppi .col-md-6 { width: 50%; }
  .cs-ppi .flex-md-row { flex-direction: row !important; }
  .cs-ppi .justify-content-md-between { justify-content: space-between !important; }
}
@media (min-width: 992px) {
  .cs-ppi .col-lg-6 { width: 50%; }
  .cs-ppi .col-lg-4 { width: 33.333%; }
  .cs-ppi .col-lg-8 { width: 66.666%; }
  .cs-ppi .flex-lg-row { flex-direction: row !important; }
  .cs-ppi .order-lg-1 { order: 1; }
  .cs-ppi .order-lg-2 { order: 2; }
}

/* Exact demo type/spacing at 16px root (beats add-employee.css !important) */
.cs-ppi.cs-pi-hero,
.cs-ppi .cs-pi-hero {
  padding: 64px 0 48px !important;
  background-color: #ffffff !important;
  text-align: center !important;
  margin: 0 !important;
}
.cs-ppi .cs-pi-hero__title {
  font-size: 36px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #000000 !important;
  margin: 0 0 16px !important;
  font-family: "Poppins", sans-serif !important;
}
.cs-ppi .cs-pi-hero__rule { margin: 8px auto 20px !important; }
.cs-ppi .cs-pi-hero__lede {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #6b6b6b !important;
  margin: 0 auto !important;
}
.cs-ppi.cs-pi-section,
.cs-ppi .cs-pi-section {
  padding: 32px 0 48px !important;
  background-color: #F2F0E9 !important;
  margin: 0 !important;
}
.cs-ppi .cs-pi-section__header { text-align: center; margin-bottom: 32px !important; }
.cs-ppi .cs-pi-section__header h2.section-title,
.cs-ppi h2.section-title {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #000000 !important;
  margin: 0 !important;
  font-family: "Poppins", sans-serif !important;
}
@media (max-width: 575.98px) {
  .cs-ppi h2.section-title { font-size: 26px !important; }
}
.cs-ppi .cs-pi-section__header p {
  color: #6b6b6b !important;
  max-width: 820px;
  margin: 12px auto 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.cs-ppi .cs-pi-radios { gap: 16px !important; }
@media (min-width: 768px) {
  .cs-ppi .cs-pi-radios { gap: 24px !important; }
}
.cs-ppi .cs-pi-radio { padding: 20px 24px !important; gap: 16px !important; }
.cs-ppi .cs-pi-radio.is-active { padding: 19px 23px !important; }
.cs-ppi .cs-pi-radio__eyebrow { font-size: 14px !important; letter-spacing: 1px !important; }
.cs-ppi .cs-pi-radio__title { font-size: 18px !important; margin-bottom: 12px !important; color: #000 !important; }
.cs-ppi .cs-pi-radio__body { font-size: 15px !important; line-height: 1.5 !important; color: #000 !important; margin: 0 !important; }
.cs-ppi .cs-pi-tabs { margin-top: 32px !important; }
.cs-ppi .cs-pi-tab {
  padding: 14px 20px !important;
  gap: 12px !important;
  min-height: 64px !important;
  font-size: 16px !important;
}
.cs-ppi .cs-pi-tab__eyebrow { font-size: 14px !important; padding-bottom: 4px !important; }
.cs-ppi .cs-pi-tab__title { font-size: 16px !important; font-weight: 600 !important; }
.cs-ppi .cs-pi-tab-body { padding: 24px 20px !important; }
@media (min-width: 768px) {
  .cs-ppi .cs-pi-tab-body { padding: 32px !important; }
}
.cs-ppi .cs-pi-panel-body,
.cs-ppi .cs-pi-panel p {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
.cs-ppi h3 {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #000 !important;
  font-family: "Poppins", sans-serif !important;
  margin-top: 0 !important;
}
.cs-ppi .cs-pi-accordion { margin-bottom: 20px !important; }
.cs-ppi .cs-pi-accordion__header { padding: 20px !important; gap: 16px !important; }
.cs-ppi .cs-pi-accordion__title { font-size: 16px !important; font-weight: 600 !important; }
.cs-ppi .cs-pi-accordion__body { padding: 28px !important; }
.cs-ppi .cs-pi-pricing-box { margin-top: 24px !important; padding: 20px !important; }
.cs-ppi .cs-pi-pricing-box__title { margin-bottom: 20px !important; }
.cs-ppi .cs-pi-pricing { gap: 16px !important; }
.cs-ppi .cs-pi-pricing__header { padding: 12px !important; }
.cs-ppi .cs-pi-pricing__cell { padding: 14px !important; }
.cs-ppi.cs-pi-video,
.cs-ppi .cs-pi-video { padding: 48px 0 !important; margin: 0 !important; background-color: #fff !important; }
.cs-ppi .cs-pi-video__heading {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #000 !important;
  margin: 0 0 8px !important;
  font-family: "Poppins", sans-serif !important;
}
.cs-ppi .cs-pi-video__lede { font-size: 16px !important; color: #6b6b6b !important; }
.cs-ppi .cs-pi-video__caption { font-size: 15px !important; color: #6b6b6b !important; }
.cs-ppi.cs-pi-support,
.cs-ppi .cs-pi-support {
  padding: 48px 0 !important;
  margin: 0 !important;
  background-color: #F2F6F6 !important;
}
.cs-ppi .cs-pi-support__heading {
  font-size: 24px !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  color: #000 !important;
  font-family: "Poppins", sans-serif !important;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .cs-ppi .cs-pi-support__heading.mb-0 { margin-bottom: 24px !important; }
}
@media (max-width: 767.98px) {
  .cs-ppi .cs-pi-support__heading { padding-bottom: 24px !important; text-align: center; }
}
.cs-ppi .cs-pi-support__cards { gap: 20px !important; }
.cs-ppi .cs-pi-support__card { padding: 24px !important; }
.cs-ppi .cs-pi-support__icon { margin-bottom: 16px !important; }
.cs-ppi .cs-pi-support__title { font-size: 18px !important; margin-bottom: 8px !important; }
.cs-ppi .cs-pi-support__body { font-size: 15px !important; margin-bottom: 16px !important; }
.cs-ppi .row.w-100 { margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; }
.cs-ppi .btn, .cs-ppi a.btn {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 16px;
  border-radius: 4px;
  text-transform: none;
}
.cs-ppi .btn-primary { background-color: #00594f; border: 1px solid #00594f; color: #fff; }
.cs-ppi .btn-primary:hover { background-color: #004038; color: #fff; }

/* Video / image modals (also tagged cs-ppi) */
.cs-ppi .cs-modal-title { color: #000; font-weight: 400; font-size: 24px; line-height: 1.3; margin: 0; }
.cs-ppi .close.cs-modal-close { opacity: 1; color: #00594f; }


/* ---- extra employer pages (eligibility, enrollment, contributions, deductions, support, administrators) ---- */

/* ---- eligibility-and-exemptions.html ---- */



/* Colors */
:root {
  --green: #00594f;
  --green-dark: #00473f;
  --green-light: #e5eeed;
  --gold: #80641f;
  --gold-text: #846926;
  --cream: #f2f0e9;
  --support-bg: #f2f6f6;
  --footer-bg: #565958;
  --gray-text: #6b6b6b;
}

/* Global link color — override Bootstrap blue, underline grows from center */




.btn-green::after, .btn-white-outline::after, .link-arrow::after, .cs-pi-support__card::after { content: none; }
body.bootstrap5 #accessible-main .link-primary, body.bootstrap5 #accessible-main .link-primary:active { color: var(--green) !important; text-decoration: none; font-weight: 600;}
body.bootstrap5 #accessible-main .link-primary:hover { color: var(--green-dark) !important; }


/* ── Hero ── */
.hero-section { background: #fff; padding: 80px 0; text-align: center; }
.hero-section h1 { font-size: 34px; font-weight: 500; letter-spacing: 0.6px; color: #000; margin-bottom: 16px; }
.hero-underline { width: 100px; height: 4px; background: #347b73; border-radius: 2px; margin: 0 auto; }

/* ── Who Must Register / Exemptions section ── */
.eligibility-section { background: #fff; padding-bottom: 80px; }
.eligibility-section .inner { margin: 0 auto; padding: 0 8px; display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
@media (min-width: 768px) { .eligibility-section .inner { flex-direction: row; } }
@media (min-width: 1025px) { .eligibility-section .inner { max-width: 66.666%; }  }
.elig-card { flex: 1; width: 100%; }
.elig-divider { background: #c3c3c3; flex-shrink: 0; width: 100%; height: 1px; }
@media (min-width: 768px) { .elig-divider { width: 1px; height: auto; align-self: stretch; } }

.icon-circle { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-circle-green { background: var(--green); }
.icon-circle-gold { background: var(--gold); }
.elig-card-header { display: flex; gap: 16px; align-items: flex-start; }
.elig-card-body { flex: 1; }
.elig-card-body h2 { font-size: 20px; font-weight: 500; letter-spacing: 1px; margin-bottom: 16px; }
.elig-card-body p { font-size: 16px; line-height: 24px; letter-spacing: 1px; }
.who-register-list { list-style: none; padding: 0; margin: 0; }
.who-register-list li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; font-size: 16px; line-height: 24px; letter-spacing: 1px; }
.who-register-list li::before { content: "→"; color: var(--green); font-size: 16px; line-height: 24px; flex-shrink: 0; font-weight: 400; }
.who-register-list li > span { flex: 1; }
.who-register-list li:last-child { margin-bottom: 0; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 600; font-size: 16px; letter-spacing: 1px; text-decoration: none; padding: 8px 0; border: none; background: none; cursor: pointer; }
.link-arrow span:first-child { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; }
.link-arrow:hover span:first-child { text-decoration-color: currentColor; }
.link-arrow:hover .arrow-wrapper { transform: translateX(6px); }
.exemption-list { list-style: none; padding: 0; margin-bottom: 16px; }
.exemption-list li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; font-size: 16px; line-height: 24px; letter-spacing: 1px; }
.exemption-list li::before { content: "→"; color: var(--gold-text); font-size: 16px; line-height: 24px; flex-shrink: 0; font-weight: 400; }
.exemption-list li.exemption-sub-item { display: list-item; list-style: disc; margin-left: 72px; margin-bottom: 8px; font-size: 16px; line-height: 24px; letter-spacing: 1px; }
.exemption-list li.exemption-sub-item::before { content: none; }
.exemption-list li.exemption-sub-item::marker { color: #000; }

/* ── Watch Overview ── */
.cs-pi-video { padding: 3rem 0; background: var(--cream); }
.cs-pi-video__heading { color: #000000; font-size: 1.5rem; font-weight: 500; margin-bottom: 0.75rem; }
.cs-pi-video__lede { color: #000000; font-size: 1rem; line-height: 1.6; }
.cs-video { border: 1px solid #c3c3c3; }
.cs-pi-video__caption { color: var(--gray-text); font-size: 1rem; }
.btn-green { background: var(--green); color: #fff; border: 1px solid var(--green-dark); border-radius: 4px; padding: 8px 16px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 1px; text-decoration: none; display: inline-block; }
.btn-green:hover { color: #fff; background-color: var(--green-dark); border-color: var(--green-dark); }
.btn-white-outline:hover { background-color: var(--green-light); border-color: var(--green-dark); color: var(--green-dark); }

/* ── cs-pi Tab system ── */
.cs-pi-section { padding: 2rem 0 3rem; background-color: #F2F0E9; }
.cs-pi-section__header { text-align: center; margin-bottom: 2rem; }
.cs-pi-faq { padding: 3rem 0; background-color: #ffffff; }
.cs-pi-section h3, .cs-pi-panel h3 { color: #000000; font-size: 1.25rem; }

.cs-pi-tabs { margin-top: 2rem; }
.cs-pi-tabs__row { display: none; flex-wrap: nowrap; gap: 12px; width: fit-content; align-items: stretch; }
@media (min-width: 768px) { .cs-pi-tabs__row { display: flex; } }
.cs-pi-tab { flex: 0 0 auto; background-color: #f2f0e9; border: 1px solid rgba(0,89,79,0.5); border-radius: 8px 8px 0 0; border-bottom: none; padding: 0.875rem 1.25rem; cursor: pointer; text-align: start; display: flex; gap: 0.75rem; align-items: center; min-height: 64px; transition: background-color 0.15s ease, color 0.15s ease; color: #00594f; }
.cs-pi-tab__labels { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cs-pi-tab__title { font-weight: 600; font-size: 1rem; color: inherit; white-space: normal; word-wrap: break-word; }
.cs-pi-tab:hover:not(.is-active) { background-color: #BFD5D3; }
.cs-pi-tab:hover:not(.is-active) .cs-pi-tab__title { color: #00473F; text-decoration: underline; }
.cs-pi-tab.is-active { background-color: #ffffff; color: #000000; position: relative; z-index: 2; margin-bottom: -1px; }
.cs-pi-tab__icon { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.cs-pi-tab:focus, .cs-pi-tab:focus-visible, .cs-pi-tab:active { outline: none; box-shadow: none; }

.cs-pi-tabs__select { display: block; }
@media (min-width: 768px) { .cs-pi-tabs__select { display: none; } }
.cs-pi-tabs__select__label { display: block; font-size: 1rem; color: #6b6b6b; margin-bottom: 0.5rem; }
.cs-pi-tabs__select select { width: 100%; min-height: 60px; padding: 0.75rem 2.5rem 0.75rem 1rem; border: 1px solid #D3D3D3; border-radius: 8px; background-color: #ffffff; color: #000000; font-size: 1rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2300594f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; }
.cs-pi-tabs__select select:focus { outline: 1px solid #00594F; border-color: #00594F; box-shadow: none; }



@media (max-width: 767.98px) { .eligibility-section .inner { padding: 0 24px; } }

.cs-pi-panel { display: none; }
.cs-pi-panel.is-active { display: block; }

/* ── Toggle ── */
.cs-pi-toggle-p { margin-bottom: 0 !important; }

/* ── Accordions ── */
.cs-pi-accordion { margin-bottom: 1.25rem; }
.cs-pi-accordion__header { display: flex; gap: 1rem; align-items: center; background-color: #ffffff; border: 1px solid #00594F; border-radius: 8px; padding: 1.25rem; cursor: pointer; width: 100%; text-align: start; transition: background-color 0.15s ease, border-color 0.15s ease; color: #000000; }
.cs-pi-accordion__header:hover { background-color: #E5EEED; border-color: #00473F; }
.cs-pi-accordion__header:hover .cs-pi-accordion__title { color: #00473F; text-decoration: underline; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__header { border-color: #00594f; }
.cs-pi-accordion__num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background-color: #80641f; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.cs-pi-accordion__title { flex: 1; font-weight: 600; color: #00594f; }
.cs-pi-accordion__chevron { flex-shrink: 0; color: #00594f; transition: transform 0.2s ease; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__chevron { transform: rotate(180deg); }


.cs-pi-accordion__step { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .cs-pi-accordion__step { grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } }
.cs-pi-accordion__screenshot { width: 100%; height: auto; border: 1px solid #BFD5D3; border-radius: 8px; display: block; }

/* Zoomable accordion screenshots — click to enlarge */
.cs-pi-zoomable-wrap { position: relative; cursor: zoom-in; }
.cs-pi-zoom-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 89, 79, 0.8);
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  padding: 0.75rem;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.cs-pi-zoomable-wrap:hover .cs-pi-zoom-overlay { opacity: 1; }

/* ── Quick-view list items ── */
.cs-pi-quickcard { display: flex; gap: 1rem; margin: 16px; align-items: flex-start; }
.cs-pi-quickcard__num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background-color: #80641f; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.cs-pi-quickcard__title { font-weight: 600; color: #000000; font-size: 1rem; margin-bottom: 0.25rem; }
.cs-pi-quickcard__desc { color: #6b6b6b; font-size: 1rem; line-height: 1.5; margin-bottom: 0; }

/* ── Post-registration banner ── */
.post-reg { margin-top: 40px; }
.post-reg-title { font-weight: 600; font-size: 16px; letter-spacing: 1px; margin-bottom: 4px; }
.post-reg-text { font-size: 16px; line-height: 24px; color: var(--gray-text); letter-spacing: 1px; margin-bottom: 24px; }
.payroll-banner {
  background: #e5eeed;
  border: 1px solid rgba(0,89,79,0.25);
  border-radius: 8px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.payroll-banner-text h4 { font-weight: 600; font-size: 16px; letter-spacing: 1px; margin-bottom: 8px; color: #000; }
.payroll-banner-text p { font-size: 16px; line-height: 24px; letter-spacing: 1px; margin: 0; }
.payroll-banner-text p a { color: #00594f; font-weight: 600; }
.btn-white-outline { background: #fff; color: var(--green); border: 1px solid var(--green); border-radius: 4px; padding: 8px 16px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; text-decoration: none; }
@media (max-width: 767.98px) {
  .payroll-banner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .payroll-banner .btn-white-outline { align-self: flex-start; }
}

/* HR divider in tab body */
.section-hr { border: none; border-top: 1px solid #c3c3c3; margin: 40px 0; }

/* ── Chatbot ── */
.chatbot { position: fixed; bottom: 35px; right: 32px; z-index: 999; }
.chat-icon { width: 75px; height: 75px; background: var(--green); border-radius: 100px; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }

/* ── Support section ── */
body.bootstrap5 #accessible-main .section-title { font-size: 1.5rem; line-height: 1.25; color: #000000; }
.support-link { cursor: pointer; }
.arrow-wrapper { display: inline-flex; transition: transform 0.25s ease; }
.support-link:hover .arrow-wrapper { transform: translateX(6px); }
.support-link p { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; }
.support-link:hover p { text-decoration-color: currentColor; }
.cs-pi-support { background-color: #F2F6F6; border-top: 1px solid rgba(0,89,79,0.25); border-bottom: 1px solid rgba(0,89,79,0.25); padding: 3rem 0; }
.cs-pi-support__heading { text-align: left; color: #000000; margin-bottom: 1.5rem; }
/* Tablet — Bootstrap's col-lg-4/col-lg-8 stack the title above the cards
   before the mobile-only padding-bottom override elsewhere kicks in;
   restore the gap that .mb-0 zeroes out. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cs-pi-support__heading.mb-0 { margin-bottom: 1.5rem !important; }
}
.cs-pi-support__cards { display: flex; gap: 1.25rem; }
.cs-pi-support__card { background-color: #ffffff; background-image: none; border: 1px solid rgba(0,89,79,0.25); border-radius: 8px; padding: 1.5rem; flex: 1 1 50%; transition: background-color 0.15s ease, border-color 0.15s ease; text-decoration: none; color: inherit; display: block; }
.cs-pi-support__card:hover { background-color: #F2F6F6; border-color: #00473F; }
.cs-pi-support__icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: #846926; }
.cs-pi-support__title { color: #000000; font-size: 1.125rem; margin-bottom: 0.5rem; }

/* ---- employee-enrollment-period.html ---- */

/* =====================================================================
   Shared brand tokens, headings
   (mirrors add-employee-information.html / payroll-integrations.html
   so pages stay visually aligned)
   ===================================================================== */


body.bootstrap5 #accessible-main h1, body.bootstrap5 #accessible-main h2, body.bootstrap5 #accessible-main h3, body.bootstrap5 #accessible-main h4 { color: #000000; }
body.bootstrap5 #accessible-main section svg, body.bootstrap5 #accessible-main section img { width: auto; }

/* Constrain inner content to 2/3 of viewport on desktop, centered. */
@media (min-width: 1025px) {
  .cs-pi-hero > .container,
  .cs-pi-section > .container,
  .cs-pi-faq > .container,
  .cs-pi-support > .container {
    max-width: 66.666%;
  }
}

/* Section title — 2rem h2 across the site */
body.bootstrap5 #accessible-main .section-title { font-size: 1.5rem; line-height: 1.25; color: #000000; }
@media (max-width: 575.98px) { .section-title { font-size: 1.625rem; } }

/* Link styling — solid green, hover green, animated underline from center,
   chevron after, weight 500. */
body.bootstrap5 #accessible-main .link-primary {
  color: #00594f !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
}
body.bootstrap5 #accessible-main .link-primary:hover, body.bootstrap5 #accessible-main .link-primary:focus {
  color: #00473F !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
body.bootstrap5 #accessible-main .link-primary::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: auto;
  width: 0; height: 1px;
  background-color: currentColor;
  transition: all 0.5s;
}
body.bootstrap5 #accessible-main .link-primary:hover::before, body.bootstrap5 #accessible-main .link-primary:focus::before { width: 100%; }
body.bootstrap5 #accessible-main section a.link-primary::after, section a.link-primary:after,
body.bootstrap5 #accessible-main .link-primary::after, body.bootstrap5 #accessible-main .link-primary:after {
  content: "›";
  position: static;
  display: inline-block;
  background: none;
  width: auto; height: auto;
  margin: 0 0 0 4px;
  color: inherit;
  font-weight: 600;
  line-height: 1;
}
body.bootstrap5 #accessible-main section a.link-primary:hover::after, section a.link-primary:hover:after,
body.bootstrap5 #accessible-main .link-primary:hover::after, body.bootstrap5 #accessible-main .link-primary:hover:after { width: auto; transform: translateX(4px); }

/* =====================================================================
   Hero — Employee Enrollment Period
   ===================================================================== */
.cs-pi-hero {
  background-color: #ffffff;
  padding: 4rem 0 3rem;
  text-align: center;
}
.cs-pi-hero__title { font-size: 2.25rem; line-height: 1.2; color: #000000; margin-bottom: 1rem; }
.cs-pi-hero__rule {
  display: block;
  width: 100px; height: 4px;
  background-color: #347B73;
  border-radius: 2px;
  margin: 0.5rem auto 1.25rem;
}
.cs-pi-hero__lede { color: #6b6b6b; max-width: 720px; margin: 0 auto; font-weight: 500; }

/* =====================================================================
   Callout — info banner (reused from add-employee-information.html)
   Background: primary green @ 5%, border: primary green @ 50%
   ===================================================================== */
.cs-pi-callout {
  background-color: rgba(0, 89, 79, 0.05);
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: start;
}
/* Modifier — white background, light-gray border, black left accent, square corners */
.cs-pi-callout--flush {
  background-color: #ffffff;
  border: 1px solid #D3D3D3;
  border-left: 8px solid #000000;
  border-radius: 0px;
}
.cs-pi-callout__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.cs-pi-callout__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-pi-callout__icon img { width: 100%; height: 100%; }
.cs-pi-callout__text { flex: 1 1 auto; min-width: 0; }
.cs-pi-callout__title { font-weight: 600; color: #000000; margin-bottom: 0.25rem; font-size: 1rem; }
.cs-pi-callout__desc { color: #000000; margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.cs-pi-callout__action { flex-shrink: 0; }

/* Inline step number — brand gold circle, white number, used within callout copy */
.cs-pi-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.cs-pi-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #80641f;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 767.98px) {
  .cs-pi-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .cs-pi-callout__action { align-self: flex-start; }
}

/* =====================================================================
   Light gold section — two-column content
   (cs-pi-section reused from payroll-integrations.html /
   add-employee-information.html; text classes reused from
   add-employee-information.html's cs-eligibility and
   employer-overview.html's cs-printable-card / cs-htr__divider)
   ===================================================================== */
.cs-pi-section { padding: 3rem 0 3rem; background-color: #F2F0E9; }
.cs-eligibility__
.cs-printable-card__title { color: #000; font-size: 1rem; }
.cs-printable-card__desc { color: #6b6b6b; font-size: 0.9375rem; line-height: 1.5; }
.cs-htr__divider { border-top: 1px solid rgba(0, 89, 79, 0.25); opacity: 1; margin-top: 0; }

/* Secondary (outline) button — reused from add-employee-information.html */
.btn-white-outline {
  background-color: #ffffff;
  color: #00594f;
  border: 1px solid #00594f;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-white-outline:hover {
  background-color: #E5EEED;
  border-color: #00473F;
  color: #00473F;
}

/* =====================================================================
   Frequently Asked Questions (ported verbatim from eligibility-and-exemptions.html)
   ===================================================================== */
.cs-pi-faq { padding: 3rem 0; background-color: #ffffff; }
.cs-pi-section__header { text-align: center; margin-bottom: 2rem; }
.cs-pi-section__header h2 { color: #000000; }
.cs-pi-section__header p { color: #6b6b6b; max-width: 820px; margin: 0.75rem auto 0; }

.cs-pi-accordion { margin-bottom: 1.25rem; }
.cs-pi-accordion__header {
  display: flex; gap: 1rem; align-items: center;
  background-color: #ffffff;
  border: 1px solid #00594F;
  border-radius: 8px;
  padding: 1.25rem;
  cursor: pointer; width: 100%;
  text-align: start;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  color: #000000;
}
.cs-pi-accordion__header:hover { background-color: #E5EEED; border-color: #00473F; }
.cs-pi-accordion__header:hover .cs-pi-accordion__title { color: #00473F; text-decoration: underline; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__header { border-color: #00594f; }
.cs-pi-accordion__title { flex: 1; font-weight: 600; color: #00594f; }
.cs-pi-accordion__chevron { flex-shrink: 0; color: #00594f; transition: transform 0.2s ease; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__chevron { transform: rotate(180deg); }


/* =====================================================================
   Need additional support? (ported verbatim from payroll-integrations.html)
   ===================================================================== */
.support-link { cursor: pointer; }
.arrow-wrapper { display: inline-flex; transition: transform 0.25s ease; }
.support-link:hover .arrow-wrapper { transform: translateX(6px); }
.support-link:hover p { text-decoration: underline; transition: transform 0.2s ease; }
.support-link p { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; }
.support-link:hover p { text-decoration-color: currentColor; }

.cs-pi-support {
  background-color: #F2F6F6;
  border-top: 1px solid rgba(0, 89, 79, 0.25);
  border-bottom: 1px solid rgba(0, 89, 79, 0.25);
  padding: 3rem 0;
}
.cs-pi-support__heading { text-align: left; color: #000000; margin-bottom: 1.5rem; }
/* Tablet — Bootstrap's col-lg-4/col-lg-8 stack the title above the cards
   before the mobile-only padding-bottom override below kicks in;
   restore the gap that .mb-0 zeroes out. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cs-pi-support__heading.mb-0 { margin-bottom: 1.5rem !important; }
}
.cs-pi-support__cards { display: flex; gap: 1.25rem; }
.cs-pi-support__card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.25);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 50%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cs-pi-support__card:hover { background-color: #F2F6F6; border-color: #00473F; }
.cs-pi-support__icon {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #846926;
}
.cs-pi-support__title { color: #000000; font-size: 1.125rem; margin-bottom: 0.5rem; }

@media (max-width: 767.98px) {
  .cs-pi-support__cards { flex-direction: column; }
  .cs-pi-support__heading { text-align: center; padding-bottom: 24px; }
  .cs-pi-support__card { flex: 1 1 100%; }
}
  

/* ---- submitting-contributions.html ---- */

/* =====================================================================
   Shared brand tokens, headings
   (mirrors eligibilty-and-registration.html / payroll-integrations.html
   so this page stays visually aligned with the rest of the site)
   ===================================================================== */

body.bootstrap5 #accessible-main h1, body.bootstrap5 #accessible-main h2, body.bootstrap5 #accessible-main h3, body.bootstrap5 #accessible-main h4 { color: #000000; }
body.bootstrap5 #accessible-main section svg, body.bootstrap5 #accessible-main section img { width: auto; }

body.bootstrap5 #accessible-main .section-title { font-size: 1.5rem; line-height: 1.25; color: #000000; }
@media (max-width: 575.98px) { .section-title { font-size: 1.625rem; } }

/* Link styling — solid green, hover green, animated underline from center,
   chevron after, weight 500 (ported verbatim from payroll-integrations.html /
   add-employee-information.html). !important required because Bootstrap 5.3's
   body.bootstrap5 #accessible-main .link-primary forces blue with !important. */
body.bootstrap5 #accessible-main .link-primary {
  color: #00594f !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
}
body.bootstrap5 #accessible-main .link-primary:hover, body.bootstrap5 #accessible-main .link-primary:focus {
  color: #00473F !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
body.bootstrap5 #accessible-main .link-primary::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: auto;
  width: 0; height: 1px;
  background-color: currentColor;
  transition: all 0.5s;
}
body.bootstrap5 #accessible-main .link-primary:hover::before, body.bootstrap5 #accessible-main .link-primary:focus::before { width: 100%; }

/* Numbered lists — custom left-aligned counter instead of the native
   ::marker, whose right/end alignment within its box is inconsistent
   across browsers and reads as right-aligned (mirrors
   add-employee-information.html). */
ol { list-style: none; counter-reset: cs-ol; }
ol > li { counter-increment: cs-ol; position: relative; padding-left: 1.5em; padding-top: 0.25rem; padding-bottom: 0.25rem; }
ol > li::before {
  content: counter(cs-ol) ".";
  position: absolute;
  left: 0;
  text-align: left;
}
body.bootstrap5 #accessible-main section a.link-primary::after, section a.link-primary:after,
body.bootstrap5 #accessible-main .link-primary::after, body.bootstrap5 #accessible-main .link-primary:after {
  content: "›";
  position: static;
  display: inline-block;
  background: none;
  width: auto; height: auto;
  margin: 0 0 0 4px;
  color: inherit;
  font-weight: 600;
  line-height: 1;
}
body.bootstrap5 #accessible-main section a.link-primary:hover::after, section a.link-primary:hover:after,
body.bootstrap5 #accessible-main .link-primary:hover::after, body.bootstrap5 #accessible-main .link-primary:hover:after { width: auto; transform: translateX(4px); }

/* Video modal — black h3 title at weight 400, primary-green close button
   (ported verbatim from payroll-integrations.html) */
.cs-modal-title { color: #000000; font-weight: 400; font-size: 1.5rem; line-height: 1.3; margin: 0; }
.cs-modal-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300594f'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
  opacity: 1;
}
.cs-modal-close:hover, .cs-modal-close:focus { opacity: 0.75; }

/* =====================================================================
   Hero (ported verbatim from eligibilty-and-registration.html's .hero-section)
   ===================================================================== */
.hero-section { background: #fff; padding: 80px 0; text-align: center; }
.hero-section h1 { font-size: 34px; font-weight: 500; letter-spacing: 0.6px; color: #000; margin-bottom: 16px; }
.hero-underline { width: 100px; height: 4px; background: #347b73; border-radius: 2px; margin: 0 auto; }
.cs-pi-hero__lede { color: #6b6b6b; max-width: 720px; margin: 16px auto 0; font-weight: 500; }

/* =====================================================================
   Two-column section (ported verbatim from eligibilty-and-registration.html's
   .eligibility-section / .inner / .elig-card / .elig-card-header / .elig-divider)
   ===================================================================== */
.eligibility-section { background: #fff; padding-bottom: 40px; }
.eligibility-section .inner { margin: 0 auto; padding: 0 8px; display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
@media (min-width: 768px) { .eligibility-section .inner { flex-direction: row; } }
@media (min-width: 1025px) { .eligibility-section .inner { max-width: 66.666%; } }
@media (max-width: 767.98px) { .eligibility-section .inner { padding: 0 24px; } }

.elig-card { flex: 1; width: 100%; }
.elig-divider { background: #c3c3c3; flex-shrink: 0; width: 100%; height: 1px; }
@media (min-width: 768px) { .elig-divider { width: 1px; height: auto; align-self: stretch; } }

.icon-circle { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-circle-gold { background: #80641f; }

.elig-card-header { display: flex; gap: 16px; align-items: flex-start; }
.elig-card-body { flex: 1; }
.elig-card-body h2 { font-size: 20px; font-weight: 500; letter-spacing: 1px; margin-bottom: 16px; }
.elig-card-body p { font-size: 16px; line-height: 24px; letter-spacing: 1px; color: #6b6b6b; }

/* =====================================================================
   Checklist with gold checkmarks (ported verbatim from
   add-employee-information.html's .cs-bullets / .cs-bullets--gold)
   ===================================================================== */
.cs-bullets__item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.25rem 0; }
.cs-bullets__item + .cs-bullets__item { margin-top: 0.5rem; }
.cs-bullets__icon { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: #00594f; margin-top: 2px; }
.cs-bullets__title { color: #000; font-size: 1rem; }
.cs-bullets--gold .cs-bullets__icon { color: #80641f; }

/* =====================================================================
   "Go to ... Instructions" link (ported verbatim from
   eligibilty-and-registration.html's .link-arrow / .arrow-wrapper)
   ===================================================================== */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: #00594f; font-weight: 600; font-size: 16px; letter-spacing: 1px; text-decoration: none; padding: 8px 0; border: none; background: none; cursor: pointer; }
.link-arrow span:first-child { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; }
.link-arrow:hover span:first-child { text-decoration-color: currentColor; }
.arrow-wrapper { display: inline-flex; transition: transform 0.25s ease; }
.link-arrow:hover .arrow-wrapper { transform: translateX(6px); }

/* =====================================================================
   Frequently Asked Questions (ported verbatim from
   employee-enrollment-period.html / eligibility-and-exemptions.html)
   ===================================================================== */
@media (min-width: 1025px) { .cs-pi-faq > .container { max-width: 66.666%; } }
.cs-pi-faq { padding: 3rem 0; background-color: #ffffff; }

.cs-pi-accordion { margin-bottom: 1.25rem; }
.cs-pi-accordion__header {
  display: flex; gap: 1rem; align-items: center;
  background-color: #ffffff;
  border: 1px solid #00594F;
  border-radius: 8px;
  padding: 1.25rem;
  cursor: pointer; width: 100%;
  text-align: start;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  color: #000000;
}
.cs-pi-accordion__header:hover { background-color: #E5EEED; border-color: #00473F; }
.cs-pi-accordion__header:hover .cs-pi-accordion__title { color: #00473F; text-decoration: underline; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__header { border-color: #00594f; }
.cs-pi-accordion__title { flex: 1; font-weight: 600; color: #00594f; }
.cs-pi-accordion__chevron { flex-shrink: 0; color: #00594f; transition: transform 0.2s ease; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__chevron { transform: rotate(180deg); }


/* =====================================================================
   Need additional support? (ported verbatim from
   add-employee-information.html / payroll-integrations.html)
   ===================================================================== */
@media (min-width: 1025px) { .cs-pi-support > .container { max-width: 66.666%; } }
.support-link { cursor: pointer; }
.support-link:hover .arrow-wrapper { transform: translateX(6px); }
.support-link p { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; }
.support-link:hover p { text-decoration-color: currentColor; }

.cs-pi-support {
  background-color: #F2F6F6;
  border-top: 1px solid rgba(0, 89, 79, 0.25);
  border-bottom: 1px solid rgba(0, 89, 79, 0.25);
  padding: 3rem 0;
}
.cs-pi-support__heading { text-align: left; color: #000000; margin-bottom: 1.5rem; }
/* Below Bootstrap's lg breakpoint, .col-lg-4/.col-lg-8 stack the title
   above the cards — restore the gap that .mb-0 (used for desktop's
   side-by-side vertical centering) zeroes out. */
@media (max-width: 991.98px) {
  .cs-pi-support__heading.mb-0 { margin-bottom: 1.5rem !important; }
}
.cs-pi-support__cards { display: flex; gap: 1.25rem; }
.cs-pi-support__card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.25);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 50%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cs-pi-support__card:hover { background-color: #F2F6F6; border-color: #00473F; }
.cs-pi-support__icon {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #846926;
}
.cs-pi-support__title { color: #000000; font-size: 1.125rem; margin-bottom: 0.5rem; }

@media (max-width: 767.98px) {
  .cs-pi-support__cards { flex-direction: column; }
}

/* =====================================================================
   Callout — "Looking for a more hands-off approach?" (ported verbatim
   from add-employee-information.html's .cs-pi-callout)
   ===================================================================== */
@media (min-width: 1025px) { .cs-pi-callout-container { max-width: 66.666%; } }
.cs-pi-callout {
  background-color: rgba(0, 89, 79, 0.05);
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: start;
}
.cs-pi-callout__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.cs-pi-callout__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-pi-callout__icon img { width: 100%; height: 100%; }
.cs-pi-callout__text { flex: 1 1 auto; min-width: 0; }
.cs-pi-callout__title { font-weight: 600; color: #000000; margin-bottom: 0.25rem; font-size: 1rem; }
.cs-pi-callout__desc { color: #000000; margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.cs-pi-callout__action { flex-shrink: 0; }

.btn-white-outline {
  background-color: #ffffff;
  color: #00594f;
  border: 1px solid #00594f;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-white-outline:hover {
  background-color: #E5EEED;
  border-color: #00473F;
  color: #00473F;
}

@media (max-width: 767.98px) {
  .cs-pi-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .cs-pi-callout__action { align-self: flex-start; }
}

/* Gold variant — used for the inline "Tip" callout inside numbered steps
   (ported verbatim from add-employee-information.html) */
.cs-pi-callout--gold {
  background-color: #F2F0E9;
  border-color: rgba(128, 100, 31, 0.35);
}
.cs-pi-callout--gold .cs-pi-callout__body { align-items: center; }
.cs-pi-callout--gold .cs-pi-callout__desc { color: #000000; }

/* HR divider in tab body (ported verbatim from add-employee-information.html) */
.section-hr { border: none; border-top: 2px solid #c3c3c3; margin: 0; }

/* Video embed border box (ported verbatim from add-employee-information.html) */
.cs-pi-video-frame { border: 2px solid #c3c3c3; border-radius: 0 !important; overflow: hidden; }
.cs-pi-video-frame iframe { border-radius: 0 !important; }

/* Accordion image container — consistent 480×300 max, responsive, no distortion
   (ported verbatim from payroll-integrations.html) */
.cs-pi-img-wrap {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 8 / 5;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cs-pi-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Zoomable accordion screenshots — click to enlarge */
.cs-pi-zoomable { cursor: zoom-in; }
.cs-pi-zoom-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 89, 79, 0.8);
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  padding: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.cs-pi-zoomable-wrap:hover .cs-pi-zoom-overlay { opacity: 1; }

/* FPO placeholder — stands in for a screenshot inside .cs-pi-img-wrap
   (ported verbatim from add-employee-information.html) */
.cs-pi-fpo {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}

/* =====================================================================
   Tabs — ported verbatim from payroll-integrations.html
   (.cs-pi-section / .cs-pi-tabs / .cs-pi-tab / .cs-pi-tab-body /
   .cs-pi-panel / [data-name] toggle+accordion engine)
   ===================================================================== */
@media (min-width: 1025px) {
  .cs-pi-section > .container { max-width: 66.666%; }
}
.cs-pi-section { padding: 6rem 0 6rem; background-color: #F2F0E9; }
.cs-pi-section__header { text-align: center; margin-bottom: 2rem; }
.cs-pi-section__header h2 { color: #000000; }
.cs-pi-section__header p { color: #6b6b6b; max-width: 820px; margin: 0.75rem auto 0; }

.cs-pi-tabs { margin-top: 2rem; }
.cs-pi-tabs__row { display: none; flex-wrap: nowrap; gap: 12px; width: fit-content; align-items: stretch; }
@media (min-width: 768px) { .cs-pi-tabs__row { display: flex; } }

.cs-pi-tab {
  flex: 0 0 auto;
  background-color: #f2f0e9;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  text-align: start;
  display: flex; gap: 0.75rem; align-items: center;
  min-height: 64px;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: #00594f;
}
.cs-pi-tab:hover:not(.is-active) { background-color: #BFD5D3; }
.cs-pi-tab:hover:not(.is-active) .cs-pi-tab__title { color: #00473F; text-decoration: underline; }
.cs-pi-tab.is-active {
  background-color: #ffffff;
  color: #000000;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}

.cs-pi-tab__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #00594f;
}
.cs-pi-tab__labels { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cs-pi-tab__eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: #80641f;
  white-space: nowrap;
  padding-bottom: 4px;
}
.cs-pi-tab__title {
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
  white-space: normal;
  word-wrap: break-word;
}

.cs-pi-tabs__select { display: block; }
@media (min-width: 768px) { .cs-pi-tabs__select { display: none; } }
.cs-pi-tabs__select__label {
  display: block;
  font-size: 0.9375rem;
  color: #6b6b6b;
  margin-bottom: 0.5rem;
}
.cs-pi-tabs__select select {
  width: 100%;
  min-height: 60px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1px solid #D3D3D3;
  border-radius: 8px;
  background-color: #ffffff;
  color: #000000;
  font-weight: 400;
  font-size: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2300594f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
}
.cs-pi-tabs__select select:focus,
.cs-pi-tabs__select select:focus-visible,
.cs-pi-tabs__select select:active {
  outline: 1px solid #00594F;
  outline-offset: 0;
  border-color: #00594F;
  box-shadow: none;
}




.cs-pi-panel { display: none; }
.cs-pi-panel.is-active { display: block; }


/* Interactions + hover states + responsive overrides
   (mirrors src/styles/theme.css and src/app/App.tsx's inline style block) */
[data-name="IntegrationRadios"],
[data-name="SupportCard"],
[data-name="Card"],
[data-name="Accordion/expanded"],
[data-name="Accordion/collapsed"] {
  transition: background-color 0.15s ease;
  cursor: pointer;
}

[data-name^="Step="] {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}
[data-name="chevron-up"],
[data-name="chevron-down"] {
  transition: transform 0.3s ease;
}

[data-name="Accordions"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
[data-name="Accordion/expanded"] > .overflow-hidden > .d-flex,
[data-name="Accordion/collapsed"] > .overflow-hidden > .d-flex {
  padding: 24px !important;
  min-height: 80px;
  align-items: center;
}
[data-name^="Step="] > .overflow-hidden > .d-flex {
  padding: 24px !important;
}
[data-name^="Step="] [data-name="Step"],
[data-name^="Step="] .row {
  align-items: flex-start !important;
}

[data-name="Accordion/expanded"]:hover,
[data-name="Accordion/collapsed"]:hover {
  background-color: #E5EEED !important;
}
[data-name="Accordion/expanded"]:hover .accordion-border-overlay,
[data-name="Accordion/collapsed"]:hover .accordion-border-overlay {
  border-color: #00473F !important;
}
[data-name="Accordion/expanded"]:hover [data-name="Text Container"] p,
[data-name="Accordion/collapsed"]:hover [data-name="Text Container"] p {
  color: #00473F !important;
  text-decoration: underline;
}

[data-name="Group"],
[data-name="Register/Novice"],
[data-name="Accordions"] {
  width: 100% !important;
  max-width: 100% !important;
}
[data-name="Text Container"] > p { width: 100% !important; }
[data-name^="Step="] [data-name="Steps"] {
  width: 100% !important;
  max-width: 100% !important;
}
[data-name^="Step="] [data-name="Text"] li {
  margin-bottom: 0rem;
}
[data-name^="Step="] [data-name="Text"] li:last-child {
  margin-bottom: 0;
}
[data-name^="Step="] [data-name="Text"] ul ul ul li {
  margin-bottom: 0.15rem;
}
[data-name^="Step="] [data-name="Text"] ul ul ul li:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  [data-name^="Step="] [data-name="Step"] {
    flex-direction: column !important;
    gap: 24px !important;
  }
  [data-name="Accordion"] [data-name^="Step="] > div > div {
    padding: 16px !important;
  }
}

.accordion-border-overlay { border: 1px solid #00594f; }
.pointer-events-none { pointer-events: none; }
  

/* ---- setting-up-deductions.html ---- */

/* =====================================================================
   Shared brand tokens, headings
   (ported verbatim from submitting-contributions.html /
   eligibilty-and-registration.html so this page stays visually aligned
   with the rest of the site)
   ===================================================================== */

body.bootstrap5 #accessible-main h1, body.bootstrap5 #accessible-main h2, body.bootstrap5 #accessible-main h3, body.bootstrap5 #accessible-main h4 { color: #000000; }
body.bootstrap5 #accessible-main section svg, body.bootstrap5 #accessible-main section img { width: auto; }

body.bootstrap5 #accessible-main .section-title { font-size: 1.5rem; line-height: 1.25; color: #000000; }
@media (max-width: 575.98px) { .section-title { font-size: 1.625rem; } }

/* Link styling — solid green, hover green, animated underline from center,
   chevron after (ported verbatim from submitting-contributions.html) */
body.bootstrap5 #accessible-main .link-primary {
  color: #00594f !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
}
body.bootstrap5 #accessible-main .link-primary:hover, body.bootstrap5 #accessible-main .link-primary:focus {
  color: #00473F !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
body.bootstrap5 #accessible-main .link-primary::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: auto;
  width: 0; height: 1px;
  background-color: currentColor;
  transition: all 0.5s;
}
body.bootstrap5 #accessible-main .link-primary:hover::before, body.bootstrap5 #accessible-main .link-primary:focus::before { width: 100%; }
body.bootstrap5 #accessible-main section a.link-primary::after, section a.link-primary:after,
body.bootstrap5 #accessible-main .link-primary::after, body.bootstrap5 #accessible-main .link-primary:after {
  content: "›";
  position: static;
  display: inline-block;
  background: none;
  width: auto; height: auto;
  margin: 0 0 0 4px;
  color: inherit;
  font-weight: 600;
  line-height: 1;
}
body.bootstrap5 #accessible-main section a.link-primary:hover::after, section a.link-primary:hover:after,
body.bootstrap5 #accessible-main .link-primary:hover::after, body.bootstrap5 #accessible-main .link-primary:hover:after { width: auto; transform: translateX(4px); }

/* =====================================================================
   Hero (ported verbatim from submitting-contributions.html's .hero-section)
   ===================================================================== */
.hero-section { background: #fff; padding: 80px 0; text-align: center; }
.hero-section h1 { font-size: 34px; font-weight: 500; letter-spacing: 0.6px; color: #000; margin-bottom: 16px; }
.hero-underline { width: 100px; height: 4px; background: #347b73; border-radius: 2px; margin: 0 auto; }
.cs-pi-hero__lede { color: #6b6b6b; max-width: 720px; margin: 16px auto 0; font-weight: 500; }

/* =====================================================================
   Callout — "Looking for a more hands-off approach?" (ported verbatim
   from submitting-contributions.html's .cs-pi-callout)
   ===================================================================== */
@media (min-width: 1025px) { .cs-pi-callout-container { max-width: 66.666%; } }
.cs-pi-callout {
  background-color: rgba(0, 89, 79, 0.05);
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: start;
}
.cs-pi-callout__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.cs-pi-callout__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-pi-callout__icon img { width: 100%; height: 100%; }
.cs-pi-callout__text { flex: 1 1 auto; min-width: 0; }
.cs-pi-callout__title { font-weight: 600; color: #000000; margin-bottom: 0.25rem; font-size: 1rem; }
.cs-pi-callout__desc { color: #000000; margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.cs-pi-callout__action { flex-shrink: 0; }

.btn-white-outline {
  background-color: #ffffff;
  color: #00594f;
  border: 1px solid #00594f;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-white-outline:hover {
  background-color: #E5EEED;
  border-color: #00473F;
  color: #00473F;
}

@media (max-width: 767.98px) {
  .cs-pi-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .cs-pi-callout__action { align-self: flex-start; }
}

/* Gold variant — used for the inline "Tip" callout inside numbered steps
   (ported verbatim from add-employee-information.html) */
.cs-pi-callout--gold {
  background-color: #F2F0E9;
  border-color: rgba(128, 100, 31, 0.35);
}
.cs-pi-callout--gold .cs-pi-callout__body { align-items: center; }
.cs-pi-callout--gold .cs-pi-callout__desc { color: #000000; }

/* =====================================================================
   Tabs (ported verbatim from submitting-contributions.html /
   payroll-integrations.html's .cs-pi-section / .cs-pi-tabs system)
   ===================================================================== */
@media (min-width: 1025px) {
  .cs-pi-section > .container { max-width: 66.666%; }
}
.cs-pi-section { padding: 2rem 0 3rem; background-color: #F2F0E9; }
.cs-pi-section__header { text-align: center; margin-bottom: 2rem; }
.cs-pi-section__header h2 { color: #000000; }

.cs-pi-tabs { margin-top: 2rem; }
.cs-pi-tabs__row { display: flex; flex-wrap: nowrap; gap: 12px; width: fit-content; align-items: stretch; }

.cs-pi-tab {
  flex: 0 0 auto;
  background-color: #f2f0e9;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  padding: 0.875rem 1.25rem;
  cursor: default;
  pointer-events: none;
  text-align: start;
  display: flex; gap: 0.75rem; align-items: center;
  min-height: 64px;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: #00594f;
}
.cs-pi-tab:hover:not(.is-active) { background-color: #BFD5D3; }
.cs-pi-tab:hover:not(.is-active) .cs-pi-tab__title { color: #00473F; text-decoration: underline; }
.cs-pi-tab.is-active {
  background-color: #ffffff;
  color: #000000;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}
.cs-pi-tab:focus, .cs-pi-tab:focus-visible, .cs-pi-tab:active { outline: none; box-shadow: none; }

.cs-pi-tab__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #00594f;
}
.cs-pi-tab__labels { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cs-pi-tab__title {
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
  white-space: normal;
  word-wrap: break-word;
}


.cs-pi-tab-body li{
  list-style-type: disc;
}




.cs-pi-panel { display: none; }
.cs-pi-panel.is-active { display: block; }

/* =====================================================================
   Accordions — steps collapsed by default (ported verbatim from
   eligibility-and-exemptions.html's .cs-pi-accordion system)
   ===================================================================== */
.cs-pi-accordion { margin-bottom: 0; }
.cs-pi-accordion__header { display: flex; gap: 1rem; align-items: center; background-color: #ffffff; border: 1px solid #00594F; border-radius: 8px; padding: 1.25rem; cursor: pointer; width: 100%; text-align: start; transition: background-color 0.15s ease, border-color 0.15s ease; color: #000000; }
.cs-pi-accordion__header:hover { background-color: #E5EEED; border-color: #00473F; }
.cs-pi-accordion__header:hover .cs-pi-accordion__title { color: #00473F; text-decoration: underline; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__header { border-color: #00594f; }
.cs-pi-accordion__num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background-color: #80641f; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.cs-pi-accordion__title { flex: 1; font-weight: 600; color: #00594f; }
.cs-pi-accordion__chevron { flex-shrink: 0; color: #00594f; transition: transform 0.2s ease; }
.cs-pi-accordion.is-expanded .cs-pi-accordion__chevron { transform: rotate(180deg); }


/* =====================================================================
   Accordion screenshot — responsive image wrap with click-to-enlarge
   (ported verbatim from add-employee-information.html's
   .cs-pi-img-wrap / .cs-pi-zoomable system)
   ===================================================================== */
.cs-pi-img-wrap {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 8 / 5;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cs-pi-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cs-pi-zoomable { cursor: zoom-in; }
.cs-pi-zoom-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 89, 79, 0.8);
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  padding: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.cs-pi-zoomable-wrap:hover .cs-pi-zoom-overlay { opacity: 1; }

/* =====================================================================
   Warning callout — left-accent variant (ported verbatim from
   add-employee-information.html's .cs-pi-warning)
   ===================================================================== */
.cs-pi-warning {
  background-color: #ffffff;
  border: 1px solid #D3D3D3;
  border-left: 8px solid #C27800;
  border-radius: 0px;
  padding: 1rem 1.25rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.cs-pi-warning__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: #C27800; }
.cs-pi-warning__text { color: #000000; font-size: 0.9375rem; line-height: 1.5; margin: 0; }
.cs-pi-warning__text strong { color: #000000; }

/* =====================================================================
   Need additional support? (ported verbatim from
   submitting-contributions.html / add-employee-information.html)
   ===================================================================== */
@media (min-width: 1025px) { .cs-pi-support > .container { max-width: 66.666%; } }
.support-link { cursor: pointer; }
.support-link:hover .arrow-wrapper { transform: translateX(6px); }
.support-link p { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; }
.support-link:hover p { text-decoration-color: currentColor; }
.arrow-wrapper { display: inline-flex; transition: transform 0.25s ease; }

.cs-pi-support {
  background-color: #F2F6F6;
  border-top: 1px solid rgba(0, 89, 79, 0.25);
  border-bottom: 1px solid rgba(0, 89, 79, 0.25);
  padding: 3rem 0;
}
.cs-pi-support__heading { text-align: left; color: #000000; margin-bottom: 1.5rem; }
/* Below Bootstrap's lg breakpoint, .col-lg-4/.col-lg-8 stack the title
   above the cards — restore the gap that .mb-0 (used for desktop's
   side-by-side vertical centering) zeroes out. */
@media (max-width: 991.98px) {
  .cs-pi-support__heading.mb-0 { margin-bottom: 1.5rem !important; }
}
.cs-pi-support__cards { display: flex; gap: 1.25rem; }
.cs-pi-support__card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.25);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 50%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cs-pi-support__card:hover { background-color: #F2F6F6; border-color: #00473F; }
.cs-pi-support__icon {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #846926;
}
.cs-pi-support__title { color: #000000; font-size: 1.125rem; margin-bottom: 0.5rem; }

@media (max-width: 767.98px) {
  .cs-pi-support__cards { flex-direction: column; }
}
  

/* ---- support.html ---- */

/* =====================================================================
   Shared brand tokens
   (mirrors employer-overview.html / payroll-integrations.html so this
   page stays visually aligned with the rest of the /employers/ set)
   ===================================================================== */

body.bootstrap5 #accessible-main h1, body.bootstrap5 #accessible-main h2, body.bootstrap5 #accessible-main h3, body.bootstrap5 #accessible-main h4 { color: #000000; }
body.bootstrap5 #accessible-main section svg, body.bootstrap5 #accessible-main section img { width: auto; }

@media (min-width: 1025px) {
  .cs-er-hero > .container,
  .cs-htr > .container,
  .cs-rep-meet > .container,
  .cs-pi-support > .container {
    max-width: 66.666%;
  }
}

/* =====================================================================
   Hero — Employer Support
   ===================================================================== */
/* No section padding on any breakpoint — the photo column sits flush
   against the bottom edge so it butts up against the section below */
.cs-er-hero { position: relative; background-color: #ffffff; padding: 0; overflow: hidden; }

/* Full-width decorative background layer, sits over white. Fills the
   full height of the section on every device. Anchored left (the
   image's faded-white side) so the darker forest side doesn't cover
   the text on tablet/mobile the way centering did. */
.cs-er-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cs-er-hero__bg img {
  width: 100% !important;
  height: 100%;
  object-fit: contain;
  object-position: right;
}

/* Inner container sits above the background layer */
.cs-er-hero > .container { position: relative; z-index: 1; }

.cs-er-hero__inner {
  min-height: 500px;
}

@media (max-width: 767.98px) {
  .cs-er-hero__inner { min-height: 300px; }
}

.cs-er-hero__title {
  font-size: 1.75rem;
  line-height: 1.2;
  color: #000000;
}
@media (min-width: 768px) { .cs-er-hero__title { font-size: 2rem; } }
@media (min-width: 992px) { .cs-er-hero__title { font-size: 2.25rem; } }

/* Rule reused from the .cs-pi-hero__rule / .hero-underline pattern used
   on the other /employers/ pages, left-aligned instead of centered */
.cs-er-hero__rule {
  display: block;
  width: 100px;
  height: 4px;
  background-color: #347B73;
  border-radius: 2px;
  margin: 0 0 1.25rem;
}

.cs-er-hero__lede {
  color: #6b6b6b;
  font-weight: 500;
  max-width: 480px;
  margin: 0;
}

/* Employee photo — contained within its column, no cropping */
.cs-er-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: fill;
}

/* =====================================================================
   Tab section (ported verbatim from employer-overview.html's
   "How to register" .cs-htr system, minus the step number/eyebrow
   slots — these tabs are categories, not sequential steps)
   ===================================================================== */
/* Support resources only. Overview Getting Started (.cs-htr without search)
   has no section hairline in the demo. */
.cs-htr:has(.cs-htr-search) {
  background-color: #F2F6F6;
  border-top: 1px solid rgba(0, 89, 79, 0.25);
  border-bottom: 1px solid rgba(0, 89, 79, 0.25);
}

/* Do not reset .cs-htr__nav globally — that undoes overview Getting Started's
   desktop grid (tabs left, panel right) and stacks everything in one column. */
.cs-htr:has(.cs-htr-search) .cs-htr__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
}

.cs-htr__tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 78px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  color: #00594f;
}
.cs-htr__tab .cs-htr__title { color: #00594f; }
.cs-htr__tab.is-active,
.cs-htr__tab.is-active .cs-htr__title { color: #ffffff; }
.cs-htr__tab:hover:not(.is-active) {
  background-color: rgba(0, 89, 79, 0.1);
  border-color: #00473F;
  color: #00473F;
}
.cs-htr__tab:hover:not(.is-active) .cs-htr__title {
  text-decoration: underline;
}
.cs-htr__tab.is-active {
  background-color: #00594f;
  border-color: #00594f;
  color: #ffffff;
}

.cs-htr__labels {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.cs-htr__title { font-weight: 500; font-size: 1rem; }

.cs-htr__chevron { flex-shrink: 0; transition: transform 0.2s ease; }
.cs-htr__tab[aria-expanded="true"] .cs-htr__chevron { transform: rotate(180deg); }

.cs-htr__panel { display: none; }
.cs-htr__panel.is-active { display: block; }

.cs-htr__divider {
  border-top: 1px solid rgba(0, 89, 79, 0.25);
  opacity: 1;
  margin-top: 0;
}

/* Inline subhead inside a panel (e.g. "Employer Webinars") */
.cs-htr__panel-subhead {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: #000;
  font-size: 1rem;
  font-weight: 600;
}
.cs-htr__panel-subhead__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Support-page search (styled to match .cs-pi-search on payroll-integrations.html).
   Sits as the first item in .cs-htr__nav; margin-bottom stacks with the nav's
   own 0.75rem gap/row-gap to give exactly 24px before the first tab. */
.cs-htr-search { position: relative; width: 100%; margin-bottom: 0.75rem; }
.cs-htr-search__input {
  width: 100%;
  padding: 0.625rem 2.5rem 0.625rem 0.75rem;
  border: 1px solid #C3C3C3;
  border-radius: 6px;
  background-color: #ffffff;
  color: #000000;
}
.cs-htr-search__input::placeholder {
  position: relative;
  top: 1px;
}
/* .cs-pi-search__input on payroll-integrations.html leaves focus to the
   browser/OS default, which can render as an orange ring on some
   systems — override explicitly with the brand green instead. */
.cs-htr-search__input:focus {
  outline: none;
  border-color: #00594f;
  box-shadow: 0 0 0 0.2rem rgba(0, 89, 79, 0.15);
}
.cs-htr-search__icon {
  position: absolute;
  top: 50%; right: 0.75rem;
  transform: translateY(-50%);
  color: #6b6b6b;
  pointer-events: none;
}
.cs-htr-search__results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 6px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 20;
  display: none;
}
.cs-htr-search__results.is-open { display: block; }
.cs-htr-search__result {
  cursor: pointer;
  border: none;
  border-bottom: 1px solid rgba(0, 89, 79, 0.15);
}
.cs-htr-search__result:last-child { border-bottom: none; }
.cs-htr-search__result:hover,
.cs-htr-search__result:focus { background-color: #F2F6F6; color: #00594f; }
.cs-htr-search__result-label { color: #000000; font-size: 0.9375rem; }
.cs-htr-search__result:hover .cs-htr-search__result-label,
.cs-htr-search__result:focus .cs-htr-search__result-label { color: #00594f; }
.cs-htr-search__result-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #00594f;
  background-color: rgba(0, 89, 79, 0.1);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  flex-shrink: 0;
}
.cs-htr-search__empty { color: #6b6b6b; font-size: 0.9375rem; }

/* Momentary highlight applied to the matched card after a search jump.
   The outline is a second box-shadow layer (not the `outline` property)
   because outline-style can't transition from "none" — it would just
   pop in instantly instead of fading with the rest. Fades in over 0.4s
   so it's clearly noticeable, then .is-fading (added via JS after the
   hold period) fades it back out more slowly over 0.8s. */
.cs-htr-search__target-highlight {
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
  background-color: #E8F5E8 !important;
  box-shadow: 0 0 0 6px #E8F5E8, 0 0 0 8px #8CCF8D;
  border-radius: 0 !important;
}
.cs-htr-search__target-highlight.is-fading {
  transition: background-color 0.8s ease, box-shadow 0.8s ease;
  background-color: transparent !important;
  box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
}

/* Solid-white variant of the brand .btn-secondary (default is transparent) */
body.bootstrap5 .btn-secondary-white { background-color: #ffffff; }

/* Mobile: stacked accordion */
@media (max-width: 767.98px) {
  .cs-htr__labels { flex: 1 1 auto; min-width: 0; }
  .cs-htr__title { width: 100%; }
  .cs-htr__chevron { margin-left: auto; flex-shrink: 0; }

  .cs-htr__tab.is-active {
    background-color: #ffffff;
    border-color: rgba(0, 89, 79, 0.5);
    color: #00594f;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .cs-htr__tab.is-active .cs-htr__title { color: #00594f; }

  .cs-htr__panel.is-active {
    background-color: #ffffff;
    border: 1px solid rgba(0, 89, 79, 0.5);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 1.25rem;
    margin-top: -0.75rem;
  }
}

/* Tablet + Desktop: tabs left, single content panel right.
   5-row grid (search + 4 tabs) is ONLY for the employer support resources
   nav. Overview Getting Started has 4 tabs and must keep 4 rows — otherwise
   an empty 78px track sits under the last tab. */
@media (min-width: 768px) {
  .cs-htr:has(.cs-htr-search) .cs-htr__nav {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    grid-template-rows: auto repeat(4, 78px) auto;
    column-gap: 2rem;
    row-gap: 0.75rem;
    align-content: start;
  }
  .cs-htr:has(.cs-htr-search) .cs-htr__nav::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 6;
    border: 1px solid rgba(0, 89, 79, 0.25);
    border-radius: 8px;
    margin: -1rem;
    pointer-events: none;
  }
  .cs-htr:has(.cs-htr-search) .cs-htr__nav > li { display: contents; }
  .cs-htr:has(.cs-htr-search) .cs-htr__nav > li:nth-child(1) > .cs-htr-search { grid-column: 1; grid-row: 1; }
  .cs-htr:has(.cs-htr-search) .cs-htr__nav > li:nth-child(2) > .cs-htr__tab { grid-column: 1; grid-row: 2; }
  .cs-htr:has(.cs-htr-search) .cs-htr__nav > li:nth-child(3) > .cs-htr__tab { grid-column: 1; grid-row: 3; }
  .cs-htr:has(.cs-htr-search) .cs-htr__nav > li:nth-child(4) > .cs-htr__tab { grid-column: 1; grid-row: 4; }
  .cs-htr:has(.cs-htr-search) .cs-htr__nav > li:nth-child(5) > .cs-htr__tab { grid-column: 1; grid-row: 5; }
  .cs-htr:has(.cs-htr-search) .cs-htr__nav > li > .cs-htr__panel {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    margin-top: -1rem;
    background-color: #ffffff;
    border: 1px solid rgba(0, 89, 79, 0.25);
    border-radius: 8px;
    padding: 1.5rem;
  }
  .cs-htr:has(.cs-htr-search) .cs-htr__chevron { display: none; }
}

@media (min-width: 992px) {
  .cs-htr .py-lg-6 { padding-top: 4rem !important; padding-bottom: 5rem !important; }
}

/* Resource row — reused verbatim from employer-overview.html's
   .cs-printable-card (title + description left, action button right) */
.cs-printable-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 768px) {
  .cs-printable-card {
    flex-direction: row;
    align-items: center;
  }
}
.cs-printable-card__text { flex: 1; min-width: 0; }
.cs-printable-card__title { color: #000; font-size: 1rem; }
.cs-printable-card__desc  { color: #6b6b6b; font-size: 0.9375rem; line-height: 1.5; }
.cs-printable-card__action { flex-shrink: 0; }

/* Video / pill row — reused verbatim from employer-overview.html's
   .cs-resource-card (title left, play icon right) */
.cs-resource-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  text-align: start;
  cursor: pointer;
  color: #00594f;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cs-resource-card:hover,
.cs-resource-card:focus {
  background-color: rgba(0, 89, 79, 0.1);
  border-color: #00473F;
  color: #00473F;
  outline: none;
}
.cs-resource-card:hover .cs-resource-card__label,
.cs-resource-card:focus .cs-resource-card__label {
  text-decoration: underline;
  color: #00473F;
}
/* Explicit color so the label doesn't inherit the brand stylesheet's
   "section ul li span { color: #6b6b6b }" (these buttons sit inside
   the cs-htr__nav <ul><li> structure) */
.cs-resource-card__label {
  color: #00594f;
  font-weight: 600;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.cs-resource-card__icon {
  flex-shrink: 0;
  color: #00594f;
  line-height: 0;
  transition: color 0.2s ease;
}
.cs-resource-card:hover .cs-resource-card__icon,
.cs-resource-card:focus .cs-resource-card__icon { color: #00473F; }
/* Disabled card — video not yet available */
.cs-resource-card:disabled,
.cs-resource-card[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.cs-resource-card:disabled:hover,
.cs-resource-card[aria-disabled="true"]:hover {
  background-color: #ffffff;
  border-color: rgba(0, 89, 79, 0.5);
  color: #00594f;
}
.cs-resource-card:disabled:hover .cs-resource-card__label,
.cs-resource-card[aria-disabled="true"]:hover .cs-resource-card__label {
  text-decoration: none;
}

/* Video modal — reused verbatim from employer-overview.html */
.cs-modal-title { color: #212529; font-weight: 400; font-size: 1.5rem; line-height: 1.3; margin: 0; }
.cs-modal-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300594f'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
  opacity: 1;
}
.cs-modal-close:hover, .cs-modal-close:focus { opacity: 0.75; }

/* =====================================================================
   Meet one-on-one with a representative — two-step picker (choose
   region vs. non-English language, then pick from a dropdown). The two
   steps sit side-by-side in a track that slides (swipes) between them.
   ===================================================================== */
.cs-rep-meet {
  background-color: #f2f0e9;
  padding: 6rem 0;
}
.cs-rep-meet__heading { font-size: 1.5rem; line-height: 1.2; color: #000000; }
@media (min-width: 768px) { .cs-rep-meet__heading { font-size: 1.5rem; } }
.cs-rep-meet__lede { color: #000000; }
.cs-rep-meet__question { color: #000000; font-size: 1.0625rem; font-weight: 500; }

/* clip-path (in addition to overflow) prevents a hairline sliver of the
   off-screen panel — e.g. a selected radio option's colored border —
   from bleeding through at the slide boundary on some mobile browsers */
.cs-rep-meet__viewport { overflow: hidden; clip-path: inset(0); }
.cs-rep-meet__track {
  display: flex;
  width: 200%;
  transition: transform 0.45s ease;
}
.cs-rep-meet__track.is-step-2 { transform: translateX(-50%); }
.cs-rep-meet__panel { flex: 0 0 50%; min-width: 0; }

/* Radio option row (custom visual — default / hover / selected) */
.cs-rep-meet__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cs-rep-meet__option:hover { background-color: #F2F6F6; border-color: #00594f; }
.cs-rep-meet__option.is-selected { border-color: #00473f; background-color: #ffffff; }
.cs-rep-meet__option-label { color: #000000; }

.cs-rep-meet__radio-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cs-rep-meet__radio-visual {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #adb5bd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.cs-rep-meet__option:hover .cs-rep-meet__radio-visual { border-color: #00594f; }
.cs-rep-meet__option.is-selected .cs-rep-meet__radio-visual { border-color: #00473f; }
.cs-rep-meet__option.is-selected .cs-rep-meet__radio-visual::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00473f;
}
.cs-rep-meet__radio-input:focus-visible ~ .cs-rep-meet__radio-visual {
  outline: 2px solid #00594f;
  outline-offset: 2px;
}

/* Validation state — reuses the brand error red from
   payroll-integrations.html's .cs-pi-validation--error */
#cs-rep-options.has-error .cs-rep-meet__option { border-color: #b3261e; }
#cs-rep-options.has-error .cs-rep-meet__option:hover { border-color: #b3261e; }
#cs-rep-options.has-error .cs-rep-meet__radio-visual { border-color: #b3261e; }
.cs-rep-meet__error { color: #b3261e; font-size: 0.9375rem; }

.cs-rep-meet__select {
  min-height: 56px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 1rem;
  color: #000000;
}
.cs-rep-meet__select:focus {
  border-color: #00594f;
  box-shadow: 0 0 0 0.2rem rgba(0, 89, 79, 0.15);
}
.cs-rep-meet__select.has-error { border-color: #b3261e; }

/* Brand button/link (ported verbatim from eligibility-and-exemptions.html) */
.btn-green { background: #00594f; color: #fff; border: 1px solid #00473f; border-radius: 4px; padding: 8px 16px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 1px; text-decoration: none; display: inline-block; cursor: pointer; }
.btn-green:hover { color: #fff; background-color: #00473f; border-color: #00473f; }
.btn-green:disabled { opacity: 0.5; cursor: not-allowed; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: #00594f; font-weight: 600; font-size: 16px; letter-spacing: 1px; text-decoration: none; padding: 8px 0; border: none; background: none; cursor: pointer; }
.link-arrow:hover { color: #00473f; }

/* =====================================================================
   Need additional support (reused verbatim from payroll-integrations.html's
   .cs-pi-support system — background overridden to white for this page)
   ===================================================================== */
.cs-pi-support {
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 89, 79, 0.25);
  border-bottom: 1px solid rgba(0, 89, 79, 0.25);
  padding: 3rem 0;
}
.cs-pi-support__heading { text-align: left; color: #000000; margin-bottom: 1.5rem; }
.cs-pi-support__cards { display: flex; gap: 1.25rem; }
.cs-pi-support__card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.25);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 50%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cs-pi-support__card:hover { background-color: #F2F6F6; border-color: #00473F; }
.cs-pi-support__icon {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #846926;
}
.cs-pi-support__title { color: #000000; font-size: 1.125rem; margin-bottom: 0.5rem; }

@media (max-width: 767.98px) {
  .cs-pi-support__cards { flex-direction: column; }
  .cs-pi-support__heading { text-align: center; padding-bottom: 24px; }
  .cs-pi-support__card { flex: 1 1 100%; }
}
@media (max-width: 991.98px) {
  .cs-er-hero__bg img {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  object-position: left;
}
}


/* Tablet: header and cards both stack (col-lg-4/col-lg-8), so add
   extra breathing room between them beyond the heading's base margin */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cs-pi-support__heading { padding-bottom: 24px; }
}

/* CTA text + arrow inside a support card (reused verbatim) */
.support-link { cursor: pointer; }
.arrow-wrapper { display: inline-flex; transition: transform 0.25s ease; }
.support-link:hover .arrow-wrapper { transform: translateX(6px); }
.support-link p {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}
.support-link:hover p { text-decoration-color: currentColor; }
  

/* ---- adding-administrators.html ---- */

/* =====================================================================
   Shared brand tokens, headings
   (ported verbatim from setting-up-deductions.html so this page stays
   visually aligned with the rest of the site)
   ===================================================================== */

body.bootstrap5 #accessible-main h1, body.bootstrap5 #accessible-main h2, body.bootstrap5 #accessible-main h3, body.bootstrap5 #accessible-main h4 { color: #000000; }
body.bootstrap5 #accessible-main section svg, body.bootstrap5 #accessible-main section img { width: auto; }

body.bootstrap5 #accessible-main .section-title { font-size: 1.5rem; line-height: 1.25; color: #000000; }
@media (max-width: 575.98px) { .section-title { font-size: 1.625rem; } }

/* =====================================================================
   Hero (ported verbatim from setting-up-deductions.html's .hero-section)
   ===================================================================== */
.hero-section { background: #fff; padding: 80px 0; text-align: center; }
.hero-section h1 { font-size: 34px; font-weight: 500; letter-spacing: 0.6px; color: #000; margin-bottom: 16px; }
.hero-underline { width: 100px; height: 4px; background: #347b73; border-radius: 2px; margin: 0 auto; }
.cs-pi-hero__lede { color: #6b6b6b; max-width: 720px; margin: 16px auto 0; font-weight: 500; }

/* =====================================================================
   Callout — black left-accent info banner
   (ported verbatim from employee-enrollment-period.html's
   .cs-pi-callout / .cs-pi-callout--flush)
   ===================================================================== */
@media (min-width: 1025px) { .cs-pi-callout-container { max-width: 66.666%; } }
.cs-pi-callout {
  background-color: rgba(0, 89, 79, 0.05);
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: start;
}
.cs-pi-callout--flush {
  background-color: #ffffff;
  border: 1px solid #D3D3D3;
  border-left: 8px solid #000000;
  border-radius: 0px;
}
.cs-pi-callout__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.cs-pi-callout__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-pi-callout__icon img { width: 100%; height: 100%; }
.cs-pi-callout__text { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.cs-pi-callout__title { font-weight: 600; color: #000000; margin-bottom: 0; font-size: 1rem; }
.cs-pi-callout__desc { color: #000000; margin: 0; font-size: 0.9375rem; line-height: 1.5; }

@media (max-width: 767.98px) {
  .cs-pi-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (min-width: 768px) {
  .cs-pi-callout--flush .cs-pi-callout__body { align-items: center; }
}

/* Gold variant — used for the inline "Tip" callout inside numbered steps
   (ported verbatim from setting-up-deductions.html / add-employee-information.html) */
.cs-pi-callout--gold {
  background-color: #F2F0E9;
  border-color: rgba(128, 100, 31, 0.35);
}
.cs-pi-callout--gold .cs-pi-callout__body { align-items: center; }
.cs-pi-callout--gold .cs-pi-callout__desc { color: #000000; }

/* =====================================================================
   Tabs (ported verbatim from setting-up-deductions.html's .cs-pi-tabs
   single-tab system)
   ===================================================================== */
@media (min-width: 1025px) {
  .cs-pi-section > .container { max-width: 66.666%; }
}
.cs-pi-section { padding: 2rem 0 3rem; background-color: #F2F0E9; }
.cs-pi-section__header { text-align: center; margin-bottom: 2rem; }
.cs-pi-section__header h2 { color: #000000; }

.cs-pi-tabs { margin-top: 2rem; }
.cs-pi-tabs__row { display: flex; flex-wrap: nowrap; gap: 12px; width: fit-content; align-items: stretch; }

.cs-pi-tab {
  flex: 0 0 auto;
  background-color: #f2f0e9;
  border: 1px solid rgba(0, 89, 79, 0.5);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  padding: 0.875rem 1.25rem;
  cursor: default;
  pointer-events: none;
  text-align: start;
  display: flex; gap: 0.75rem; align-items: center;
  min-height: 64px;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: #00594f;
}
.cs-pi-tab.is-active {
  background-color: #ffffff;
  color: #000000;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}
.cs-pi-tab:focus, .cs-pi-tab:focus-visible, .cs-pi-tab:active { outline: none; box-shadow: none; }

.cs-pi-tab__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #00594f;
}
.cs-pi-tab__labels { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cs-pi-tab__title {
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
  white-space: normal;
  word-wrap: break-word;
}





.cs-pi-panel { display: none; }
.cs-pi-panel.is-active { display: block; }

/* =====================================================================
   Administrator Permissions table
   (border/header treatment ported from payroll-integrations.html's
   .cs-pi-pricing-box / .cs-pi-pricing__header; wrapped in Bootstrap's
   .table-responsive for horizontal-scroll responsiveness)
   ===================================================================== */
.cs-pi-permissions-wrap {
  border: 1px solid rgba(0, 89, 79, 0.25);
  border-radius: 8px;
  overflow: hidden;
}
.cs-pi-permissions-table { margin-bottom: 0; }
.cs-pi-permissions-table thead th {
  background-color: #F2F0E9;
  color: #000000;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 89, 79, 0.25);
  padding: 0.875rem 1rem;
  white-space: normal;
}
.cs-pi-permissions-table thead th:first-child { text-align: left; }
.cs-pi-permissions-table tbody td {
  vertical-align: middle;
  padding: 0.875rem 1rem;
  border-color: rgba(0, 89, 79, 0.15);
  color: #000000;
  font-size: 0.9375rem;
}
.cs-pi-permissions-table tbody td:first-child { text-align: left; }
.cs-pi-permissions-table tbody td:not(:first-child) { text-align: center; }
.cs-pi-permissions-table tbody tr:last-child td { border-bottom: none; }

/* Stacked layout — Tablet + Mobile (replaces horizontal cells with a
   card-per-row layout; column labels are injected via data-label) */
@media (max-width: 1024.98px) {
  .cs-pi-permissions-table thead { display: none; }
  .cs-pi-permissions-table, .cs-pi-permissions-table tbody,
  .cs-pi-permissions-table tr, .cs-pi-permissions-table td { display: block; width: 100%; }
  .cs-pi-permissions-table tbody tr {
    padding: 1rem 1rem 0.875rem;
    border-bottom: 1px solid rgba(0, 89, 79, 0.25);
  }
  .cs-pi-permissions-table tbody tr:last-child { border-bottom: none; }
  .cs-pi-permissions-table tbody td {
    padding: 0.375rem 0;
    border: none;
  }
  .cs-pi-permissions-table tbody td:first-child {
    font-weight: 600;
    padding-bottom: 0.75rem;
  }
  .cs-pi-permissions-table tbody td:not(:first-child) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .cs-pi-permissions-table tbody td:not(:first-child)::before {
    content: attr(data-label);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.5px;
    color: #6b6b6b;
  }
}

/* =====================================================================
   Need additional support? (ported verbatim from
   setting-up-deductions.html)
   ===================================================================== */
@media (min-width: 1025px) { .cs-pi-support > .container { max-width: 66.666%; } }
.support-link { cursor: pointer; }
.support-link:hover .arrow-wrapper { transform: translateX(6px); }
.support-link p { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; }
.support-link:hover p { text-decoration-color: currentColor; }
.arrow-wrapper { display: inline-flex; transition: transform 0.25s ease; }

.cs-pi-support {
  background-color: #F2F6F6;
  border-top: 1px solid rgba(0, 89, 79, 0.25);
  border-bottom: 1px solid rgba(0, 89, 79, 0.25);
  padding: 3rem 0;
}
.cs-pi-support__heading { text-align: left; color: #000000; margin-bottom: 1.5rem; }
/* Below Bootstrap's lg breakpoint, .col-lg-4/.col-lg-8 stack the title
   above the cards — restore the gap that .mb-0 (used for desktop's
   side-by-side vertical centering) zeroes out. */
@media (max-width: 991.98px) {
  .cs-pi-support__heading.mb-0 { margin-bottom: 1.5rem !important; }
}
.cs-pi-support__cards { display: flex; gap: 1.25rem; }
.cs-pi-support__card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 89, 79, 0.25);
  border-radius: 8px;
  padding: 1.5rem;
  flex: 1 1 50%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cs-pi-support__card:hover { background-color: #F2F6F6; border-color: #00473F; }
.cs-pi-support__icon {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #846926;
}
.cs-pi-support__title { color: #000000; font-size: 1.125rem; margin-bottom: 0.5rem; }

@media (max-width: 767.98px) {
  .cs-pi-support__cards { flex-direction: column; }
}
  

/* GRID hosts for remaining employer pages */
body.bootstrap5 section:has(.hero-section),
body.bootstrap5 section:has(.eligibility-section),
body.bootstrap5 section:has(.cs-er-hero),
body.bootstrap5 section:has(.cs-rep-meet),
body.bootstrap5 section.cs-elig-section-host,
body.bootstrap5 section.cs-hero-plain-section-host,
body.bootstrap5 section.cs-er-hero-section-host,
body.bootstrap5 section.cs-rep-meet-section-host {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
body.bootstrap5 .hero-section,
body.bootstrap5 .eligibility-section,
body.bootstrap5 .cs-er-hero,
body.bootstrap5 .cs-rep-meet,
body.bootstrap5 .cs-pi-hero,
body.bootstrap5 .cs-pi-section,
body.bootstrap5 .cs-pi-faq,
body.bootstrap5 .cs-pi-support {
  font-family: "Poppins", sans-serif;
}
body.bootstrap5 .hero-section .d-none,
body.bootstrap5 .cs-er-hero .d-none,
body.bootstrap5 .cs-pi-section .d-none,
body.bootstrap5 .cs-pi-panel .d-none { display: none !important; }
@media (min-width: 768px) {
  body.bootstrap5 .cs-er-hero .d-md-block { display: block !important; }
  body.bootstrap5 .cs-er-hero .d-md-none { display: none !important; }
}
@media (max-width: 767.98px) {
  body.bootstrap5 .cs-er-hero .d-md-none { display: block !important; }
}

/* Demo spacing/type — page-specific so add-employee !important (96px tabs)
   and concatenated extra-page CSS do not fight. Uses unique nodes already
   in the pasted HTML. */
body.bootstrap5 :is(.hero-section, .eligibility-section, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-er-hero, .cs-rep-meet, .cs-htr, .cs-eligibility) {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
body.bootstrap5 :is(.hero-section, .eligibility-section, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-er-hero, .cs-rep-meet, .cs-htr, .cs-eligibility) p,
body.bootstrap5 :is(.hero-section, .eligibility-section, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-er-hero, .cs-rep-meet, .cs-htr, .cs-eligibility) li {
  font-size: 16px;
  line-height: 1.5;
}

body.bootstrap5 .hero-section {
  padding: 80px 0 !important;
  margin: 0 !important;
  text-align: center;
  background: #fff !important;
}
body.bootstrap5 .hero-section h1 {
  font-size: 34px !important;
  font-weight: 500 !important;
  letter-spacing: 0.6px !important;
  color: #000 !important;
  margin: 0 0 16px !important;
  line-height: 1.2 !important;
  font-family: "Poppins", sans-serif !important;
}
body.bootstrap5 .hero-section .hero-underline {
  margin: 0 auto !important;
}
body.bootstrap5 .hero-section .cs-pi-hero__lede {
  margin: 16px auto 0 !important;
  max-width: 720px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #6b6b6b !important;
}

body.bootstrap5:has(#elig-tab-select) .eligibility-section {
  padding-bottom: 80px !important;
  padding-top: 0 !important;
}
body.bootstrap5:has(#how-to-submit) .eligibility-section {
  padding-bottom: 40px !important;
  padding-top: 0 !important;
}

body.bootstrap5:has(#elig-tab-select) .cs-pi-section,
body.bootstrap5:has(#deductions-panel) .cs-pi-section,
body.bootstrap5:has(#administrators-panel) .cs-pi-section {
  padding: 32px 0 48px !important;
}
body.bootstrap5:has(#how-to-submit) .cs-pi-section {
  padding: 96px 0 !important;
}
body.bootstrap5:has(.cs-pi-callout--flush.text-start) .cs-pi-section {
  padding: 48px 0 !important;
}

body.bootstrap5:has(#elig-tab-select) .cs-pi-video {
  padding: 48px 0 !important;
  margin: 0 !important;
}
body.bootstrap5 .cs-pi-faq {
  padding: 48px 0 !important;
}
body.bootstrap5 .cs-pi-support {
  padding: 48px 0 !important;
}

body.bootstrap5 .cs-er-hero {
  padding: 0 !important;
  margin: 0 !important;
}
body.bootstrap5 .cs-er-hero__title {
  font-family: "Poppins", sans-serif !important;
  font-weight: 500 !important;
  color: #000 !important;
  margin-bottom: 1rem !important;
}
body.bootstrap5:has(.cs-er-hero) .cs-htr.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 992px) {
  body.bootstrap5:has(.cs-er-hero) .cs-htr.py-lg-6 {
    padding-top: 4rem !important;
    padding-bottom: 5rem !important;
  }
}
body.bootstrap5 .cs-rep-meet {
  padding: 96px 0 !important;
  margin: 0 !important;
}

body.bootstrap5 .elig-card-body h2 {
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
  color: #000 !important;
}
body.bootstrap5 .elig-card-body p,
body.bootstrap5 .who-register-list li,
body.bootstrap5 .exemption-list li {
  font-size: 16px !important;
  line-height: 24px !important;
}
/* Overview demo: section titles are 2rem. Other employer pages: 1.5rem. */
body.bootstrap5:has(.cs-hero) .section-title {
  font-size: 2rem !important;
  line-height: 1.25 !important;
  color: #000 !important;
  font-weight: 500 !important;
  font-family: "Poppins", sans-serif !important;
}
@media (max-width: 575.98px) {
  body.bootstrap5:has(.cs-hero) .section-title { font-size: 1.625rem !important; }
}
body.bootstrap5:has(.hero-section) .section-title,
body.bootstrap5:has(.cs-pi-hero) .section-title,
body.bootstrap5:has(.cs-er-hero) .section-title {
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  color: #000 !important;
  font-weight: 500 !important;
  font-family: "Poppins", sans-serif !important;
}
@media (max-width: 575.98px) {
  body.bootstrap5:has(.hero-section) .section-title,
  body.bootstrap5:has(.cs-pi-hero) .section-title,
  body.bootstrap5:has(.cs-er-hero) .section-title { font-size: 1.625rem !important; }
}

@media (min-width: 1025px) {
  body.bootstrap5 .hero-section .cs-pi-callout-container,
  body.bootstrap5 .cs-pi-hero .cs-pi-callout-container,
  body.bootstrap5 .hero-section > .container,
  body.bootstrap5 .cs-pi-section > .container,
  body.bootstrap5 .cs-pi-faq > .container,
  body.bootstrap5 .cs-pi-support > .container,
  body.bootstrap5 .cs-pi-hero > .container,
  body.bootstrap5 .cs-pi-video > .container,
  body.bootstrap5 .cs-er-hero > .container,
  body.bootstrap5 .cs-rep-meet > .container,
  body.bootstrap5:has(#elig-tab-select) .eligibility-section .inner,
  body.bootstrap5:has(#how-to-submit) .eligibility-section .inner {
    max-width: 66.666% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Demo type, colors, toggle, and BS5 utilities missing from Bootstrap 3.
   Scope utilities to employer blocks so CAER chrome (.container / .navbar / .btn) is untouched. */
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .gap-1 { gap: 4px !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .mb-4 { margin-bottom: 24px !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .mt-2 { margin-top: 8px !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .mt-3 { margin-top: 16px !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .my-4 { margin-top: 24px !important; margin-bottom: 24px !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .mb-lg-5 { margin-bottom: 24px !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .fst-italic { font-style: italic !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .rounded-pill { border-radius: 50rem !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .rounded-circle { border-radius: 50% !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .border-0 { border: 0 !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .bg-transparent { background-color: transparent !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .p-0 { padding: 0 !important; }
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .text-start { text-align: left !important; }
@media (min-width: 768px) {
  body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .flex-md-row { flex-direction: row !important; }
  body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .justify-content-md-between { justify-content: space-between !important; }
  body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .align-items-md-center { align-items: center !important; }
  body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .align-items-md-end { align-items: flex-end !important; }
}
@media (min-width: 992px) {
  body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .mb-lg-5 { margin-bottom: 48px !important; }
  body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet, .cs-ppi, #cs-video-modal, #cs-pi-image-modal, #cs-pi-video-modal) .flex-lg-row { flex-direction: row !important; }
}

body.bootstrap5 .cs-pi-section h1,
body.bootstrap5 .cs-pi-section h2,
body.bootstrap5 .cs-pi-section h3,
body.bootstrap5 .cs-pi-faq h2,
body.bootstrap5 .cs-pi-faq h3,
body.bootstrap5 .hero-section h1,
body.bootstrap5 .eligibility-section h2,
body.bootstrap5 .cs-htr h2,
body.bootstrap5 .cs-htr h3,
body.bootstrap5 .cs-er-hero h1,
body.bootstrap5 .cs-rep-meet h2 {
  color: #000000 !important;
  font-family: "Poppins", sans-serif !important;
}
body.bootstrap5 .cs-pi-section h3 {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
body.bootstrap5 .cs-pi-tab {
  color: #00594f !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
}
body.bootstrap5 .cs-pi-tab.is-active { color: #000000 !important; }
body.bootstrap5 .cs-pi-tab__title { font-size: 16px !important; font-weight: 600 !important; color: inherit !important; }
body.bootstrap5 .cs-pi-accordion__title { color: #00594f !important; font-size: 16px !important; font-weight: 600 !important; }
body.bootstrap5 .cs-pi-accordion__num,
body.bootstrap5 .cs-pi-quickcard__num { background-color: #80641f !important; color: #ffffff !important; }
body.bootstrap5 .cs-pi-panel-body,
body.bootstrap5 .cs-pi-quickcard__desc,
body.bootstrap5 .cs-eligibility__body,
body.bootstrap5 .cs-pi-hero__lede { color: #6b6b6b !important; }
body.bootstrap5 .cs-pi-quickcard__title,
body.bootstrap5 .cs-pi-callout__title { color: #000000 !important; }
body.bootstrap5 .cs-pi-toggle-p { color: #6c757d !important; font-style: italic !important; font-size: 16px !important; }

body.bootstrap5 .cs-pi-callout--flush {
  background-color: #ffffff !important;
  border: 1px solid #D3D3D3 !important;
  border-left: 8px solid #000000 !important;
  border-radius: 0 !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}
body.bootstrap5 .cs-pi-callout--flush td {
  vertical-align: middle !important;
}
body.bootstrap5 .cs-pi-callout--flush .cs-pi-callout__title {
  margin: 0 !important;
}

body.bootstrap5 button[aria-label="Toggle detailed instructions"] {
  width: 44px;
  height: 24px;
  cursor: pointer;
  position: relative !important;
}
body.bootstrap5 button[aria-label="Toggle detailed instructions"] .rounded-pill,
body.bootstrap5 button[aria-label="Toggle detailed instructions"] [data-name="Background"] {
  height: 24px !important;
  width: 44px !important;
  border-radius: 50rem !important;
  box-sizing: border-box;
}
body.bootstrap5 [data-toggle-state="off"] button[aria-label="Toggle detailed instructions"] .rounded-pill,
body.bootstrap5 [data-toggle-state="off"] button[aria-label="Toggle detailed instructions"] [data-name="Background"] {
  background-color: #E6E6E6 !important;
  border: 1px solid #D3D3D3 !important;
}
body.bootstrap5 [data-toggle-state="on"] button[aria-label="Toggle detailed instructions"] .rounded-pill,
body.bootstrap5 [data-toggle-state="on"] button[aria-label="Toggle detailed instructions"] [data-name="Background"] {
  background-color: #00594f !important;
  border: 1px solid #00594f !important;
}
body.bootstrap5:has(#elig-tab-select) .cs-pi-accordion__body {
  padding: 28px 0 0 !important;
}
body.bootstrap5 .cs-pi-accordion__header {
  color: #000000 !important;
  font-family: "Poppins", sans-serif !important;
}
body.bootstrap5 [data-name="Text Container"] p,
body.bootstrap5 [data-name="Text Container"] .fw-semibold {
  color: #212529 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Eligibility stage page — do not depend on Bootstrap 5 utility classes */
body.bootstrap5 .elig-card-body h2 {
  color: #000000 !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  margin-bottom: 16px !important;
  font-family: "Poppins", sans-serif !important;
}
body.bootstrap5 .elig-card-body p,
body.bootstrap5 .elig-card-body strong,
body.bootstrap5 .elig-card-body b {
  color: #6b6b6b !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 1px !important;
}
body.bootstrap5 .elig-card-body .cs-bullets__title {
  color: #000000 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
body.bootstrap5 .who-register-list li,
body.bootstrap5 .exemption-list li {
  color: #000000 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 1px !important;
}
body.bootstrap5 [data-name="StepText"] {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px !important;
  width: 100%;
}
@media (min-width: 768px) {
  body.bootstrap5 [data-name="StepText"] {
    flex-direction: row !important;
  }
}
body.bootstrap5 [data-toggle-state="on"] { display: none !important; }
body.bootstrap5 .cs-pi-panel.is-detailed [data-toggle-state="on"] { display: block !important; }
body.bootstrap5 .cs-pi-panel.is-detailed [data-toggle-state="off"] { display: none !important; }
body.bootstrap5 .cs-pi-quickcard {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  margin: 16px !important;
}

/* Final demo match — headings, section chrome, page-specific backgrounds.
   CAER styles.css paints h1–h3 gold (#846926) and 14px; these win last. */
body.bootstrap5 :is(.cs-hero, .cs-htr, .cs-payroll, .cs-support, .cs-resources, .cs-printable, .cs-features, .cs-trustact, .cs-pi-hero, .cs-pi-section, .cs-pi-faq, .cs-pi-support, .cs-pi-video, .cs-eligibility, .hero-section, .eligibility-section, .cs-er-hero, .cs-rep-meet) :is(h1, h2, h3, h4) {
  color: #000000 !important;
  font-family: "Poppins", sans-serif !important;
}
body.bootstrap5 .cs-hero h1,
body.bootstrap5 .cs-hero .lead {
  color: #ffffff !important;
}
body.bootstrap5 .cs-payroll h2,
body.bootstrap5 .cs-support h2,
body.bootstrap5 .cs-resources h2,
body.bootstrap5 .cs-printable h2,
body.bootstrap5 .cs-features h2,
body.bootstrap5 .cs-htr h2 {
  color: #000000 !important;
}

body.bootstrap5:has(#cs-pi-tab-select):not(:has(#how-to-submit)):not(:has(.cs-ppi)) .cs-pi-section {
  padding: 96px 0 48px !important;
  background-color: #F2F0E9 !important;
}

body.bootstrap5 .cs-pi-support {
  background-color: #F2F6F6 !important;
}
body.bootstrap5:has(.cs-er-hero) .cs-pi-support {
  background-color: #ffffff !important;
}
body.bootstrap5 .cs-pi-support__heading {
  color: #000000 !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  margin-bottom: 1.5rem !important;
  font-family: "Poppins", sans-serif !important;
}
body.bootstrap5 .cs-pi-support__body {
  font-size: 0.9375rem !important;
  color: #6b6b6b !important;
}
body.bootstrap5 .cs-pi-video__heading {
  color: #000000 !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  font-family: "Poppins", sans-serif !important;
}
body.bootstrap5 .cs-er-hero__title {
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
  color: #000000 !important;
  font-weight: 500 !important;
}
@media (min-width: 768px) {
  body.bootstrap5 .cs-er-hero__title { font-size: 2rem !important; }
}
@media (min-width: 992px) {
  body.bootstrap5 .cs-er-hero__title { font-size: 2.25rem !important; }
}
body.bootstrap5 .cs-er-hero__lede {
  color: #6b6b6b !important;
  font-weight: 500 !important;
  max-width: 480px !important;
}
body.bootstrap5 .cs-rep-meet__heading {
  font-size: 1.5rem !important;
  color: #000000 !important;
  font-weight: 500 !important;
}
body.bootstrap5 .cs-htr__tab,
body.bootstrap5 .cs-htr__title {
  color: #00594f !important;
}
body.bootstrap5 .cs-htr__tab.is-active,
body.bootstrap5 .cs-htr__tab.is-active .cs-htr__title {
  color: #ffffff !important;
}
@media (max-width: 991.98px) {
  body.bootstrap5 .cs-htr__tab.is-active,
  body.bootstrap5 .cs-htr__tab.is-active .cs-htr__title {
    color: #00594f !important;
  }
}

/* Footer chrome — extra-page .link-primary { color green !important } and
   ::after "›" were leaking into the shared CAER footer on bootstrap5 pages.
   Restore production styles.css footer (white links, underline, 14px). */
body.bootstrap5 footer {
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  background-color: #565958;
}
body.bootstrap5 footer a.link-primary,
body.bootstrap5 footer a.link-primary:visited,
body.bootstrap5 footer a.link-primary:active {
  color: #fff !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
body.bootstrap5 footer a.link-primary:hover,
body.bootstrap5 footer a.link-primary:focus {
  color: #fff !important;
  font-weight: 500 !important;
}
body.bootstrap5 footer a.link-primary::before {
  content: none !important;
  display: none !important;
}
body.bootstrap5 footer a.link-primary::after,
body.bootstrap5 footer a.link-primary:after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto !important;
  width: 0% !important;
  height: 0.0625rem !important;
  background: #fff !important;
  color: transparent !important;
  transform: none !important;
  font-weight: inherit !important;
}
body.bootstrap5 footer a.link-primary:hover::after,
body.bootstrap5 footer a.link-primary:hover:after,
body.bootstrap5 footer a.link-primary:focus::after {
  width: 100% !important;
}

/* Support cards — CKEditor splits <a> that wrap <h3>/<p>. Cards are divs
   with a text-only overlay link. */
body.bootstrap5 .cs-pi-support__cards {
  display: flex !important;
  gap: 1.25rem !important;
}
body.bootstrap5 .cs-pi-support__card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 50% !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 89, 79, 0.25) !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  text-decoration: none !important;
  color: inherit !important;
}
body.bootstrap5 .cs-pi-support__card:hover {
  background-color: #F2F6F6 !important;
  border-color: #00473F !important;
}
body.bootstrap5 .cs-pi-support__heading {
  color: #000000 !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 500 !important;
}
body.bootstrap5 .cs-pi-support__title {
  color: #000000 !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}
body.bootstrap5 .cs-pi-support__icon svg {
  width: 32px !important;
  height: 32px !important;
}
body.bootstrap5 a.cs-pi-support__hit {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  text-decoration: none !important;
}
body.bootstrap5 a.cs-pi-support__hit::before,
body.bootstrap5 a.cs-pi-support__hit::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 767.98px) {
  body.bootstrap5 .cs-pi-support__cards { flex-direction: column !important; }
  body.bootstrap5 .cs-pi-support__card { flex: 1 1 100% !important; }
}

/* Toggle switch — CKEditor splits the control (empty button + track + knob
   as siblings). Stack them in a 44×24 cell so the knob sits on the pill. */
body.bootstrap5 [data-name="Toggle Switch"] {
  display: grid !important;
  grid-template-columns: auto 44px !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  width: auto !important;
  max-width: 100%;
}
body.bootstrap5 [data-name="Toggle Switch"] > p {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  white-space: nowrap;
  color: #000 !important;
  font-weight: 600 !important;
}
body.bootstrap5 [data-name="Toggle Switch"] > button[aria-label="Toggle detailed instructions"],
body.bootstrap5 [data-name="Toggle Switch"] > [data-name="Background"],
body.bootstrap5 [data-name="Toggle Switch"] > [data-name="Switch"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
}
body.bootstrap5 [data-name="Toggle Switch"] > button[aria-label="Toggle detailed instructions"] {
  display: block !important;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50rem !important;
  border: 1px solid #D3D3D3 !important;
  background-color: #E6E6E6 !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer;
  z-index: 0;
}
body.bootstrap5 [data-toggle-state="on"] [data-name="Toggle Switch"] > button[aria-label="Toggle detailed instructions"] {
  background-color: #00594f !important;
  border-color: #00594f !important;
}
body.bootstrap5 [data-name="Toggle Switch"] > [data-name="Background"],
body.bootstrap5 button[aria-label="Toggle detailed instructions"] > [data-name="Background"] {
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  border-radius: 50rem !important;
  box-sizing: border-box !important;
  z-index: 0;
  pointer-events: none;
}
body.bootstrap5 button[aria-label="Toggle detailed instructions"] > [data-name="Background"] {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
}
body.bootstrap5 [data-name="Toggle Switch"] [data-name="Switch"] {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 0 0 6px !important;
  z-index: 2 !important;
  pointer-events: none;
  line-height: 0 !important;
}
body.bootstrap5 [data-toggle-state="on"] [data-name="Toggle Switch"] [data-name="Switch"] {
  width: 22px !important;
  height: 22px !important;
  margin: 0 0 0 21px !important;
}
body.bootstrap5 [data-name="Switch"] button {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
body.bootstrap5 [data-toggle-state="off"] [data-name="Switch"] svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}
body.bootstrap5 [data-toggle-state="on"] [data-name="Switch"] svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}
body.bootstrap5 button[aria-label="Toggle detailed instructions"] [data-name="Switch"] {
  position: absolute !important;
  top: 50% !important;
  left: 6px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}
body.bootstrap5 [data-toggle-state="on"] button[aria-label="Toggle detailed instructions"] [data-name="Switch"] {
  left: auto !important;
  right: 1px !important;
  transform: translateY(-50%) !important;
}

/* Leftover old-home Text: CKEditor wrapped a script in <p> above .cs-hero.
   That paragraph has no visible copy but still takes margin under the nav.
   Cannot be deleted from this repo (it lives in Jahia). Hide it here. */
body.bootstrap5 #accessible-main p:has(> script) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Leftover old-home banner CSS (inline Text or CAU classes reused on the demo hero). */
body.bootstrap5 .cs-hero .main-content-new .main-banner-nw {
  background: none !important;
  min-height: 0 !important;
}
body.bootstrap5 .cs-hero .main-content-new .main-banner-nw h1.banner-header-text {
  text-align: start !important;
  width: auto !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

/* Overview hero — demo: .cs-hero has no padding; only .container.py-lg-6 is 80px.
   CAER `section, footer { padding: 40px 0 }` was stacking 40px on the GRID/Text
   wrapper (or on <section class="cs-hero">) on top of that 80px. */
body.bootstrap5 .cs-hero,
body.bootstrap5 div.cs-hero,
body.bootstrap5 section.cs-hero {
  margin: 0 !important;
  padding: 0 !important;
}
body.bootstrap5 section:has(.cs-hero),
body.bootstrap5 #accessible-main *:has(> .cs-hero) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.bootstrap5 .cs-hero > .container.py-5,
body.bootstrap5 .cs-hero > .container.main-content-new {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
@media (min-width: 992px) {
  body.bootstrap5 .cs-hero > .container.py-lg-6,
  body.bootstrap5 .cs-hero > .container.main-content-new {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}
body.bootstrap5 .cs-hero .main-banner-nw {
  background: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Overview only: pages with the split .cs-hero (not support .cs-er-hero).
   Match https://ascensus-gs-ux.github.io/ux-calsaversdemo-beta/employer-overview.html
   without changing support .cs-htr hairlines or other employer pages. */
body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) {
  border-top: none !important;
  border-bottom: none !important;
  margin: 0 !important;
  overflow: visible !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 768px) {
  /* Restore overview Getting Started: tabs left, one panel right.
     Support CSS later in this file set .cs-htr__nav to flex-column. */
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) !important;
    grid-template-rows: repeat(4, 78px) auto !important;
    column-gap: 2rem !important;
    row-gap: 0.75rem !important;
    align-content: start !important;
    flex-direction: unset !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav::before {
    content: "" !important;
    grid-column: 1 !important;
    grid-row: 1 / 5 !important;
    border: 1px solid rgba(0, 89, 79, 0.25) !important;
    border-radius: 8px !important;
    margin: -1rem !important;
    pointer-events: none !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li {
    display: contents !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li > p {
    display: contents !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li:nth-child(1) .cs-htr__tab { grid-column: 1 !important; grid-row: 1 !important; }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li:nth-child(2) .cs-htr__tab { grid-column: 1 !important; grid-row: 2 !important; }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li:nth-child(3) .cs-htr__tab { grid-column: 1 !important; grid-row: 3 !important; }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li:nth-child(4) .cs-htr__tab { grid-column: 1 !important; grid-row: 4 !important; }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li .cs-htr__panel {
    grid-column: 2 !important;
    grid-row: 1 / -1 !important;
    align-self: start !important;
    display: none !important;
    margin-top: -1rem !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 89, 79, 0.25) !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li .cs-htr__panel.is-active {
    display: block !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__chevron {
    display: none !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__num {
    display: none !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) ul.cs-htr__nav,
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
  }
}
body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-payroll.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-support.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 992px) {
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-hero .py-lg-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-htr.py-lg-6:not(:has(.cs-htr-search)) {
    padding-top: 4rem !important;
    padding-bottom: 5rem !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-payroll.py-lg-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-support.py-lg-6 {
    padding: 8rem 0 !important;
  }
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-resources.py-lg-6,
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-printable.py-lg-6,
  body.bootstrap5:has(.cs-hero):not(:has(.cs-er-hero)) .cs-features.py-lg-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

/* Download language list must overlay the next section, not scroll inside Printable Resources. */
body.bootstrap5 #accessible-main:has(.cs-printable),
body.bootstrap5 section:has(.cs-printable),
body.bootstrap5 .cs-printable,
body.bootstrap5 .cs-printable .container,
body.bootstrap5 .cs-printable .row,
body.bootstrap5 .cs-printable [class*="col-"],
body.bootstrap5 .cs-printable-card,
body.bootstrap5 .cs-printable .dropdown {
  overflow: visible !important;
}
body.bootstrap5 .cs-printable {
  position: relative;
  z-index: 5;
}
body.bootstrap5 .cs-features,
body.bootstrap5 .cs-trustact,
body.bootstrap5 #outer {
  position: relative;
  z-index: 1;
}
body.bootstrap5 .cs-printable.cs-dropdown-open {
  overflow: visible !important;
  z-index: 20;
}
body.bootstrap5 .cs-printable .dropdown.open .dropdown-menu,
body.bootstrap5 .cs-printable .dropdown.show .dropdown-menu,
body.bootstrap5 .cs-printable .cs-printable-card__action.open .dropdown-menu {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: auto !important;
  right: 0 !important;
  z-index: 1050 !important;
}

/* CAER chrome vs demos: breadcrumbs default is 8rem (styles.css) and leftover
   homepage CSS sets 3rem. Keep crumbs, drop the empty gap under the nav. */
body.bootstrap5 .breadcrumbs {
  padding-top: 16px !important;
  padding-bottom: 8px !important;
}
body.bootstrap5 .breadcrumbs p {
  margin: 0 !important;
}

/* Overlay hit target on support cards (CKEditor-safe markup). */
body.bootstrap5 .cs-pi-support__card {
  position: relative !important;
}

/* Leftover homepage eligibility modal injected into skip-nav on several pages. */
body.bootstrap5 [aria-labelledby="eligibilityModalTitle"]:not(.in):not(.show) {
  display: none !important;
}

/* Hero blocks on add-employee / enrollment / similar demos: 4rem 0 3rem. */
body.bootstrap5 .cs-pi-hero {
  padding: 4rem 0 3rem !important;
}

/* Jahia GRID/Text wrappers are often a <section> or <div> around each paste.
   CAER `section, footer { padding: 40px 0 }` stacks on top of demo padding.
   Zero only the direct parent, keep left/right column gutters. */
body.bootstrap5 #accessible-main *:has(> .cs-hero),
body.bootstrap5 #accessible-main *:has(> .cs-er-hero),
body.bootstrap5 #accessible-main *:has(> .cs-htr),
body.bootstrap5 #accessible-main *:has(> .cs-payroll),
body.bootstrap5 #accessible-main *:has(> .cs-support),
body.bootstrap5 #accessible-main *:has(> .cs-resources),
body.bootstrap5 #accessible-main *:has(> .cs-printable),
body.bootstrap5 #accessible-main *:has(> .cs-features),
body.bootstrap5 #accessible-main *:has(> .cs-trustact),
body.bootstrap5 #accessible-main *:has(> .cs-pi-hero),
body.bootstrap5 #accessible-main *:has(> .cs-pi-section),
body.bootstrap5 #accessible-main *:has(> .cs-pi-faq),
body.bootstrap5 #accessible-main *:has(> .cs-pi-support),
body.bootstrap5 #accessible-main *:has(> .cs-pi-video),
body.bootstrap5 #accessible-main *:has(> .hero-section),
body.bootstrap5 #accessible-main *:has(> .eligibility-section),
body.bootstrap5 #accessible-main *:has(> .cs-rep-meet),
body.bootstrap5 #accessible-main *:has(> .cs-ppi),
body.bootstrap5 #accessible-main *:has(> .cs-eligibility) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Responsive + accessibility (bootstrap5 employer pages only). */
body.bootstrap5 #accessible-main img.img-fluid,
body.bootstrap5 #accessible-main img.cs-pi-zoomable,
body.bootstrap5 #accessible-main iframe {
  max-width: 100%;
}
body.bootstrap5 #accessible-main .btn {
  white-space: normal;
  max-width: 100%;
}
body.bootstrap5 .cs-pi-permissions-wrap,
body.bootstrap5 #accessible-main .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
body.bootstrap5 .cs-pi-tabs:not(:has(.cs-pi-tabs__select)) .cs-pi-tabs__row {
  display: flex !important;
  flex-wrap: wrap;
  width: 100% !important;
}
@media (max-width: 767.98px) {
  body.bootstrap5 .cs-pi-tabs:not(:has(.cs-pi-tabs__select)) .cs-pi-tab {
    flex: 1 1 100%;
    width: 100%;
  }
  body.bootstrap5 .cs-hero .d-flex.flex-sm-row {
    flex-direction: column !important;
  }
  body.bootstrap5 .cs-hero .btn,
  body.bootstrap5 .cs-pi-section .btn {
    width: 100%;
    justify-content: center;
  }
}
body.bootstrap5 #accessible-main .cs-pi-tab:focus-visible,
body.bootstrap5 #accessible-main .cs-htr__tab:focus-visible,
body.bootstrap5 #accessible-main .cs-pi-accordion__header:focus-visible,
body.bootstrap5 #accessible-main .btn:focus-visible,
body.bootstrap5 #accessible-main a:focus-visible,
body.bootstrap5 #accessible-main select:focus-visible,
body.bootstrap5 #accessible-main img.cs-pi-zoomable:focus-visible,
body.bootstrap5 #accessible-main button:focus-visible {
  outline: 2px solid #00594f !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #00594f !important;
}
body.bootstrap5 .cs-pi-tabs:has(.cs-pi-tab + .cs-pi-tab) .cs-pi-tab {
  pointer-events: auto !important;
  cursor: pointer !important;
}
@media (prefers-reduced-motion: reduce) {
  body.bootstrap5 #accessible-main *,
  body.bootstrap5 #accessible-main *::before,
  body.bootstrap5 #accessible-main *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Home Getting Started: last word. Match overview .cs-htr (no search),
   not support resources. Do not key off .cs-hero so leftover homepage
   markup cannot disable the 2-column grid. */
@media (min-width: 768px) {
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) {
    overflow: visible !important;
  }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) !important;
    grid-template-rows: repeat(4, 78px) auto !important;
    column-gap: 2rem !important;
    row-gap: 0.75rem !important;
    align-content: start !important;
    flex-direction: unset !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav::before {
    content: "" !important;
    grid-column: 1 !important;
    grid-row: 1 / 5 !important;
    border: 1px solid rgba(0, 89, 79, 0.25) !important;
    border-radius: 8px !important;
    margin: -1rem !important;
    pointer-events: none !important;
  }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li {
    display: contents !important;
  }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li > p {
    display: contents !important;
  }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li:nth-child(1) .cs-htr__tab { grid-column: 1 !important; grid-row: 1 !important; }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li:nth-child(2) .cs-htr__tab { grid-column: 1 !important; grid-row: 2 !important; }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li:nth-child(3) .cs-htr__tab { grid-column: 1 !important; grid-row: 3 !important; }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li:nth-child(4) .cs-htr__tab { grid-column: 1 !important; grid-row: 4 !important; }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li .cs-htr__panel {
    grid-column: 2 !important;
    grid-row: 1 / -1 !important;
    align-self: start !important;
    display: none !important;
    margin-top: -1rem !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 89, 79, 0.25) !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
  }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__nav > li .cs-htr__panel.is-active {
    display: block !important;
  }
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__chevron,
  body.bootstrap5 .cs-htr:not(:has(.cs-htr-search)) .cs-htr__num {
    display: none !important;
  }
}

/* Search jump highlight must beat .cs-htr button.cs-resource-card
   (white background + box-shadow:none !important). Printable cards
   already showed the wash; instructional video rows did not. */
body.bootstrap5 .cs-htr-search__target-highlight,
body.bootstrap5 .cs-htr button.cs-resource-card.cs-htr-search__target-highlight,
body.bootstrap5 .cs-htr .cs-resource-card.cs-htr-search__target-highlight,
body.bootstrap5 .cs-printable-card.cs-htr-search__target-highlight {
  background-color: #E8F5E8 !important;
  box-shadow: 0 0 0 6px #E8F5E8, 0 0 0 8px #8CCF8D !important;
}
body.bootstrap5 .cs-htr-search__target-highlight.is-fading,
body.bootstrap5 .cs-htr button.cs-resource-card.cs-htr-search__target-highlight.is-fading,
body.bootstrap5 .cs-htr .cs-resource-card.cs-htr-search__target-highlight.is-fading,
body.bootstrap5 .cs-printable-card.cs-htr-search__target-highlight.is-fading {
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* Instructional video play control (green triangle) must stay clickable. */
body.bootstrap5 .cs-htr .cs-resource-card[data-video-src],
body.bootstrap5 .cs-htr .cs-resource-card__icon,
body.bootstrap5 .cs-htr .cs-resource-card__label {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Registration / other employer paste: many text links are bare <a>
   (no .link-primary). Bootstrap 4 then paints them #007bff. Keep
   Get Started buttons white-on-green. */
body.bootstrap5 #accessible-main :is(.hero-section, .eligibility-section, .cs-pi-section, .cs-pi-faq, .cs-pi-hero, .cs-pi-video, .cs-eligibility, .cs-hero, .cs-htr, .cs-er-hero, .cs-ppi, .cs-payroll, .cs-support, .cs-resources, .cs-printable) a:not(.btn):not(.btn-green):not(.btn-white-outline):not(.btn-primary):not(.btn-secondary):not(.btn-secondary-white):not(.cs-pi-support__hit):not(.nav-link):not(.dropdown-item) {
  color: #00594f !important;
  font-weight: 600;
}
body.bootstrap5 #accessible-main :is(.hero-section, .eligibility-section, .cs-pi-section, .cs-pi-faq, .cs-pi-hero, .cs-pi-video, .cs-eligibility, .cs-hero, .cs-htr, .cs-er-hero, .cs-ppi, .cs-payroll, .cs-support, .cs-resources, .cs-printable) a:not(.btn):not(.btn-green):not(.btn-white-outline):not(.btn-primary):not(.btn-secondary):not(.btn-secondary-white):not(.cs-pi-support__hit):hover,
body.bootstrap5 #accessible-main :is(.hero-section, .eligibility-section, .cs-pi-section, .cs-pi-faq, .cs-pi-hero, .cs-pi-video, .cs-eligibility, .cs-hero, .cs-htr, .cs-er-hero, .cs-ppi, .cs-payroll, .cs-support, .cs-resources, .cs-printable) a:not(.btn):not(.btn-green):not(.btn-white-outline):not(.btn-primary):not(.btn-secondary):not(.btn-secondary-white):not(.cs-pi-support__hit):focus {
  color: #00473F !important;
}
body.bootstrap5 #accessible-main a.link-primary,
body.bootstrap5 #accessible-main a.link-primary:visited {
  color: #00594f !important;
}

/* Eligibility “Automate this step with payroll integration” callout.
   Earlier a broken `.post-reg-text .payroll-banner` selector never matched
   (banner is a sibling of the paragraph). */
body.bootstrap5 #accessible-main .payroll-banner {
  background: #e5eeed !important;
  border: 1px solid rgba(0, 89, 79, 0.25) !important;
  border-radius: 8px !important;
  padding: 24px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
}
@media (max-width: 767.98px) {
  body.bootstrap5 #accessible-main .payroll-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

/* Accordion step titles — CalSavers green (beats .text-dark !important). */
body.bootstrap5 #accessible-main [data-name="Text Container"] > p,
body.bootstrap5 #accessible-main .cs-pi-accordion__title,
body.bootstrap5 #accessible-main [style*="80641f"] + div p.fw-semibold,
body.bootstrap5 #accessible-main [style*="80641f"] + * p.fw-semibold {
  color: #00594f !important;
}

/* Numbered accordion/body lists: hide native markers so only the custom
   counter shows (CAER `section ul` square bullets were doubling on ol). */
body.bootstrap5 #accessible-main .cs-pi-section ol,
body.bootstrap5 #accessible-main .cs-pi-panel ol,
body.bootstrap5 #accessible-main [data-name="Accordion"] ol {
  list-style: none !important;
  padding-left: 0.25rem !important;
}
body.bootstrap5 #accessible-main .cs-pi-section ol > li::marker,
body.bootstrap5 #accessible-main .cs-pi-panel ol > li::marker,
body.bootstrap5 #accessible-main [data-name="Accordion"] ol > li::marker {
  content: none !important;
  display: none !important;
}

/* Nested bullets under numbered steps: squares; deeper lists use a dash. */
body.bootstrap5 #accessible-main .cs-pi-section ul,
body.bootstrap5 #accessible-main .cs-pi-panel ul,
body.bootstrap5 #accessible-main [data-name="Accordion"] ul,
body.bootstrap5 #accessible-main .cs-pi-wait ul {
  list-style-type: square !important;
  color: #6b6b6b !important;
  padding: 0.25rem 0 0 1.25rem !important;
}
body.bootstrap5 #accessible-main .cs-pi-section ul li,
body.bootstrap5 #accessible-main .cs-pi-panel ul li,
body.bootstrap5 #accessible-main [data-name="Accordion"] ul li {
  padding: 0.15rem 0 !important;
}
body.bootstrap5 #accessible-main .cs-pi-section ol > li > ul ul,
body.bootstrap5 #accessible-main .cs-pi-panel ol > li > ul ul,
body.bootstrap5 #accessible-main [data-name="Accordion"] ol > li > ul ul {
  list-style: none !important;
  padding-left: 1.25rem !important;
}
body.bootstrap5 #accessible-main .cs-pi-section ol > li > ul ul > li,
body.bootstrap5 #accessible-main .cs-pi-panel ol > li > ul ul > li,
body.bootstrap5 #accessible-main [data-name="Accordion"] ol > li > ul ul > li {
  list-style: none !important;
}
body.bootstrap5 #accessible-main .cs-pi-section ol > li > ul ul > li::before,
body.bootstrap5 #accessible-main .cs-pi-panel ol > li > ul ul > li::before,
body.bootstrap5 #accessible-main [data-name="Accordion"] ol > li > ul ul > li::before {
  content: "– ";
}

/* “While you wait” callout under What Happens Next. */
body.bootstrap5 #accessible-main .cs-pi-wait {
  margin-top: 0.5rem;
}
body.bootstrap5 #accessible-main .cs-pi-wait__lead {
  font-weight: 600;
  color: #000 !important;
  margin-bottom: 0.35rem;
}

/* Employer pages match the demo canvas (CAER brand body is #fafafa).
   Standalone callout paste blocks used .bg-white, which only worked as a
   descendant of .hero-section / .eligibility-section — so #fafafa showed
   in the 2rem .cs-pi-callout margin and Jahia section padding. */
body.bootstrap5,
body.bootstrap5 #accessible-main {
  background-color: #fff !important;
}
body.bootstrap5 #accessible-main .bg-white {
  background-color: #fff !important;
}
body.bootstrap5 #accessible-main .pb-5 {
  padding-bottom: 3rem !important;
}
body.bootstrap5 section.cs-pi-callout-section-host,
body.bootstrap5 section:has(.cs-pi-callout-container) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  background: #fff !important;
}
body.bootstrap5 .cs-pi-callout {
  margin-top: 0 !important;
}
body.bootstrap5 .cs-pi-hero .cs-pi-callout,
body.bootstrap5 .hero-section .cs-pi-callout {
  margin-top: 2rem !important;
}

/* Payroll Figma Front-end Changes (node 5091:13844) — scoped to .cs-ppi */
body.bootstrap5 .cs-ppi .cs-pi-hero__title {
  font-size: 2.25rem !important;
  line-height: 1.2 !important;
  color: #000000 !important;
  font-weight: 500 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-hero__lede {
  font-size: 1rem !important;
  font-weight: 500 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-section__header h2.section-title,
body.bootstrap5 .cs-ppi h2.section-title {
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-radio__title,
body.bootstrap5 .cs-ppi .cs-pi-radio__text h3 {
  font-size: 1.25rem !important;
  color: #000000 !important;
  font-weight: 500 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-radio__body {
  font-size: 1rem !important;
  color: #000000 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-panel > h3 {
  font-size: 1.25rem !important;
  color: #000000 !important;
  font-weight: 500 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-accordion__body h3,
body.bootstrap5 .cs-ppi .cs-pi-accordion__body h4 {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #000000 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-setup-heading,
body.bootstrap5 .cs-ppi .cs-pi-panel h4.cs-pi-setup-heading {
  font-size: 1.125rem !important;
  color: #000000 !important;
  font-weight: 500 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-accordion__body .cs-pi-panel-body,
body.bootstrap5 .cs-ppi .cs-pi-accordion__body p {
  font-weight: 500 !important;
  color: #000000 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-tab:not(.is-active) {
  color: #00594f !important;
}
body.bootstrap5 .cs-ppi .cs-pi-tab:not(.is-active) .cs-pi-tab__title {
  color: #00594f !important;
}
body.bootstrap5 .cs-ppi .cs-pi-tab.is-active,
body.bootstrap5 .cs-ppi .cs-pi-tab.is-active .cs-pi-tab__title {
  color: #000000 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-toggle-label {
  color: #000000 !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-toggle-row {
  align-items: center !important;
}
body.bootstrap5 .cs-ppi .cs-pi-pricing__column {
  flex: 1 1 auto !important;
  min-height: auto !important;
  border: 1px solid #d3d3d3 !important;
  border-radius: 10px !important;
  background: #fff !important;
}
body.bootstrap5 .cs-ppi .cs-pi-accordion.is-expanded {
  border: 1px solid #00594f !important;
  border-radius: 8px !important;
  overflow: hidden;
  background: #fff;
}
body.bootstrap5 .cs-ppi .cs-pi-accordion.is-expanded .cs-pi-accordion__header {
  border: 0 !important;
  border-bottom: 1px solid #00594f !important;
  border-radius: 0 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-video__heading,
body.bootstrap5 .cs-ppi .cs-pi-support__heading {
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
}
body.bootstrap5 .cs-ppi .cs-pi-support__title {
  color: #000000 !important;
  font-size: 1.125rem !important;
  margin-bottom: 0.5rem !important;
}
body.bootstrap5 section:has(.cs-enroll-informed),
body.bootstrap5 .cs-enroll-informed,
body.bootstrap5 .cs-enroll-informed .cs-pi-callout-container {
  background-color: #F2F0E9 !important;
}
body.bootstrap5 section:has([data-cs-dropdown]),
body.bootstrap5 .cs-enroll-informed,
body.bootstrap5 .cs-enroll-informed .cs-pi-callout-container {
  overflow: visible !important;
}

/* Payroll canvas matches production payroll.html: page #fafafa,
   choose-type sand #F2F0E9, support #F2F6F6. Only when .cs-ppi is present. */
body.bootstrap5:has(.cs-ppi),
body.bootstrap5:has(.cs-ppi) #accessible-main {
  background-color: #fafafa !important;
}
body.bootstrap5:has(.cs-ppi) .cs-ppi.cs-pi-hero,
body.bootstrap5:has(.cs-ppi) .cs-ppi.cs-pi-video,
body.bootstrap5:has(.cs-ppi) .cs-ppi.cs-pi-video .cs-pi-callout-container {
  background-color: #fafafa !important;
}
body.bootstrap5:has(.cs-ppi) .cs-ppi.eligibility-section,
body.bootstrap5:has(.cs-ppi) .cs-ppi.eligibility-section .cs-pi-callout-container,
body.bootstrap5 section:has(.cs-ppi.eligibility-section),
body.bootstrap5 section.cs-eligibility-section-host:has(.cs-ppi) {
  background-color: #F2F0E9 !important;
}
body.bootstrap5:has(.cs-ppi) .cs-ppi.cs-pi-support,
body.bootstrap5 section:has(.cs-ppi.cs-pi-support),
body.bootstrap5 section.cs-pi-support-section-host:has(.cs-ppi),
body.bootstrap5 section.cs-ppi-section-host:has(.cs-pi-support) {
  background-color: #F2F6F6 !important;
  border-block: 1px solid rgba(0, 89, 79, 0.25);
}