/*
 * For Brokers (page-for-brokers.php)
 * Section styles for template-parts/brokers/*. Loaded after style.css, which
 * owns the tokens, base, buttons, tag, the audience switcher, the numbered
 * step, header and footer.
 *
 * Lengths are the Figma values converted to the theme's fluid scale
 * (px / 1920 * 100 = vw), so the page tracks the 1920px design canvas.
 *
 * Inner measures inside .container--wide (1686px of content):
 *   hero                                    — 1584px (168px page margins)
 *   kit                                     — 1337px (291px page margins)
 *   everything from Handoff down            — 1368px (276px page margins)
 */

/* ==========================================================================
   Shared to this page
   ========================================================================== */
.brokers-eyebrow {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.brokers-eyebrow--light {
  color: var(--c-white);
}
.brokers-eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem);
  font-size: var(--fs-ui);
  line-height: 1.283;
}
.brokers-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: var(--c-orange);
}
.brokers-hero .accent,
.brokers-kit .accent {
  color: var(--c-orange);
}

/* Sky button — used by the closing CTA and the trailer prompt on this page */
.brokers-btn--sky {
  background: var(--c-sky);
  color: var(--c-white);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.brokers-hero {
  background: var(--c-white);
  /* Matches the For Employers hero's top/bottom padding, so the eyebrow sits
     the same distance below the header on every audience page. */
  padding-block: clamp(1.5rem, calc(3.8 * var(--vw)), 4.56rem);
}
.brokers-hero__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1020fr) minmax(0, 564fr);
  align-items: center;
}
/* Spacing only — the pill rail itself is the global .audience-switcher */
.brokers-hero__switcher {
  margin-top: clamp(1.25rem, calc(1.51 * var(--vw)), 1.8125rem);
}
.brokers-hero__title {
  margin-top: clamp(1.25rem, calc(2.34 * var(--vw)), 2.8125rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.brokers-hero__btn {
  margin-top: clamp(1.5rem, calc(3.44 * var(--vw)), 4.125rem);
  padding-inline: clamp(1.5rem, calc(2.5 * var(--vw)), 3rem);
  text-transform: uppercase;
  font-weight: 600;
}
/* 382 wide, offset 74 into the 564px column — as drawn, then sized down
   ~15% and nudged further right per the launch sweep: it was crowding the
   H1. */
.brokers-hero__art {
  --hero-art-w: 325;
  --hero-art-inset: 74;
}

/* ==========================================================================
   Broker kit
   ========================================================================== */
.brokers-kit {
  background: var(--c-cream);
  padding-block: clamp(2.5rem, calc(6.8229 * var(--vw)), 8.1875rem);
  text-align: center;
}
.brokers-kit__inner {
  max-width: min(1337px, calc(69.6354 * var(--vw-inset)));
  margin-inline: auto;
}
/* 1.8 leading, like the rest of the section. Figma reports this node 64 tall,
   but that is the hug around the glyphs — it renders on 50 x 1.8, and reading
   the hug as the line height sat the words 13 too high in the section. */
.brokers-kit__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-charcoal);
}
.brokers-kit__intro {
  margin-top: clamp(0.5rem, calc(0.5729 * var(--vw)), 0.6875rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
.brokers-kit__lead {
  margin-top: clamp(1.25rem, calc(2.3958 * var(--vw)), 2.875rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-charcoal);
}
/* One row: four items and three 62px gaps fill the 1216px rail. Each item
   holds the label box the comp draws for it — 287, 287, 283 and 173 — so the
   four add up to the rail rather than shrinking to their text and bunching
   toward the middle. Below the desktop grid they go back to sizing on content. */
.brokers-kit__grid {
  max-width: min(1216px, calc(63.3333 * var(--vw-inset)));
  margin: clamp(2rem, calc(3.3333 * var(--vw)), 4rem) auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, calc(2.19 * var(--vw)), 2.625rem) clamp(1.5rem, calc(3.2292 * var(--vw)), 3.875rem);
}
.brokers-kit-item {
  flex: 0 1 var(--kit-item-w);
  max-width: var(--kit-item-w);
}
.brokers-kit-item:nth-child(1),
.brokers-kit-item:nth-child(2) {
  --kit-item-w: min(287px, calc(14.9479 * var(--vw-inset)));
}
.brokers-kit-item:nth-child(3) {
  --kit-item-w: min(283px, calc(14.7396 * var(--vw-inset)));
}
.brokers-kit-item:nth-child(4) {
  --kit-item-w: min(173px, calc(9.0104 * var(--vw-inset)));
}
.brokers-kit-item__icon {
  width: clamp(100px, calc(7.81 * var(--vw)), 150px);
  height: auto;
  margin-inline: auto;
  transition: transform var(--motion) ease;
}
.brokers-kit-item:hover .brokers-kit-item__icon {
  transform: scale(1.08);
}
.brokers-kit-item__title {
  margin-top: clamp(0.75rem, calc(1.61 * var(--vw)), 1.9375rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-charcoal);
}
.brokers-kit__cta {
  margin-top: clamp(2rem, calc(5.3646 * var(--vw)), 6.4375rem);
}
/* 354 wide, the width the comp draws: 65 of padding either side of the label,
   where the shared .btn carries 44. */
.brokers-kit__btn {
  padding-inline: clamp(1.5rem, calc(3.3854 * var(--vw)), 4.0625rem);
  text-transform: uppercase;
  font-weight: 600;
}

/* ==========================================================================
   Handoff & implementation
   ========================================================================== */
.brokers-handoff {
  background: var(--c-white);
  padding-block: clamp(2.75rem, calc(7.08 * var(--vw)), 8.496rem) clamp(4rem, calc(12.66 * var(--vw)), 15.192rem);
}
.brokers-handoff__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--c-charcoal);
}
.brokers-handoff__intro {
  max-width: min(1023px, calc(53.2812 * var(--vw-inset)));
  margin: clamp(1rem, calc(2.71 * var(--vw)), 3.25rem) auto 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  text-align: center;
  color: var(--c-charcoal);
}
.brokers-handoff__steps {
  max-width: var(--measure-narrow);
  margin: clamp(2.5rem, calc(8.7 * var(--vw)), 10.4375rem) auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  row-gap: clamp(2.5rem, calc(3.75 * var(--vw)), 4.5rem);
}
/* The art is a fixed canvas box, not a column-filling image — 407 wide on
   step 01 — so the Figma width arrives on the wrapper as --art-w. */
