/* Brand tokens (shared) */
:root {
  --brand: rgba(77, 194, 196, 1); /*  #FFC70E Primary CTA  */
  --brand-warm: rgba(255, 199, 14, 1); /* Primary CTA  */
  --brand-secondary: rgba(43, 135, 200, 1); /* Secondary CTA */
  --band-white: rgba(255,255,255, 1); /* band-3 background accent */
  --brand-600: rgba(51, 153, 155, 1); /*  #F29827; Hover  */
  --accent: rgba(43, 182, 115, 1);   /* Support/Success Green */
  --bs-body-font-weight: 300;
  --bs-border-radius: 4px;
  --bs-border-radius-lg: 4px;
}

/* Theme palettes */
body[data-theme='dark'] {
  --text: #E6EDF3;
  --muted-txt: #C3CDD6; /* Lightened for better contrast */
  --ink: #102A43;
  --muted: #4B5B6A;
  --bg: #0F1B2D;
  --bg-2: #102A43;
  --card: #14233A;
  --soft: #0F1F33;
  --nav-bg: rgba(16,42,67,0.85);
  --nav-link: #D2D8E0;
  --border: rgba(188, 212, 252, 0.2);
  --form-control-border: rgba(188, 212, 252, 0.5);
  --eyebrow: #86B5FF;
  --shadow-brand: color-mix(in srgb, var(--brand) 25%, transparent);
  --shadow-brand-hover: color-mix(in srgb, var(--brand) 33%, transparent);
  --shadow-brand-secondary: color-mix(in srgb, var(--brand-secondary) 25%, transparent);
  --shadow-brand-secondary-hover: color-mix(in srgb, var(--brand-secondary) 33%, transparent);
  --gradient-a: color-mix(in srgb, var(--brand-warm) 25%, transparent);
  --gradient-b: rgba(43,182,115,.25);
}

body[data-theme='light'] {
  --text: #0F172A;
  --muted-txt: #475569;
  --ink: #0F172A;
  --muted: #64748B;
  --bg: #FFFFFF;
  --bg-2: #F1F5F9;
  --card: #FFFFFF;
  --soft: #FFFFFF;
  --nav-bg: rgba(255,255,255,0.85);
  --nav-link: #334155;
  --border: rgba(15,23,42,0.08);
  --eyebrow: #0EA5E9;
  --shadow-brand: color-mix(in srgb, var(--brand) 18%, transparent);
  --shadow-brand-hover: color-mix(in srgb, var(--brand) 26%, transparent);
  --shadow-brand-secondary: color-mix(in srgb, var(--brand-secondary) 18%, transparent);
  --shadow-brand-secondary-hover: color-mix(in srgb, var(--muted) 24%, transparent);
  --gradient-a: color-mix(in srgb, var(--brand-warm) 20%, transparent);
  --gradient-b: rgba(43,182,115,.2);
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--text);
  /* Layer order: decorative wave, right-aligned logo, gradient base */
  background:
    url('../images/waves-ai.svg') left top / cover no-repeat fixed,
    /* url('../images/vosaic-logo-bg.svg') right top / 520px auto no-repeat, */
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 40%, var(--bg-2) 100%);
  background-blend-mode: revert-layer;
}
@media (prefers-color-scheme: dark) {
  html {
  	background-color: #0F1B2D;
  }
}
@media (max-width: 600px) {
  html,
  body {
    background:
      url('../images/waves-ai.svg') left top / 150% auto no-repeat fixed,
      linear-gradient(180deg, var(--bg) 0%, var(--bg) 40%, var(--bg-2) 100%);
  }
}
b, strong {
    font-weight: 700 !important;
}
.bg-light-gray {
    background-color:#ededed !important;
    color: #242c33 !important;
    text-shadow: 0 1px rgba(255, 255, 255, 0.2);
}

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
.video-ad .embed-responsive {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.video-ad-card .card {
    height: auto !important;
    border-radius: .6rem;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    display: block;
    margin-bottom: .75rem;
    position: relative;
    padding:0 0 10px;
}

.video-ad .icon {
    display: inline-block;
    height: 1rem;
    margin-top: -.23rem;
    vertical-align: middle;
    width: 1rem;
}
.video-ad .icon-md {
    height: 1.4rem;
    width: 1.4rem;
}

.video-progress[value] {
    appearance: none;
    border: none;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .25) inset;
    color: dodgerblue;
    display: inline;
    height: 6px;
    order: 1;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
.video-progress {
    z-index: 2;
}
.toggle-mute, .toggle-cc {
    position: absolute;
    bottom: 10px;
    left: 11px;
    width: 37px;
    height: 37px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 100%;
    text-align: center;
    border: none;
    outline: none;
    padding: 0;
}
.toggle-cc {
    left: 52px;
}
.p-x-xs {
    padding-right: .6666666667rem !important;
    padding-left: .6666666667rem !important;
}
.justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

a:not(.btn, .dropdown-item) {
  text-decoration: none;
  color: var(--brand-600);
}

body[data-theme='dark'] a:not(.btn, .dropdown-item) {
  color: var(--brand);
}

/* Navbar */
.navbar {
  backdrop-filter: saturate(180%) blur(12px);
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border);
}

