/* ==========================================================================
   Become a Partner pages: page CSS (asset injector)
   Pages: /become-a-partner/corporate and /become-a-partner/firms
   The Asset Injector page restriction must list both paths.

   HOW THIS FILE IS ORGANIZED
   1. Shared     tokens and rules both pages use
   2. Corporate  one block per section, in page order
   3. Firms      one block per section, in page order

   Each block is scoped by a custom class added to that block in Layout
   Builder, so nothing here leaks to other blocks or pages.

   BLOCKS
   Shared
     :root (--bp-*)          Brand colors and card shadow
     #form                   Blue "Get Started" form section, plus the spacing
                             around it (keyed to #form, not to its neighbors)
   Corporate
     .industry-partnerships  Industry Partnerships (logos)
     .tiles-heading          "Why More Organizations Choose Becker" heading
     .strengthen-pipeline    Navy section with 3 white cards
     .exam-reviews           Two-column Exam Reviews section
     .exam-review-tiles      Row of colored exam tiles (rich text block)
     .cpe-training           CPE & Training (image right)
     .ai-section             AI Training card (gray, rounded)
     .value-props            3 cards: Content Licensing / Custom Content / LMS
                             (also the base for .value-props-firms)
     .learning-compass       Magenta Learning Compass banner
   Firms
     .exam-reviews-firms     Exam Reviews: image left, card with + list right
     .learning-compass-firms Learning Compass: gray card, image left
     .cpe-pd-firms           CPE & Professional Development: text left, image right
     .value-props-firms      Value props: 6 cards, 3 per row (goes on the same
                             block as .value-props)
     .faq-firms              FAQ header and section spacing

   CONVENTIONS
   - Breakpoints are the site's: 48em (tablet) and 64em (desktop).
     Rules outside a media query apply to mobile and up.
   - Selectors are often long on purpose. The site's own grid CSS is very
     specific, so shorter selectors silently lose. Where a long selector
     exists only to beat one site rule, it has a comment saying which.
   - A firms block that builds on a corporate class carries both classes on
     the same block and prefixes its selectors with both
     (.value-props.value-props-firms), so it wins regardless of file order.
   - New rules use the --bp-* tokens instead of literal colors/shadows.
   - The one !important (.learning-compass image) is there because the site
     writes width/height inline on that wrapper.
   - Selectors for the form and FAQ sections were checked against the live
     markup of both pages (Nov 2026).
   ========================================================================== */


/* ==========================================================================
   SHARED
   ========================================================================== */

/* Tokens. Brand values from the Figma "Becker color Palette". The corporate
   rules below still use literal values and a few differ slightly from these
   (#152047, #B01F5D, #fbc214); they were left as they are. */
:root {
  --bp-blue: #122048;          /* Becker Blue */
  --bp-backup-blue: #064c77;   /* Backup Blue */
  --bp-gray: #4a4a4a;          /* Becker Gray (body text) */
  --bp-teal: #4896a2;          /* Trusted Teal */
  --bp-light-teal: #9ac6c7;
  --bp-magenta: #b11f5c;
  --bp-yellow: #fdc20d;
  --bp-card-shadow: 0 1px 4px rgba(21, 34, 50, 0.24); /* Becker Card Shadow */
}

/* Regions that contain a .p-banner-copy block: center the copy vertically */
.layout__region:has(.p-banner-copy) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.layout__region:has(.p-banner-copy) .c-richtext__content {
  margin-bottom: 0;
}


/* ==========================================================================
   Form section ("Get Started with Becker") and spacing around it
   Keyed to #form, so it works on any page with this form regardless of what
   sits above it.
   ========================================================================== */

#form {
  background-color: var(--bp-backup-blue);
}

/* #form is the Layout Builder section itself (a .layout div) on both pages,
   so the 72px top and bottom padding goes straight on it. */
.layout#form { padding: 72px 0; }
.layout#form > .grid__container { margin-bottom: 0; }

/* No white gap above it: remove the bottom margin from the last container in
   the section directly before it. This does not depend on what that section
   contains. */