.brokers-handoff .numbered-step__art img {
  max-width: min(calc(var(--art-w) * 1px), calc(var(--art-w) / 19.2 * var(--vw-inset)));
  margin-inline: auto;
  transition: transform var(--motion) ease;
}
.brokers-handoff .numbered-step:hover .numbered-step__art img {
  transform: scale(1.05);
}

/* ==========================================================================
   Independently validated
   ========================================================================== */
.brokers-validation {
  background: var(--c-blue);
  color: var(--c-white);
  padding-block: clamp(3rem, calc(7.4 * var(--vw)), 8.88rem);
}
.brokers-validation__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.brokers-validation__heading {
  margin-top: clamp(0.75rem, calc(1.35 * var(--vw)), 1.625rem);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.28;
}
.brokers-validation__intro {
  margin-top: clamp(1rem, calc(1.77 * var(--vw)), 2.125rem);
  font-size: var(--fs-body);
  line-height: 1.8;
}
.brokers-validation__grid {
  margin-top: clamp(2rem, calc(3.65 * var(--vw)), 4.375rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 663fr));
  column-gap: 3.07%; /* 42 of 1368 */
  justify-content: space-between;
  align-items: stretch;
}
.brokers-proof {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, calc(1.98 * var(--vw)), 2.375rem) clamp(1.5rem, calc(2.71 * var(--vw)), 3.25rem);
  background: var(--c-white);
  border-radius: min(37px, calc(1.9271 * var(--vw-inset)));
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  color: var(--c-charcoal);
  /* Reveal target too — see the home page's .savings-card. */
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    box-shadow var(--motion) ease;
}
.brokers-proof:hover {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(0, 0, 0, 0.3);
}
.brokers-proof__top {
  display: flex;
  align-items: center;
  gap: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
}
.brokers-proof__seal {
  flex: 0 0 auto;
  width: clamp(110px, calc(9.11 * var(--vw)), 175px);
  height: auto;
  border-radius: 50%;
  transition: transform var(--motion) ease;
}
.brokers-proof:hover .brokers-proof__seal {
  transform: scale(1.05);
}
.brokers-proof__stat-block {
  min-width: 0;
}
.brokers-proof__name {
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.6;
}
.brokers-proof__stat {
  margin-top: clamp(0.25rem, calc(0.42 * var(--vw)), 0.5rem);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--c-orange);
}
.brokers-proof__stat-label {
  margin-top: clamp(0.25rem, calc(0.42 * var(--vw)), 0.5rem);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
}
.brokers-proof__body {
  margin-top: clamp(1rem, calc(1.35 * var(--vw)), 1.625rem);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.brokers-proof__link {
  margin-top: clamp(0.75rem, calc(1.1 * var(--vw)), 1.3125rem);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-orange);
}
.brokers-proof__link a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Full Disclosure teaser
   ========================================================================== */
