/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/card-grid/style.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
/**
 * mea/card-grid
 *
 * One configurable grid instead of a block per variation. Measured from these
 * Figma instances (file 9SWHsksPbiz0sj8IF30o5u):
 *
 *   2008:8242  /careers "Culture Section"      7 number tiles, 2 cols, glow 60%
 *   2008:7989  /team    "Intro-Section"        4 number tiles, 2 cols, glow 40%
 *   2008:8528  /working-with-mea "Our values"  4 icon tiles + description line
 *
 * Card width is DERIVED, never pinned: the panel's 120px section gutter
 * leaves a 1200px content column, so `repeat(n, minmax(0, 1fr))` with the
 * 24px Figma gutter lands on 588px at two columns (the measured tile width
 * on all three instances) and 384px at three, which is the width audit B
 * measured on the audience pages. A row the card count leaves partly empty
 * keeps its column width rather than stretching, which is what the design
 * does with the 7th careers tile.
 *
 * Colour resolves through tokens.css only. `color-mix` reads the token and
 * varies its alpha, so the translucent fill, hairline edge and 70% body copy
 * stay on the palette instead of hard-coding an rgba().
 */
/* The ambient teal panel wash, hoisted so the `--panel-glow` rule and the
   scrim+wash pair rule below cannot drift apart. Sass-level, so the emitted
   CSS for --panel-glow is byte-identical to what it was before. */
