:root {
  --ts-color-navy: #0E3A53;
  --ts-color-navy-soft: #134760;
  --ts-color-navy-dark: #050816;
  --ts-color-accent-teal: #00E5FF;
  --ts-color-accent-purple: #4C6FFF;
  --ts-color-orange: #E87722;
  --ts-color-orange-soft: #f39a54;
  --ts-bg-body: #F8F8F6;
  --ts-bg-surface: #F2F5F7;
  --ts-bg-surface-dark: #0B1020;
  --ts-border-subtle: #E0E4EA;
  --ts-text-main: #1D1F21;
  --ts-text-muted: #555B65;
  --ts-radius-sm: 6px;
  --ts-radius-md: 10px;
  --ts-radius-lg: 16px;
  --ts-radius-card: 14px;
  --ts-shadow-subtle: 0 10px 30px rgba(15, 23, 42, 0.06);
  --ts-shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
  --ts-shadow-card: 0 10px 20px rgba(0, 0, 0, 0.04);
  --ts-space-1: 4px;
  --ts-space-2: 8px;
  --ts-space-3: 12px;
  --ts-space-4: 16px;
  --ts-space-5: 24px;
  --ts-space-6: 32px;
  --ts-space-7: 48px;
  /* Generic theme aliases for marketing + app */
  --color-primary: var(--ts-color-navy);
  --color-accent: var(--ts-color-accent-teal);
  --color-bg: var(--ts-bg-body);
  --color-muted: var(--ts-text-muted);
  --color-text: var(--ts-text-main);
}

:root {
  --sidebar-bg: #0E3A53;
  --sidebar-hover: #134760;
  --sidebar-active: #123347;
  --sidebar-text: #E5EDF4;
  --sidebar-text-muted: #9CAAC0;
  --primary-color: #0E3A53;
  --primary-hover: #0B3045;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--ts-bg-body);
  color: var(--ts-text-main);
  line-height: 1.6;
}

 .ts-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
 }

 .ts-brand-logo {
  display: block;
  height: auto;
 }

 .ts-brand-text {
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
 }

 .ts-brand-ai {
  color: var(--ts-color-accent-teal);
  font-weight: 700;
 }

 .ts-error-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ts-space-6) var(--ts-space-4);
  background:
    radial-gradient(circle at top left, rgba(0, 229, 255, 0.10) 0, transparent 45%),
    radial-gradient(circle at bottom right, rgba(232, 119, 34, 0.10) 0, transparent 45%),
    var(--ts-bg-body);
 }

 .ts-error-card {
  width: 100%;
  max-width: 560px;
  border-radius: var(--ts-radius-lg);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: var(--ts-shadow-soft);
  background: rgba(255, 255, 255, 0.92);
  padding: var(--ts-space-6);
 }

 .ts-error-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--ts-space-5);
 }

 .ts-error-brand-text {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ts-text-main);
 }

 .ts-error-code {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ts-text-muted);
  margin-bottom: var(--ts-space-2);
 }

 .ts-error-title {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: var(--ts-space-3);
 }

 .ts-error-message {
  margin-bottom: var(--ts-space-5);
  color: var(--ts-text-muted);
 }

 .ts-error-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
 }

 .ts-error-meta {
  margin-top: var(--ts-space-5);
  font-size: 0.85rem;
  color: var(--ts-text-muted);
 }

 .ts-error-request-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--ts-text-main);
 }

h1,
 h2,
 h3,
 h4 {
  color: var(--ts-text-main);
  letter-spacing: -0.01em;
}

h1 {
  font-weight: 700;
}

h2,
 h3 {
  font-weight: 600;
}

p {
  color: var(--ts-text-muted);
}

a {
  color: var(--ts-color-navy);
}

a:hover {
  color: var(--ts-color-orange);
}

.prose img {
  max-width: 100%;
  height: auto;
}

.prose {
  overflow-wrap: anywhere;
}

.help-article-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media (max-width: 575.98px) {
  .help-article-title {
    font-size: 28px;
  }
}

.help-article-meta {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(85, 91, 101, 0.9) !important;
}

.help-article-prose {
  font-size: 16px;
  line-height: 1.7;
}

.help-article-prose h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 32px;
  margin-bottom: 12px;
}

.help-article-prose h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 22px;
  margin-bottom: 10px;
}

.help-article-prose p {
  margin-bottom: 12px;
}

.help-article-prose ul,
.help-article-prose ol {
  margin-bottom: 14px;
}

.help-article-prose li + li {
  margin-top: 4px;
}

.btn-primary {
  background-color: var(--ts-color-orange);
  border-color: var(--ts-color-orange);
  box-shadow: 0 10px 24px rgba(14, 58, 83, 0.28);
}

.btn-primary:hover,
 .btn-primary:focus {
  background-color: #c65e18;
  border-color: #c65e18;
  box-shadow: 0 14px 30px rgba(14, 58, 83, 0.35);
}

.btn-outline-primary {
  color: var(--ts-color-navy);
  border-color: var(--ts-color-navy);
}

.btn-outline-primary:hover,
 .btn-outline-primary:focus {
  background-color: var(--ts-color-navy);
  color: #ffffff;
}

.btn-outline-secondary {
  color: var(--ts-color-orange);
  border-color: var(--ts-color-orange);
}

.btn-outline-secondary:hover,
 .btn-outline-secondary:focus {
  background-color: var(--ts-color-orange);
  color: #ffffff;
  border-color: var(--ts-color-orange);
}

 .ts-admin-action-group {
  gap: 0.35rem !important;
 }

 .ts-admin-action-btn {
  height: 32px;
  border-radius: 10px;
  padding: 0 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 }

 .ts-admin-action-btn i {
  line-height: 1;
 }

 .ts-admin-action-btn:hover,
 .ts-admin-action-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
 }

 .ts-admin-action-btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(14, 58, 83, 0.18), 0 10px 24px rgba(15, 23, 42, 0.12);
 }

 .ts-admin-action-btn.ts-icon-only {
  width: 34px;
  padding: 0;
 }

 .ts-admin-action-pill {
  border-radius: 999px;
  gap: 0.35rem;
 }

.ts-btn-cta {
  padding-inline: 1.75rem;
  padding-block: 0.75rem;
  border-radius: 999px;
}

.card {
  border-radius: var(--ts-radius-card);
  box-shadow: var(--ts-shadow-card);
  border: 1px solid var(--ts-border-subtle);
}

.card.border-0 {
  border-color: transparent;
}

.ts-card-elevated {
  box-shadow: var(--ts-shadow-soft);
}

.ts-page {
  padding-top: var(--ts-space-6);
  padding-bottom: var(--ts-space-7);
}

.ts-section {
  margin-bottom: var(--ts-space-6);
}

.ts-section-muted {
  background-color: var(--ts-bg-surface);
  border-radius: var(--ts-radius-lg);
  padding: var(--ts-space-5);
}

.ts-section-band {
  border-radius: var(--ts-radius-lg);
  padding: var(--ts-space-5);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.ts-section-band-light {
  background-color: var(--ts-bg-surface);
}

.ts-section-band-dark {
  background-color: rgba(14, 58, 83, 0.08);
}

.ts-section-band h1,
 .ts-section-band h2,
 .ts-section-band h3 {
  position: relative;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.ts-section-band h1::after,
 .ts-section-band h2::after,
 .ts-section-band h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ts-color-accent), var(--ts-color-orange-soft));
}

.ts-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  background-color: rgba(14, 58, 83, 0.05);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
}

.ts-hero-shell {
  position: relative;
  overflow: hidden;
  border-radius: var(--ts-radius-lg);
  background:
    radial-gradient(circle at top left, rgba(0, 229, 255, 0.25) 0, transparent 45%),
    linear-gradient(135deg, #050816 0, #0E3A53 45%, #050816 100%);
  padding: var(--ts-space-6);
  color: #ffffff;
  box-shadow: var(--ts-shadow-soft);
}

.ts-hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(90deg, rgba(148, 163, 184, 0.25) 1px, transparent 0),
    linear-gradient(180deg, rgba(148, 163, 184, 0.25) 1px, transparent 0);
  background-size: 32px 32px;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.ts-hero-shell > .row {
  position: relative;
  z-index: 1;
  align-items: center;
}

.ts-hero-shell h1,
 .ts-hero-shell p,
 .ts-hero-shell span {
  color: #ffffff;
}

.ts-hero-shell .badge {
  background-color: rgba(232, 119, 34, 0.18);
  color: #ffd2a7;
}

.ts-hero-shell .ts-hero-subcopy {
  color: rgba(248, 248, 246, 0.82);
}

.ts-hero-shell .form-control {
  border-radius: 999px;
}

 .ts-hero-shell .ts-hero-card {
  background: rgba(6, 22, 35, 0.85);
  border-radius: var(--ts-radius-md);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
}

/* Global layout shell: make the app a flex column so the shared footer
   can sit at the very bottom of the viewport when content is short,
   and be pushed down naturally when content is long. */
html,
body {
  height: 100%;
}

body.ts-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ts-page-main {
  flex: 1 0 auto;
}

body.ts-has-sidebar .ts-page-main {
  padding-bottom: 0;
}

.ts-footer {
  background-color: #0E3A53;
  color: rgba(248, 248, 246, 0.8);
  padding-block: var(--ts-space-3);
  clear: both;
  width: 100%;
  font-size: 0.8rem;
  line-height: 1.3;
  /* Compact vertical rhythm while keeping a bit of air above */
  margin-top: var(--ts-space-1);
}

.ts-footer .container {
  max-width: 100%;
}

.ts-footer-main {
  min-height: 3.25rem;
}

.ts-footer-legal {
  row-gap: 0.1rem;
}

.ts-footer .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
  row-gap: var(--ts-space-1);
}

.ts-footer .col-md-4 {
  flex: 0 0 auto;
  width: 100%;
  padding: 0 12px;
}

.ts-footer a {
  color: rgba(248, 248, 246, 0.8);
}

.ts-footer a:hover {
  color: #ffffff;
}

.ts-footer-brand {
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}

.ts-footer .ts-footer-muted {
  color: rgba(248, 248, 246, 0.65);
  font-size: 0.75rem;
}

