/*!*****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/product-cards/style.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************/
/**
 * mea/product-cards
 *
 * Measured from Figma node 2008:8810 ("Three Products", /about-us, 1440x1022).
 * The same shape recurs on 2002:4594 (/products), 2008:6825 (/for-mgas) and
 * 2008:7054 (/for-brokers).
 *
 * The section is three rows in a 48px-gap column, which reproduces the frame
 * height exactly: 120 + 50 + 48 + 38 + 48 + 598 + 120 = 1022.
 *
 * Two literals, both commented with their node: the section's pure white, which
 * no surface token carries (`--mea-surface` is #fafafa), and the band pill's
 * solid pale ground.
 *
 * `outcome` (per-card, optional) is a 4th content field added for /for-mgas'
 * "Three Products" cards, which carry a second, heavier-weight sentence after
 * the body paragraph that the original title/promise/body schema had nowhere
 * to put. Mirrors `mea/card-grid`'s own `outcome` field name and styling
 * (Semi Bold, P2 size) for consistency across the two blocks.
 */
.mea-product-cards {
  box-sizing: border-box;
  /* 2008:8810 pads 80, not the 120 the subpage sections use. 80/1440 =
     5.5556vw, the same clamp `--mea-nav-gutter` already carries. */
  --mea-gutter: clamp(20px, 5.5556vw, 80px);
  padding-top: var(--mea-pc-pt, 120px);
  padding-bottom: var(--mea-pc-pb, 120px);
  color: var(--mea-ink);
}
.mea-product-cards * {
  box-sizing: border-box;
}
.mea-product-cards {
  /* The frame fill is pure white. `--mea-surface` is #fafafa and every other
     light ground in the file resolves to it, so this one section needs the
     literal. */
}
.mea-product-cards--surface-white {
  background-color: #fff;
}
.mea-product-cards--surface-surface {
  background-color: var(--mea-surface);
}
.mea-product-cards__inner {
  display: flex;
  flex-direction: column;
  /* The section's own item spacing - header to rail to content. Per
     instance: R6 draws 28 on /for-carriers, 36 on /for-reinsurers and 48
     on /for-mgas, /for-brokers and /about-us. The `stackGap` attribute
     carries it; see the table in render.php, and note that the 48 here is
     both the shipped value and the commonest one, so a stale cache renders
     as before rather than collapsing. */
  gap: var(--mea-pc-stack-gap, 48px);
}
.mea-product-cards {
  /* 2008:8811 is a 710-wide centred frame inside the 1200 column. The nested
     section-header carries its own alignment; this only caps the column. */
}
.mea-product-cards__header, .mea-product-cards__rail, .mea-product-cards__content {
  width: 100%;
  max-width: var(--mea-pc-maxw, 1200px);
  margin-inline: auto;
}
.mea-product-cards {
  /* A floor, only where R6 fixes the header frame's height instead of letting
     it hug its content - /for-carriers' 2545:2807 is the one such instance,
     at 261 around 222 of content. 0 is no floor, which is every other
     instance. Not a flex container, so the content stays top-aligned and the
     slack falls below it, which is where R6 draws it.

     INTERPOLATED below 1024: the floor is dropped, because the design supplies
     only the 1440 frame and a fixed header height is the one kind of value
     that does not survive the copy re-wrapping. Measured on /for-carriers
     before it was scoped: the floor is what the design asks for from 900 to
     1440 (content 215 against the 261 frame), inert at 768 and 375 where the
     copy is already taller, and adds 13-33px of slack nothing draws at 480 and
     600. Reset rather than reduced, unlike the paddings below, because a
     floor's narrow value is 'let it hug', not 'a smaller floor'. */
}
.mea-product-cards__header {
  min-height: var(--mea-pc-header-minh, 0);
}
@media (max-width: 1023px) {
  .mea-product-cards__header {
    min-height: 0;
  }
}
.mea-product-cards {
  /* --------------------------------------------------------------- *
   * The rail - 2008:8813
   * Three 38px lime dots on the card centres with a dashed connector
   * between each pair. Figma authors it as an 870x38 horizontal
   * component rotated 90 in place, which is why `get_metadata`
   * reports it as a tall narrow box; the render is horizontal.
   * --------------------------------------------------------------- */
}
.mea-product-cards__rail {
  position: relative;
  display: grid;
  /* The same tracks as the card grid, so every dot lands on its card's
     centre. Figma hand-places them ~8px off those centres; matching the
     cards is the intent and it holds at every width. */
  grid-template-columns: repeat(var(--mea-pc-cols, 3), minmax(0, 1fr));
  gap: var(--mea-pc-gap, 24px);
  height: 38px;
  /* Dot centre i (0-indexed) is `track*(i+0.5) + i*gap`; the connectors
     below build on this rather than a literal per dot count. */
  --mea-pc-track: calc((100% - var(--mea-pc-gap, 24px) * (var(--mea-pc-cols, 3) - 1)) / var(--mea-pc-cols, 3));
}
.mea-product-cards__dot {
  z-index: 1;
  justify-self: center;
  align-self: center;
  width: 38px;
  height: 38px;
  border-radius: 100px;
  background-color: var(--mea-accent);
  /* Figma's own export of this rail (2008:8813) is a flat #C5FF00 circle
     with `feGaussianBlur stdDeviation="5"` over the whole shape - the
     LAYER_BLUR value the panel shows (10) is 2x the stdDeviation it
     renders with. A `blur()` filter takes that stdDeviation directly, so
     this reproduces the SVG rather than approximating it: the previous
     box-shadow glow kept the circle's hard edge and added a halo around
     it, which is a visibly different shape from Figma's single soft
     blob with no defined edge. */
  filter: blur(5px);
}
.mea-product-cards {
  /* The two connectors: `::before` is the dot0-to-dot1 gap, `::after` is the
     dot(cols-2)-to-dot(cols-1) gap, each inset 48px at both ends - which
     reproduces Figma's 319 and 313 lengths at the 1200 column (dot centres
     408 apart, less 2x48 = 312) and keeps the same clear space around every
     dot at any width. Both are written generically off `--mea-pc-cols`
     rather than assuming three dots: at cols=2 there is only one gap, and
     "first gap" and "last gap" are algebraically the same span, so the two
     pseudo-elements land on identical geometry instead of each drawing half
     a line toward a middle dot that does not exist. This is what a
     2-column rail (audience-variant instances with two cards, e.g.
     /for-brokers) was doing before: a visible empty gap at 50% where cols=3
     expects its middle dot. */
}
.mea-product-cards__rail::before, .mea-product-cards__rail::after {
  position: absolute;
  top: 50%;
  height: 0;
  border-top: 1px dashed var(--mea-rule-dash);
  content: "";
}
.mea-product-cards__rail::before {
  left: calc(var(--mea-pc-track) * 0.5 + 48px);
  right: calc(100% - (var(--mea-pc-track) * 1.5 + var(--mea-pc-gap, 24px)) + 48px);
}
.mea-product-cards__rail::after {
  left: calc(var(--mea-pc-track) * (var(--mea-pc-cols, 3) - 1.5) + (var(--mea-pc-cols, 3) - 2) * var(--mea-pc-gap, 24px) + 48px);
  right: calc(100% - (var(--mea-pc-track) * (var(--mea-pc-cols, 3) - 0.5) + (var(--mea-pc-cols, 3) - 1) * var(--mea-pc-gap, 24px)) + 48px);
}
.mea-product-cards {
  /* --------------------------------------------------------------- *
   * The content rows - 2008:8819
   * --------------------------------------------------------------- */
  /* This block's own children are the card grid and the band card, so this
     row gap IS the grid-to-band gap: 28 on /for-carriers, where R6 makes the
     band a sibling of the card row under the section root, and 24 everywhere
     else, where both sit inside one "Products Grid" frame. It is deliberately
     NOT `--mea-pc-gap`: the card COLUMN gap is 24 on every frame in the file,
     so widening the band gap must not widen the columns with it. */
}
.mea-product-cards__content {
  display: flex;
  flex-direction: column;
  gap: var(--mea-pc-band-gap, 24px);
}
.mea-product-cards__grid {
  display: grid;
  grid-template-columns: repeat(var(--mea-pc-cols, 3), minmax(0, 1fr));
  gap: var(--mea-pc-gap, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mea-product-cards__item {
  display: flex;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------------- *
 * The card - 2008:8822, and the band card - 2393:1324
 * Identical chrome: a 1px lime hairline and a 16px radius. Both heights are
 * MINIMA: the third card's own content stack is 209 against the others' 183
 * inside the same 342 frame, so a longer body has to push rather than clip.
 * ------------------------------------------------------------------------- */
.mea-product-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* 2008:8822 (a different page's instance of this block) measures 34, 31 and
     32 across its three cards and was left following the copy on that
     evidence. /for-reinsurers' own instance (2014:9145/9138/9152) does NOT
     read the same way - confirmed by the user directly, and the pill's
     distance from the CARD's own bottom edge (padding + cta height = 95px)
     is identical across all three of ITS cards, which is what a bottom-
     anchored pill on an equal-height row produces. Pinned via margin-top:
     auto on the pill itself below, scoped to `--card` only so it does not
     touch the band's own horizontal layout. */
  gap: var(--mea-pc-card-cta-gap, 32px);
  min-height: 342px;
  padding: 40px;
  border: 1px solid var(--mea-accent);
  border-radius: 16px;
}
.mea-product-card__stack {
  display: flex;
  flex-direction: column;
  /* 2008:8823. */
  gap: 16px;
}
.mea-product-card {
  /* `bodyWidth` (per card, see render.php) - a measure WIDER than the card's
     own content box, which is what R6 draws on /for-reinsurers card 1
     (2545:4481 is 311 inside a 304 Content Stack). Desktop only: below the
     grid's own 1024 breakpoint the card is narrower than the measure and the
     fixed width becomes a horizontal page overflow (measured 382 vs 375 at
     375px before this guard).

     CLAMPED to half the grid's 24px gap of overhang, which is the whole
     reason this is a min() rather than the bare custom property it was until
     2026-09-17. The card is a flex item with the default `min-width: auto`,
     so a fixed-width child sets its min-content and the card simply refuses
     to shrink below it: card 1 measured 393px wide (311 + 2x40 padding + 2x1
     border) at EVERY viewport while its grid track ran 287 at 1024 and 320 at
     1135, and the card sat on top of its neighbour by 82px and 49px. The
     1024 gate hid none of that - it is where the damage starts.

     A percentage does not contribute to an intrinsic min-content width, so
     phrasing the ceiling as `calc(100% + 12px)` also returns the card to its
     track: the overhang can never reach the next card, and 12 of the 24px
     gap is left between them at the widths where the authored measure does
     not fit. Where it does fit the authored value still wins, so the design
     width is untouched - at 1440 the card's content box is 302 and the
     ceiling 314, so min() returns R6's own 311 and card 1 keeps its 5-line
     body. Unset, min(100%, 100% + 12px) is 100%, which is what `auto` gave
     every other card. */
}
@media (min-width: 1024px) {
  .mea-product-card__body {
    width: min(var(--mea-pc-card-body-w, 100%), 100% + 12px);
    max-width: none;
  }
}
.mea-product-card {
  /* Figma "H3" (2008:8824). The node paints #1a1a1a where the token is
     #1c1c1a - two levels on one channel, inside this file's tolerance, and
     not worth a fourth ink token. */
}
.mea-product-card__title {
  margin: 0;
  color: var(--mea-ink-display);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-semibold);
  font-size: var(--mea-type-h3-size);
  line-height: var(--mea-type-h3-lh);
}
.mea-product-card {
  /* 2008:8825 is 20px at 123%, NOT the 160% "P1" token, and the 123 is the
     node's own value rather than a named style. */
}
.mea-product-card__promise {
  margin: 0;
  color: var(--mea-ink-display);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-p1-size);
  line-height: 1.23;
}
.mea-product-card {
  /* Figma "P2" (2008:8826). */
}
.mea-product-card__body {
  margin: 0;
  color: var(--mea-ink-display);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-p2-size);
  line-height: var(--mea-type-p2-lh);
}
.mea-product-card {
  /* Optional 4th field, added for /for-mgas: a second, heavier-weight
     sentence after the body paragraph. Mirrors `mea/card-grid`'s own
     `&__outcome` exactly (Semi Bold, P2 size) for visual consistency
     between the two blocks - same weight/size step, different card shape. */
}
.mea-product-card__outcome {
  margin: 0;
  color: var(--mea-ink-display);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-semibold);
  font-size: var(--mea-type-p2-size);
  line-height: var(--mea-type-p2-lh);
}
.mea-product-card {
  /* 2008:8827: fills the card, 32 radius, on the soft lime pill. Height is a
     variant axis (see below). Not `.mea-cta` - that component is 55 tall on
     the gradient with a 333px minimum, and even where this pill matches its
     height it shares neither the fill nor the width floor. */
}
.mea-product-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 48 on the `products` frames (2008:8827, 2545:4351), 55 on all four
     R6 audience ones (2545:2824, 2545:4482, 2545:2994, 2545:3175) - the
     one axis render.php's variant table carries. A minimum, not a height:
     the label sets the floor at 49.19 with this block's 15px inset, so 48
     is inert and 55 is real. */
  min-height: var(--mea-pc-cta-minh, 48px);
  padding: 15px 24px;
  border-radius: 32px;
  background-color: var(--mea-pill-bg);
  color: var(--mea-ink-display);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-medium);
  font-size: var(--mea-type-p2-size);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.mea-product-card__cta:hover, .mea-product-card__cta:focus-visible {
  background-color: var(--mea-check-ring);
}
.mea-product-card {
  /* Pins the pill to the card's own bottom edge regardless of how much
     copy sits above it, so all three cards' pills land on one line - see
     the note on `.mea-product-card`'s `gap` above. The band's own pill
     (`--band`) is unaffected: it sits beside its copy, not below it. */
}
.mea-product-card__cta--card {
  margin-top: auto;
}
.mea-product-card {
  /* --------------------------------------------------------------- *
   * The band card - 2393:1324
   * Copy and pill side by side rather than stacked, 60/91 padding,
   * and a 146px gap between the two.
   * --------------------------------------------------------------- */
}
.mea-product-card--band {
  flex-direction: row;
  gap: 146px;
  align-items: center;
  min-height: 232px;
  padding: 60px 91px;
}
.mea-product-card--band .mea-product-card__stack {
  flex: 1 1 auto;
  /* 2393:1326 is 555 wide inside the 1018 content stack. */
  max-width: 555px;
}
.mea-product-card {
  /* 2393:1330 hugs its label at 309x55 on a SOLID pale ground, where the
     card pills are translucent. No token carries #ebf8da; tokens.css names
     it only in a comment about the proof pill. */
}
.mea-product-card__cta--band {
  flex: 0 0 auto;
  min-height: 55px;
  padding: 15px 56px;
  background-color: #ebf8da;
}
.mea-product-card__cta--band:hover, .mea-product-card__cta--band:focus-visible {
  background-color: var(--mea-check-ring);
}

