@charset "UTF-8";
@keyframes bounce {
  0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  80% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0.5;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes backgroundShimmer {
  0% {
    background-position: -668px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
/* --------------------------------------------------
   Hero juggler illustration
   -------------------------------------------------- */
.aio-hero {
  overflow: visible;
  position: relative;
  background-image: url("/img/product-pages/all-in-one/all-in-one-bg.png");
  background-repeat: no-repeat;
  background-size: 584px auto;
  background-position: calc(50% + 340px) bottom;
}

.aio-hero-img-col {
  position: relative;
  z-index: 1000;
}
.aio-hero-img-col.is-scrolled, .aio-hero-img-col.nav-open {
  z-index: 10;
}

.aio-hero-juggler,
.aio-hero-juggler * {
  pointer-events: none;
}

.aio-hero-juggler {
  position: absolute;
  bottom: -2rem;
  right: 0;
  height: calc(100% + 4rem);
  width: auto;
  max-width: none;
}
.aio-hero-juggler picture,
.aio-hero-juggler img {
  height: 100%;
  width: auto;
  object-position: bottom center;
}

@media (max-width: 991px) {
  .aio-hero {
    padding-bottom: 380px;
    background-position: center bottom;
  }
  .aio-hero-img-col {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    height: auto;
  }
  .aio-hero-juggler {
    position: relative;
    height: 400px;
  }
}
/* --------------------------------------------------
   All-in-one workspace tab switcher
   -------------------------------------------------- */
.aio-tab {
  min-width: 0;
  text-align: left;
  cursor: pointer;
  border: 1px solid #dee4eb;
  border-radius: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--body-bg);
  opacity: 0.5;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.aio-tab[aria-selected=true] {
  opacity: 1;
  box-shadow: 0.5rem 0.75rem 1.875rem rgba(0, 15, 50, 0.1);
  border-color: transparent;
}

[data-aio-panel][aria-hidden=true] {
  display: none;
}
[data-aio-panel][aria-hidden=false] {
  display: block;
}
[data-aio-panel] figure {
  width: 106.6666666667vh;
  max-width: 100%;
  margin: 0 auto;
}
[data-aio-panel] figure picture,
[data-aio-panel] figure img {
  width: 100%;
  height: auto;
  max-height: 60vh;
}

/* --------------------------------------------------
   Problem section — icon squircle containers
   -------------------------------------------------- */
.aio-problem-icon {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: #4a5a6a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aio-problem-icon .icon {
  --icon-size: 2rem;
}

/* --------------------------------------------------
   "Built for everyone" — floating cursors + product node
   -------------------------------------------------- */
.aio-cursors-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  min-height: 300px;
  overflow: hidden;
}
@media (max-width: 991px) {
  .aio-cursors-wrap {
    aspect-ratio: 2/1;
    min-height: 0;
  }
}

.aio-cursor {
  position: absolute;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  will-change: transform;
}
.aio-cursor svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.7)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.15));
}

.aio-cursor-name {
  display: inline-block;
  padding: 3px 10px 4px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  margin-top: 14px;
  margin-left: -7px;
  line-height: 1.4;
}

.aio-cursor-1 {
  color: #1071f2;
  top: 8%;
  left: 5%;
  animation: aioCursor1 11s ease-in-out infinite;
}
.aio-cursor-1 .aio-cursor-name {
  background: #1071f2;
}

.aio-cursor-2 {
  color: #f45f20;
  top: 5%;
  left: 58%;
  animation: aioCursor2 13s ease-in-out infinite;
  animation-delay: -4s;
}
.aio-cursor-2 .aio-cursor-name {
  background: #f45f20;
}

.aio-cursor-3 {
  color: #7656f3;
  top: 68%;
  left: 4%;
  animation: aioCursor3 10s ease-in-out infinite;
  animation-delay: -7s;
}
.aio-cursor-3 .aio-cursor-name {
  background: #7656f3;
}

.aio-cursor-4 {
  color: #fcc223;
  top: 72%;
  left: 60%;
  animation: aioCursor4 12s ease-in-out infinite;
  animation-delay: -2s;
}
.aio-cursor-4 .aio-cursor-name {
  background: #fcc223;
  color: #22272f;
}

