/* InboxWhats safe branding polish. CSS only. */

/* Covers the framework's temporary spinner and partial first render while
   preserving the product's original rotating-ring loader visual. */
#inbox-first-paint {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
  background: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 180ms ease, visibility 0s linear 180ms !important;
  animation: inbox-first-paint-failsafe 6s steps(1, end) forwards !important;
}

#inbox-first-paint .inbox-first-paint-content {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 140px !important;
  height: 140px !important;
}

#inbox-first-paint .inbox-first-paint-ring,
#inbox-first-paint .inbox-first-paint-orbit {
  position: absolute !important;
  display: block !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

#inbox-first-paint .inbox-first-paint-ring.is-outer {
  inset: 0 !important;
  border: 1.5px dashed rgba(37, 211, 102, 0.28) !important;
  animation: inbox-first-paint-spin 14s linear infinite !important;
}

#inbox-first-paint .inbox-first-paint-ring.is-middle {
  inset: 8px !important;
  border: 3px solid transparent !important;
  border-top-color: #25d366 !important;
  border-right-color: rgba(37, 211, 102, 0.38) !important;
  animation: inbox-first-paint-spin 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#inbox-first-paint .inbox-first-paint-ring.is-inner {
  inset: 18px !important;
  border: 2px solid transparent !important;
  border-bottom-color: #128c7e !important;
  border-left-color: rgba(18, 140, 126, 0.34) !important;
  animation: inbox-first-paint-spin-reverse 2.4s linear infinite !important;
}

#inbox-first-paint .inbox-first-paint-icon {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 78px !important;
  height: 78px !important;
  padding: 8px !important;
  overflow: hidden !important;
  background: rgba(37, 211, 102, 0.08) !important;
  border: 1.5px solid rgba(37, 211, 102, 0.22) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.35), 0 0 32px rgba(37, 211, 102, 0.16) !important;
  box-sizing: border-box !important;
  animation: inbox-first-paint-icon-float 3s ease-in-out infinite,
    inbox-first-paint-icon-glow 2.5s ease-in-out infinite !important;
}

#inbox-first-paint .inbox-first-paint-icon img {
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

#inbox-first-paint .inbox-first-paint-orbit {
  z-index: 3 !important;
  top: 12px !important;
  right: 14px !important;
  width: 10px !important;
  height: 10px !important;
  background: #25d366 !important;
  box-shadow: 0 0 8px #25d366 !important;
  transform-origin: -30px 58px !important;
  animation: inbox-first-paint-spin 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

#inbox-first-paint.is-complete {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

@keyframes inbox-first-paint-failsafe {
  0%, 99% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes inbox-first-paint-spin {
  to { transform: rotate(360deg); }
}

@keyframes inbox-first-paint-spin-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes inbox-first-paint-icon-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.025); }
}

@keyframes inbox-first-paint-icon-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.34), 0 0 26px rgba(37, 211, 102, 0.14); }
  50% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0), 0 0 42px rgba(37, 211, 102, 0.3); }
}

@media (prefers-color-scheme: dark) {
  #inbox-first-paint {
    background: #0b1220 !important;
  }

  #inbox-first-paint .inbox-first-paint-content {
    color: #94a3b8 !important;
  }

  #inbox-first-paint .inbox-first-paint-icon {
    background: rgba(255, 255, 255, 0.06) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #inbox-first-paint :is(.inbox-first-paint-ring, .inbox-first-paint-icon, .inbox-first-paint-orbit) {
    animation-duration: 8s !important;
  }
}

/* ================================
   Header / Menu Wide Logo
================================ */

#root nav .logo-box,
#root header .logo-box,
#root .MuiAppBar-root .logo-box,
#root .MuiDrawer-paper .logo-box {
  width: 235px !important;
  min-width: 235px !important;
  max-width: 235px !important;
  height: 66px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#root nav .logo-box img,
#root header .logo-box img,
#root .MuiAppBar-root .logo-box img,
#root .MuiDrawer-paper .logo-box img {
  width: 100% !important;
  height: 100% !important;
  max-width: 235px !important;
  max-height: 66px !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  transform: scale(1.18) !important;
  transform-origin: left center !important;
}

/* Fallback if logo image has no logo-box class */
#root nav img[src*="/media/"],
#root header img[src*="/media/"] {
  max-width: 235px !important;
  max-height: 66px !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: scale(1.18) !important;
  transform-origin: left center !important;
}

/* Hide site/app name beside logo */
#root nav .brand-text,
#root header .brand-text,
#root .MuiAppBar-root .brand-text,
#root .MuiDrawer-paper .brand-text,
#root .inbox-hide-brand-text {
  display: none !important;
}

