/**
 * Pixipie marketing site — responsive logo + content type overrides.
 * Loaded after theme-thirteen.purge.css on every page.
 */

/* -------------------------------------------------------------------------- */
/* Mobile menu trigger — single-color primary 3×3 grid (hide hamburger lines)  */
/* -------------------------------------------------------------------------- */

.uc-menu-trigger::before,
.uc-menu-trigger::after {
  display: none !important;
  content: none !important;
}

.uc-menu-trigger {
  gap: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--color-primary) !important;
}

.uc-menu-trigger:hover,
.uc-menu-trigger:focus {
  color: var(--color-primary) !important;
  opacity: 0.85;
}

/* Nine filled cells — primary color only via currentColor */
.uc-menu-grid-icon {
  display: block;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 4px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 0 / 4px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 4px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 4px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 4px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 50% / 4px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 4px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 100% / 4px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 4px 4px no-repeat;
}

/* -------------------------------------------------------------------------- */
/* Sticky glass-morphism navbar                                                */
/* Transparent at top of page; frosted glass only after scroll (sticky).       */
/* Use inset shadow (not border) so sticky toggle doesn't nudge Login/menu.    */
/* -------------------------------------------------------------------------- */

header.uc-header .uc-navbar-container.uc-navbar-float:not(.uc-navbar-sticky),
.uc-navbar-container.uc-navbar-transparent:not(.uc-navbar-sticky) {
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

.uc-navbar-container.uc-navbar-sticky {
  background-color: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 0 !important;
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}

.dark .uc-navbar-container.uc-navbar-sticky,
.uc-dark .uc-navbar-container.uc-navbar-sticky,
:where(.uc-dark) .uc-navbar-container.uc-navbar-sticky {
  background-color: rgba(17, 24, 39, 0.55) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* Mobile: CSS-fixed nav (JS sticky is media:992+) — glass via .uc-navbar-sticky */
@media (max-width: 991.98px) {
  header.uc-header .uc-navbar-container.uc-navbar-float {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transition:
      background-color 0.25s ease,
      box-shadow 0.25s ease,
      backdrop-filter 0.25s ease,
      -webkit-backdrop-filter 0.25s ease;
  }

  header.uc-header .uc-navbar-main {
    --uc-nav-height: 64px !important;
  }

  header.uc-header .uc-navbar {
    min-height: 64px !important;
  }

  header.uc-header .uc-navbar-left,
  header.uc-header .uc-navbar-right,
  header.uc-header .uc-navbar [class*="uc-navbar-center"] {
    flex-wrap: nowrap !important;
  }

  header.uc-header .uc-navbar-right {
    flex-shrink: 0;
    gap: 0.75rem !important;
  }

  /* Keep Login aligned with the menu button — no baseline drift on scroll */
  header.uc-header .uc-navbar-right > a.text-none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    height: 40px;
  }

  /* Keep top nav visible under the dimmed overlay while the drawer is open */
  .uc-menu-panel {
    z-index: 10050 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Page title clearance under floating navbar (mobile / tablet)                */
/* Nav is absolute (.uc-navbar-float) ~64px tall; theme pt-8 is only 4rem,     */
/* which leaves almost no gap between the bar and the page title.              */
/* -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  #wrapper.wrap > .section:first-child > .section-outer,
  #wrapper.wrap > .hero-header:first-child > .section-outer {
    padding-top: 8.5rem !important; /* ~64px nav + ~72px breathing room */
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive data tables (privacy / policy category tables)                   */
/* Desktop: 2-column table. Mobile: stacked cards, no horizontal scroll.       */
/* -------------------------------------------------------------------------- */

.pixipie-data-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pixipie-data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
}

.pixipie-data-table th,
.pixipie-data-table td {
  vertical-align: top;
  text-align: left;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.pixipie-data-table thead th {
  font-weight: 600;
  background: rgba(15, 23, 42, 0.04);
  width: 34%;
}

.pixipie-data-table thead th:last-child {
  width: 66%;
}

.pixipie-data-table tbody th {
  font-weight: 600;
  width: 34%;
  background: rgba(15, 23, 42, 0.02);
}

.dark .pixipie-data-table th,
.dark .pixipie-data-table td {
  border-color: rgba(255, 255, 255, 0.12);
}

.dark .pixipie-data-table thead th {
  background: rgba(255, 255, 255, 0.06);
}

.dark .pixipie-data-table tbody th {
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 767.98px) {
  .pixipie-data-table-wrap {
    overflow: visible;
  }

  .pixipie-data-table,
  .pixipie-data-table thead,
  .pixipie-data-table tbody,
  .pixipie-data-table tr,
  .pixipie-data-table th,
  .pixipie-data-table td {
    display: block;
    width: 100% !important;
  }

  .pixipie-data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .pixipie-data-table tr {
    margin: 0 0 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.02);
  }

  .pixipie-data-table tbody th,
  .pixipie-data-table tbody td {
    border: 0;
    background: transparent;
    padding: 0;
  }

  .pixipie-data-table tbody th {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
  }

  .pixipie-data-table tbody td {
    font-size: 0.9375rem;
    color: inherit;
    opacity: 0.88;
  }

  .dark .pixipie-data-table tr {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
  }
}

/* -------------------------------------------------------------------------- */
/* Logo                                                                        */
/* -------------------------------------------------------------------------- */

.pixipie-logo {
  width: 96px;
  max-width: 100%;
  height: auto;
}

a.pixipie-logo img {
  width: 100%;
  height: auto;
  display: block;
}

img.pixipie-logo {
  width: 96px;
  max-width: 100%;
  height: auto;
}

.uc-navbar .uc-logo {
  display: flex;
  align-items: center;
}

/* Mobile drawer: keep logo + close from colliding */
.uc-menu-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}

.uc-menu-panel-logo {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 48px);
}