@keyframes aioCursor1 {
  0%, 100% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(28px, 20px);
  }
  65% {
    transform: translate(45px, -8px);
  }
}
@keyframes aioCursor2 {
  0%, 100% {
    transform: translate(0, 0);
  }
  35% {
    transform: translate(-35px, 22px);
  }
  70% {
    transform: translate(-15px, 48px);
  }
}
@keyframes aioCursor3 {
  0%, 100% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(32px, -24px);
  }
  65% {
    transform: translate(55px, -10px);
  }
}
@keyframes aioCursor4 {
  0%, 100% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(-25px, -35px);
  }
  75% {
    transform: translate(-50px, -15px);
  }
}
/* Central product node */
.aio-product-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(85%, 440px);
  height: min(85%, 440px);
}
.aio-product-node .aio-node-line {
  stroke: var(--body-color);
  stroke-width: 1;
  opacity: 0.18;
}

/* --------------------------------------------------
   Tablet: 2×2 tab grid, panels all at row 3
   -------------------------------------------------- */
@media (min-width: 768px) and (max-width: 959px) {
  .aio-switcher {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .aio-item {
    display: contents;
  }
  .aio-item:nth-child(1) .aio-tab {
    grid-column: 1;
    grid-row: 1;
  }
  .aio-item:nth-child(2) .aio-tab {
    grid-column: 2;
    grid-row: 1;
  }
  .aio-item:nth-child(3) .aio-tab {
    grid-column: 1;
    grid-row: 2;
  }
  .aio-item:nth-child(4) .aio-tab {
    grid-column: 2;
    grid-row: 2;
  }
  .aio-tab:hover {
    opacity: 0.75;
  }
  [data-aio-panel] {
    grid-row: 3;
    grid-column: 1/-1;
    margin-top: 0.75rem;
  }
}
/* --------------------------------------------------
   Desktop: grid splits tabs (row 1) from panels (row 2)
   display:contents on .aio-item lets children
   participate directly in the parent grid
   -------------------------------------------------- */
@media (min-width: 960px) {
  .aio-switcher {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
  }
  .aio-item {
    display: contents;
  }
  .aio-tab {
    grid-row: 1;
  }
  .aio-tab:hover {
    opacity: 0.75;
  }
  [data-aio-panel] {
    grid-row: 2;
    grid-column: 1/-1;
    margin-top: 0.75rem;
  }
}
/* --------------------------------------------------
   Mobile: natural stacked pairs, no hover, no autoplay
   -------------------------------------------------- */
@media (max-width: 767px) {
  .aio-tab {
    display: block;
    width: 100%;
    border: none;
    padding: 0.5rem 0;
    opacity: 1;
    cursor: default;
    pointer-events: none;
    margin-bottom: 0.5rem;
  }
  .aio-tab[aria-selected=true] {
    box-shadow: none;
    background: transparent;
  }
  [data-aio-panel] {
    display: block !important;
    margin-bottom: 1.5rem;
  }
  [data-aio-panel] .image {
    --img-box-shadow: none;
  }
}
/* --------------------------------------------------
   Replace the stack — hub-and-spoke layout
   -------------------------------------------------- */
.replace-hub {
  position: relative;
  width: 100%;
  aspect-ratio: 2.4/1;
  min-height: 260px;
  margin-bottom: -2rem;
}

.replace-hub-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.replace-hub-lines line {
  stroke: #c9d3dd;
  stroke-width: 3;
  stroke-dasharray: 5 7;
  vector-effect: non-scaling-stroke;
}

.replace-card {
  position: absolute;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  min-width: 9rem;
  max-width: 12rem;
  z-index: 1;
  box-shadow: 0 0.125rem 0.25rem rgba(34, 39, 47, 0.05), 0 0.375rem 0.5rem rgba(34, 39, 47, 0.07);
}
.replace-card::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.replace-card .h3 {
  color: inherit;
}

.replace-card-tl {
  top: 3%;
  left: 3%;
  transform: rotate(-4deg);
  background: #874fff;
  color: #fff;
}
.replace-card-tl::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath transform='translate(0%2C1.5)' d='M88 6 Q62 38 12 94' fill='none' stroke='%2322272f' stroke-opacity='.25' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M88 6 Q62 38 12 94' fill='none' stroke='%2322272f' stroke-opacity='.7' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.replace-card-tr {
  top: 0;
  right: 3%;
  transform: rotate(3deg);
  background: #ffd02f;
  color: #050038;
}
.replace-card-tr::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath transform='translate(0%2C1.5)' d='M88 6 Q38 60 12 94' fill='none' stroke='%2322272f' stroke-opacity='.25' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M88 6 Q38 60 12 94' fill='none' stroke='%2322272f' stroke-opacity='.7' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.replace-card-bl {
  bottom: 5%;
  left: 5%;
  transform: rotate(3deg);
  background: #eb5a00;
  color: #fff;
}
.replace-card-bl::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath transform='translate(0%2C1.5)' d='M88 6 Q58 36 12 94' fill='none' stroke='%2322272f' stroke-opacity='.25' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M88 6 Q58 36 12 94' fill='none' stroke='%2322272f' stroke-opacity='.7' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.replace-card-br {
  bottom: 0;
  right: 4%;
  transform: rotate(-5deg);
  background: rgb(174, 28, 89);
  color: #fff;
}
.replace-card-br::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath transform='translate(0%2C1.5)' d='M88 6 Q42 64 12 94' fill='none' stroke='%2322272f' stroke-opacity='.25' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M88 6 Q42 64 12 94' fill='none' stroke='%2322272f' stroke-opacity='.7' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.replace-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.replace-center .icon {
  --icon-size: 7rem;
  background: var(--body-bg);
  box-shadow: 0 0 5rem var(--body-bg);
}

