:root {
  --pc-primary: #71ADDD;
  --pc-primary-dark: #5599c9;
  --pc-primary-soft: rgba(113, 173, 221, 0.14);
  --pc-ink: #0f172a;
  --pc-slate: #334155;
  --pc-muted: #64748b;
  --pc-bg: #f4fafc;
  --pc-white: #ffffff;
  --pc-dark: #0c1220;
  --pc-radius: 16px;
  --pc-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
  --pc-gradient: linear-gradient(135deg, #71ADDD 0%, #4f8fb8 100%);
  /* Fixed header — match .site-nav: brand height + vertical padding + border */
  --pc-nav-pad-y: 0.65rem;
  --pc-nav-brand-h: 38px;
  --pc-header-border-w: 1px;
  --pc-header-h: calc(var(--pc-nav-brand-h) + (2 * var(--pc-nav-pad-y)) + var(--pc-header-border-w));
  --pc-header-offset: var(--pc-header-h);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* prevent any element from creating horizontal scroll */
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Sections must never cause horizontal scroll */
section,
.footer-pc,
.cta-band,
.dark-band,
.strip-pc {
  max-width: 100%;
}

body.pc-home {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
  color: var(--pc-slate);
  background: var(--pc-bg);
  padding-top: var(--pc-header-offset);
}

/* Explicit pointer on hyperlinks — only where a mouse/trackpad is primary (touch phones have no visible cursor). */
@media (pointer: fine) {
  body.pc-marketing a[href] {
    cursor: pointer !important;
  }
}

body.pc-home h1,
body.pc-home h2,
body.pc-home h3,
body.pc-home h4,
body.pc-home .display-title,
body.pc-home .section-title,
body.pc-home .section-label,
body.pc-home .card-pc h3 {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

body.pc-home .lead-text,
body.pc-home .section-desc {
  font-size: 1.05rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/*
  Full-page drape (desktop mega menus): strong slate-gray scrim behind the nav + mega panel only.
*/
.pc-mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49990;
  background: rgba(15, 23, 42, 0.74);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  backdrop-filter: blur(12px) saturate(118%);
}

body.mega-open .pc-mega-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pc-mega-backdrop {
    background: rgba(15, 23, 42, 0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-mega-backdrop {
    transition: opacity 0.12s ease, visibility 0.12s ease;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.site-nav {
  transition:
    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  z-index: 50000;
  padding-top: var(--pc-nav-pad-y);
  padding-bottom: var(--pc-nav-pad-y);
}

.site-nav.site-nav--slim .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

/* Crisp top bar + panel over the drape (no see-through to the dimmer) */
body.mega-open .site-nav {
  background: #ffffff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.site-nav.scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 12px 40px rgba(15, 23, 42, 0.06);
  border-bottom-color: rgba(15, 23, 42, 0.07);
}

/* Desktop only: let the mega-menu and dropdowns escape the navbar.
   On mobile this MUST stay hidden during the Bootstrap collapse animation,
   otherwise the white drawer card "leaks" below the navbar (the
   "transparent thing" you can see for ~350ms when the drawer closes). */
@media (min-width: 992px) {
  .site-nav,
  .site-nav .navbar-collapse,
  .site-nav #navMain {
    overflow: visible !important;
  }
}

/* Mobile drawer: smoother close. Bootstrap animates `height` only; we layer
   in a tiny opacity easing so the card doesn't snap to invisible at the end
   of the animation. */
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse {
    transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  .site-nav #navMain {
    transition: opacity 0.22s ease;
  }
  /* Bootstrap toggles .collapsing while the height tween runs, then
     swaps to .collapse (closed) or .collapse.show (open). We fade the
     card out slightly while collapsing for a smoother visual exit. */
  .site-nav .navbar-collapse.collapsing #navMain,
  .site-nav .navbar-collapse:not(.show):not(.collapsing) #navMain {
    opacity: 0;
  }
  .site-nav .navbar-collapse.show #navMain {
    opacity: 1;
  }
  /* The desktop mega-backdrop (dark scrim) has no role inside the mobile
     drawer — kill it outright so it can't flash during open/close. */
  .pc-mega-backdrop {
    display: none !important;
  }
}

.site-nav .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.pc-brand-logo,
.site-nav .navbar-brand .pc-brand-logo-svg {
  display: block;
  height: 38px;
  width: auto;
  max-width: min(220px, 55vw);
  object-fit: contain;
  transition: height 0.25s ease;
}

.site-nav .navbar-brand .pc-brand-logo-svg {
  flex-shrink: 0;
}

/* Inline nav logo: darken "PET" letter masks + paw pads (white in asset) for light navbar */
.site-nav .pc-brand-logo-svg #Rectangle_1937,
.site-nav .pc-brand-logo-svg #Rectangle_1939,
.site-nav .pc-brand-logo-svg #Rectangle_1941,
.site-nav .pc-brand-logo-svg #Rectangle_1959,
.site-nav .pc-brand-logo-svg #Rectangle_1961,
.site-nav .pc-brand-logo-svg #Rectangle_1963,
.site-nav .pc-brand-logo-svg #Rectangle_1965,
.site-nav .pc-brand-logo-svg #Rectangle_1967 {
  fill: var(--pc-ink);
}

.site-nav.scrolled .pc-brand-logo,
.site-nav.scrolled .pc-brand-logo-svg {
  height: 34px;
}

.site-nav .nav-link {
  color: var(--pc-slate) !important;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.78rem !important;
  border-radius: 10px;
  transition: color 0.18s ease, background 0.18s ease;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
  color: var(--pc-ink) !important;
  background: rgba(113, 173, 221, 0.08);
}

.site-nav .nav-item.active > .nav-link,
.site-nav .nav-link.active {
  color: var(--pc-primary-dark) !important;
  background: rgba(113, 173, 221, 0.1);
}

.site-nav .nav-link.active::after {
  display: none;
}

/* Primary CTA — nav bar (readable tap target) */
.btn-pc-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.52rem 1.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  border-radius: 999px;
  border: none;
  background: var(--pc-gradient);
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(113, 173, 221, 0.38);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  white-space: nowrap;
}