.layout:has(+ #form) > .grid__container:last-child { margin-bottom: 0; }


/* ==========================================================================
   CORPORATE PAGE (/become-a-partner/corporate)
   ========================================================================== */


/* ==========================================================================
   Industry Partnerships
   ========================================================================== */

.industry-partnerships {
  background-color: #E9F3FA;
}

/* Tablet: the site sets the text column to height:100%, which leaves a big
   gap above the logos once the layout stacks */
@media screen and (min-width: 48em) and (max-width: 63.99em) {
  .industry-partnerships .c-grid-standard--text-col {
    height: auto;
    margin-bottom: 24px;
  }
}

/* Desktop: vertically centered text, with a gap before the logos (Figma) */
@media screen and (min-width: 64em) {
  .industry-partnerships .c-grid__item.c-grid__media_position--right .c-grid-standard--text-col {
    justify-content: center;
    width: 47.7%;
  }
  .industry-partnerships .c-grid__item.c-grid__media_position--right .c-grid-standard--media-col {
    width: 46.3%;
    margin-left: 6%;
  }
}


/* ==========================================================================
   "Why More Organizations Choose Becker" heading
   ========================================================================== */

.tiles-heading {
  padding-top: 72px;
}


/* ==========================================================================
   Strengthen Your Organizational Pipeline (navy, 3 white cards)
   ========================================================================== */

.strengthen-pipeline {
  background-color: #122048;
}

/* Card look */
.strengthen-pipeline .c-grid__item.c-bkr-grid__item.c-grid__item--standard.c-bkr-grid__item--standard {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 1px 4px 0 rgba(21, 34, 50, 0.24);
}

/* Card type */
.strengthen-pipeline .c-grid__item.c-bkr-grid__item.c-grid__item--standard.c-bkr-grid__item--standard h3 {
  font-size: 20px;
  line-height: 28px;
}
.strengthen-pipeline .c-grid__item.c-bkr-grid__item.c-grid__item--standard.c-bkr-grid__item--standard p {
  font-size: 16px;
  line-height: 24px;
}

/* Card spacing (all widths) */
.strengthen-pipeline .c-grid__items.c-bkr-grid__items { gap: 24px; padding-bottom: 0; }
.strengthen-pipeline .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { padding: 24px; border: 0; }
.strengthen-pipeline .c-grid-standard--copy { padding: 0; }
.strengthen-pipeline .c-grid__item h3 { margin: 0 0 8px; }
.strengthen-pipeline .c-grid__item p { margin: 0; }

/* Tablet and up: stacked cards, section header and footer spacing */
@media screen and (min-width: 48em) {
  .strengthen-pipeline .c-bkr-grid__content.p-banner__bg-color--none { padding: 48px 32px; }
  .strengthen-pipeline .c-grid__content--inner { max-width: 1296px; }
  .strengthen-pipeline .c-grid__header--copy { margin: 0 0 48px; }
  .strengthen-pipeline .c-grid__header--copy h2 { font-size: 34px; line-height: 42px; margin: 0 0 16px; }
  .strengthen-pipeline .c-grid__header--copy p { font-size: 18px; line-height: 26px; max-width: 685px; margin: 0 auto; }
  .strengthen-pipeline .c-grid__items.c-bkr-grid__items { flex-direction: column; }
  .strengthen-pipeline .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { width: 100%; }
  .strengthen-pipeline .c-grid__footer { margin-top: 48px; }
}

/* Desktop: 3 cards in a row (Figma) */
@media screen and (min-width: 64em) {
  .strengthen-pipeline .c-bkr-grid__content.p-banner__bg-color--none { padding: 72px; }
  .strengthen-pipeline .c-grid__items.c-bkr-grid__items { flex-direction: row; gap: 40px; }
  .strengthen-pipeline .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { flex: 1 1 0; width: auto; min-width: 0; }
}


/* ==========================================================================
   Exam Reviews (two columns: text + card with a + list)
   ========================================================================== */

/* All widths: text column */
.exam-reviews .c-grid__items.c-bkr-grid__items { gap: 40px; padding-bottom: 0; }
.exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { padding: 0; border: 0; }
.exam-reviews .c-grid-standard--text-col { height: auto; }
.exam-reviews .c-grid-standard--copy { padding: 0; }
.exam-reviews .c-grid-standard--title { font-size: 34px; line-height: 42px; margin: 0 0 16px; }
.exam-reviews .c-grid-standard--copy p { font-size: 18px; line-height: 26px; margin: 0; }

/* All widths: right-hand card with the + list */
.exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard:last-child {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(21, 34, 50, 0.24);
  padding: 24px;
}
.exam-reviews .c-grid__item:last-child ul { list-style: none; margin: 0; padding: 0; }
.exam-reviews .c-grid__item:last-child li { position: relative; margin: 0 0 8px; padding-left: 26px; font-size: 16px; line-height: 24px; }
.exam-reviews .c-grid__item:last-child li:last-child { margin-bottom: 0; }
.exam-reviews .c-grid__item:last-child li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  background: #4a4a4a; /* icon color; change here */
  -webkit-mask: url("/themes/custom/bkr_subtheme/images/svg/becker-plus.svg") center / contain no-repeat;
          mask: url("/themes/custom/bkr_subtheme/images/svg/becker-plus.svg") center / contain no-repeat;
}