.mea-card-grid {
  box-sizing: border-box;
}
.mea-card-grid__inner {
  display: flex;
  flex-direction: column;
  /* Header to grid, on the three instances measured (2545:1910's own
     64px is a real per-instance deviation - see render.php's headerGap
     comment - not a change to this shared default). */
  gap: var(--mea-card-grid-header-gap, 56px);
}
.mea-card-grid__body {
  display: flex;
  flex-direction: column;
  /* Lead-in line to grid (2008:7993), and grid to trailing footer. 32 is
     the shipped value and the fallback. R6's three trailing-line
     instances all want 38 instead - Crux's technology-model (3012:10695)
     and executes (3012:10719) and Moonrock's business-result
     (3012:11034) - measured the same way on all three: with the card
     rows aligned, the trailing line's own ink band sits 6px higher in the
     page than in the node's render. */
  gap: var(--mea-card-grid-footer-gap, 32px);
}
.mea-card-grid {
  /* An asymmetric trailing inset, for a design that draws the card row
     wider than a symmetric gutter allows - see render.php's
     `sectionGutterEnd` comment for the measurement on 2545:3185. The
     custom property is unset by default, so `.mea-container`'s own
     symmetric `padding-inline: var(--mea-gutter)` still decides both
     sides on every other instance. Two classes so this beats
     `.mea-container`, which is enqueued after the block stylesheets and
     would otherwise win the (0,1,0) tie - the same cascade trap
     AGENTS.md records for `.mea-cta` and for a block's own max-width. */
}
.mea-card-grid .mea-card-grid__inner {
  padding-inline-end: var(--mea-card-grid-gutter-end, var(--mea-gutter));
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * The dark panel: flat #021412, with an optional teal wash rising to
   * the bottom edge. Alpha varies per instance (40% on team and values,
   * 60% on careers, 0 on all four R6 work-away nodes), so it is a
   * parameter - and at 0 the wash is not painted at all.
   * --------------------------------------------------------------- */
  /* Subpage frames use a 120px section gutter against the homepage's 88px,
     so rebind the shared gutter rather than bypass .mea-container - on
     BOTH panels, not just the dark one. /mea-ingestion's light-ground
     "Company Types" (panel:none) is the first instance that needed this
     confirmed missing: nothing else in the file had paired panel:none with
     a subpage section until this one. 120 / 1440 = 8.3333vw. */
}
.mea-card-grid--panel-dark, .mea-card-grid--panel-none, .mea-card-grid--panel-raised, .mea-card-grid--panel-fade {
  --mea-gutter: clamp(20px, 8.3333vw, 120px);
}
.mea-card-grid {
  /* panel:none had no background of its own until 2026-09-02: every
     instance rendered on whatever showed through a fully transparent
     root, which is the browser's own white canvas, not the site's actual
     light-surface tone (mea/operations' "Modules" section measured
     #ffffff against Figma's #fafafa). Every other light-surface block
     (mea/proof, mea/section-header) already paints `--mea-surface` as its
     default light fill; this brings panel:none in line rather than
     leaving it the one block that doesn't. */
}
.mea-card-grid--panel-none {
  background-color: var(--mea-surface);
}
.mea-card-grid {
  /* A third ground, for R6's case-study singles. Their challenge, executes
     and result sections sit on --mea-panel-raised (#062320) with a 1px
     --mea-on-dark 10% hairline above and below - a lighter dark than
     --panel-dark's #021412, flat, and with a rule colour that is not
     --mea-rule-dark: #2e2e2b composites to (46,46,43) where R6 draws
     (31,57,54). Rebinding --mea-card-grid-rule is what carries that without
     touching the two grounds already shipped. Nodes 3012:10333, 3012:10350
     and 3012:10398, with their 13b and 13c siblings. */
}
.mea-card-grid--panel-raised {
  --mea-fg: var(--mea-on-dark);
  --mea-card-grid-rule: color-mix(in srgb, var(--mea-on-dark) 10%, transparent);
  padding-top: var(--mea-card-grid-pt, 100px);
  padding-bottom: var(--mea-card-grid-pb, 100px);
  background-color: var(--mea-panel-raised);
  color: var(--mea-on-dark);
}
.mea-card-grid {
  /* A FOURTH ground, and the inverse of --panel-glow below: R6's
     /working-with-mea "Growth & Operations" (2545:4255) fades toward BLACK at
     its bottom edge instead of toward teal, which is how the page steps down
     from the lit values panel above it into the closing CTA's flat #021412.
     Figma declares it as two fills over the page ground - a flat
     rgba(255,255,255,0.012) tint and
     `linear-gradient(180deg, rgba(0,0,0,0) 61.949%, rgba(0,0,0,0.7) 117.76%)`
     - and unlike every other gradient in this file it needs NO premultiply
     correction, because both stops are black and only the alpha moves (same
     reasoning mea/bridge-band records for its two equal-alpha stops). Solved
     against the node's own 1x render down the x=60 margin, predicted vs
     measured: y=500 (4.7,21.7,19.8) vs (5,22,20); y=600 (3.9,17.8,16.3) vs
     (4,18,16); y=700 (3.0,14.0,12.8) vs (3,14,13); y=740 (2.7,12.4,11.4) vs
     (3,12,11). The stops are Figma's own percentages, written out verbatim.
     The rule colour is rebound the way --panel-raised rebinds it: R6 draws
     this section's own border-t/border-b at rgba(255,255,255,0.04), which
     composites to (15,32,30) over the tinted ground and measures exactly that
     at y=0, where --mea-rule-dark would paint (46,46,43). One instance;
     nothing else names this ground. */
}
.mea-card-grid--panel-fade {
  --mea-fg: var(--mea-on-dark);
  --mea-card-grid-rule: color-mix(in srgb, var(--mea-on-dark) 4%, transparent);
  padding-top: var(--mea-card-grid-pt, 100px);
  padding-bottom: var(--mea-card-grid-pb, 100px);
  background-color: var(--mea-dark);
  background-image: linear-gradient(180deg, transparent 61.949%, rgba(0, 0, 0, 0.7) 117.76%), linear-gradient(90deg, color-mix(in srgb, var(--mea-on-dark) 1.2%, transparent), color-mix(in srgb, var(--mea-on-dark) 1.2%, transparent));
  color: var(--mea-on-dark);
}
.mea-card-grid--panel-dark {
  --mea-fg: var(--mea-on-dark);
  /* Both insets are attributes: 2008:8242 and 2008:8528 draw 100/100,
     2008:7989 draws 100/120. A welded value leaves one of them wrong. */
  padding-top: var(--mea-card-grid-pt, 100px);
  padding-bottom: var(--mea-card-grid-pb, 100px);
  background-color: var(--mea-dark);
  color: var(--mea-on-dark);
}
.mea-card-grid {
  /* The wash is a LAYER, added only where the design draws one - render.php
     adds this class when panelGlow > 0. R6 draws the panel flat on all four
     "Where mea takes work away" nodes (2545:2850, 2545:4507, 2545:3021,
     2545:3185: rgb(2,20,18) sampled top to bottom down the x=20 margin),
     which the `work-away` preset carries; /careers (2008:8242, 60%), /team
     (2008:7989, 40%), /mea-operations (15%) and /mea-full-stack (40%) draw
     theirs and are unchanged.

     Figma's two-stop gradient does NOT render linearly: sampled down the
     careers panel (2008:8242, 60% stop) the wash reaches only ~10% alpha
     at the halfway point where a linear ramp reaches 30%, because Figma
     interpolates the transparent stop without premultiplying while CSS
     gradients premultiply. Fitting the samples gives alpha = max * f^2.5,
     so the curve is written out as stops rather than left to the browser
     to interpolate. Measured error after this: <=2/255 per channel. */
}
.mea-card-grid--panel-glow {
  background-image: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-card-grid-glow, 40%) * 0.031), transparent) 25%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-card-grid-glow, 40%) * 0.177), transparent) 50%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-card-grid-glow, 40%) * 0.487), transparent) 75%, color-mix(in srgb, var(--mea-glow-teal) var(--mea-card-grid-glow, 40%), transparent) 100%);
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * A DIRECTIONAL scrim over the panel, as opposed to the ambient teal
   * wash above. /mea-underwriting's "How It Works" (2545:2291) is the
   * first instance and draws no teal at all: `#021412` under
   * `linear-gradient(89.47994873943996deg, rgb(0,0,0) 8.2575%%,
   * rgba(0,0,0,0) 38.488%%)`, a black wedge down the left edge.
   * render.php builds the gradient and adds this class only when an
   * instance sets a strength, so nothing else in the file is touched.
   * The pair rule keeps the scrim ABOVE the wash for an instance that
   * ever draws both; the wash is a Sass variable so this composition
   * cannot drift from the single-layer rule above.
   * --------------------------------------------------------------- */
}
.mea-card-grid--has-panel-scrim {
  background-image: var(--mea-card-grid-panel-scrim, none);
}
.mea-card-grid--panel-glow.mea-card-grid--has-panel-scrim {
  background-image: var(--mea-card-grid-panel-scrim, none), linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-card-grid-glow, 40%) * 0.031), transparent) 25%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-card-grid-glow, 40%) * 0.177), transparent) 50%, color-mix(in srgb, var(--mea-glow-teal) calc(var(--mea-card-grid-glow, 40%) * 0.487), transparent) 75%, color-mix(in srgb, var(--mea-glow-teal) var(--mea-card-grid-glow, 40%), transparent) 100%);
}
.mea-card-grid {
  /* Same composition for the fade ground, and for the same reason: both
     --panel-fade and --has-panel-scrim set `background-image` at (0,1,0), so
     without this an instance naming both would silently lose one to source
     order. No record names both today; this keeps that from becoming a
     discovery later. Both grounds are Sass variables so the pair rules
     cannot drift from the single-layer ones. */
}
.mea-card-grid--panel-fade.mea-card-grid--has-panel-scrim {
  background-image: var(--mea-card-grid-panel-scrim, none), linear-gradient(180deg, transparent 61.949%, rgba(0, 0, 0, 0.7) 117.76%), linear-gradient(90deg, color-mix(in srgb, var(--mea-on-dark) 1.2%, transparent), color-mix(in srgb, var(--mea-on-dark) 1.2%, transparent));
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * Section-level background photo. /mea-ingestion's "How It Works" is
   * the only "How It Works" instance with one - a single low-opacity
   * IMAGE fill and no separate wash gradient, unlike --panel-glow's
   * ambient teal wash above. Replaces that gradient rather than layering
   * under it, since this instance draws no wash of its own. The veil is
   * the dark ground at `1 - opacity`, same trick `section-header`'s own
   * bgImageUrl uses to fake a translucent photo over a solid colour.
   * --------------------------------------------------------------- */
}
.mea-card-grid--has-bg-image {
  background-image: linear-gradient(0deg, color-mix(in srgb, var(--mea-dark) var(--mea-card-grid-bg-veil, 80%), transparent), color-mix(in srgb, var(--mea-dark) var(--mea-card-grid-bg-veil, 80%), transparent)), var(--mea-card-grid-bg-image, none);
  background-size: var(--mea-card-grid-bg-size, cover);
  background-position: var(--mea-card-grid-bg-position, center);
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * Trailing footer panel below the grid (icon + one paragraph) -
   * /mea-operations' "How It Works" is the only instance in the file.
   * Same translucent-panel weight as a card, not a card itself.
   * --------------------------------------------------------------- */
}
.mea-card-grid__footer {
  display: flex;
  align-items: center;
  /* An EXTRA offset above the footer, on top of __body's own
     `--mea-card-grid-footer-gap`. Welded at 24 until 2026-09-06, which
     is right for the three instances that shipped with it and wrong for
     R6's /mea-operations How It Works (2545:2046): that section draws a
     uniform 40 between header, grid and footer - its own `gap-[40px]` -
     so the welded 24 put the footer at 64. The fallback keeps 24, so
     those three are byte-identical. */
  margin-top: var(--mea-card-grid-footer-margin-top, 24px);
  border-radius: 12px;
}
.mea-card-grid {
  /* Operations' own "How It Works": a filled translucent panel, no border.
     The two custom properties fall back to operations' own numbers, so that
     instance and /products' are unchanged; /information-security's
     2610:4453 is the same fill at px-24 and a 36px gap. */
}
.mea-card-grid__footer--fill {
  gap: var(--mea-card-grid-footer-content-gap, 24px);
  padding: 32px var(--mea-card-grid-footer-pad-inline, 40px);
  background: color-mix(in srgb, var(--mea-on-dark) 8%, transparent);
}
.mea-card-grid {
  /* The homepage's "Private Learning Architecture" (light ground): a
     transparent box with a lime outline instead - Figma draws no fill at
     all here, unlike operations' dark panel. Padding/gap are this
     instance's own measured values (24 left/right, 36 gap), not fill's. */
}
.mea-card-grid__footer--outline {
  gap: var(--mea-card-grid-footer-content-gap, 36px);
  padding: 32px var(--mea-card-grid-footer-pad-inline, 24px);
  background: transparent;
  border: 1px solid var(--mea-accent);
}
.mea-card-grid__footer-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--mea-accent);
  border-radius: 100px;
}
.mea-card-grid__footer-icon img {
  display: block;
  /* 20 is what the three shipped footers draw. R6 sizes the check
     inside /information-security's ring at 28 (2610:4455), so the
     glyph is per instance rather than welded. */
  width: var(--mea-card-grid-footer-icon-glyph, 20px);
  height: var(--mea-card-grid-footer-icon-glyph, 20px);
  object-fit: contain;
}
.mea-card-grid__footer-text {
  margin: 0;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-p1-size);
  line-height: var(--mea-type-p1-lh);
  white-space: pre-line;
}
.mea-card-grid {
  /* footerTextColor (--mea-card-grid-footer-text-color) was only wired for
     the --none chrome below until 2026-09-02 - these two hardcoded the
     same tone with no override hook, which is why /mea-operations' own
     --fill instance couldn't dial its text back from full opacity. */
}
.mea-card-grid__footer--fill .mea-card-grid__footer-text {
  color: var(--mea-card-grid-footer-text-color, var(--mea-on-dark));
}
.mea-card-grid__footer--outline .mea-card-grid__footer-text {
  color: var(--mea-card-grid-footer-text-color, var(--mea-ink));
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * Panel hairline. 2008:7989 is the one instance drawn as a bordered
   * band, on both edges, in the shared dark rule colour.
   * --------------------------------------------------------------- */
  /* Drawn as an inset shadow, not a border: these are full-bleed sections
     that stack directly on each other, and a 1px border would add its own
     height to the section - measured as 720.7px against the 719px Figma
     frame on 2008:7989. Figma's stroke is centred on the frame edge and
     costs no layout, so an inset shadow is the faithful equivalent. */
  /* A leading hairline only. R6's /mea-operations How It Works (2545:2046)
     declares `border-t border-[#e6e6e2]` and nothing on its other edges;
     `ruleColor` carries that light ink, since this section is dark and the
     --mea-rule-dark fallback the two rules below use is #2e2e2b. An inset
     shadow, not a border, for the reason AGENTS.md records: a 1px border on
     a full-bleed section adds its own height. */
}
.mea-card-grid--rule-top {
  box-shadow: inset 0 1px 0 var(--mea-card-grid-rule, var(--mea-rule-dark));
}
.mea-card-grid--rule-bottom {
  box-shadow: inset 0 -1px 0 var(--mea-card-grid-rule, var(--mea-rule-dark));
}
.mea-card-grid--rule-both {
  box-shadow: inset 0 1px 0 var(--mea-card-grid-rule, var(--mea-rule-dark)), inset 0 -1px 0 var(--mea-card-grid-rule, var(--mea-rule-dark));
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * Lead-in line above the grid. Figma "H3" (2008:7994).
   * --------------------------------------------------------------- */
}
.mea-card-grid__lead-in {
  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);
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * Column labels: the "Other solutions" / "mea" header pair above the
   * Competitive Moat's 2-column versus comparison (/products). Shares the
   * grid's own column tracks so each label sits over its column.
   * --------------------------------------------------------------- */
}
.mea-card-grid__column-labels {
  display: grid;
  grid-template-columns: repeat(var(--mea-card-grid-cols, 2), minmax(0, 1fr));
  gap: var(--mea-card-grid-gap, 24px);
}
.mea-card-grid__column-label {
  margin: 0;
  padding: 0;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-semibold);
  font-size: var(--mea-type-h3-size);
  color: var(--mea-on-dark);
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * Grid
   * --------------------------------------------------------------- */
}
.mea-card-grid__grid {
  display: grid;
  grid-template-columns: repeat(var(--mea-card-grid-cols, 2), minmax(0, 1fr));
  column-gap: var(--mea-card-grid-gap, 24px);
  row-gap: var(--mea-card-grid-row-gap, var(--mea-card-grid-gap, 24px));
  /* gridMaxWidth / gridOffsetStart. The grid's own measure and leading
     inset, for a design that draws the card row narrower than - and
     offset from - the header above it. R6's Traceability list
     (2736:8539) is the one instance: header at the section's 120px
     gutter, cards 736 wide from x=175, measured off the node's PNG at
     the cards' own lime borders (x 175..911 on all four rows). Both
     unset by default, so every other grid still fills the container. */
  max-width: var(--mea-card-grid-grid-maxw, none);
  margin-inline-start: var(--mea-card-grid-grid-offset, 0);
}
.mea-card-grid {
  /* `equalRows` - every row as tall as the tallest card in the grid, not just
     the tallest in its own row.

     `1fr` on the IMPLICIT rows, because this grid declares columns only:
     every row it lays out is an implicit one, so grid-auto-rows reaches all
     of them and grid-template-rows would reach none. A `fr` row track in
     grid resolves against the largest content across the tracks it sizes,
     which is the whole point - it equalises at every width with no number to
     maintain, unlike `cardMinHeight`, whose single px value can only be
     right at one viewport (the cards on /mea-ingestion's company-type grid
     measure 231 at 768, 207 at 1024 and 183 at 1440).

     Opt-in per instance. See the render.php note beside `$equal_rows` for the
     measurement that settled that: unequal rows are the norm here, not the
     bug, and several instances draw a ragged bottom edge on purpose. */
}
.mea-card-grid--equal-rows .mea-card-grid__grid {
  grid-auto-rows: 1fr;
}
.mea-card-grid {
  /* layout:"row" - one column of full-width rows, each split horizontally
     rather than stacked. See the render.php comment for the Figma source. */
}
.mea-card-grid--layout-row .mea-card-grid__grid {
  grid-template-columns: minmax(0, 1fr);
}
.mea-card-grid--layout-row .mea-card-grid__content {
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
}
.mea-card-grid--layout-row .mea-card-grid__title {
  flex: 0 0 420px;
}
.mea-card-grid--layout-row .mea-card-grid__desc {
  flex: 1 1 auto;
  max-width: 684px;
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * leading:"glow-dot" - the blurred lime dot in the section gutter and
   * the dashed rail that joins consecutive dots. R6's Traceability list
   * (2736:8539) is the only instance; both marks are absolutely
   * positioned against the card, so they add no width to the row and no
   * item to its flex flow.
   *
   * Every number below is measured off that node's own 1440 PNG rather
   * than read off the layer tree, per Lia's rule:
   *
   *   dot     20.805px (Figma's own size), centres at x 130 with the
   *           cards' left border at 175 - so 55.19px left of the card
   *           box, which puts the dot's left edge exactly on the
   *           section's 120px gutter. Vertical: dots at y 376 / 511 /
   *           650 / 782 against card tops 350 / 488 / 626 / 759, i.e.
   *           +26 / +23 / +24 / +23. Hand-placed, so one uniform 24 is
   *           within 2px on all four.
   *   blur    Figma declares a 5px LAYER_BLUR. Halved to 2.5px, the same
   *           conversion mea/case-studies and mea/check-list already
   *           apply to the shared Background dot (826:853) - see
   *           AGENTS.md.
   *   rail    #fafafa at 1.01889px on a 2.04/2.04 dash, read from the
   *           connector's own exported SVG (Line 2), not sampled. Its
   *           three segments run y 413..495 / 549..635 / 688..767; a
   *           top of 63 and a bottom of -20 on each card reproduces
   *           them within 2px without needing the next card's height.
   * --------------------------------------------------------------- */
}
.mea-card-grid__glow-dot {
  position: absolute;
  top: var(--mea-card-grid-dot-top, 24px);
  left: calc(-1 * var(--mea-card-grid-dot-offset, 55.19px));
  width: var(--mea-card-grid-dot-size, 20.805px);
  height: var(--mea-card-grid-dot-size, 20.805px);
  border-radius: 100px;
  background-color: var(--mea-accent);
  filter: blur(2.5px);
}
.mea-card-grid__glow-rail {
  position: absolute;
  /* Centred on the dot: half the dot's width right of its left edge,
     less half the rail's own width. */
  top: 63px;
  bottom: -20px;
  left: calc(var(--mea-card-grid-dot-size, 20.805px) / 2 - var(--mea-card-grid-dot-offset, 55.19px) - 0.51px);
  width: 1.01889px;
  background-image: repeating-linear-gradient(to bottom, var(--mea-surface) 0, var(--mea-surface) 2.04px, transparent 2.04px, transparent 4.08px);
}
.mea-card-grid {
  /* iconPosition:"above" - badge image stacked above a centred label,
     narrow single column (Certifications). */
  /* R6 declares `justify-between` on four of this row's five cards
     (2597:1383, 2597:1387, 2749:8577 - the fifth, 2749:8592, uses a
     47px gap to the same effect) inside a fixed 308px card, which puts
     every label at y 224 while each badge stays top-aligned at its own
     32/46/41/45/43 inset. Reading the gap alone instead put the four
     shorter badges' labels 36/22/39/37px high. The badges keep their own
     R6 top inset only where it equals the card padding; the residual is
     hand-placed slack, recorded in the pass notes. */
}
.mea-card-grid--icon-above .mea-card-grid__card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.mea-card-grid {
  /* The label sits on the card's BOTTOM inset, not under the badge.
     `justify-content: space-between` on the card cannot reach it: __content
     is `flex: 1 0 0`, so it absorbs the card's free space and there is
     nothing left to distribute - measured, the four shorter badges' labels
     stayed 36/22/39/37px high with that rule in place. Pushing __content's
     own children to its end does it, and 308 - 32 - 52 puts every label at
     y 224, which is where R6 draws all five. */
}
.mea-card-grid--icon-above .mea-card-grid__content {
  align-items: center;
  justify-content: flex-end;
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * Tile. Translucent fill plus the hairline edge Figma draws with its
   * GLASS effect; 16px radius and the 32px inset are one-off geometry
   * measured on 2008:8249.
   * --------------------------------------------------------------- */
}
.mea-card-grid__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  /* 111px everywhere Figma draws it. An instance whose own title wraps to
     two lines on one card only (the team page's fourth tile - a font-metric
     overflow, not a design difference, see AGENTS.md) sets
     --mea-card-grid-card-minh explicitly so every card in that instance
     matches its tallest one; unset, this is a no-op. */
  min-height: var(--mea-card-grid-card-minh, 111px);
  padding-block: var(--mea-card-grid-card-pad-block, 32px);
  padding-inline: var(--mea-card-grid-card-pad-inline, 32px);
  /* Figma draws this edge with its GLASS effect rather than a stroke, and
     the effect is lit from the top left: sampling 2008:8249 against the
     colour under each edge resolves to white at 0.26 alpha on the top and
     left and 0.21 on the bottom and right. A single flat value matched
     the lit edges and ran 15/255 too bright on the shaded ones, so the
     two steps are set per side. Alpha is varied off the token rather
     than written as an rgba literal.
     The effect's other half - a refraction bevel that dims the fill near
     the lit edges and lifts it near the shaded ones - is the same ramp
     mea/cta-band's own glass card (2139:3387) and mea/check-list's
     badge-panel now both carry, reused verbatim here too (2026-08-31,
     Lia) rather than left flatter than those two: four background-layer
     ramps rather than a blurred inset shadow, since a blurred shadow
     peaks AT the edge and composites under this hairline border instead
     of beneath the fill.
     Both halves now READ FROM THE TOKEN LAYER (--mea-glass-bevel and
     --mea-glass-hairline-inset in _shared/tokens.css) rather than being
     written out here, because three rules in this one file needed them
     and two more chromes need them as of 2026-09-08. The values are
     unchanged; only their home moved. */
  border: 1px solid;
  border-color: color-mix(in srgb, var(--mea-on-dark) 26%, transparent) color-mix(in srgb, var(--mea-on-dark) 21%, transparent) color-mix(in srgb, var(--mea-on-dark) 21%, transparent) color-mix(in srgb, var(--mea-on-dark) 26%, transparent);
  border-radius: var(--mea-card-grid-card-radius, 16px);
  /* The base fill was welded to --mea-glass until 2026-09-02 - now
     overridable with cardFill (--mea-card-grid-card-fill), same
     attribute --chrome-outline's own card fill already uses, just a
     second consumer. The four gridline/bevel layers above it are the
     GLASS effect's texture, not colour, and are unaffected either way. */
  background: var(--mea-glass-bevel), var(--mea-card-grid-card-fill, var(--mea-glass));
}
.mea-card-grid {
  /* ----------------------------------------------------------------- *
   * cardHairline: inset - the glass edge as an inset shadow, so it costs
   * no height.
   *
   * The border above is 1px on four sides of a card whose height comes
   * from its copy, so it adds 2px per card - the trap AGENTS.md records
   * ("A transparent 1px border is not free height ... Figma draws these
   * strokes INSIDE the box"). Measured on /mea-full-stack's "How It
   * Works" (2545:2677): R6's Layer Card 3 is 40 + 89 + 24 + 72 + 40 =
   * 265 exactly, and its hairline sits ON the 584x265 boundary - a
   * column sample of the node render reads rgb(75,94,90) at x=120
   * against the ground's rgb(7,25,23), with the card's own fill
   * starting at x=121. The bordered card rendered 267.19, +2 per card
   * and +4.38 on the section.
   *
   * It is opt-in rather than the shared default because switching every
   * glass instance would shorten each of their cards by 2px, which
   * includes signed-off pages. The four alphas are the same two steps
   * the border carries, in the same order (top/left lit at 26%,
   * bottom/right shaded at 21%), so the edge paints identically; only
   * its box model changes. Each background ramp above already holds its
   * own first 1px transparent, so the hairline still composites over
   * undimmed glass.
   * ----------------------------------------------------------------- */
}
.mea-card-grid--chrome-glass.mea-card-grid--hairline-inset .mea-card-grid__card {
  border-width: 0;
  box-shadow: var(--mea-glass-hairline-inset);
}
.mea-card-grid {
  /* ----------------------------------------------------------------- *
   * cardBevel: corrected - the GLASS bevel refitted for this chrome.
   * Measured 2026-09-09 against R6 `2545:3952` (/careers' Culture
   * Section), rendered at 1440 logged out and sampled clear of the 16px
   * corner arcs. Two independent things were wrong, both only on THIS
   * chrome:
   *
   * 1. The ramps were anchored to the wrong box. `--mea-glass-bevel`
   *    holds each ramp's first 1px transparent so the hairline paints
   *    over undimmed glass, which is correct for mea/cta-band, where
   *    the hairline is an inset shadow and the padding box IS the
   *    border box. Here the hairline is a real 1px `border` OUTSIDE
   *    the padding box, so `background-origin`'s default pushed every
   *    ramp 1px inward and left the pixel touching the hairline at the
   *    full undimmed fill. R6 draws its DARKEST pixel there. Measured
   *    at that pixel: R6 (13,31,28) left and (26,44,41) right against
   *    a rendered (20,39,36) and (19,39,36), i.e. 7-8/255 out and in
   *    opposite directions on opposite edges, as a hard step against a
   *    bright hairline. `background-origin: border-box` puts the
   *    transparent 1px back under the border, which is where it was
   *    always meant to sit.
   *
   *    It is a longhand deliberately: __card's own `background`
   *    SHORTHAND resets background-origin to `padding-box`, so this
   *    must not be re-declared as a shorthand here or it resets
   *    itself. Cost one measurement pass to find.
   *
   * 2. The dim was modelled as a dark overlay, which is ground-dependent
   *    where R6's glass is not, so it overshot further the brighter this
   *    block's `panelGlow` wash got underneath it. That is what
   *    --mea-glass-bevel-fitted / --mea-glass-fitted-base exist for -
   *    see their note in tokens.css for the measured profile and the
   *    one compromise (the corner). The FILL comes from that pair too,
   *    so `cardFill` still overrides the base but a card that sets it
   *    will not get the fitted field alpha; no instance does today.
   *
   * Fitting this on ONE card was the mistake worth recording. An earlier
   * pass tuned a dark overlay against card 01 alone, scored it there,
   * and shipped a section whose card 07 was three times worse. The wash
   * varies down the panel, so a ground-dependent effect has to be
   * checked at BOTH ends of it. Mean abs error over the 26px band inside
   * each of the four edges, channel-averaged, per card:
   *
   *     card    01    02    03    04    05    06    07   mean
   *     before 1.67  1.70  2.37  2.38  3.14  3.14  4.56  2.71
   *     after  1.23  1.22  0.77  0.81  0.90  0.87  1.02  0.97
   *
   * The point is not just the mean. It is that `after` is FLAT across the
   * panel where `before` degraded 1.67 -> 4.56 down it, which is the
   * signature of the effect no longer depending on its ground.
   *
   * Of the 0.97 residual, 0.14 is the hairline pixel and 0.83 the fill.
   * Solving R6's hairline against this corrected fill implies roughly
   * 29 / 28 / 19 / 22% against the declared 26 / 26 / 21 / 21 - but the
   * implied value DRIFTS with the wash (top reads 28.0% on card 01 and
   * 31.6% on card 07), which a pure white stroke at a fixed alpha would
   * not. Something is unmodelled there, so the shared
   * --mea-glass-hairline-inset alphas are deliberately left alone;
   * changing them on a single node's sample would be guessing. An
   * earlier attempt to set the sampled values scored WORSE.
   *
   * Opt-in rather than the shared default for the same reason
   * `cardHairline: inset` is. `glass` + the `border` hairline is the only
   * combination that pairs the bevel with a real border - `bare` and
   * `flat` both set `border: 0`, `outline` does not draw the bevel, and
   * mea/cta-band and mea/check-list draw their hairlines as an inset
   * shadow and an overlay - and after this change exactly two of those
   * instances are left, on /team-and-advisory-board and /working-with-mea,
   * the first of which is signed off. Checked in the RENDER, not the page
   * files: /home's card-grid reads `chrome-outline` there and is not a
   * glass instance at all, whatever tools/pages/home.html says. The
   * default is untouched and both remaining instances render
   * byte-identically.
   * ----------------------------------------------------------------- */
  /* `cardFill` is deliberately NOT read here, and that is the one way this
     chrome value differs from the default. The two numbers are not the same
     kind of thing: `cardFill` sets the card's FIELD alpha (the flat middle),
     while --mea-glass-fitted-base is the floor the four ramps build up FROM,
     which is far lower. Feeding one into the other double-counts. Measured
     on /mea-full-stack, the only instance that sets it (`#ffffff08`, 3.1%):
     its lit edge landed at 5.25% where the shared profile puts it at 2.5%,
     because the ramps stacked on 3.1% instead of 0.31% and every edge came
     out lighter than the field is supposed to be. So this value carries the
     whole glass, field included, and an instance that sets `cardFill` gets
     the shared field instead of its own. */
  /* Also on `bare`, which draws the same bevel over the same kind of fill
     and differs only in having no border at all - so the `background-origin`
     below is a no-op there and the value is otherwise identical. `flat` and
     the case-study chrome are deliberately NOT included: they set their own
     fills for measured reasons and nothing has asked for them yet. */
}
.mea-card-grid--chrome-glass.mea-card-grid--bevel-corrected .mea-card-grid__card, .mea-card-grid--chrome-bare.mea-card-grid--bevel-corrected .mea-card-grid__card {
  background: var(--mea-glass-bevel-fitted), var(--mea-glass-fitted-base);
  /* AFTER the shorthand, which resets background-origin to its
     `padding-box` initial. Declared first, it silently does nothing. */
  background-origin: border-box;
}
.mea-card-grid--chrome-bare .mea-card-grid__card {
  border: 0;
  /* --mea-card-grid-card-fill-a (cardFillAlpha) reaches this chrome too
     as of 2026-09-06: R6's /products Competitive Moat rows (2610:3078 /
     3089 / 3100) are `bg-[rgba(255,255,255,0.03)]` where --mea-glass is
     white at 5%. The fallback IS --mea-glass's own 5%, so the one
     instance that predates this (/mea-underwriting's How It Works, which
     sets no alpha) renders byte-identically.
     The bevel layers paint OVER that fill and carry no colour of their
     own beyond the sampled ramp, so each instance keeps its own measured
     alpha. */
  background: var(--mea-glass-bevel), var(--mea-card-grid-card-fill, color-mix(in srgb, var(--mea-on-dark) var(--mea-card-grid-card-fill-a, 5%), transparent));
  box-shadow: var(--mea-glass-hairline-inset);
}
.mea-card-grid__outcome {
  margin: 0;
  padding: 0;
  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-card-grid {
  /* The rail runs into the gap below the card, so nothing on this
     treatment may clip its own overflow. Placed after the base card rule
     so the cascade reads in specificity order. */
}
.mea-card-grid--leading-glow-dot .mea-card-grid__card {
  overflow: visible;
}
.mea-card-grid {
  /* Two rows of copy instead of one: the icon family on 2008:8532 tightens
     the vertical inset to 24px and tops the leading slot to the title. */
}
.mea-card-grid__card--stacked {
  align-items: flex-start;
  /* Was a flat 125px, silently ignoring cardMinHeight for any card with
     a description (every leadingStack instance has one) - bpo-solutions'
     "Workflow Coverage" needs the override to unify its 9 cards' height. */
  min-height: var(--mea-card-grid-card-minh, 125px);
  padding-block: var(--mea-card-grid-card-pad-block, 24px);
  padding-inline: var(--mea-card-grid-card-pad-inline, 32px);
}
.mea-card-grid {
  /* /mea-ingestion's "How It Works" (2545:1825) draws the leading number
     ABOVE its title, not beside it - the whole card is a column (number,
     then title+desc), not the shared row layout leading:"number" draws on
     every other instance (/products, /team-and-advisory-board, /careers).
     Opt-in via leadingStack so those three are untouched. __content's own
     12px title-to-desc gap also widens to 24px here, matching this card's
     own uniform rhythm (2545:1826's own group gap and the card root's own
     gap are both 24, not 12). */
}
.mea-card-grid--leading-stack .mea-card-grid__card {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mea-card-grid-leading-gap, 24px);
}
.mea-card-grid {
  /* ----------------------------------------------------------------- *
   * `leadingInline` - the mark shares a ROW with the title and the body
   * runs the full card width beneath both. R6's /mea-ingestion company
   * card (2545:1914) is the first instance: its 2545:1915 is a
   * `flex gap-[16px] items-center` row holding the icon and "Carriers",
   * and its body 2545:1919 is the card's own 508px measure, not the 447
   * left over beside a 35.8px mark.
   *
   * Done as a grid over the EXISTING markup rather than a new wrapper, so
   * render.php emits identical HTML for every instance and only this
   * modifier's own rules change anything. `display: contents` on __content
   * promotes the title and the body to grid items of the card itself,
   * which is what lets the title sit beside the mark while the body spans
   * both columns. `align-items: center` is R6's own `items-center` on that
   * row; on the body's own row it is a no-op, since the row is exactly the
   * body's height.
   * ----------------------------------------------------------------- */
}
.mea-card-grid--leading-inline .mea-card-grid__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--mea-card-grid-leading-gap, 16px);
  row-gap: var(--mea-card-grid-content-gap, 16px);
}
.mea-card-grid--leading-inline .mea-card-grid__content {
  display: contents;
}
.mea-card-grid--leading-inline .mea-card-grid__icon, .mea-card-grid--leading-inline .mea-card-grid__badge-icon, .mea-card-grid--leading-inline .mea-card-grid__number, .mea-card-grid--leading-inline .mea-card-grid__badge-number {
  grid-column: 1;
  grid-row: 1;
}
.mea-card-grid--leading-inline .mea-card-grid__title {
  grid-column: 2;
  grid-row: 1;
}
.mea-card-grid {
  /* Everything below the title spans the full card, which is the whole
     point of the shape. Listed rather than a `> *` catch-all so a future
     child that genuinely belongs beside the mark can opt out. */
}
.mea-card-grid--leading-inline .mea-card-grid__card-eyebrow, .mea-card-grid--leading-inline .mea-card-grid__desc, .mea-card-grid--leading-inline .mea-card-grid__outcome, .mea-card-grid--leading-inline .mea-card-grid__badge, .mea-card-grid--leading-inline .mea-card-grid__cta {
  grid-column: 1/-1;
}
.mea-card-grid {
  /* The title-to-description gap follows the icon-to-title one unless an
     instance separates them - R6 draws 16/10 on the work-away cards and
     24/12 on the homepage's numbered ones, while /mea-ingestion (24/24) and
     bpo-solutions (16/16) really are one value. See render.php's contentGap. */
}
.mea-card-grid--leading-stack .mea-card-grid__content {
  gap: var(--mea-card-grid-content-gap, var(--mea-card-grid-leading-gap, 24px));
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * outline chrome: on a DARK panel (Products' "Insurance-native AI", the
   * 4 "Work Away" pages, Information Security) the tile is a bare lime
   * stroke with no fill, so the dark ground shows through - unchanged
   * below. On a "none" (light) panel the family draws a white card with a
   * soft drop shadow instead - bpo-solutions' "Workflow Coverage"
   * (2545:2537) was the first instance re-verified against this, at
   * 1.5px/white/shadowed rather than the plain 1px stroke every
   * panel:none instance previously welded (Working with mea, mea
   * Ingestion, mea Operations, Products' "Pre-trained for insurance" -
   * 2026-09-02, Lia: make it the shared panel:none default, not a
   * per-instance opt-in). Dark-panel instances are untouched since none
   * has been re-verified against this treatment.
   * --------------------------------------------------------------- */
  /* --------------------------------------------------------------- *
   * flat chrome: a plain white-alpha fill on the raised dark panel, under
   * the GLASS edge. R6's three case-study singles draw all three of their
   * card grids this way (3012:10530 challenge, 3012:10544 executes,
   * 3012:10565 result, and the 13b/13c siblings), and R6 drew no GLASS
   * texture and no directional edge alphas on them - this chrome carried a
   * uniform 1px white-alpha ring instead, at --mea-card-grid-card-border-a.
   *
   * LIA'S 2026-09-08 REVIEW OVERRIDES THAT, on four of those grids:
   * "missing glass effect on cards" (AXIS challenge), "missing glass effect
   * on cards, and update section background color ..." (AXIS result),
   * "missing glass effect on all cards" (Crux challenge) and the same on
   * Crux executes. Applied to the CHROME rather than to those four
   * instances, because the three case-study grids are one construction
   * measured identical on all three R6 frames - fixing four and leaving the
   * rest of the family uniform-ringed would invent a difference the design
   * does not have. Moonrock follows through the same rule, which is Lia's
   * own standing note: "all the design changes made on case-studies/crux/
   * should do same for case-studies/moonrock-insurance/".
   *
   * CONSEQUENCE, named rather than hidden: the uniform ring is gone, so
   * `cardBorderAlpha` no longer reaches this chrome. It still reaches
   * `outline` and `--border-inset`. The now-inert declarations were removed
   * from the three case-study records in the same commit rather than left
   * sitting there reading as live.
   *
   * The edge is an INSET SHADOW, not a border, for the reason AGENTS.md
   * records for every hairline in this file - these cards' heights are
   * content-driven, so a 1px border would add 2px to each and push every
   * grid past its frame. Both the old ring and the new glass hairline are
   * inset, so this change costs zero height.
   * --------------------------------------------------------------- */
  /* An opaque card fill from the token layer, for Crux's partner cards. Wins
     over the flat chrome's white-alpha wash below because it is a second
     class on the same element and prints later. */
}
.mea-card-grid--fill-raised .mea-card-grid__card {
  background: var(--mea-panel-raised);
}
.mea-card-grid--chrome-flat .mea-card-grid__card {
  /* The GLASS edge lives on the base `&__card` rule, not on a
     `--chrome-glass` scope, so this chrome inherits a real 1px border
     unless it says otherwise - and a border on a content-driven card adds
     2px to every one of them. Measured before this line: each challenge
     card 141.19 against R6's 139, putting the whole section +4.38. */
  border: 0;
  border-radius: var(--mea-card-grid-card-radius, 12px);
  background: var(--mea-glass-bevel), color-mix(in srgb, var(--mea-on-dark) var(--mea-card-grid-card-fill-a, 2%), transparent);
  box-shadow: var(--mea-glass-hairline-inset);
}
.mea-card-grid--chrome-outline .mea-card-grid__card {
  border-width: var(--mea-card-grid-card-border-w, 1px);
  border-style: solid;
  /* The stop is a percentage of --mea-accent, defaulting to the whole
     token, so an instance that sets nothing is unchanged. The color-mix
     itself has to live here, not inline: safecss_filter_attr strips a
     color-mix() out of a style attribute without warning. */
  border-color: color-mix(in srgb, var(--mea-accent) var(--mea-card-grid-card-border-a, 100%), transparent);
  /* 12px is bpo-solutions' own value (2003:6362); the "Where mea Takes
     Work Away" cluster draws 8-16px across its 4 instances, so
     cardRadius overrides this per instance - see render.php. */
  border-radius: var(--mea-card-grid-card-radius, 12px);
  /* Dark-panel default: transparent unless an instance paints its own
     fill (none currently does). Overridden below for panel:none. */
  background: var(--mea-card-grid-card-fill, transparent);
}
.mea-card-grid--chrome-outline.mea-card-grid--panel-none .mea-card-grid__card {
  border-width: var(--mea-card-grid-card-border-w, 1.5px);
  background: var(--mea-card-grid-card-fill, #ffffff);
  /* bpo-solutions' own drop shadow (2545:2543). The homepage's Private
     Learning card draws half of it - see --shadow-soft below. */
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}
.mea-card-grid {
  /* 2637:1363: drop-shadow(0 2px 5px rgba(0,0,0,0.05)), half the offset and
     half the alpha of bpo's. Carried by the `numbered-feature` preset rather
     than replacing the shared value, because both are measured. */
}
.mea-card-grid--chrome-outline.mea-card-grid--shadow-soft .mea-card-grid__card {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * cardBorderInset - the same stroke, painted INSIDE the box.
   *
   * Figma draws a card stroke inside the frame, so a real `border`
   * reproduces the line but not the box: it adds its width to the card's
   * height AND takes it off the content width. Measured on bpo-solutions'
   * "Workflow Coverage" (2545:2537) with a 1.5px border: every grid row
   * came out 2px over R6's own tallest card (302/303/299 against
   * 300/301/297, +6 on the section) and each card's content box was 318
   * against R6's 320. This is the same trap AGENTS.md records for a
   * full-bleed section's hairline and for mea/check-list's GLASS edge, in
   * a third place.
   *
   * Opt-in, because switching it on moves every other outline instance by
   * the same 2px and each of those pages is measured as it stands. The
   * ring is prepended to whichever drop shadow the chrome already carries
   * rather than replacing it - box-shadow is one property, so the two
   * cannot be written in separate rules.
   * --------------------------------------------------------------- */
}
.mea-card-grid--border-inset .mea-card-grid__card {
  border-width: 0;
  box-shadow: inset 0 0 0 var(--mea-card-grid-card-border-w, 1px) color-mix(in srgb, var(--mea-accent) var(--mea-card-grid-card-border-a, 100%), transparent);
}
.mea-card-grid {
  /* Repeated at this specificity on purpose: the panel-none outline rule
     above is (0,3,0) and sets its own border-width, so the (0,2,0) reset
     alone loses to it. */
}
.mea-card-grid--border-inset.mea-card-grid--panel-none .mea-card-grid__card {
  border-width: 0;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1), inset 0 0 0 var(--mea-card-grid-card-border-w, 1.5px) color-mix(in srgb, var(--mea-accent) var(--mea-card-grid-card-border-a, 100%), transparent);
}
.mea-card-grid--border-inset.mea-card-grid--shadow-soft .mea-card-grid__card {
  border-width: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), inset 0 0 0 var(--mea-card-grid-card-border-w, 1.5px) color-mix(in srgb, var(--mea-accent) var(--mea-card-grid-card-border-a, 100%), transparent);
}
.mea-card-grid {
  /* __desc's 70%-on-dark colour is illegible on this chrome's light ground -
     it was never wrong before because nothing had paired panel:none with a
     genuinely light section until this instance. Scoped to panel:none only -
     /for-carriers' "Where mea Takes Work Away" pairs this same outline chrome
     with panel:dark, and unscoped this rule forced the same dark ink onto a
     dark ground, rendering the description nearly illegible against Figma's
     bright ~70%-on-dark text (2005:6634). */
}
.mea-card-grid--chrome-outline.mea-card-grid--panel-none .mea-card-grid__desc {
  /* #1a1a1a on the PLA instances, #2e2e2b on /mea-operations - genuinely
     per instance, so the token is only the fallback. */
  color: var(--mea-card-grid-desc-color, var(--mea-ink-2));
}
.mea-card-grid__content {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  /* 12px is the shipped value and the fallback, so an instance that sets
     no contentGap is unchanged. It used to be reachable only under
     --leading-stack (whose own rule below still wins and keeps its
     leadingGap fallback chain); R6's case-study challenge and result
     cards are the first instances with NO leading mark that still need
     their own inner gap - 12 on 3012:10530, 16 on 3012:10565. */
  gap: var(--mea-card-grid-content-gap, 12px);
  min-width: 0;
}
.mea-card-grid__title {
  margin: 0;
  padding: 0;
  /* Inherited unless an instance sets it: #1a1a1a on the PLA instances,
     #121316 on /mea-operations. */
  color: var(--mea-card-grid-title-color, inherit);
  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-card-grid {
  /* One step down, for instances R6 draws at H4 - /for-carriers' "Where mea
     takes work away" is the first. Node 2545:2857 stores "Underwriting" 127
     wide in a 26px box; 20px semibold measures 126.5 against it and 24px
     measures 151.8, so it is the step that moves, not the weight. */
}
.mea-card-grid--title-h4 .mea-card-grid__title {
  font-size: var(--mea-type-h4-size);
  line-height: var(--mea-type-h4-lh);
}
.mea-card-grid {
  /* An off-token size, for the two R6 case-study card shapes whose title is
     neither h3 nor h4: 18 on the numbered executes cards (3012:10545) and 22
     on Crux's partner cards (3012:10687). Both draw `leading-[normal]` where
     both named steps are pinned at 1.3, so the line box travels with the
     size - see render.php's note on cardTitleSize. */
}
.mea-card-grid--title-sized .mea-card-grid__title {
  font-size: var(--mea-card-grid-title-size, var(--mea-type-h3-size));
  /* `normal` unless the instance declares a ratio - see render.php's
     cardTitleLineHeight. R6's deployment rows draw 22px at an explicit
     1.3, which `normal` renders 1.1px short per title. */
  line-height: var(--mea-card-grid-title-lh, normal);
}
.mea-card-grid {
  /* Named ink steps, so a page record carries no colour literal. R6 paints
     the result cards' titles --mea-accent (3012:10567) where the challenge
     and executes cards keep the inherited white. */
}
.mea-card-grid--title-tone-accent .mea-card-grid__title {
  color: var(--mea-accent);
}
.mea-card-grid {
  /* Three description inks across the case-study card shapes, all resolving
     through tokens: --mea-on-dark-soft at 90% (challenge, 3012:10532), the
     same at 70% (executes, 3012:10546) and opaque white (result, 3012:10568).
     The block's own default is white at 70%, which none of the three is. */
}
.mea-card-grid--desc-tone-soft-90 .mea-card-grid__desc {
  color: color-mix(in srgb, var(--mea-on-dark-soft) 90%, transparent);
}
.mea-card-grid--desc-tone-soft-70 .mea-card-grid__desc {
  color: color-mix(in srgb, var(--mea-on-dark-soft) 70%, transparent);
}
.mea-card-grid--desc-tone-white .mea-card-grid__desc {
  color: var(--mea-on-dark);
}
.mea-card-grid {
  /* A fourth: --mea-on-dark-copy, rgba(255,255,255,0.8). R6's /products
     Competitive Moat header cards paint their body exactly that
     (2555:8001 / 2555:8037 / 2555:8042) against this block's own 70%. */
}
.mea-card-grid--desc-tone-copy .mea-card-grid__desc {
  color: var(--mea-on-dark-copy);
}
.mea-card-grid__desc {
  margin: 0;
  padding: 0;
  /* Per-card copy measure, `none` unless the card sets descMaxWidth -
     see that field's own note in render.php. No cap is needed: a
     max-width on this child cannot widen the card, and render.php
     clamps the value to 1200 anyway. Dropped below the desktop
     breakpoint (further down), where the card is narrower than the
     measure regardless. */
  max-width: var(--mea-card-grid-desc-maxw, none);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  /* The card body's type step. Unset both fall back to the named "P2",
     16/1.5, which is what every instance before /products' Competitive
     Moat rows draws - see cardDescSize in render.php. */
  font-size: var(--mea-card-grid-desc-size, var(--mea-type-p2-size));
  line-height: var(--mea-card-grid-desc-lh, var(--mea-type-p2-lh));
  /* 70% was welded here until 2026-09-02 - now the fallback an instance
     can dial with cardDescColor (--mea-card-grid-desc-color), same
     opt-in shape as __title's own color below. Unset, every existing
     dark-panel instance renders byte-identical. */
  color: var(--mea-card-grid-desc-color, color-mix(in srgb, var(--mea-on-dark) 70%, transparent));
}
.mea-card-grid {
  /* Service marks in a card body are `<sup>SM</sup>`, sized by the block and
     not by the browser - the same rule and the same numbers
     `mea/section-header` already scopes to its own `__body sup`, and for the
     same two reasons: R6 draws the mark at about a third of the body's cap
     height with its top flush to the cap line (the browser default ~0.83em
     reads as a footnote marker), and the glyphs have to stay LETTERS because
     the self-hosted Inter is a latin/latin-ext subset in which U+2120 would
     fall back to a system face mid-sentence. R6's /mea-ingestion card 2
     (2545:1834) is the first card body in the file to carry one - three of
     them: "mea Ora", "language model" and "knowledge graph". `bottom`
     resolves against the sup's OWN font-size, which is why it reads 1.34em
     rather than something proportional to the body. */
}
.mea-card-grid__desc sup, .mea-card-grid__outcome sup {
  font-size: 0.35em;
  vertical-align: baseline;
  position: relative;
  bottom: 1.34em;
}
.mea-card-grid {
  /* A lime tick inside a card body. R6 draws /mea-ingestion's "Read the
     information" card (2545:1829) as an intro line followed by nine rows
     each opening with a `text-[#c5ff00]` check glyph against the body's own
     white; the glyph is the only thing that changes colour, so it is a span
     in the record's `description` rather than a list attribute.

     `font-weight: inherit` is load-bearing, not decoration: the parent theme
     colours and weights bare `span` at 300, and a class-less span here would
     render the glyph Light while the copy around it stays Regular - the
     exact leak tools/span-weight-leak-check.js exists to catch (AGENTS.md,
     S16). Note U+2713 itself is outside the latin/latin-ext subset
     src/_shared/type.css serves, so the GLYPH still comes from a system
     fallback face; this rule fixes its colour and weight, not its face. */
}
.mea-card-grid__desc .mea-card-grid__tick {
  color: var(--mea-accent);
  font-weight: inherit;
}
.mea-card-grid {
  /* The card body one step UP, for R6's /mea-operations Modules cards
     (2545:2096 and its three siblings): the named "P1" 20/1.6 against this
     block's own "P2" 16/1.5. Two classes, so it beats __desc's own
     single-class rule whichever way stylesheet source order falls - the
     same shape `--title-h4` already uses one step down on the title.
     Applies to the stacked paragraph form too, since a card that sets a
     body step wants it on every paragraph in the card. */
}
.mea-card-grid--desc-p1 .mea-card-grid__desc, .mea-card-grid--desc-p1 .mea-card-grid__desc--stack > p {
  font-size: var(--mea-type-p1-size);
  line-height: var(--mea-type-p1-lh);
}
.mea-card-grid {
  /* A multi-paragraph card body (`descriptionParagraphs`). R6's
     /working-with-mea "Growth & Operations" cards (2545:4261, 2545:4268) draw
     a Body FRAME of two paragraphs at gap 16, which the `<br><br>` idiom
     cannot reproduce - an empty line is one whole 24px line box at P2's
     16/1.5. Solved off the node's own render: card 1's four body lines ink at
     226-241, 250-265, 290-305 and 314-329, i.e. two 48px paragraphs 16px
     apart, not five 24px lines. Every other card in the file supplies a
     single string and renders the `<p>` above, untouched. */
}
.mea-card-grid__desc--stack {
  display: flex;
  flex-direction: column;
  gap: var(--mea-card-grid-desc-gap, 16px);
}
.mea-card-grid__desc--stack > p {
  margin: 0;
  padding: 0;
  /* The bare-selector 300 trap (S16), caught by
     tools/span-weight-leak-check.js on the first run of this rule:
     the theme's `p { font-weight: 300 }` beats the weight inherited
     from __desc, so all six paragraphs rendered Inter Light against
     R6's P2 Regular. Same fix, same reason as
     mea/careers-feed's __fact span. */
  font-weight: var(--mea-weight-regular);
}
.mea-card-grid {
  /* Mono uppercase badge chip - /mea-operations' "Modules" section only. */
  /* Mono label above the title - see the render.php comment on why this is
     per-card rather than the block's own nested-header slot. */
}
.mea-card-grid__card-eyebrow {
  margin: 0;
  padding: 0;
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-light);
  font-size: var(--mea-type-eyebrow-size);
  /* Every mono eyebrow in R6 tracks 1.5px, including this one
     (2545:3705 / 3712 / 3719, `tracking-[1.5px]`); this rule was the
     one that had none, which put the /insights resource eyebrows a
     glyph-step narrow against their nodes. /insights is the only
     record in tools/pages that sets a card eyebrow at all, so no
     other instance moves. */
  letter-spacing: var(--mea-type-eyebrow-ls);
  color: var(--mea-ink-eyebrow);
}
.mea-card-grid {
  /* The eyebrow's ink follows the GROUND, not the chrome. It was scoped to
     --chrome-glass because /insights (panel:dark, chrome:glass) was the only
     instance with a card eyebrow; /working-with-mea's "Growth & Operations"
     (2545:4258 and its three siblings, all #c5ff00) is outline chrome on a
     dark ground and reached --mea-ink-eyebrow instead, which is the light
     ground's token. Both selectors score (0,2,0) and both resolve to
     --mea-accent, so /insights is unchanged: measured rgb(197,255,0) on all
     three of its card eyebrows before and after. */
}
.mea-card-grid--chrome-glass .mea-card-grid__card-eyebrow, .mea-card-grid--panel-dark .mea-card-grid__card-eyebrow, .mea-card-grid--panel-raised .mea-card-grid__card-eyebrow, .mea-card-grid--panel-fade .mea-card-grid__card-eyebrow {
  color: var(--mea-accent);
}
.mea-card-grid {
  /* `cardEyebrowPill` - the eyebrow in the padded, radiused box R6 draws
     around it on /working-with-mea's "Growth & Operations" cards (2545:4258:
     `pr-16 py-8 rounded-90`, no fill of its own). The vertical padding is
     load-bearing exactly as mea/cta-band's own `eyebrow_pill` note records:
     it carries 16px of every card's height, 32px of the section's. Confirmed
     on the node's own render rather than from the declaration - card 1's
     eyebrow ink sits at y 112-131 where a bare 26px line box at the card's
     99px content top would put it at ~104-123, and the whole card then
     reconciles to R6's own 297 (32 + 42 + 24 + 31.2 + 24 + 112 + 32). Opt-in,
     so /insights' own card eyebrows are unchanged. */
}
.mea-card-grid--card-eyebrow-pill .mea-card-grid__card-eyebrow {
  padding: 8px 16px 8px 0;
  border-radius: 90px;
}
.mea-card-grid {
  /* Per-card link close - see the render.php comment on why this is a card
     field rather than the block's existing single shared footer action. */
}
.mea-card-grid__cta {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 4px;
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-medium);
  font-size: var(--mea-type-p2-size);
  color: var(--mea-accent);
  text-decoration: none;
}
.mea-card-grid {
  /* R6's outlined resource button (2545:3708 / 3715 / 3722): a 1px
     --mea-accent stroke on no fill, radius 40, 12/24 padding and a 14px
     Semi Bold label. The card lays the copy group and the pill out 32px
     apart (the card's own `gap-[32px]`), but this DOM is one flat column,
     so the gap the column already contributes is subtracted rather than
     added to - which keeps the pair correct if an instance dials
     contentGap. Opt-in via ctaStyle so the bare link above is untouched. */
}
.mea-card-grid--cta-pill .mea-card-grid__cta {
  align-items: center;
  justify-content: center;
  margin-top: calc(32px - var(--mea-card-grid-content-gap, 12px));
  padding: 12px 24px;
  border-radius: 40px;
  /* The edge is an INSET shadow, not a border, for the reason the glass
     card's own hairline records above: R6's pill frame is 164x41 = its
     116x17 text node plus 24/12 padding, with the stroke inside that
     box, so a real border would add 2px of height and 2px of width the
     design does not draw. Measured: 43x164.78 with a border, 41 with
     this. */
  box-shadow: inset 0 0 0 1px var(--mea-accent);
  font-weight: var(--mea-weight-semibold);
  font-size: 14px;
  line-height: normal;
}
.mea-card-grid {
  /* The label and the arrow are separate elements because R6 draws them at
     two weights (2545:3709). Both weights are declared here rather than
     inherited: a bare <span> otherwise picks up the parent theme's
     `span { font-weight: 300 }` - the leak tools/span-weight-leak-check.js
     exists to catch. */
}
.mea-card-grid--cta-pill .mea-card-grid__cta-label {
  /* The label keeps R6's own separating space; a flex item would
     otherwise collapse it and the run would need an invented margin. */
  white-space: pre;
  font-weight: var(--mea-weight-semibold);
}
.mea-card-grid--cta-pill .mea-card-grid__cta-arrow {
  font-weight: var(--mea-weight-regular);
}
.mea-card-grid__badge {
  align-self: flex-start;
  margin: 0;
  padding: 6px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--mea-accent) 20%, transparent);
  color: var(--mea-ink-display, var(--mea-dark));
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-semibold);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: var(--mea-type-eyebrow-ls);
  text-transform: uppercase;
}
.mea-card-grid {
  /* R6 paints the Built For badge label #5a9200 (2545:2098 and its three
     siblings). That is the exact ink DESIGN CALL D12 ruled on - it measures
     3.42:1 on this badge's own ground (rgba(155,221,70,0.2) over white =
     235,248,218), under AA's 4.5 for 12px text - so this step paints
     --mea-accent-ink (#456f00, 5.38:1), which is the accessible
     substitute D12 already names for #5a9200 and which tokens.css already
     carries beside --mea-pill-ink's "decorative only" note. Opt-in, so the
     default --mea-ink-display above is unchanged. */
}
.mea-card-grid--badge-accent .mea-card-grid__badge {
  color: var(--mea-accent-ink);
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * Leading slot: a number, an icon, or nothing.
   * --------------------------------------------------------------- */
}
.mea-card-grid__number {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-medium);
  /* One-off type step: Figma sets 36px on the number only. Overridable
     per instance - /mea-ingestion's "How It Works" draws it at 52px. */
  font-size: var(--mea-card-grid-number-size, 36px);
  /* 1 on every instance measured before R6. The case-study executes cards
     draw `leading-[normal]` instead (3034:6060), which against Fira Code's
     own metrics is a 39px box on a 30px numeral - 9px per card, and 27px
     of that section's height. The team page's Intro cards (2545:3774) are
     the same shape and the same 39px box, which is what makes their card
     103 tall. `numberLineHeight` switches it; unset, every existing
     instance keeps the welded 1. */
  line-height: var(--mea-card-grid-number-lh, 1);
  /* Per instance via `numberTracking`. The shared eyebrow tracking is
     the default every existing instance keeps; R6's team-page Intro
     numeral (2545:3774) declares none, and the 3px it adds after two
     glyphs comes straight off the title column beside it. */
  letter-spacing: var(--mea-card-grid-number-ls, var(--mea-type-eyebrow-ls));
  background-image: var(--mea-cta-gradient);
  background-clip: text;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-background-clip: text;
  color: transparent;
}
.mea-card-grid {
  /* R6's case-study executes cards draw the numeral as a FLAT --mea-accent
     run - `get_design_context` on 3034:6060 reports `text-[#c5ff00]` with no
     gradient on the node at all - where every other instance in the file
     clips the shared CTA ramp into it. Unsetting the image is load-bearing:
     with `background-clip: text` still in force, a colour alone paints
     nothing, because the gradient keeps filling the glyphs. */
}
.mea-card-grid--number-accent .mea-card-grid__number {
  background-image: none;
  background-clip: border-box;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-background-clip: border-box;
  color: var(--mea-accent);
}
.mea-card-grid {
  /* A third, distinct numbering step from the gradient-clip __number above -
     /mea-operations' "How It Works" draws a small solid-fill rounded pill
     with a plain lime numeral, not a large gradient-clipped one. Figma's
     own card 1 is missing the pill fill (a source inconsistency, not
     reproduced here - every card gets the same chrome). */
}
.mea-card-grid__badge-number {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 34px;
  border-radius: 20px;
  background-color: #021412;
  color: var(--mea-accent);
  font-family: var(--mea-font-mono);
  font-weight: var(--mea-weight-light);
  font-size: 20px;
  letter-spacing: 1.5px;
}
.mea-card-grid__icon {
  display: block;
  flex-shrink: 0;
  width: var(--mea-card-grid-icon, 32px);
  /* Square unless a card asks for its own height - see render.php's
     `iconHeight`. Unset, this resolves to the width exactly as before. */
  height: var(--mea-card-grid-icon-h, var(--mea-card-grid-icon, 32px));
  overflow: hidden;
}
.mea-card-grid__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mea-card-grid {
  /* The badge row fits its images the way R6's own frames do: each slot is
     sized to the asset's intrinsic box, so `cover` and `contain` agree on
     four of the five, and the fifth is the reason it has to be `cover`.
     2736:8567 is a 306x172 image in a 200px card with p-32, i.e. a 136px
     content box, and its render shows the badge NOT scaled down - the ink
     measures 113px wide inside a 136px window, which only an unscaled,
     centre-clipped draw produces. `cover` from a 306x172 source into a
     136x172 slot scales by max(136/306, 172/172) = 1, so it draws at
     natural size and clips, which is exactly that. /information-security's
     Certifications row is the only `icon-above` instance in the file. */
}
.mea-card-grid--icon-above .mea-card-grid__icon img {
  object-fit: cover;
}
.mea-card-grid {
  /* A fourth leading step: a bordered 48x48 rounded-square chip around
     either the icon or a bare text glyph. Competitive Moat's "versus"
     comparison (/products, 2610:3070) is the first instance - a checkmark
     on mea's cards, a plain "X" on the competitor cards - each with its own
     hairline colour, so border-color is set inline per card rather than a
     second welded chip constant. */
}
.mea-card-grid__badge-icon {
  display: inline-flex;
  /* R6's chip is `size-[48px]` INCLUDING its 1px stroke (2610:3079 /
     2610:3090 / 2610:3101). Without this the content box was 48 and the
     border box 50, putting every row's copy 2px right of the design. */
  box-sizing: border-box;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--mea-accent);
  border-radius: 8px;
}
.mea-card-grid__badge-icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.mea-card-grid {
  /* The badge-icon row's own geometry, measured on R6 2610:3078 / 2610:3089 /
     2610:3100 (/products Competitive Moat), which is this leading step's only
     instance in the file: the chip is TOP-aligned to the copy's first line
     box and sits `gap-[36px]` from it, where the shared card row centres its
     leading mark at a 24px gap. Off the node render, row 1's chip top edge
     and its first text line box both start at y=735 inside a card whose top
     edge is 695 (40px padding), which only flex-start gives. Scoped to this
     leading step, so no other instance is touched. */
}
.mea-card-grid--leading-badge-icon .mea-card-grid__card {
  align-items: flex-start;
  gap: 36px;
}
.mea-card-grid__badge-icon-glyph {
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-medium);
  font-size: 20px;
  line-height: 1;
  color: var(--mea-ink-2);
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * Editor-only card controls. Never rendered on the front end, and
   * positioned out of flow so the editor preview measures the same as
   * the page.
   * --------------------------------------------------------------- */
}
.mea-card-grid__card-tools {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
.mea-card-grid__card-tools:focus-within {
  opacity: 1;
}
.mea-card-grid__card:hover .mea-card-grid__card-tools {
  opacity: 1;
}
.mea-card-grid {
  /* --------------------------------------------------------------- *
   * Tablet and mobile. Figma only supplies the 1440 frame, so both
   * steps are interpolated from it: three columns fold to two, then
   * everything folds to one, and the tile inset and number step down.
   * --------------------------------------------------------------- */
  /* A description measure the design draws WIDER than its own card, held at
     the design width only - AGENTS.md: "reproduce the overrun and let it
     clip, but pin that behaviour to 1440". `max-width` above can only ever
     narrow, and R6 sizes 2545:4795 (/information-security's first Private
     Learning card) at 230 inside a 218px content box; those 12px are the
     whole difference between R6's five description lines and a sixth.
     Inert for the ten cards that already set the attribute - bpo-solutions'
     nine at 248-293 in a 320px box and working-with-mea's two at 451/483 in
     a 524px box are all NARROWER than their boxes, so `width` and
     `max-width` resolve identically there. Bounded below 1440 because a
     fixed width does not shrink: measured at 1024 without the bound,
     bpo's cards went from 204.44 to their declared 265/276/291 and
     overflowed their own columns, the same 1024-1439 gap this file records
     for `cardWidths` and for mea/bridge-band. */
}
@media (min-width: 1440px) {
  .mea-card-grid__desc {
    width: var(--mea-card-grid-desc-maxw, auto);
  }
}
@media (max-width: 1023px) {
  .mea-card-grid {
    /* A per-card descMaxWidth is a 1440 measure Figma drew inside a
       384px card. Below the desktop breakpoint the card itself is
       narrower than that, so holding the measure would only ever
       under-fill a column - interpolated, not measured, since the design
       supplies no narrow frame. */
  }
  .mea-card-grid__desc {
    max-width: none;
  }
  .mea-card-grid--panel-dark {
    padding-top: min(var(--mea-card-grid-pt, 100px), 72px);
    padding-bottom: min(var(--mea-card-grid-pb, 100px), 72px);
  }
  .mea-card-grid__inner {
    gap: 40px;
  }
  .mea-card-grid {
    /* gridMaxWidth / gridOffsetStart are 1440 numbers; below the
       desktop breakpoint the grid fills its container again. */
  }
  .mea-card-grid__grid {
    max-width: none;
    margin-inline-start: 0;
  }
  .mea-card-grid--cols-3 .mea-card-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mea-card-grid--cols-5 .mea-card-grid__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mea-card-grid {
    /* layout:"row" never collapsed, and it broke the page. The three
       rules that build the row - `flex-direction: row`, `gap: 48px` and
       the title's rigid `flex: 0 0 420px` - sat outside every media
       query, and a rigid 420px track plus a 48px gap needs about 1000px
       of card before it fits: at a 375 viewport /information-security
       measured documentElement.scrollWidth 678 against clientWidth 375,
       a 303px horizontal scrollbar with each description off-screen to
       the right. Reset at the tablet breakpoint rather than at 767, so
       the row shape is only kept at widths that genuinely hold it; the
       design supplies no narrow frame, so this is interpolation.
       /information-security is the only page using this layout. */
  }
  .mea-card-grid--layout-row .mea-card-grid__content {
    flex-direction: column;
    gap: 12px;
  }
  .mea-card-grid--layout-row .mea-card-grid__title {
    flex: 0 1 auto;
  }
  .mea-card-grid--layout-row .mea-card-grid__desc {
    max-width: none;
  }
  .mea-card-grid {
    /* The dot lives in the section gutter, which the narrow steps give
       back to the content, so the whole treatment folds away with it. */
  }
  .mea-card-grid--leading-glow-dot .mea-card-grid__glow-dot, .mea-card-grid--leading-glow-dot .mea-card-grid__glow-rail {
    display: none;
  }
}
@media (max-width: 767px) {
  .mea-card-grid--panel-dark {
    padding-top: min(var(--mea-card-grid-pt, 100px), 56px);
    padding-bottom: min(var(--mea-card-grid-pb, 100px), 56px);
  }
  .mea-card-grid__inner {
    gap: 32px;
  }
  .mea-card-grid__body {
    gap: 24px;
  }
  .mea-card-grid__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .mea-card-grid--cols-3 .mea-card-grid__grid, .mea-card-grid--cols-2 .mea-card-grid__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mea-card-grid {
    /* The two-column label row has nothing to sit over once the grid
       below it stacks to one column - the badge-icon border colour still
       carries the reject/accept distinction per card. */
  }
  .mea-card-grid__column-labels {
    display: none;
  }
  .mea-card-grid__card {
    min-height: 0;
    padding: 24px;
    gap: 16px;
  }
  .mea-card-grid__card--stacked {
    min-height: 0;
    padding: 20px 24px;
  }
  .mea-card-grid__number {
    font-size: 28px;
  }
  .mea-card-grid__title, .mea-card-grid__lead-in {
    font-size: 20px;
  }
}

/* Hover lift, deck slide 05 IDLE STATE: "translateY -4px, box-shadow increase,
   250ms ease-out (Apple product-card style)".

   DEPARTURE FROM THE DECK: opt-in, default off (2026-09-01, Lia). The deck
   draws this on the card grid unconditionally, but no card-grid card is
   interactive - render.php always draws the tile as a `<div>`, never a link,
   and the only instance site-wide with per-card CTAs (/insights) puts the
   click target on its own anchor inside the tile. A tile that rises under the
   cursor advertises a click target that isn't there. So the deck's idle state
   ships only where a section is meant to read as touchable, one instance at a
   time - the same piloting rule `anim` follows.

   Gated on `cardHover`, and NOT on `[data-mea-anim='card-grid']`, which is
   what this used to key off. That welded the idle lift to the scroll
   entrance, so a page could not have one without the other: /mea-ingestion's
   "Read. Structure. Deliver." wants both, while the homepage's "Private
   Learning Architecture" and /mea-ingestion's "Built for every company type"
   want the entrance and not the lift. The two are independent - the lift is
   pure CSS and needs no GSAP - and the entrance flag is piloted per page for
   a different reason. Same call as mea/site-header's scroll darkening coming
   out from behind that gate (see its own style.scss note).

   The bezier is written literally here because CSS takes it directly - the
   GSAP side reaches the same curve through CustomEase, so entrance and hover
   cannot drift apart on an instance running both.

   Only transform and box-shadow transition. Transitioning `all` here would
   also catch the opacity GSAP is driving on entrance and fight it. And on an
   instance running both, the entrance tween must keep its
   `clearProps: 'transform,translate,rotate,scale'` (_shared/animation.js): a
   landed card's leftover inline transform outranks the translateY below and
   silently swallows it while letting the box-shadow through. That coupling
   survives this re-scope even though the scope it was written against does
   not. */
.mea-card-grid--card-hover .mea-card-grid__card {
  transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.mea-card-grid--card-hover .mea-card-grid__card:hover {
  box-shadow: 0 12px 32px rgba(2, 20, 18, 0.12);
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .mea-card-grid--card-hover .mea-card-grid__card {
    transition: none;
  }
  .mea-card-grid--card-hover {
    /* Transform only. The box-shadow deliberately survives: reduced
       motion asks for no movement, not for no hover feedback. */
  }
  .mea-card-grid--card-hover .mea-card-grid__card:hover {
    transform: none;
  }
}
/* Section insets on a light panel.

   These were previously declared only under --panel-dark, so every
   `panel:"none"` instance silently ignored its own paddingTop/paddingBottom
   attributes - seven instances, six of which carry deliberate values (67/67,
   80/120, 120/120, 0/120) that never reached the page. Declaring them here
   fixes that.

   Gated on --padded rather than applied to every panel:none instance: the
   other six keep rendering exactly as before, and keep their authored values
   on record for when each page is verified against the canvas. */
.mea-card-grid--panel-none.mea-card-grid--padded {
  padding-top: var(--mea-card-grid-pt, 0);
  padding-bottom: var(--mea-card-grid-pb, 0);
}

/* Footer with no chrome: bare text under the grid, which is what R4 EXPORT
   draws for the homepage and /products "Private Learning Architecture"
   (a TEXT node 908 wide, no box, no stroke, no icon).

   margin-top is 18px rather than 50: __body is a flex column with a 32px gap,
   so 32 + 18 lands the canvas's 50px between the last card row and this text.
   The icon is suppressed in render.php for this chrome. */
.mea-card-grid__footer--none {
  display: block;
  margin-top: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.mea-card-grid__footer--none .mea-card-grid__footer-text {
  max-width: var(--mea-card-grid-footer-text-maxw, none);
  color: var(--mea-card-grid-footer-text-color, inherit);
}

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