.navbar .nav-link{
  color: var(--nav-link) !important;
  font-weight: 600;
}
.nav .nav-link {
  color: var(--nav-link) !important;
}
.navbar .navbar-nav .nav-link {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #000 !important;
  text-decoration: underline;
}

body[data-theme='dark'] .navbar .nav-link:hover,
body[data-theme='dark'] .navbar .nav-link:focus {
  color: #fff !important;
}
.dropdown-menu.show {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.btn-brand {
  background-color: var(--brand); /* fallback */
  background-image: linear-gradient(to bottom, var(--brand) 0%, #38a8aa 100%);
  color: #0b1020;
  font-weight: 800;
  border: 1px solid #38a8aa;
  box-shadow: 0 8px 18px var(--shadow-brand);
  transition: background-image .3s ease, box-shadow .3s ease, transform .2s ease, color .3s ease;
}

.btn-brand:hover,
.btn-brand:focus {
  background-image: linear-gradient(to bottom, var(--brand-600) 0%, #2f8f91 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px var(--shadow-brand-hover);
}

.btn-brand:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px var(--shadow-brand);
}

/* Hero */
.hero {
  padding: 112px 0;
  background: radial-gradient(1200px 600px at 80% -20%, var(--gradient-a), transparent 60%), radial-gradient(800px 500px at 10% -10%, var(--gradient-b), transparent 60%);
}

/* Overlay variant to improve text contrast on image-backed heroes */
.hero-overlay { position: relative; color: #ffffff; }
.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.78));
  pointer-events: none;
}
/* Dark theme: slightly lighter overlay to avoid crushing shadows */
body[data-theme='dark'] .hero-overlay::before {
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
}
.hero-overlay > .container { position: relative; z-index: 1; }
/* Ensure links remain readable */
.hero-overlay a { color: #ffffff; }

body[data-theme='light'] .hero-overlay .text-secondary { color: #E2E8F0 !important; }

/* Fixed hero background layer (decorative) */
.hero-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0; /* behind nav (which should have higher z via sticky) */
  pointer-events: none;
}
/* Ensure main layout sits above the fixed hero */
body > nav, body > header, body > main, body > footer { position: relative; z-index: 1; }


.hero h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero p.lead {
  color: var(--muted-txt);
  font-size: 1.15rem;
}
.hero .hero-image-wrap {
  perspective: 500px;
  width: 100%;
  height: 100%;;
}
.hero .hero-bg-image {
  background-image: url("https://cms.vosaic.com/Assets/vosaic-video-feedback-and-analysis.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-height: 380px; /* ensures presence on shorter content */
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: rotateY(-15deg) skew(-3deg);
  transform-style: preserve-3d;
}

.no-hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 600px at 80% -20%, var(--gradient-a), transparent 60%), radial-gradient(800px 500px at 10% -10%, var(--gradient-b), transparent 60%) !important;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.no-hero-overlay-div:before {
  top: 90px;
}

/* Stretch both columns to equal height */
.hero .row.align-items-center {
  align-items: stretch !important;
}

@media (min-width: 992px) {
  .hero .hero-bg-image {
    min-height: 100%;
  }
}
@media (max-width: 600px) {
  .hero .hero-bg-image {
    transform: none;
    transform-style: flat;
  }
}

.hero-stats .stat-block {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.hero-stats .stat-value {
  font-size: clamp(2.2rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg,var(--accent),var(--accent-soft));
  -webkit-background-clip: text;
  background-clip: text; /* standard property for compatibility */
  /* color: transparent; */
}

.hero-stats .stat-label {
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .hero-stats .stat-value {
    transition: none;
  }
}

.stat-pill {
  background-color: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
}

/* Stat pill icons */
.stat-pill .stat-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-right: .5rem;
  display: inline-block;
  vertical-align: middle;
  opacity: .9;
  transition: opacity .25s ease;
}
.stat-pill:hover .stat-icon,
.stat-pill:focus-visible .stat-icon { opacity: 1; }
body[data-theme='light'] .stat-pill { background-color: #F8FAFC; border-color: #E2E8F0; color: #0F172A; }

body[data-theme='light'] .stat-pill {
  background-color: #F8FAFC;
  border-color: #E2E8F0;
  color: #0F172A;
}

.bg-blur {
  backdrop-filter: blur(12px);
}

/* Feature Switcher */
.feature-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.feature-card-flex {
  display:flex;
  flex-direction: column;
}
.iframe-feature-card {
  display: flex;
  flex-direction: column;
  min-height: clamp(400px, 70vh, 900px);  /* prevents a collapsed card */
}

.iframe-feature-card iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
}
@media (max-width: 767.98px) {
  .feature-card.p-5, .aud-card.px-5 {padding: 1.5rem !important; }

}

/* Feature content slide animations */
.feature-content {
  position: relative;
  will-change: transform, opacity;
}
#featureDesc {
  font-size: 1.1rem;
}

