/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./assets/scss/main.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Design tokens from Figma "BMI Soundmouse Microsite".
   Fonts are enqueued in includes/assets.php ('theme-fonts'). */
:root {
  /* color tokens (Figma variables) */
  --cyan-100: #EFFCFE;
  --cyan-200: #AFF1F9;
  --cyan-300: #5EE2F2;
  --magenta-300: #F161D1;
  --blue-100: #EAF4FB;
  --blue-200: #CBE5F5;
  --blue-300: #52A8F2;
  --blue-400: #015FBF;
  --blue-500: #022981;
  --blue-600: #041342;
  --purple-500: #280578;
  --grey-100: #FFFFFF;
  --grey-200: #F4F5F7;
  --grey-400: #6D7F8A;
  --grey-500: #31464F;
  --grey-600: #13292D;
  /* Neue Kabel + Proxima Nova are licensed (Adobe Fonts). Jost + Inter are
     stand-ins; add the Typekit embed and the real families take over. */
  --font-heading: "neue-kabel";
  --font-body: "proxima-nova";
  --content-max: 1264px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--grey-600);
  background: var(--cyan-100);
  overflow-x: hidden;
}

/* desktop: overlay the footer onto the bottom of the page content so it
   sits on .module-cta-form's background image (one element paints the
   whole Figma "Footer background" — no seam). The CTA module reserves
   the overlaid space via its bottom padding. */
@media (min-width: 1101px) {
  body {
    display: grid;
    grid-template-columns: 100%;
  }
  .layout-main,
  .layout-footer {
    grid-area: 1/1;
  }
  .layout-footer {
    align-self: end;
    position: relative; /* paints above the positioned .module boxes it overlays */
  }
}
img {
  display: block;
  max-width: 100%;
}

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

.module {
  position: relative;
}

/* decorative flowing lines shared by gradient modules */
.deco-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 900' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M-50 200 C 300 80, 700 320, 1490 140' fill='none' stroke='white' stroke-opacity='.35' stroke-width='1.5'/><path d='M-50 260 C 320 140, 720 380, 1490 200' fill='none' stroke='white' stroke-opacity='.25' stroke-width='1.5'/><path d='M-50 700 C 400 560, 900 840, 1490 640' fill='none' stroke='white' stroke-opacity='.3' stroke-width='1.5'/></svg>");
  background-size: 100% 100%;
}

/* Figma renders text boxes trimmed to cap height / alphabetic baseline
   (text-box-trim). Without this, browsers add the font's ascent/descent
   above and below each heading, which reads as wrong line-height and
   throws off every vertical gap. Progressive enhancement: browsers
   without support simply ignore it. */
.h2, .h1 {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue-600);
}

.h2 {
  font-family: var(--font-heading);
  font-weight: 450;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--blue-600);
}

/* mobile type scale — Figma "heading (mobile)" tokens: h1 42/1.1,
   h2 32/1.15 (the clamp minimums already land the sizes for h2) */
@media (max-width: 768px) {
  .h1 {
    font-size: 42px;
  }
  .h2 {
    line-height: 1.15;
  }
}
.eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-400);
}

.p2 {
  font-size: 16px;
  line-height: 1.5;
  color: var(--grey-600);
}
.p2 p + p {
  margin-top: 16px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 146px;
  height: 42px;
  padding: 0 24px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, border-color 0.35s ease;
  /* rising-circle hover (ellipse below the label in the design) */
}
.btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 57px;
  height: 57px;
  border-radius: 50%;
  transform: translate(-50%, 0) scale(1);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: -1;
}
.btn:hover::after {
  transform: translate(-50%, -60%) scale(4.2);
}

.btn-light-fill {
  background: var(--blue-100);
  border-color: var(--blue-100);
  color: var(--blue-500);
}
.btn-light-fill::after {
  background: var(--blue-400);
}
.btn-light-fill:hover {
  color: var(--grey-100);
  border-color: var(--blue-400);
}

.btn-light-outline {
  background: transparent;
  border-color: var(--blue-100);
  color: var(--blue-100);
}
.btn-light-outline::after {
  background: var(--blue-400);
}
.btn-light-outline:hover {
  color: var(--grey-100);
  border-color: var(--blue-400);
}

