/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/insight-article/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * mea/insight-article - R6 "15 - single-insight-template" node `2545:4630`.
 * Every number here is cited in render.php's docblock; read that first.
 */
.mea-insight-article {
  --mea-insight-prose: 720px;
  --mea-insight-wide: 811px;
  box-sizing: border-box;
  padding-block: 93px 105px;
  /* Pure #fff, not --mea-surface. R6 declares `bg-white` on 2545:4630. */
  background-color: var(--mea-surface-pure);
  color: var(--mea-ink-2);
}

.mea-insight-article__column {
  box-sizing: border-box;
  width: 100%;
  /* The WIDE measure. The prose sits 45.5 inside it on both sides, which is
     what lets a full-width image bleed past the copy without leaving the
     column. */
  max-width: var(--mea-insight-wide);
  margin-inline: auto;
  padding-inline: 20px;
}

/* --------------------------------------------------------------- *
 * The prose rhythm. R6 groups a heading with its paragraphs at 20 and
 * separates the groups by 52 (group 1 ends at y 380, the next heading box
 * opens at 432 in the node's own render). A `the_content` stream has no
 * groups, so the 52 is carried by the heading's own top margin and the 20 by
 * everything else - which reproduces the drawn rhythm exactly on the R6 copy
 * and degrades sensibly on any other.
 * --------------------------------------------------------------- */
.mea-insight-article__prose {
  box-sizing: border-box;
  max-width: var(--mea-insight-prose);
  margin-inline: auto;
}
.mea-insight-article__prose > * {
  margin-block: 20px 0;
}
.mea-insight-article__prose > :first-child {
  margin-block-start: 0;
}
.mea-insight-article__prose p {
  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);
  color: var(--mea-ink-2);
}
.mea-insight-article__prose h2,
.mea-insight-article__prose h3,
.mea-insight-article__prose h4 {
  margin-block-start: 52px;
  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);
  color: var(--mea-ink-article);
}
.mea-insight-article__prose a {
  color: var(--mea-ink-eyebrow);
  text-decoration: underline;
}
.mea-insight-article__prose {
  /* The link-state rules in _shared/foreground.css score (0,2,1) and would
     otherwise beat a (0,1,1) selector here - see AGENTS.md. */
}
.mea-insight-article__prose a.mea-insight-article__prose-link:hover,
.mea-insight-article__prose a:hover,
.mea-insight-article__prose a:focus-visible {
  color: var(--mea-ink-article);
}
.mea-insight-article__prose strong,
.mea-insight-article__prose b {
  font-weight: var(--mea-weight-semibold);
}
.mea-insight-article__prose ul,
.mea-insight-article__prose ol {
  padding-inline-start: 24px;
  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);
  color: var(--mea-ink-2);
}
.mea-insight-article__prose li + li {
  margin-block-start: 8px;
}
.mea-insight-article__prose {
  /* `2545:4640`. The 4px rule is on the left only and the radius is 0 on that
     edge, so the rule reads as the quote's own spine. Its group draws 24
     above and below rather than the prose rhythm's 20. */
}
.mea-insight-article__prose blockquote,
.mea-insight-article__prose .wp-block-quote {
  box-sizing: border-box;
  margin-block: 24px;
  padding: 24px;
  border-radius: 0 8px 8px 0;
  background-color: var(--mea-surface-alt);
  /* The 4px spine is an INSET shadow, not a border, for the reason the
     card hairline in card-grid records: Figma draws the stroke inside the
     box and measures the 24px padding from the OUTER edge. Sampling row
     700 of the node's own render reads the lime at x 359-362 with the
     #edeff3 fill from 363 and the first glyph at 384, i.e. 359 + 24 - the
     rule overlapping the padding. A real border-left instead puts the
     text 4px in and the measure at 668 against R6's 672. */
  box-shadow: inset 4px 0 0 0 var(--mea-cta-from);
}
.mea-insight-article__prose blockquote + *,
.mea-insight-article__prose .wp-block-quote + * {
  margin-block-start: 24px;
}
.mea-insight-article__prose blockquote p,
.mea-insight-article__prose .wp-block-quote p {
  margin-block: 0;
  font-size: var(--mea-type-p1-size);
  line-height: var(--mea-type-p1-lh);
  color: var(--mea-ink-article);
}
.mea-insight-article__prose blockquote cite,
.mea-insight-article__prose .wp-block-quote cite {
  display: block;
  margin-block-start: 12px;
  font-size: var(--mea-type-p2-size);
  font-style: normal;
  color: var(--mea-ink-2);
}
.mea-insight-article__prose {
  /* `2545:4643` - the in-article banner. It is the 811 frame, i.e. 45.5 past
     the prose on each side, 360 tall at radius 10 with a veil over the
     photograph, and R6 leaves 42 clear above and below it. Reached through a
     negative inline margin rather than a wider wrapper so a plain
     `core/image` in the editor gets it with no extra markup. */
}
.mea-insight-article__prose figure,
.mea-insight-article__prose .wp-block-image {
  margin-block: 42px;
  margin-inline: calc((var(--mea-insight-prose) - var(--mea-insight-wide)) / 2);
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.mea-insight-article__prose figure img,
.mea-insight-article__prose .wp-block-image img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
}
.mea-insight-article__prose figure::after,
.mea-insight-article__prose .wp-block-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: rgba(20, 20, 18, 0.15);
}
.mea-insight-article__prose figcaption {
  position: relative;
  z-index: 1;
  margin-block-start: 12px;
  font-family: var(--mea-font-sans);
  font-size: var(--mea-type-p2-size);
  line-height: var(--mea-type-p2-lh);
  color: var(--mea-ink-2);
}