@media (max-width: 767px) {
  .replace-hub {
    width: 114%;
    margin-left: -7%;
    transform: scale(0.88);
    transform-origin: top center;
    margin-bottom: -2rem;
  }
  .replace-card-tl {
    left: 0;
    top: 0;
  }
  .replace-card-tr {
    right: 0;
    top: 0;
  }
  .replace-card-bl {
    left: 0;
    bottom: 0;
  }
  .replace-card-br {
    right: 0;
    bottom: 0;
  }
}
/* --------------------------------------------------
   Savings footnote trigger & breakdown popover
   -------------------------------------------------- */
.aio-footnote-btn {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: underline dotted;
}
.aio-footnote-btn:hover, .aio-footnote-btn:focus-visible {
  color: inherit;
  outline: none;
}

.aio-savings-breakdown {
  min-width: 18rem;
  font-size: 0.875rem;
}
.aio-savings-breakdown table {
  width: 100%;
  border-collapse: collapse;
}
.aio-savings-breakdown table th,
.aio-savings-breakdown table td {
  font-size: 0.875rem;
  font-weight: normal;
  padding: 0.35rem 0.5rem 0.35rem 0;
  text-align: left;
  border: none;
}
.aio-savings-breakdown table th:last-child,
.aio-savings-breakdown table td:last-child {
  text-align: right;
}
.aio-savings-breakdown table thead th {
  color: #677d92;
  border-bottom: 1px dotted #9fafc1;
}
.aio-savings-breakdown table tbody tr + tr td,
.aio-savings-breakdown table tfoot tr td {
  border-top: 1px dotted #9fafc1;
}
.aio-savings-breakdown .aio-breakdown-note {
  font-size: 0.875rem;
  color: #677d92;
  margin: 0.5rem 0 0;
}

/* --------------------------------------------------
   Solution cards — image clipped bottom-right
   -------------------------------------------------- */
.aio-solution-card {
  overflow: hidden;
  position: relative;
  padding-bottom: 11rem;
}
@media (min-width: 767px) {
  .aio-solution-card {
    padding-bottom: 12rem;
  }
}
@media (min-width: 991px) {
  .aio-solution-card {
    padding-bottom: 13rem;
  }
}
@media (min-width: 1199px) {
  .aio-solution-card {
    padding-bottom: 14rem;
  }
}
.aio-solution-card .image {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-height: 11rem;
  overflow: hidden;
  margin: 0;
}
.aio-solution-card .image picture,
.aio-solution-card .image img {
  background: none;
  object-position: bottom center;
  border-radius: 0;
}
@media (min-width: 767px) {
  .aio-solution-card .image {
    left: auto;
    transform: none;
    right: 0;
    max-height: 12rem;
  }
  .aio-solution-card .image picture {
    width: 100%;
  }
  .aio-solution-card .image picture,
  .aio-solution-card .image img {
    object-position: bottom right;
  }
}
@media (min-width: 991px) {
  .aio-solution-card .image {
    max-height: 13rem;
  }
}
@media (min-width: 1199px) {
  .aio-solution-card .image {
    max-height: 15rem;
  }
}