/* Scoped to dashboard imagery: existing landing-page theme is unchanged. */
.page-product .spread-art.practice-card-carousel{position:relative;aspect-ratio:1;min-width:0;padding:0;background:transparent;border:0;overflow:visible}
.page-product .practice-card-carousel .landing-card-stage{height:100%;min-height:0}
.page-product .spread-art.practice-card-carousel[data-animated-cards="dashas"] .landing-device{width:52%;left:24%;height:auto;top:12%;padding:10px}
.page-product .practice-card-carousel .landing-device img{height:auto;flex:none}
.page-product .practice-card-carousel .landing-device figcaption{font-size:12px}
:is(.page-about,.page-teams) :is(.about-chart-carousel,.teams-chart-carousel){position:relative;aspect-ratio:1;min-width:0;padding:0}
:is(.page-about,.page-teams) :is(.about-chart-carousel,.teams-chart-carousel) .landing-card-stage{height:100%;min-height:0}
:is(.page-about,.page-teams) :is(.about-chart-carousel,.teams-chart-carousel) .landing-device{height:auto;top:12%;padding:10px}
:is(.page-about,.page-teams) :is(.about-chart-carousel,.teams-chart-carousel) .landing-device img{height:auto;flex:none}
:is(.page-about,.page-teams) :is(.about-chart-carousel,.teams-chart-carousel) .landing-device figcaption{font-size:12px}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-card-showcase {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 40%, #fffef1, #edf4e8);
  overflow: hidden;
  --landing-card-height: 270px;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-card-stage {
  height: var(--landing-card-height);
  position: relative;
  perspective: 900px;
  transform-style: preserve-3d;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-hero-showcase {
  background: transparent;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-hero-showcase .landing-card-stage {
  height: 100%;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-hero-showcase .landing-device {
  padding: 12px;
  border-radius: 20px;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-hero-showcase .landing-device figcaption {
  font-size: 12px;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-device {
  position: absolute;
  left: 20%;
  top: 11%;
  width: 60%;
  height: 79%;
  margin: 0;
  padding: 8px;
  background: linear-gradient(135deg, #fff, #e8ede3);
  border: 1px solid #fff;
  border-radius: 13px;
  box-shadow: 0 15px 25px -15px #30452788;
  display: flex;
  flex-direction: column;
  transition:
    transform 450ms cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 300ms ease;
  overflow: hidden;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-device img {
  position: static;
  display: block;
  width: 100%;
  height: 0;
  min-height: 0;
  flex: 1;
  object-fit: contain;
  object-position: center;
  transform: none;
  background: #fffef4;
  border-radius: 5px;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-device figcaption {
  flex: none;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  color: #344d2d;
  padding: 7px 1px 0;
  text-align: left;
}
/* Fit the hero frame to each real capture, not a fixed portrait letterbox. */
:is(.page-index,.page-about,.page-teams,.page-product) .landing-hero-showcase .landing-device {
  height: auto;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-hero-showcase .landing-device img {
  height: auto;
  flex: none;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-device[data-position="front"] {
  transform: translate3d(0, 0, 45px) rotateY(-5deg);
  z-index: 3;
  opacity: 1;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-device[data-position="left"] {
  transform: translate3d(-47%, 12%, -70px) rotateY(24deg) rotateZ(-8deg)
    scale(0.83);
  z-index: 1;
  opacity: 0.83;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-device[data-position="right"] {
  transform: translate3d(47%, 5%, -70px) rotateY(-24deg) rotateZ(8deg)
    scale(0.83);
  z-index: 1;
  opacity: 0.83;
}
:is(.page-teams,.page-about) :is(.teams-chart-carousel,.about-chart-carousel) {
  background: transparent;
  border: 0;
  overflow: visible;
}
:is(.page-teams,.page-about) :is(.teams-chart-carousel,.about-chart-carousel) .landing-device {
  width: 52%;
  left: 24%;
}
:is(.page-index,.page-about,.page-teams,.page-product)
  .landing-card-showcase[data-animated-cards="dashas"]
  .landing-device {
  width: 52%;
  left: 24%;
  height: 84%;
  top: 6%;
}
:is(.page-index,.page-about,.page-teams,.page-product)
  .landing-card-showcase[data-animated-cards="dashas"]
  .landing-device[data-position="front"] {
  transform: translate3d(0, 0, 45px) rotateZ(-3deg);
}
:is(.page-index,.page-about,.page-teams,.page-product)
  .landing-card-showcase[data-animated-cards="kp"]
  .landing-device[data-position="front"] {
  transform: translate3d(0, 0, 45px) rotateY(8deg) rotateZ(2deg);
}
/* Feature cards: size each frame to its capture and centre it in the stage,
   instead of letterboxing landscape and square captures into a portrait box. */
:is(.page-index,.page-about,.page-teams,.page-product) .why-card-image.landing-card-showcase .landing-device {
  top: 50%;
  height: auto;
}
:is(.page-index,.page-about,.page-teams,.page-product) .why-card-image.landing-card-showcase .landing-device img {
  height: auto;
  max-height: calc(var(--landing-card-height) - 64px);
  flex: none;
}
:is(.page-index,.page-about,.page-teams,.page-product)
  .why-card-image.landing-card-showcase
  .landing-device[data-shape="wide"] {
  width: 88%;
  left: 6%;
}
:is(.page-index,.page-about,.page-teams,.page-product)
  .why-card-image.landing-card-showcase
  .landing-device[data-position="front"] {
  transform: translate3d(0, -50%, 45px) rotateY(-5deg);
}
:is(.page-index,.page-about,.page-teams,.page-product)
  .why-card-image.landing-card-showcase
  .landing-device[data-position="left"] {
  transform: translate3d(-47%, -38%, -70px) rotateY(24deg) rotateZ(-8deg)
    scale(0.83);
}
:is(.page-index,.page-about,.page-teams,.page-product)
  .why-card-image.landing-card-showcase
  .landing-device[data-position="right"] {
  transform: translate3d(47%, -45%, -70px) rotateY(-24deg) rotateZ(8deg)
    scale(0.83);
}
:is(.page-index,.page-about,.page-teams,.page-product)
  .why-card-image.landing-card-showcase[data-animated-cards="dashas"]
  .landing-device[data-position="front"] {
  transform: translate3d(0, -50%, 45px) rotateZ(-3deg);
}
:is(.page-index,.page-about,.page-teams,.page-product)
  .why-card-image.landing-card-showcase[data-animated-cards="kp"]
  .landing-device[data-position="front"] {
  transform: translate3d(0, -50%, 45px) rotateY(8deg) rotateZ(2deg);
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-card-controls {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 8px 5px;
  min-height: 44px;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-card-controls button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #365b2c;
  cursor: pointer;
  font: 700 14px/1 sans-serif;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-card-controls button:not(.landing-card-playback)::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b4c5a7;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-card-controls button[aria-pressed="true"]::after {
  background: #287b25;
  width: 19px;
  border-radius: 5px;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-card-controls button:focus-visible {
  outline: 3px solid #287b25;
  outline-offset: -4px;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-card-controls button:disabled {
  opacity: 0.4;
  cursor: default;
}
:is(.page-index,.page-about,.page-teams,.page-product) .why-card-image.landing-card-showcase {
  aspect-ratio: auto;
  height: auto;
}
:is(.page-index,.page-about,.page-teams,.page-product) .desk-showcase {
  background: #37291c url("../img/desk-cosmic-background-1600.webp") center / cover no-repeat;
}
:is(.page-index,.page-about,.page-teams,.page-product) .desk-showcase .landing-desk-showcase {
  position: absolute;
  left: 49%;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  --landing-card-height: 450px;
  z-index: 0;
}
:is(.page-index,.page-about,.page-teams,.page-product) .desk-content-card {
  position: relative;
  z-index: 1;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-desk-showcase .landing-device figcaption {
  font-size: 12px;
  padding-top: 12px;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-desk-showcase .landing-device {
  padding: 12px;
  border-radius: 20px;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-desk-showcase .landing-device[data-position="front"] {
  width: 68%;
  left: 16%;
  height: 79%;
}
:is(.page-index,.page-about,.page-teams,.page-product) .landing-desk-showcase .landing-card-controls {
  margin-top: 12px;
}
@media (max-width: 1100px) and (min-width: 761px) {
  :is(.page-index,.page-about,.page-teams,.page-product) .desk-showcase .landing-desk-showcase {
    left: 54%;
    --landing-card-height: 380px;
  }
  :is(.page-index,.page-about,.page-teams,.page-product) .why-card-image.landing-card-showcase {
    --landing-card-height: 225px;
  }
}
@media (max-width: 760px) {
  :is(.page-index,.page-about,.page-teams,.page-product) .desk-showcase {
    background-image: url("../img/desk-cosmic-background-960.webp");
  }
  :is(.page-index,.page-about,.page-teams,.page-product) .why-card-image.landing-card-showcase {
    --landing-card-height: 290px;
  }
  :is(.page-index,.page-about,.page-teams,.page-product) .desk-showcase .landing-desk-showcase {
    position: relative;
    inset: auto;
    order: -1;
    min-height: 350px;
    margin: -12px -12px 12px;
    --landing-card-height: 310px;
  }
  :is(.page-index,.page-about,.page-teams,.page-product) .landing-device figcaption {
    font-size: 10px;
  }
  :is(.page-index,.page-about,.page-teams,.page-product) .landing-desk-showcase .landing-device figcaption {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.page-index,.page-about,.page-teams,.page-product) .landing-device {
    transition: none;
  }
}