/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/blocks/page-hero/style.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Breakpoints.
 *
 * Sass cannot read the `--breakpoint-*` custom properties out of the Tailwind
 * theme at compile time, so this map mirrors them by hand. Keep the two in step:
 * `src/global/tailwind/design-system.css` is the source of truth, and the names
 * and values here are deliberately identical to it so there is one vocabulary
 * across utilities and SCSS.
 *
 * Values are the breakpoint's *min-width*, matching Tailwind. The mixin
 * subtracts a pixel when it needs a max-width query.
 */
/**
 * Breakpoint query.
 *
 * The map stores each breakpoint's min-width, the same way Tailwind's
 * `--breakpoint-*` variables do, so `$mobileFirst: true` uses the value as-is
 * and the max-width case stops a pixel short of it. That means
 * `breakpoint("sm")` and `breakpoint("sm", true)` never both match a width.
 */
/*********************
* BREAKPOINTS
*
* Names match the Tailwind scale in design-system.css:
* xxs 320, xs 375, sml 479, smlr 568, sm 768, md 992,
* lg 1025, wd 1200, lp 1400, bigLp 1600, xl 1930.
*
* @example
* below the breakpoint (max-width)
* @include breakpoint('sm') {
*	@content;
* }
*
* from the breakpoint up (min-width), matching the `sm:` utility prefix
* @include breakpoint('sm', true) {
*	@content;
*}
*********************/
/**
* Mixin to declare Font-face
*
*/
/**
 * Page Hero. Tailwind covers the layout; this holds the three things it cannot
 * express — the logo marquee, the white treatment Figma gives those logos on
 * the dark band, and the play/pause icon swap.
 */
.block-page-hero {
  /**
   * The inner page hero does not sit on the warm page wash the home page
   * sections share — Figma paints it with its own gradient running from
   * near black at the top right, through a deep blue, to a warmer charcoal
   * at the bottom left, all under a near black texture at 80%. These stops
   * are that composite, measured off the frame.
   */
  background-color: #06090d;
  background-image: linear-gradient(to bottom left, #05080b 0%, #06121c 53%, #0c0f10 100%);
}
.block-page-hero__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.block-page-hero {
  /* Figma draws the handset at 14×20 inside the button's 24px icon box. */
}
.block-page-hero__phone svg {
  width: 14px;
  height: 20px;
}
.block-page-hero__track {
  animation: bf-page-hero-marquee 40s linear infinite;
  will-change: transform;
}
.block-page-hero {
  /* Figma masks the lender logos to flat white and drops them to 15%, so the
     same colour artwork the light strip uses can be reused here. */
}
.block-page-hero__logo img {
  filter: brightness(0) invert(1);
  opacity: 0.15;
}
.block-page-hero {
  /* Only one of the two glyphs shows; the button flips them on play state.
     aria-pressed doubles as the state hook, so no extra class is needed. */
}
.block-page-hero__icon--play {
  display: none;
}
.block-page-hero__toggle[aria-pressed=false] .block-page-hero__icon--pause {
  display: none;
}
.block-page-hero__toggle[aria-pressed=false] .block-page-hero__icon--play {
  display: block;
}
.block-page-hero .btn-wrapper:not(:has(.btn + .btn)) {
  width: 209px;
}
.block-page-hero .btn-wrapper:not(:has(.btn + .btn)) .btn {
  width: 100%;
  padding-inline: 16px;
}

@keyframes bf-page-hero-marquee {
  from {
    transform: translateX(0);
  }
  /* Half the track = two of the four rendered passes. */
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .block-page-hero__track {
    animation: none;
  }
  .block-page-hero__viewport {
    overflow-x: auto;
  }
}

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