/* Admin/User panel logo size */
#root .MuiAppBar-root .logo-box,
#root .MuiDrawer-paper .logo-box {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  height: 54px !important;
}

#root .MuiAppBar-root .logo-box img,
#root .MuiDrawer-paper .logo-box img {
  max-width: 190px !important;
  max-height: 54px !important;
  transform: scale(1.15) !important;
}

/* Mobile header logo */
@media (max-width: 600px) {
  #root nav .logo-box,
  #root header .logo-box,
  #root .MuiAppBar-root .logo-box,
  #root .MuiDrawer-paper .logo-box {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    height: 50px !important;
  }

  #root nav .logo-box img,
  #root header .logo-box img,
  #root .MuiAppBar-root .logo-box img,
  #root .MuiDrawer-paper .logo-box img,
  #root nav img[src*="/media/"],
  #root header img[src*="/media/"] {
    max-width: 170px !important;
    max-height: 50px !important;
    transform: scale(1.2) !important;
    transform-origin: left center !important;
  }
}

/* ================================
   Permanent homepage interaction lock
================================ */

/* The compiled homepage adds a hover transform to .logo-box. Keep the same
   desktop footprint before enhancement, during hover/click and after routing. */
#root nav .logo-box,
#root nav .logo-box:hover,
#root nav .logo-box:focus,
#root nav .logo-box:focus-visible,
#root nav .logo-box:active,
#root nav *:hover > .logo-box,
#root nav *:focus > .logo-box,
#root nav *:focus-within > .logo-box,
#root nav *:active > .logo-box {
  width: var(--inbox-logo-width, 240px) !important;
  min-width: var(--inbox-logo-width, 240px) !important;
  max-width: var(--inbox-logo-width, 240px) !important;
  height: var(--inbox-logo-height, 56px) !important;
  min-height: var(--inbox-logo-height, 56px) !important;
  max-height: var(--inbox-logo-height, 56px) !important;
  flex: 0 0 var(--inbox-logo-width, 240px) !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
}

#root nav .inbox-fixed-home-brand,
#root nav .inbox-fixed-home-brand:hover,
#root nav .inbox-fixed-home-brand:focus,
#root nav .inbox-fixed-home-brand:focus-within,
#root nav .inbox-fixed-home-brand:active {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

#root nav .logo-box img,
#root nav .logo-box:hover img,
#root nav .logo-box:focus img,
#root nav .logo-box:active img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* JavaScript calculates a consistent ~60px/second rate from the strip width;
   this fallback is intentionally calm and retains hover-to-pause. */
#root .inbox-integrations-section .inbox-partner-track {
  animation-duration: 120s !important;
  animation-timing-function: linear !important;
}

@media (max-width: 768px) {
  #root nav .logo-box,
  #root nav .logo-box:hover,
  #root nav .logo-box:focus,
  #root nav .logo-box:focus-visible,
  #root nav .logo-box:active,
  #root nav *:hover > .logo-box,
  #root nav *:focus > .logo-box,
  #root nav *:focus-within > .logo-box,
  #root nav *:active > .logo-box {
    width: var(--inbox-logo-width, 158px) !important;
    min-width: var(--inbox-logo-width, 158px) !important;
    max-width: var(--inbox-logo-width, 158px) !important;
    height: var(--inbox-logo-height, 48px) !important;
    min-height: var(--inbox-logo-height, 48px) !important;
    max-height: var(--inbox-logo-height, 48px) !important;
    flex-basis: var(--inbox-logo-width, 158px) !important;
  }
}

@media (max-width: 420px) {
  #root nav .logo-box,
  #root nav .logo-box:hover,
  #root nav .logo-box:focus,
  #root nav .logo-box:focus-visible,
  #root nav .logo-box:active,
  #root nav *:hover > .logo-box,
  #root nav *:focus > .logo-box,
  #root nav *:focus-within > .logo-box,
  #root nav *:active > .logo-box {
    width: var(--inbox-logo-width, 146px) !important;
    min-width: var(--inbox-logo-width, 146px) !important;
    max-width: var(--inbox-logo-width, 146px) !important;
    height: var(--inbox-logo-height, 44px) !important;
    min-height: var(--inbox-logo-height, 44px) !important;
    max-height: var(--inbox-logo-height, 44px) !important;
    flex-basis: var(--inbox-logo-width, 146px) !important;
  }
}