.btn-pc-nav-cta:hover {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(113, 173, 221, 0.42);
  filter: brightness(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .btn-pc-nav-cta:hover {
    transform: none;
  }
}

.pc-nav-cluster {
  gap: 0.25rem;
}

@media (min-width: 992px) {
  .pc-nav-cluster {
    gap: 0.28rem;
  }

  .pc-nav-cluster .pc-nav-contacts {
    margin-inline-end: 0.65rem;
  }

  .pc-nav-cta {
    margin-left: 0.5rem;
  }
}

.site-nav__toggler {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.site-nav__toggler:focus,
.site-nav__toggler:focus-visible {
  /* Bootstrap's default toggler focus ring is loud — soften it. */
  box-shadow: 0 0 0 3px rgba(113, 173, 221, 0.18);
  outline: none;
}

.site-nav__toggler:hover {
  background: rgba(113, 173, 221, 0.08);
  border-color: rgba(113, 173, 221, 0.25);
}

/* Subtle press animation on the icon when the drawer is open. */
.site-nav__toggler .navbar-toggler-icon {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.site-nav__toggler[aria-expanded="true"] .navbar-toggler-icon {
  transform: rotate(90deg);
  opacity: 0.85;
}

.site-nav__signin .dropdown-item {
  font-size: 0.9375rem;
  padding: 0.55rem 1rem;
}

.site-nav .dropdown-menu:not(.mega-menu-pc) {
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 0.5rem;
  margin-top: 0.35rem !important;
}

.site-nav .dropdown-item {
  font-weight: 500;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  font-size: 0.9375rem;
  color: var(--pc-slate);
}

.site-nav .dropdown-item:hover {
  background: var(--pc-primary-soft);
  color: var(--pc-primary-dark);
}

.site-nav .dropdown-item.active {
  background: var(--pc-primary-soft);
  color: var(--pc-primary-dark);
  font-weight: 600;
}

/* Products submenu — simple grid, same theme */
.dropdown-mega > .nav-link.dropdown-toggle::after {
  vertical-align: 0.15em;
}

@media (min-width: 992px) {
  .dropdown-mega:hover > .nav-link.dropdown-toggle,
  .dropdown-mega.show > .nav-link.dropdown-toggle {
    color: var(--pc-primary-dark) !important;
    background: rgba(113, 173, 221, 0.1);
    box-shadow: none;
  }
}

.mega-menu-pc {
  width: 100%;
  max-width: 100%;
  margin-top: 0 !important;
  padding: 0;
  border: none !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  z-index: 60;
  transform-origin: top center;
}

body.mega-open .mega-menu-pc {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.06),
    0 36px 80px rgba(0, 0, 0, 0.28);
}

.mega-menu-pc.show {
  animation: megaSlideDown 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes megaSlideDown {
  from {
    opacity: 0;
    transform: translateY(-16px) scaleY(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@media (min-width: 992px) {
  .dropdown-mega .mega-menu-pc {
    margin-top: 0 !important;
    padding-top: 0;
    overflow: visible;
  }

  .dropdown-mega .mega-menu-pc .mega-inner {
    overflow: hidden;
    border-radius: 0 0 20px 20px;
  }
}

.mega-menu-pc .mega-inner {
  padding: 1rem 0 1.25rem;
  background: #fff;
}

@media (min-width: 992px) {
  .mega-menu-pc .mega-inner {
    padding: 1.35rem 0 1.6rem;
    background:
      linear-gradient(180deg, rgba(113, 173, 221, 0.08) 0%, transparent 52%),
      #fff;
  }
}

.mega-simple-intro {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pc-primary-dark);
  margin-bottom: 0.65rem;
}

.mega-simple-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (min-width: 576px) {
  .mega-simple-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
  }
}

@media (min-width: 992px) {
  .mega-simple-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem 1.1rem;
  }
}

@media (min-width: 1200px) {
  .mega-simple-grid:not(.mega-simple-grid--6) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem 0.85rem;
  }
}

.mega-simple-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
  min-height: 3.35rem;
}

.mega-simple-item:hover,
.mega-simple-item:focus-visible {
  background: var(--pc-primary-soft);
  border-color: rgba(113, 173, 221, 0.3);
  color: inherit;
  outline: none;
}

.mega-simple-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--pc-gradient);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.mega-simple-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.mega-simple-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pc-ink);
  line-height: 1.25;
}