.ts-footer h6 {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

/* Slightly reduce gap between the three main columns and the
   copyright line to keep the footer band from feeling too tall. */
.ts-footer .border-top {
  margin-top: 0.5rem !important;
  padding-top: 0.25rem !important;
}

@media (min-width: 768px) {
  .ts-footer .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  
  .ts-footer .col-md-4 + .col-md-4 {
    border-left: 1px solid rgba(148, 163, 184, 0.35);
    padding-left: var(--ts-space-5);
  }

  /* Columnize Product links to keep the footer height tight. */
  .ts-footer .col-md-4:nth-child(2) ul.ts-footer-muted {
    column-count: 2;
    column-gap: var(--ts-space-4);
  }

  .ts-footer .col-md-4:nth-child(2) ul.ts-footer-muted li {
    break-inside: avoid;
    margin-bottom: 2px;
  }

  /* Make the long Trust & Legal list flow into two columns so
     the overall footer band is shorter while keeping all links.
     The markup is a ts-footer-muted div with direct child links
     and a trailing span notice. */
  .ts-footer .col-md-4:last-child .ts-footer-muted {
    display: block !important; /* override Bootstrap d-flex */
    column-count: 2;
    column-gap: var(--ts-space-4);
  }

  .ts-footer .col-md-4:last-child .ts-footer-muted > a,
  .ts-footer .col-md-4:last-child .ts-footer-muted > span {
    display: block;
    break-inside: avoid;
    margin-bottom: 2px;
  }
}

.section.dashboard {
  padding-top: var(--ts-space-4);
  padding-bottom: var(--ts-space-6);
  background-color: #F3F4F6;
}

.score-card {
  border-radius: 14px;
  border: 1px solid var(--ts-border-subtle);
  box-shadow: var(--ts-shadow-subtle);
  background-color: #FFFFFF;
}

.score-card .card-body {
  padding: 1.25rem 1.5rem;
}

.pagetitle h1 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ts-color-navy);
}

.alert-info {
  background-color: #e1edf7;
  border-color: #d0dff0;
  color: #123347;
}

.alert-warning {
  background-color: #fff4e5;
  border-color: #ffe0b2;
  color: #7b4b04;
}

.alert-danger {
  background-color: #fde8ea;
  border-color: #f7c5cd;
}

.alert-info,
.alert-warning,
.alert-danger {
  border-radius: 12px;
  border-width: 1px;
  box-shadow: var(--ts-shadow-subtle);
  padding: 0.75rem 1rem;
}

.badge {
  border-radius: 999px;
  font-weight: 500;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
}

.badge.bg-primary,
 .badge.bg-info {
  background-color: var(--ts-color-navy) !important;
}

.badge.bg-warning {
  background-color: #facc15 !important;
}

.badge.bg-secondary {
  background-color: #4b5563 !important;
}

.btn-warning {
  background-color: #facc15;
  border-color: #facc15;
}

.btn-warning:hover,
 .btn-warning:focus {
  background-color: #eab308;
  border-color: #eab308;
}

.navbar-brand i {
  font-size: 1.4rem;
}

/* Feature & step cards */
.ts-feature-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(0, 229, 255, 0.2), rgba(5, 8, 22, 0.9));
  color: #e0f7ff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(0, 229, 255, 0.6);
}

.ts-feature-icon-circle i {
  font-size: 1.45rem;
}

.ts-feature-icon-accent {
  background: radial-gradient(circle at top, rgba(232, 119, 34, 0.25), rgba(5, 8, 22, 0.9));
  color: #ffe8d0;
  border-color: rgba(232, 119, 34, 0.7);
}

.ts-feature-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  border-radius: var(--ts-radius-card) !important;
  box-shadow: var(--ts-shadow-card) !important;
}

.ts-features-page .ts-feature-card {
  position: relative;
  justify-content: flex-start;
  padding-top: 5rem;
}

.ts-features-page .ts-feature-icon-wrap {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0 !important;
}

.ts-features-page .ts-feature-icon-circle {
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
}

.ts-features-page .ts-feature-icon-circle i {
  font-size: 1.45rem !important;
}

.ts-features-page .ts-card-hover {
  padding: 0 !important;
}

.ts-feature-card-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--ts-space-2);
}

.ts-feature-card p {
  font-size: 0.9rem;
}

.ts-feature-card ul {
  width: 100%;
  text-align: left;
  margin-bottom: 0;
  padding-left: 1.2rem;
}

.ts-step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  justify-content: center;
  border-radius: var(--ts-radius-card) !important;
  box-shadow: var(--ts-shadow-card) !important;
}

.ts-step-card .ts-feature-icon-circle {
  margin-bottom: var(--ts-space-2);
}

.ts-step-card h5 {
  margin-bottom: var(--ts-space-2);
}

.ts-step-meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ts-text-muted);
  margin-bottom: var(--ts-space-2);
}

.ts-band-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: var(--ts-space-4);
  border-radius: var(--ts-radius-card) !important;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: var(--ts-shadow-card) !important;
}

.ts-band-card .ts-feature-icon-circle {
  margin-bottom: var(--ts-space-3);
}

.ts-band-card h5 {
  margin-bottom: var(--ts-space-2);
}

.ts-card-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}

.ts-step-row-bordered > [class*="col-"] {
  position: relative;
}

@media (min-width: 768px) {
  .ts-step-row-bordered > [class*="col-"] + [class*="col-"] {
    border-left: 1px solid var(--ts-border-subtle);
  }
}

@media (min-width: 768px) {
  .ts-card-center {
    align-items: flex-start;
    text-align: left;
  }
}

.ts-metric-strip {
  border-radius: var(--ts-radius-lg);
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.14), rgba(76, 111, 255, 0.14));
  padding: var(--ts-space-4) var(--ts-space-5);
}

.ts-metric-strip .ts-metric-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ts-metric-strip .ts-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 22, 0.9);
  color: #e0f7ff;
  border: 1px solid rgba(0, 229, 255, 0.5);
}

.ts-metric-strip .ts-metric-icon i {
  font-size: 1.25rem;
}

.ts-metric-strip .ts-metric-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ts-text-muted);
}

.ts-metric-strip .ts-metric-text {
  font-size: 0.95rem;
  font-weight: 500;
}

@media (max-width: 767.98px) {
  .ts-metric-strip {
    padding-inline: var(--ts-space-3);
  }
}

/* ICP cards */
.ts-icp-band {
  background: linear-gradient(135deg, #050816 0, #0B1020 60%, #050816 100%);
  border-radius: var(--ts-radius-lg);
  padding: var(--ts-space-5);
  color: #e5e7eb;
}

.ts-icp-card {
  background: rgba(15, 23, 42, 0.95);
  border-radius: var(--ts-radius-card) !important;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: var(--ts-shadow-card) !important;
}

.ts-icp-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ts-space-3);
  background: radial-gradient(circle at top, rgba(0, 229, 255, 0.3), rgba(15, 23, 42, 1));
  color: #e0f7ff;
}

.ts-icp-icon i {
  font-size: 1.45rem;
}

.ts-icp-icon-agency {
  background: radial-gradient(circle at top, rgba(0, 229, 255, 0.35), rgba(15, 23, 42, 1));
}

.ts-icp-icon-smb {
  background: radial-gradient(circle at top, rgba(232, 119, 34, 0.35), rgba(15, 23, 42, 1));
}

.ts-icp-icon-security {
  background: radial-gradient(circle at top, rgba(76, 111, 255, 0.35), rgba(15, 23, 42, 1));
}

.ts-icp-icon-connect {
  background-color: rgba(249, 115, 22, 0.08);
  color: #B45309;
}

.ts-icp-icon-scan {
  background-color: rgba(14, 58, 83, 0.08);
  color: #0E3A53;
}

.ts-icp-icon-fix {
  background-color: rgba(56, 189, 248, 0.08);
  color: #0369A1;
}

.ts-icp-icon-protect {
  background-color: rgba(34, 197, 94, 0.08);
  color: #166534;
}

.ts-icp-list {
  padding-left: 1.2rem;
  margin-bottom: 0;
}

.ts-icp-list li {
  font-size: 0.9rem;
  color: rgba(229, 231, 235, 0.92);
}

/* Marketing & dashboard polish */
.ts-card-hover {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ts-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--ts-shadow-soft);
  border-color: rgba(14, 58, 83, 0.16);
}

.ts-hero-mock-browser {
  border-radius: var(--ts-radius-md);
  background: rgba(6, 22, 35, 0.96);
  padding: var(--ts-space-4);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.35);
  max-width: 440px;
  width: 100%;
}

.ts-hero-mock-browser-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ts-space-3);
}

.ts-hero-mock-dots {
  display: flex;
  gap: 6px;
}

.ts-hero-mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.6);
}

.ts-hero-mock-dot:first-child {
  background: #f87171;
}

.ts-hero-mock-dot:nth-child(2) {
  background: #fbbf24;
}

.ts-hero-mock-dot:nth-child(3) {
  background: #34d399;
}

.ts-hero-mock-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--ts-space-3);
}