/* --------------------------------------------------------------- *
 * Share row, `2545:4656`: a 1px rule, 23, then a 41-tall row.
 * --------------------------------------------------------------- */
/* ------------------------------------------------------------------ *
 * Core `wp-block-button` inside an insight body.
 *
 * An editor adds these from the standard inserter, so the markup is core's
 * and cannot carry a mea class. Left alone they render the THEME's button,
 * broken two ways: 8 of the 12 measured 1.97:1 (`--mea-glow-teal` on the
 * theme's #32373c, because `foreground.css`'s `color: inherit` wins the
 * (0,1,0) tie on source order), and 4 wrap their label in
 * `<mark class="has-inline-color has-white-color">` - white an editor chose
 * to read on that grey.
 *
 * Captain call 2026-10-01: match `/for-reinsurers`' "Explore mea Full Stack",
 * which is `mea/product-cards`' `&__cta--band` (node 2393:1330). Every value
 * below is that rule's, read from `src/product-cards/style.scss` rather than
 * eyeballed: the base `__cta` plus the band override's 55px floor, 15/56
 * inset and solid #ebf8da. Re-measured here: 15.4:1 resting, 13.8:1 hovered.
 * ------------------------------------------------------------------ */
.mea-insight-article__prose .wp-block-button__link,
.mea-insight-article__prose .wp-element-button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  /* The arrow is a flex item, so the gap separates it from the label
     rather than a space inside the content string. */
  gap: 8px;
  box-sizing: border-box;
  min-height: 55px;
  padding: 15px 56px;
  border: 0;
  border-radius: 32px;
  /* No token carries #ebf8da; tokens.css names it only in a comment about
     the proof pill, and product-cards keeps it as a literal for that
     reason. Same literal, same reason. */
  background-color: #ebf8da;
  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;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

/* The trailing arrow, which the band CTA carries in its label text. These
   labels are editor content and have none, and rewriting 12 of them across 7
   posts would put a glyph in the database that the design owns - so it is
   drawn here instead, and a label that ever does gain its own arrow is the
   editor's to fix rather than a duplicate this rule created.
   `aria-hidden` is not available on a pseudo-element; `content` with an empty
   alt string is the equivalent and keeps the glyph out of the a11y tree. */
.mea-insight-article__prose .wp-block-button__link::after,
.mea-insight-article__prose .wp-element-button::after {
  content: "→"/"";
  font-weight: var(--mea-weight-regular);
}