.mega-simple-desc {
  font-size: 0.8rem;
  color: var(--pc-muted);
  line-height: 1.35;
}

.mega-simple-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.mega-new-badge {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #ea580c;
  border-radius: 999px;
  line-height: 1;
}

@media (min-width: 992px) {
  .dropdown-mega {
    position: static !important;
  }

  .dropdown-mega .mega-menu-pc {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 991px) {
  .pc-mega-backdrop {
    background: rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  body.pc-home {
    padding-top: var(--pc-header-offset);
  }

  .site-nav .navbar-toggler {
    border: 1px solid rgba(113, 173, 221, 0.35);
    padding: 0.35rem 0.55rem;
  }

  .site-nav #navMain {
    margin-top: 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    padding: 0.55rem;
  }

  .site-nav #navMain .navbar-nav {
    align-items: stretch !important;
    gap: 0.1rem;
  }

  .site-nav #navMain .nav-link,
  .site-nav #navMain .btn-pc-nav-cta {
    width: 100%;
  }

  .site-nav #navMain .nav-link {
    border-radius: 10px;
  }

  .site-nav #navMain .dropdown-menu {
    margin-top: 0.2rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
  }

  .mega-menu-pc {
    position: static !important;
    transform: none !important;
    box-shadow: none;
    border-radius: 12px;
    margin-top: 0.35rem !important;
    background: var(--pc-bg);
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mega-menu-pc.show {
    animation: none;
  }

  .mega-menu-pc .mega-inner {
    padding: 0.65rem 0.35rem 0.75rem;
    background: transparent;
  }

  .mega-simple-intro {
    padding: 0 0.35rem;
    margin-bottom: 0.5rem;
  }

  .mega-simple-grid {
    gap: 0.35rem;
  }

  .mega-simple-item {
    padding: 0.65rem 0.75rem;
  }

  .mega-simple-title {
    font-size: 0.92rem;
  }

  .mega-simple-desc {
    font-size: 0.78rem;
  }
}

.btn-pc-primary {
  background: var(--pc-gradient);
  color: #fff !important;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.35rem;
  box-shadow: 0 12px 28px rgba(113, 173, 221, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  position: relative;
}

.btn-pc-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(113, 173, 221, 0.45);
  color: #fff !important;
}

.btn-pc-outline {
  border: 2px solid var(--pc-primary);
  color: var(--pc-primary-dark) !important;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-pc-outline:hover {
  background: var(--pc-primary-soft);
  color: var(--pc-ink) !important;
}

@keyframes pcGridDrift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 48px 48px, 48px 48px, 0 0, 0 0, 0 0; }
}

.hero-pc {
  position: relative;
  padding: 3.5rem 0 4.5rem;
  overflow: hidden; /* clips grid drift, aurora blobs, and any badge overflow */
  background:
    linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(113, 173, 221, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(113, 173, 221, 0.12), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, var(--pc-bg) 100%);
  background-size:
    48px 48px,
    48px 48px,
    auto,
    auto,
    auto;
  animation: pcGridDrift 20s linear infinite;
}

