/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/insights-featured/style.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
/**
 * mea/insights-featured
 *
 * One insight card, two container behaviours. Measured from these Figma
 * instances (file 9SWHsksPbiz0sj8IF30o5u):
 *
 *   2008:7796  /insights "Section - Integration"   823 tall, 120/120 insets,
 *              120px section gutter, static 3-up grid, cards 378.667 x 345
 *   2162:4593  insight single "Related Articles"   516 tall, 80/91 insets,
 *              80px nav gutter, carousel, cards 360 x 345 with 44px arrows
 *
 * Card chrome is identical in both: 32px inset, 16px radius, a 0.4px lime
 * stroke, 16px row gap, a 12px meta-to-title gap and a 12px pad above the
 * date row. Only the width and the box around the row change, so the card
 * lives in one rule set and the two layouts wrap it.
 *
 * Colour resolves through tokens.css. Two literals survive and both are
 * called out where they appear: the read-time grey and the nav-button teal
 * are roles no token carries, and tokens.css is the shared layer.
 */
.mea-insights-featured {
  box-sizing: border-box;
  /* Subpage frames use a 120px section gutter against the homepage's 88px,
     so rebind the shared gutter rather than bypass .mea-container.
     120 / 1440 = 8.3333vw. */
  --mea-gutter: clamp(20px, 8.3333vw, 120px);
}
.mea-insights-featured__inner {
  display: flex;
  flex-direction: column;
  /* Header block bottom 307 to grid top 358 on 2008:7796. */
  gap: 51px;
}
.mea-insights-featured {
  /* --------------------------------------------------------------- *
   * The dark panel: flat --mea-dark with the teal wash rising toward
   * the bottom. Both instances declare the same ramp -
   * `linear-gradient(180deg, transparent 28.55%, rgba(62,106,100,0.2)
   * 82.628%)` - so the stops are percentages of the section and one
   * rule covers an 823px section and a 516px one.
   * --------------------------------------------------------------- */
  /* The related band's hairlines (`2545:4673`). #1f2a26 is a block-local
     literal for the same reason the read-time grey below it is: no rule token
     is within 5/255 of it (--mea-rule-dark #2e2e2b is 15 on red). They are
     real 1px borders rather than inset shadows because R6's frame counts them
     in its own 516: the top rule sits inside the 80px inset, the bottom one
     outside the 90 - which is why the carousel instance sets a 79px top
     padding against the design's stated 80. */
}
.mea-insights-featured--rule-both, .mea-insights-featured--rule-bottom {
  border-bottom: 1px solid #1f2a26;
}
.mea-insights-featured--rule-both {
  border-top: 1px solid #1f2a26;
}
.mea-insights-featured--panel-dark {
  --mea-fg: var(--mea-on-dark);
  padding-top: var(--mea-insights-pt, 120px);
  padding-bottom: var(--mea-insights-pb, 120px);
  background-color: var(--mea-dark);
  /* Figma does NOT render that two-stop declaration as a linear ramp:
     it interpolates the transparent stop without premultiplying while
     CSS premultiplies. Sampling a 1px column down the 2008:7796 render
     and solving each row back to an alpha fits alpha = 0.2 * f^2.53,
     against a linear ramp's 0.2 * f - at the ramp midpoint 0.035
     rather than 0.100. The curve is therefore written out as stops.
     Measured error of these four segments against the render: worst
     1.9/255 per channel, RMSE 0.57.
     A literal `0%` stop is avoided on purpose: the build's CSS
     minifier rewrites it to `0`, which invalidates color-mix and
     silently drops the whole declaration. */
  background-image: linear-gradient(180deg, transparent 28.55%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-insights-glow, 20%) * 0.03), transparent) 42.07%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-insights-glow, 20%) * 0.173), transparent) 55.589%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-insights-glow, 20%) * 0.483), transparent) 69.109%, color-mix(in srgb, var(--mea-glow-teal) var(--mea-insights-glow, 20%), transparent) 82.628%, color-mix(in srgb, var(--mea-glow-teal) var(--mea-insights-glow, 20%), transparent) 100%);
  color: var(--mea-on-dark);
}
.mea-insights-featured {
  /* --------------------------------------------------------------- *
   * The composed header.
   * 2008:7798 opens the headline-to-body gap to 31px while the
   * eyebrow-to-headline gap stays at 16px. mea/section-header's
   * `compact` step is a flat 16px on all three rows because its own
   * measurement stopped at the inner frame 2008:7799 and never saw the
   * 31px on the outer one. Corrected here, on the one instance that has
   * it, rather than by reopening the shared header while other tasks
   * are editing it. Reported so it can be folded into a spacing step
   * there.
   * --------------------------------------------------------------- */
}
.mea-insights-featured__header .mea-section-header--spacing-compact .mea-section-header__body {
  margin-top: 15px;
}
.mea-insights-featured {
  /* --------------------------------------------------------------- *
   * The pre-rework heading. The design has none, so `title` defaults
   * to empty and this only renders for a page that still sets one.
   * --------------------------------------------------------------- */
}
.mea-insights-featured__legacy-title {
  margin: 0;
  padding: 0;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: clamp(30px, 6vw, var(--mea-type-h1-size));
  line-height: var(--mea-type-h1-lh);
}
.mea-insights-featured__empty {
  margin: 0;
  font-family: var(--mea-font-sans);
  font-size: var(--mea-type-p1-size);
  line-height: var(--mea-type-p1-lh);
}
.mea-insights-featured {
  /* --------------------------------------------------------------- *
   * Layout 1: the static grid (2008:7796).
   * Card width is derived, never pinned: the 120px gutter leaves a
   * 1200px column, so three 1fr tracks with the 32px Figma gutter land
   * on 378.667px, which is the measured card width.
   * --------------------------------------------------------------- */
}
.mea-insights-featured__grid {
  display: grid;
  grid-template-columns: repeat(var(--mea-insights-cols, 3), minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mea-insights-featured__item {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mea-insights-featured__item > * {
  flex: 1 1 auto;
  min-width: 0;
}
.mea-insights-featured {
  /* --------------------------------------------------------------- *
   * Layout 2: the carousel (2162:4593).
   * 1280px content column, 44px button, 28px gap, 1136px track, 28px
   * gap, 44px button. Three 360px cards and two 28px gaps fill the
   * track exactly. The track is what scrolls, so the page itself never
   * gains a horizontal scrollbar.
   * --------------------------------------------------------------- */
}
.mea-insights-featured--layout-carousel {
  /* The related row sits on the 80px nav gutter, not the 120px
     section gutter the index page uses. */
  --mea-gutter: var(--mea-nav-gutter);
}
.mea-insights-featured__carousel {
  display: flex;
  align-items: center;
  gap: 28px;
}
.mea-insights-featured__track {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mea-insights-featured__track::-webkit-scrollbar {
  display: none;
}
.mea-insights-featured__track:focus-visible {
  outline: 2px solid var(--mea-accent);
  outline-offset: 4px;
}
.mea-insights-featured--layout-carousel .mea-insights-featured__grid {
  display: flex;
  gap: 28px;
}
.mea-insights-featured--layout-carousel .mea-insights-featured__item {
  flex: 0 0 calc((100% - (var(--mea-insights-cols, 3) - 1) * 28px) / var(--mea-insights-cols, 3));
  scroll-snap-align: start;
}
.mea-insights-featured__nav {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  /* Figma paints the nav button a flat #083e38 (2178:4146). No token
     carries it: --mea-glow-teal #3e6a64 is the wash colour and lands
     54/255 away on red, and no mix of the dark and teal tokens gets
     inside 20/255 on all three channels. Kept as a literal with the
     node cited rather than adding a token to the shared layer.
     White-on-this measures 12.0:1. */
  background: #083e38;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.mea-insights-featured__nav img {
  display: block;
  width: 20px;
  height: 20px;
}
.mea-insights-featured__nav:hover {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)) brightness(1.25);
}
.mea-insights-featured__nav:focus-visible {
  outline: 2px solid var(--mea-accent);
  outline-offset: 3px;
}
.mea-insights-featured {
  /* Nothing to page: the rails stay so the cards keep their 360px, but
     the control is neither visible nor reachable. */
}
.mea-insights-featured__nav--inert {
  visibility: hidden;
  pointer-events: none;
}
.mea-insights-featured {
  /* --------------------------------------------------------------- *
   * Tablet and mobile. Figma only supplies the 1440 frame, so both
   * steps are interpolated from it: three columns fold to two and then
   * to one, the section insets tighten, and the carousel keeps its
   * arrows because paging is the only affordance a narrow track has.
   * --------------------------------------------------------------- */
}
@media (max-width: 1023px) {
  .mea-insights-featured--panel-dark {
    padding-top: min(var(--mea-insights-pt, 120px), 80px);
    padding-bottom: min(var(--mea-insights-pb, 120px), 80px);
  }
  .mea-insights-featured__inner {
    gap: 40px;
  }
  .mea-insights-featured__grid {
    gap: 24px;
  }
  .mea-insights-featured--layout-grid .mea-insights-featured__grid {
    grid-template-columns: repeat(var(--mea-insights-cols-md, 2), minmax(0, 1fr));
  }
  .mea-insights-featured--layout-carousel .mea-insights-featured__grid {
    gap: 24px;
  }
  .mea-insights-featured--layout-carousel .mea-insights-featured__item {
    flex-basis: calc((100% - (var(--mea-insights-cols-md, 2) - 1) * 24px) / var(--mea-insights-cols-md, 2));
  }
  .mea-insights-featured__carousel {
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .mea-insights-featured--panel-dark {
    padding-top: min(var(--mea-insights-pt, 120px), 56px);
    padding-bottom: min(var(--mea-insights-pb, 120px), 56px);
  }
  .mea-insights-featured__inner {
    gap: 32px;
  }
  .mea-insights-featured--layout-grid .mea-insights-featured__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .mea-insights-featured--layout-carousel .mea-insights-featured__grid {
    gap: 16px;
  }
  .mea-insights-featured--layout-carousel .mea-insights-featured__item {
    flex-basis: 100%;
  }
  .mea-insights-featured__carousel {
    gap: 12px;
  }
  .mea-insights-featured__nav {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 18px;
  }
  .mea-insights-featured__nav img {
    width: 16px;
    height: 16px;
  }
}

/* ------------------------------------------------------------------- *
 * The card. Identical in both instances apart from its width, so it is
 * scoped to the block root rather than to either layout.
 * ------------------------------------------------------------------- */
.mea-insights-featured .mea-insight-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  /* 2008:7804 and 2158:3599 both store 345. `min-height`, not `height`:
     Figma's frame does not clip, and a real excerpt longer than the comp's
     must push the card rather than lose a line of glyphs. All cards in a
     row still settle level because the grid and the flex track stretch. */
  min-height: 345px;
  padding: 32px;
  border-radius: 16px;
  /* Figma draws a 0.4px lime stroke centred on the frame edge, which costs
     no layout. A border would add 0.8px to both the 345px height and the
     314.667px inner column, so the ring is an inset shadow instead - the
     same substitution card-grid and section-header make for their
     hairlines. */
  box-shadow: inset 0 0 0 0.4px var(--mea-accent);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mea-insights-featured .mea-insight-card__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mea-insights-featured .mea-insight-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Figma "Eyebrow Line" - Fira Code Light 20 / 1.5 tracking. These two rows
   are the carry-forward from the build plan: the block predates the shared
   type layer, so both were inheriting --mea-font-sans from the block root
   and computing to Inter against a design that draws them mono. */
.mea-insights-featured .mea-insight-category {
  overflow: hidden;
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-light);
  font-size: var(--mea-type-eyebrow-size);
  line-height: normal;
  letter-spacing: var(--mea-type-eyebrow-ls);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--mea-accent);
}

.mea-insights-featured .mea-insight-read-time {
  flex: 0 0 auto;
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-light);
  /* One-off type step: Figma sets 15px on this row only (2008:7808). */
  font-size: 15px;
  line-height: normal;
  white-space: nowrap;
  /* Figma paints an opaque #b2b2ad here. No token carries it and the
     nearest expressible value, color-mix on --mea-on-dark-soft, lands
     7-9/255 away because every on-dark token is cooler than this grey.
     Kept as a literal with the node cited rather than adding a token to
     the shared layer. Measured 8.9:1 on the card ground at the top of the
     card and 7.6:1 at the bottom, both above AA. */
  color: #b2b2ad;
}