.ts-hero-mock-grade {
  border-radius: var(--ts-radius-md);
  background: radial-gradient(circle at top, #22c55e 0, #065f46 40%, #022c22 100%);
  padding: var(--ts-space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #f9fafb;
}

.ts-hero-mock-grade-letter {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ts-hero-mock-grade-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

.ts-hero-mock-list {
  border-radius: var(--ts-radius-md);
  background: rgba(15, 23, 42, 0.8);
  padding: var(--ts-space-3);
}

.ts-hero-mock-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 0.8rem;
}

.ts-hero-mock-list-row:last-child {
  border-bottom: 0;
}

.ts-hero-mock-chip {
  border-radius: 999px;
  padding-inline: 10px;
  padding-block: 2px;
  font-size: 0.7rem;
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
}

.ts-hero-mock-footnote {
  font-size: 0.75rem;
  color: rgba(229, 231, 235, 0.8);
}

@media (max-width: 767.98px) {
  .ts-hero-shell {
    padding: var(--ts-space-4);
  }

  .ts-hero-mock-browser {
    margin-top: var(--ts-space-4);
  }

  .ts-hero-mock-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 992px) {
  .ts-hero-shell {
    min-height: 80vh;
    display: flex;
    align-items: center;
  }

  .ts-hero-shell > .row {
    width: 100%;
  }
}

.ts-testimonial-card {
  border-radius: var(--ts-radius-card) !important;
  background-color: #ffffff;
  box-shadow: var(--ts-shadow-card) !important;
  border: 1px solid var(--ts-border-subtle);
}

.ts-testimonial-card .card-body {
  padding: 2.75rem 2.5rem;
}

.ts-testimonial-role {
  font-size: 0.8rem;
  color: var(--ts-text-muted);
}

.ts-avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(14, 58, 83, 0.14);
  color: var(--ts-color-navy);
  font-weight: 600;
}

.ts-value-pillars-row .ts-band-card {
  padding-inline: var(--ts-space-3);
  padding-block: var(--ts-space-4);
}

/* Public marketing homepage shell (ThreatSpot AI light theme) */
.ts-public-shell {
  background-color: #F9FAFB;
  color: #111827;
}

.ts-public-shell .ts-page {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

@media (max-width: 767.98px) {
  .ts-public-shell .ts-page {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.ts-public-shell h1,
.ts-public-shell h2,
.ts-public-shell h3,
.ts-public-shell h4 {
  color: #0E3A53;
}

.ts-public-shell p {
  color: #374151;
}

/* Homepage hero text width */

.ts-public-shell .ts-hero-shell .row > .col-lg-6:first-child {
  max-width: 540px;
}

/* Homepage section spacing and headings */

.ts-public-shell .ts-section {
  margin-bottom: 3.5rem;
}

@media (max-width: 767.98px) {
  .ts-public-shell .ts-section {
    margin-bottom: 2.75rem;
  }
}

/* Slightly tighten the space after the metrics strip on the homepage */
.ts-public-shell .ts-page > .ts-section:nth-of-type(2) {
  margin-bottom: 2.5rem;
}

@media (max-width: 767.98px) {
  .ts-public-shell .ts-page > .ts-section:nth-of-type(2) {
    margin-bottom: 2rem;
  }
}

.ts-public-shell .ts-section h2 {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 1.1rem;
}

.ts-public-shell .ts-section h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

/* Normalized vertical padding for marketing sections that should match ICP layout */
.ts-public-shell .ts-section-equal-padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Hero */
.ts-public-shell .ts-hero-shell {
  background:
    radial-gradient(circle at top left, rgba(14, 58, 83, 0.08) 0, transparent 55%),
    linear-gradient(135deg, #F9FAFB 0, #F3F4F6 45%, #FFFFFF 100%);
  border-radius: var(--ts-radius-lg);
  padding: 3rem 3.25rem;
  border: 1px solid #E5E7EB;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  color: #111827;
}

.ts-public-shell .ts-hero-shell::before {
  display: none;
}

.ts-public-shell .ts-hero-shell h1,
.ts-public-shell .ts-hero-shell p,
.ts-public-shell .ts-hero-shell span {
  color: #111827;
}

.ts-public-shell .ts-hero-shell .badge {
  background-color: rgba(14, 58, 83, 0.06);
  color: #0E3A53;
  letter-spacing: 0.12em;
}

.ts-public-shell .ts-hero-subcopy {
  color: #374151;
}

.ts-public-shell .ts-hero-mock-browser {
  background-color: #FFFFFF;
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  filter: brightness(1.03) contrast(0.96);
}

.ts-public-shell .ts-hero-mock-footnote {
  color: #6B7280;
}

/* CTAs */
.ts-public-shell .btn-primary {
  background-color: #E87722;
  border-color: #E87722;
  box-shadow: 0 12px 30px rgba(232, 119, 34, 0.35);
}

.ts-public-shell .btn-primary:hover,
.ts-public-shell .btn-primary:focus {
  background-color: #c65e18;
  border-color: #c65e18;
}

.ts-public-shell .btn-outline-secondary {
  color: #0E3A53;
  border-color: #CBD5E1;
  background-color: #FFFFFF;
}

.ts-public-shell .btn-outline-secondary:hover,
.ts-public-shell .btn-outline-secondary:focus {
  background-color: #0E3A53;
  color: #FFFFFF;
  border-color: #0E3A53;
}

/* Metrics strip */
.ts-public-shell .ts-metric-strip {
  background-color: #FFFFFF;
  border-radius: 999px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

@media (max-width: 767.98px) {
  .ts-public-shell .ts-metric-strip {
    border-radius: 20px;
  }
}

.ts-public-shell .ts-metric-icon {
  background-color: #0E3A53;
  border-color: rgba(14, 58, 83, 0.5);
  color: #E5E7EB;
}

.ts-public-shell .ts-metric-label {
  color: #6B7280;
}

.ts-public-shell .ts-metric-text {
  color: #111827;
}

/* Trusted-by strip */
.ts-public-shell .ts-trusted-strip {
  padding-top: 2rem;
  padding-bottom: 2.25rem;
}

.ts-public-shell .ts-trusted-strip-logos span {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background-color: #F3F4F6;
  border: 1px solid #E5E7EB;
}

/* Cards & icons */
.ts-public-shell .card {
  background-color: #FFFFFF;
  border-radius: var(--ts-radius-card) !important;
  border: 1px solid #E5E7EB;
  box-shadow: var(--ts-shadow-card) !important;
}

.ts-public-shell .card.border-0 {
  border-color: #E5E7EB;
}

.ts-public-shell .card .card-body {
  padding: 1.25rem 1.5rem;
}

.ts-public-shell .ts-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  border-color: rgba(14, 58, 83, 0.16);
}

.ts-public-shell .ts-section:nth-of-type(2n) {
  background-color: #F9FAFB;
  border-radius: 18px;
  padding: 3rem 2.5rem;
}

@media (max-width: 767.98px) {
  .ts-public-shell .ts-section:nth-of-type(2n) {
    padding: 2rem 1.5rem;
  }
}

.ts-public-shell .ts-feature-icon-circle,
.ts-public-shell .ts-icp-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(14, 58, 83, 0.06);
  color: #0E3A53;
  border: none;
}

.ts-public-shell .ts-feature-icon-circle i,
.ts-public-shell .ts-icp-icon i {
  font-size: 1.35rem;
}

.ts-public-shell .ts-feature-icon-accent,
.ts-public-shell .ts-icp-icon-smb {
  background-color: rgba(232, 119, 34, 0.12);
  color: #B45309;
}

.ts-public-shell .ts-icp-icon-security {
  background-color: rgba(14, 58, 83, 0.12);
}

/* Section bands & value pillars */
.ts-public-shell .ts-section-band {
  background-color: #FFFFFF;
  border-radius: var(--ts-radius-lg);
  border: 1px solid #E5E7EB;
}

.ts-public-shell .ts-section-band-dark {
  background-color: #F3F4F6;
}

.ts-public-shell .ts-band-card {
  background-color: #FFFFFF;
  border-radius: var(--ts-radius-card) !important;
  border: 1px solid #E5E7EB;
  color: #111827;
  box-shadow: var(--ts-shadow-card) !important;
}

/* ICP section */
.ts-public-shell .ts-icp-section {
  background-color: #F3F4F6;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  margin-top: 1rem;
}

.ts-public-shell .ts-icp-band {
  background: transparent;
  padding: 0;
  color: #111827;
}

.ts-public-shell .ts-icp-card {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--ts-radius-card) !important;
  box-shadow: var(--ts-shadow-card) !important;
}

.ts-public-shell .ts-icp-list li {
  color: #374151;
}

/* Testimonials */
.ts-public-shell .ts-testimonial-card {
  background-color: #FFFFFF;
}

.ts-public-shell .ts-testimonial-role {
  color: #6B7280;
}

.ts-public-shell .ts-testimonial-section {
  background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Responsive tweaks for hero layout */
@media (max-width: 991.98px) {
  .ts-public-shell .ts-hero-shell {
    padding: 2.5rem 2rem;
  }
  .ts-public-shell .ts-hero-mock-browser {
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 575.98px) {
  .ts-public-shell .ts-hero-shell {
    padding: 2rem 1.5rem;
  }
}

/* Final marketing navbar – no gradient, high contrast */
.ts-navbar {
  background-color: #ffffff;
  background-image: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.03);
}

.ts-navbar .navbar-brand,
.ts-navbar .navbar-brand span {
  color: var(--ts-color-navy);
}

.ts-navbar .nav-link {
  color: var(--ts-text-main);
  font-weight: 500;
  padding-inline: 0.9rem;
}

.ts-navbar .nav-link:hover,
.ts-navbar .nav-link:focus {
  color: var(--ts-color-navy);
  background: none;
}

.ts-navbar .nav-link.active {
  color: var(--ts-color-navy);
  position: relative;
}

.ts-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 999px;
  background: var(--ts-color-orange);
}

/* Ensure page header behind navbar is also flat white */
.header {
  background: #ffffff;
  background-image: none;
}

/* Dashboard-specific card shadow override */

.section.dashboard .card {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  border-radius: 14px;
}

/* Logged-in dashboard shell & cards (ThreatSpot app) */

.section.dashboard {
  background-color: var(--ts-bg-surface);
  padding-top: var(--ts-space-5);
  padding-bottom: var(--ts-space-6);
}

.ts-dashboard-shell {
  border-radius: var(--ts-radius-lg);
  background:
    radial-gradient(circle at top left, rgba(14, 58, 83, 0.04) 0, transparent 45%),
    linear-gradient(135deg, #F9FAFB 0, #F3F4F6 45%, #FFFFFF 100%);
  border: 1px solid #E5E7EB;
  box-shadow: var(--ts-shadow-card);
  padding: var(--ts-space-5);
}

.ts-dashboard-shell h1,
.ts-dashboard-shell h2,
.ts-dashboard-shell h3 {
  color: var(--ts-text-main);
}

.ts-dashboard-shell p {
  color: var(--ts-text-muted);
}

.ts-dashboard-card {
  background-color: #FFFFFF;
  border-radius: var(--ts-radius-card);
  border: 1px solid var(--ts-border-subtle);
  box-shadow: var(--ts-shadow-card);
  padding: 1.5rem 1.75rem;
}

/* WordPress vulnerable plugins snapshot table */
.wp-vuln-table th.wp-vuln-plugin,
.wp-vuln-table td.wp-vuln-plugin {
  font-size: 0.9rem;
  font-weight: 500;
  max-width: 260px;
  white-space: normal;
}

.wp-vuln-table th.wp-vuln-reco,
.wp-vuln-table td.wp-vuln-reco {
  width: 40%;
}

.ts-dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.ts-dashboard-card-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ts-text-muted);
  font-weight: 600;
}

.ts-dashboard-card-subtitle {
  font-size: 0.9rem;
  color: var(--ts-text-muted);
}

/* Grade pill & chips */

.ts-grade-pill {
  border-radius: var(--ts-radius-md);
  color: #f9fafb;
  padding: 1rem 1.25rem;
  text-align: center;
}

/* Overall grade variants – color matches scan results grade palette */
.ts-grade-pill-good {
  background: radial-gradient(circle at top, #22c55e 0, #15803d 40%, #022c22 100%);
}

.ts-grade-pill-warning {
  background: radial-gradient(circle at top, #facc15 0, #eab308 40%, #713f12 100%);
}

.ts-grade-pill-danger {
  background: radial-gradient(circle at top, #ef4444 0, #b91c1c 40%, #450a0a 100%);
}

.ts-grade-pill-letter {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ts-grade-pill-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.9;
}

.ts-chip {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ts-chip-pass {
  background-color: rgba(22, 163, 74, 0.12);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.3);
}

.ts-chip-medium {
  background-color: rgba(234, 179, 8, 0.12);
  color: #854d0e;
  border-color: rgba(234, 179, 8, 0.3);
}

.ts-chip-high {
  background-color: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.3);
}

.ts-chip-unknown {
  background-color: rgba(148, 163, 184, 0.16);
  color: #374151;
  border-color: rgba(148, 163, 184, 0.35);
}

/* Progress / usage bars */

.ts-progress-track {
  height: 6px;
  border-radius: 999px;
  background-color: #E5E7EB;
  overflow: hidden;
}

.ts-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ts-color-accent-teal), var(--ts-color-orange));
}

.ts-progress-label {
  font-size: 0.8rem;
  color: var(--ts-text-muted);
  margin-top: 0.35rem;
}

/* Dark panels for any remaining dark dashboard areas */

.ts-dashboard-dark {
  background-color: var(--ts-bg-surface-dark);
  color: rgba(229, 231, 235, 0.92);
}

.ts-dashboard-dark h1,
.ts-dashboard-dark h2,
.ts-dashboard-dark h3 {
  color: #F9FAFB;
}

.ts-dashboard-dark p,
.ts-dashboard-dark li,
.ts-dashboard-dark span {
  color: rgba(229, 231, 235, 0.88);
}

.ts-dashboard-dark.text-muted {
  color: rgba(148, 163, 184, 0.9) !important;
}

/* -------------------------------------------
   GLOBAL SPACING POLISH FOR HOMEPAGE
-------------------------------------------- */

/* Stronger vertical rhythm across sections */
.ts-section {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
}

/* Banded sections slightly more roomy */
.ts-section-band,
.ts-section-band-light,
.ts-section-band-dark {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

/* Headline spacing */
.ts-section h2,
.ts-section h3 {
    margin-bottom: 1.25rem !important;
}

/* Subheadline spacing */
.ts-section p.text-muted {
    margin-bottom: 2.5rem !important;
}

/* Increase spacing between stacked major sections */
.ts-section + .ts-section {
    margin-top: 1rem !important;
}

/* Cards — consistent spacing & breathing room */
.ts-card-hover,
.ts-icp-card,
.ts-band-card {
    padding: 2rem !important;
    margin-bottom: 1rem !important;
}

.ts-features-page .ts-card-hover {
    padding: 0 !important;
}

/* Add consistent spacing between rows of cards */
.ts-card-row,
.ts-value-pillars-row,
.ts-icp-band .row {
    row-gap: 2rem !important;
}

/* Center icons a bit higher on cards */
.ts-feature-icon-circle {
    margin-bottom: 0.75rem !important;
}

/* Slightly increase spacing under icons for steps */
.ts-step-meta {
    margin-bottom: 0.5rem !important;
}

/* Improve spacing under "From first connection..." header */
.ts-continuous-protection-header {
    margin-bottom: 2rem !important;
}

/* Testimonials section polish */
.ts-testimonial-card {
    padding: 2.25rem !important;
    margin-bottom: 2rem !important;
}

/* Card chrome: slightly softer, more premium */
.ts-card-hover,
.ts-icp-card,
.ts-band-card,
.ts-dashboard-card {
  border-radius: var(--ts-radius-card);
  border: 1px solid #E5E7EB;
  background-color: #FFFFFF;
  box-shadow: var(--ts-shadow-card);
}

/* Stronger but still tasteful hover */
.ts-card-hover:hover,
.ts-icp-card:hover,
.ts-band-card:hover,
.ts-dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ts-shadow-soft);
  border-color: rgba(14, 58, 83, 0.18);
}

