/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/cta-band/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************/
/*
 * mea/cta-band - the closing CTA panel.
 *
 * Geometry source: Figma node 2139:3387 ("Background", 1021 x 395), the card
 * whose copy this block ships. Every number the twelve instances disagree on
 * is a custom property render.php sets from an attribute - see the geometry
 * table at the top of that file. Only the values every instance shares live
 * here.
 */
.mea-cta-band {
  box-sizing: border-box;
  background-color: var(--mea-dark);
  padding-block: var(--mea-cta-band-section-pt, 80px) var(--mea-cta-band-section-pb, 80px);
  --mea-fg: var(--mea-on-dark);
  color: var(--mea-on-dark);
}
.mea-cta-band__inner {
  box-sizing: content-box;
  max-width: var(--mea-cta-band-maxw, 1021px);
  margin: 0 auto;
  padding-inline: var(--mea-gutter);
}
.mea-cta-band__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mea-cta-band-stack-gap, 45px);
  box-sizing: border-box;
  padding: var(--mea-cta-band-pad-top, 66px) var(--mea-cta-band-pad-inline, 47.5px) var(--mea-cta-band-pad-bottom, 70px);
  border-radius: var(--mea-cta-band-radius, 20px);
  /*
   * Figma paints this card's edge with its GLASS effect, not a stroke, and
   * the effect has two parts. Sampling node 2139:3387's empty margins
   * against the colour under each edge resolves them to:
   *
   *   1. a 1px hairline, white at 0.26 alpha on the top and left and 0.21 on
   *      the bottom and right - the same two steps mea/card-grid measured on
   *      2008:8249, so the two blocks agree;
   *   2. an inward ramp over the outer 20px (top and left) and 12px (bottom
   *      and right), where the glass fill dims back toward the ground on the
   *      lit edges (green channel 32 -> 25 at the very edge) and lifts above
   *      it on the shaded ones (32 -> 38).
   *
   * The ramp is four background layers rather than four blurred inset
   * box-shadows. The shadow version was tried first and could not be fitted:
   * a blurred inset shadow peaks AT the edge, so it composited under the 1px
   * hairline and pushed the bottom and right edges from 0.21 to 0.27 alpha.
   * As background layers the ramps sit beneath the hairline, which is an
   * inset box-shadow and therefore paints over the background. Each ramp
   * also holds its first 1px transparent so the hairline paints over
   * undimmed glass: without that offset the lit hairline resolved to
   * green 85 against the node's 92.
   *
   * The lifting ramp varies --mea-on-dark's alpha with color-mix. The
   * dimming ramp is the one colour literal in this block, #0c1412, and the
   * design genuinely differs from the token: solving the node's own samples
   * back through the composite gives a shadow of rgb(12, 20, 18), which is
   * --mea-dark (rgb(2, 20, 18)) with a raised red channel. Painting the
   * token instead is measurably wrong - green and blue land exactly, red
   * lands 5/255 dark - so the literal is the accurate value, not a
   * shortcut. No color-mix stop is 0%: the build's minifier rewrites a
   * literal 0% to 0, which invalidates the whole function.
   */
  /*
   * The GLASS effect as white alpha (2026-09-14), replacing the dark
   * overlay that stood here. Not a correction of a defect - the old
   * form reproduced 2545:1767 to a mean 0.10pp, because every one of
   * this block's 19 instances sits on flat --mea-dark where the two
   * models agree. It is a change of MODEL: the white form does not
   * depend on its ground, so this card keeps its shape if one is ever
   * drawn over a wash, which is the failure that had to be fixed
   * across mea/card-grid, mea/stat-cards and mea/check-list.
   *
   * The values are this block's OWN, not the card family's - see
   * --mea-glass-bevel-fitted-cta in tokens.css for both profiles and
   * for why they are not interchangeable.
   *
   * No `background-origin` here: this card draws no border, so the
   * padding box IS the border box and each ramp's leading transparent
   * 1px already lands under the inset hairline below.
   */
  background: var(--mea-glass-bevel-fitted-cta), var(--mea-glass-fitted-cta-base);
  /*
   * The hairline is an inset box-shadow rather than a border: a 1px border
   * adds its own 2px to the card height and would push it past the 395px
   * frame.
   */
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--mea-on-dark) 26%, transparent), inset 1px 0 0 color-mix(in srgb, var(--mea-on-dark) 26%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--mea-on-dark) 21%, transparent), inset -1px 0 0 color-mix(in srgb, var(--mea-on-dark) 21%, transparent);
}
.mea-cta-band__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mea-cta-band-header-gap, 24px);
  padding-block: var(--mea-cta-band-header-pad-block, 0);
  width: 100%;
}
.mea-cta-band__eyebrow {
  margin: 0;
  padding: 0;
  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);
  color: var(--mea-eyebrow-on-dark);
  text-align: center;
}
.mea-cta-band--eyebrow-white .mea-cta-band__eyebrow {
  color: var(--mea-on-dark);
}
.mea-cta-band--eyebrow-pill .mea-cta-band__eyebrow {
  padding: 6px 12px;
  border-radius: 4px;
}
.mea-cta-band__headline {
  margin: 0;
  padding: 0;
  max-width: var(--mea-cta-band-headline-maxw, none);
  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-loose);
  color: var(--mea-on-dark);
  text-align: center;
}
.mea-cta-band__headline span.green {
  color: var(--mea-accent);
  font-weight: var(--mea-weight-medium);
}
.mea-cta-band {
  /* `headline_accent: flat-regular` - the same flat lime fill, at the
     headline's own Regular. R6 draws /mea-ingestion's "Intake, solved."
     (2545:1994) with no weight class on the lime span, so it inherits
     `font-normal`; the 500 above is a perception compensation, not a
     measured weight, and this node asks for the measured one. Two classes,
     so it beats the (0,2,0) `&__headline span.green` rule on specificity
     rather than on source order. */
}
.mea-cta-band--accent-flat-regular .mea-cta-band__headline span.green {
  font-weight: var(--mea-weight-regular);
}
.mea-cta-band--lh-tight .mea-cta-band__headline {
  line-height: var(--mea-type-h1-lh);
}
.mea-cta-band {
  /* R6's case-study closing panel fills the accent clause with the CTA
     gradient itself rather than painting it a flat lime (3012:10430). The
     ramp is --mea-cta-gradient, the same token the pill and mea/card-grid's
     own gradient number already clip, so no new colour enters the block.
     The weight compensation above is dropped with it: that step exists
     because flat lime reads thinner than white, and the gradient run does
     not have that problem - R6 draws this span at the headline's own
     Regular. */
}
.mea-cta-band--accent-gradient .mea-cta-band__headline span.green {
  background-image: var(--mea-cta-gradient);
  background-clip: text;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-background-clip: text;
  color: transparent;
  font-weight: var(--mea-weight-regular);
}
.mea-cta-band {
  /* rgba(255,255,255,0.9) on 3012:10429, which --mea-on-dark-strong already
     stores exactly. The eleven pre-R6 instances keep --mea-eyebrow-on-dark. */
}
.mea-cta-band--eyebrow-strong .mea-cta-band__eyebrow {
  color: var(--mea-on-dark-strong);
}
.mea-cta-band {
  /* `eyebrow_tone: accent`. R6's /working-with-mea card (2545:4287) draws
     this line in --mea-accent itself - the fourth of the four inks in the
     sampled table above $eyebrow_tone in render.php, exactly #c5ff00 rather
     than near it. One instance so far; the other twelve are unchanged. */
}
.mea-cta-band--eyebrow-accent .mea-cta-band__eyebrow {
  color: var(--mea-accent);
}
.mea-cta-band {
  /* --mea-on-dark-soft at 70% (3012:10431), against the opaque token
     /products' supporting line draws. */
}
.mea-cta-band--body-soft-70 .mea-cta-band__body {
  color: color-mix(in srgb, var(--mea-on-dark-soft) 70%, transparent);
}
.mea-cta-band__body {
  /* `body_gap` lifts the supporting line to its own rhythm without moving
     it in the DOM. The header is a gap-ed flex column, so the extra is
     the difference between the two gaps; unset,
     --mea-cta-band-body-gap resolves to the header gap and the calc is 0,
     which is what all eleven pre-R6 instances render. */
  margin: calc(var(--mea-cta-band-body-gap, var(--mea-cta-band-header-gap, 24px)) - var(--mea-cta-band-header-gap, 24px)) 0 0;
  padding: 0;
  max-width: var(--mea-cta-band-body-maxw, none);
  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);
  color: var(--mea-on-dark-soft);
  text-align: center;
}
.mea-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 33px;
  /*
   * `width: 100%` for the same reason __header carries it: as a
   * shrink-to-fit flex item the row measured 595px against the 840px it
   * had, and the two pills wrapped at 1440 even though 333 + 33 + 277
   * fits. Figma hugs the row at 613 and centres it, which this renders
   * identically because the pills are centred inside the full width.
   */
  width: 100%;
}
.mea-cta-band__cta--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 55px;
  padding: 0 32px;
  border: 1px solid var(--mea-accent);
  border-radius: var(--mea-pill-radius);
  background: transparent;
  color: var(--mea-on-dark);
  font-family: var(--mea-font-sans);
  font-weight: var(--mea-weight-regular);
  font-size: var(--mea-type-cta-size);
  letter-spacing: var(--mea-type-cta-ls);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.mea-cta-band__cta--secondary:hover, .mea-cta-band__cta--secondary:focus-visible {
  background-color: color-mix(in srgb, var(--mea-accent) 12%, transparent);
}
.mea-cta-band__cta--secondary:focus-visible {
  outline: 2px solid var(--mea-accent);
  outline-offset: 3px;
}
@media (max-width: 1023px) {
  .mea-cta-band {
    padding-block: min(64px, var(--mea-cta-band-section-pt, 80px)) min(64px, var(--mea-cta-band-section-pb, 80px));
  }
  .mea-cta-band__card {
    padding: min(56px, var(--mea-cta-band-pad-top, 66px)) min(40px, var(--mea-cta-band-pad-inline, 47.5px)) min(56px, var(--mea-cta-band-pad-bottom, 70px));
  }
}
@media (max-width: 767px) {
  .mea-cta-band {
    padding-block: min(48px, var(--mea-cta-band-section-pt, 80px)) min(48px, var(--mea-cta-band-section-pb, 80px));
  }
  .mea-cta-band__card {
    gap: min(32px, var(--mea-cta-band-stack-gap, 45px));
    padding: min(40px, var(--mea-cta-band-pad-top, 66px)) min(24px, var(--mea-cta-band-pad-inline, 47.5px)) min(40px, var(--mea-cta-band-pad-bottom, 70px));
  }
  .mea-cta-band__header {
    gap: min(16px, var(--mea-cta-band-header-gap, 24px));
  }
  .mea-cta-band__actions {
    flex-direction: column;
    gap: 16px;
  }
  .mea-cta-band {
    /*
     * Both pills let a long label wrap below 768. The shared .mea-cta drops
     * its 333px minimum at this width but keeps `white-space: nowrap` and a
     * fixed height, so the longest CTA copy in the design ("See mea run your
     * own submissions" on 2003:5995) measured 381.6px against the 281.2px
     * the card leaves at 375 and pushed the document to 428px. Overriding
     * the pair here rather than in _shared/base.css keeps the change inside
     * this block; the pill still reads as a pill because the fixed height
     * becomes a minimum and the inset moves into the padding.
     */
  }
  .mea-cta-band__cta.mea-cta, .mea-cta-band__cta--secondary {
    max-width: 100%;
    height: auto;
    min-height: 50px;
    padding: 12px 26px;
    font-size: 18px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mea-cta-band__cta--secondary {
    transition: none;
  }
}

/*
 * Deck slide 21's hover swap, gated behind the same `anim` flag as the
 * entrance in _shared/animation.js - this shape renders twelve times across
 * the site and nothing here should change until each page is reviewed.
 *
 * The idle "breathing" glow this same slide specified is gone site-wide
 * (2026-09-09, Lia): every instance pulsed a lime ring around its own button
 * regardless of `anim`, and it read as visual noise rather than a cue. The
 * keyframe itself is removed from _shared/base.css - mea/hero's identical
 * button carried the same rule and lost it in the same pass.
 *
 * Colour still comes from tokens.css, not the deck: the deck names a literal
 * hex for the hover brighten, but that is a `filter: brightness()` flip of
 * the shared hover's own `brightness(0.92)`, not a new colour.
 */
[data-mea-anim=cta-band] .mea-cta-band__cta.mea-cta:hover {
  filter: brightness(1.08);
  transform: scale(1.02);
  transition: filter 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.25s ease;
}
[data-mea-anim=cta-band] .mea-cta-band__cta.mea-cta:hover .mea-cta__arrow {
  transition: transform 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  [data-mea-anim=cta-band] .mea-cta-band__cta.mea-cta:hover {
    transition: none;
  }
}

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