/* ==========================================================================
   CJ AI Agency — Brand & Theme Rules
   ========================================================================== */

:root {
  --font-heading: "URW Gothic Demi", "URW Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "URW Gothic Demi", "URW Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --accent-primary: #0761FF;
  --accent-primary-rgb: 7, 97, 255;
  --accent-secondary: #2789FF;
  --accent-secondary-rgb: 39, 137, 255;
  --accent-tertiary: #0761FF;
  --bg-primary: #FFFFFF;
  --text-primary: #000000;
}

[data-theme="dark"] {
  --bg-primary: #0B1C30;
  --bg-secondary: #071526;
  --bg-tertiary: #0f2742;
  --text-primary: #FFFFFF;
  --accent-primary: #0761FF;
  --accent-primary-rgb: 7, 97, 255;
  --accent-secondary: #2789FF;
  --accent-secondary-rgb: 39, 137, 255;
  --accent-tertiary: #2789FF;
  --card-bg: rgba(11, 28, 48, 0.75);
  --glass-bg: rgba(11, 28, 48, 0.6);
  --glass-bg-hover: rgba(15, 39, 66, 0.8);
  --glow-color: rgba(39, 137, 255, 0.25);
  --badge-bg: rgba(7, 97, 255, 0.2);
  --badge-text: #2789FF;
}

/* Site-wide Typography */
body, h1, h2, h3, h4, h5, h6, input, textarea, button, select, p, span, a, li {
  font-family: "URW Gothic Demi", "URW Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Global Rule 13: Capitalize all headings */
h1, h2, h3, h4, h5, h6, .section-title, .hero-title, .blog-title, .card-title, .service-title {
  text-transform: capitalize !important;
}

/* Global Rule 15: No border on SVG wrappers */
svg, span.contact-icon-box, .stat-icon-wrapper, .theme-icon, .logo-icon, .whatsapp-icon-box {
  border: 0 !important;
  outline: none !important;
}

/* Global Rule 17 & 7.1b: Plain text location (no link/hover styling) */
.location-text {
  cursor: default !important;
  pointer-events: none !important;
  text-decoration: none !important;
}
.location-text:hover {
  color: inherit !important;
  text-decoration: none !important;
}

/* Global Rule 19 & 2.11: Header dropdown full opacity */
.nav-dropdown, .dropdown-menu, .mobile-menu, .header-dropdown,
[data-theme="dark"] .nav-dropdown, [data-theme="light"] .nav-dropdown {
  opacity: 1 !important;
}

/* Section 7.1c: Footer mobile max-width */
@media (max-width: 768px) {
  .footer-desc {
    max-width: 100% !important;
  }
}

/* Section 9: WooCommerce coupon fixes */
.woocommerce-checkout .checkout_coupon button[name="apply_coupon"],
.woocommerce-page .checkout_coupon button[name="apply_coupon"] {
  width: max-content !important;
}
.woocommerce form.checkout_coupon[style*="display: none"] {
  display: none !important;
}

/* Logo display */
.logo-wrapper .logo-img {
  height: 40px;
  width: auto;
  max-width: 190px;
  max-height: 40px;
  object-fit: contain;
  display: block;
}

.site-footer .logo-wrapper .logo-img {
  height: 36px;
  max-height: 36px;
}

@media (max-width: 480px) {
  .logo-wrapper .logo-img {
    height: 34px;
    max-height: 34px;
    max-width: 150px;
  }
}

/* Light / Dark Logo Swapping */
.logo-img--dark {
  display: none;
}
[data-theme="dark"] .logo-img--light {
  display: none;
}
[data-theme="dark"] .logo-img--dark {
  display: block;
}
[data-theme="light"] .logo-img--light {
  display: block;
}
[data-theme="light"] .logo-img--dark {
  display: none;
}

/* Bottom padding for fixed WhatsApp button on mobile */
@media (max-width: 768px) {
  .site-footer {
    padding-bottom: 70px;
  }
}

/* AI Chatbot & Service Hero H1 - Remove fixed width */
.page-id-8 .voice-hero .hero-title,
.page-id-8 .hero-title,
.voice-hero .hero-title {
  width: auto !important;
  max-width: 100% !important;
}

/* Footer Contact Info - No Icon Border & Reduced Gap */
.footer-contact-col .footer-contact-list {
  gap: 10px !important;
}
.footer-contact-item,
.footer-contact-item .contact-item-link {
  gap: 10px !important;
}
.contact-icon-box,
[data-theme="dark"] .contact-icon-box,
[data-theme="light"] .contact-icon-box {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.contact-item-link:hover .contact-icon-box {
  border: none !important;
  background: transparent !important;
  color: var(--accent-primary) !important;
}

/* ==========================================================================
   FIX: Showcase Chat Simulator Mobile Layout (Stats in Vertical Column Form)
   ========================================================================== */
@media (max-width: 991px) {
  .showcase-viewscreen {
    height: auto !important;
    min-height: auto !important;
  }
  .showcase-viewscreen .view-content-pane {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 16px 14px !important;
  }
  .showcase-section .pane-chat-wrapper,
  #tab-chat .pane-chat-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }
  /* 3 Stats Cards in Vertical Column Form on Mobile */
  .showcase-section .sidebar-stats-box,
  #tab-chat .sidebar-stats-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .showcase-section .stat-min-card,
  #tab-chat .stat-min-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .showcase-section .stat-min-header,
  #tab-chat .stat-min-header {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px !important;
    color: var(--text-tertiary) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .showcase-section .stat-min-num,
  #tab-chat .stat-min-num {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    font-family: var(--font-heading) !important;
    line-height: 1.2 !important;
    display: block !important;
    color: var(--text-primary) !important;
  }
  .showcase-section .stat-bar,
  #tab-chat .stat-bar {
    width: 100% !important;
    height: 5px !important;
    margin-top: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-pill) !important;
    overflow: hidden !important;
  }
  .showcase-section .chat-viewport-module {
    width: 100% !important;
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .showcase-section .chat-messages-container {
    flex: 1 1 auto !important;
    height: 310px !important;
    max-height: 310px !important;
    overflow-y: auto !important;
  }
}