.hero-pc .display-title {
  font-size: clamp(2.25rem, 4.5vw, 3.35rem);
  font-weight: 800;
  color: var(--pc-ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hero-pc .display-title .accent {
  display: inline-block;
  background: var(--pc-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-pc .lead-text {
  font-size: 1.15rem;
  color: var(--pc-muted);
  max-width: 34rem;
  margin-top: 1.25rem;
  line-height: 1.65;
}

.hero-pc .hero-device-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-pc .hero-device-wrap .pc-media-frame img,
.hero-pc .hero-device-wrap img {
  max-width: min(100%, 340px);
  height: auto;
  filter: drop-shadow(0 28px 50px rgba(15, 23, 42, 0.18));
}

.hero-pc .hero-device-wrap .pc-viz--homepage-banner-media .pc-viz__screen-img {
  filter: none;
}

/* On narrow phones the two hero CTAs ("Get started free" + "Pet owner
   portal") were wrapping to two rows. Keep them side-by-side at every
   width by sharing the row equally, shrinking type and padding so each
   label stays on a single line. */
@media (max-width: 575.98px) {
  .hero-pc .d-flex.gap-3 {
    flex-wrap: nowrap;
    gap: 0.55rem !important;
  }
  .hero-pc .d-flex.gap-3 > .btn,
  .hero-pc .d-flex.gap-3 > .btn.btn-lg {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0.55rem;
    font-size: 0.85rem;
    line-height: 1.2;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.hero-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pc-ink);
  box-shadow: var(--pc-shadow);
  animation-fill-mode: both;
}

.hero-badge i { color: var(--pc-primary); }

.hero-badge.b1 { top: 8%; left: 5%; }
.hero-badge.b2 { bottom: 18%; right: 0; }
.hero-badge.b3 { bottom: 4%; left: 15%; }

@media (max-width: 991px) {
  .hero-badge { display: none; }
}

.section-label {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pc-primary-dark);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 800;
  color: var(--pc-ink);
  letter-spacing: -0.02em;
}

.section-desc {
  color: var(--pc-muted);
  max-width: 40rem;
  margin: 0.75rem auto 0;
  line-height: 1.65;
}

.card-pc {
  border: none;
  border-radius: var(--pc-radius);
  background: var(--pc-white);
  box-shadow: var(--pc-shadow);
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.card-pc:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12);
}

.card-pc .icon-round {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--pc-primary-soft);
  color: var(--pc-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.card-pc h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pc-ink);
}

.card-pc p {
  color: var(--pc-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.pc-value-section {
  background: var(--pc-bg);
}

.pc-value-section .section-desc {
  max-width: 34rem;
}

.pc-value-card {
  border-radius: var(--pc-radius);
  padding: 1.25rem 1.2rem;
  background: var(--pc-white);
  border: 1px solid rgba(113, 173, 221, 0.16);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.045);
  height: 100%;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease;
}

.pc-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1);
  border-color: rgba(113, 173, 221, 0.38);
}

.pc-value-card--accent {
  border-color: rgba(113, 173, 221, 0.38);
  box-shadow: 0 14px 40px rgba(113, 173, 221, 0.12);
}

.pc-value-card--finance {
  border-left: 3px solid var(--pc-primary-dark);
  background: linear-gradient(135deg, #fff 0%, rgba(113, 173, 221, 0.06) 100%);
}

.pc-value-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--pc-primary-soft);
  color: var(--pc-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  transition: transform 0.45s ease;
}

.pc-value-card:hover .pc-value-card__icon {
  transform: translateY(-3px) scale(1.04);
}

.pc-value-card h3 {
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.pc-value-card p {
  font-size: 0.9rem;
  line-height: 1.52;
}

a.strip-item {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

a.strip-item:hover {
  background: rgba(113, 173, 221, 0.07);
  color: inherit;
}

a.strip-item:focus-visible {
  outline: 2px solid rgba(113, 173, 221, 0.55);
  outline-offset: 2px;
}

.strip-pc {
  background: var(--pc-white);
  border-top: 1px solid rgba(113, 173, 221, 0.2);
  border-bottom: 1px solid rgba(113, 173, 221, 0.2);
}

.strip-item {
  text-align: center;
  padding: 1.5rem 0.5rem;
}

.strip-item i {
  font-size: 1.75rem;
  color: var(--pc-primary);
  margin-bottom: 0.5rem;
}

.strip-item strong {
  display: block;
  color: var(--pc-ink);
  font-size: 0.95rem;
}

.strip-item span {
  font-size: 0.85rem;
  color: var(--pc-muted);
}

.feature-tile {
  border-radius: var(--pc-radius);
  padding: 1.5rem 1.25rem;
  background: var(--pc-white);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
  height: 100%;
  border: 1px solid rgba(113, 173, 221, 0.15);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease;
}

.feature-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.1);
  border-color: rgba(113, 173, 221, 0.45);
}

.feature-tile i {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--pc-primary-soft);
  color: var(--pc-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.85rem;
  animation: pcFeatIconFloat 4s ease-in-out infinite;
}

@keyframes pcFeatIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.feature-tile h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pc-ink);
}

.feature-tile p {
  font-size: 0.9rem;
  color: var(--pc-muted);
  margin: 0;
  line-height: 1.55;
}

.solution-row {
  align-items: center;
  padding: 3rem 0;
  border-bottom: 1px solid rgba(113, 173, 221, 0.12);
}

.solution-row:last-child { border-bottom: none; }

.solution-row h3 {
  font-weight: 800;
  color: var(--pc-ink);
}

.solution-row ul {
  padding-left: 1.1rem;
  color: var(--pc-muted);
  margin: 1rem 0 0;
}

.solution-row li { margin-bottom: 0.35rem; }