@keyframes featureSlideFromLeft {
  0% { opacity: 0; transform: translateX(-42px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes featureSlideFromRight {
  0% { opacity: 0; transform: translateX(42px); }
  100% { opacity: 1; transform: translateX(0); }
}

.feature-content.slide-from-left { animation: featureSlideFromLeft 1.90s cubic-bezier(.23,.92,.21,1); }
.feature-content.slide-from-right { animation: featureSlideFromRight 1.90s cubic-bezier(.23,.92,.21,1); }

@media (prefers-reduced-motion: reduce) {
  .feature-content.slide-from-left,
  .feature-content.slide-from-right { animation: fadeInQuick .25s ease; }
  @keyframes fadeInQuick { from { opacity:0; } to { opacity:1; } }
}

body[data-theme='light'] .feature-card {
  background-color: rgba(225, 226, 226, 0.1);
}

.feature-list .list-group-item {
  background-color: transparent;
  color: var(--muted-txt);
  border-color: var(--border);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.feature-list .list-group-item.active, .feature-card-active {
  background-color: var(--shadow-brand-secondary);
  color: var(--text);
  border-color: var(--shadow-brand-secondary-hover);
}
.feature-list .list-group-item:not(.active):hover,
.feature-list .list-group-item:not(.active):focus {
  background-color: var(--shadow-brand-secondary);
  color: var(--text);
  border-color: var(--shadow-brand-secondary-hover);
}
.feature-list .list-group-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.feature-list .list-group-item .align-items-start .badge{
  margin-top: 1px;
}

.video-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Feature prev/next nav */
.feature-nav {
  /* position: absolute;
  top: .75rem;
  right: .75rem; */
  display: flex;
  gap: .5rem;
  z-index: 2;
  justify-content: center;
}
.feature-nav-btn {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 1;
  font-size: 1.1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.feature-nav-btn:hover,
.feature-nav-btn:focus {
  background: var(--shadow-brand-secondary);
  border-color: var(--shadow-brand-secondary-hover);
  outline: none;
  transform: translateY(-2px);
}
.feature-nav-btn:active {
  transform: translateY(0);
}
body[data-theme='light'] .feature-nav-btn {
  background: #eee;
}
body[data-theme='light'] .feature-nav-btn:hover,
body[data-theme='light'] .feature-nav-btn:focus {
  background: var(--shadow-brand-secondary);
  color: #0b1020;
}
/* Chevron icon sizing */
.feature-nav-btn .chevron {
  width: 20px;
  height: 20px;
  display: block;
}

/* Visually hidden utility (Bootstrap has .visually-hidden; include fallback) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  pointer-events: none;
}

#featureVideo {
  object-fit: cover;
}

/* Audiences */
.aud-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform .2s ease, border-color .2s ease;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.aud-icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--brand);
  flex: 0 0 auto;
  max-width: 80px;
}

/* Author avatar utility */
.author-avatar {
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 0 4px rgba(0,0,0,0.2);
  border: 1px solid var(--border);
}


body[data-theme='light'] .aud-card {
  background: #FFFFFF;
}

.aud-card:hover {
  transform: translateY(-4px);
  border-color: var(--shadow-brand-secondary-hover);
}

.aud-card .btn {
  margin-top: auto;
  align-self: flex-end;
}

/* Privacy */
.shield,
.lock,
.contract {
  width: 2rem;
  height: 2rem;
  color: var(--brand);
  flex: 0 0 auto;
}

.callout-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
}

.callout-panel .callout-icon {
  width: 98px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--shadow-brand-secondary);
  color: var(--brand);
  font-size: 1.35rem;
  font-weight: 700;
}

.list-check {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.list-check li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .85rem;
}

.list-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.2rem;
  color: var(--brand);
  font-weight: 700;
}