.btn-blue-fill {
  background: var(--blue-200);
  border-color: var(--blue-200);
  color: var(--blue-500);
}
.btn-blue-fill::after {
  background: var(--blue-400);
}
.btn-blue-fill:hover {
  color: var(--grey-100);
  border-color: var(--blue-400);
}

.btn-dark-outline {
  background: transparent;
  border-color: var(--blue-600);
  color: var(--blue-600);
}
.btn-dark-outline::after {
  background: var(--blue-400);
}
.btn-dark-outline:hover {
  color: var(--grey-100);
  border-color: var(--blue-400);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  [data-split-reveal] .word,
  [data-split-reveal-scroll] .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.6em);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .words-in .word {
    opacity: 1;
    transform: none;
  }
}
.layout-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  /* content box: 1344px, aligned with the hero content */
}
.layout-header .container {
  max-width: 1392px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 24px 0;
}
.layout-header .logo img {
  height: 33px;
  width: auto;
}
.layout-header .header-ctas {
  display: flex;
  gap: 16px;
}
@media (max-width: 1100px) {
  .layout-header .container {
    padding: 20px 24px 0;
    flex-wrap: wrap;
  }
}
.layout-header {
  /* mobile: logo centered on top, CTA pair centered beneath it */
}
@media (max-width: 768px) {
  .layout-header .container {
    flex-direction: column;
    justify-content: flex-start;
    padding: 24px 24px 0;
    gap: 16px;
  }
}

/* on desktop the footer overlays the bottom of .module-cta-form (grid
   overlay in base/_base.scss) and is transparent, so it sits on that
   section's background image; small screens fall back to showing the
   image's bottom band themselves */