/* On phones / small tablets the two columns inside #solutions stack
   (text on top, screenshot below). Center the heading, lead, bullet
   list and CTA button so the stacked block doesn't read as left-flushed
   while the screenshot below is already centered (image col already has
   .text-center so this rule is safely a no-op there). */
@media (max-width: 991.98px) {
  .solution-row > [class*="col-"] {
    text-align: center;
  }
  .solution-row ul {
    list-style-position: inside;
    padding-left: 0;
  }
  .solution-row .btn {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }
}

.dark-band {
  background: linear-gradient(160deg, #0c1220 0%, #152238 50%, #0f1b2f 100%);
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  overflow: hidden;
}

.dark-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(113, 173, 221, 0.15), transparent 45%);
  pointer-events: none;
}

.dark-band .section-title { color: #fff; }
.dark-band .section-desc { color: rgba(255, 255, 255, 0.65); }

.cta-band {
  background: var(--pc-gradient);
  color: #fff;
  text-align: center;
  padding: 4rem 1rem;
}

.cta-band h2 { font-weight: 800; }

.cta-band .btn-outline-light {
  border-width: 2px;
  font-weight: 600;
}

.cta-band .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color: #fff;
}

/* ==========================================================================
   Pre-footer — contact form CTA (all marketing pages)
   ========================================================================== */
.pc-pre-footer-contact {
  background: linear-gradient(180deg, var(--pc-bg, #f4fafc) 0%, rgba(113, 173, 221, 0.08) 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding: 2.25rem 0;
}

.pc-pre-footer-contact__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 1.5rem;
}

.pc-pre-footer-contact__title {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  font-weight: 800;
  color: var(--pc-ink);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.pc-pre-footer-contact__lead {
  font-size: 0.95rem;
  color: var(--pc-muted);
  line-height: 1.55;
  max-width: 36rem;
}

.pc-pre-footer-contact__btn {
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .pc-pre-footer-contact {
    padding: 1.75rem 0;
    text-align: center;
  }

  .pc-pre-footer-contact__inner {
    flex-direction: column;
    justify-content: center;
  }

  .pc-pre-footer-contact__btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ==========================================================================
   Footer — top 1% redesign
   ========================================================================== */
.footer-pc {
  position: relative;
  background: linear-gradient(175deg, #0f1724 0%, #111827 60%, #0c1420 100%);
  color: rgba(255, 255, 255, 0.65);
  padding: 0 0 0;
  font-size: 0.925rem;
  overflow: hidden;
}

/* Gradient top border */
.footer-pc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(113, 173, 221, 0.6) 30%,
    rgba(43, 183, 235, 0.8) 50%,
    rgba(113, 173, 221, 0.6) 70%,
    transparent 100%
  );
}

/* Ambient glows */
.footer-pc__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}

.footer-pc__glow--1 {
  width: 600px;
  height: 400px;
  top: -80px;
  left: -100px;
  background: radial-gradient(circle, rgba(113, 173, 221, 0.12) 0%, transparent 70%);
}

.footer-pc__glow--2 {
  width: 500px;
  height: 350px;
  bottom: 0;
  right: -80px;
  background: radial-gradient(circle, rgba(43, 183, 235, 0.08) 0%, transparent 70%);
}

/* Trust badge strip */
.footer-pc__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 2rem 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 2rem;
  margin-bottom: 0;
}

.footer-pc__trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.01em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-pc__trust-badge i {
  color: var(--pc-primary);
  font-size: 0.7rem;
}

.footer-pc__trust-badge:hover {
  background: rgba(113, 173, 221, 0.12);
  border-color: rgba(113, 173, 221, 0.3);
  color: #fff;
}

/* Main grid */
.footer-pc__main {
  align-items: flex-start;
  padding: 3.5rem 0 1rem;
}

.footer-pc__brand-col {
  padding-right: 2rem;
}

.footer-pc__logo-link {
  display: inline-block;
  margin-bottom: 1.5rem;
  line-height: 0;
  transition: opacity 0.2s ease;
}

.footer-pc__logo-link:hover {
  opacity: 0.85;
}

.pc-brand-logo--footer {
  height: 44px;
  max-width: min(220px, 70vw);
}

.footer-pc__tagline {
  max-width: 24rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

.footer-pc__email-wrap a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-pc__email-wrap a:hover {
  color: var(--pc-primary);
}

/* Column headings */
.footer-pc__heading {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 1.15rem;
}

/* Nav links */
.footer-pc__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}

.footer-pc__links li {
  margin: 0;
}

.footer-pc__links a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.18s ease, padding-left 0.18s ease;
  display: inline-block;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(113, 173, 221, 0.28);
}

.footer-pc__links a:hover {
  color: rgba(255, 255, 255, 0.95);
}

@media (hover: hover) {
  .footer-pc__links a:hover {
    padding-left: 4px;
  }
}