/* The label follows the pill, whatever the editor coloured it.
 *
 * Core ships its preset-colour classes with `!important`, so the four
 * `has-white-color` marks reach past any specificity. `!important` is
 * therefore the only mechanism, and it is the right rule rather than a
 * workaround: the pill's fill is fixed by the design system, so its label is
 * not an editor's colour to choose. `inherit` rather than a literal keeps the
 * label following the button if the fill ever moves.
 *
 * Those marks are now meaningless and should come out of the posts; this rule
 * means one that still carries a mark stays legible meanwhile.
 */
.mea-insight-article__prose .wp-block-button__link *,
.mea-insight-article__prose .wp-element-button * {
  background-color: transparent !important;
  color: inherit !important;
}

/* (0,3,1): `foreground.css`'s `[class*="wp-block-mea-"] a:hover` is (0,2,1)
   and deliberately above its own resting rule, so a (0,2,1) tie here would
   only win on source order. The hover fill is the band CTA's own. */
.mea-insight-article__prose a.wp-block-button__link:hover,
.mea-insight-article__prose a.wp-block-button__link:focus-visible,
.mea-insight-article__prose a.wp-element-button:hover,
.mea-insight-article__prose a.wp-element-button:focus-visible {
  background-color: var(--mea-check-ring);
  color: var(--mea-ink-display);
  text-decoration: none;
}

.mea-insight-article__prose .wp-block-button__link:focus-visible,
.mea-insight-article__prose .wp-element-button:focus-visible {
  outline: 2px solid var(--mea-accent-ink);
  outline-offset: 3px;
}

/* The core wrapper carries its own margins and centres nothing by default.
   The button is a block-level beat in the prose, so it gets paragraph rhythm
   and sits centred, and `inline-flex` on the wrapper keeps the pill hugging
   its label the way the band CTA's `flex: 0 0 auto` does. */
.mea-insight-article__prose .wp-block-button {
  margin-block: 32px;
  text-align: center;
}

.mea-insight-article__prose .wp-block-button .wp-block-button__link,
.mea-insight-article__prose .wp-block-button .wp-element-button {
  display: inline-flex;
}

.mea-insight-article__share {
  display: flex;
  flex-direction: column;
  gap: 23px;
  box-sizing: border-box;
  max-width: var(--mea-insight-prose);
  margin: 68px auto 0;
}

.mea-insight-article__share-divider {
  height: 1px;
  width: 100%;
  background-color: var(--mea-surface-alt);
}

.mea-insight-article__share-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mea-insight-article__share-label {
  margin: 0;
  padding: 0;
  /* `2545:4659` is a fixed 192-wide box, which is what puts the first icon
     at x 204 rather than at the end of the string. */
  flex: 0 0 auto;
  width: 192px;
  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);
  color: var(--mea-ink-2);
}

.mea-insight-article__share-links {
  display: flex;
  align-items: center;
  /* Figma places the three icons at x 0 / 72.6 / 144.02 in a 184.122 frame:
     a ~40.1px glyph and a 31.88 / 31.32 gap. On uniform 41px boxes 31.3 lands
     the second icon at 72.3 against 72.6 and the third at 144.6 against
     144.02. */
  gap: 31.3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mea-insight-article__share-item {
  margin: 0;
  padding: 0;
}

.mea-insight-article__share-link {
  display: block;
  /* WCAG 2.2 AA's 24x24 floor is already met by the glyph itself, so the tap
     target needs no pseudo-element the way the header and footer links do. */
  width: 41px;
  height: 41px;
  line-height: 0;
}

.mea-insight-article__share-link .mea-insight-article__share-glyph {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .mea-insight-article {
    padding-block: 64px 72px;
  }
  .mea-insight-article__prose figure,
  .mea-insight-article__prose .wp-block-image {
    margin-inline: 0;
  }
  .mea-insight-article__prose figure img,
  .mea-insight-article__prose .wp-block-image img {
    height: auto;
  }
  .mea-insight-article__share-row {
    flex-wrap: wrap;
    row-gap: 16px;
  }
  .mea-insight-article__share-label {
    width: auto;
  }
  /* The band CTA's own narrow step: product-cards stretches it to the
     column rather than keeping a 56px inset a phone cannot afford. */
  .mea-insight-article__prose .wp-block-button__link,
  .mea-insight-article__prose .wp-element-button {
    padding: 15px 28px;
  }
}

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