/* Tablet: stacked, bigger card padding */
@media screen and (min-width: 48em) {
  .exam-reviews .c-grid__items.c-bkr-grid__items { flex-direction: column; }
  .exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { width: 100%; }
  .exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard:last-child { padding: 32px; }
}

/* Desktop: text left, card right (Figma) */
@media screen and (min-width: 64em) {
  .exam-reviews .c-bkr-grid__content.p-banner__bg-color--none { padding: 48px 72px 72px; }
  .exam-reviews .c-grid__content--inner { max-width: 1296px; }
  .exam-reviews .c-grid__items.c-bkr-grid__items { flex-direction: row; align-items: center; gap: 96px; }
  .exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard:first-child {
    flex: 1 1 0; width: auto; min-width: 0; max-width: 640px; align-self: center;
  }
  .exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard:last-child {
    flex: 0 0 500px; width: 500px; align-self: center; margin-left: auto;
  }
}


/* ==========================================================================
   Exam review tiles (rich text block: <ul> of 5 linked tiles)
   Tile colors follow the list order: CPA, CMA, CIA, CIA Challenge, EA.
   ========================================================================== */

.exam-review-tiles .c-richtext__content { margin: 0; padding: 0 16px; }
.exam-review-tiles .c-richtext__content--inner { max-width: 1296px; margin: 0 auto; }

.exam-review-tiles ul { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0; }