/* Override for non-list footer links */
.footer-pc a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(113, 173, 221, 0.28);
}

.footer-pc a:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* Divider */
.footer-pc__rule {
  border: none;
  height: 1px;
  margin: 2rem 0 1.5rem;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent 100%
  );
  opacity: 1;
}

/* Bottom bar */
.footer-pc__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-bottom: 2rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.35);
}

.footer-pc__copy {
  color: rgba(255, 255, 255, 0.35);
}

.footer-pc__legal-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

.footer-pc__legal-links a {
  color: rgba(255, 255, 255, 0.4) !important;
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.18s ease;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(113, 173, 221, 0.28);
}

.footer-pc__legal-links a:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

.footer-pc__top-link {
  color: rgba(255, 255, 255, 0.4) !important;
  text-decoration: none;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.18s ease, transform 0.18s ease;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(113, 173, 221, 0.28);
}

.footer-pc__top-link:hover {
  color: var(--pc-primary) !important;
  transform: translateY(-2px);
}

.footer-email-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.18s ease;
}

.footer-email-link:hover {
  color: var(--pc-primary);
}

@media (max-width: 767.98px) {
  .footer-pc {
    font-size: 0.9375rem;
  }

  .footer-pc__trust {
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: 0.5rem 0.45rem;
  }

  .footer-pc__trust-badge {
    font-size: 0.76rem;
    padding: 0.42rem 0.75rem;
  }

  .footer-pc__main {
    padding: 2.25rem 0 0.5rem;
  }

  .footer-pc__brand-col {
    padding-right: 0;
    text-align: center;
  }

  .footer-pc__logo-link {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-pc__tagline {
    margin-left: auto;
    margin-right: auto;
    max-width: 22rem;
  }

  .footer-pc__email-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
  }

  .footer-pc__social {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-pc__main > .footer-pc__brand-col + .footer-pc__link-col {
    margin-top: 1.25rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-pc__links {
    gap: 0.15rem;
  }

  .footer-pc__links a {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.4rem 0.65rem;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 0;
    background: transparent;
    text-decoration: none;
  }

  .footer-pc__links a:active {
    background: rgba(113, 173, 221, 0.12);
  }

  .footer-pc__legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.15rem 0.35rem;
    text-decoration: none;
  }

  .footer-pc__top-link {
    display: inline-flex;
    justify-content: center;
    padding: 0.45rem 0.65rem;
    margin-left: auto;
    margin-right: auto;
    min-height: 2.75rem;
    align-items: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: underline;
    text-decoration-color: rgba(113, 173, 221, 0.45);
    text-underline-offset: 0.15em;
    width: 100%;
    max-width: 280px;
  }

  .footer-pc__top-link:active {
    background: rgba(113, 173, 221, 0.14);
  }

  .footer-pc__rule {
    margin: 1.75rem 0 1.25rem;
  }

  .footer-pc__bottom {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 1rem;
    padding-bottom: 2.25rem;
  }

  .footer-pc__legal-links {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.accordion-pc .accordion-item {
  border: none;
  margin-bottom: 0.75rem;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.accordion-pc .accordion-button {
  font-weight: 600;
  color: var(--pc-ink);
  background: #fff;
}

.accordion-pc .accordion-button:not(.collapsed) {
  color: var(--pc-primary-dark);
  background: var(--pc-primary-soft);
  box-shadow: none;
}

.accordion-pc .accordion-body {
  color: var(--pc-muted);
  line-height: 1.65;
}

.video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--pc-primary-dark);
  text-decoration: none;
}

.video-link:hover { color: var(--pc-ink); }

.pc-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pc-primary-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pc-play-btn i {
  color: var(--pc-primary-dark);
  font-size: 0.85rem;
  margin-left: 2px;
}

.pc-skip-link {
  position: fixed;
  top: 0;
  left: 0.75rem;
  z-index: 60000;
  padding: 0.65rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--pc-ink);
  background: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
  transform: translateY(-120%);
  transition: transform 0.2s ease;
}

.pc-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--pc-primary);
  outline-offset: 2px;
}

body.pc-home .btn:focus-visible,
body.pc-home .nav-link:focus-visible,
body.pc-home .mega-simple-item:focus-visible,
body.pc-home .accordion-button:focus-visible {
  outline: 3px solid rgba(113, 173, 221, 0.65);
  outline-offset: 2px;
}

.pc-media-frame {
  position: relative;
  display: inline-block;
}

.pc-media-frame--phone {
  border-radius: 2rem;
  padding: 0.5rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(241, 249, 252, 0.9));
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--pc-shadow);
}