body[data-theme='dark'] .callout-panel {
  background: linear-gradient(180deg, rgba(20,35,58,0.92), rgba(20,35,58,0.6));
  box-shadow: 0 14px 32px rgba(3, 7, 18, 0.55);
}

body[data-theme='dark'] .callout-panel .callout-icon {
  background: rgba(77, 194, 196, 0.18);
  color: #ffffff;
}

/* Blog cards */
.blog-card {
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.blog-card .p-4 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.blog-card .card-img-top {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Horizontal blog cards (blog.html) */
.blog-card-row {
  transition: border-color .2s ease, transform .25s ease;
  position: relative;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.blog-card-row:hover {
  transform: translateY(-4px);
  border-color: var(--shadow-brand-secondary-hover);
}
/* Blog card thumbnail now uses background image */
.blog-card-thumb {
  width: 400px;
  aspect-ratio: 16 / 9;
  max-height: 270px; /* cap height */
  /* We move actual background rendering to a pseudo-element so we can scale it without affecting layout */
  position: relative;
  overflow: hidden;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.blog-card-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--thumb);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  opacity: 0.9;
}
/* Hover / focus scale (respect keyboard focus via :focus-within on parent row) */
.blog-card-row:hover .blog-card-thumb::before,
.blog-card-row:focus-within .blog-card-thumb::before {
  transform: scale(1.08);
  opacity: 1;
  box-shadow: 0 0 12px rgba(0,0,0,0.6);
}
@media (prefers-reduced-motion: reduce) {
  .blog-card-thumb::before { transition: none; }
  .blog-card-row:hover .blog-card-thumb::before,
  .blog-card-row:focus-within .blog-card-thumb::before { transform: none; }
}
@media (max-width: 767.98px) {
  .blog-card-row { flex-direction: column; }
  .blog-card-thumb { width: 100%; height: 180px; border-top-left-radius: 12px;
  border-top-right-radius: 12px; border-bottom-left-radius: 0;}
}

/* Support cards (vertical) */
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 1.5rem;
}
@media (min-width: 992px) {
  .support-grid { grid-template-columns: repeat(2, 1fr); }
}
.support-card {
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 18px rgba(0,0,0,0.1);
  transition: border-color .2s ease, transform .25s ease;
  position: relative;
}
body[data-theme='dark'] .support-card,
body[data-theme='dark'] .blog-card {
     background-color: var(--shadow-brand-secondary);
  color: var(--text);
  border-color: var(--shadow-brand-secondary-hover);
}
body[data-theme='dark'] .support-card h2 a,
body[data-theme='dark'] .feature-card h2 a {
  color: var(--brand);
}
.support-card:hover,
.support-card:focus-within { transform: translateY(-4px); border-color: var(--shadow-brand-secondary-hover); }
.support-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  display:flex;
  align-items: center;
}


.support-thumb-title {
    inset: auto 0 0 0;
    padding: 0.75rem 0.75rem 1rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    font-weight: 600;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    align-items: center;
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
}
.support-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--thumb);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  opacity: .92;
  will-change: transform;
}
.support-card:hover .support-thumb::before,
.support-card:focus-within .support-thumb::before { transform: scale(1.06); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .support-thumb::before { transition: none; }
  .support-card:hover .support-thumb::before,
  .support-card:focus-within .support-thumb::before { transform: none; }
}
.support-card .support-body { padding: 1.25rem 1.25rem 1.2rem; display:flex; flex-direction:column; flex:1 1 auto; }
.support-card .support-body h2 { font-size: 1.05rem; font-weight: 700; line-height:1.3; margin-bottom:.5rem; }
.support-card .support-body p { font-size: .8rem; color: var(--muted-txt); margin-bottom: .75rem; }
.support-meta { display:flex; align-items:center; gap:.5rem; margin-bottom:.65rem; }
.support-meta time { font-size: .65rem; letter-spacing:.03em; text-transform:uppercase; }
.support-actions { margin-top:auto; }
.support-actions .btn { padding:.4rem .75rem; font-size:.65rem; }
@media (min-width: 1200px) {
  .support-card .support-body h2 { font-size:1.15rem; }
  .support-card .support-body p { font-size:.85rem; }
}