/* ------------------------------------------------------------------------- *
 * Tablet and mobile. Figma supplies the 1440 frame only. The card row drops
 * to two tracks then one, the band unstacks into a column, and the rail goes
 * with the columns it annotates.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .mea-product-cards {
    padding-top: min(var(--mea-pc-pt, 120px), 80px);
    padding-bottom: min(var(--mea-pc-pb, 120px), 80px);
  }
  .mea-product-cards__inner {
    gap: 36px;
  }
  .mea-product-cards__grid {
    grid-template-columns: repeat(var(--mea-pc-cols-md, 2), minmax(0, 1fr));
  }
  .mea-product-cards {
    /* The rail goes with the three-across row it annotates. Kept on the
       two-column grid it wrapped its third dot onto a second row and
       overflowed its own 38px height - visible at 768 and nowhere in the
       measurements, which is what the browser check is for. It carries no
       copy, so dropping it below the design's column count loses nothing. */
  }
  .mea-product-cards__rail {
    display: none;
  }
  .mea-product-card {
    min-height: 0;
    /* Below the design width every card hugs its own copy, so
       `cardCtaGap` stops being a floor on an equal-height row and
       becomes the literal gap under the copy. R6 specifies 1440 only,
       so the narrow steps keep the shipped 32 rather than inheriting an
       instance's design-width value (12 on /for-mgas would read as a
       cramped pill). Same call as `card-grid`'s `descMaxWidth` and
       `layout: "row"`, both reset at 1023 for the same reason. */
    gap: 32px;
  }
  .mea-product-card--band {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    min-height: 0;
    padding: 40px;
  }
  .mea-product-card--band .mea-product-card__stack {
    max-width: none;
  }
  .mea-product-card__cta--band {
    align-self: stretch;
  }
}
@media (max-width: 767px) {
  .mea-product-cards {
    padding-top: min(var(--mea-pc-pt, 120px), 56px);
    padding-bottom: min(var(--mea-pc-pb, 120px), 56px);
  }
  .mea-product-cards__inner {
    gap: 28px;
  }
  .mea-product-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mea-product-card {
    padding: 24px;
  }
  .mea-product-card--band {
    padding: 24px;
  }
}
/* CONTRIBUTING's accessibility rule: every animation respects the setting. The
   shared base.css block covers `.mea-cta`, and neither of the transitions above
   is that component. */
@media (prefers-reduced-motion: reduce) {
  .mea-product-card__cta {
    transition: none;
  }
}

/*# sourceMappingURL=style-index.css.map*/