.pc-media-placeholder {
  position: relative;
  border-radius: var(--pc-radius);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(113, 173, 221, 0.2), transparent 65%),
    linear-gradient(180deg, #f8fbfd 0%, #eef6fa 100%);
  border: 1px dashed rgba(113, 173, 221, 0.35);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pc-media-placeholder--wide {
  max-width: 420px;
  min-height: 240px;
}

.pc-media-placeholder--mobile {
  max-width: 400px;
  min-height: 280px;
}

.pc-media-placeholder__img {
  max-height: 280px;
  width: auto;
  object-fit: contain;
}

.pc-media-placeholder--mobile .pc-media-placeholder__img {
  max-height: 360px;
}

.pc-z-over-gradient {
  z-index: 1;
}

.pc-label-on-dark {
  color: rgba(113, 173, 221, 0.9) !important;
}

.pc-dark-band-badge {
  background: rgba(113, 173, 221, 0.2);
  color: #fff;
  font-weight: 600;
}

/* App Store / Google Play — #mobile: official badges, no chip (sits on dark-band) */
#mobile .pc-mobile-store-row {
  max-width: 100%;
  align-items: center;
}

#mobile .pc-mobile-store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#mobile .pc-mobile-store-badge:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

#mobile .pc-mobile-store-badge:focus-visible {
  outline: 2px solid rgba(113, 173, 221, 0.85);
  outline-offset: 3px;
}

#mobile .pc-mobile-store-badge img {
  display: block;
  height: 40px;
  width: auto;
}

#mobile .pc-mobile-store-badge--google img {
  height: 58px;
}

@media (prefers-reduced-motion: reduce) {
  #mobile .pc-mobile-store-badge {
    transition: none;
  }

  #mobile .pc-mobile-store-badge:hover {
    transform: none;
  }
}

.pc-max-w-cta {
  max-width: 32rem;
}

.pc-faq-wrap {
  max-width: 800px;
}

@media (max-width: 991px) {
  .pc-nav-cluster {
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
  }

  .pc-nav-cluster .pc-nav-contacts {
    order: -2;
  }

  .pc-nav-cluster .pc-nav-cta {
    order: -1;
    width: 100%;
  }

  .pc-nav-cluster .pc-nav-cta .btn {
    width: 100%;
  }
}

.footer-email-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.footer-email-link:hover {
  color: var(--pc-primary);
}

@media (prefers-reduced-motion: reduce) {
  .btn-pc-primary,
  .btn-pc-outline,
  .pc-capability,
  .feature-tile,
  .pc-value-card,
  .pc-value-card__icon {
    transition: none !important;
  }

  .feature-tile:hover,
  .pc-value-card:hover {
    transform: none;
  }

  .feature-tile i {
    animation: none !important;
  }

  .btn-pc-primary:hover {
    transform: none;
  }

  .hero-pc {
    animation: none !important;
  }
}