.exam-review-tiles li {
  position: relative; flex: 1 1 200px; margin: 0; min-height: 80px; padding: 24px; border-radius: 8px;
  background: #152047; color: #fff; text-align: center;
  font-family: "Euclid Circular A Bold", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.exam-review-tiles li::first-line { font-size: 25px; line-height: 37px; } /* the exam name line */

.exam-review-tiles li a { color: inherit; text-decoration: none; }
.exam-review-tiles li a:first-of-type::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole tile clickable */
.exam-review-tiles li:focus-within { outline: 2px solid #122048; outline-offset: 2px; }

.exam-review-tiles li:nth-child(2) { background: #9ac6c7; color: #122048; }
.exam-review-tiles li:nth-child(3) { background: #064c77; }
.exam-review-tiles li:nth-child(4) { background: #fbc214; color: #122048; }
.exam-review-tiles li:nth-child(5) { background: #b11f5c; }

/* Hover: lift */
.exam-review-tiles li:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(21, 34, 50, 0.24); }
@media (prefers-reduced-motion: reduce) {
  .exam-review-tiles li { transition: none; }
  .exam-review-tiles li:hover { transform: none; }
}

/* Divider block directly under the tiles. The adjacent-sibling selector keeps
   the shared divider block from being restyled anywhere else on the site. */
.exam-review-tiles + .c-richtext .c-richtext__content { margin: 0; padding: 48px 16px 28px; }
.exam-review-tiles + .c-richtext .c-richtext__content--inner { max-width: 1296px; margin: 0 auto; }
.exam-review-tiles + .c-richtext hr { margin: 0; }

@media screen and (min-width: 48em) {
  .exam-review-tiles + .c-richtext .c-richtext__content { padding: 72px 32px 22px; }
}
@media screen and (min-width: 64em) {
  .exam-review-tiles .c-richtext__content { padding: 0 72px; }
  .exam-review-tiles + .c-richtext .c-richtext__content { padding: 72px 72px 22px; }
}


/* ==========================================================================
   CPE & Training (image right)
   ========================================================================== */

/* Tablet: same height:100% issue as Industry Partnerships. Without this the
   image drops out of the bottom of the section. */
@media screen and (min-width: 48em) and (max-width: 63.99em) {
  .cpe-training .c-grid-standard--text-col { height: auto; margin-bottom: 24px; }
}


/* ==========================================================================
   AI Training (gray rounded card)
   ========================================================================== */

.ai-section {
  background-color: #F4F4F4;
  border-radius: 16px;
}
.ai-section .c-bkr-button a {
  border: 2px solid #122048;
}

/* Tablet: same height:100% issue. Also replaces the site's margin:auto on the
   button, which pushed it out of the bottom of the section. */
@media screen and (min-width: 48em) and (max-width: 63.99em) {
  .ai-section .c-grid-standard--text-col { height: auto; }
  .ai-section .c-grid__item .c-grid-standard--text-col .c-button { margin: 24px 0 0; }
}


/* ==========================================================================
   Value props: 3 cards (Content Licensing / Custom Content / LMS)
   ========================================================================== */

/* Section spacing. The base padding-bottom only applies below 48em; the
   media queries at the end of this block set the full padding. */
.value-props .c-bkr-grid__content.p-banner__bg-color--none { padding-bottom: 48px; }
.value-props .c-grid__items.c-bkr-grid__items { gap: 24px; padding-bottom: 0; }

/* Card */
.value-props .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 32px 24px; border: 0; border-radius: 8px; background: #fff;
  box-shadow: 0 1px 4px rgba(21, 34, 50, 0.24);
}

/* 12px top bar, one color per card */
.value-props .c-grid__item::before {
  content: ""; display: block; /* the site sets display:table, which collapses the bar to 0 width */
  position: absolute; top: 0; left: 0; right: 0; height: 12px; background: #064c77;
}
.value-props .c-grid__item:nth-child(2)::before { background: #4896a2; }
.value-props .c-grid__item:nth-child(3)::before { background: #122048; }

.value-props .c-grid-standard--text-col { flex: 1 1 auto; height: auto; }

/* Icon (left aligned, 90px tall slot) */
.value-props .c-grid-standard--media { margin: 0 0 16px; }
.value-props .c-grid-standard--media .c-image > div { display: flex; align-items: center; justify-content: flex-start; height: 90px; }
/* must match the site's selector length or its margin:auto (centering) wins */
.value-props .c-bkr-grid__content .c-bkr-grid__item--standard .c-grid-standard--text-col .c-grid-standard--media:first-child img { margin: 0; }

/* Text (the title is the first <p>) */
.value-props .c-grid-standard--copy { flex: none; padding: 0 0 24px; color: #4a4a4a; }
.value-props .c-grid-standard--copy p { margin: 0; font-size: 16px; line-height: 24px; }
.value-props .c-grid-standard--copy p:first-child { margin-bottom: 8px; font-size: 20px; line-height: 28px; }

/* "Request More Info": underlined text with a chevron outside the underline.
   The long selector beats the site's .c-button { margin: auto }. The auto top
   margin pins the link to the bottom of the card so all three line up. */
.value-props .c-grid__item .c-grid-standard--text-col .c-button { margin: auto 0 0; }
.value-props .c-button .align-cta { display: inline-flex; align-items: center; }
.value-props .c-button a.e-btn--plain {
  display: inline-block; margin: 0; padding-bottom: 1px; border-bottom: 2px solid #122048;
  color: #122048; font-size: 16px; line-height: 24px; text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.value-props .c-button a.e-btn--plain::after { content: none; } /* hide the site's built-in chevron */
.value-props .c-button .align-cta::after {
  content: ""; box-sizing: border-box; width: 7px; height: 7px;
  margin-left: 5.5px; /* visible gap to the text is about 9px, matching Figma */
  border-top: 2px solid #122048; border-right: 2px solid #122048; transform: rotate(45deg);
  transition: transform .2s ease;
}

/* Link hover/focus: darker color, chevron slides right */
.value-props .c-button .align-cta:hover a.e-btn--plain,
.value-props .c-button a.e-btn--plain:focus-visible { color: #064c77; border-bottom-color: #064c77; }
.value-props .c-button .align-cta:hover::after { transform: translateX(4px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .value-props .c-button a.e-btn--plain, .value-props .c-button .align-cta::after { transition: none; }
}

/* Tablet: stacked cards */
@media screen and (min-width: 48em) {
  .value-props .c-bkr-grid__content.p-banner__bg-color--none { padding: 50px 32px 72px; }
  .value-props .c-grid__items.c-bkr-grid__items { flex-direction: column; }
  .value-props .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { width: 100%; }
}
/* Desktop: 3 across */
@media screen and (min-width: 64em) {
  .value-props .c-bkr-grid__content.p-banner__bg-color--none { padding: 50px 72px 72px; }
  .value-props .c-grid__content--inner { max-width: 1296px; }
  .value-props .c-grid__items.c-bkr-grid__items { flex-direction: row; }
  .value-props .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { flex: 1 1 0; width: auto; min-width: 0; }
}


/* ==========================================================================
   Learning Compass banner (magenta, book image right)
   ========================================================================== */

.learning-compass {
  background-color: #B01F5D;
}

/* Layout (mobile): content has no side padding because .c-grid__content--inner
   already adds a 16px gutter below 48em */
.learning-compass .c-bkr-grid__content.p-banner__bg-color--none { padding: 40px 0; }
.learning-compass .c-grid__items.c-bkr-grid__items { padding-bottom: 0; }
.learning-compass .c-grid__content--inner { max-width: 1296px; }
.learning-compass .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { padding: 0; }
.learning-compass .c-grid__items .c-grid__item .c-grid-standard--text-col { height: auto; }

/* Text */
.learning-compass .c-grid-standard--title { margin: 0 0 16px; color: #fff; }
.learning-compass .c-grid-standard--copy { padding: 0; color: #fff; }
.learning-compass .c-grid-standard--copy p { margin: 0; font-size: 18px; line-height: 26px; }

/* Button: white with navy border. The long selector beats the site's
   .c-button { margin: auto }. */
.learning-compass .c-grid__item .c-grid-standard--text-col .c-button { margin: 32px 0 0; }
.learning-compass .c-button .align-cta { display: inline-block; }
.learning-compass .c-button a.e-btn--secondary {
  display: inline-block; box-sizing: border-box; padding: 10px 22px;
  border: 2px solid #122048; border-radius: 4px; background: #fff;
  color: #122048; font-size: 16px; line-height: 24px; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.learning-compass .c-button a.e-btn--secondary:hover,
.learning-compass .c-button a.e-btn--secondary:focus-visible { background: #122048; color: #fff; }
@media (prefers-reduced-motion: reduce) { .learning-compass .c-button a.e-btn--secondary { transition: none; } }

/* Image: the wrapper has inline width/height, so !important is needed.
   The PNG already has its shadow baked in. */
.learning-compass .img--right { width: 275px !important; max-width: 100% !important; height: auto !important; }
.learning-compass .img--right img { width: 100%; height: auto; }
.learning-compass .c-grid__items .c-grid__item .c-grid-standard--media-col { display: flex; justify-content: center; width: auto; }
.learning-compass .c-grid-standard--media { margin: 32px 0 0; }

/* Tablet */
@media screen and (min-width: 48em) {
  .learning-compass .c-bkr-grid__content.p-banner__bg-color--none { padding: 40px 32px; }
  .learning-compass .c-grid-standard--title { font-size: 34px; line-height: 42px; }
}
/* Desktop: text left (750px max), book right in a 353px-tall row (Figma) */
@media screen and (min-width: 64em) {
  .learning-compass .c-bkr-grid__content.p-banner__bg-color--none { padding: 40px 72px; }
  .learning-compass .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { display: flex; align-items: center; gap: 24px; width: 100%; min-height: 353px; }
  .learning-compass .c-grid__items .c-grid__item .c-grid-standard--text-col { flex: 0 1 750px; width: auto; }
  .learning-compass .c-grid__items .c-grid__item .c-grid-standard--media-col { flex: 0 0 auto; justify-content: flex-start; height: 353px; align-items: center; margin: 0 45px 0 auto; }
  .learning-compass .c-grid-standard--media { margin: 20px 0 0; } /* nudges the book 10px down to match Figma */
}


/* ==========================================================================
   FIRMS PAGE (/become-a-partner/firms)
   ========================================================================== */


/* ==========================================================================
   Firms: two-column row shared by .exam-reviews-firms, .learning-compass-firms
   and .cpe-pd-firms. Desktop only; below 64em each block keeps the site's
   layout or its own stacked rules.
   Each block sets its sizes with custom properties on its own class:
     --split-gap        space between the columns
     --split-media      flex shorthand for the image column
     --split-media-max  max width of the image column (default none)
     --split-text       flex shorthand for the text column
     --split-text-max   max width of the text column (default none)
   The extra .c-grid__items.c-bkr-grid__items in these selectors lifts them
   above each block's own column rules, so they win regardless of file order.
   ========================================================================== */

@media screen and (min-width: 64em) {
  :is(.exam-reviews-firms, .learning-compass-firms, .cpe-pd-firms) .c-grid__items.c-bkr-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard {
    display: flex; flex-direction: row; align-items: center; gap: var(--split-gap, 48px);
  }
  :is(.exam-reviews-firms, .learning-compass-firms, .cpe-pd-firms) .c-grid__items.c-bkr-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard .c-grid-standard--media-col {
    flex: var(--split-media, 1 1 0); width: auto; min-width: 0; max-width: var(--split-media-max, none); height: auto;
  }
  :is(.exam-reviews-firms, .learning-compass-firms, .cpe-pd-firms) .c-grid__items.c-bkr-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard .c-grid-standard--text-col {
    flex: var(--split-text, 1 1 0); width: auto; min-width: 0; max-width: var(--split-text-max, none); height: auto;
  }
}


/* ==========================================================================
   Exam Reviews, Firms page (image left, card with a + list right)
   Scoped by .exam-reviews-firms (Layout Builder class on the grid block).
   Figma: B2B Firms Landing Page, node 2040:177
   ========================================================================== */

/* Desktop sizes for the shared two-column row. The content area is narrower
   than the 1140px Figma frame, so the gap scales down and the image column
   takes the leftover space; the card stays wide enough (460px) that the list
   items don't wrap. */
.exam-reviews-firms {
  --split-gap: clamp(32px, 4vw, 64px);
  --split-media: 1 1 0;
  --split-media-max: 500px;
  --split-text: 0 1 460px;
}

/* All widths: stacked. The site's item padding/border are removed so the
   image and card control their own spacing. */
.exam-reviews-firms .c-grid__items.c-bkr-grid__items { padding-bottom: 0; }
.exam-reviews-firms .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard {
  display: flex; flex-direction: column; gap: 32px; padding: 0; border: 0;
}

/* Columns. The long selector beats the site's column widths and height:100%. */
.exam-reviews-firms .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard .c-grid-standard--media-col { width: 100%; }
.exam-reviews-firms .c-grid-standard--media-col img { display: block; width: 100%; height: auto; }

/* Card */
.exam-reviews-firms .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard .c-grid-standard--text-col {
  box-sizing: border-box; width: 100%; height: auto; padding: 24px;
  background: #fff; border-radius: 16px; box-shadow: var(--bp-card-shadow);
}

/* Card text: label is Semibold 16/24 with 0.2px tracking */
.exam-reviews-firms .c-grid-standard--copy { padding: 0; color: var(--bp-gray); }
.exam-reviews-firms .c-grid-standard--copy p { margin: 0 0 16px; font-size: 16px; line-height: 24px; letter-spacing: 0.2px; }
.exam-reviews-firms .c-grid-standard--copy p strong { font-weight: 600; }

/* + list: 8px between rows, 16px between icon and text.
   Same look as the .exam-reviews list in the corporate section. */
.exam-reviews-firms .c-grid-standard--copy ul { list-style: none; margin: 0; padding: 0; }
.exam-reviews-firms .c-grid-standard--copy li { position: relative; margin: 0 0 8px; padding-left: 26px; font-size: 16px; line-height: 24px; }
.exam-reviews-firms .c-grid-standard--copy li:last-child { margin-bottom: 0; }
.exam-reviews-firms .c-grid-standard--copy li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  background: var(--bp-gray); /* icon color; change here */
  -webkit-mask: url("/themes/custom/bkr_subtheme/images/svg/becker-plus.svg") center / contain no-repeat;
          mask: url("/themes/custom/bkr_subtheme/images/svg/becker-plus.svg") center / contain no-repeat;
}

/* Tablet: bigger card padding */
@media screen and (min-width: 48em) {
  .exam-reviews-firms .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard .c-grid-standard--text-col { padding: 32px; }
}

/* Desktop: Figma offsets the row 18px from the left */
@media screen and (min-width: 64em) {
  .exam-reviews-firms .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { padding-left: 18px; }
}


/* ==========================================================================
   Learning Compass, Firms page (gray card, image left)
   Scoped by .learning-compass-firms (Layout Builder class on the grid block).
   ========================================================================== */

/* Desktop sizes for the shared two-column row: gap between image and text,
   and both columns flex (the site's column widths add up to 100%, so a gap
   would otherwise overflow). */
.learning-compass-firms {
  --split-gap: 48px;
  --split-media: 1 1 0;
  --split-text: 1 1 0;
}


/* ==========================================================================
   CPE & Professional Development, Firms page (text left, image right)
   Scoped by .cpe-pd-firms (Layout Builder class on the grid block).
   Figma: B2B Firms Landing Page, node 2006:1416
   ========================================================================== */

/* Desktop sizes for the shared two-column row: text 673px, 80px gap, image
   centered in the remaining column. Columns split 673:387 (the Figma ratio)
   so they shrink together when the content area is narrower than the frame;
   the gap scales down the same way. */
.cpe-pd-firms {
  --split-gap: clamp(32px, 5vw, 80px);
  --split-text: 673 1 0;
  --split-text-max: 673px;
  --split-media: 387 1 0;
}

@media screen and (min-width: 64em) {
  .cpe-pd-firms .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard .c-grid-standard--media-col {
    display: flex; justify-content: center;
  }
  .cpe-pd-firms .c-grid-standard--media-col .c-grid-standard--media,
  .cpe-pd-firms .c-grid-standard--media-col .c-image { margin: 0; }
  .cpe-pd-firms .c-grid-standard--media-col img { display: block; width: 100%; max-width: 350px; height: auto; }
}


/* ==========================================================================
   Value props, Firms page (one grid block, 6 cards in 2 rows of 3)
   Card layout comes from .value-props (corporate section above). This block
   only adds what differs: 3-per-row wrapping, row gap, top-bar colors and
   space under the text. Selectors start with .value-props.value-props-firms
   (both classes on the same block) so they out-rank the corporate rules
   regardless of file order.
   Figma: B2B Firms Landing Page, node 130:26164 (row 1), 2006:1455 (row 2)
   ========================================================================== */

/* Space under the text: 24px gap + 28px spacer in Figma */
.value-props.value-props-firms .c-grid-standard--copy { padding-bottom: 52px; }

/* Top bars: blue, teal (both already corporate defaults), magenta,
   yellow, navy, light teal */
.value-props.value-props-firms .c-grid__item:nth-child(3)::before { background: var(--bp-magenta); }
.value-props.value-props-firms .c-grid__item:nth-child(4)::before { background: var(--bp-yellow); }
.value-props.value-props-firms .c-grid__item:nth-child(5)::before { background: var(--bp-blue); }
.value-props.value-props-firms .c-grid__item:nth-child(6)::before { background: var(--bp-light-teal); }

/* Desktop: wrap to 3 per row, 24px between columns, 72px between rows.
   Corporate sets one non-wrapping row of flex:1 cards, so these replace it.
   Cards in a row stay equal height. */
@media screen and (min-width: 64em) {
  .value-props.value-props-firms .c-grid__items.c-bkr-grid__items { flex-wrap: wrap; gap: 72px 24px; }
  .value-props.value-props-firms .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard {
    flex: 0 0 calc((100% - 48px) / 3); width: auto; min-width: 0;
  }
}


/* ==========================================================================
   FAQ header, Firms page ("Your questions, answered" + heading)
   Scoped by .faq-firms (Layout Builder class on the accordion block). The
   eyebrow <p> and the <h2> sit together in the first .p-bkr-accordion--body,
   above the accordion rows.
   Figma: B2B Firms Landing Page, node 2006:1666
   ========================================================================== */

/* Eyebrow: 14/14 Medium, uppercase, +0.1px, 8px above the heading */
.faq-firms p:has(+ h2) {
  margin: 0 0 8px; color: var(--bp-gray);
  font-family: "Euclid Circular A Medium", "Euclid Circular A", Helvetica, Arial, sans-serif;
  font-size: 14px; font-weight: 500; line-height: 14px; letter-spacing: 0.1px; text-transform: uppercase;
}

/* Heading: Bold 34/42, Becker Blue */
.faq-firms h2 { margin: 0; color: var(--bp-blue); font-size: 34px; line-height: 42px; }

/* 51px between the heading and the first accordion row (Figma) */
.faq-firms .p-bkr-accordion--body:has(> h2) { margin-bottom: 51px; }

/* FAQ section spacing (Figma: 72px above the section on desktop). The
   padding goes on the layout section that holds the accordion. */
.layout:has(.faq-firms) { padding-top: 48px; }

@media screen and (min-width: 64em) {
  .layout:has(.faq-firms) { padding-top: 72px; }
}