/* Unify icon circles across homepage */
.ts-feature-icon-circle,
.ts-icp-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

/* Default chrome */
.ts-feature-icon-circle,
.ts-icp-icon {
  background: radial-gradient(circle at 30% 0%, rgba(148, 163, 184, 0.3), #0E3A53);
  color: #E5E7EB;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.55);
}

/* Warm accent variant (Connect / Fast, etc.) */
.ts-feature-icon-accent,
.ts-icp-icon-smb {
  background: radial-gradient(circle at 30% 0%, rgba(248, 191, 132, 0.6), #B45309);
  color: #FFFBEB;
  border-color: rgba(248, 191, 132, 0.75);
}

/* Security / shield tone */
.ts-icp-icon-security {
  background: radial-gradient(circle at 30% 0%, rgba(96, 165, 250, 0.6), #1D3557);
  color: #E5F2FF;
}

/* Headings read more confidently */
h1, .display-5 {
  line-height: 1.1;
}

h2, h3, h4 {
  line-height: 1.2;
}

/* Body copy a touch tighter and darker */
body, p {
  line-height: 1.55;
}

.ts-hero-subcopy,
.ts-section p.text-muted,
.ts-footer-muted {
  color: #4B5563;
}

/* Key section headings on homepage */
.ts-public-shell h2,
.ts-public-shell h3 {
  font-weight: 700;
}

/* Small labels / meta text */
.ts-step-meta,
.ts-metric-label,
.ts-testimonial-role {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* Soft separators between big homepage sections */
.ts-public-shell .ts-section {
  border-radius: 18px;
}

/* “Bands” get slightly tinted backgrounds */
.ts-public-shell .ts-section-band-light {
  background: #FFFFFF;
}

.ts-public-shell .ts-section-band-dark {
  background: linear-gradient(180deg, #F9FAFB 0%, #EEF2F7 100%);
}

/* Extra breathing room above section titles after a card grid */
.ts-public-shell .ts-section + .ts-section h2,
.ts-public-shell .ts-section + .ts-section h3 {
  margin-top: 0.25rem;
}

/* Testimonial block feels like a “pull quote” */
.ts-testimonial-card {
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14);
}

/* Get Started CTA button stands out slightly more */
.ts-public-shell .ts-testimonial-section .btn-primary {
  padding-inline: 1.75rem;
  padding-block: 0.8rem;
  border-radius: 999px;
  font-weight: 600;
}

/* ==== MICRO-INTERACTIONS ======================================= */

/* Base transition for icon circles */
.ts-feature-icon-circle,
.ts-icp-icon {
  transition:
    transform 0.22s ease-out,
    box-shadow 0.22s ease-out,
    background 0.22s ease-out,
    border-color 0.22s ease-out;
}

/* When the card hovers, make the icon feel lighter / interactive */
.ts-card-hover:hover .ts-feature-icon-circle,
.ts-card-hover:hover .ts-icp-icon {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
}

/* Slight “press back down” on active */
.ts-card-hover:active .ts-feature-icon-circle,
.ts-card-hover:active .ts-icp-icon {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.45);
}

/* CTA buttons feel a bit more alive */
.ts-btn-cta,
.ts-public-shell .btn-primary,
.ts-public-shell .btn-outline-secondary {
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    background-color 0.18s ease-out,
    border-color 0.18s ease-out,
    color 0.12s ease-out;
}

.ts-btn-cta:hover,
.ts-btn-cta:focus,
.ts-public-shell .btn-primary:hover,
.ts-public-shell .btn-primary:focus,
.ts-public-shell .btn-outline-secondary:hover,
.ts-public-shell .btn-outline-secondary:focus {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

.ts-btn-cta:active,
.ts-public-shell .btn-primary:active,
.ts-public-shell .btn-outline-secondary:active {
  transform: translateY(0);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
}

/* ==== SCROLL-IN ANIMATIONS ==================================== */

/* Base state: hidden & slightly shifted */
.ts-animate {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.45s ease-out,
    transform 0.45s ease-out;
}

/* Once in view */
.ts-animate.ts-animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helpers */
.ts-animate-delay-1 {
  transition-delay: 0.08s;
}
.ts-animate-delay-2 {
  transition-delay: 0.16s;
}
.ts-animate-delay-3 {
  transition-delay: 0.24s;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ts-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ======================================================
   DASHBOARD SPACING, HIERARCHY & TABLE POLISH
   (Appended overrides – safe to paste over existing file)
   ====================================================== */

.section.dashboard {
  /* Slightly more breathing room around the whole dashboard */
  padding-top: var(--ts-space-6);
  padding-bottom: var(--ts-space-7);
}

/* Dashboard shell gets a bit more padding so content isn't tight
   against the border and feels more "SaaS app" than "report PDF". */
.ts-dashboard-shell {
  padding: var(--ts-space-6);
}

/* Page title block on dashboard – give it space before the cards start */
.section.dashboard .pagetitle {
  margin-bottom: var(--ts-space-5);
}

/* Core dashboard cards: more internal padding + vertical spacing
   between rows of cards to avoid the "wall of tiles" effect. */
.ts-dashboard-card {
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
}

/* Section headings like "What you should focus on first",
   "Detailed findings", and "Next steps" get more vertical rhythm. */
.section.dashboard h2 {
  margin-top: var(--ts-space-6);
  margin-bottom: 1.1rem;
}

/* The "What you should focus on first" tiles + similar grids
   often sit inside rows of cards. Add a bit more gap between them. */
.section.dashboard .row > .ts-dashboard-card + .ts-dashboard-card {
  margin-top: 1rem;
}

/* When cards are grouped inside a .row with Bootstrap gutters, add extra
   vertical gap between rows without affecting horizontal layout. */
.section.dashboard .row.g-3 > [class*="col-"] {
  margin-bottom: 1.25rem;
}

/* Detailed findings table – soften the harsh black "slab" look.
   This assumes Bootstrap's .table-dark is used in this section. */
.section.dashboard .table-dark {
  background-color: #111827;        /* slate-900 style */
  color: #E5E7EB;                   /* slate-200 text */
}

.section.dashboard .table-dark thead th {
  background-color: #020617;        /* slightly darker header bar */
  border-color: rgba(148, 163, 184, 0.7);
  font-weight: 600;
}

.section.dashboard .table-dark tbody tr {
  border-color: rgba(55, 65, 81, 0.9);  /* slate-700 divider lines */
}

.section.dashboard .table-dark tbody tr:nth-child(even) {
  background-color: #020617;        /* subtle striping */
}

.section.dashboard .table-dark tbody tr:hover {
  background-color: #111827;        /* keep hover subtle, not bright */
}

.section.dashboard .table-dark th,
.section.dashboard .table-dark td {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  font-size: 0.9rem;
}

/* Footer stats row under the table ("Total scans", etc.) –
   give it space so it doesn't feel glued to the table. */
.section.dashboard .table-dark + .row,
.section.dashboard .table-dark + .d-flex {
  margin-top: var(--ts-space-4);
}

/* Next steps band – slightly more padding so it breathes like
   a summary section rather than yet another dense block. */
.section.dashboard .ts-next-steps,
.section.dashboard .ts-section-next-steps {
  padding-top: var(--ts-space-5);
  padding-bottom: var(--ts-space-5);
}

/* General small text in dashboard (meta labels, helper copy) –
   slightly soften the color for easier reading. */
.section.dashboard .text-muted {
  color: #6B7280 !important; /* slate-500 */
}

/* ======================================================
   DASHBOARD POLISH – ROUND 2 (SPACING & DEPTH TWEAKS)
   Paste below your existing dashboard CSS overrides
   ====================================================== */

/* 1. Give the hero/pagetitle block a bit more breathing room
      before the summary cards start. */
.section.dashboard .pagetitle {
  margin-bottom: var(--ts-space-6);
}

/* 2. Subtle elevation for dashboard cards so the four
      "What you should focus on first" tiles (and peers)
      feel less flat and more like interactive elements. */
.section.dashboard .ts-dashboard-card {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* 3. "Site in focus" panel – increase internal padding and
      visually separate the top meta (domain/plan/last scan)
      from the lower usage/progress message.
      Note: if your class names differ, map these selectors
      to the card that contains the "SITE IN FOCUS" content. */
.section.dashboard .ts-site-in-focus,
.section.dashboard .ts-dashboard-site-panel,
.section.dashboard .ts-summary-site-card {
  padding: 1.75rem 2.25rem;
}

.section.dashboard .ts-site-in-focus-body,
.section.dashboard .ts-summary-site-meta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

/* 4. Next steps band – add a little more horizontal padding
      on large screens so the copy doesn't feel stretched. */
.section.dashboard .ts-next-steps,
.section.dashboard .ts-section-next-steps {
  padding-left: 3rem;
  padding-right: 3rem;
}

/* ======================================================
   DASHBOARD POLISH – ROUND 3 (FINAL TUNING)
   Hero spacing, card depth, and footer stats spacing
   ====================================================== */

/* 1. HERO / PAGETITLE VERTICAL SPACING
   ------------------------------------ */

/* Give more breathing room between the hero content and the cards */
.section.dashboard .pagetitle {
  margin-bottom: var(--ts-space-7);
}

/* Slightly increase spacing between kicker, H1, and description text */
.section.dashboard .pagetitle .ts-kicker {
  margin-bottom: 0.9rem;
}

.section.dashboard .pagetitle h1 {
  margin-bottom: 0.9rem;
}

/* The small helper paragraphs in the hero often use Bootstrap mb-1/mb-2.
   Loosen them up a bit so the hero doesn’t feel compressed. */
.section.dashboard .pagetitle p.mb-1,
.section.dashboard .pagetitle p.mb-2 {
  margin-bottom: 0.75rem !important;
}

/* 2. CARD DEPTH / SHADOW
   ---------------------- */

/* Make dashboard cards feel slightly more elevated (but still subtle). */
.section.dashboard .ts-dashboard-card {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* 3. BOTTOM STATS ROW SPACING
   --------------------------- */

/* Add more separation between the "Next steps" card and the stats row
   (Total scans run / Critical issues found / High warning issues). */
.section.dashboard .ts-next-steps + .row,
.section.dashboard .ts-section-next-steps + .row {
  margin-top: 2rem;
}

/* ======================================================
   DASHBOARD POLISH – ROUND 4 (MICRO TWEAKS)
   Next steps column alignment, bullet rhythm, stats divider
   ====================================================== */

/* 1) NEXT STEPS – column heading alignment
      Give a tiny top margin to the headings of the 2nd/3rd columns
      so they align visually with the left "Summary" block. */
.section.dashboard .ts-next-steps .row > [class*="col-"]:not(:first-child) :is(h3, h4, h5, h6, strong) {
  display: inline-block;
  margin-top: 0.375rem;
}

/* 2) NEXT STEPS – improve bullet readability and vertical rhythm */
.section.dashboard .ts-next-steps ul {
  line-height: 1.6;
  margin-top: 0.25rem;
}

.section.dashboard .ts-next-steps li {
  margin-bottom: 0.35rem;
}

.section.dashboard .ts-next-steps li:last-child {
  margin-bottom: 0;
}

/* 3) STATS ROW – add a subtle divider so it feels anchored
      under the "Next steps" card */
.section.dashboard .ts-summary-stats {
  border-top: 1px solid rgba(2, 6, 23, 0.06);
  padding-top: 1.5rem;
  margin-top: 1.5rem; /* works with existing spacing */
}

/* ======================================================
   AGENCY ANALYTICS – ROUND 1 POLISH
   Applies spacing, padding, gradient, rank badge sizing,
   action-button spacing, and score badge color tuning.
   Map selectors to your markup if class names differ.
   ====================================================== */

/* ---- Section header rhythm ---- */
.section-agency-analytics h2,
.section-agency-analytics .section-title {
  margin-bottom: 1.25rem;
}

/* ---- Card container tweaks ---- */
.section-agency-analytics .agency-performance-card {
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(2, 6, 23, 0.06);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  /* Softer, cleaner background gradient */
  background: linear-gradient(90deg, #fffdfa 0%, #ffffff 60%);
}

/* Optional: alternate tone for every even card (very subtle) */
.section-agency-analytics .agency-performance-card:nth-child(even) {
  background: linear-gradient(90deg, #f9fafb 0%, #ffffff 60%);
}

/* ---- Left rank badge (1/2/3) ---- */
.section-agency-analytics .agency-rank-badge {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  font-size: 1rem;
  line-height: 38px;
  text-align: center;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* ---- Title & meta copy spacing ---- */
.section-agency-analytics .agency-card-title {
  margin-bottom: 0.15rem;
  font-weight: 600;
}

.section-agency-analytics .agency-card-meta {
  color: #6b7280; /* slate-500 */
}

/* ---- Score pill ---- */
.section-agency-analytics .agency-score-badge {
  background-color: #dc2626; /* red-600 */
  color: #fff;
  border-radius: 9999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1;
}

/* ---- Right-side actions grouping ---- */
.section-agency-analytics .agency-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 1.25rem;
}

.section-agency-analytics .agency-card-actions .btn,
.section-agency-analytics .agency-card-actions button {
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
}

/* ---- Universal fix: even spacing between cards in a grid ---- */
.section-agency-analytics .row > [class*="col-"] .agency-performance-card {
  margin-bottom: 1.25rem;
}

/* ======================================================
   AGENCY ANALYTICS – ROUND 2 FIXES
   Equal heights per row, consistent shadows, tighter gutters
   ====================================================== */

/* 1) Equal height cards within each row */
.section-agency-analytics .row > [class*="col-"] {
  display: flex;
}

.section-agency-analytics .row > [class*="col-"] .agency-performance-card {
  display: flex;
  flex: 1 1 auto;
}

/* 2) Normalize card shadows so all look the same */
.section-agency-analytics .agency-performance-card {
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
}

/* 3) Reduce horizontal gutter between columns (slightly tighter grid) */
.section-agency-analytics .row {
  --bs-gutter-x: 1.25rem;
}

/* Optional: on very wide screens, tighten a touch more */
@media (min-width: 1200px) {
  .section-agency-analytics .row {
    --bs-gutter-x: 1rem;
  }
}

/* Keep action icons breathing on the right edge */
.section-agency-analytics .agency-card-actions {
  padding-right: 1.5rem;
}

/* ============================================================
   CLIENT LISTING PAGE POLISH – UNIFIED PATCH
   (Client Detail View for Agencies)
   Applies: stats cards, site cards, sidebar, spacing, shadows
   ============================================================ */

/* -------------------------
   1) Stats cards (top row)
   ------------------------- */

.section-client-details .stats-card,
.client-stats-card {
  padding: 1.5rem 1.75rem !important;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(2, 6, 23, 0.06);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
}

/* Make stats numbers larger + more premium */
.section-client-details .stats-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
}

/* -----------------------------
   2) “Sites Overview” card grid
   ----------------------------- */

.section-client-details .site-card {
  padding: 1.5rem 1.75rem;
  border-radius: 14px;
  background: linear-gradient(90deg, #fffdfa 0%, #ffffff 60%);
  border: 1px solid rgba(2, 6, 23, 0.06);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  position: relative;
  margin-bottom: 1.25rem;
}

/* Remove overly aggressive red left-border highlight */
.section-client-details .site-card.border-danger {
  border-left-width: 6px;
  border-left-color: #dc2626 !important;
}

/* Better positioned grade badge */
.section-client-details .site-card .grade-badge {
  width: 40px;
  height: 40px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -12px;
  right: -12px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.10);
}

/* Buttons inside site card */
.section-client-details .site-card .site-card-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
}

.section-client-details .site-card .site-card-actions .btn {
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
}

/* --------------------------
   3) Equal height columns
   -------------------------- */
.section-client-details .row > [class*="col-"] {
  display: flex;
}

.section-client-details .row > [class*="col-"] > * {
  flex: 1 1 auto;
}

/* --------------------------
   4) Sidebar cards (Recent Scans, Quick Actions)
   ------------------------- */

.section-client-details .sidebar-card {
  padding: 1.5rem 1.75rem;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(2, 6, 23, 0.06);
  margin-bottom: 1.25rem;
}

/* Sidebar section titles */
.section-client-details .sidebar-card h3,
.section-client-details .sidebar-card h4 {
  margin-bottom: 1rem;
}

/* Quick Actions button polish */
.section-client-details .sidebar-card .btn {
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-weight: 600;
}

/* Tighten spacing between sidebar blocks */
.section-client-details .sidebar {
  gap: 1.25rem;
}

/* --------------------------
   5) Improve overall spacing
   -------------------------- */

.section-client-details h2.section-title {
  margin-bottom: 1.5rem;
}

/* Ensure consistent horizontal gutters */
.section-client-details .row {
  --bs-gutter-x: 1.25rem;
}

@media (min-width: 1200px) {
  .section-client-details .row {
    --bs-gutter-x: 1rem;
  }
}

/* ============================================================
   AGENCY PORTFOLIO PAGE – UNIFIED POLISH PATCH (APPEND-ONLY)
   Targets hero, filters row, stat tiles, tables, pills/badges,
   gutters and subtle shadows. All selectors are scoped to the
   portfolio section so it is safe to drop in site-wide.
   Map to your classes if they differ; multiple aliases included.
   ============================================================ */

/* ---------- Scope anchors (any of these may exist) ---------- */
.section-portfolio,
.section-agency-portfolio,
.page-agency-portfolio {
  /* noop anchor so the block is easy to find later */
}

/* -------------------- 1) Hero header ----------------------- */
.section-portfolio .ts-hero,
.section-agency-portfolio .ts-hero,
.page-agency-portfolio .ts-hero {
  border-radius: 16px;
  padding: 1.75rem 2rem;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.section-portfolio .ts-hero h1,
.section-agency-portfolio .ts-hero h1 {
  margin-bottom: .35rem;
}

.section-portfolio .ts-hero p,
.section-agency-portfolio .ts-hero p {
  opacity: .95;
  margin-bottom: 0;
}

/* -------------------- 2) Filters row ----------------------- */
.section-portfolio .filters-row,
.section-agency-portfolio .filters-row {
  margin-top: 1rem;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.section-portfolio .filters-row > .filter,
.section-agency-portfolio .filters-row > .filter,
.section-portfolio .filters-row > [class*="col-"],
.section-agency-portfolio .filters-row > [class*="col-"] {
  grid-column: span 4 / span 4; /* 3 across on desktop */
}

@media (max-width: 992px) {
  .section-portfolio .filters-row > .filter,
  .section-agency-portfolio .filters-row > .filter,
  .section-portfolio .filters-row > [class*="col-"],
  .section-agency-portfolio .filters-row > [class*="col-"] {
    grid-column: span 6 / span 6; /* 2 across on tablet */
  }
}
@media (max-width: 640px) {
  .section-portfolio .filters-row > .filter,
  .section-agency-portfolio .filters-row > .filter,
  .section-portfolio .filters-row > [class*="col-"],
  .section-agency-portfolio .filters-row > [class*="col-"] {
    grid-column: 1 / -1; /* stack on mobile */
  }
}

/* Align apply/reset buttons with inputs */
.section-portfolio .filters-row .filter-actions .btn,
.section-agency-portfolio .filters-row .filter-actions .btn {
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  font-weight: 600;
}

/* -------------------- 3) Stat tiles ------------------------ */
.section-portfolio .stat-tile,
.section-agency-portfolio .stat-tile {
  padding: 1.5rem 1.75rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(2,6,23,0.06);
  box-shadow: 0 4px 10px rgba(15,23,42,0.06);
  min-height: 114px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  font-weight: 600;
}

.section-portfolio .stat-tile .value,
.section-agency-portfolio .stat-tile .value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  margin-bottom: .25rem;
  text-transform: none;
  letter-spacing: 0;
}

/* -------------------- 4) Cards (tables blocks) -------------- */
.section-portfolio .portfolio-card,
.section-agency-portfolio .portfolio-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,0.06);
  box-shadow: 0 4px 10px rgba(15,23,42,0.06);
  padding: 1rem 1rem 0.5rem 1rem;
  margin-bottom: 1rem;
}

/* Card headers */
.section-portfolio .portfolio-card .card-title,
.section-agency-portfolio .portfolio-card .card-title {
  font-weight: 700;
  color: #0f172a;
  margin: .25rem 0 0.75rem;
}

/* “chips” like Risk-ranked / Action Required */
.section-portfolio .badge-soft,
.section-agency-portfolio .badge-soft {
  border-radius: 9999px;
  padding: .2rem .6rem;
  font-size: .75rem;
  font-weight: 700;
  border: 1px solid rgba(2,6,23,0.08);
  background: #fff7ed; /* soft amber default */
  color: #9a3412;
}

.section-portfolio .badge-soft.danger,
.section-agency-portfolio .badge-soft.danger { background:#fef2f2; color:#991b1b; }
.section-portfolio .badge-soft.info,
.section-agency-portfolio .badge-soft.info { background:#eff6ff; color:#1d4ed8; }
.section-portfolio .badge-soft.success,
.section-agency-portfolio .badge-soft.success { background:#ecfdf5; color:#065f46; }

/* -------------------- 5) Tables ----------------------------- */
.section-portfolio table,
.section-agency-portfolio table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.section-portfolio thead th,
.section-agency-portfolio thead th {
  font-weight: 700;
  background: #0b1220;
  color: #e5e7eb;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: .7rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.section-portfolio tbody td,
.section-agency-portfolio tbody td {
  padding: .7rem .8rem;
  border-bottom: 1px solid rgba(2,6,23,0.07);
  vertical-align: middle;
}

.section-portfolio tbody tr:nth-child(even),
.section-agency-portfolio tbody tr:nth-child(even) {
  background: #f9fafb;
}

.section-portfolio tbody tr:hover,
.section-agency-portfolio tbody tr:hover {
  background: #eef2ff;
}

/* Remove random horizontal scrollbar in table containers */
.section-portfolio .table-responsive,
.section-agency-portfolio .table-responsive {
  overflow-x: auto;
  scrollbar-gutter: stable both-edges;
}
.section-portfolio .table-responsive::-webkit-scrollbar {
  height: 8px;
}
.section-portfolio .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(2,6,23,0.2);
  border-radius: 10px;
}

/* Tag chips in tables */
.section-portfolio .tag-chip,
.section-agency-portfolio .tag-chip {
  display: inline-block;
  padding: .18rem .5rem;
  font-size: .72rem;
  border-radius: 9999px;
  background: #e5e7eb;
  color: #111827;
  margin: 0 .25rem .25rem 0;
  white-space: nowrap;
}

/* Grade pill & risk score colors */
.section-portfolio .grade-pill,
.section-agency-portfolio .grade-pill {
  display:inline-flex;align-items:center;justify-content:center;
  width: 30px;height: 30px;border-radius:999px;
  font-weight:700;font-size:.85rem;color:#fff;background:#dc2626;
}

.section-portfolio .risk-pill,
.section-agency-portfolio .risk-pill {
  border-radius: 9999px;
  padding: .2rem .55rem;
  font-weight: 700;
  font-size: .8rem;
  background: #fee2e2; color: #991b1b;
}

/* Critical / warning numeric colors */
.section-portfolio .col-critical, .section-portfolio .text-critical,
.section-agency-portfolio .col-critical, .section-agency-portfolio .text-critical { color: #dc2626; font-weight: 700; }
.section-portfolio .col-warning, .section-portfolio .text-warning,
.section-agency-portfolio .col-warning, .section-agency-portfolio .text-warning { color: #f59e0b; font-weight: 700; }

/* -------------------- 6) Gutters & equal heights ------------- */
.section-portfolio .row > [class*="col-"],
.section-agency-portfolio .row > [class*="col-"] {
  display: flex;
}

.section-portfolio .row > [class*="col-"] > *,
.section-agency-portfolio .row > [class*="col-"] > * {
  flex: 1 1 auto;
}

.section-portfolio .row { --bs-gutter-x: 1.25rem; }
@media (min-width:1200px){ .section-portfolio .row { --bs-gutter-x: 1rem; } }

/* -------------------- 7) Empty-state boxes ------------------- */
.section-portfolio .empty-card,
.section-agency-portfolio .empty-card {
  background:#fff; border-radius:14px; padding:2rem 1.75rem;
  border:1px solid rgba(2,6,23,0.06);
  box-shadow:0 4px 10px rgba(15,23,42,0.06);
  text-align:center; color:#6b7280;
}
.section-portfolio .empty-card .icon,
.section-agency-portfolio .empty-card .icon { font-size:1.5rem; margin-bottom:.5rem; }

/* =======================================================
   HOMEPAGE POLISH – APPEND-ONLY CSS
   Scope: homepage only (classes: .ts-home, .home-hero, etc.)
   Safe to drop after your existing stylesheet.
   ======================================================= */

/* ---------- 0) Page wrapper ---------- */
.ts-home, body.homepage, .section-home {
  background: #fafafa;
}

/* Ensure the first visible block isn't pushed down by generic page spacing */
.ts-home .ts-page:first-child,
.section-home .ts-page:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ---------- 1) Navbar niceties (homepage only) ---------- */
.ts-home .navbar, .section-home .navbar {
  backdrop-filter: saturate(1.4) blur(6px);
  background: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(2,6,23,0.06);
}

/* ---------- 2) Hero ---------- */
.home-hero, .ts-home .home-hero, .section-home .home-hero {
  min-height: 75vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2rem;
  padding: 4rem 0;
}

/* If the hero sits inside a card-like container, give it polish */
.home-hero .hero-card {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid rgba(2,6,23,0.06);
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(15,23,42,0.08);
  padding: 3rem 2.25rem;
}

/* Eyebrow/badge */
.home-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #334155;
  background: #eef2ff;
  border: 1px solid rgba(2,6,23,0.06);
  border-radius: 9999px;
  padding: .35rem .7rem;
  margin-bottom: .75rem;
}

/* Title + copy */
.home-hero h1 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  color: #0f172a;
  margin-bottom: 1rem;
}
.home-hero p.lead {
  color: #475569;
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

/* CTA row */
.home-hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .25rem;
}
.home-hero .btn {
  border-radius: 12px;
  padding: .75rem 1.1rem;
  font-weight: 700;
}
.home-hero .btn-primary {
  background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35);
}
.home-hero .btn-outline {
  border: 1px solid #cbd5e1;
  color: #0f172a;
  background: #fff;
}

/* Right-side mock/browser preview */
.home-hero .mock-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
.home-hero .mock {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(2,6,23,0.08);
  box-shadow: 0 12px 30px rgba(2,6,23,0.15);
}

/* ---------- 3) Supporting blocks ---------- */
.home-logos {
  padding: 1.25rem 0 0.5rem;
  opacity: .85;
}
.home-logos img { max-height: 34px; margin: 0 .75rem; filter: grayscale(100%); }

.home-features {
  padding: 3rem 0 2rem;
}
.home-feature-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(2,6,23,0.06);
  box-shadow: 0 6px 16px rgba(15,23,42,0.06);
  padding: 1.25rem 1.4rem;
  height: 100%;
}
.home-feature-card h3 { margin-bottom: .35rem; color: #0f172a; }
.home-feature-card p { color: #64748b; }

/* ---------- 4) Call-to-action band ---------- */
.home-cta {
  margin: 2.5rem 0 0;
  background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 100%);
  border-radius: 18px;
  color: #fff;
  padding: 2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 12px 30px rgba(2,6,23,0.12);
}
.home-cta h3 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.8rem); }
.home-cta .btn {
  border-radius: 12px;
  padding: .7rem 1rem;
  font-weight: 700;
  background: #fff;
  color: #0f172a;
  border: 0;
}

/* ---------- 5) Footer spacing harmony ---------- */
.ts-home footer, .section-home footer { margin-top: 2.25rem; }

/* ---------- 6) Responsive ---------- */
@media (max-width: 992px) {
  .home-hero {
    grid-template-columns: 1fr;
    min-height: unset;
    padding: 3rem 0 2.5rem;
  }
  .home-hero .hero-card { padding: 2rem 1.5rem; }
  .home-cta { flex-direction: column; text-align: center; }
}

/* ---------- 7) Utility helpers for homepage ---------- */
.home-hide-on-mobile { display: block; }
@media (max-width: 640px) {
  .home-hide-on-mobile { display: none; }
}

/* Allow hero container to grow naturally */
.home-hero,
.ts-home .home-hero,
.section-home .home-hero {
  min-height: auto !important;
  height: auto !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  align-items: start !important; /* prevent vertical compression */
}

/* Ensure grid rows expand fully */
.home-hero > * {
  align-self: stretch !important;
}

/* Make sure nothing clips */
.home-hero,
.home-hero .hero-card,
.home-hero .mock-wrap,
.home-hero .mock {
  overflow: visible !important;
}

/* Fix the mock tile’s height overflow */
.home-hero .mock-wrap {
  height: auto !important;
}

/* Remove unintended overflow from parent sections */
.ts-page.section,
.section-home,
.ts-home {
  overflow: visible !important;
}

/* =======================================================
   HOMEPAGE HERO – ANTI-CLIP PATCH (strong overrides)
   Ensures the hero surface expands and never clips the mock.
   ======================================================= */

/* 1) Kill fixed/min heights that prevent growth */
.ts-home .home-hero,
.ts-home .home-hero *[class*="hero"],
.ts-home .hero-card,
.ts-home .hero-surface,
.ts-home main .ts-hero,
.ts-home main .ts-hero * {
  height: auto !important;
  min-height: auto !important;
}

/* 2) Make all relevant wrappers allow overflow (no clipping) */
.ts-home,
.ts-home main,
.ts-home .ts-page,
.ts-home .section-home,
.ts-home .home-hero,
.ts-home .hero-surface,
.ts-home .container,
.ts-home .hero-card {
  overflow: visible !important;
}

/* 3) Some templates use masks to fade edges – disable them on hero */
.ts-home .home-hero,
.ts-home .hero-surface,
.ts-home .hero-card {
  -webkit-mask: none !important;
  -webkit-mask-image: none !important;
  mask: none !important;
}

/* 4) Grid alignment: let content define height (no vertical squeezing) */
.ts-home .home-hero {
  display: grid;
  align-items: start !important;  /* stop centering from compressing rows */
  row-gap: 2rem;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important; /* gives comfortable bottom room */
}

/* 5) Mock/browser preview sizing: safe & responsive */
.ts-home .home-hero .mock-wrap {
  max-width: 560px;
  width: 100%;
  height: auto !important;
}

.ts-home .home-hero .mock {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto !important;      /* never exceed container vertically */
  aspect-ratio: auto;           /* avoid forced cropping from ratios */
  border: 1px solid rgba(2,6,23,0.08);
  border-radius: 16px;
  overflow: visible !important; /* keep soft shadows intact */
  box-shadow: 0 12px 30px rgba(2,6,23,0.15);
}

/* 6) Fallback: if any ancestor still clips, add a bottom spacer */
.ts-home .home-hero::after {
  content: "";
  display: block;
  height: 24px;                 /* small safety buffer under the hero */
}

/* === HOMEPAGE HERO: stop clipping & add breathing room === */

/* The rounded hero container is .ts-hero-shell inside .ts-section.
   It’s masking the mock card at the bottom. Remove the mask and
   give extra bottom padding so the mock fully fits. */
.ts-section .ts-hero-shell{
  overflow: visible !important;
  padding-bottom: 3.5rem !important; /* add room under the mock */
}

/* Some global sections set overflow hidden for band effects/animations. */
.ts-section,
.ts-public-shell,
.ts-public-shell .ts-page{
  overflow: visible !important;
}

/* Ensure the row doesn’t vertically compress its children. */
.ts-hero-shell .row{
  align-items: start !important;
}

/* Make the mock/browser block size naturally (no fixed heights). */
.ts-hero-mock-browser,
.ts-hero-mock-browser *{
  height: auto !important;
}

/* Keep the mock responsive and prevent any internal clipping. */
.ts-hero-mock-browser{
  max-width: 560px;
  width: 100%;
  overflow: visible !important;
}
.ts-hero-mock-body{
  overflow: visible !important;
  border-radius: 14px;
}

/* Small safety buffer to guarantee the hero never “butts up”
   against the shell edge even if fonts wrap differently. */
.ts-hero-shell::after{
  content:"";
  display:block;
  height: 12px;
}

/* === HOMEPAGE HERO: anti-clip + de-center (append anywhere after existing CSS) === */

/* Let the hero surface grow and never crop its children */
.ts-public-shell .ts-hero-shell{
  overflow: visible !important;
  padding-bottom: 4rem !important;   /* extra breathing room under the mock */
}
.ts-hero-shell .row{
  align-items: flex-start !important; /* stop vertical centering squeeze */
}

/* On desktop, remove the 80vh + flex centering that’s causing bottom crowding */
@media (min-width: 992px){
  .ts-hero-shell{
    min-height: auto !important;
    display: block !important;        /* cancel flex container */
    align-items: initial !important;
  }
}

/* Ensure the mock itself can size naturally and keep shadows */
.ts-hero-mock-browser,
.ts-hero-mock-body{
  height: auto !important;
  overflow: visible !important;
  max-width: 560px;                   /* optional: room for the card */
  width: 100%;
}

/* -------------------------------------------------------
   FIX 1: Icon circles in "How ThreatSpot Works"
   Ensures consistent size, centering, padding, and shadow
-------------------------------------------------------- */
.ts-feature-icon-circle {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    margin: 0 auto 12px auto !important;
    line-height: 1 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.10) !important;
}

/* Orange accent version (Step 1) */
.ts-feature-icon-accent {
    background: #e59b48 !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(229,155,72,0.35) !important;
}

/* Blue circle (Steps 2–4) */
.ts-feature-icon-circle:not(.ts-feature-icon-accent) {
    background: #2d4f63 !important;
    color: white !important;
}

/* -------------------------------------------------------
   FIX 2: Card interior spacing across feature tiles
   Normalizes inconsistent padding causing vertical drift
-------------------------------------------------------- */
.ts-step-card,
.ts-icp-card .card-body {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}

/* ensures headings don’t push icons */
.ts-step-card h5,
.ts-icp-card h5 {
    margin-top: 12px !important;
}

/* -------------------------------------------------------
   FIX 3: Stronger vertical centering across all icon cards
-------------------------------------------------------- */
.ts-card-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* =============================
   HOMEPAGE – TILE ALIGNMENT PATCH
   Sections:
   1) “From first connection to continuous protection”
      (.ts-value-pillars-row .ts-band-card)
   2) “Why teams use ThreatSpot”
      (.ts-icp-card)
   Purpose: fix icon vertical drift, normalize padding/heights,
   and make all tiles visually consistent.
   Append-only.
   ============================= */

/* --- 0) Shared icon circle baseline (keeps all icons identical) --- */
.ts-feature-icon-circle{
  width: 64px !important;
  height: 64px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 28px !important;
  margin: 0 auto 12px auto !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(2,6,23,.12) !important;
}
.ts-feature-icon-accent{                      /* orange “Connect” circle */
  background: #E59B48 !important;
  box-shadow: 0 10px 28px rgba(229,155,72,.35) !important;
}
.ts-feature-icon-circle:not(.ts-feature-icon-accent){
  background: #2D4F63 !important;            /* blue circles */
}

/* --- 1) Connect / Scan / Fix / Protect tiles --- */
.ts-value-pillars-row .ts-band-card{
  text-align: center !important;
  padding: 36px 28px !important;
  border: 1px solid rgba(2,6,23,.06) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.08) !important;
  min-height: 270px !important;              /* equalize card height */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.ts-value-pillars-row .ts-band-card h5{
  margin: 10px 0 8px !important;
}
.ts-value-pillars-row .ts-band-card p{
  margin-bottom: 0.5rem !important;
}

/* prevent odd extra top gap some cards pick up from grid collapse */
.ts-value-pillars-row [class^="col-"]{
  display: flex !important;
}
.ts-value-pillars-row [class^="col-"] > .ts-band-card{
  width: 100% !important;
}

/* --- 2) Why teams use ThreatSpot (feature trio) --- */
.ts-icp-card{
  border: 1px solid rgba(2,6,23,.06) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.08) !important;
}
.ts-icp-card .card-body{
  padding: 36px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;     /* top-align icon + text across all cards */
  text-align: center !important;
  min-height: 260px !important;              /* equal heights */
}
.ts-icp-card .ts-icp-icon{
  /* reuse the same circle sizing for absolute consistency */
  width: 64px !important;
  height: 64px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 28px !important;
  margin: 0 auto 12px auto !important;
  background: #2D4F63 !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(2,6,23,.12) !important;
}
.ts-icp-card h5{
  margin: 10px 0 8px !important;
}

/* On very small screens give a touch more vertical spacing */
@media (max-width: 575.98px){
  .ts-value-pillars-row .ts-band-card,
  .ts-icp-card .card-body{
    padding: 28px 22px !important;
    min-height: 0 !important;
  }
}

/* =========================================
   HOMEPAGE – FINAL TOUCH UPS
   1) How ThreatSpot works (step tiles)
   2) Testimonial + frameworks row
   ========================================= */

/* ---------- 1) HOW THREATSPOT WORKS ---------- */
/* Make every step card the same size and center its contents */
.ts-section .ts-step-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 32px 26px !important;
  min-height: 340px !important;      /* equal heights across all four tiles */
}