/* HOMEPAGE TRUST STRIP — a responsive relationship and platform credentials
   block mounted between the hero and the existing partner carousel. */
#root .inbox-home-trust,
#root .inbox-home-trust * {
  box-sizing: border-box;
}

#root .inbox-home-trust {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -34px;
  padding: 0 clamp(16px, 4vw, 48px) clamp(48px, 7vw, 82px);
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#root .inbox-home-trust-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 46px);
  overflow: hidden;
  color: #10223d;
  background:
    radial-gradient(circle at 8% -20%, rgba(37, 211, 102, 0.22), transparent 40%),
    radial-gradient(circle at 95% 120%, rgba(8, 102, 255, 0.15), transparent 42%),
    linear-gradient(125deg, #ecfdf3 0%, #f2fff7 46%, #eef6ff 100%);
  border: 1px solid rgba(30, 112, 83, 0.16);
  border-radius: 30px;
  box-shadow: 0 22px 64px rgba(24, 69, 54, 0.12);
}

#root .inbox-home-trust-glow {
  position: absolute;
  z-index: -1;
  width: 180px;
  height: 180px;
  pointer-events: none;
  border: 1px solid rgba(37, 211, 102, 0.16);
  border-radius: 50%;
}

#root .inbox-home-trust-glow::before,
#root .inbox-home-trust-glow::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(8, 102, 255, 0.09);
  border-radius: inherit;
  inset: 22px;
}

#root .inbox-home-trust-glow::after {
  inset: 48px;
}

#root .inbox-home-trust-glow.is-start {
  top: -92px;
  left: -76px;
}

#root .inbox-home-trust-glow.is-end {
  right: -62px;
  bottom: -106px;
}

#root .inbox-home-trust-relationship {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 22px);
  width: 100%;
}

#root .inbox-home-trust-product {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

#root .inbox-home-trust-product-mark {
  display: inline-grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  place-items: center;
  filter: drop-shadow(0 7px 13px rgba(7, 139, 98, 0.19));
}

#root .inbox-home-trust-product-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

#root .inbox-home-trust-product-mark svg > path:first-child {
  fill: #0aa77d;
}

#root .inbox-home-trust-product-mark .inbox-home-trust-phone {
  fill: #fff;
  transform: scale(0.62);
  transform-origin: center;
}

#root .inbox-home-trust-product-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.12;
}

#root .inbox-home-trust-product-copy strong {
  color: #0e243b;
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 800;
  letter-spacing: -0.04em;
}

#root .inbox-home-trust-product-copy small {
  margin-top: 5px;
  color: #597064;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#root .inbox-home-trust-relation {
  display: inline-grid;
  grid-template-columns: 30px auto 30px;
  align-items: center;
  gap: 9px;
  color: #587066;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

#root .inbox-home-trust-relation i {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46, 99, 79, 0.38));
}

#root .inbox-home-trust-relation i:last-child {
  transform: rotate(180deg);
}

#root .inbox-home-trust-company-logo {
  display: inline-flex;
  width: clamp(210px, 23vw, 272px);
  height: 84px;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(14, 47, 84, 0.1);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(23, 62, 49, 0.08);
}

#root .inbox-home-trust-company-logo img {
  display: block;
  width: 100% !important;
  max-width: 240px !important;
  height: 100% !important;
  max-height: 62px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

#root .inbox-home-trust-partnership-cross {
  flex: 0 0 auto;
  color: #17243b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  line-height: 1;
}

#root .inbox-home-trust-meta-logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  color: #17243b;
  line-height: 1;
}

#root .inbox-home-trust-meta-symbol {
  color: #0866ff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(39px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.15em;
  line-height: 0.75;
  text-indent: -0.08em;
}

#root .inbox-home-trust-meta-logo strong {
  color: inherit;
  font-size: clamp(27px, 2.8vw, 37px);
  font-weight: 500;
  letter-spacing: -0.045em;
}

#root .inbox-home-trust-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 28px auto 24px;
  text-align: center;
}

#root .inbox-home-trust-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: #087957;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#root .inbox-home-trust-copy h2 {
  margin: 0;
  color: #10213d;
  font-size: clamp(27px, 3.25vw, 42px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

#root .inbox-home-trust-copy p {
  max-width: 630px;
  margin: 12px auto 0;
  color: #536b62;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.58;
}

#root .inbox-home-trust-badges {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

#root .inbox-home-trust-badge {
  display: flex;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #20324c;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(45, 86, 75, 0.13);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(24, 70, 57, 0.07);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#root .inbox-home-trust-badge > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

