:root {
  --leama-mint: #8fffd2;
  --leama-mint-rgb: 143, 255, 210;
}

/* Match the established Agent hero CTA, including its direct mint glow. */
section[data-prospactive-name="hero"] .prospactive-tbcype-container {
  width: max-content !important;
  height: 58px !important;
}

section[data-prospactive-name="hero"] .prospactive-tbcype-container > :is(a, button) {
  position: relative !important;
  z-index: 1 !important;
  width: max-content !important;
  min-width: max-content !important;
  min-height: 58px !important;
  overflow: hidden !important;
  padding: 16px 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #151515 !important;
  color: #fff !important;
  font-family: Geist, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  white-space: nowrap !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

section[data-prospactive-name="hero"] .prospactive-tbcype-container > :is(a, button)::before {
  position: absolute;
  z-index: 1;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(3, 31, 20, 0.78) 0%, rgba(8, 52, 34, 0.66) 48%, rgba(45, 168, 116, 0.48) 76%, rgba(var(--leama-mint-rgb), 0.9) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--leama-mint-rgb), 0.38), inset 0 0 24px rgba(92, 255, 188, 0.42);
  content: "";
  opacity: 0.42;
  pointer-events: none;
  transform: scale(0.985);
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), filter 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

section[data-prospactive-name="hero"] .prospactive-tbcype-container > :is(a, button) > :last-child {
  position: relative !important;
  z-index: 2 !important;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3) !important;
}

section[data-prospactive-name="hero"] .prospactive-tbcype-container > :is(a, button):is(:hover, :focus-visible) {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 16px 38px -12px rgba(0, 0, 0, 0.65) !important;
}

section[data-prospactive-name="hero"] .prospactive-tbcype-container > :is(a, button):is(:hover, :focus-visible)::before {
  filter: saturate(1.12) brightness(1.08);
  opacity: 0.84;
  transform: scale(1);
}

/* Keep the product animation stable and proportional without adding video chrome. */
section[data-prospactive-name="hero"] [data-prospactive-name="visual"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

section[data-prospactive-name="hero"] .leama-product-hero-frame {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

section[data-prospactive-name="hero"] .leama-product-hero-frame::after {
  content: none !important;
}

.leama-product-hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent url("/brand/leama-product-hero-poster.webp") center / contain no-repeat;
  box-shadow: none;
}

.leama-product-hero[data-state="loading"],
.leama-product-hero[data-state="playing"] {
  background-image: none;
}

.leama-product-hero__animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.leama-product-hero[data-state="playing"] .leama-product-hero__animation {
  opacity: 1;
  pointer-events: auto;
}

.leama-product-hero__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(11, 11, 11, 0.08);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
  color: #0b0b0b;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.leama-product-hero__play:hover:not(:disabled) {
  background: #f3f3f3;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%) scale(1.03);
}

.leama-product-hero__play:focus-visible {
  outline: 3px solid #fafafa;
  outline-offset: 4px;
}

.leama-product-hero__play:disabled {
  cursor: progress;
  opacity: 0.9;
}

.leama-product-hero__play[hidden] {
  display: none;
}

.leama-product-hero__play svg {
  width: 20px;
  height: 20px;
  transform: translateX(1px);
}

.leama-product-hero__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .leama-product-hero__play {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leama-product-hero__animation,
  .leama-product-hero__play {
    transition: none;
  }
}

/* Keep the imported artwork in its original colour at every breakpoint. */
section[data-prospactive-name="benefits"] img,
section[data-prospactive-name="features"] img,
section[data-prospactive-name="problem"] img {
  filter: none !important;
  -webkit-filter: none !important;
}

/* The source applies grayscale to the feature media wrapper, not only its img. */
section[data-prospactive-name="features"] [data-prospactive-name="visual_wrapper"] {
  filter: none !important;
  -webkit-filter: none !important;
}

section[data-prospactive-name="features"] img[alt="Feature_card_background"] {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}

section[data-prospactive-name="problem"] img[src*="relevance-matters"] {
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}

/* The FAQ uses the same quiet filled surface and 4px geometry as Leama cards. */
section[data-prospactive-name="faq"] [data-prospactive-name*="faq-card"] {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.055) !important;
}

[data-leama-review-copy="agentic-qualification"] [data-prospactive-name="description"] p + p,
[data-leama-review-copy="email-campaigns"] [data-prospactive-name="description"] p + p {
  margin-top: 16px !important;
}

/* Small existing icon details and selected pointers carry the accent. */
section[data-prospactive-name="benefits"] svg[data-prospactive-name="icon"],
section[data-prospactive-name="pricing"] svg[data-prospactive-name="pointer_icon"],
section[data-prospactive-name="pricing"] svg[data-prospactive-name="pinter_icon"],
section[data-prospactive-name="testimonial"] svg[data-prospactive-name="icon"] {
  --21h8s6: var(--leama-mint) !important;
  color: var(--leama-mint) !important;
}