/* Ensure the icon circle is perfectly centered and evenly spaced */
.ts-section .ts-step-card .ts-feature-icon-circle{
  width: 64px !important;
  height: 64px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 28px !important;
  margin: 0 auto 10px auto !important;
}

/* Tighten the STEP label and heading spacing so all cards align */
.ts-section .ts-step-card .ts-step-meta{
  letter-spacing: .18em !important;
  font-weight: 700 !important;
  color: #64748b !important;
  margin-bottom: 6px !important;
}
.ts-section .ts-step-card h5,
.ts-section .ts-step-card .fw-semibold{
  margin: 10px 0 8px !important;
}

/* If a pseudo “inner panel” was added in previous styles, remove offset */
.ts-section .ts-step-card::before{
  /* some variants used a shadowed inner panel with transforms */
  transform: none !important;
  top: auto !important;
}

/* ---------- 2) TESTIMONIAL + FRAMEWORKS ROW ---------- */
/* Keep both columns the same height, but don't force the CTA to the bottom */
.ts-section .row.align-items-stretch{
  align-items: stretch !important;
}

/* Right column currently has `justify-content-between` which creates odd gaps.
   Change to natural flow and space items with standard margins. */
.ts-section .col-md-5.d-flex{
  justify-content: flex-start !important;
}
.ts-section .col-md-5.d-flex > .mb-3{
  margin-bottom: 1rem !important;   /* text block spacing */
}
.ts-section .col-md-5.d-flex .btn{
  align-self: flex-start !important; /* keep CTA aligned with text, not bottom */
  margin-top: 1rem !important;
}