#root .inbox-home-trust-badge strong {
  overflow-wrap: anywhere;
  color: inherit;
  font-size: clamp(14px, 1.35vw, 16px);
  font-weight: 750;
  line-height: 1.25;
}

#root .inbox-home-trust-badge small {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #6b7c77;
  font-size: 12px;
  line-height: 1.25;
}

#root .inbox-home-trust-badge-icon {
  display: inline-grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #0866ff;
  background: rgba(8, 102, 255, 0.08);
  border-radius: 13px;
}

#root .inbox-home-trust-badge-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

#root .inbox-home-trust-badge.is-whatsapp .inbox-home-trust-badge-icon {
  background: rgba(37, 211, 102, 0.11);
}

#root .inbox-home-trust-badge.is-whatsapp .inbox-home-trust-badge-icon svg circle {
  fill: #25d366;
}

#root .inbox-home-trust-badge.is-whatsapp .inbox-home-trust-badge-icon svg > path:not(.inbox-home-trust-phone) {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

#root .inbox-home-trust-badge.is-whatsapp .inbox-home-trust-phone {
  fill: #fff;
  transform: scale(0.56);
  transform-origin: center;
}

#root .inbox-home-trust-badge-icon.is-meta-loop {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 35px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.13em;
  text-indent: -0.08em;
}

#root .inbox-home-trust-badge-icon.is-partner svg {
  fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  #root .inbox-home-trust-badge:hover {
    border-color: rgba(8, 145, 102, 0.28);
    box-shadow: 0 12px 28px rgba(24, 70, 57, 0.11);
    transform: translateY(-2px);
  }
}

body.fx-home-dark-ui #root .inbox-home-trust-card {
  color: #eefcf6;
  background:
    radial-gradient(circle at 8% -20%, rgba(37, 211, 102, 0.2), transparent 40%),
    radial-gradient(circle at 95% 120%, rgba(47, 128, 255, 0.2), transparent 42%),
    linear-gradient(125deg, #06271d 0%, #08271f 46%, #0a2036 100%);
  border-color: rgba(139, 232, 194, 0.16);
  box-shadow: 0 24px 70px rgba(0, 8, 12, 0.32);
}

body.fx-home-dark-ui #root .inbox-home-trust-product-copy strong,
body.fx-home-dark-ui #root .inbox-home-trust-copy h2 {
  color: #f3fff9;
}

body.fx-home-dark-ui #root .inbox-home-trust-partnership-cross,
body.fx-home-dark-ui #root .inbox-home-trust-meta-logo {
  color: #f3fff9;
}

body.fx-home-dark-ui #root .inbox-home-trust-product-copy small,
body.fx-home-dark-ui #root .inbox-home-trust-relation,
body.fx-home-dark-ui #root .inbox-home-trust-copy p {
  color: #abc9bd;
}

body.fx-home-dark-ui #root .inbox-home-trust-relation i {
  background: linear-gradient(90deg, transparent, rgba(174, 224, 204, 0.38));
}

body.fx-home-dark-ui #root .inbox-home-trust-eyebrow {
  color: #6fe0b5;
}

body.fx-home-dark-ui #root .inbox-home-trust-badge {
  color: #edf7f3;
  background: rgba(7, 29, 37, 0.76);
  border-color: rgba(157, 211, 190, 0.16);
  box-shadow: 0 9px 28px rgba(0, 4, 9, 0.2);
}

body.fx-home-dark-ui #root .inbox-home-trust-badge small {
  color: #a8bdb6;
}

@media (max-width: 860px) {
  #root .inbox-home-trust {
    margin-top: -20px;
  }

  #root .inbox-home-trust-badges {
    grid-template-columns: 1fr;
    max-width: 650px;
    margin: 0 auto;
  }

  #root .inbox-home-trust-badge {
    min-height: 66px;
  }
}