section[data-prospactive-name="testimonial"] [data-prospactive-name="metrics_number"] p {
  color: #fafafa !important;
}

/* Keep the complete amount and billing cadence inside the imported price row. */
section[data-prospactive-name="pricing"] [data-prospactive-name="price"] {
  width: max-content !important;
  max-width: 100%;
  overflow: visible !important;
}

/* Keep the billing cadence fixed while monthly and yearly amounts swap. */
section[data-prospactive-name="pricing"] [data-prospactive-name="price_wrapper"] {
  overflow: hidden !important;
}

section[data-prospactive-name="pricing"] [data-prospactive-name="hero-content"] > :nth-child(1) [data-prospactive-name="price_wrapper"] {
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  justify-content: flex-end !important;
}

section[data-prospactive-name="pricing"] [data-prospactive-name="hero-content"] > :nth-child(2) [data-prospactive-name="price_wrapper"] {
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  align-items: flex-end !important;
}

section[data-prospactive-name="pricing"] [data-prospactive-name="hero-content"] > :nth-child(3) [data-prospactive-name="price_wrapper"] {
  flex: 0 0 74px !important;
  width: 74px !important;
  min-width: 74px !important;
  justify-content: flex-end !important;
}

section[data-prospactive-name="testimonial"] [data-prospactive-name="head"] {
  background-color: rgba(var(--leama-mint-rgb), 0.035) !important;
}

/* The closing CTA receives mint directly from the particle shader configuration. */
[data-prospactive-name="cta_default"] .prospactive-1c06e24-container [data-prospactive-component-type="Shader"],
[data-prospactive-name="cta_default_mobile"] .prospactive-1c06e24-container [data-prospactive-component-type="Shader"] {
  isolation: isolate;
}

/* Keep every desktop navigation label at its natural width until the phone nav takes over. */
@media (min-width: 810px) {
  nav .prospactive-1idod9-container,
  nav .prospactive-l51y40-container,
  nav .prospactive-gokxiq-container,
  nav .prospactive-d47ds8-container,
  nav .prospactive-mef1ga-container,
  nav .prospactive-1mrxubb-container {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
  }

  nav .prospactive-gokxiq-container a,
  nav .prospactive-gokxiq-container p {
    width: max-content !important;
    white-space: nowrap !important;
  }
}

/* Supplied testimonial portraits must remain in colour. */
section[data-prospactive-name="social_proof_logos"] .prospactive-nmto5m {
  filter: none !important;
}

.leama-proof-logo-ticker {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.prospactive-1si0sxn-container [data-prospactive-name="logo_card_logo-only"] {
  overflow: hidden !important;
}

.prospactive-1si0sxn-container .prospactive-nmto5m {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.leama-proof-logo-track {
  display: flex;
  width: 300%;
  height: 100%;
  animation: leama-proof-logo-scroll 18s linear infinite;
  will-change: transform;
}

.leama-proof-logo-track > span {
  display: flex;
  flex: 0 0 16.6666667%;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.leama-proof-logo-track img {
  display: block;
  width: auto;
  max-width: 72%;
  height: auto;
  max-height: 54%;
  object-fit: contain;
}

@keyframes leama-proof-logo-scroll {
  from { transform: translateX(-8.3333333%); }
  to { transform: translateX(-75%); }
}

/* Equal product-ticker card geometry on every breakpoint and in both rows. */
section[data-prospactive-name="integrations"] [data-prospactive-name="ticker"] li.prospactive-q6dtxe,
section[data-prospactive-name="integrations"] [data-prospactive-name="ticker"] li.prospactive-8dl1nd {
  align-self: stretch !important;
  flex: 0 0 211px !important;
  width: 211px !important;
  height: 119px !important;
  min-height: 119px !important;
  max-height: 119px !important;
  padding: 16px !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

section[data-prospactive-name="integrations"] [data-prospactive-name="ticker"] li.prospactive-q6dtxe [data-prospactive-name="app_info"],
section[data-prospactive-name="integrations"] [data-prospactive-name="ticker"] li.prospactive-8dl1nd [data-prospactive-name="app_info"] {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

section[data-prospactive-name="integrations"] [data-prospactive-name="ticker"] [data-prospactive-name="app_name"],
section[data-prospactive-name="integrations"] [data-prospactive-name="ticker"] [data-prospactive-name="app_category"] {
  width: 100% !important;
  height: auto !important;
}

section[data-prospactive-name="integrations"] [data-prospactive-name="ticker"] [data-prospactive-name="app_name"] p,
section[data-prospactive-name="integrations"] [data-prospactive-name="ticker"] [data-prospactive-name="app_category"] p {
  max-width: none !important;
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  .leama-proof-logo-track {
    animation: none;
    transform: translateX(-8.3333333%);
  }
}