/* Blog pagination spacing */
.blog-pagination { display:flex; justify-content:right; }
.blog-pagination .pagination { gap:.25rem; }
.blog-pagination .page-item .page-link,
.blog-pagination .page-item span.page-link {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 34px;
  font-size: .9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
}
.blog-pagination .page-item .page-link:hover,
.blog-pagination .page-item .page-link:focus {
  background: var(--shadow-brand-secondary);
  border-color: var(--shadow-brand-secondary-hover);
  text-decoration: none;
  transform: translateY(-2px);
  outline: none;
}
.blog-pagination .page-item.active span.page-link {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.blog-pagination .page-item.disabled .page-link {
  opacity: .5;
  cursor: not-allowed;
}

body[data-theme='light'] .blog-pagination .page-item .page-link:hover,
body[data-theme='light'] .blog-pagination .page-item .page-link:focus {
  background: var(--shadow-brand-secondary);
  color: #0b1020;
}

/* Blog category links: ensure badge right-aligned */
#blogCategories .category-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-weight: 500;
  position: relative; /* retain stretched-link effect */
  color: var(--text);
  font-size: 0.9rem;

}
#blogCategories .category-sublink {
  font-size: 0.85rem;
  padding-left: 0.5rem; 
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: left;
}
  
#blogCategories .category-sublink .category-arrow {
  flex: 0 0 auto;
}
#blogCategories .category-sublink .category-text {
  white-space: normal;
}
#blogCategories .category-link .badge {
  margin-left: 0.75rem;
  flex: 0 0 auto;
}
.article-body {
  font-size: 1.1rem;
}
.article-body .img-fluid {
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    margin: 20px 0;
    max-width: 70%;
}
@media (max-width: 767.98px) {
  .article-body .img-fluid {
      max-width: 100%;
  }
}
.article-body h2 {
  font-size: 1.75rem;
  margin-top: 2rem;
}
.article-body h3 {
  font-size: 1.5rem;
  margin-top: 2rem;
}
/* Article body custom arrow bullets */
.article-body ul {
  list-style: none;
  margin-left: 1.5rem;
  padding-left: 0;
}
.article-body ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .85rem;
  max-width: 85%;
}
.article-body ul li::before {
  content: "\2192"; /* right arrow */
  position: absolute;
  left: 0;
  top: 0.3rem;
  color: var(--brand);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}


.article-share .share-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* background: var(--shadow-brand-secondary); */
  border: 1px solid var(--shadow-brand-secondary-hover);
  color: var(--ink);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.article-share .share-link:hover,
.article-share .share-link:focus-visible {
  background: var(--shadow-brand-secondary-hover);
  border-color: var(--shadow-brand-secondary-hover);
  color: var(--ink);
  transform: translateY(-1px);
  text-decoration: none;
}

.article-share .share-link:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}

.email-update-signup {
  padding: 30px 50px 50px;
  margin-top: 33px;

}

.email-update-signup:before {
    position: absolute;
    width: 40%;
    content: " ";
    top: 5px;
    left: 0;
    background: #000;
    height: 5px;
}

.email-update-signup:after {
    position: absolute;
    width: 70%;
    content: " ";
    bottom: 5px;
    right: 0;
    background: #000;
    height: 5px;
}
body[data-theme='dark'] .email-update-signup:before,
body[data-theme='dark'] .email-update-signup:after {
    background: #fff;
}

.email-update-signup .img-cell {
  display: flex;
  /* Centers the child horizontally */
  justify-content: center; 
  /* Centers the child vertically */
  align-items: center; 
}

.email-update-signup .img-cell img {
    max-height: 124px;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}
.email-update-signup .img-cell p {
  padding:0;
  margin: 0;
}
.pos-r {
    position: relative;
}

body[data-theme='dark'] .article-share .share-link {
  color: #ffffff;
}