.strip-item .strip-email {
  font-size: 0.72rem;
  word-break: break-word;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .strip-item .strip-email {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   Social media — shared base + footer + floating right rail variants
   --pc-social-brand is set inline per icon (defined in marketing-helpers.php).
   Brand colour is the *default* fill; hover lifts and intensifies.
   ========================================================================== */
.pc-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pc-social__item { margin: 0; }

.pc-social__link {
  --pc-social-size: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pc-social-size);
  height: var(--pc-social-size);
  border-radius: 50%;
  font-size: 1rem;
  text-decoration: none;
  background: var(--pc-social-brand);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    filter 0.22s ease;
}

/* Single, consistent hover for every icon — clean zoom + brand-tinted glow.
   No rotation, no per-platform exceptions. */
.pc-social__link:hover,
.pc-social__link:focus-visible {
  transform: translateY(-3px) scale(1.12);
  filter: brightness(1.08) saturate(1.12);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.22),
    0 0 22px color-mix(in srgb, var(--pc-social-brand, #0f172a) 45%, transparent);
  color: #fff;
  outline: none;
}

/* Instagram: gradient is the brand mark — applied always (not just hover) */
.pc-social__item--instagram .pc-social__link {
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}

/* X & TikTok render with solid black so the glyph reads cleanly */
.pc-social__item--x .pc-social__link,
.pc-social__item--tiktok .pc-social__link {
  background: #000;
}

/* TikTok is unavailable to visitors in India (the app is banned). Hidden
   first-paint via <html class="pc-geo-in"> set in marketing-header.php
   before any CSS-blocking resources load. The next request the server
   reads the matching cookie and strips the link from the HTML entirely. */
html.pc-geo-in .pc-social__item--tiktok {
  display: none !important;
}

/* Placeholder (#) state — visually present but clearly inactive */
.pc-social__item--placeholder .pc-social__link {
  filter: grayscale(0.35) opacity(0.85);
  cursor: not-allowed;
}

.pc-social__item--placeholder .pc-social__link:hover,
.pc-social__item--placeholder .pc-social__link:focus-visible {
  transform: none;
  filter: grayscale(0.35) opacity(0.85);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

/* --- Footer variant --- */
.footer-pc__social-heading {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.85rem;
}

.pc-social--footer .pc-social__link {
  --pc-social-size: 40px;
  font-size: 1.05rem;
}

/* Footer globally dims all <a> — social icons inherit currentColor and look washed out.
   Restore full brand presence at rest (same as hover treatment). */
.footer-pc .pc-social a.pc-social__link {
  color: #fff;
  filter: brightness(1.08) saturate(1.12);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.22),
    0 0 22px color-mix(in srgb, var(--pc-social-brand, #0f172a) 45%, transparent);
}

.footer-pc .pc-social__item--placeholder a.pc-social__link {
  color: rgba(255, 255, 255, 0.55);
  filter: grayscale(0.35) opacity(0.85);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.footer-pc .pc-social__item--placeholder a.pc-social__link:hover,
.footer-pc .pc-social__item--placeholder a.pc-social__link:focus-visible {
  color: rgba(255, 255, 255, 0.55);
  filter: grayscale(0.35) opacity(0.85);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  transform: none;
}

/* --- Floating rail variant: square brand chips flush to right edge --- */
.pc-social-rail {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 49995;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* Hidden state — applied via JS when the footer enters the viewport */
.pc-social-rail.is-hidden {
  opacity: 0;
  transform: translate(48px, -50%);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.4s;
}

.pc-social-rail .pc-social {
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
}

.pc-social-rail .pc-social__link {
  --pc-social-size: 52px;
  position: relative;
  z-index: 1;
  width: var(--pc-social-size);
  height: var(--pc-social-size);
  border-radius: 0;
  border: 0;
  font-size: 1.4rem;

  /* Idle: slight separation from the viewport edge */
  box-shadow: -5px 6px 18px rgba(15, 23, 42, 0.22);
  transition:
    transform 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
    box-shadow 0.38s ease,
    filter 0.32s ease,
    z-index 0s linear;

  /* Page-load entrance — slides in from the right edge, then stays put */
  opacity: 0;
  transform: translateX(28px);
  animation: pcSocialEntrance 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: right center;
}

/* Placeholder chips: flat, no depth cue */
.pc-social-rail .pc-social__item--placeholder .pc-social__link {
  box-shadow: none;
}

/* Each icon arrives a moment after the previous one — top to bottom cascade */
.pc-social-rail .pc-social__item:nth-child(1) .pc-social__link { animation-delay: 0.10s; }
.pc-social-rail .pc-social__item:nth-child(2) .pc-social__link { animation-delay: 0.20s; }
.pc-social-rail .pc-social__item:nth-child(3) .pc-social__link { animation-delay: 0.30s; }
.pc-social-rail .pc-social__item:nth-child(4) .pc-social__link { animation-delay: 0.40s; }
.pc-social-rail .pc-social__item:nth-child(5) .pc-social__link { animation-delay: 0.50s; }

@keyframes pcSocialEntrance {
  0%   { opacity: 0; transform: translateX(28px); }
  60%  { opacity: 1; transform: translateX(-3px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Hover: “peel” into the page — horizontal slide + soft spring scale + brand halo.
   Intentionally different from footer circles (edge-docked squares). */
.pc-social-rail .pc-social__link:hover,
.pc-social-rail .pc-social__link:focus-visible {
  z-index: 6;
  transform: translate3d(-14px, -4px, 0) scale(1.07);
  transform-origin: right center;
  filter: brightness(1.11) saturate(1.14);
  box-shadow:
    -22px 16px 36px rgba(15, 23, 42, 0.38),
    0 0 32px color-mix(in srgb, var(--pc-social-brand, #71addd) 42%, transparent);
  outline: none;
}

.pc-social-rail .pc-social__item--placeholder .pc-social__link:hover,
.pc-social-rail .pc-social__item--placeholder .pc-social__link:focus-visible {
  transform: translateX(0);
  filter: grayscale(0.35) opacity(0.85);
  box-shadow: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pc-social-rail .pc-social__link {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .pc-social-rail .pc-social__link:hover,
  .pc-social-rail .pc-social__link:focus-visible {
    transform: none;
    filter: brightness(1.08) saturate(1.08);
    box-shadow:
      -6px 6px 20px rgba(15, 23, 42, 0.28),
      0 0 20px color-mix(in srgb, var(--pc-social-brand, #71addd) 35%, transparent);
  }
  .pc-social-rail .pc-social__item--placeholder .pc-social__link:hover,
  .pc-social-rail .pc-social__item--placeholder .pc-social__link:focus-visible {
    filter: grayscale(0.35) opacity(0.85);
    box-shadow: none;
  }
}

@media (max-width: 991px) {
  .pc-social-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Footer only — rail has its own reduced-motion hover above */
  .pc-social--footer .pc-social__link:hover,
  .pc-social--footer .pc-social__link:focus-visible {
    transform: none;
    filter: none;
  }
  .pc-social-rail {
    transition: none;
  }
}