@media (max-width: 600px) {
  #root .inbox-home-trust {
    margin-top: 0;
    padding: 0 14px 50px;
  }

  #root .inbox-home-trust-card {
    padding: 24px 16px 18px;
    border-radius: 24px;
    box-shadow: 0 16px 44px rgba(24, 69, 54, 0.1);
  }

  #root .inbox-home-trust-relationship {
    flex-direction: row;
    gap: 9px;
  }

  #root .inbox-home-trust-product {
    justify-content: center;
  }

  #root .inbox-home-trust-product-mark {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  #root .inbox-home-trust-relation {
    grid-template-columns: 36px auto 36px;
    font-size: 10px;
  }

  #root .inbox-home-trust-company-logo {
    width: 156px;
    height: 62px;
    padding: 8px 10px;
  }

  #root .inbox-home-trust-company-logo img {
    max-height: 48px !important;
  }

  #root .inbox-home-trust-partnership-cross {
    font-size: 25px;
  }

  #root .inbox-home-trust-meta-logo {
    gap: 4px;
  }

  #root .inbox-home-trust-meta-symbol {
    font-size: 34px;
  }

  #root .inbox-home-trust-meta-logo strong {
    font-size: 25px;
  }

  #root .inbox-home-trust-copy {
    margin: 23px auto 20px;
  }

  #root .inbox-home-trust-copy h2 {
    font-size: clamp(25px, 8vw, 33px);
  }

  #root .inbox-home-trust-copy p {
    font-size: 14px;
    line-height: 1.5;
  }

  #root .inbox-home-trust-badge {
    min-height: 64px;
    padding: 11px 13px;
    border-radius: 16px;
  }

  #root .inbox-home-trust-badge-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 380px) {
  #root .inbox-home-trust-card {
    padding-right: 12px;
    padding-left: 12px;
  }

  #root .inbox-home-trust-badge {
    gap: 10px;
    padding-right: 11px;
    padding-left: 11px;
  }

  #root .inbox-home-trust-badge strong {
    font-size: 14px;
  }

  #root .inbox-home-trust-badge small {
    font-size: 11px;
  }

  #root .inbox-home-trust-relationship {
    gap: 7px;
  }

  #root .inbox-home-trust-company-logo {
    width: 134px;
    height: 56px;
    padding: 7px 8px;
  }

  #root .inbox-home-trust-company-logo img {
    max-height: 42px !important;
  }

  #root .inbox-home-trust-partnership-cross {
    font-size: 21px;
  }

  #root .inbox-home-trust-meta-symbol {
    font-size: 30px;
  }

  #root .inbox-home-trust-meta-logo strong {
    font-size: 22px;
  }
}

/* ================================
   Adaptive header logo by location
================================ */

.fx-home #root .fx-home-nav .fx-home-brand {
  display: flex !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: min(31vw, 250px) !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* These defaults apply before JavaScript and stay constant while the sticky
   desktop navigation re-renders during scrolling. */
.fx-home #root .fx-home-nav .fx-home-brand .logo-box {
  width: var(--inbox-logo-width, 240px) !important;
  min-width: var(--inbox-logo-width, 240px) !important;
  max-width: var(--inbox-logo-width, 240px) !important;
  height: var(--inbox-logo-height, 56px) !important;
  min-height: var(--inbox-logo-height, 56px) !important;
  max-height: var(--inbox-logo-height, 56px) !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.fx-home #root .fx-home-nav .fx-home-brand .logo-box img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Mobile menu brand: one large, clickable logo without duplicate title text. */
.fx-home .fx-home-drawer .inbox-drawer-header {
  min-height: 76px !important;
}

.fx-home .fx-home-drawer .inbox-drawer-logo-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: min(100%, 208px) !important;
  min-width: 0 !important;
  cursor: pointer !important;
  border-radius: 12px !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.fx-home .fx-home-drawer .inbox-drawer-logo-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22) !important;
}

.fx-home .fx-home-drawer .inbox-drawer-brand-name {
  display: none !important;
}

.fx-home .fx-home-drawer .inbox-drawer-logo-box {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: var(--inbox-drawer-logo-width, 160px) !important;
  min-width: var(--inbox-drawer-logo-width, 160px) !important;
  max-width: var(--inbox-drawer-logo-width, 160px) !important;
  height: var(--inbox-drawer-logo-height, 48px) !important;
  min-height: var(--inbox-drawer-logo-height, 48px) !important;
  max-height: var(--inbox-drawer-logo-height, 48px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.fx-home .fx-home-drawer .inbox-drawer-logo {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
}

/* The loader prefers the square favicon and falls back to the full logo. */
#root .inbox-loader-brand-box {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#root .inbox-loader-brand-image {
  width: 100% !important;
  max-width: 64px !important;
  height: 100% !important;
  max-height: 64px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 0 !important;
  transform: scale(0.9) !important;
  transition: opacity 220ms ease, transform 280ms ease !important;
}

#root .inbox-loader-brand-image.is-ready {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.fx-home #root .fx-home-nav .fx-home-brand .inbox-adaptive-logo-box {
  width: var(--inbox-logo-width, 172px) !important;
  min-width: var(--inbox-logo-width, 172px) !important;
  max-width: var(--inbox-logo-width, 172px) !important;
  height: var(--inbox-logo-height, 50px) !important;
  min-height: var(--inbox-logo-height, 50px) !important;
  max-height: var(--inbox-logo-height, 50px) !important;
  flex: 0 0 var(--inbox-logo-width, 172px) !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.fx-home #root .fx-home-nav .fx-home-brand .inbox-adaptive-logo-box img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Optional admin-managed artwork for the four homepage feature tabs. */
#root .inbox-home-feature-default-hidden {
  display: none !important;
}

