/*!**************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/stat-cards/style.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************/
/**
 * mea/stat-cards - glass stat cards on a dark ground behind a radial glow.
 *
 * Read from the four "How X win with mea:" frames of Figma file
 * 9SWHsksPbiz0sj8IF30o5u (2005:6577, 2014:9108, 2008:6807 and the broker
 * equivalent) and the four-up Stats Row in the /products hero (2002:4534).
 * Every colour resolves through src/_shared/tokens.css.
 *
 * TWO CARD TREATMENTS, both in the file, both parameterised here:
 *   .is-card-glass    the audience cards: radius 16, padding 40, fill white at
 *                     5% with a 4px GLASS blur, NO border, a 44 or 50px Inter
 *                     Medium stat (per instance - see the table beside the
 *                     rule below) whose leading clause is lime, left aligned. The
 *                     GLASS bevel is part of this treatment, not a per-page
 *                     option - see cardGlassBevel in render.php.
 *   .is-card-outlined the /products hero cards: radius 16, padding 30/24, fill
 *                     the dark token at 30% with an 8px GLASS blur, a 0.5px
 *                     lime hairline, 40px Inter Medium all-lime stat, centred.
 *                     (Figma strokes two of these four cards #9bdd46 and two
 *                     #c5ff00. That WAS resolved to --mea-accent on both; the
 *                     node renders sampled 2026-09-06 show a real hue split,
 *                     so it is now the per-card `borderColor` - see
 *                     render.php's $card_border.)
 *
 * CARD WIDTH IS DERIVED, never pinned. The grid splits the content column into
 * `columns` equal tracks minus `gap`, which is Figma's FILL sizing. The audit's
 * per-page widths fall out of that: 383.33 (1200 column / 25 gap / 3 up),
 * 384 (1200 / 24 / 3), 405.33 (1280 / 32 / 3), 275 (1200 / 25 / 4).
 *
 * THE GLOW, and why one implementation covers both of Figma's.
 * Figma draws the group's glow two ways for the same rendered result: a frame
 * fill on all four "How X win" frames (a 180deg gradient from transparent to
 * #3e6a64 at 40%, so the wash sits at the bottom edge), plus an extra blurred
 * Ellipse node on /for-reinsurers (800x400 at 320,95, #3e6a64 at 40% x node
 * opacity 0.3, LAYER_BLUR 150) and /for-mgas (600x300 at 1040,141, #3e6a64 at
 * 25.1%, LAYER_BLUR 120). Both are reproduced as CSS gradient layers rather
 * than as a blurred element: `filter: blur(120px)` on a solid ellipse costs a
 * full extra paint pass per frame and clips at the container edge anyway, and
 * the MGA ellipse deliberately overruns the frame (1040 + 600 > 1440). A
 * radial-gradient inside `overflow: hidden` gives the same clipped falloff for
 * nothing. `__wash` carries the frame fill, `__glow` the ellipse.
 */