.layout-footer {
  padding: 60px 0;
  overflow: hidden;
  background: url("../images/bg-footer.webp") bottom center/cover no-repeat, var(--cyan-200);
}
@media (min-width: 1101px) {
  .layout-footer {
    background: none;
  }
}
.layout-footer {
  /* content box: 1344px, aligned with the header */
}
.layout-footer .container {
  max-width: 1392px;
  padding: 0 24px;
}
.layout-footer .footer-inner {
  border-top: 1px solid rgba(4, 19, 66, 0.2);
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 48px;
}
.layout-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.layout-footer .footer-logo img {
  height: 28px;
  width: auto;
}
.layout-footer .footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 60px;
}
.layout-footer .footer-column-heading {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.layout-footer .footer-socials {
  display: flex;
  align-items: center;
  gap: 18px;
}
.layout-footer .footer-social {
  display: block;
  transition: opacity 0.2s ease;
}
.layout-footer .footer-social img {
  width: 24px;
  height: 24px;
}
.layout-footer .footer-social:hover {
  opacity: 0.7;
}
.layout-footer .footer-address {
  margin: 0;
  max-width: 180px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--blue-600);
}
.layout-footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 14px;
  line-height: 1.36;
  color: var(--blue-600);
}
.layout-footer .footer-legal a {
  color: inherit;
  text-decoration: none;
}
.layout-footer .footer-legal a:hover {
  text-decoration: underline;
}
.layout-footer {
  /* mobile design (Figma 9595-9470): everything stacks left-aligned —
     logo, legal links one per line, then Social / office columns */
}
@media (max-width: 768px) {
  .layout-footer {
    padding: 60px 0;
  }
  .layout-footer .footer-inner {
    border-top: none;
    padding-top: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .layout-footer .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .layout-footer .footer-columns {
    flex-direction: column;
    gap: 32px;
  }
}
.layout-footer {
  /* dark variant: pages that end on the hero gradient (e.g. Terms of
     Use) — only the background changes (mobile fallback image); text,
     icons and the logo stay the same navy/black as the regular footer,
     since that section's own background is light enough to read them */
}
.layout-footer--dark {
  background: url("../images/bg-hero.webp") bottom center/cover no-repeat, #280578;
}
@media (min-width: 1101px) {
  .layout-footer--dark {
    background: none;
  }
}
.layout-footer--dark .footer-social img {
  filter: brightness(0);
}

.module-container {
  position: relative;
  overflow: hidden;
  /* 16px rounded box with a 16px gutter on both sides */
}
.module-container--boxed {
  border-radius: 16px;
  margin-inline: auto;
  width: calc(100% - 32px);
}
.module-container {
  /* editor-set max width (up to 1440px) */
}
.module-container--capped {
  max-width: var(--container-max, 1440px);
  margin-inline: auto;
}
.module-container--boxed.module-container--capped {
  width: min(100% - 32px, var(--container-max, 1440px));
}
.module-container {
  /* the container owns the background; nested modules go transparent */
}
.module-container .module {
  background: none;
  overflow: visible;
}
.module-container .module > .deco-lines {
  display: none;
}
.module-container {
  /* backgrounds exported straight from the Figma (hero gradient node,
     mid-page parallax background); the solid color behind each is the
     fallback while the image loads */
}
.module-container--hero {
  background: #6c2bae;
  /* image sits on its own layer (like the mesh background below) so it
     can fade in on page load without also fading the hero content,
     which has its own separate reveal animations */
}
.module-container--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/bg-hero.webp") center/cover no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .module-container--hero::before {
    opacity: 0;
    animation: hero-bg-fade-in 0.8s ease forwards;
  }
}
.module-container--hero {
  /* legal/long-form pages (rich_text in a hero container, e.g. Terms
     of Use) run far taller than a normal hero, so stretching the
     image the rest of that height with background-size: cover would
     blur it badly. Instead the image sits at its own size pinned to
     the top, the page's own base color carries everything below it,
     and a CSS gradient (not a second image) washes the bottom 2/3
     back up into it. */
}
.module-container--hero:has(.module-rich-text) {
  background: #6e0957;
}
.module-container--hero:has(.module-rich-text)::before {
  background: linear-gradient(to top, #52a8f2 0%, rgba(82, 168, 242, 0) 100%), url("../images/bg-terms.webp") top center/100% auto no-repeat;
}
.module-container {
  /* the mesh image lives on a bled ::before layer so JS (main.js) can
     parallax it against the scroll; --plx-bg defaults to 0 for no-JS
     and reduced-motion */
}
.module-container--mesh {
  background: var(--blue-200);
}
.module-container--mesh::before {
  content: "";
  position: absolute;
  /* bleed must clear the max --plx-bg offset (main.js speed: 840;
     prior speed 420 measured a ~490px peak, so this doubles that)
     with room to spare, or the image edge shows at scroll extremes */
  inset: -1100px 0;
  background: url("../images/bg-mid.webp") center/cover no-repeat;
  transform: translateY(var(--plx-bg, 0px));
  will-change: transform;
}
.module-container--light {
  background: var(--cyan-100);
}

@keyframes hero-bg-fade-in {
  to {
    opacity: 1;
  }
}
.module-hero {
  color: #fff;
  padding: 220px 24px 100px;
  background: radial-gradient(90rem 60rem at 85% -20%, rgba(94, 226, 242, 0.9), transparent 60%), radial-gradient(70rem 50rem at -10% 5%, #f161d1 0%, rgba(241, 97, 209, 0.55) 40%, transparent 70%), radial-gradient(60rem 46rem at 15% 85%, #280578 0%, rgba(40, 5, 120, 0.75) 45%, transparent 75%), radial-gradient(75rem 55rem at 105% 70%, rgba(82, 168, 242, 0.95), transparent 65%), linear-gradient(160deg, #b24bc8 0%, #6c2bae 45%, #1b2e8f 100%);
  /* content box: 1344px, matching the header (Figma frame minus 48px margins) */
}
.module-hero .container {
  max-width: 1392px;
  padding: 0 24px;
}
.module-hero .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 514px) minmax(0, 743px);
  justify-content: space-between;
  /* hero-left (title + sub) centers against the video's height,
     rather than the title carrying a fixed margin-top guess */
  align-items: center;
  gap: 48px;
}
.module-hero .hero-title {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  /* the WYSIWYG field wraps its content in a <p> (wpautop); strip its
     default browser margin so it doesn't add stray space in the h1 */
}
.module-hero .hero-title p {
  margin: 0;
}
.module-hero .hero-sub {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: #fff;
  margin-top: 32px; /* Figma: Hero/Left gap-[32px] (updated 2026-07-22) */
}
.module-hero .hero-video {
  justify-self: end;
  width: 100%;
}
.module-hero .video-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 743/418;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  box-shadow: 0 24px 64px rgba(4, 19, 66, 0.35);
  /* the thumbnail sits ABOVE the muted autoplay layer and fades out
     once YouTube's unremovable title overlay has faded (JS adds
     .video-live), so the title flash is never visible */
}
.module-hero .video-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 2;
  transition: opacity 0.6s ease;
}
.module-hero .video-frame.video-live img {
  opacity: 0;
}
.module-hero .video-frame iframe,
.module-hero .video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.module-hero .video-frame {
  /* muted autoplay layer: clicks fall through to the frame button,
     which keeps the .play-btn overlay on top */
}
.module-hero .video-frame .video-bg {
  pointer-events: none;
}
.module-hero .play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
  z-index: 3; /* above the thumbnail mask */
}
.module-hero .video-frame:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}
@media (max-width: 1100px) {
  .module-hero {
    padding-top: 190px;
  }
  .module-hero .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .module-hero .hero-video {
    justify-self: stretch;
    max-width: 743px;
  }
}
.module-hero {
  /* mobile design (Figma 9595-9470): stacked header pushes the copy
     down, tighter type, video card softens to a 12px radius */
}
@media (max-width: 768px) {
  .module-hero {
    padding: 260px 24px 100px;
  }
  .module-hero .hero-inner {
    gap: 60px;
  }
  .module-hero .hero-title {
    font-size: 42px; /* heading (mobile)/h1 */
  }
  .module-hero .hero-sub {
    font-size: 17px; /* heading (mobile)/h5 */
    line-height: 1.3;
  }
  .module-hero .hero-sub br {
    display: none;
  }
  .module-hero .video-frame {
    border-radius: 12px;
  }
  .module-hero .play-btn {
    display: block;
    width: 40px;
    height: 40px;
  }
  .module-hero .play-btn svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* sits directly below the hero and continues its deep-blue gradient */
.module-logo-marquee {
  padding: 60px 0;
  overflow: hidden;
  background: radial-gradient(70rem 40rem at 90% -40%, rgba(82, 168, 242, 0.5), transparent 70%), radial-gradient(60rem 36rem at 10% 130%, rgba(40, 5, 120, 0.8), transparent 75%), linear-gradient(180deg, #1b2e8f 0%, #232173 100%);
}
.module-logo-marquee .marquee-heading {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  padding: 0 48px;
  margin-bottom: 37px;
}
.module-logo-marquee .logo-marquee {
  overflow: hidden;
  width: 100%;
  /* hide until Swiper (or static mode) is settled — Safari flashes
     while loop clones / initial transforms are applied */
  opacity: 0;
  transition: opacity 0.25s ease;
}
.module-logo-marquee .logo-marquee.is-ready {
  opacity: 1;
}
.module-logo-marquee .logo-marquee {
  /* continuous marquee: linear motion instead of Swiper's eased steps */
}
.module-logo-marquee .logo-marquee .swiper-wrapper {
  display: flex;
  box-sizing: content-box;
  transition-timing-function: linear !important;
  align-items: center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.module-logo-marquee .logo-marquee .swiper-slide {
  width: auto;
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.module-logo-marquee .logo-marquee {
  /* short logo set that doesn't fill the row: center as a static row */
}
.module-logo-marquee .logo-marquee.logo-marquee--static {
  display: flex;
  justify-content: center;
}
.module-logo-marquee .logo-marquee.logo-marquee--static .swiper-wrapper {
  transform: none !important;
  transition: none !important;
  will-change: auto;
}
.module-logo-marquee .logo-track img {
  height: 89px;
  width: auto;
  flex: 0 0 auto;
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (max-width: 1100px) {
  .module-logo-marquee .marquee-heading {
    font-size: 20px;
  }
  .module-logo-marquee .logo-track img {
    height: 64px;
  }
}
@media (max-width: 768px) {
  .module-logo-marquee {
    padding: 40px 0;
  }
  .module-logo-marquee .marquee-heading {
    padding: 0 24px;
    font-size: 16px;
  }
  .module-logo-marquee .logo-track img {
    height: 48px;
  }
}

.module-stats {
  padding: 80px 24px;
}
.module-stats .stats-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 60px;
}
.module-stats .stat {
  min-width: 200px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.module-stats .stat-number {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 100px;
  line-height: 1;
  letter-spacing: -1.8px; /* Figma value for the larger headings (BugHerd 31) */
  color: var(--blue-400);
}
.module-stats {
  /* odometer roll: JS (main.js) rebuilds .count into digit reels that
     spin from 0 to the target with a motion blur, per the Figma
     "rolling-counter" animation */
}
.module-stats .count {
  display: inline-block;
}
.module-stats .count .digit {
  display: inline-block;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  vertical-align: top;
}
.module-stats .count .digit-reel {
  display: block;
  will-change: transform;
}
.module-stats .count .digit-reel span {
  display: block;
  height: 1em;
  line-height: 1;
}
.module-stats .count .digit-reel.rolling-now {
  filter: blur(3px);
}
.module-stats .stat-unit {
  font-weight: 500;
  font-size: 60px;
  letter-spacing: -0.01em;
}
.module-stats .stat-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--blue-600);
}
.module-stats .stat-divider {
  width: 1.5px;
  background: var(--blue-200);
  align-self: center;
  height: 63px;
}
@media (max-width: 768px) {
  .module-stats .stats-inner {
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }
  .module-stats .stat-divider {
    width: 63px;
    height: 1.5px;
  }
  .module-stats {
    /* the mobile design keeps the desktop stat type scale
       (100px numbers, 60px units, 20px labels) */
  }
}

/* pastel mesh background shared visually with .module-media-text below it */
.module-feature-cards {
  overflow: hidden;
  background: radial-gradient(60rem 40rem at 8% 12%, rgba(241, 97, 209, 0.5), transparent 65%), radial-gradient(70rem 46rem at 95% 30%, rgba(94, 226, 242, 0.55), transparent 65%), radial-gradient(46rem 34rem at 60% 85%, rgba(40, 5, 120, 0.18), transparent 70%), var(--blue-200);
}
.module-feature-cards .container {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
}
.module-feature-cards .featured-title {
  text-align: center;
}
.module-feature-cards .feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}
.module-feature-cards .feature-card {
  background: #fff;
  border-radius: 8px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.module-feature-cards .feature-icon img {
  width: 24px;
  height: auto;
}
.module-feature-cards .feature-title {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 32px; /* client feedback: too small/inconsistent across the 3 cards (was 27px) */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--purple-500);
}
.module-feature-cards .feature-body {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--grey-600);
}
@media (max-width: 1100px) {
  .module-feature-cards .feature-cards {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}
.module-feature-cards {
  /* mobile sizes: section title falls back to the global .h1 mobile
     size (42px); card type steps down per the mobile tokens */
}
@media (max-width: 768px) {
  .module-feature-cards .feature-title {
    font-size: 24px; /* heading (mobile)/h3 */
  }
  .module-feature-cards .feature-body {
    font-size: 17px; /* heading (mobile)/h5 */
  }
}

.module-media-text {
  overflow: hidden;
  background: radial-gradient(56rem 40rem at 20% 90%, rgba(82, 168, 242, 0.5), transparent 70%), radial-gradient(60rem 40rem at 90% 10%, rgba(94, 226, 242, 0.45), transparent 65%), radial-gradient(46rem 34rem at 55% 40%, rgba(40, 5, 120, 0.15), transparent 70%), var(--blue-200);
}
.module-media-text .container {
  max-width: 1328px;
}
.module-media-text {
  /* dropped 60px lower per the Figma (120px top vs the default 60px) */
}
.module-media-text .mt-inner {
  display: grid;
  grid-template-columns: minmax(0, 609px) minmax(0, 666px);
  align-items: center;
  padding: 120px 0 140px;
}
.module-media-text .mt-photo {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 609/501;
  box-shadow: 0 24px 64px rgba(40, 5, 120, 0.25);
  background: linear-gradient(140deg, var(--purple-500), var(--blue-400));
  /* once revealed, the transform becomes the JS-driven scroll
     parallax offset (--plx); transition drops to opacity only so
     the offset tracks the scroll crisply */
}
.module-media-text .mt-photo.is-visible {
  transition: opacity 0.7s ease;
  transform: translateY(var(--plx, 0px));
}
.module-media-text .mt-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.module-media-text .mt-card {
  background: #fff;
  border-radius: 8px;
  padding: 60px 60px 60px 120px;
  margin-left: -60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* same scroll-parallax handoff as .mt-photo, slower for depth */
}
.module-media-text .mt-card.is-visible {
  transition: opacity 0.7s ease;
  transform: translateY(var(--plx-card, 0px));
}
.module-media-text {
  /* the flex gap (24px) is right for heading-to-body and body-to-CTAs,
     but too loose right under the eyebrow; -8px brings that one gap down
     to 16px without touching the others (BugHerd 19) */
}
.module-media-text .mt-card .h2 {
  margin-top: -8px;
}
.module-media-text .mt-ctas {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .module-media-text .mt-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 100px;
  }
  .module-media-text .mt-photo {
    max-width: 609px;
    margin: 0 auto;
    width: 100%;
  }
  .module-media-text .mt-card {
    margin: -40px 16px 0;
    padding: 48px 40px;
  }
}
.module-media-text {
  /* mobile design: image and card stack with a clean 16px gap (no
     overlap), CTAs stretch full width */
}
@media (max-width: 768px) {
  .module-media-text .mt-inner {
    padding: 40px 0 80px;
  }
  .module-media-text .mt-photo {
    border-radius: 12px;
  }
  .module-media-text .mt-card {
    margin: 16px 0 0;
    padding: 40px;
  }
  .module-media-text .mt-ctas {
    width: 100%;
  }
  .module-media-text .mt-ctas .btn {
    width: 100%;
  }
}

.module-testimonials {
  background: var(--cyan-100);
  padding: 80px 0;
}
.module-testimonials .container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.module-testimonials .h2 {
  text-align: center;
}
.module-testimonials .testimonial-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}
.module-testimonials .testimonial-card {
  background: #fff;
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.module-testimonials .testimonial-card blockquote {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--blue-600);
  flex: 1;
  /* editor-bolded highlight renders in brand blue */
}
.module-testimonials .testimonial-card blockquote strong,
.module-testimonials .testimonial-card blockquote b {
  font-weight: 700;
  color: var(--blue-400);
}
.module-testimonials .testimonial-card .rule {
  width: 40px;
  height: 1.5px;
  background: var(--blue-300);
}
.module-testimonials .t-name {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--blue-600);
}
.module-testimonials .t-role {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin-top: 8px;
}
.module-testimonials .t-logo {
  margin-top: 18px;
  height: 34px;
  width: auto;
  max-width: 160px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}