#root .inbox-home-feature-image {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 390px !important;
  margin: 0 !important;
  padding: clamp(10px, 1.8vw, 22px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.96), rgba(238, 242, 255, 0.9)) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12) !important;
}

#root .inbox-home-feature-image::before {
  content: "Loading preview…" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  font: 600 13px/1.4 Roboto, Arial, sans-serif !important;
}

#root .inbox-home-feature-image.is-ready::before {
  display: none !important;
}

#root .inbox-home-feature-image img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 560px !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 180ms ease !important;
}

#root .inbox-home-feature-image.is-ready img {
  opacity: 1 !important;
}

@media (max-width: 600px) {
  #root .inbox-home-feature-image {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }

  #root .inbox-home-feature-image img {
    max-height: none !important;
  }
}

@media (max-width: 768px) {
  .fx-home #root .fx-home-nav .fx-home-brand {
    max-width: 50vw !important;
  }

  .fx-home #root .fx-home-nav .fx-home-brand .logo-box {
    width: var(--inbox-logo-width, 158px) !important;
    min-width: var(--inbox-logo-width, 158px) !important;
    max-width: var(--inbox-logo-width, 158px) !important;
    height: var(--inbox-logo-height, 48px) !important;
    min-height: var(--inbox-logo-height, 48px) !important;
    max-height: var(--inbox-logo-height, 48px) !important;
  }
}

/* ================================
   Responsive hero inbox preview
================================ */

#root .inbox-ltr-metric {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  .fx-home #root .inbox-hero-demo-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto 0 !important;
    padding: 0 2px !important;
    perspective: none !important;
  }

  .fx-home #root .inbox-hero-demo {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .fx-home #root .inbox-hero-float-badge {
    max-width: calc(100% - 16px) !important;
  }

  .fx-home #root .inbox-hero-float-badge.is-start {
    top: -17px !important;
    left: 8px !important;
  }

  .fx-home #root .inbox-hero-float-badge.is-end {
    right: 6px !important;
    bottom: 8px !important;
  }

  .fx-home #root .inbox-hero-demo-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .fx-home #root .inbox-hero-channel-rail {
    display: none !important;
  }

  .fx-home #root .inbox-hero-thread-column {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.18) !important;
  }

  .fx-home #root .inbox-hero-thread-column > :first-child {
    margin-bottom: 9px !important;
  }

  .fx-home #root .inbox-hero-thread-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(154px, 72%) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 5px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: thin !important;
    overscroll-behavior-inline: contain !important;
  }

  .fx-home #root .inbox-hero-thread-list > * {
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }

  .fx-home #root .inbox-hero-active-chat {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
  }

  .fx-home #root .inbox-hero-active-chat .MuiPaper-root {
    padding: 11px !important;
    margin-bottom: 12px !important;
  }

  .fx-home #root .inbox-hero-active-chat p {
    overflow-wrap: anywhere !important;
  }

  .fx-home #root .inbox-hero-active-chat > :last-child > div {
    max-width: 92% !important;
  }
}

/* ================================
   Integrations & Partners Section
================================ */

#root .inbox-integrations-section {
  padding-top: 70px !important;
  padding-bottom: 80px !important;
  background: #ffffff !important;
  overflow: visible !important;
}

#root .inbox-integrations-section h1,
#root .inbox-integrations-section h2,
#root .inbox-integrations-section h3 {
  font-size: clamp(30px, 4vw, 52px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 18px !important;
  color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#root .inbox-integrations-section p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#root .inbox-integrations-section img,
#root .inbox-integrations-section svg {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

#root .inbox-integrations-section img {
  min-height: 44px !important;
  max-height: 82px !important;
  transform: scale(1.12) !important;
}

#root .inbox-integrations-section .inbox-partner-card {
  min-height: 105px !important;
  padding: 22px 26px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Generic partner/integration class fallback */
#root [class*="partner"] img,
#root [class*="Partner"] img,
#root [class*="integrat"] img,
#root [class*="Integrat"] img {
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
}