/* Figma "H3". */
.mea-insights-featured .mea-insight-card__title {
  margin: 0;
  padding: 0;
  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-on-dark-soft);
}

.mea-insights-featured .mea-insight-card__link {
  color: inherit;
  text-decoration: none;
}

/* The whole card is the target, but the heading keeps the accessible name so
   a link list reads as article titles rather than as "read more". */
.mea-insights-featured .mea-insight-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.mea-insights-featured .mea-insight-card__link:focus-visible {
  outline: none;
}

.mea-insights-featured .mea-insight-card__link:focus-visible::after {
  outline: 2px solid var(--mea-accent);
  outline-offset: 3px;
}

/* Figma "P2" at 80% white. */
.mea-insights-featured .mea-insight-card__excerpt {
  /* `auto` basis, not Figma's `flex-[1_0_0]`. A zero basis lets the excerpt
     be squeezed to whatever the fixed 345px card has left over, and a real
     post whose title runs four lines instead of the comp's two then paints
     its last excerpt line straight through the date row - measured on the
     lab page before this. Grow still fills the free space, so the design's
     own content lands identically; only an overlong card now pushes. */
  flex: 1 0 auto;
  margin: 0;
  padding: 0;
  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: color-mix(in srgb, var(--mea-on-dark) 80%, transparent);
}