/* ==========================================================================
   FIX: Workflow Pipeline Sandbox Mobile Bottom Gap Removal
   ========================================================================== */
@media (max-width: 991px) {
  .workflow-builder-window {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 14px 14px 16px 14px !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .workflow-grid-nodes,
  #workflow-nodes-container {
    flex: none !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 4px 6px 4px 16px !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  .workflow-grid-nodes::before {
    left: 23px !important;
    top: 18px !important;
    bottom: 24px !important;
  }
  .workflow-builder-window .human-gate-prompt-card {
    margin-top: 8px !important;
    margin-bottom: 2px !important;
  }
}

/* ==========================================================================
   FIX: WhatsApp Badge Hover Trigger strictly on .whatsapp-icon-box
   ========================================================================== */
.whatsapp-widget {
  pointer-events: none !important;
}

.whatsapp-icon-box {
  pointer-events: auto !important;
}

.whatsapp-widget .whatsapp-badge {
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateX(10px) !important;
}

.whatsapp-widget:hover .whatsapp-badge {
  opacity: 0 !important;
  transform: translateX(10px) !important;
}

.whatsapp-widget:has(.whatsapp-icon-box:hover) .whatsapp-badge {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.whatsapp-icon-box:hover {
  transform: scale(1.1) rotate(10deg) !important;
}

/* ==========================================================================
   Mobile Screen H1 Typography Override
   ========================================================================== */
@media (max-width: 768px) {
  h1,
  .hero-title,
  .about-hero-title,
  .blog-hero h1,
  .legal-hero h1,
  h1.hero-title,
  h1.about-hero-title,
  .voice-hero .hero-title,
  .hero-section .hero-title {
    font-size: 40px !important;
    line-height: 44px !important;
  }
}

/* ==========================================================================
   FIX: Stable Fixed Height for #voice-transcript (Zero Mobile Layout Shift)
   ========================================================================== */
#voice-transcript,
.transcript-log-screen {
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@media (max-width: 991px) {
  .showcase-section .pane-voice-wrapper {
    height: auto !important;
    min-height: auto !important;
  }

  .showcase-section .voice-right-panel {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
  }

  #voice-transcript,
  .showcase-section #voice-transcript,
  .showcase-section .transcript-log-screen,
  .transcript-log-screen {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: none !important;
  }
}

/* ==========================================================================
   FIX: Mobile Horizontal Overflow Prevention (Custom AI Agent & Contact Pages)
   ========================================================================== */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative !important;
}

@media (max-width: 991px) {
  .section-container,
  .contact-section,
  .contact-process-section,
  .about-section,
  .why-section,
  .pricing-section,
  .addons-section,
  .faq-section,
  .cta-section,
  .cta-banner,
  .cta-glass-box {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  /* Prevent any block/flex/grid element from overflowing horizontally */
  *, *::before, *::after {
    max-width: 100%;
  }

  /* Structural containers (No per-section scrollbars) */
  main,
  section,
  .about-hero,
  .about-section,
  .pillars-section,
  .stats-section,
  .cta-section,
  .section-container,
  .contact-section,
  .contact-process-section,
  .why-section,
  .pricing-section,
  .addons-section,
  .faq-section,
  .contact-header,
  .section-header {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    overflow-x: clip !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  main::-webkit-scrollbar,
  section::-webkit-scrollbar,
  .section-container::-webkit-scrollbar,
  .about-section::-webkit-scrollbar,
  .about-hero::-webkit-scrollbar,
  .pillars-section::-webkit-scrollbar,
  .stats-section::-webkit-scrollbar,
  .cta-section::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* Heading word-wrap & overflow protection */
  h1, h2, h3, h4, h5, h6,
  .section-title,
  .hero-title,
  .contact-header h2,
  .section-header h2,
  .faq-section .section-title {
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  .section-title span,
  .hero-title span,
  h2 span {
    display: inline !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .faq-section .section-title {
    font-size: 28px !important;
    line-height: 34px !important;
    padding: 0 8px !important;
  }

  /* ----------------------------------------------------
     Contact Page Specific Overflow Fixes
     ---------------------------------------------------- */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-info-col,
  .contact-form-col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-info-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 16px !important;
    min-width: 0 !important;
    word-break: break-word !important;
  }

  .contact-info-card .info-text {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    word-break: break-word !important;
  }

  .info-link {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .contact-form-wrapper {
    padding: 24px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .liquid-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  .radio-group {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .radio-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .radio-content {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    word-break: break-word !important;
  }

  .liquid-input,
  .liquid-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .form-submit-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  /* ----------------------------------------------------
     Timeline & Process Flow Fixes (Both Contact & Custom AI)
     ---------------------------------------------------- */
  .timeline-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .timeline-container .timeline-step {
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .timeline-container .step-num {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 0.9rem !important;
    flex-shrink: 0 !important;
  }

  .timeline-container .timeline-step::after {
    left: 21px !important;
    top: 22px !important;
  }

  .timeline-container .step-content {
    width: 100% !important;
    max-width: calc(100% - 56px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 16px 14px !important;
    word-break: break-word !important;
  }

  .step-title,
  .step-desc {
    word-break: break-word !important;
  }

  /* ----------------------------------------------------
     Custom AI Agent Interactive Sandbox & Grid Fixes
     ---------------------------------------------------- */
  .voice-sandbox-card {
    padding: 16px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .sandbox-console {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .sandbox-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-bottom: 16px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-sizing: border-box !important;
  }

  .voice-select-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .voice-details {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    word-break: break-word !important;
  }

  .voice-name,
  .voice-role {
    word-break: break-word !important;
  }

  .sandbox-main {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .workflow-builder-window {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
    overflow: hidden !important;
  }

  .active-call-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .call-meta {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: break-word !important;
  }

  .call-number {
    word-break: break-word !important;
    white-space: normal !important;
  }

  .workflow-grid-nodes {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 4px 4px 12px !important;
    overflow-x: hidden !important;
  }

  .workflow-node-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .workflow-node-item .node-container-box {
    width: 100% !important;
    max-width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
  }

  .workflow-node-item .node-info-text {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    word-break: break-word !important;
  }

  .workflow-node-item .node-title,
  .workflow-node-item .node-desc {
    word-break: break-word !important;
    white-space: normal !important;
  }

  .human-gate-prompt-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .human-gate-text {
    width: 100% !important;
    min-width: 0 !important;
    word-break: break-word !important;
  }

  .gate-actions-row {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .sandbox-controls {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* ----------------------------------------------------
     Custom AI Agent Grids & CTA Fixes
     ---------------------------------------------------- */
  .voice-pillars-grid,
  .why-grid,
  .pricing-grid,
  .addons-grid,
  .faq-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 20px !important;
  }

  .voice-pillar-card,
  .why-card,
  .pricing-card,
  .addon-card,
  .faq-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    word-break: break-word !important;
  }

  .addon-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  .addon-info {
    min-width: 0 !important;
    width: 100% !important;
    word-break: break-word !important;
  }

  .cta-glass-box {
    padding: 28px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .cta-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cta-content-left,
  .cta-visual-right {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .cta-title,
  .cta-desc {
    word-break: break-word !important;
  }

  .cta-ctas {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .cta-visual-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 12px !important;
    overflow: hidden !important;
  }

  .analytics-funnel-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 14px 0 !important;
  }

  .funnel-level-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .funnel-val-text {
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
  }

  .funnel-bar-fill {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .visual-stats {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }

  .v-stat {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    text-align: center !important;
  }

  .v-label {
    font-size: 0.6rem !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
  }

  .v-val {
    font-size: 0.8rem !important;
  }
}

/* ==========================================================================
   Testimonial Reviews Marquee Speed & Mobile Optimization
   ========================================================================== */
.reviews-marquee-wrapper {
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
  padding: 20px 0 !important;
}

.reviews-marquee-wrapper .marquee-track {
  display: flex !important;
  gap: 30px !important;
  width: max-content !important;
  will-change: transform !important;
  animation: scroll-marquee 25s linear infinite !important;
}

.reviews-marquee-wrapper .marquee-track:hover {
  animation-play-state: paused !important;
}

/* Tablet Screen Speed Optimization (769px - 991px) */
@media (max-width: 991px) {
  .reviews-marquee-wrapper .marquee-track {
    gap: 20px !important;
    animation: scroll-marquee 16s linear infinite !important;
  }
  .reviews-marquee-wrapper .review-card {
    width: 330px !important;
    flex-shrink: 0 !important;
  }
}

/* Mobile Screen Professional Smooth & Dynamic Speed (<= 768px) */
@media (max-width: 768px) {
  .reviews-marquee-wrapper {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 16px 0 !important;
  }

  .reviews-marquee-wrapper .marquee-track {
    gap: 16px !important;
    animation: scroll-marquee 12s linear infinite !important;
  }

  .reviews-marquee-wrapper .review-card {
    width: 290px !important;
    max-width: 85vw !important;
    flex-shrink: 0 !important;
    padding: 20px 16px !important;
    border-radius: var(--radius-md) !important;
  }

  .reviews-marquee-wrapper::before,
  .reviews-marquee-wrapper::after {
    width: 35px !important;
  }
}

/* Extra Small Mobile Screen (<= 480px) */
@media (max-width: 480px) {
  .reviews-marquee-wrapper .marquee-track {
    gap: 14px !important;
    animation: scroll-marquee 11s linear infinite !important;
  }

  .reviews-marquee-wrapper .review-card {
    width: 270px !important;
    padding: 18px 14px !important;
  }
}

/* ==========================================================================
   Home Page Trust Section Logo Marquee Speed Optimization
   ========================================================================== */
.trust-section .logo-marquee {
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
}

.trust-section .marquee-content {
  display: flex !important;
  width: max-content !important;
  white-space: nowrap !important;
  will-change: transform !important;
  animation: marquee-infinite 28s linear infinite !important;
}

.trust-section .marquee-content:hover {
  animation-play-state: paused !important;
}

/* Tablet Screen (769px - 991px) */
@media (max-width: 991px) {
  .trust-section .marquee-content {
    gap: 48px !important;
    animation: marquee-infinite 18s linear infinite !important;
  }
  .trust-logo {
    font-size: 1rem !important;
  }
}

/* Mobile Screen (<= 768px) */
@media (max-width: 768px) {
  .trust-section {
    padding: 30px 0 !important;
  }

  .trust-section .logo-marquee {
    mask-image: linear-gradient(
      to right,
      transparent,
      black 10%,
      black 90%,
      transparent
    ) !important;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      black 10%,
      black 90%,
      transparent
    ) !important;
  }

  .trust-section .marquee-content {
    gap: 36px !important;
    animation: marquee-infinite 12s linear infinite !important;
  }

  .trust-logo {
    gap: 8px !important;
    font-size: 0.92rem !important;
  }

  .trust-logo svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Extra Small Mobile (<= 480px) */
@media (max-width: 480px) {
  .trust-section .marquee-content {
    gap: 26px !important;
    animation: marquee-infinite 10s linear infinite !important;
  }

  .trust-logo {
    font-size: 0.85rem !important;
  }
}





/* ==========================================
   LEGAL DOCUMENTS (Privacy Policy / Terms & Conditions)
   Scoped to .legal-doc (page body) and .footer-legal-nav (footer bar).
   ========================================== */
.legal-doc {
  --legal-line: rgba(15, 23, 42, 0.12);
  --legal-soft: rgba(var(--accent-primary-rgb), 0.06);
  --legal-soft-strong: rgba(var(--accent-primary-rgb), 0.1);
  --legal-ring: rgba(var(--accent-primary-rgb), 0.22);
}

[data-theme="dark"] .legal-doc {
  --legal-line: rgba(255, 255, 255, 0.1);
  --legal-soft: rgba(var(--accent-primary-rgb), 0.07);
  --legal-soft-strong: rgba(var(--accent-primary-rgb), 0.12);
  --legal-ring: rgba(var(--accent-primary-rgb), 0.28);
}

.legal-doc section {
  scroll-margin-top: calc(var(--header-height) + 32px);
  padding-top: 8px;
}

.legal-doc section + section {
  border-top: 1px solid var(--legal-line);
  margin-top: 40px;
}

.legal-doc strong {
  color: var(--text-primary);
  font-weight: 700;
}

.legal-doc a {
  color: var(--accent-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--legal-ring);
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
  overflow-wrap: anywhere;
}

.legal-doc a:hover {
  text-decoration-color: currentColor;
}

.legal-doc code {
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--legal-soft-strong);
}

/* Lists: restore markers (global ul reset removes them) */
.article-body .legal-doc ul {
  list-style: disc;
  padding-left: 22px;
}

.article-body .legal-doc ol {
  list-style: decimal;
  padding-left: 22px;
}

.article-body .legal-doc li::marker {
  color: var(--accent-primary);
}

/* Section headings with numbered chip */
.article-body .legal-doc h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 1.6rem;
  margin-top: 32px;
  margin-bottom: 18px;
  line-height: 1.25;
}

.article-body .legal-doc h3 {
  font-size: 1.15rem;
  margin-top: 28px;
  margin-bottom: 10px;
}

.legal-doc .legal-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent-primary);
  background: var(--legal-soft-strong);
  border: 1px solid var(--legal-ring);
  position: relative;
  top: -0.12em;
}

[data-theme="dark"] .legal-doc .legal-num {
  color: var(--text-primary);
  background: rgba(var(--accent-primary-rgb), 0.22);
  border-color: rgba(var(--accent-primary-rgb), 0.45);
}

/* Intro summary */
.legal-doc .legal-summary {
  padding-bottom: 8px;
}

.article-body .legal-doc .legal-keyfacts {
  list-style: none;
  padding: 0;
  margin: 8px 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.article-body .legal-doc .legal-keyfacts li {
  margin: 0;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--legal-soft);
  border: 1px solid var(--legal-line);
  color: var(--text-secondary);
}

/* At-a-glance callout */
.legal-doc .legal-callout {
  position: relative;
  margin: 0 0 32px;
  padding: 24px 28px;
  border-radius: var(--radius-md);
  background: var(--legal-soft);
  border: 1px solid var(--legal-ring);
  border-left: 4px solid var(--accent-primary);
}

.article-body .legal-doc .legal-callout ul {
  margin-bottom: 0;
}

.article-body .legal-doc .legal-callout li:last-child {
  margin-bottom: 0;
}

.article-body .legal-doc .legal-callout-title,
.article-body .legal-doc .legal-toc-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* Table of contents */
.legal-doc .legal-toc {
  margin: 0 0 24px;
  padding: 24px 28px;
  border-radius: var(--radius-md);
  border: 1px solid var(--legal-line);
  background: var(--legal-soft);
}

.article-body .legal-doc .legal-toc ol {
  margin: 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 40px;
}

.article-body .legal-doc .legal-toc li {
  break-inside: avoid;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--text-tertiary);
}

.article-body .legal-doc .legal-toc li::marker {
  font-weight: 700;
}

.legal-doc .legal-toc a {
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
}

.legal-doc .legal-toc a:hover {
  color: var(--accent-primary);
}

/* Tables */
.legal-doc .article-table-container {
  margin: 20px 0 28px;
  border-color: var(--legal-line);
}

.article-body .legal-doc th,
.article-body .legal-doc td {
  border-bottom-color: var(--legal-line);
  vertical-align: top;
  line-height: 1.55;
}

.article-body .legal-doc th {
  background: var(--legal-soft-strong);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.article-body .legal-doc td:first-child {
  color: var(--text-primary);
  font-weight: 600;
}

/* Contact card */
.legal-doc .legal-contact-card {
  margin: 8px 0 24px;
  padding: 24px 28px;
  border-radius: var(--radius-md);
  background: var(--legal-soft);
  border: 1px solid var(--legal-ring);
}

.article-body .legal-doc .legal-contact-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.article-body .legal-doc .legal-contact-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-body .legal-doc .legal-contact-card li:last-child {
  margin-bottom: 0;
}

.article-body .legal-doc .legal-related {
  margin-bottom: 0;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .article-body .legal-doc h2 {
    font-size: 1.3rem;
    gap: 10px;
  }

  .legal-doc .legal-num {
    min-width: 36px;
    height: 28px;
    font-size: 0.78rem;
  }

  .article-body .legal-doc .legal-toc ol {
    columns: 1;
  }

  .legal-doc .legal-callout,
  .legal-doc .legal-toc,
  .legal-doc .legal-contact-card {
    padding: 20px;
  }

  .article-body .legal-doc th,
  .article-body .legal-doc td {
    padding: 12px 14px;
    font-size: 0.88rem;
  }
}

/* Footer legal links (bottom bar) */
.footer-bottom-centered .footer-legal-nav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid #ffffff33;
  vertical-align: baseline;
  line-height: 1.6;
}

.footer-legal-nav .footer-legal-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: #cbd5e1;
  transition: color var(--transition-fast);
}

.footer-legal-nav .footer-legal-link:hover,
.footer-legal-nav .footer-legal-link:focus-visible,
.footer-legal-nav .footer-legal-link[aria-current="page"] {
  color: var(--accent-primary);
}

.footer-legal-nav .footer-legal-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  color: #94a3b8;
  opacity: 0.7;
}

[data-theme="light"] .footer-bottom-centered .footer-legal-nav {
  border-left-color: #00000033;
}

[data-theme="light"] .footer-legal-nav .footer-legal-link {
  color: #475569;
}

[data-theme="light"] .footer-legal-nav .footer-legal-link:hover,
[data-theme="light"] .footer-legal-nav .footer-legal-link:focus-visible,
[data-theme="light"] .footer-legal-nav .footer-legal-link[aria-current="page"] {
  color: var(--accent-primary);
}

[data-theme="light"] .footer-legal-nav .footer-legal-sep {
  color: #64748b;
}

@media (max-width: 768px) {
  .footer-bottom-centered .footer-legal-nav {
    display: flex;
    justify-content: center;
    margin: 10px 0 0;
    padding-left: 0;
    border-left: 0;
  }
}

/* Legal page header: centre the eyebrow badge to match the centred title/meta */
.article-section .article-header > .badge {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}