@media (max-width: 600px) {
  #root .inbox-integrations-section {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
  }

  #root .inbox-integrations-section h1,
  #root .inbox-integrations-section h2,
  #root .inbox-integrations-section h3 {
    font-size: 32px !important;
  }

  #root .inbox-integrations-section p {
    font-size: 15px !important;
  }

  #root .inbox-integrations-section .inbox-partner-card {
    min-height: 92px !important;
    padding: 18px 20px !important;
  }

  #root .inbox-integrations-section img {
    max-height: 66px !important;
    transform: scale(1.08) !important;
  }
}


/* MOBILE LOGO ZOOM FINAL START */

/* Desktop header logo, bigger and cleaner */
#root nav .logo-box,
#root header .logo-box {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 72px !important;
  overflow: visible !important;
}

#root nav .logo-box img,
#root header .logo-box img,
#root nav img[src*="/media/"],
#root header img[src*="/media/"] {
  width: 260px !important;
  max-width: 260px !important;
  height: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: scale(1.24) !important;
  transform-origin: left center !important;
}

/* Admin/User desktop topbar logo */
#root .MuiAppBar-root .logo-box,
#root .MuiDrawer-paper .logo-box {
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  height: 58px !important;
}

#root .MuiAppBar-root .logo-box img,
#root .MuiDrawer-paper .logo-box img,
#root .MuiAppBar-root img[src*="/media/"],
#root .MuiDrawer-paper img[src*="/media/"] {
  width: 210px !important;
  max-width: 210px !important;
  height: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: scale(1.18) !important;
  transform-origin: left center !important;
}

/* Mobile header logo, more zoom */
@media (max-width: 768px) {
  #root nav .logo-box,
  #root header .logo-box,
  #root .MuiAppBar-root .logo-box,
  #root .MuiDrawer-paper .logo-box {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    height: 56px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin-left: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #root nav .logo-box img,
  #root header .logo-box img,
  #root .MuiAppBar-root .logo-box img,
  #root .MuiDrawer-paper .logo-box img,
  #root nav img[src*="/media/"],
  #root header img[src*="/media/"],
  #root .MuiAppBar-root img[src*="/media/"],
  #root .MuiDrawer-paper img[src*="/media/"] {
    width: 190px !important;
    max-width: 190px !important;
    height: 56px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: scale(1.35) !important;
    transform-origin: left center !important;
  }

  #root nav .brand-text,
  #root header .brand-text,
  #root .MuiAppBar-root .brand-text,
  #root .MuiDrawer-paper .brand-text {
    display: none !important;
  }
}

/* Small mobile */
@media (max-width: 420px) {
  #root nav .logo-box,
  #root header .logo-box,
  #root .MuiAppBar-root .logo-box,
  #root .MuiDrawer-paper .logo-box {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    height: 52px !important;
  }

  #root nav .logo-box img,
  #root header .logo-box img,
  #root .MuiAppBar-root .logo-box img,
  #root .MuiDrawer-paper .logo-box img,
  #root nav img[src*="/media/"],
  #root header img[src*="/media/"],
  #root .MuiAppBar-root img[src*="/media/"],
  #root .MuiDrawer-paper img[src*="/media/"] {
    width: 170px !important;
    max-width: 170px !important;
    height: 52px !important;
    max-height: 52px !important;
    transform: scale(1.42) !important;
    transform-origin: left center !important;
  }
}

/* MOBILE LOGO ZOOM FINAL END */

/* ================================
   Final responsive brand sizing
================================ */

@media (max-width: 768px) {
  .fx-home #root .fx-home-brand {
    max-width: min(58vw, 210px) !important;
    overflow: visible !important;
  }

  .fx-home #root .fx-home-brand .logo-box {
    width: 158px !important;
    min-width: 158px !important;
    max-width: 158px !important;
    height: 48px !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .fx-home #root .fx-home-brand .logo-box img {
    width: 158px !important;
    max-width: 158px !important;
    height: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: scale(1.15) !important;
    transform-origin: left center !important;
  }
}

@media (max-width: 420px) {
  .fx-home #root .fx-home-brand .logo-box {
    width: 146px !important;
    min-width: 146px !important;
    max-width: 146px !important;
    height: 44px !important;
  }

  .fx-home #root .fx-home-brand .logo-box img {
    width: 146px !important;
    max-width: 146px !important;
    height: 44px !important;
    max-height: 44px !important;
  }
}

/* The compiled home page renders partner art at only 100x40. These rules
   keep each card balanced while making the uploaded company logo readable. */