.uc-menu-panel-logo .pixipie-logo,
.uc-menu-panel-logo a.pixipie-logo {
  display: block;
  width: 88px !important;
  max-width: 100%;
}

.uc-menu-panel-logo img {
  width: 88px !important;
  max-width: 100%;
  height: auto;
  display: block;
}

.uc-menu-close {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  aspect-ratio: 1 / 1;
}

.uc-menu-close i,
.uc-menu-close .unicon-close {
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

@media (min-width: 992px) {
  .pixipie-logo {
    width: 140px;
  }

  img.pixipie-logo {
    width: 140px;
  }
}

/* -------------------------------------------------------------------------- */
/* Content scale: activate xl: text steps at lg (992px) for tablets            */
/* -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .xl\:fs-5 {
    font-size: 1.125rem !important;
  }

  .xl\:fs-6 {
    font-size: 1rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Legal / contact long-form prose                                             */
/* -------------------------------------------------------------------------- */

.wrap .section .panel.vstack.gap-3 > .panel.vstack,
.wrap .section .panel.vstack.gap-3.bg-white,
.wrap .section .col-12 .panel.vstack.gap-3.bg-white {
  row-gap: 0.75rem;
}

.wrap .section .panel.vstack.gap-3.bg-white > .panel.vstack,
.wrap .section .col-12 .panel.vstack.gap-3.bg-white > .panel.vstack {
  row-gap: 0.5rem;
}

.wrap .section .panel.vstack.gap-3.bg-white p,
.wrap .section .panel.vstack.gap-3.bg-white li,
.wrap .section .col-12 .panel.vstack.gap-3.bg-white > p,
.wrap .section .col-12 .panel.vstack.gap-3.bg-white li {
  font-size: 1rem;
  line-height: 1.65;
}

@media (min-width: 992px) {
  .wrap .section .panel.vstack.gap-3.bg-white p,
  .wrap .section .panel.vstack.gap-3.bg-white li,
  .wrap .section .col-12 .panel.vstack.gap-3.bg-white > p,
  .wrap .section .col-12 .panel.vstack.gap-3.bg-white li {
    font-size: 1.125rem;
  }

  .wrap .section .panel.vstack.gap-3 > .panel.vstack,
  .wrap .section .panel.vstack.gap-3.bg-white,
  .wrap .section .col-12 .panel.vstack.gap-3.bg-white {
    row-gap: 1rem;
  }

  .wrap .section .panel.vstack.gap-3.bg-white > .panel.vstack,
  .wrap .section .col-12 .panel.vstack.gap-3.bg-white > .panel.vstack {
    row-gap: 0.625rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Clients feedback — continuous slow roller (not a click slider)              */
/* -------------------------------------------------------------------------- */

.clients-feedbacks .clients-marquee {
  margin-top: 0.5rem;
}

.clients-feedbacks .clients-marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  width: max-content;
  min-width: unset !important;
  justify-content: flex-start !important;
  gap: var(--gap, 24px);
  animation: clients-marquee-flow var(--speed, 70s) linear infinite;
}

.clients-feedbacks .clients-marquee > .clients-marquee-track > * {
  white-space: normal !important;
  animation: none !important;
  flex: 0 0 auto;
  width: min(380px, 82vw);
  display: flex;
}

.clients-feedbacks .clients-item {
  height: 100%;
  width: 100%;
}

.clients-feedbacks .clients-item-content {
  height: 100%;
}

.clients-feedbacks .clients-marquee.pause-on-hover:hover > .clients-marquee-track {
  animation-play-state: paused;
}

@keyframes clients-marquee-flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-feedbacks .clients-marquee-track {
    animation: none;
  }
}

/* CTA bottom dashboard screenshot — keep centered in section */
#cta .panel img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
}


.yearly-coins-badge {
  display: inline-block;
  line-height: 1.45;
  border-radius: 0.5rem;
  white-space: normal;
  background-color: var(--color-primary-100, #ebe0f6) !important;
  color: var(--color-primary, #702bb8) !important;
  animation: yearly-badge-bg-fade 5s ease-in-out infinite;
}

.yearly-coins-badge .yearly-badge-char {
  display: inline-block;
  margin: 0;
  padding: 0;
  will-change: color, opacity;
  color: var(--color-primary, #702bb8);
  animation: yearly-badge-char-color-fade 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.045s);
}

.yearly-coins-badge .yearly-badge-char.is-space {
  white-space: pre;
  width: 0.35em;
  min-width: 0.35em;
}

.yearly-coins-badge .yearly-badge-char.is-bold {
  font-weight: 700;
}

@keyframes yearly-badge-bg-fade {
  0%,
  100% {
    background-color: var(--color-primary-100, #ebe0f6);
  }
  50% {
    background-color: var(--color-primary-200, #d4b8ea);
  }
}

@keyframes yearly-badge-char-color-fade {
  0%,
  8%,
  100% {
    color: var(--color-primary, #702bb8);
    opacity: 1;
  }
  4% {
    color: var(--color-primary-600, #4a1a7a);
    opacity: 0.55;
  }
  6% {
    color: var(--color-primary-400, #9b6ad4);
    opacity: 1;
  }
}

.dark .yearly-coins-badge,
.uc-dark .yearly-coins-badge {
  animation-name: yearly-badge-bg-fade-dark;
}

@keyframes yearly-badge-bg-fade-dark {
  0%,
  100% {
    background-color: rgba(112, 43, 184, 0.12);
  }
  50% {
    background-color: rgba(112, 43, 184, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yearly-coins-badge,
  .yearly-coins-badge .yearly-badge-char {
    animation: none;
  }
}