.brokers-disclosure {
  background: var(--c-white);
  padding-block: clamp(3rem, calc(8.2813 * var(--vw)), 9.9375rem) /* 159 */
    clamp(3rem, calc(8.2292 * var(--vw)), 9.875rem); /* 158 */
}
/* 684 of copy + 129 of gap + 555 of art column fill the 1368 rail the sections
   above use. The artwork is 493 wide and sits at the head of its column, which
   is where the comp draws it — 813 into the rail. */
.brokers-disclosure__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 684fr) minmax(0, 555fr);
  column-gap: 9.43%; /* 129 of 1368 */
  align-items: center;
}
.brokers-disclosure__heading {
  font-size: var(--fs-h3); /* 50 */
  font-weight: 700;
  line-height: 1.34;
  color: var(--c-charcoal);
}
.brokers-disclosure__btn {
  margin-top: clamp(1.5rem, calc(3.0729 * var(--vw)), 3.6875rem); /* 59 */
  text-transform: uppercase;
  font-weight: 600;
}
.brokers-disclosure__art img {
  display: block;
  width: 100%;
  max-width: min(493px, calc(25.6771 * var(--vw-inset)));
  height: auto;
  transition: transform 0.5s var(--ease-out);
}
.brokers-disclosure__art:hover img {
  transform: scale(1.03);
}

/* ==========================================================================
   Broker FAQs
   ========================================================================== */
.brokers-faqs {
  background: var(--c-ice);
  padding-block: clamp(2.5rem, calc(6.46 * var(--vw)), 7.752rem);
}
.brokers-faqs__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.brokers-faqs__heading {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--c-charcoal);
}
/* The rows themselves are the shared .faq accordion in style.css */
.brokers-faqs__list {
  margin-top: clamp(2rem, calc(3.44 * var(--vw)), 4.125rem);
}

/* ==========================================================================
   Closing call to action
   ========================================================================== */
.brokers-cta {
  background: var(--c-navy);
  color: var(--c-white);
  padding-block: clamp(1.75rem, calc(4.58 * var(--vw)), 5.496rem);
  text-align: center;
}
.brokers-cta__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.brokers-cta__heading {
  max-width: min(1116px, calc(58.125 * var(--vw-inset)));
  margin-inline: auto;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
}
.brokers-cta__body {
  margin-top: clamp(1rem, calc(1.93 * var(--vw)), 2.3125rem);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.brokers-cta__actions {
  margin-top: clamp(1.5rem, calc(2.81 * var(--vw)), 3.375rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, calc(1.88 * var(--vw)), 2.25rem);
}
.brokers-cta__btn {
  /* Height is .btn--lg's; only the inline padding is this section's own. */
  padding-inline: clamp(1.5rem, calc(2.4 * var(--vw)), 2.875rem);
  text-transform: uppercase;
  font-weight: 600;
}

/* ==========================================================================
   Trailer prompt
   ========================================================================== */
.brokers-trailer {
  background: var(--c-white);
  padding-block: clamp(2rem, calc(5.31 * var(--vw)), 6.372rem);
  text-align: center;
}
.brokers-trailer__inner {
  max-width: min(1190px, calc(61.9792 * var(--vw-inset)));
  margin-inline: auto;
}
.brokers-trailer__text {
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.8;
  color: var(--c-charcoal);
}
.brokers-trailer__btn {
  margin-top: clamp(1.5rem, calc(2.5 * var(--vw)), 3rem);
  padding-inline: clamp(1.5rem, calc(2.4 * var(--vw)), 2.875rem);
  text-transform: uppercase;
  font-weight: 600;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .brokers-hero__inner,
  .brokers-validation__grid,
  .brokers-disclosure__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
  .brokers-hero__art {
    width: min(100%, 382px);
    margin-inline: auto;
  }
  .brokers-disclosure__art img {
    margin-inline: auto;
  }
  .brokers-kit-item {
    --kit-item-w: clamp(180px, calc(14.9479 * var(--vw)), 287px);
    flex: 0 1 auto;
  }
}

@media (max-width: 575px) {
  .brokers-kit-item {
    flex: 0 0 100%;
    max-width: none;
  }
  .brokers-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .brokers-proof__top {
    flex-wrap: wrap;
  }
}

/* A visitor who has asked for reduced motion still gets the feedback, just not
   the movement — see the same block in front-page.css. */
@media (prefers-reduced-motion: reduce) {
  .brokers-kit-item:hover .brokers-kit-item__icon,
  .brokers-handoff .numbered-step:hover .numbered-step__art img,
  .brokers-proof:hover,
  .brokers-proof:hover .brokers-proof__seal,
  .brokers-disclosure__art:hover img {
    transform: none;
  }
}