@media (max-width: 1100px) {
  .module-testimonials .testimonial-cards {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .module-testimonials .testimonial-card {
    padding: 24px;
  }
  .module-testimonials .testimonial-card blockquote {
    font-size: 20px; /* heading (mobile)/h4 */
    line-height: 1.25;
  }
}

.module-cta-form {
  overflow: hidden;
  padding: 120px 24px 160px;
  /* Figma "Footer background" image. On desktop the site footer overlays
     the bottom of this section (grid overlay in base/_base.scss), so this
     one element paints the background for both — the 100%/100% size keeps
     the image bottom pinned to the footer bottom exactly as designed. */
  background: url("../images/bg-footer.webp") top center/cover no-repeat, var(--cyan-200);
}
@media (min-width: 1101px) {
  .module-cta-form {
    /* near-1:1 with the Figma canvas here, so stretching pins the image
       bottom to the footer bottom without the crop `cover` would add */
    background-size: 100% 100%;
    background-position: center;
    /* reserves the space the footer overlays (Figma: 371px from form
       bottom to page bottom) */
    padding-bottom: 370px;
  }
}
.module-cta-form .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}
.module-cta-form .cf-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 48px; /* Figma: Frame 12 gap-[48px] (updated 2026-07-22) */
}
.module-cta-form {
  /* exact Figma metrics, restated locally so nothing overrides them */
}
.module-cta-form .cf-head .h1 {
  font-size: clamp(40px, 5.42vw, 78px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.module-cta-form .cf-sub {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--grey-600);
}
.module-cta-form .form-card {
  background: #fff;
  border-radius: 8px;
  padding: 40px;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  box-shadow: 0 24px 64px rgba(40, 5, 120, 0.2);
}
.module-cta-form .form-title {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--blue-600);
}
.module-cta-form {
  /* Gravity Forms — match the Figma form card */
}
.module-cta-form .gform_wrapper {
  width: 100%;
}
.module-cta-form .gform_wrapper form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
.module-cta-form .gform_wrapper {
  /* the card supplies its own heading (.form-title); GF's heading block
     only ever holds the emptied required legend */
}
.module-cta-form .gform_wrapper .gform_heading {
  display: none;
}
.module-cta-form .gform_wrapper .gform_fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  list-style: none;
  width: 100%;
}
.module-cta-form .gform_wrapper .gfield {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.module-cta-form .gform_wrapper .gfield.gfield--width-half {
  flex: 1 1 calc(50% - 12px);
  min-width: 200px;
}
.module-cta-form .gform_wrapper .gfield_label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin: 0;
  padding: 0;
}
.module-cta-form .gform_wrapper .gfield_required {
  color: var(--grey-400);
}
.module-cta-form .gform_wrapper {
  /* checkbox fields render as <fieldset><legend>...</legend> instead
     of <div><label>; strip the browser's default fieldset chrome so
     it matches the rest of the form */
}
.module-cta-form .gform_wrapper fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.module-cta-form .gform_wrapper {
  /* consent checkbox: more air around the box + label (BugHerd #51) */
}
.module-cta-form .gform_wrapper .gfield--type-checkbox {
  gap: 12px;
  padding-top: 8px;
}
.module-cta-form .gform_wrapper .gfield--type-checkbox .gfield_label {
  margin-bottom: 4px;
}
.module-cta-form .gform_wrapper .gfield_checkbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.module-cta-form .gform_wrapper .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.module-cta-form .gform_wrapper .gfield-choice-input {
  margin-top: 2px;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--blue-400);
}
.module-cta-form .gform_wrapper .gchoice label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey-600);
  padding-top: 1px;
}
.module-cta-form .gform_wrapper .gchoice label a {
  color: var(--blue-400);
}
.module-cta-form .gform_wrapper input[type=text],
.module-cta-form .gform_wrapper input[type=email],
.module-cta-form .gform_wrapper input[type=tel],
.module-cta-form .gform_wrapper textarea {
  background: var(--grey-200);
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--grey-600);
  width: 100%;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.05);
  transition: border-color 0.2s ease;
}
.module-cta-form .gform_wrapper input[type=text]::-moz-placeholder, .module-cta-form .gform_wrapper input[type=email]::-moz-placeholder, .module-cta-form .gform_wrapper input[type=tel]::-moz-placeholder, .module-cta-form .gform_wrapper textarea::-moz-placeholder {
  color: var(--grey-400);
}
.module-cta-form .gform_wrapper input[type=text]::placeholder,
.module-cta-form .gform_wrapper input[type=email]::placeholder,
.module-cta-form .gform_wrapper input[type=tel]::placeholder,
.module-cta-form .gform_wrapper textarea::placeholder {
  color: var(--grey-400);
}
.module-cta-form .gform_wrapper input[type=text]:focus,
.module-cta-form .gform_wrapper input[type=email]:focus,
.module-cta-form .gform_wrapper input[type=tel]:focus,
.module-cta-form .gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--blue-500);
}
.module-cta-form .gform_wrapper .gform_footer {
  display: flex;
  justify-content: center;
}
.module-cta-form .gform_wrapper {
  /* submit renders as <button class="btn btn-dark-outline"> via the
     gform_submit_button filter, inheriting the shared pill + rising
     circle hover from base/_buttons.scss */
  /* invalid fields: highlight only — the summary and legend are removed
     server-side (includes/gravityforms.php), the per-field message is
     kept off-screen for screen readers */
}
.module-cta-form .gform_wrapper .gfield_error .gfield_label {
  color: #d92c20;
}
.module-cta-form .gform_wrapper .gfield_error input[type=text],
.module-cta-form .gform_wrapper .gfield_error input[type=email],
.module-cta-form .gform_wrapper .gfield_error input[type=tel],
.module-cta-form .gform_wrapper .gfield_error textarea {
  border-color: #d92c20;
}
.module-cta-form .gform_wrapper .gfield_validation_message,
.module-cta-form .gform_wrapper .validation_message {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .module-cta-form {
    padding: 80px 16px 120px;
  }
  .module-cta-form .cf-head {
    gap: 24px;
  }
  .module-cta-form .cf-head .h1 {
    font-size: 42px; /* heading (mobile)/h1 */
  }
  .module-cta-form .cf-sub {
    font-size: 20px; /* heading (mobile)/h4 */
    line-height: 1.25;
  }
  .module-cta-form .cf-sub br {
    display: none;
  }
  .module-cta-form .form-card {
    padding: 40px 24px;
  }
  .module-cta-form {
    /* First/Last Name stay side-by-side on mobile per the Figma form
       card (125.5px columns in a 267px row) — the desktop 200px floor
       is wider than the whole mobile field row, so it forced a stack.
       Selector must match .gfield.gfield--width-half's specificity
       (that compound, not just .gfield--width-half) or the 200px rule
       above wins regardless of media query. */
  }
  .module-cta-form .gform_wrapper .gfield.gfield--width-half {
    min-width: 0;
  }
  .module-cta-form {
    /* full-width submit, per the mobile form card */
  }
  .module-cta-form .gform_wrapper .gform_footer {
    width: 100%;
  }
  .module-cta-form .gform_wrapper .gform_footer .btn,
  .module-cta-form .gform_wrapper .gform_footer button {
    width: 100%;
  }
}