#root .inbox-integrations-section .inbox-partner-card {
  min-width: 156px !important;
  min-height: 82px !important;
  padding: 14px 22px !important;
  overflow: visible !important;
}

#root .inbox-integrations-section .inbox-partner-card img[alt^="partner-"] {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 124px !important;
  max-height: 56px !important;
  transform: scale(1.12) !important;
  transform-origin: center !important;
}

@media (max-width: 600px) {
  #root .inbox-integrations-section .inbox-partner-card {
    min-width: 142px !important;
    min-height: 76px !important;
    padding: 12px 18px !important;
  }

  #root .inbox-integrations-section .inbox-partner-card img[alt^="partner-"] {
    max-width: 116px !important;
    max-height: 52px !important;
    transform: scale(1.1) !important;
  }
}

/* FINAL HOME LOGO LOCK — keep this last so no legacy rule can reintroduce
   the delayed 260px/scale(1.24) state before the homepage enhancer runs. */
#root nav .logo-box,
#root nav .logo-box:hover,
#root nav .logo-box:focus,
#root nav .logo-box:focus-visible,
#root nav .logo-box:active,
.fx-home #root .fx-home-nav .fx-home-brand .logo-box,
.fx-home #root .fx-home-nav .fx-home-brand .logo-box:hover,
.fx-home #root .fx-home-nav .fx-home-brand .logo-box:focus,
.fx-home #root .fx-home-nav .fx-home-brand .logo-box:active,
.fx-home #root .fx-home-nav .fx-home-brand:hover .logo-box,
.fx-home #root .fx-home-nav .fx-home-brand:focus-within .logo-box,
.fx-home #root .fx-home-nav .fx-home-brand:active .logo-box {
  width: var(--inbox-logo-width, 240px) !important;
  min-width: var(--inbox-logo-width, 240px) !important;
  max-width: var(--inbox-logo-width, 240px) !important;
  height: var(--inbox-logo-height, 56px) !important;
  min-height: var(--inbox-logo-height, 56px) !important;
  max-height: var(--inbox-logo-height, 56px) !important;
  flex: 0 0 var(--inbox-logo-width, 240px) !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
}

#root nav .logo-box img,
#root nav .logo-box:hover img,
#root nav .logo-box:focus img,
#root nav .logo-box:active img,
.fx-home #root .fx-home-nav .fx-home-brand .logo-box img,
.fx-home #root .fx-home-nav .fx-home-brand:hover .logo-box img,
.fx-home #root .fx-home-nav .fx-home-brand:focus-within .logo-box img,
.fx-home #root .fx-home-nav .fx-home-brand:active .logo-box img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

@media (max-width: 768px) {
  #root nav .logo-box,
  #root nav .logo-box:hover,
  #root nav .logo-box:focus,
  #root nav .logo-box:focus-visible,
  #root nav .logo-box:active,
  .fx-home #root .fx-home-nav .fx-home-brand .logo-box,
  .fx-home #root .fx-home-nav .fx-home-brand:hover .logo-box,
  .fx-home #root .fx-home-nav .fx-home-brand:focus-within .logo-box,
  .fx-home #root .fx-home-nav .fx-home-brand:active .logo-box {
    width: var(--inbox-logo-width, 158px) !important;
    min-width: var(--inbox-logo-width, 158px) !important;
    max-width: var(--inbox-logo-width, 158px) !important;
    height: var(--inbox-logo-height, 48px) !important;
    min-height: var(--inbox-logo-height, 48px) !important;
    max-height: var(--inbox-logo-height, 48px) !important;
    flex-basis: var(--inbox-logo-width, 158px) !important;
  }
}

@media (max-width: 420px) {
  #root nav .logo-box,
  #root nav .logo-box:hover,
  #root nav .logo-box:focus,
  #root nav .logo-box:focus-visible,
  #root nav .logo-box:active,
  .fx-home #root .fx-home-nav .fx-home-brand .logo-box,
  .fx-home #root .fx-home-nav .fx-home-brand:hover .logo-box,
  .fx-home #root .fx-home-nav .fx-home-brand:focus-within .logo-box,
  .fx-home #root .fx-home-nav .fx-home-brand:active .logo-box {
    width: var(--inbox-logo-width, 146px) !important;
    min-width: var(--inbox-logo-width, 146px) !important;
    max-width: var(--inbox-logo-width, 146px) !important;
    height: var(--inbox-logo-height, 44px) !important;
    min-height: var(--inbox-logo-height, 44px) !important;
    max-height: var(--inbox-logo-height, 44px) !important;
    flex-basis: var(--inbox-logo-width, 146px) !important;
  }
}