.mea-stat-cards {
  --mea-stat-columns: 3;
  --mea-stat-gap: 24px;
  --mea-stat-gutter: 120px;
  --mea-stat-gutter-vw: 8.3333vw;
  --mea-stat-pad: 100px;
  --mea-stat-pad-vw: 6.9444vw;
  --mea-gutter: clamp(min(20px, var(--mea-stat-gutter)), var(--mea-stat-gutter-vw), var(--mea-stat-gutter));
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.mea-stat-cards.is-ground-dark {
  /* Floor kept below the ceiling so a small section_pad is not swallowed by
     clamp() - the same bug the hero's padding had. */
  padding-block-start: clamp(min(56px, var(--mea-stat-pad-top, var(--mea-stat-pad))), var(--mea-stat-pad-top-vw, var(--mea-stat-pad-vw)), var(--mea-stat-pad-top, var(--mea-stat-pad)));
  padding-block-end: clamp(min(56px, var(--mea-stat-pad-bottom, var(--mea-stat-pad))), var(--mea-stat-pad-bottom-vw, var(--mea-stat-pad-vw)), var(--mea-stat-pad-bottom, var(--mea-stat-pad)));
  background-color: var(--mea-dark);
  --mea-fg: var(--mea-on-dark);
  color: var(--mea-on-dark);
}

.mea-stat-cards.is-ground-none {
  color: var(--mea-on-dark);
}

.mea-stat-cards__wash,
.mea-stat-cards__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.mea-stat-cards__inner {
  position: relative;
  z-index: 2;
}

.mea-stat-cards__grid {
  display: grid;
  /* --mea-stat-grid-cols overrides the derived equal-fr split when a page
     sets `cardWidths` (asymmetric fixed/hug sizing) - see render.php. */
  grid-template-columns: var(--mea-stat-grid-cols, repeat(var(--mea-stat-columns), minmax(0, 1fr)));
  gap: var(--mea-stat-gap);
  align-items: stretch;
}

/* `stretch` (default) forces every card in a row to the tallest cell -
   correct when every card wants uniform height. `cardStretch:false`
   (render.php) switches to `start` so a card with genuinely more content
   (a longer stat line wrapping to a third line) can grow past its siblings
   instead of dragging them up to match - see render.php's own note. */
.mea-stat-cards.is-no-stretch .mea-stat-cards__grid {
  align-items: start;
}

.mea-stat-cards__card {
  display: flex;
  flex-direction: column;
  /* Unset (default) keeps each treatment's own gap - this 16 on the glass
     chrome, the outlined rule's own 20 below. --mea-stat-card-gap is the
     per-instance override (render.php's cardContentGap): R6 draws the
     outlined chrome at 16 on /mea-underwriting's hero row (2545:2269). */
  gap: var(--mea-stat-card-gap, 16px);
  box-sizing: border-box;
  /* Figma corner radius on every stat card in the file.
     RULED 2026-09-04 by the captain (design call D3, "treat it as drift.
     make a single shape for all 3. no need to ask creative"): ONE card
     shape, 16px radius and 40px padding - the values /for-carriers,
     /for-reinsurers and /for-mgas all draw. R6's /for-brokers row
     (2545:3144) draws its three cards three ways - p-32/r-12 on
     2545:3148 and 2545:3156, p-40/r-16 plus a white 10% border on
     2545:3152 - and that is drift, not per-card chrome. Do not re-open
     this from the brokers frame and do not add a per-card chrome axis. */
  border-radius: var(--mea-stat-card-radius, 16px);
  /* Unset (default) leaves height content-driven, every instance's own
     behaviour. /mea-ingestion's hero row pins both cards to Figma's 185px
     (see render.php's cardHeight) as a FLOOR, not a hard cap - min-height
     rather than height, so a font-shaping difference that pushes the stat
     line to a second line grows the card instead of clipping its caption. */
  min-height: var(--mea-stat-card-h, auto);
}

/**
 * WEIGHT IS SET PER ELEMENT ON PURPOSE - DO NOT REMOVE IT AS DUPLICATION.
 * The theme paints `font-weight: 300` on the same bare `p` / `span` / `h1-h6`
 * selectors it paints Poppins on, and `src/_shared/type.css` deliberately does
 * NOT neutralize weight (see its note: a mea heading with no weight of its own
 * renders Light). So every weight below is load-bearing.
 *
 * FAMILY IS NOT SET HERE, ALSO ON PURPOSE. `type.css` carries the family for
 * every mea block using `font-family: inherit`, precisely so a wrapper that
 * rebinds the family - a mono panel, this block's Fira Code eyebrow - has it
 * flow down to its children. Declaring an absolute `var(--mea-font-sans)` on a
 * text element here would silently break that inheritance chain, which is why
 * the four rules that used to sit on the headline, its spans, the subhead and
 * the sub-line are gone. The eyebrow's `--mea-font-mono` stays: it is a
 * deliberate rebind, not a restatement of the default.
 */
.mea-stat-cards__lead {
  margin: 0;
  color: var(--mea-on-dark);
  font-weight: var(--mea-weight-regular);
  font-size: clamp(16px, 1.3889vw, var(--mea-type-p1-size));
  line-height: var(--mea-type-p1-lh);
}

.mea-stat-cards__stat {
  margin: 0;
  font-weight: var(--mea-weight-medium);
  /* Figma leaves this AUTO on every stat line. Its own nodes measure 48 at
     40px and 53 at 44px, i.e. 1.2, which is the value declared here.
     --mea-stat-line-height is the per-instance override (render.php's
     statLineHeight): /mea-underwriting's hero row declares an explicit
     `leading-[1.3]` rather than leaving it auto (2545:2271). */
  line-height: var(--mea-stat-line-height, 1.2);
}

.mea-stat-cards__stat-accent {
  color: var(--mea-accent);
  font-weight: inherit;
}

.mea-stat-cards__stat-rest {
  color: var(--mea-on-dark);
  font-weight: inherit;
}

/* statStack - the accent phrase ABOVE the plain one rather than inline.
   R6's /information-security cards (2545:4821 / 4824 / 4827) draw two separate
   30px paragraph nodes, not one line with a coloured run. The gap reads the
   card's own --mea-stat-card-gap: a stacked card has __stat as its only child,
   so the property that normally spaces lead/stat/caption has nothing to space
   one level up and carries the design's single 12px here instead of earning a
   second attribute. Two classes so it beats __stat's own rule on source order.

   R6 draws card 1 with both lines Medium 30/1.3 and cards 2 and 3 with the
   second line Regular 30/1.5 - hand-styled drift inside one row, the same
   shape design call D3 ruled on for /for-brokers, so both lines take the one
   weight and the one ratio here rather than earning a per-card axis. */
.mea-stat-cards.is-stat-stack .mea-stat-cards__stat {
  display: flex;
  flex-direction: column;
  gap: var(--mea-stat-card-gap, 12px);
}

.mea-stat-cards__caption {
  margin: 0;
  color: var(--mea-on-dark-soft);
  font-weight: var(--mea-weight-regular);
  font-size: clamp(16px, 1.3889vw, var(--mea-type-p1-size));
  line-height: var(--mea-type-p1-lh);
}

/* ---------------------------------------------------------------------- *
 * Glass treatment - the three audience cards
 * ---------------------------------------------------------------------- */
.mea-stat-cards.is-card-glass .mea-stat-cards__card {
  /* Both halves fall back to the 40 design call D3 welds for the audience
     family, so those rows are unchanged; R6's /information-security row
     (2545:4820) draws px-32 py-36 uniformly across its three cards. */
  padding: var(--mea-stat-pad-block, 40px) var(--mea-stat-pad-inline, 40px);
  background-color: var(--mea-glass);
  backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------------- *
 * cardBevel: corrected - the GLASS effect as white alpha rather than as a
 * dark overlay, the same pair mea/card-grid's `cardBevel: corrected` uses.
 * See --mea-glass-bevel-fitted in _shared/tokens.css for the measured
 * profile and why the dark-overlay form is ground-dependent.
 *
 * Three classes, because the glass treatment's own fill rule above is
 * (0,2,0) and sets `background-color`, which a one-class utility loses to -
 * that is exactly how `.mea-glass-bevel` composes with it today, taking the
 * gradients and leaving the colour. This value needs the colour as well: its
 * base is 0.31% white, the floor its four ramps build up FROM, not the 5%
 * field. So it declares the whole `background` and has to outrank that rule.
 *
 * `background-origin` sits AFTER the shorthand, which resets it to the
 * `padding-box` initial. These cards draw no border, so it is a no-op here
 * and is kept only so the value reads the same wherever it appears.
 * ---------------------------------------------------------------------- */
.mea-stat-cards.is-card-glass.mea-stat-cards--bevel-corrected .mea-stat-cards__card {
  background: var(--mea-glass-bevel-fitted), var(--mea-glass-fitted-base);
  background-origin: border-box;
  box-shadow: var(--mea-glass-hairline-inset);
}

/* The stat step is PER INSTANCE on this treatment, and 44 is the right default.
   The audiences audit read 50 on two nodes and generalised it to the family as
   a block-level defect; measured on all four audience frames on 2026-09-04 it
   is not one:

     /for-carriers    2545:2797 / 2800 / 2804    44
     /for-reinsurers  3008:1406 / 1410 / 1403    44
     /for-mgas        2545:2965 / 2969 / 2973    50
     /for-brokers     2545:3150 / 3154 / 3158    50
     /information-security  2545:4823            30 (the named H2 step)

   So the clamp ceiling stays at the 44 two of the four draw, and the two that
   draw 50 carry statFontSize in their own records. What changed here is only
   that `--mea-stat-font-size` is now honoured on the glass treatment as well
   as the outlined one - the attribute existed but this rule ignored it, which
   is why the split could not be expressed per page before. */
.mea-stat-cards.is-card-glass .mea-stat-cards__stat {
  font-size: var(--mea-stat-font-size, clamp(32px, 3.0556vw, 44px));
}

/* ---------------------------------------------------------------------- *
 * Outlined treatment - the four-up stat row in the /products hero
 * ---------------------------------------------------------------------- */
.mea-stat-cards.is-card-outlined .mea-stat-cards__card {
  /* --mea-stat-pad-inline defaults to the /products 4-up row's own 24px;
     /mea-ingestion's hero row also uses that default, /mea-operations'
     hero row overrides it to 32px - see render.php's cardPaddingInline. */
  padding: var(--mea-stat-pad-block, 30px) var(--mea-stat-pad-inline, 24px);
  align-items: center;
  text-align: center;
  /* Same override as the base rule above; 20 is this treatment's own. */
  gap: var(--mea-stat-card-gap, 20px);
  background-color: color-mix(in srgb, var(--mea-dark) 30%, transparent);
  /* --mea-stat-border-o defaults to fully opaque, so every instance without
     `anim` renders this exactly as before. initStatCards (deck slide 22,
     "Card border - Green border opacity fades 0->1, 400ms, starts 200ms
     after card entrance") tweens it from 0 on the animated instances. */
  /* --mea-stat-card-border is the PER-CARD override render.php sets from
     `cards[].borderColor`; unset it resolves to --mea-accent, so every card
     that names no colour paints exactly what it painted before. R6's
     /products hero row is the one instance that needs it - see the sampled
     values in render.php beside $card_border. */
  /* THIS WAS `0.5px` AND PAINTED A FULL-STRENGTH 1px LINE FOR MONTHS.
     `border-width` cannot go below 1 CSS pixel in Chrome: measured
     2026-09-08 at both device pixel ratios, `0.4px` / `0.5px` / `1px` all
     compute to `1px` and paint one opaque device pixel at DPR 1 and two at
     DPR 2. So the declared 0.5 never reached the page and every outlined
     stat card drew a 1px opaque lime edge - twice the weight the design
     asks for.
     The faithful reproduction is a FULL pixel at HALF strength, which is
     what Figma's own renderer produces: card-grid/render.php sampled R6's
     0.5px opaque #c5ff00 stroke on 2545:2850 and 2545:4507 and read
     rgb(99,137,9) over rgb(2,20,18) - 0.50 on all three channels. Same
     convention, same arithmetic, now in both blocks.
     Lia's 2026-09-08 review asked for `card border:0.5` on /mea-ingestion's
     hero row and `card border: 0.5` on /mea-underwriting's, which is what
     surfaced it. The width is per-instance via `cardBorderWidth` (default
     0.5, so nothing about the declared intent moved); render.php turns a
     sub-pixel value into --mea-stat-border-a and pins the width to 1px.
     --mea-stat-border-o stays the ANIMATION multiplier, unchanged: it tweens
     0->1 on the animated instances and now scales the half-strength stop
     instead of a full one, so the fade still ends where the static value
     is. */
  border: var(--mea-stat-card-border-w, 1px) solid color-mix(in srgb, var(--mea-stat-card-border, var(--mea-accent)) calc(var(--mea-stat-border-o, 1) * var(--mea-stat-border-a, 50%)), transparent);
  backdrop-filter: blur(8px);
}

/* The 4-up /products row centres; /mea-ingestion's 2-up hero row (nested
   inside mea/subpage-hero) left-aligns instead - same outlined chrome, a
   real per-instance difference in the design, not a default worth changing. */
.mea-stat-cards.is-card-outlined.is-align-left .mea-stat-cards__card {
  align-items: flex-start;
  text-align: left;
}

.mea-stat-cards.is-card-outlined .mea-stat-cards__stat {
  font-size: var(--mea-stat-font-size, clamp(30px, 2.7778vw, 40px));
}

/* R6 draws the caption a step below the lead line on the glass cards:
   /for-brokers 2545:3151 and 2545:3155 are P2 (16 / 1.5) where the lead
   nodes 2545:3149 and 2545:3153 are P1 (20 / 1.6). Opt-in via `captionStep`
   so the three sibling audience pages keep the shipped P1 until each is
   measured - see render.php's own comment. Two classes to clear the
   single-class base rule above on source order alone. */
.mea-stat-cards.is-caption-p2 .mea-stat-cards__caption {
  font-size: clamp(14px, 1.1111vw, var(--mea-type-p2-size));
  line-height: var(--mea-type-p2-lh);
}

.mea-stat-cards.is-card-outlined .mea-stat-cards__caption {
  /* Was --mea-on-dark (full opacity) until 2026-09-02, when Lia asked for
     the same 0.8 body-ink weight the rest of the dark-ground copy carries
     - see that token's own note in tokens.css. */
  color: var(--mea-on-dark-copy);
  font-size: clamp(14px, 1.1111vw, var(--mea-type-p2-size));
  line-height: var(--mea-type-p2-lh);
}

/* ---------------------------------------------------------------------- *
 * Per-instance axes. Each is unset by default, so every instance that does
 * not name one renders byte-identically to what it rendered before.
 * ---------------------------------------------------------------------- */
/* R6 draws the outlined chrome over three different fills; see cardFill in
   render.php. `glass` is the shared --mea-glass token (white at 5%), which
   is what 2545:2269 samples to over /mea-underwriting's hero scrim. */
.mea-stat-cards.is-fill-glass .mea-stat-cards__card {
  background-color: var(--mea-glass);
}

/* `none` - R6 draws /mea-ingestion's two hero cards `bg-[rgba(0,0,0,0)]`
   (2545:1805, 2545:1808), so the hero photograph reads straight through the
   lime outline. Two classes for the same reason the two rules above use
   them: the outlined treatment's own fill rule is (0,2,0) and this must
   beat it on specificity, not on source order. */
.mea-stat-cards.is-fill-none .mea-stat-cards__card {
  background-color: transparent;
}

/* The named "P1" caption step - Inter Regular 20/1.6 - which R6 draws on
   /mea-underwriting's hero captions (2545:2270). Two classes so it beats the
   outlined treatment's own (0,2,0) caption rule on specificity rather than
   on source order. */
.mea-stat-cards.is-caption-p1 .mea-stat-cards__caption {
  font-size: clamp(16px, 1.3889vw, var(--mea-type-p1-size));
  line-height: var(--mea-type-p1-lh);
}

/* Pure white, which the same three nodes draw (`text-white`), against the
   outlined treatment's 0.8 body ink and the base rule's --mea-on-dark-soft. */
.mea-stat-cards.is-caption-tone-full .mea-stat-cards__caption {
  color: var(--mea-on-dark);
}

/* initStatCards (deck slide 22): "Green numbers get a subtle text-shadow
   glow pulse once on landing, 600ms" - toggled as a class rather than driven
   from GSAP, since text-shadow isn't a plain numeric tween target. Colour is
   --mea-accent, never the deck's literal #B8FF04. */
@keyframes mea-stat-glow-pulse {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 12px var(--mea-accent);
  }
}
.mea-stat-cards__stat-accent.is-glow-pulse {
  animation: mea-stat-glow-pulse 0.6s ease-in-out;
}

/* The counter's numeral slot, created by countUpPrefix() in animation.js and
   never present in render.php's own output: a width-stable box so the digits
   ticking 0 -> 92 cannot move the line's wrap point and rewrap the card. JS
   sets min-width to the final value's digit count in `ch`; tabular figures
   are what make one digit exactly 1ch. Right-aligned so the number stays
   tight against the "%" while it is still one digit short of its final
   width. Inert when the counter never runs - no slot, no rule. */
.mea-stat-cards__count {
  display: inline-block;
  min-width: 1ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: inherit;
}

/* The counter's WORD wrapper, also created by countUpPrefix() and also absent
   from render.php's output: the numeral slot plus whatever is welded to it in
   the copy - the "%" in "up to 60%", an "x", a trailing full stop. The slot
   above is `inline-block`, i.e. an atomic inline the line breaker may break
   either side of, so without this the "%" could start its own line once the
   counter had run. See countUpPrefix() in animation.js for the measurements.
   Inert when the counter never runs - no wrapper, no rule. */
.mea-stat-cards__count-word {
  white-space: nowrap;
  font-weight: inherit;
}

/* ---------------------------------------------------------------------- *
 * Responsive. Figma only supplies the 1440 frame, so the collapse follows the
 * shared breakpoint convention in tokens.css.
 * ---------------------------------------------------------------------- */
/* `cardWidthsFloor` - see render.php. Bounded at BOTH ends on purpose: the
   1023 rule below is only (0,1,0), so an unbounded `max-width` rule at (0,2,0)
   here would outrank it and take the 2-up collapse with it. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .mea-stat-cards--widths-floor .mea-stat-cards__grid {
    grid-template-columns: repeat(var(--mea-stat-columns), minmax(0, 1fr));
  }
}
/* `statFontFit` - see render.php, which derives --mea-stat-font-fit from this
   instance's OWN columns/gap/gutter/padding rather than from any number typed
   here. `min()` so the pinned statFontSize still wins wherever it is the
   smaller of the two, which is every width from 1440 up.

   Bounded below at 1024 because the derivation assumes the 3-up grid and the
   40px card padding this band draws: the rules below re-columns the grid to 2
   (and then 1) and drop the padding to 32/24, so the same expression would be
   describing a card that no longer exists. Opt-in for the reason
   `cardWidthsFloor` above is - /mea-ingestion and the rest fit at every width,
   and scaling their type down would move pages this change has no business
   moving. */
@media (min-width: 1024px) {
  .mea-stat-cards--font-fit.is-card-glass .mea-stat-cards__stat,
  .mea-stat-cards--font-fit.is-card-outlined .mea-stat-cards__stat {
    font-size: min(var(--mea-stat-font-size), var(--mea-stat-font-fit));
  }
}
/* The same ceiling for the two collapse bands, against their own
   --mea-stat-font-fit-md / -sm - a 2-up and then a 1-up grid, and the glass
   padding those bands restate. Measured on /for-brokers before these two
   existed: "deployment" left the card again from 878 down to 768, worst 47px,
   and once more from 393 down to 363, worst 28px - the first band's rule
   cannot reach either, since the card it describes is not the one being
   drawn. The two queries OVERLAP - everything at or below 767 also matches
   1023 - and both rules carry the same specificity, so the -sm block is kept
   below the -md one and wins on source order alone. */
@media (max-width: 1023px) {
  .mea-stat-cards--font-fit.is-card-glass .mea-stat-cards__stat,
  .mea-stat-cards--font-fit.is-card-outlined .mea-stat-cards__stat {
    font-size: min(var(--mea-stat-font-size), var(--mea-stat-font-fit-md));
  }
}
@media (max-width: 767px) {
  .mea-stat-cards--font-fit.is-card-glass .mea-stat-cards__stat,
  .mea-stat-cards--font-fit.is-card-outlined .mea-stat-cards__stat {
    font-size: min(var(--mea-stat-font-size), var(--mea-stat-font-fit-sm));
  }
}
@media (max-width: 1023px) {
  .mea-stat-cards__grid {
    grid-template-columns: repeat(min(var(--mea-stat-columns), 2), minmax(0, 1fr));
  }
  .mea-stat-cards.is-card-glass .mea-stat-cards__card {
    padding: 32px;
  }
}
@media (max-width: 767px) {
  .mea-stat-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mea-stat-cards.is-card-glass .mea-stat-cards__card {
    padding: 24px;
  }
}

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