/* long-form prose card on the hero gradient (Terms of Use etc.) */
.module-rich-text {
  padding: 220px 24px 100px;
  /* like .module-cta-form, the footer overlays this section's bottom on
     desktop (grid overlay in base/_base.scss), so reserve its height */
}
@media (min-width: 1101px) {
  .module-rich-text {
    padding-bottom: 326px;
  }
}
.module-rich-text .rt-card {
  background: #fff;
  border-radius: 8px;
  max-width: 888px;
  margin: 0 auto;
  padding: 40px;
  box-shadow: 0 24px 64px rgba(4, 19, 66, 0.25);
}
.module-rich-text .rt-title {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--blue-600);
}
.module-rich-text .rt-meta {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--grey-400);
  margin-top: 32px;
}
.module-rich-text .rt-body {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--grey-600);
}
.module-rich-text .rt-body h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--blue-600);
  margin: 32px 0 12px;
}
.module-rich-text .rt-body h2:first-child {
  margin-top: 0;
}
.module-rich-text .rt-body p {
  margin: 0 0 16px;
}
.module-rich-text .rt-body ul,
.module-rich-text .rt-body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}
.module-rich-text .rt-body ul li,
.module-rich-text .rt-body ol li {
  margin-bottom: 8px;
}
.module-rich-text .rt-body a {
  color: var(--blue-400);
}
.module-rich-text .rt-body strong {
  color: var(--blue-600);
}
@media (max-width: 768px) {
  .module-rich-text {
    padding: 220px 16px 80px;
  }
  .module-rich-text .rt-card {
    padding: 32px 24px;
  }
  .module-rich-text .rt-title {
    font-size: 28px;
  }
}

/*# sourceMappingURL=main.min.css.map*/