/* =========================================
   COMPLIANCE DASHBOARD – FRAMEWORK LIST
   Softer active highlight so text stays readable
   ========================================= */
.ts-compliance-frameworks-list .list-group-item {
  border-radius: 10px;
}

.ts-compliance-frameworks-list .list-group-item.active {
  background-color: #e5edff;          /* light indigo */
  border-color: #c7d2fe;
  color: #0f172a;                      /* slate-900 text */
}

.ts-compliance-frameworks-list .list-group-item.active .fw-semibold {
  color: inherit;
}

.ts-compliance-frameworks-list .list-group-item.active:hover,
.ts-compliance-frameworks-list .list-group-item.active:focus {
  background-color: #dbe4ff;
  border-color: #c7d2fe;
}

/* Small devices: reduce tile padding so nothing looks cramped */
@media (max-width: 575.98px){
  .ts-section .ts-step-card{
    min-height: 0 !important;
    padding: 26px 20px !important;
  }
}

/* =========================================
   HOMEPAGE – FINAL TOUCH UPS
   1) How ThreatSpot works (step tiles)
   2) Testimonial + frameworks row
   ========================================= */

/* ---------- 1) HOW THREATSPOT WORKS ---------- */
/* Make every step card the same size and center its contents */
.ts-section .ts-step-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 32px 26px !important;
  min-height: 340px !important;      /* equal heights across all four tiles */
}