body[data-theme='dark'] .article-share .share-link:hover,
body[data-theme='dark'] .article-share .share-link:focus-visible {
  color: #ffffff;
}

.list-check li {
  margin-bottom: .5rem;
}

/* Footer */
footer {
  color: var(--muted-txt);
  border-top: 1px solid var(--border);
}

/* Footer logo theming
   White SVG/logo assets appear low-contrast on light backgrounds.
   We apply a filter only in light mode to recolor them toward the muted text tone.
   Dark mode preserves original white for desired contrast. */
.footer-logo {
  opacity: .9;
  display: inline-block;
  filter: var(--footer-logo-filter);
  transition: filter .3s ease, opacity .3s ease;
}
.footer-logo:hover,
.footer-logo:focus-visible { opacity: 1; }
body[data-theme='dark'] { --footer-logo-filter: none; }
/* Approximate transformation of pure white (#fff) to a dark muted slate tone
   close to --muted-txt in light theme (#475569) for consistent hierarchy. */
body[data-theme='light'] { --footer-logo-filter: brightness(0) saturate(100%) invert(24%) sepia(9%) saturate(560%) hue-rotate(175deg) brightness(92%) contrast(90%); }

/* Improve contrast for secondary text in dark mode without going full white */
body[data-theme='dark'] .text-secondary {
  color: #c2ccd5 !important; /* Approx contrast ratio >4.5:1 vs #0F1B2D */
}
body[data-theme='dark'] .text-bg-dark {
  background-color:#c2ccd5 !important; 
  color: #102A43 !important;
}

/* Dark mode form controls */
body[data-theme='dark'] .form-control,
body[data-theme='dark'] .form-select,
body[data-theme='dark'] textarea.form-control {
  background-color: var(--bg);
  border-color: var(--form-control-border);
  color: var(--text);
}
body[data-theme='dark'] .form-control::placeholder { color: var(--muted-txt); opacity: .85; }
body[data-theme='dark'] .form-control:focus,
body[data-theme='dark'] .form-select:focus,
body[data-theme='dark'] textarea.form-control:focus {
  background-color: var(--bg);
  color: var(--text);
  border-color: var(--shadow-brand-secondary-hover);
  box-shadow: 0 0 0 .15rem rgba(77,194,196,0.35);
}
/* Disabled/read-only variants */
body[data-theme='dark'] .form-control:disabled,
body[data-theme='dark'] .form-control[readonly] {
  background-color: var(--card);
  opacity: .7;
}

/* Utilities */
.section {
  padding: 80px 0;
}

/* Section color bands */
.band-1 {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 22%, transparent), transparent 120%);
  overflow: hidden;
  backdrop-filter: blur(12px);
}
body[data-theme='light'] .band-1 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 12%, transparent), transparent 120%);
}

.band-2 {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 115%);
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.band-3 {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-white) 10%, transparent), transparent 120%);
  overflow: hidden;
  backdrop-filter: blur(12px);
}


body[data-theme='light'] .band-2 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 115%);
}

.band-1::before,
.band-2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 400px at 10% 10%, rgba(255,255,255,0.04), transparent 70%),
              radial-gradient(600px 320px at 90% 20%, rgba(255,255,255,0.04), transparent 75%);
  mix-blend-mode: overlay;
}

.eyebrow {
  color: var(--eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
  margin:0;
}

/* Theme toggle icon visibility */
#icon-sun {
  display: none;
}

body[data-theme='light'] #icon-sun {
  display: inline;
}

body[data-theme='light'] #icon-moon {
  display: none;
}

.btn-outline-light {
  color: #f8fafc;
  border-color: #f8fafc;
}

.btn-outline-light:hover {
  background-color: #f8fafc;
  color: #0f172a;
  border-color: #f8fafc;
}

body[data-theme='light'] .btn-outline-light {
  color: #0f172a;
  border-color: #0f172a;
}