.mea-insights-featured .mea-insight-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* 2008:7811 - a 12px pad above the date row, not a gap. */
  padding-top: 12px;
}

.mea-insights-featured .mea-insight-card__date {
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-p2-size);
  line-height: normal;
  /* Figma sets the date in caps on the card while the stored value keeps
     its own case, so the caps are presentation. */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mea-on-dark);
}

.mea-insights-featured .mea-insight-card__arrow {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.mea-insights-featured .mea-insight-card__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

/* No hover state is drawn on the card; the arrow is isolated in its own frame
   at the bottom right as a hover-nudge target. Nothing here changes a text
   colour, so every measured contrast ratio holds in the hover state. */
.mea-insights-featured .mea-insight-card:hover {
  box-shadow: inset 0 0 0 1px var(--mea-accent);
}

.mea-insights-featured .mea-insight-card:hover .mea-insight-card__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .mea-insights-featured .mea-insight-card,
  .mea-insights-featured .mea-insight-card__arrow,
  .mea-insights-featured__nav {
    transition: none;
  }
  .mea-insights-featured .mea-insight-card:hover .mea-insight-card__arrow {
    transform: none;
  }
  .mea-insights-featured__track {
    scroll-behavior: auto;
  }
}
@media (max-width: 767px) {
  .mea-insights-featured .mea-insight-card {
    min-height: 0;
    padding: 24px;
  }
  .mea-insights-featured .mea-insight-category {
    font-size: 16px;
    letter-spacing: 1.2px;
  }
  .mea-insights-featured .mea-insight-card__title {
    font-size: 20px;
  }
}

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