/* Ensure the icon circle is perfectly centered and evenly spaced */
.ts-section .ts-step-card .ts-feature-icon-circle{
  width: 64px !important;
  height: 64px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 28px !important;
  margin: 0 auto 10px auto !important;
}

/* Tighten the STEP label and heading spacing so all cards align */
.ts-section .ts-step-card .ts-step-meta{
  letter-spacing: .18em !important;
  font-weight: 700 !important;
  color: #64748b !important;
  margin-bottom: 6px !important;
}
.ts-section .ts-step-card h5,
.ts-section .ts-step-card .fw-semibold{
  margin: 10px 0 8px !important;
}

/* If a pseudo “inner panel” was added in previous styles, remove offset */
.ts-section .ts-step-card::before{
  /* some variants used a shadowed inner panel with transforms */
  transform: none !important;
  top: auto !important;
}

/* ---------- 2) TESTIMONIAL + FRAMEWORKS ROW ---------- */
/* Keep both columns the same height, but don't force the CTA to the bottom */
.ts-section .row.align-items-stretch{
  align-items: stretch !important;
}

/* Right column currently has `justify-content-between` which creates odd gaps.
   Change to natural flow and space items with standard margins. */
.ts-section .col-md-5.d-flex{
  justify-content: flex-start !important;
}
.ts-section .col-md-5.d-flex > .mb-3{
  margin-bottom: 1rem !important;   /* text block spacing */
}
.ts-section .col-md-5.d-flex .btn{
  align-self: flex-start !important; /* keep CTA aligned with text, not bottom */
  margin-top: 1rem !important;
}

