/* SocialHub product page. Product rules are scoped to its body class. */

body.tcs-socialhub-page {
  --sh-cyan: #52d7e8;
  --sh-green: #4ade80;
  --sh-panel: rgba(10, 33, 63, 0.88);
  --sh-panel-soft: rgba(18, 48, 84, 0.68);
  --sh-line: rgba(132, 200, 255, 0.25);
  --sh-soft: #c9dcf2;
  overflow-x: clip;
}

body.tcs-socialhub-page .tcs-section { position: relative; }
body.tcs-socialhub-page .tcs-sh-hero { width: min(calc(100% - 32px), 1320px); }
body.tcs-socialhub-page .tcs-sh-title .elementor-heading-title { max-width: 760px; font-size: clamp(2.45rem, 5.1vw, 5rem); }
body.tcs-socialhub-page .tcs-sh-eyebrow p { color: #9af4ff; background: rgba(82, 215, 232, 0.08); border-color: rgba(82, 215, 232, 0.32); }
body.tcs-socialhub-page .tcs-button-primary .elementor-button { color: #061529 !important; background: linear-gradient(135deg, #fde047, #facc15) !important; border-color: #facc15 !important; }
body.tcs-socialhub-page .tcs-button-secondary .elementor-button { color: #fff !important; background: linear-gradient(135deg, rgba(96, 165, 250, 0.24), rgba(96, 165, 250, 0.1)) !important; border-color: rgba(147, 197, 253, 0.38) !important; }
body.tcs-socialhub-page :where(.tcs-button-primary, .tcs-button-secondary) .elementor-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

body.tcs-socialhub-page .tcs-sh-trust.e-con > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}
body.tcs-socialhub-page .tcs-sh-trust-item p {
  min-height: 58px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 12px 14px 12px 36px;
  position: relative;
  color: #e8f5ff;
  background: rgba(82, 215, 232, 0.06);
  border: 1px solid rgba(82, 215, 232, 0.2);
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}
body.tcs-socialhub-page .tcs-sh-trust-item p::before { position: absolute; left: 14px; color: var(--sh-cyan); content: "\2713"; font-weight: 900; }

body.tcs-socialhub-page .tcs-sh-product-frame {
  overflow: hidden;
  color: #17314d;
  background: #f5f8fc;
  border: 1px solid rgba(132, 200, 255, 0.4);
  border-radius: 20px;
  box-shadow: 0 30px 78px rgba(0, 0, 0, 0.36), 0 0 40px rgba(82, 215, 232, 0.1);
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
}
body.tcs-socialhub-page .tcs-sh-window-bar { display: flex; align-items: center; gap: 7px; min-height: 43px; padding: 0 15px; background: #e9f0f7; border-bottom: 1px solid #d5e1ec; }
body.tcs-socialhub-page .tcs-sh-window-bar i { width: 9px; height: 9px; background: #ffbd44; border-radius: 50%; }
body.tcs-socialhub-page .tcs-sh-window-bar i:first-child { background: #ff605c; }
body.tcs-socialhub-page .tcs-sh-window-bar i:nth-child(3) { background: #00ca4e; }
body.tcs-socialhub-page .tcs-sh-window-bar strong { margin-left: 6px; color: #16304e; font-size: 0.78rem; }
body.tcs-socialhub-page .tcs-sh-ui { display: grid; grid-template-columns: 126px minmax(0, 1fr); min-height: 400px; }
body.tcs-socialhub-page .tcs-sh-ui-nav { padding: 20px 12px; color: #cbdcf0; background: #0a2444; }
body.tcs-socialhub-page .tcs-sh-ui-brand { margin-bottom: 22px; color: #fff; font-weight: 800; }
body.tcs-socialhub-page .tcs-sh-ui-nav span { display: block; margin: 7px 0; padding: 8px 9px; border-radius: 8px; font-size: 0.72rem; }
body.tcs-socialhub-page .tcs-sh-ui-nav span:first-of-type { color: #071a33; background: var(--sh-cyan); font-weight: 800; }
body.tcs-socialhub-page .tcs-sh-ui-main { padding: 20px; }
body.tcs-socialhub-page .tcs-sh-ui-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
body.tcs-socialhub-page .tcs-sh-ui-head strong { color: #153453; font-size: 1.08rem; }
body.tcs-socialhub-page .tcs-sh-status { padding: 6px 9px; color: #117047; background: #ddf8e9; border: 1px solid #afe7ca; border-radius: 999px; font-size: 0.66rem; font-weight: 800; }
body.tcs-socialhub-page .tcs-sh-ui-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
body.tcs-socialhub-page .tcs-sh-ui-card { min-height: 80px; padding: 11px; background: #fff; border: 1px solid #dbe5ee; border-radius: 10px; box-shadow: 0 8px 18px rgba(22, 52, 82, 0.07); }
body.tcs-socialhub-page .tcs-sh-ui-card small { display: block; color: #718398; font-size: 0.65rem; }
body.tcs-socialhub-page .tcs-sh-ui-card b { display: block; margin-top: 8px; color: #193a5b; font-size: 0.78rem; }
body.tcs-socialhub-page .tcs-sh-queue { margin-top: 12px; padding: 12px; background: #fff; border: 1px solid #dbe5ee; border-radius: 11px; }
body.tcs-socialhub-page .tcs-sh-queue-title { display: flex; justify-content: space-between; margin-bottom: 8px; color: #193a5b; font-size: 0.76rem; font-weight: 800; }
body.tcs-socialhub-page .tcs-sh-queue-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; padding: 9px 2px; color: #4e647b; border-top: 1px solid #edf1f5; font-size: 0.68rem; }
body.tcs-socialhub-page .tcs-sh-queue-row i { width: 7px; height: 7px; background: var(--sh-green); border-radius: 50%; }
body.tcs-socialhub-page .tcs-sh-queue-row em { color: #678096; font-style: normal; font-weight: 700; }

body.tcs-socialhub-page .tcs-sh-card::before { display: none !important; content: none !important; }
body.tcs-socialhub-page .tcs-sh-card { min-width: 0; padding: clamp(23px, 3vw, 34px); background: radial-gradient(circle at 90% 10%, rgba(82, 215, 232, 0.1), transparent 34%), var(--sh-panel-soft); border-color: var(--sh-line); }
body.tcs-socialhub-page .tcs-sh-icon { display: flex; width: 52px; height: 52px; margin-bottom: 20px; align-items: center; justify-content: center; color: var(--sh-cyan); background: rgba(82, 215, 232, 0.08); border: 1px solid rgba(82, 215, 232, 0.25); border-radius: 15px; font-size: 23px; }
body.tcs-socialhub-page .tcs-sh-icon .elementor-icon { color: inherit; }
body.tcs-socialhub-page .tcs-sh-workflow-grid.e-con > .e-con-inner { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

body.tcs-socialhub-page .tcs-sh-before-after.e-con > .e-con-inner,
body.tcs-socialhub-page .tcs-sh-mode-grid.e-con > .e-con-inner,
body.tcs-socialhub-page .tcs-sh-origin.e-con > .e-con-inner,
body.tcs-socialhub-page .tcs-sh-honesty.e-con > .e-con-inner { align-items: stretch !important; }
body.tcs-socialhub-page .tcs-sh-before-after.e-con > .e-con-inner,
body.tcs-socialhub-page .tcs-sh-mode-grid.e-con > .e-con-inner { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; margin-top: 34px; }
body.tcs-socialhub-page .tcs-sh-list ul,
body.tcs-socialhub-page .tcs-sh-pricing-list ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
body.tcs-socialhub-page :where(.tcs-sh-list, .tcs-sh-pricing-list) li { position: relative; padding-left: 26px; }
body.tcs-socialhub-page :where(.tcs-sh-list, .tcs-sh-pricing-list) li::before { position: absolute; left: 0; color: var(--sh-cyan); content: "\2713"; font-weight: 900; }
body.tcs-socialhub-page .tcs-sh-before-card:first-child { border-color: rgba(248, 113, 113, 0.25); }
body.tcs-socialhub-page .tcs-sh-before-card:first-child li::before { color: #fda4af; content: "\2022"; }
body.tcs-socialhub-page .tcs-sh-mode-card { min-height: 100%; }
body.tcs-socialhub-page .tcs-sh-mode-card:last-child { border-color: rgba(82, 215, 232, 0.46); box-shadow: 0 22px 58px rgba(0, 0, 0, 0.25), 0 0 32px rgba(82, 215, 232, 0.08); }
body.tcs-socialhub-page .tcs-sh-mode-micro p { margin: 20px 0 0; padding-top: 18px; color: #fff; border-top: 1px solid var(--sh-line); font-weight: 800; }
body.tcs-socialhub-page .tcs-sh-api-note { max-width: 980px; margin-top: 24px; padding: 16px 18px; background: rgba(82, 215, 232, 0.06); border: 1px solid var(--sh-line); border-radius: 12px; }
body.tcs-socialhub-page .tcs-sh-api-note p { margin: 0; color: var(--sh-soft); font-size: 0.92rem; }

body.tcs-socialhub-page .tcs-sh-platform-panel { padding: clamp(30px, 5vw, 58px); background: radial-gradient(circle at 85% 10%, rgba(82, 215, 232, 0.12), transparent 36%), var(--sh-panel); border: 1px solid var(--sh-line); border-radius: 26px; }
body.tcs-socialhub-page .tcs-sh-platforms { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; }
body.tcs-socialhub-page .tcs-sh-platform { display: inline-flex; min-width: 190px; min-height: 74px; align-items: center; gap: 13px; padding: 15px 20px; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--sh-line); border-radius: 14px; font-size: 1.12rem; font-weight: 800; }
body.tcs-socialhub-page .tcs-sh-platform i { color: var(--sh-cyan); font-size: 28px; }

body.tcs-socialhub-page .tcs-sh-private { width: min(calc(100% - 32px), 1280px); padding: clamp(38px, 5.5vw, 72px); background: radial-gradient(circle at 85% 8%, rgba(82, 215, 232, 0.12), transparent 34%), linear-gradient(145deg, #07162c, #0a294b); border: 1px solid rgba(82, 215, 232, 0.28) !important; border-radius: 30px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3); }
body.tcs-socialhub-page .tcs-sh-private-grid.e-con > .e-con-inner { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 16px !important; margin-top: 36px; }
body.tcs-socialhub-page .tcs-sh-private-grid.e-con > .e-con-inner > .e-con { grid-column: span 2; }
body.tcs-socialhub-page .tcs-sh-private-grid.e-con > .e-con-inner > .e-con:nth-last-child(-n + 2) { grid-column: span 3; }
body.tcs-socialhub-page .tcs-sh-private-card { min-height: 250px; }

body.tcs-socialhub-page .tcs-sh-quote { padding: clamp(28px, 4vw, 48px); background: rgba(82, 215, 232, 0.07); border-left: 4px solid var(--sh-cyan); border-radius: 0 18px 18px 0; }
body.tcs-socialhub-page .tcs-sh-quote p { margin: 0; color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 760; line-height: 1.45; }
body.tcs-socialhub-page .tcs-sh-audience-grid.e-con > .e-con-inner { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
body.tcs-socialhub-page .tcs-sh-audience-card { min-height: 245px; }

body.tcs-socialhub-page .tcs-sh-pricing-card { max-width: 940px; margin: 34px auto 0; padding: clamp(30px, 5vw, 58px); background: radial-gradient(circle at 90% 8%, rgba(250, 204, 21, 0.14), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)), #09213e; border: 1px solid rgba(250, 204, 21, 0.48); border-radius: 28px; box-shadow: 0 30px 78px rgba(0, 0, 0, 0.32), 0 0 38px rgba(250, 204, 21, 0.08); }
body.tcs-socialhub-page .tcs-sh-price-block p { margin: 12px 0; }
body.tcs-socialhub-page .tcs-sh-price-block strong { display: block; color: var(--tcs-gold); font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: -0.05em; line-height: 1; }
body.tcs-socialhub-page .tcs-sh-price-block span { display: block; margin-top: 6px; color: #fff; font-size: 1.03rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
body.tcs-socialhub-page .tcs-sh-price-plus { color: var(--sh-soft); font-size: 0.88rem; font-weight: 900; letter-spacing: 0.12em; }
body.tcs-socialhub-page .tcs-sh-pricing-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
body.tcs-socialhub-page .tcs-sh-price-callout p { margin: 26px 0 0; padding: 17px; color: #071a33; background: var(--tcs-gold); border-radius: 12px; font-weight: 900; text-align: center; }
body.tcs-socialhub-page .tcs-sh-addons.e-con > .e-con-inner { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; max-width: 940px; margin: 18px auto 0; }
body.tcs-socialhub-page .tcs-sh-disclosure { max-width: 940px; margin: 20px auto 0; }
body.tcs-socialhub-page .tcs-sh-disclosure p { color: var(--sh-soft); font-size: 0.86rem; }

body.tcs-socialhub-page .tcs-sh-comparison-wrap { margin-top: 34px; overflow-x: auto; border: 1px solid var(--sh-line); border-radius: 18px; }
body.tcs-socialhub-page .tcs-sh-comparison { width: 100%; min-width: 680px; border-collapse: collapse; background: rgba(10, 33, 63, 0.66); }
body.tcs-socialhub-page .tcs-sh-comparison th,
body.tcs-socialhub-page .tcs-sh-comparison td { padding: 17px 20px; color: var(--sh-soft); border-bottom: 1px solid var(--sh-line); text-align: left; }
body.tcs-socialhub-page .tcs-sh-comparison th { color: #fff; background: rgba(82, 215, 232, 0.08); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
body.tcs-socialhub-page .tcs-sh-comparison th:last-child,
body.tcs-socialhub-page .tcs-sh-comparison td:last-child { color: #fff; background: rgba(82, 215, 232, 0.045); font-weight: 700; }
body.tcs-socialhub-page .tcs-sh-comparison tr:last-child td { border-bottom: 0; }

body.tcs-socialhub-page .tcs-sh-honesty-panel { padding: clamp(30px, 5vw, 58px); background: radial-gradient(circle at 85% 10%, rgba(250, 204, 21, 0.1), transparent 36%), var(--sh-panel); border: 1px solid rgba(250, 204, 21, 0.28); border-radius: 24px; }
body.tcs-socialhub-page .tcs-sh-faq { max-width: 1000px; margin-top: 34px; }
body.tcs-socialhub-page .tcs-sh-faq .elementor-accordion-item { overflow: hidden; margin-bottom: 12px; background: rgba(12, 35, 67, 0.72); border: 1px solid var(--sh-line) !important; border-radius: 14px; }
body.tcs-socialhub-page .tcs-sh-faq .elementor-tab-title { padding: 20px 22px !important; color: #fff !important; border: 0 !important; font-weight: 750; }
body.tcs-socialhub-page .tcs-sh-faq .elementor-tab-title:is(:hover, :focus-visible, .elementor-active) { color: var(--sh-cyan) !important; background: rgba(82, 215, 232, 0.05); }
body.tcs-socialhub-page .tcs-sh-faq .elementor-tab-content { padding: 0 22px 22px !important; color: var(--sh-soft) !important; border: 0 !important; }
body.tcs-socialhub-page .tcs-sh-faq .elementor-accordion-icon { color: var(--sh-cyan) !important; }
body.tcs-socialhub-page .tcs-sh-final { background: radial-gradient(circle at 20% 20%, rgba(96, 165, 250, 0.24), transparent 40%), radial-gradient(circle at 85% 80%, rgba(82, 215, 232, 0.13), transparent 36%), #06152b; border-color: rgba(82, 215, 232, 0.28); }

/* Contextual card on the existing Custom Business Apps page only. */
body.tcs-modern-site .tcs-sh-parent-promo { padding: clamp(28px, 4vw, 48px); background: radial-gradient(circle at 90% 12%, rgba(82, 215, 232, 0.12), transparent 34%), linear-gradient(135deg, rgba(96, 165, 250, 0.16), rgba(255, 255, 255, 0.06)); border: 1px solid rgba(82, 215, 232, 0.28) !important; border-radius: 22px; }
body.tcs-modern-site .tcs-sh-parent-promo.e-con > .e-con-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; }

@media (max-width: 1100px) {
  body.tcs-socialhub-page .tcs-sh-private-grid.e-con > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.tcs-socialhub-page .tcs-sh-private-grid.e-con > .e-con-inner > .e-con,
  body.tcs-socialhub-page .tcs-sh-private-grid.e-con > .e-con-inner > .e-con:nth-last-child(-n + 2) { grid-column: span 1; }
  body.tcs-socialhub-page .tcs-sh-private-grid.e-con > .e-con-inner > .e-con:last-child { grid-column: 1 / -1; }
  body.tcs-socialhub-page .tcs-sh-audience-grid.e-con > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 1024px) {
  body.tcs-socialhub-page .tcs-sh-product-frame { max-width: 760px; margin-inline: auto; transform: none; }
  body.tcs-socialhub-page .tcs-sh-trust.e-con > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tcs-socialhub-page .tcs-sh-workflow-grid.e-con > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.tcs-socialhub-page .tcs-sh-audience-grid.e-con > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.tcs-socialhub-page .tcs-sh-audience-grid.e-con > .e-con-inner > .e-con:last-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  body.tcs-socialhub-page .tcs-sh-hero,
  body.tcs-socialhub-page .tcs-sh-private { width: min(calc(100% - 24px), 100%); padding: 28px 18px; border-radius: 20px; }
  body.tcs-socialhub-page .tcs-sh-title .elementor-heading-title { font-size: clamp(2.08rem, 10.5vw, 3.25rem); }
  body.tcs-socialhub-page .tcs-sh-trust.e-con > .e-con-inner,
  body.tcs-socialhub-page .tcs-sh-before-after.e-con > .e-con-inner,
  body.tcs-socialhub-page .tcs-sh-mode-grid.e-con > .e-con-inner,
  body.tcs-socialhub-page .tcs-sh-workflow-grid.e-con > .e-con-inner,
  body.tcs-socialhub-page .tcs-sh-private-grid.e-con > .e-con-inner,
  body.tcs-socialhub-page .tcs-sh-audience-grid.e-con > .e-con-inner,
  body.tcs-socialhub-page .tcs-sh-addons.e-con > .e-con-inner { grid-template-columns: 1fr !important; }
  body.tcs-socialhub-page .tcs-sh-private-grid.e-con > .e-con-inner > .e-con,
  body.tcs-socialhub-page .tcs-sh-private-grid.e-con > .e-con-inner > .e-con:last-child,
  body.tcs-socialhub-page .tcs-sh-audience-grid.e-con > .e-con-inner > .e-con:last-child { grid-column: auto; }
  body.tcs-socialhub-page .tcs-sh-ui { grid-template-columns: 1fr; min-height: 0; }
  body.tcs-socialhub-page .tcs-sh-ui-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
  body.tcs-socialhub-page .tcs-sh-ui-brand { width: 100%; margin: 2px 4px 6px; }
  body.tcs-socialhub-page .tcs-sh-ui-nav span { margin: 0; padding: 6px 8px; }
  body.tcs-socialhub-page .tcs-sh-ui-main { padding: 12px; }
  body.tcs-socialhub-page .tcs-sh-ui-cards { grid-template-columns: 1fr; }
  body.tcs-socialhub-page .tcs-sh-ui-card { min-height: 0; }
  body.tcs-socialhub-page .tcs-sh-pricing-list ul { grid-template-columns: 1fr; }
  body.tcs-socialhub-page .tcs-sh-platform { width: 100%; }
  body.tcs-socialhub-page .tcs-sh-comparison-wrap { overflow-x: visible; }
  body.tcs-socialhub-page .tcs-sh-comparison { min-width: 0; table-layout: fixed; }
  body.tcs-socialhub-page .tcs-sh-comparison th,
  body.tcs-socialhub-page .tcs-sh-comparison td { padding: 14px 11px; overflow-wrap: anywhere; }
  body.tcs-modern-site .tcs-sh-parent-promo.e-con > .e-con-inner { grid-template-columns: 1fr; }
  body.tcs-modern-site .tcs-sh-parent-promo .elementor-button-wrapper,
  body.tcs-modern-site .tcs-sh-parent-promo .elementor-button { width: 100%; }
}

@media (max-width: 390px) {
  body.tcs-socialhub-page .tcs-sh-card,
  body.tcs-socialhub-page .tcs-sh-pricing-card { padding: 22px 18px; }
  body.tcs-socialhub-page .tcs-sh-queue-row { grid-template-columns: 8px 1fr; }
  body.tcs-socialhub-page .tcs-sh-queue-row em { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  body.tcs-socialhub-page *,
  body.tcs-socialhub-page *::before,
  body.tcs-socialhub-page *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}