body[data-theme='light'] .btn-outline-light:hover {
  background-color: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* Toggler + hamburger color by theme */
.navbar .navbar-toggler {
  border-color: var(--nav-link);
}
.navbar .navbar-toggler-icon {
  width: 1rem;
}

.navbar-brand {
  display: block;
  height: 4rem;
  width: 8.9rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body[data-theme='dark'] .navbar-brand {
  background-image: url('../images/Vosaic-From-Facts-White.svg');
}

body[data-theme='light'] .navbar-brand {
  background-image: url('../images/Vosaic-From-Facts-Blue.svg');
}

/* Dark-mode hamburger */
body[data-theme='dark'] .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(210,216,224,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Light-mode hamburger */
body[data-theme='light'] .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(51,65,85,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown theming */
.dropdown-menu {
  background-color: var(--card);
  border: 1px solid var(--border);
}

.dropdown-item {
  color: var(--text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(244,124,32,0.12);
  color: var(--text);
}

/* Light override */
body[data-theme='light'] .dropdown-menu {
  background-color: #fff;
}

/* Calendly modal iframe */
/* Make Calendly iframe fill modal (height managed by flex column) */
.modal-dialog-iframe { height: 90vh; }
.modal-content-iframe { height: 100%; display: flex; flex-direction: column; }
.modal-header-iframe  { flex: 0 0 auto; }
.modal-body-iframe  { flex: 1 1 auto; display: flex; padding: 0; }
.calendly-frame { width: 100%; height: 100%; border: 0; display: block; }
.calendly-loading { z-index: 2; }

@media (max-width: 767.98px) {
  .modal-dialog-iframe  { height: 95vh; margin: 1rem; }
}

/* Modal theming */
body[data-theme='dark'] .modal-content {
  background-color: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

body[data-theme='dark'] .modal-header {
  background-color: var(--soft);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

body[data-theme='dark'] .modal-title { color: var(--text); }
body[data-theme='dark'] .btn-close {
  filter: invert(1) grayscale(100%);
}

/* forms */
.form-control {
  border-color: var(--brand);
}
.form-control:focus {
    border-color: var(--brand);
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--shadow-brand);
}
.form-check-input:focus {
    box-shadow: 0 0 0 .25rem var(--shadow-brand);
}
.form-check-input[type=radio],
.form-check-input[type=checkbox] {
  scale: 1.4;
  border: 1px solid var(--brand);
}
.form-check-input:checked[type=radio],
.form-check-input:checked[type=checkbox]  {
  scale: 1.4;
  border: 1px solid var(--brand); 
  background-color: var(--brand) ;
}
input::placeholder,
.form-control::placeholder,
textarea::placeholder {
  color: #7f878e;
  opacity: 1; /* override browser defaults if needed */
}
body[data-theme='dark'] .form-check-input[type=radio],
body[data-theme='dark'] .form-check-input[type=checkbox]  {
  border: 1px solid var(--brand-600); 
}
 body[data-theme='dark'] .form-check-input:checked[type=radio],
 body[data-theme='dark'] .form-check-input:checked[type=checkbox]  {
  border: 1px solid var(--brand-600); 
  background-color: var(--brand-600);
}
.freeform-form .form-label:not(.form-check-label) {
    font-size: .875em;
    font-weight: bold;
}


/* Logo marquee */
.logo-marquee-shell {
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.logo-marquee {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  width: max-content;
  animation: marquee-scroll 55s linear infinite;
  padding: 0.75rem 0;
}
.logo-item img, .logo-item svg {
  height: 52px;
  min-width: 100px;
  max-width: 200px;
  width: auto;
  display: block;
  opacity: .85;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
/* Dark theme: keep logos light/neutral */
body[data-theme='dark'] .logo-item img,  body[data-theme='dark'] .logo-item svg{
  filter: grayscale(100%) brightness(0.85) contrast(1.1);
}
body[data-theme='dark'] .logo-item img:hover,
body[data-theme='dark'] .logo-item img:focus-visible,
body[data-theme='dark'] .logo-item svg:hover,
body[data-theme='dark'] .logo-item svg:focus-visible {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}
/* Light theme: render logos dark for contrast */
body[data-theme='light'] .logo-item img, body[data-theme='light'] .logo-item svg {
  /* filter: brightness(0) saturate(100%) contrast(1.1); */
  filter: invert(1) brightness(0);
}
body[data-theme='light'] .logo-item img:hover,
body[data-theme='light'] .logo-item img:focus-visible,
body[data-theme='light'] .logo-item svg:hover,
body[data-theme='light'] .logo-item svg:focus-visible {
  filter: brightness(0) saturate(100%) contrast(1.4);
  opacity: 1;
  transform: scale(1.05);
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 767.98px) {
  .logo-item img, .logo-item svg { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { animation: none; flex-wrap: wrap; justify-content: center; }
  .logo-item { flex: 0 0 100px; }
}