/* Small devices: reduce tile padding so nothing looks cramped */
@media (max-width: 575.98px){
  .ts-section .ts-step-card{
    min-height: 0 !important;
    padding: 26px 20px !important;
  }
}

/* ===== FIX 1: “How ThreatSpot Works” step icon alignment & sizing ===== */
/* Uses existing names: .ts-step-card, .ts-feature-icon-circle, .ts-step-meta */

.ts-step-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1.25rem 1.25rem !important;   /* even internal spacing */
  gap: 0.5rem !important;
}

/* Make the icon circles perfectly consistent and centered */
.ts-step-card .ts-feature-icon-circle {
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  /* subtle, premium chrome consistent with your theme */
  background: radial-gradient(circle at 30% 0%, rgba(148, 163, 184, 0.3), #0E3A53) !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(148, 163, 184, 0.55) !important;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.45) !important;
}

.ts-step-card .ts-feature-icon-circle i {
  font-size: 26px !important;
  line-height: 1 !important;
}

/* Tighten micro-typography so title/label don’t wrap oddly */
.ts-step-card h5 {
  margin: 0 0 6px 0 !important;
  font-weight: 600 !important;
}
.ts-step-meta {
  margin-bottom: 6px !important;
  letter-spacing: 0.12em !important;
}

/* Keep columns equal height and prevent “short first tile” on rows */
.ts-step-row-bordered > [class*="col-"] {
  display: flex !important;
}
.ts-step-row-bordered > [class*="col-"] .ts-step-card {
  flex: 1 1 auto !important;
}

/* On md+ align text left for a cleaner scan line */
@media (min-width: 768px) {
  .ts-step-card {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* ===== FIX 2: “Why teams use ThreatSpot” first tile visual balance ===== */
/* Uses existing names: .ts-value-pillars-row, .ts-band-card, .ts-feature-card */

.ts-value-pillars-row .ts-band-card,
.ts-value-pillars-row .ts-feature-card {
  /* normalize padding & depth so the first tile doesn’t look “off” */
  padding: 1.5rem 1.5rem !important;
  border-radius: var(--ts-radius-card) !important;
  border: 1px solid #E5E7EB !important;
  background: #FFFFFF !important;
  box-shadow: var(--ts-shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 180px !important;   /* prevents short first tile */
}

/* Even vertical rhythm in that row */
.ts-value-pillars-row {
  row-gap: 1.25rem !important;
}

/* Icon & heading spacing inside those tiles */
.ts-value-pillars-row .ts-band-card .ts-feature-icon-circle,
.ts-value-pillars-row .ts-feature-card .ts-feature-icon-circle {
  margin-bottom: 10px !important;
}
.ts-value-pillars-row .ts-band-card h5,
.ts-value-pillars-row .ts-feature-card h5 {
  margin: 0 0 6px 0 !important;
  font-weight: 600 !important;
}

/* Equal-height columns for mixed content */
.ts-value-pillars-row > [class*="col-"] {
  display: flex !important;
}
.ts-value-pillars-row > [class*="col-"] > * {
  flex: 1 1 auto !important;
}

/* ===== Minor polish to card hover so it’s consistent in both sections ===== */
.ts-card-hover:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--ts-shadow-soft) !important;
  border-color: rgba(14, 58, 83, 0.18) !important;
}

/* "How ThreatSpot works" – top-align content so icons share a common baseline */
.ts-section.ts-section-band .ts-step-card {
  position: static !important;                /* cancel previous relative positioning */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;     /* no per-card vertical centering */
  text-align: center !important;
  padding-top: 32px !important;               /* restore original padding */
}

.ts-section.ts-section-band .ts-step-card .ts-feature-icon-circle {
  position: static !important;                /* cancel absolute hack */
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;             /* consistent space under every icon */
}

/* 1) Normalize vertical rhythm site-wide */
.ts-section { padding: 56px 0; }                 /* default desktop */
.ts-section-sm { padding: 32px 0; }              /* compact sections */
.ts-section-lg { padding: 80px 0; }              /* hero-scale sections */

.ts-section > :last-child { margin-bottom: 0; }  /* kill trailing gaps */

/* 2) Tighten the blue “pill belt” block */
.ts-value-belt, .ts-feature-belt, .ts-pill-belt {
  margin-top: 24px;
  margin-bottom: 24px;         /* was effectively ~64–96px via stacking */
}

.ts-pill-belt .ts-pill {       /* keep pills looking airy without adding section gap */
  margin: 0;                   /* rely on belt gap, not pill margins */
}

/* 3) Pull the “Trusted by” block up and keep it compact */
.ts-trusted { 
  margin-top: 24px;
  padding-top: 0;              /* in case the block had internal padding */
}
.ts-trusted .ts-logos { margin-top: 16px; }

/* 4) Guard against accidental spacers */
.ts-spacer, .ts-space-y-xxl, .ts-mb-xxl { display: none; }

/* 5) Responsive tweaks */
@media (max-width: 991.98px) {
  .ts-section { padding: 40px 0; }
  .ts-value-belt, .ts-feature-belt, .ts-pill-belt { margin: 20px 0; }
}

@media (max-width: 575.98px) {
  .ts-section { padding: 32px 0; }
  .ts-value-belt, .ts-feature-belt, .ts-pill-belt { margin: 16px 0; }
}