/* clearcase.css - page-specific hooks for clearcase.html */

/* How It Works — Watch Video CTA button */
.how-it-works-watch-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  background-color: #3575e2;
  color: #fff;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid #3575e2;
  border-radius: 50px;
  padding: 12px 28px;
  transition: background-color 0.2s, border-color 0.2s;
}
.how-it-works-watch-cta:hover {
  background-color: #2560c8;
  border-color: #2560c8;
  color: #fff;
}

/* Hero button row */
.clearcase-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 1.5rem;
  align-items: center;
}

/* Outline white button style - secondary buttons */
.btn-outline-white {
  background: transparent;
  border: 3px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  padding: 18px 48px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color: #fff;
}

/* Use will-change to hint for smoother video/overlay transitions */
.clearcase-hero-video {
  will-change: transform, opacity;
}

.clearcase-hero-overlay {
  pointer-events: none;
}

/* ClearCase hero container sizing: keep the hero shorter and ensure the video covers it */
.clearcase-hero-section.careers-video-hero {
  position: relative;
  overflow: hidden;
  min-height: max(min(56vh, 620px), 260px);
}
.clearcase-hero-section.careers-video-hero .careers-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero inner content alignment — match .container + .clearcase-intro__inner */
.clearcase-hero-inner {
  width: min(1200px, 100% - 2rem);
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Decorative shell image positioned to the right of hero copy */
.clearcase-hero-shell {
  position: absolute;
  /* push the decorative shell further right so it no longer overlaps the hero copy
     negative values let it bleed outside the centered content area toward the right edge */
  right: -365px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
}
.clearcase-hero-shell img {
  display: block;
  width: 420px; /* larger on wide desktop */
  height: auto;
  opacity: 0.98;
  filter: drop-shadow(0 28px 56px rgba(2,6,23,0.55));
  transform: translateZ(0);
}

@media (max-width: 1600px) {
  .clearcase-hero-shell img { width: 360px; }
}

@media (max-width: 1400px) {
  .clearcase-hero-shell img { width: 320px; }
}

/* Apple-like polish for solution cards */
.solution-card {
  position: relative; /* allow pseudo elements for gloss */
  border-radius: 16px; /* slightly larger radius */
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.006));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 14px 40px rgba(2,6,23,0.5), 0 6px 16px rgba(2,6,23,0.32);
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), box-shadow 360ms ease, filter 360ms ease;
  will-change: transform, box-shadow, filter;
  overflow: visible; /* allow image overflow/halo */
}

.solution-card::before {
  /* subtle glossy sheen */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 36%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
  opacity: 0.9;
}

.solution-card__media { position: relative; z-index: 2; }
.solution-card__media::before {
  /* soft halo behind the image to add depth (decorative) */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(60,120,255,0.10), rgba(188,96,216,0.04) 35%, transparent 60%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}

.clearcase-solution__grid .solution-card .solution-card__media img {
  /* gentle drop shadow and smoother transitions for images */
  filter: drop-shadow(0 28px 48px rgba(2,6,23,0.55));
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), filter 360ms ease, opacity 360ms ease;
  transform-origin: center bottom;
  z-index: 2;
  position: relative;
}

@media (hover: hover) and (min-width: 900px) {
  .solution-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 80px rgba(2,6,23,0.72), 0 10px 30px rgba(2,6,23,0.36);
  }
  .solution-card:hover .solution-card__media img {
    transform: scale(1.04) translateZ(0);
    filter: drop-shadow(0 36px 64px rgba(2,6,23,0.6));
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .solution-card, .solution-card::before, .solution-card__media::before, .solution-card .solution-card__media img {
    transition: none !important;
  }
  .solution-card:hover { transform: none !important; box-shadow: 0 10px 30px rgba(2,6,23,0.55) !important; }
  .solution-card__media::before { display: none !important; }
}


@media (max-width: 1000px) {
  .clearcase-hero-shell img { width: 280px; }
}

@media (max-width: 900px) {
  .clearcase-hero-shell { display: none; }
}

/* Hero inner content aligned with overview section below */
@media (min-width: 900px) {
  .clearcase-hero-inner {
    will-change: transform;
  }
}

/* Logo sizing inside hero */
.clearcase-hero-logo {
  max-width: 300px;
  width: 36%;
  height: auto;
  display: block;
  margin-bottom: 12px;
}

/* Constrain copy width so heading/lead wrap to ~3 lines on large screens */
@media (min-width: 1024px) {
  .clearcase-hero-inner .careers-hero-title,
  .clearcase-hero-inner .clearcase-hero-title {
    max-width: 48ch; /* tweakable: ~48 characters per line */
    line-height: 1.05;
  }
  .clearcase-hero-inner .careers-hero-sub,
  .clearcase-hero-inner .clearcase-hero-sub {
    max-width: 60ch;
  }
}
    .clearcase-hero-section.careers-video-hero {
      position: relative;
      overflow: hidden;
      min-height: max(min(56vh, 620px), 260px);
    }
    .clearcase-hero-section.careers-video-hero .careers-hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Logo sizing inside hero */
    .clearcase-hero-logo {
      max-width: 300px;
      width: 36%;
      height: auto;
      display: block;
      margin-bottom: 12px;
    }


@media (max-width: 900px) {
  /* ClearCase features removed */
}

/* ClearCase features removed */

/* Add spacing below main site header for this page */
.site-header {
  padding-bottom: 18px;
}
@media (max-width: 600px) {
  .site-header { padding-bottom: 12px; }
}

/* ClearCase video section */
.clearcase-video { background: #000; padding: 48px 0; }
.clearcase-video__inner { display: grid; /* make video column wider on desktop: text 40% / video 60% */ grid-template-columns: 40% 60%; gap: 24px; align-items: center; }
.clearcase-video__heading { margin: 0 0 8px 0; font-size: 1.25rem; color: #fff; }
.clearcase-video__lead { margin: 0 0 16px 0; color: #ddd; }
.clearcase-video__player {
  width: 100%;
  height: auto;
  /* reduce the hero/video height so the section reads shorter on desktop */
  max-height: min(56vh, 680px); /* prefer a viewport-relative size but cap it */
  display: block;
  background: #000;
  /* keep a consistent 16:9 aspect ratio and make the player fill the column */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
}

/* Highlights (large story cards) */
.clearcase-highlights { background: #111214; color: #fff; padding: 48px 0 80px 0; position: relative; }
/* Visible fallback gradient so the section shows color even if blobs/blend-modes don't render in a given environment */
.clearcase-highlights {
  background-image: linear-gradient(180deg, #0f1216 0%, #0b0d10 60%), linear-gradient(120deg, rgba(84,150,255,0.03), rgba(188,96,216,0.02) 40%, rgba(120,220,200,0.015) 75%);
  background-blend-mode: normal, screen;
}
.clearcase-highlights { position: relative; overflow: visible; }
.clearcase-highlights__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.clearcase-highlights__head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom: 18px; }
.clearcase-highlights__title { font-size: 2.25rem; font-weight: 800; margin: 0; }
/* Default title color for highlights; when the section uses .key-benefits,
   the .key-benefits rules should control the header color. */
.clearcase-highlights__title { color: inherit; }
.clearcase-highlights__link { color: #3aa0ff; text-decoration: none; font-weight: 600; }
/* make scroller full-bleed and right-aligned so cards start at the browser right edge */
.clearcase-highlights__scroller { display: flex; gap: 56px; overflow-x: auto; padding: 18px 6px; scroll-snap-type: x mandatory; width: 100vw; margin-left: calc(-50vw + 50%); justify-content: flex-end; }
.highlight-card { flex: 0 0 calc((100vw - 56px) / 1.5); height: 420px; background: #000; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); overflow: hidden; scroll-snap-align: center; display: flex; align-items: flex-end; justify-content: center; }
/* When the highlights section uses .key-benefits, remove shadows so the
   design appears flat as requested. This selector overrides the default
   box-shadow above due to higher specificity. */
section.clearcase-highlights.key-benefits .highlight-card {
  box-shadow: none;
}

section.clearcase-highlights.key-benefits .highlight-card__kicker {
  text-shadow: none;
}
.highlight-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.highlight-card { position: relative; }
.highlight-card__content { position: relative; z-index: 2; max-width: 720px; padding: 20px 36px 34px 36px; color: #fff; text-align: center; }
.highlight-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.85) 100%); z-index: 1; }
.highlight-card__kicker { font-size: 1.6rem; margin: 0 0 10px 0; font-weight: 700; }
.highlight-card__kicker { color: #ffffff; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.highlight-card__copy { font-size: 1.05rem; color: rgba(255,255,255,0.9); line-height: 1.6; }

/* Ensure highlight videos behave as decorative full-bleed backgrounds
   and that card content remains readable on top. Use poster fallback. */
.highlight-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none; /* decorative only */
}
.highlight-card { position: relative; overflow: hidden; }
.highlight-card__content { position: relative; z-index: 2; }
.highlight-card__content > * { position: relative; } /* ensure content layers above video */

@media (max-width: 600px) {
  /* On small screens avoid autoplaying heavy video crop; let video be static-sized below or use poster */
  .highlight-card__video { display: block; object-fit: cover; }
}

@media (max-width: 900px) {
  .highlight-card { flex: 0 0 92%; height: 320px; }
  .clearcase-highlights__title { font-size: 1.6rem; }
}

/* Highlights pagination removed */

/* Centered dot pagination for highlights */
.clearcase-highlights__dots-wrap { display:flex; justify-content:center; margin-top: 22px; }
.clearcase-highlights__dots {
  display:flex;
  gap:12px;
  align-items:center;
    background: rgba(255,255,255,0.06);
    padding: 8px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-self: center;
}
.clearcase-highlights__dots {
  display: inline-flex;
  justify-content: center;
  margin-top: 22px;
}
.clearcase-highlights__dots button {
  all: unset;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  border: none;
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.clearcase-highlights__dots button.active {
  background: #fff;
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.clearcase-highlights__dots button:focus {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 4px;
}
/* Additional spacing for better alignment */
.clearcase-highlights__dots { margin-top: 22px; }
.clearcase-highlights__dots button {
  /* Strong, scoped reset to avoid global .btn/button rules */
  all: unset;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  border: none;
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.clearcase-highlights__dots button.active {
  background: #fff;
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* Ensure keyboard focus is visible */
.clearcase-highlights__dots button:focus {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 4px;
}


@media (max-width: 900px) {
  .clearcase-video__inner { grid-template-columns: 1fr; padding: 0 16px; }
  .clearcase-video { padding: 32px 0; }
  .clearcase-video__player { max-height: 520px; aspect-ratio: 16 / 9; }

  /* On smaller phones allow a slightly taller preview for visibility */
  @media (max-width: 420px) {
    .clearcase-video__player { max-height: 420px; }
  }
}

/* Page-scoped Related Products background (moved from inline style) */
.clearcase-related-products, .clearcase-media-resources {
  position: relative;
}

/* Technical Highlights placeholder styles */
.clearcase-technical-highlights { background: #111214; color: #fff; padding: 48px 0; }
.clearcase-technical-highlights__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.clearcase-technical-highlights__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; min-height: 220px; }
.technical-col { background: transparent; }
.technical-col--left, .technical-col--right { border-radius: 8px; }

/* Layered blurred color planes (Apple-like) */
:root {
  --tech-a: rgba(84,150,255,0.08);
  --tech-b: rgba(188,96,216,0.06);
  --tech-c: rgba(120,220,200,0.04);
  --tech-spot: rgba(255,255,255,0.06);
  --tech-blur-lg: 96px;
  --tech-blur-md: 48px;
}
.clearcase-technical-highlights { position: relative; overflow: hidden; }
.clearcase-technical-highlights .technical-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Particle canvas sits above the color planes but under content; pointer-events none so it doesn't intercept input */
.clearcase-technical-highlights .tech-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* above layers but below content (content z-index:4) */
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Soft vignette to anchor the technical section and avoid bright edges */
.clearcase-technical-highlights .technical-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3; /* sit above particles and color planes but under content */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,0.14) 65%, rgba(0,0,0,0.28) 100%);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

@media (max-width: 900px), (hover: none) {
  /* hide the canvas on small screens and touch-only devices to save CPU and avoid clutter */
  .clearcase-technical-highlights .tech-particles-canvas { display: none; }
}

/* Soft-edge mask for the particle canvas to avoid hard particle edges meeting the section border */
.clearcase-technical-highlights .tech-particles-canvas {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

@media (max-width: 1100px) {
  /* slightly reduce vignette intensity on medium/smaller viewports */
  .clearcase-technical-highlights .technical-bg::after { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0.22) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .clearcase-technical-highlights .technical-bg::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .clearcase-technical-highlights .tech-particles-canvas { display: none; }
}
.tech-layer { position: absolute; border-radius: 50%; filter: blur(var(--tech-blur-lg)); mix-blend-mode: screen; transform: translate3d(0,0,0); will-change: transform; }
.tech-layer--a { left: -14%; top: -8%; width: 920px; height: 640px; background: radial-gradient(circle at 30% 30%, var(--tech-a), transparent 45%); }
.tech-layer--b { right: -10%; bottom: -8%; width: 820px; height: 560px; background: radial-gradient(circle at 70% 70%, var(--tech-b), transparent 45%); }
.tech-layer--c { left: 8%; bottom: -6%; width: 640px; height: 480px; background: radial-gradient(circle at 20% 80%, var(--tech-c), transparent 45%); opacity: 0.95; }
.tech-spotlight { position: absolute; left: 50%; top: 12%; width: 920px; height: 620px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(ellipse at center, var(--tech-spot), transparent 35%); filter: blur(28px); mix-blend-mode: screen; }

/* Ensure card and content sit above decorations */
.clearcase-technical-highlights .container, .clearcase-technical-highlights .technical-fullcard, .technical-fullcard__headline-wrap { position: relative; z-index: 4; }

/* Decorative wrapper inside technical section should be behind content but clipped by overflow:hidden */
.clearcase-technical-highlights .highlights-bg { z-index: 1; }

/* Responsive: reduce sizes on smaller screens */
@media (max-width: 900px) {
  .tech-layer { filter: blur(var(--tech-blur-md)); }
  .tech-layer--a { width: 520px; height: 360px; left: -8%; top: -6%; }
  .tech-layer--b { width: 420px; height: 320px; right: -6%; bottom: -6%; }
  .tech-layer--c { width: 360px; height: 260px; left: 6%; bottom: -6%; }
  .tech-spotlight { width: 560px; height: 360px; top: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .tech-layer, .tech-spotlight { transition: none !important; animation: none !important; }
}

/* Highlights decorative blobs (subtle, same palette) */
.clearcase-highlights .highlights-bg,
.clearcase-technical-highlights .highlights-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.highlights-blob { position: absolute; border-radius: 50%; filter: blur(24px); opacity: 0.98; transform: translate3d(0,0,0); z-index: 0; pointer-events: none; mix-blend-mode: normal; }
.clearcase-technical-highlights .highlights-blob--a,
.clearcase-highlights .highlights-blob--a { left: -10%; top: -8%; width: 820px; height: 560px; background: radial-gradient(circle at 30% 30%, rgba(84,150,255,0.28), transparent 50%); }
.clearcase-technical-highlights .highlights-blob--b,
.clearcase-highlights .highlights-blob--b { right: -8%; bottom: -10%; width: 720px; height: 500px; background: radial-gradient(circle at 70% 70%, rgba(188,96,216,0.22), transparent 50%); }

/* stronger polish: subtle float animation and spotlight */
.highlights-spotlight { position: absolute; left: 50%; top: 6%; width: 980px; height: 680px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.12), transparent 28%); filter: blur(24px); opacity: 0.95; z-index: 0; pointer-events: none; mix-blend-mode: normal; }

/* keep the content readable — ensure inner content sits under the decorative layer when overlaying */
.clearcase-highlights__inner { position: relative; z-index: 3; }
.clearcase-technical-highlights__inner { position: relative; z-index: 3; }
.highlights-blob { opacity: 1; }
.highlights-blob--a { animation: floatA 9s ease-in-out infinite; }
.highlights-blob--b { animation: floatB 11s ease-in-out infinite; }

@keyframes floatA { 0%{transform: translate3d(0,0,0)}50%{transform: translate3d(6px,-4px,0)}100%{transform: translate3d(0,0,0)} }
@keyframes floatB { 0%{transform: translate3d(0,0,0)}50%{transform: translate3d(-6px,4px,0)}100%{transform: translate3d(0,0,0)} }

@media (max-width: 900px) {
  .highlights-blob { filter: blur(28px); }
  .highlights-blob--a { width: 680px; height: 420px; left: -8%; top: -6%; }
  .highlights-blob--b { width: 560px; height: 360px; right: -6%; bottom: -8%; }
  .highlights-spotlight { width: 560px; height: 360px; top: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .highlights-blob { transition: none !important; }
}

/* Parallax nudge: lightweight; disabled on touch devices and reduced-motion */

/* Full-width card spanning both columns */
.technical-fullcard {
  grid-column: 1 / -1;
  background: #000; /* flipped: make card pure black */
  border-radius: 12px;
  min-height: 160px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  overflow: hidden; /* allow visual overflow from media */
}

/* Headline above the full-width technical card, left-justified to card content */
.technical-fullcard__headline-wrap {
  /* Make the headline align to the left edge of the card's inner content.
     Container centers at max-width:1200px; card inner has 22px padding.
     Compute left offset: half the remaining space (centering) + inner padding. */
  width: 100%;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding-right: 20px;
  /* left offset = max((100% - 1200px)/2, 0) + 22px */
  padding-left: calc(max((100% - 1200px) / 2, 0px) + 22px);
}
.technical-fullcard__headline { margin: 0 0 12px 0; color: #ffffff; font-size: 1.8rem; font-weight: 700; text-align: left; }

@media (max-width: 900px) {
  /* On mobile the container uses 16px and the card inner padding is 18px */
  .technical-fullcard__headline-wrap { padding-left: calc(max((100% - 720px) / 2, 0px) + 18px); padding-right: 16px; }
  .technical-fullcard__headline { font-size: 1.4rem; }
}

/* Technical video sizing: keep the video compact inside the right column */
.technical-fullcard__media { align-self: stretch; }
.technical-video {
  width: 640px; /* slightly larger visual size on desktop to allow cropping */
  max-width: 60vw;
  min-height: 500px; /* user-requested minimum height */
  height: auto; /* allow intrinsic sizing, min-height will enforce the floor */
  max-height: 85vh; /* cap so it's not taller than the viewport */
  object-fit: cover;
  object-position: 20% center; /* nudge focal point to the left so left content isn't chopped */
  display: block;
  margin: 0; /* handled by the card layout */
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  /* ensure any visual cropping is applied cleanly */
}

@media (max-width: 900px) {
  .technical-video { width: 100%; height: auto; max-height: 320px; margin: 12px 0 0 0; }
  .technical-fullcard { min-height: auto; }
}

/* Fullcard inner layout: left copy, right media */
.technical-fullcard__inner {
  display: grid;
  grid-template-columns: 1fr 640px; /* give media column more room so we can frame and crop */
  gap: 18px;
  align-items: stretch; /* allow media column to define card height */
  padding: 22px;
}
.technical-fullcard__copy { padding-right: 12px; padding-left: 18px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.technical-fullcard__media { display: flex; align-items: center; justify-content: flex-end; }

  .solution-card__media {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .solution-card__media img {
    width: 100%;
    max-width: 320px; /* slightly smaller visual presence */
    height: auto;
    display: block;
  }

@media (max-width: 1100px) {
  .solution-card__media img { max-width: 300px; }
}

@media (max-width: 900px) {
  .solution-card__media img { max-width: 220px; }
}
.technical-fullcard__kicker { margin: 0 0 8px 0; color: #3aa0ff; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }
.technical-fullcard__text { margin: 0; color: #ffffff; line-height: 1.6; font-size: 1rem; opacity: 0.95; }
.technical-fullcard__list { margin: 0; padding-left: 18px; color: #ffffff; line-height: 1.6; font-size: 1rem; list-style: disc; margin-top: 6px; }
.technical-fullcard__list li { margin-bottom: 8px; }

/* Keep list in normal flow so badges can appear below it */
.technical-fullcard__copy .technical-fullcard__list { position: static; margin-top: 6px; margin-bottom: 18px; }

/* Make badges smaller and ensure they flow under the list */
.store-badges { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
.store-badge img { display: block; width: 120px; height: auto; }
@media (max-width: 900px) {
  .store-badge img { width: 96px; }
}
@media (max-width: 600px) {
  .store-badge img { width: 80px; }
}

/* Polished compact variant for technical feature lists */
.technical-feature-list {
  color: #dcefff; /* soft, slightly cool accent off-white */
  font-size: 0.92rem; /* slightly smaller */
  line-height: 1.5;
  letter-spacing: -0.01em;
  padding-left: 18px;
}
.technical-feature-list li { margin-bottom: 8px; }

/* push badges down visually to sit below the paragraph by ~60px */
/* push badges down visually to sit below the paragraph (increased) */
.store-badges { margin-top: 0; display: flex; gap: 12px; align-items: center; }
    /* Force badges to identical width while preserving aspect ratio */
    .store-badge img { display: block; width: 200px; height: auto; }
@media (max-width: 900px) {
  .store-badge img { width: 160px; }
}
@media (max-width: 600px) {
  .store-badge img { width: 120px; }
}

@media (max-width: 900px) {
  /* reduce vertical offset on medium screens */
  .store-badges { margin-top: 56px; gap: 10px; }
  .store-badge img { width: 160px; }
}

/* Small italic note above the store badges */
/* store-badges-note removed */

/* clip and nudge the right side on desktop only so left side remains visible */
@media (min-width: 900px) {
  .technical-fullcard__media { overflow: hidden; }
  .technical-video { /* crop more off the right edge */
    clip-path: inset(0 20% 0 0);
    object-position: 18% center;
  }
}

@media (max-width: 900px) {
  .technical-fullcard__inner { grid-template-columns: 1fr; padding: 18px; }
  .technical-fullcard__media { justify-content: center; margin-top: 8px; }
  .technical-fullcard__copy { justify-content: flex-start; padding-top: 6px; }
  .technical-fullcard__copy { padding-left: 12px; }
}

@media (max-width: 720px) {
  .clearcase-technical-highlights__grid { grid-template-columns: 1fr; }
}
.clearcase-media-resources {
  background-image: url('images/waves.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: transparent;
}
.clearcase-media-resources::before {
  /* slightly darker overlay for improved legibility */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28));
  pointer-events: none;
  z-index: 1;
}
.clearcase-related-products::before { content: none; }
.clearcase-related-products > .container, .clearcase-media-resources > .container { position: relative; z-index: 2; }

/* Use Cases section: dark background with white copy and white table borders */
.clearcase-usecases {
  background: #0b0d0f;
  color: #ffffff;
  padding: 36px 0 72px 0; /* increase bottom padding to add space before next section */
}

/* ClearCase demo section: shares Use Cases background and two-column layout */
.clearcase-media-demo { background: #0b0d0f; color: #fff; padding: 36px 0; }
.clearcase-media-demo__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.clearcase-media-demo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.clearcase-media-demo__col { box-sizing: border-box; }
.clearcase-demo__video { width: 100%; height: auto; max-height: 540px; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.6); display: block; }
.clearcase-media-demo__title { margin: 0 0 12px 0; color: #fff; font-size: 1.5rem; }
.clearcase-media-demo__p { margin: 0; color: rgba(255,255,255,0.92); line-height: 1.6; }

@media (max-width: 900px) {
  .clearcase-media-demo__grid { grid-template-columns: 1fr; }
  .clearcase-demo__video { max-height: 360px; }
}

/* New ClearCase intro two-column section */
.clearcase-intro { padding: 56px 0; background: #0b0d0f; color: #eef3fb; }
.clearcase-intro__inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.clearcase-intro__grid { display: grid; grid-template-columns: 1fr 380px; gap: 34px; align-items: start; }

/* Headings: stronger scale and tighter tracking for a modern, polished feel */
.clearcase-intro__h {
  margin: 0 0 10px 0;
  color: #ffffff;
  font-size: 1.45rem; /* slightly larger */
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Lead paragraph style for intro copy */
.clearcase-intro__p {
  margin: 0 0 18px 0;
  color: rgba(255,255,255,0.94);
  line-height: 1.65;
  font-size: 1.02rem;
  max-width: 56ch; /* optimal measure for reading */
}

/* Small secondary heading style (The Challenge) */
.clearcase-intro__h + .clearcase-intro__h { display: block; }
.clearcase-intro__col--left h4.clearcase-intro__h { margin-top: 14px; font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,0.95); }

/* media column image sizing */
.clearcase-intro__media img { display: block; width: 100%; height: auto; max-width: 520px; border-radius: 6px; box-shadow: 0 18px 48px rgba(0,0,0,0.6); }

/* subtle rule to anchor the copy and add a visual rhythm */
.clearcase-intro__col--left { position: relative; }
.clearcase-intro__col--left .clearcase-intro__p:last-of-type::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, #3aa0ff, #6ec3ff);
  margin-top: 18px;
  border-radius: 2px;
  opacity: 0.9;
}

@media (min-width: 1400px) {
  .clearcase-intro__grid { grid-template-columns: 1fr 640px; }
  .clearcase-intro__media img { max-width: 640px; }
}

@media (max-width: 900px) {
  .clearcase-intro__grid { grid-template-columns: 1fr; }
  .clearcase-intro__media { margin-top: 18px; }
  .clearcase-intro { padding: 36px 0; }
  .clearcase-intro__h { font-size: 1.15rem; }
  .clearcase-intro__p { max-width: 100%; }
}

/* Reveal animation for intro columns (uses existing initCardAnimations) */
.clearcase-intro .animate-card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1);
}
.clearcase-intro .animate-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Solution section (matching intro) */
.clearcase-solution { padding: 44px 0; background: #0b0d0f; color: #eef3fb; }
.clearcase-solution__inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
.clearcase-solution__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch; /* ensure grid cells stretch to same height */
  padding-top: 40px; /* larger breathing room between section top and cards */
  padding-bottom: 40px; /* add breathing room below the cards */
  grid-auto-rows: 1fr; /* make rows equal height so cards match */
}

.solution-card {
  /* Match provided dark swatch */
  background: #1f2022; /* dark neutral from provided swatch */
  border: 1px solid rgba(255,255,255,0.04); /* subtle edge for separation */
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  min-height: 320px; /* slightly reduced for smaller visual footprint */
  display: flex;
  flex-direction: column; /* stack title/copy and allow inner to grow */
  align-items: stretch;
}
.solution-card__title { margin: 0 0 8px 0; font-size: 1.05rem; font-weight: 700; color: #fff; }
.solution-card__copy { margin: 0; color: rgba(255,255,255,0.9); line-height: 1.6; }

.solution-copy { display:flex; flex-direction:column; justify-content:center; }
.solution-copy__h { margin: 0 0 8px 0; color: #fff; font-size: 1.25rem; font-weight: 700; }
.solution-copy__p { margin: 0; color: rgba(255,255,255,0.92); line-height: 1.6; }

/* Callout variant for right-column copy: slightly smaller and softer color */
.solution-copy.callout .solution-copy__h {
  color: #ffffff; /* heading in pure white to match attachment */
  font-size: 1rem; /* slightly smaller heading */
  font-weight: 600;
}
.solution-copy.callout .solution-copy__p {
  color: #9ba0a5; /* medium gray matching the screenshot */
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .solution-copy.callout .solution-copy__h { font-size: 1rem; }
  .solution-copy.callout .solution-copy__p { font-size: 0.96rem; }
}

@media (max-width: 1100px) {
  /* medium screens: slightly shorter cards to fit layout (reduced by 50px) */
  .solution-card { min-height: 290px; }
}

/* Paragraph-only callout class - changes only color and font-size for this single paragraph */
.callout-paragraph {
  color: #9ba0a5; /* paragraph-only medium gray */
  font-size: 0.95rem;
}

/* Hook reveal animation to solution cards (re-using intro rules) */
.clearcase-solution .animate-card { opacity: 0; transform: translateY(12px); transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1); }
.clearcase-solution .animate-card.visible { opacity:1; transform: translateY(0); }

@media (max-width: 900px) {
  .clearcase-solution__grid { grid-template-columns: 1fr; }
  .solution-card { min-height: auto; }
  .clearcase-solution { padding: 28px 0; }
}

/* Desktop & general: layout for second solution card - small phone image pinned to the bottom so it doesn't increase card height */
.solution-card__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* keep title at top, media area at bottom */
  height: 100%;
}

.solution-card--one {
  position: relative;
  overflow: hidden; /* ensure the background and overlay respect card radius */
  background: none; /* remove any fallback background color so image shows through */
}
/* background layer using ::before ensures it sits behind content and covers reliably */
.solution-card--one::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("images/evidence.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
.solution-card--one::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.32));
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
}
.solution-card--one .solution-card__inner { position: relative; z-index: 2; }
.solution-card--one .solution-card__media { display: none; }

/* Inline <img> fallback that absolutely covers the card */
.solution-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  z-index: 0; /* behind card content */
  border-radius: 12px;
}

/* Hide the inline bg on very small screens if it causes layout issues */
@media (max-width: 540px) {
  .solution-card__bg { display: none; }
}

.solution-card--two { position: relative; }
.solution-card--two .solution-card__inner {
  padding-bottom: 20px; /* align with card padding so media can sit flush */
}
.solution-card--two .solution-card__media {
  position: absolute;
  right: 20px;
  bottom: -10px; /* moved down 10px to visually lower the image */
  left: 20px;
  display: flex;
  justify-content: center;
  pointer-events: none; /* decorative only */
}
.solution-card--two .solution-card__media img {
  /* Force a fixed visual height while preserving aspect ratio and preventing card growth */
  width: auto;
  height: 200px; /* reduced height for smaller cards */
  max-height: none;
  object-fit: contain;
  display: block;
}

@media (max-width: 1100px) {
  .solution-card { min-height: 200px; }
  .solution-card--two .solution-card__media img { height: 180px; max-width: 92px; }
}

@media (max-width: 900px) {
  .solution-card--two .solution-card__media { position: static; margin-bottom: 12px; pointer-events: auto; }
  .solution-card--two .solution-card__media img { max-width: 92px; height: auto; transform: none; }
}

/* Allow the phone image to visually overflow the card without changing card layout
   by making the card container overflow visible and scaling the image. */
.solution-card { overflow: visible; }
.solution-card--two { overflow: visible; }
.solution-card--two .solution-card__media img {
  transform-origin: center bottom;
  transform: scale(1.05) translateX(-6px); /* slightly enlarge and move left */
  will-change: transform;
  z-index: 30; /* ensure it sits above nearby content */
}

@media (max-width: 1100px) {
  .solution-card--two .solution-card__media img { transform: scale(1.12) translateX(-8px); z-index: 30; }
}

@media (max-width: 900px) {
  .solution-card { overflow: visible; }
  .solution-card--two .solution-card__media img { transform: none; max-width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .clearcase-intro .animate-card,
  .clearcase-intro .animate-card.visible { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Subtle Apple-like blue halo and layered planes behind product image */
.clearcase-intro__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clearcase-intro__media::before,
.clearcase-intro__media::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
  transform: translate3d(0,0,0);
}
/* soft radial halo */
.clearcase-intro__media::before {
  display: none; /* remove decorative halo behind slider to avoid dark vignette */
}
/* rim glow plane to add depth */
.clearcase-intro__media::after {
  display: none; /* remove rim glow plane */
}

/* Make sure the image sits above the decorative halos */
.clearcase-intro__media img { position: relative; z-index: 2; }

@media (max-width: 1100px) {
  .clearcase-intro__media::before { width: 520px; height: 380px; filter: blur(38px); opacity: 0.85; }
  .clearcase-intro__media::after { width: 320px; height: 220px; filter: blur(20px); opacity: 0.8; }
}

@media (max-width: 900px), (hover: none) {
  /* hide decorative halos on small screens and touch devices for clarity and perf */
  .clearcase-intro__media::before,
  .clearcase-intro__media::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .clearcase-intro__media::before,
  .clearcase-intro__media::after { display: none; }
}
.clearcase-usecases__inner { position: relative; z-index: 2; }
.clearcase-usecases__title { color: #fff; margin: 0 0 14px 0; font-size: 1.5rem; }
.usecases-table-wrap { overflow-x: auto; }
.usecases-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  color: #fff;
}
.usecases-table thead th {
  text-align: left;
  padding: 10px 12px;
  color: #fff;
  /* top border for the header row */
  border-top: 0.5px solid rgba(255,255,255,0.9);
  border-left: 0.5px solid rgba(255,255,255,0.9);
  border-right: 0.5px solid rgba(255,255,255,0.9);
}
.usecases-table tbody td {
  padding: 12px;
  vertical-align: top;
  border-left: 0.5px solid rgba(255,255,255,0.9);
  border-right: 0.5px solid rgba(255,255,255,0.9);
  border-bottom: 0.5px solid rgba(255,255,255,0.9);
}
.usecases-table tbody tr:first-child td { border-top: 0.5px solid rgba(255,255,255,0.9); }
.usecases-table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.02); }

/* Make the first data row a subtle gray gradient to set it apart */
.usecases-table tbody tr:first-child td {
  background: linear-gradient(90deg, rgba(60,64,68,0.98), rgba(40,42,44,0.98));
}

/* Also style the last data row with the same gray gradient */
.usecases-table tbody tr:last-child td {
  background: linear-gradient(90deg, rgba(60,64,68,0.98), rgba(40,42,44,0.98));
}

/* Fallback for devices that don't render sub-pixel borders clearly: use 1px at lower alpha */
@supports not (border: 0.5px solid rgba(0,0,0,0.5)) {
  .usecases-table thead th,
  .usecases-table tbody td { border-width: 1px; border-style: solid; border-color: rgba(255,255,255,0.28); }
}

/* Responsive: stack table rows into blocks on small screens */
@media (max-width: 720px) {
  .usecases-table thead { display: none; }
  .usecases-table, .usecases-table tbody, .usecases-table tr, .usecases-table td { display: block; width: 100%; }
  .usecases-table tr { margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); padding-bottom: 8px; }
  .usecases-table td { padding: 8px 0; }
  .usecases-table td::before { content: attr(data-label) ": "; font-weight: 600; display: inline-block; width: 110px; color: rgba(255,255,255,0.9); }
}
/* ---- Additional polish for usecases table ---- */
@media (min-width: 721px) {
  /* Desktop row lift and subtle shadow to feel interactive */
  .usecases-table tbody tr {
    transition: transform 220ms cubic-bezier(.22,.9,.32,1), box-shadow 220ms ease, background 160ms ease;
    will-change: transform, box-shadow;
    background: transparent;
  }
  .usecases-table tbody tr:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(2,6,23,0.45);
  }
  /* slightly increase spacing on desktop for breathing room */
  .usecases-table tbody td { padding: 18px 20px; }

  /* Vertical accent on the first column to add visual hierarchy */
  .usecases-table tbody td:first-child {
    position: relative;
    padding-left: 28px;
    font-weight: 700;
  }
  .usecases-table tbody td:first-child::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 34px;
    border-radius: 4px;
    background: linear-gradient(180deg,#2aa6ff,#5cc1ff);
    box-shadow: 0 6px 18px rgba(42,166,255,0.18);
  }
}

/* Tweak mobile label styling for clarity */
@media (max-width: 720px) {
  .usecases-table td::before {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.78);
    width: auto;
  }
  .usecases-table tr { box-shadow: none; transform: none; }
  .usecases-table td:first-child::before { display: none; }
}

/* Small accessibility and visual improvements */
.usecases-table thead th { letter-spacing: 0.4px; text-transform: none; }
.usecases-table caption { caption-side: top; color: rgba(255,255,255,0.85); font-weight: 600; margin-bottom: 8px; }

/* Video icon for first media card: white, top-center */
.clearcase-media-resources .benefits-scroller .benefit-card { position: relative; overflow: visible; }
.clearcase-media-resources .benefits-scroller .benefit-card {
  flex: 0 0 320px; /* wider cards */
  min-width: 300px;
  height: 300px; /* fixed height requested */
  padding: 28px 18px 24px 18px; /* interior padding */
  box-sizing: border-box;
  overflow: hidden;
}

/* Soften the right edge of the scroller with a mask + gradient overlay and soften card edges */
.benefits-scroller-wrap { position: relative; }
.benefits-scroller {
  /* smoother left ramp and gradual right fade to avoid hard edges */
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 6%,
    rgba(0,0,0,0.6) 18%,
  rgba(0,0,0,0.72) 74%,
  rgba(0,0,0,0.5) 86%,
  rgba(0,0,0,0.28) 94%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 6%,
    rgba(0,0,0,0.6) 18%,
  rgba(0,0,0,0.72) 74%,
  rgba(0,0,0,0.5) 86%,
  rgba(0,0,0,0.28) 94%,
    rgba(0,0,0,0) 100%);
  mask-mode: alpha;
}
.benefits-scroller-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px; /* wider overlay for a more gradual right fade to match the left */
  height: 100%;
  pointer-events: none;
  z-index: 2;
  /* fallback gradient for browsers without backdrop-filter - more gradual to avoid hard left edge */
  /* more gradual, softer ramp to match left side softening */
  background: linear-gradient(to right,
    rgba(15,18,20,0) 0%,
    rgba(15,18,20,0.03) 10%,
    rgba(15,18,20,0.06) 26%,
    rgba(15,18,20,0.10) 44%,
    rgba(15,18,20,0.16) 62%,
    rgba(15,18,20,0.30) 80%,
    rgba(15,18,20,0.56) 94%,
    rgba(15,18,20,0.84) 98%,
    rgba(15,18,20,1) 100%);
  /* soften shadow to avoid vertical band */
  box-shadow: -2px 0 8px rgba(15,18,20,0.06);
  border-top-left-radius: 12px; /* tiny radius to soften corner */
  border-bottom-left-radius: 12px;
}

/* Proof & Validation section styles */
.clearcase-proof { background: #000; color: #fff; }
.clearcase-proof__inner { max-width: 1200px; margin: 0 auto; padding: 56px 20px; }
.clearcase-proof__grid { display: grid; grid-template-columns: 1fr 420px; gap: 28px; align-items: start; }
.clearcase-proof__title { margin: 0 0 12px 0; font-size: 1.6rem; color: #fff; }
.clearcase-proof__lead { color: rgba(255,255,255,0.86); margin-bottom: 14px; }
.clearcase-proof__list { margin: 0 0 18px 0; padding-left: 20px; color: rgba(255,255,255,0.92); }

.proof-card { background: #222; /* neutral dark gray */ border-radius: 12px; padding: 18px; box-shadow: 0 10px 30px rgba(2,6,23,0.35); border: 1px solid rgba(255,255,255,0.04); margin-top: 12px; height: 400px; display: flex; flex-direction: column; justify-content: flex-start; }
.proof-card__h { margin: 0 0 8px 0; font-size: 1.1rem; color: #fff; }
.proof-card__p { margin: 0 0 12px 0; color: rgba(255,255,255,0.9); }
.proof-card__cta .btn { font-weight: 600; }

.proof-stat { display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.proof-stat__num { font-size: 1.6rem; font-weight:800; color: #fff; }
.proof-stat__label { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.proof-logos img { height: 40px; margin-right: 10px; opacity: 0.95; }

@media (max-width: 900px) {
  .clearcase-proof__grid { grid-template-columns: 1fr; }
  .clearcase-proof__inner { padding: 28px 16px; }
  .proof-logos img { height: 32px; }
  .proof-card { box-shadow: none; border: 1px solid rgba(255,255,255,0.03); background: #2a2a2a; height: auto; }
}

/* Higher-specificity overrides to ensure polish applies to ClearCase solution cards */
.clearcase-solution__grid .solution-card {
  /* strengthen the polished look and ensure it overrides earlier card fallbacks */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 20px 60px rgba(2,6,23,0.64), 0 8px 28px rgba(2,6,23,0.36);
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), box-shadow 320ms ease, filter 320ms ease;
  overflow: visible;
}

.clearcase-solution__grid .solution-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-top-left-radius: 14px; border-top-right-radius: 14px;
  pointer-events: none; z-index: 0; mix-blend-mode: overlay; opacity: 0.95;
}

.clearcase-solution__grid .solution-card .solution-card__media::before {
  /* reduce size on small screens, but ensure halo shows on desktop */
  display: block; width: 320px; height: 320px; filter: blur(28px); opacity: 0.92;
}

.clearcase-solution__grid .solution-card .solution-card__media img {
  filter: drop-shadow(0 30px 56px rgba(2,6,23,0.6));
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), filter 320ms ease, opacity 320ms ease;
  transform-origin: center bottom;
  position: relative; z-index: 2;
}

@media (hover: hover) and (min-width: 900px) {
  .clearcase-solution__grid .solution-card:hover { transform: translateY(-8px); box-shadow: 0 32px 96px rgba(2,6,23,0.75), 0 12px 36px rgba(2,6,23,0.42); }
  .clearcase-solution__grid .solution-card:hover .solution-card__media img { transform: scale(1.05); filter: drop-shadow(0 42px 80px rgba(2,6,23,0.64)); }
}

@media (prefers-reduced-motion: reduce) {
  .clearcase-solution__grid .solution-card, .clearcase-solution__grid .solution-card .solution-card__media img { transition: none !important; transform: none !important; }
  .clearcase-solution__grid .solution-card .solution-card__media::before { display: none !important; }
}


/* If backdrop-filter is supported, use a true blur overlay for a softer effect */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .benefits-scroller-wrap::after {
  background: rgba(15,18,20,0.04);
  backdrop-filter: blur(1px) saturate(1.01);
  -webkit-backdrop-filter: blur(1px) saturate(1.01);
  /* much softer inset shadow to avoid a dark vertical band */
  box-shadow: -1px 0 6px rgba(15,18,20,0.045);
  width: 120px; /* match fallback overlay width */
  }
}

.clearcase-media-resources .benefits-scroller .benefit-card {
  border-radius: 14px; /* softer corners */
  overflow: hidden; /* ensure icons/content respect radius */
  box-shadow: 0 10px 30px rgba(2,6,23,0.28);
}

@media (max-width: 900px) {
  /* disable mask/overlay on small/touch devices for performance and clarity */
  .benefits-scroller { -webkit-mask-image: none; mask-image: none; }
  .benefits-scroller-wrap::after { display: none; }
  .clearcase-media-resources .benefits-scroller .benefit-card { box-shadow: none; border-radius: 12px; }
}
.clearcase-media-resources .benefits-scroller .benefit-card:first-child .benefit-card__icon {
  position: absolute;
  top: 20px; /* ensure 20px from top of the card to the top of the icon */
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-radius: 999px;
}
.clearcase-media-resources .benefits-scroller .benefit-card__icon svg { display: block; }

/* Small right-aligned note below the highlights scroller (matches right edge of cards) */
.clearcase-highlights__note {
  max-width: 1200px; /* match highlights inner container max width */
  margin: 8px auto 0 auto; /* center horizontally within the same max-width */
  /* increase right inset so the note aligns with the right edge of the cards more tightly */
  padding: 0 20px 0 20px; /* base padding to match container */
  padding-right: clamp(28px, 4vw, 64px); /* nudge further right on larger viewports */
  box-sizing: border-box;
  text-align: right; /* align text to the right edge of the cards */
  transform: translateX(min(6vw, 64px)); /* further push to the right on wide viewports */
}
.clearcase-highlights__note-text {
  margin: 0;
  color: rgba(255,255,255,0.62);
  font-size: 0.95rem;
  line-height: 1.3;
}

/* Paper icon on second card */
.clearcase-media-resources .benefits-scroller .benefit-card:nth-child(2) .benefit-card__icon--paper {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-radius: 999px;
}
.clearcase-media-resources .benefits-scroller .benefit-card:nth-child(2) p { margin-top: 62px; }

/* Ensure 20px gap between icon bottom and the paragraph in the first card */
.clearcase-media-resources .benefits-scroller .benefit-card:first-child p {
  margin-top: 62px; /* keep paragraph 20px below icon bottom */
}

/* Press icon on third card */
.clearcase-media-resources .benefits-scroller .benefit-card:nth-child(3) .benefit-card__icon--press {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-radius: 999px;
}
.clearcase-media-resources .benefits-scroller .benefit-card:nth-child(3) p { margin-top: 62px; }

/* Watch icon on fourth card */
.clearcase-media-resources .benefits-scroller .benefit-card:nth-child(4) .benefit-card__icon--watch {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-radius: 999px;
}
.clearcase-media-resources .benefits-scroller .benefit-card:nth-child(4) p { margin-top: 62px; }

/* Contact section styles: two-column layout, blue left card, white form card */
.clearcase-contact { padding: 56px 0; background: linear-gradient(180deg,#2e7bff,#174ec6); /* base gradient — adjusted to match supplied blue */ background-image: linear-gradient(180deg,#2e7bff 0%, #1a5fe0 40%, #1140b8 100%); }
.clearcase-contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; max-width: 1100px; margin: 0 auto; }
.clearcase-contact__left { display: flex; align-items: center; }
.contact-info-card { background: rgba(255,255,255,0.04); padding: 36px; border-radius: 14px; color: #fff; backdrop-filter: blur(8px); width: 100%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); }
.contact-info-card__title { font-size: 1.5rem; margin: 0 0 12px 0; color: #ffffff; text-shadow: 0 1px 0 rgba(0,0,0,0.12); }
.contact-info-card__lead { color: rgba(255,255,255,0.95); line-height: 1.6; }
.contact-info-card__rule { border: none; height: 1px; background: rgba(255,255,255,0.06); margin: 18px 0; }
.contact-info-card__sub { color: #fff; margin: 6px 0 8px 0; }
.contact-info-card__steps h5 { color: rgba(255,255,255,0.92); margin: 12px 0 6px 0; }
.contact-info-card__steps p { margin: 0 0 10px 0; color: rgba(255,255,255,0.78); }

.clearcase-contact__right { display: flex; align-items: center; justify-content: center; }
.contact-form { background: #fff; padding: 28px; border-radius: 14px; width: 100%; max-width: 520px; box-shadow: 0 12px 40px rgba(3,30,80,0.12); }
.contact-form__title { color: #184A9F; margin: 0 0 16px 0; font-size: 1.25rem; }
.form-grid.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field input, .form-field textarea, .form-field select { width: 100%; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; background: #f6f6f7; font-family: inherit; font-size: inherit; color: #333; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #333; opacity: 1; }
.form-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.form-field select option[disabled] { color: #999; }
.form-field.fullwidth textarea { min-height: 120px; }
.form-row { margin-top: 12px; }
.form-row--checkbox label { font-size: 0.95rem; color: #333; }
.recaptcha-placeholder { margin-top: 12px; padding: 10px; border: 1px dashed rgba(0,0,0,0.08); border-radius: 6px; color: #999; }
.form-row--submit { margin-top: 18px; }
.contact-submit { width: 100%; padding: 14px 24px; border-radius: 999px; border: none; color: #fff; font-weight: 700; background: linear-gradient(90deg, #0d7bff, #0246c8); box-shadow: 0 12px 24px rgba(13,123,255,0.18); cursor: pointer; }

@media (max-width: 900px) {
  .clearcase-contact__inner { grid-template-columns: 1fr; }
  .form-grid.two-col { grid-template-columns: 1fr; }
  .contact-form { max-width: 100%; }
}


/* Hover and focus states */
.clearcase-media-resources .benefits-scroller .benefit-card__icon:hover,
.clearcase-media-resources .benefits-scroller .benefit-card__icon:focus {
  transform: translateX(-50%) scale(1.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.clearcase-media-resources .benefits-scroller .benefit-card__icon:focus { outline: 3px solid rgba(33,118,255,0.16); }
.clearcase-media-resources .benefits-scroller .benefit-card__cta .btn { margin-top: 12px; }
.clearcase-media-resources .benefits-scroller .benefit-card__cta .btn:focus,
.clearcase-media-resources .benefits-scroller .benefit-card__cta .btn:hover { transform: translateY(-2px); }

/* Center the CTA button */
.clearcase-media-resources .benefits-scroller .benefit-card__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
}

/* Modal styles */
.video-modal { display: none; }
.video-modal.open { display: block; }
.video-modal__backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1200;
}
.video-modal__dialog {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1201;
  max-width: 96%; width: 980px; box-shadow: 0 20px 60px rgba(2,6,23,0.6);
}
.video-modal__content { background: #000; padding: 12px; border-radius: 8px; }
.video-modal__close {
  position: absolute; right: -12px; top: -12px; background: #fff; border-radius: 50%; width: 36px; height: 36px; border: none; cursor: pointer; z-index: 1202; font-size: 20px; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.video-modal video { width: 100%; height: auto; display: block; border-radius: 6px; }


/* FAQ section styles */
.faq-section {
  background: #000; /* black background */
  color: #fff;
  padding: 48px 0;
}
.faq-inner { max-width: 920px; margin: 0 auto; padding: 0 18px; }
.faq-title { color: #fff; font-size: 1.8rem; margin: 0 0 18px 0; font-weight: 600; }
.faq-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
 

/* Strong white dividers between questions */
.faq-list { border-top: 1px solid rgba(255,255,255,0.12); }
.faq-item { border-top: 1px solid rgba(255,255,255,0.12); }
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }

.faq-section .faq-q,
.faq-section .faq-q * {
  background: transparent;
  color: #fff;
  box-shadow: none;
  border: none;
}
.faq-section .faq-q { padding: 12px 0; border-radius: 0; }
.faq-section .faq-list, .faq-section .faq-item { border-color: rgba(255,255,255,0.14); }


/* ClearCase-scoped FAQ styles (namespace to avoid bleed) */
.clearcase-faq { background: #000000; color: #fff; padding: 48px 0; }
.clearcase-faq__title { font-size: 1.8rem; font-weight: 700; margin: 0 0 18px 0; color: #fff; }
.clearcase-faq__list { max-width: 1200px; margin: 0 auto; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.clearcase-faq .faq-item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 18px; box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.clearcase-faq .faq-item summary { cursor: pointer; list-style: none; outline: none; font-weight: 700; padding: 6px 0; display: block; }
.clearcase-faq .faq-item summary { position: relative; padding-right: 28px; }

/* Caret indicator (CSS-only) */

.clearcase-faq .faq-item summary::after {
  /* Material-style chevron (SVG data URI) */
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 200ms ease;
  pointer-events: none;
}

/* Rotate caret when open */
.clearcase-faq .faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); }

/* Focus/hover state for summary to make caret more visible */
.clearcase-faq .faq-item summary:focus, .clearcase-faq .faq-item summary:hover {
  color: #fff;
}
.clearcase-faq .faq-item summary::-webkit-details-marker { display: none; }
.clearcase-faq .faq-item__q { color: #fff; font-size: 1.02rem; }
.clearcase-faq .faq-item__a { color: #ffffff; margin-top: 12px; line-height: 1.6; }
.clearcase-faq .faq-item[open] { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(2,6,23,0.7); }

/* Hover/focus accent for card border */
.clearcase-faq .faq-item:hover, .clearcase-faq .faq-item:focus-within { border-color: rgba(255,255,255,0.22); box-shadow: 0 16px 48px rgba(2,6,23,0.75); }

@media (prefers-reduced-motion: reduce) {
  .clearcase-faq .faq-item summary { transition: none; }
}

/* Responsive: single column on small screens */
@media (max-width: 900px) {
  .clearcase-faq__list { grid-template-columns: 1fr; gap: 12px; }
  .clearcase-faq .faq-item { padding: 14px; }
}

/* Make the FAQ section span the full viewport width to avoid white gutters */
.clearcase-faq { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; }
.clearcase-faq__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.clearcase-faq__list { padding: 0; }

/* White text for dark FAQ background — class specificity beats element rules, no needed */
.clearcase-faq * { color: #ffffff; }

/* Align the FAQ title to the left edge of the benefit cards */
.clearcase-faq__title { margin-left: 4px; }

@media (max-width: 900px) {
  .clearcase-faq__inner { padding: 0 16px; }
  .clearcase-faq__title { margin-left: 0; }
}

/* If a parent container adds background or padding, ensure the faq stays isolated */
.clearcase-faq, .clearcase-faq * { background-clip: padding-box; }

/* Strong override: ensure the FAQ section is properly positioned */
.clearcase-faq { z-index: 9999; }
.clearcase-faq::before { display: none; }
.clearcase-faq__inner, .clearcase-faq__inner * { background: transparent; }

/* In case an ancestor uses transform (which creates a new stacking context), force isolation by unsetting transform on nearest known ancestors */
.clearcase-faq, .clearcase-faq__inner { transform: none; }


/* Related Products — ClearCase page only */
.clearcase-related-products {
  /* slightly lighter backdrop for improved separation and readability */
  background: #0f1419; /* was #0b0f14 */
  color: #fff;
  padding: 56px 0 72px 0;
}
.clearcase-related-products__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
.related-products__title { font-size: 2.25rem; font-weight: 700; margin: 0 0 20px 0; color: #fff; }
.related-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px; /* increased spacing between cards */
  margin-top: 16px;
}
.related-product-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 14px;
  /* make cards 40px taller (was 200px) */
  min-height: 240px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: center;
  /* subtle blue hairline stroke via box-shadow to avoid replacing existing border */
  box-shadow: 0 0 0 0.5px rgba(33,118,255,0.08);
}

.related-product-card:hover, .related-product-card:focus-within {
  box-shadow: 0 4px 18px rgba(33,118,255,0.10), 0 0 0 0.75px rgba(33,118,255,0.18);
}
.related-product__cta { margin-top: auto; padding-bottom: 20px; }
.related-product__cta .btn { padding: 8px 18px; border-radius: 28px; }
.related-product__logo { max-width: 160px; width: 60%; height: auto; display: block; margin: 8px auto 14px auto; }
.related-products__grid > .related-product-card:first-child .related-product__logo {
  /* larger logo for the first card (bumped per request) */
  max-width: 260px;
  width: 85%;
}

/* Slightly larger logo on the second card (BulletTrax/BrassTrax as needed) */
.related-products__grid > .related-product-card:nth-child(2) .related-product__logo {
  max-width: 220px;
  width: 78%;
}
/* Slightly larger logo on the third card (MatchPoint) */
.related-products__grid > .related-product-card:nth-child(3) .related-product__logo {
  max-width: 200px;
  width: 72%;
}
.related-product__desc { color: rgba(255,255,255,0.92); font-size: 0.96rem; line-height: 1.4; margin: 0 0 12px 0; }
.related-product__cta .btn { padding: 8px 18px; border-radius: 28px; }

/* Make buttons in this related-products section outline-only (no fill) */
.clearcase-related-products .btn {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
}
.clearcase-related-products .btn.btn-primary {
  /* if a primary class is present, keep it outline-style here */
  background: transparent;
  color: #fff;
}
.clearcase-related-products .btn:hover {
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
  border-color: rgba(33,118,255,0.36); /* stronger blue border on hover */
  box-shadow: 0 8px 28px rgba(33,118,255,0.12);
}
.clearcase-related-products .btn:focus {
  background: rgba(255,255,255,0.04);
  outline: 4px solid rgba(33,118,255,0.22); /* thicker, more visible blue focus ring */
  outline-offset: 2px;
  box-shadow: 0 12px 36px rgba(33,118,255,0.14);
}

@media (max-width: 1100px) {
  .related-products__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 700px) {
  .technical-video { width: 100%; height: auto; max-height: 320px; margin: 12px 0 0 0; object-position: center center; clip-path: none; }
  .related-product__logo { width: 44%; }
  .related-products__grid > .related-product-card:first-child .related-product__logo { width: 66%; }
}

/* Intro two-column right column image slider */
.intro-slider {
  /* slightly larger: allow more room for the image without breaking the grid */
  max-width: 560px; /* increased from 520px for a modest size bump */
  margin: 0 auto;
}

/* Page-specific utility: leads-soukltion (duplicate of clearcase-solution look for specialized pages) */
.leads-soukltion {
  padding: 64px 0 196px 0; /* increased bottom padding by 100px */
  background: #005587; /* requested solid blue */
  color: #eef3fb; /* keep light text */
}
.leads-soukltion .leads-soukltion__grid { padding-top: 40px; padding-bottom: 64px; }

@media (max-width: 900px) {
  .clearcase-solution__grid { padding-top: 20px; }
  .leads-soukltion .leads-soukltion__grid { padding-top: 20px; padding-bottom: 20px; }
  .clearcase-solution__grid { padding-bottom: 20px; }
}
.leads-soukltion .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.leads-soukltion .leads-soukltion__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; column-gap: 48px; align-items: stretch; grid-auto-rows: 1fr; }
.leads-soukltion .solution-copy__h, .leads-soukltion .solution-copy__p { color: #ffffff; }
/* White text for dark solution section — explicit selectors, no wildcard or needed */
.leads-soukltion * { color: #ffffff; }
.leads-soukltion a { color: #ffffff; }

/* Add extra left padding to the right-hand copy column on desktop to separate it from the 2nd card */
@media (min-width: 900px) {
  .leads-soukltion .solution-copy { padding-left: 36px; }
}

/* --- Apple-like polish: layered soft blobs + frosted card backdrop (scoped to leadsonline) --- */
.leads-soukltion {
  position: relative; /* create stacking context for decorative blobs */
  overflow: visible;
  /* keep a fallback gradient for browsers without blend support */
  background-image: linear-gradient(180deg, #004a76 0%, #005587 60%);
}

.leads-soukltion::before,
.leads-soukltion::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0; /* sit behind content */
  mix-blend-mode: screen;
  filter: blur(40px);
  opacity: 1;
}
.leads-soukltion::before {
  left: -6%;
  top: -6%;
  width: 820px;
  height: 620px;
  background: radial-gradient(circle at 30% 30%, rgba(84,150,255,0.22), rgba(84,150,255,0.04) 40%, transparent 60%);
}
.leads-soukltion::after {
  right: -4%;
  bottom: -6%;
  width: 720px;
  height: 560px;
  background: radial-gradient(circle at 70% 70%, rgba(188,96,216,0.18), rgba(188,96,216,0.04) 40%, transparent 60%);
}

/* Subtle noise + shimmer overlay layered above color blobs but below content */
.leads-soukltion-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* ensure the overlay sits above the decorative blobs but beneath interactive/content layers */
  z-index: 4; /* increased so it isn't hidden behind content stacking contexts */
  mix-blend-mode: overlay;
  opacity: 0.12; /* slightly stronger for visibility */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' /></svg>");
  background-repeat: repeat;
  background-size: 160px 160px;
}

.leads-soukltion-overlay::before {
  content: '';
  position: absolute;
  left: -40%;
  top: 0;
  height: 100%;
  width: 140%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 48%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  will-change: transform;
  animation: shimmerMove 9s linear infinite;
  mix-blend-mode: overlay;
  opacity: 0.9;
}

@keyframes shimmerMove {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .leads-soukltion-overlay::before { animation: none; opacity: 0.55; }
  .leads-soukltion-overlay { opacity: 0.04; }
  .leads-soukltion-deco::before,
  .leads-soukltion-deco::after { animation: none; }
}

@media (max-width: 900px) {
  .leads-soukltion-overlay { display: none; }
}

/* Debug helper: make overlay very visible when html.debug-overlay is present */
html.debug-overlay .leads-soukltion-overlay { opacity: 0.98; mix-blend-mode: normal; z-index: 9999; }
html.debug-overlay .leads-soukltion-overlay::before { background: linear-gradient(90deg, rgba(255,0,128,0.22), rgba(255,255,255,0.42), rgba(255,0,128,0.22)); opacity: 1; }

/* Section title above solution grid */
.leads-soukltion .leads-soukltion__grid { position: relative; }
.leads-soukltion .solution-section__title {
  position: absolute;
  left: 20px; /* align with container padding / first card */
  top: -26px; /* sit visually above the first card */
  grid-column: 1 / -1; /* span entire grid for alignment */
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  z-index: 6; /* above cards */
}

@media (max-width: 900px) {
  .leads-soukltion .solution-section__title { position: static; margin: 0 0 12px 0; }
}

/* subtle top highlight to frame the section */
.leads-soukltion::marker { display: none; }
.leads-soukltion .leads-soukltion__inner::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  z-index: 3;
  pointer-events: none;
}

/* Ensure content and cards sit above the decorative blobs */
.leads-soukltion > .container,
.leads-soukltion .solution-card,
.leads-soukltion .solution-copy { position: relative; z-index: 2; }

/* Frosted backdrop for cards (non-white variants) with graceful fallback */
.leads-soukltion .solution-card:not(.solution-card--white) {
  background: rgba(255,255,255,0.04); /* subtle translucent surface over blue */
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 36px rgba(2,6,23,0.28);
}
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .leads-soukltion .solution-card:not(.solution-card--white) {
    background: rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
  }
}

/* Reduce decorative intensity on small screens */
@media (max-width: 900px) {
  .leads-soukltion::before,
  .leads-soukltion::after { display: none; }
}

/* Visible decorative element fallback (explicit DOM element) */
.leads-soukltion-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* sit behind content */
}
.leads-soukltion-deco::before,
.leads-soukltion-deco::after {
  content: '';
  position: absolute;
  pointer-events: none;
  filter: blur(12px);
  opacity: 0.98;
}
.leads-soukltion-deco::before {
  left: -2%;
  top: -2%;
  width: 1000px;
  height: 760px;
  /* darker blue primary blob */
  background: radial-gradient(circle at 30% 30%, rgba(6,58,120,0.80), rgba(10,78,160,0.28) 40%, transparent 62%);
  animation: floatBlob1 20s ease-in-out infinite;
  will-change: transform;
}
.leads-soukltion-deco::after {
  right: 0%;
  bottom: -2%;
  width: 920px;
  height: 780px;
  /* deeper secondary blue for subtle contrast */
  background: radial-gradient(circle at 70% 70%, rgba(8,48,95,0.74), rgba(12,90,170,0.22) 40%, transparent 62%);
  animation: floatBlob2 25s ease-in-out infinite;
  will-change: transform;
}

/* Smooth floating animations for decorative blobs */
@keyframes floatBlob1 {
  0%, 100% { 
    transform: translate(0, 0) scale(1); 
  }
  25% { 
    transform: translate(20px, -30px) scale(1.05); 
  }
  50% { 
    transform: translate(-15px, -40px) scale(0.98); 
  }
  75% { 
    transform: translate(10px, -20px) scale(1.02); 
  }
}

@keyframes floatBlob2 {
  0%, 100% { 
    transform: translate(0, 0) scale(1); 
  }
  30% { 
    transform: translate(-25px, 20px) scale(1.03); 
  }
  60% { 
    transform: translate(15px, 35px) scale(0.97); 
  }
  80% { 
    transform: translate(-10px, 15px) scale(1.01); 
  }
}

/* Debug helper: add ?debug=blobs to the URL to force fully-visible blobs for testing */
html.debug-blobs .leads-soukltion-deco::before,
html.debug-blobs .leads-soukltion-deco::after {
  opacity: 1;
  filter: blur(8px);
}
.leads-soukltion .clearcase-solution__inner::before {
  /* hidden: remove thin horizontal sheen/line that appeared above cards */
  display: none;
}

@media (max-width: 900px) {
  .leads-soukltion-deco { display: none; }
}

/* Position the small note under the first solution card without affecting layout */
.leads-soukltion .solution-card { position: relative; }
.leads-soukltion .solution-card .solution-note {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 32px); /* place further beneath the card for more breathing room */
  text-align: left;
  z-index: 4; /* above deco but below other controls if any */
  pointer-events: auto;
}
.leads-soukltion .solution-note__line {
  margin: 0 0 6px 0;
  color: #ffffff;
  font-size: 0.62rem; /* reduced further per request */
  line-height: 1.25;
}

/* Spacer variant for cards that need the same visual gap but no text */
.leads-soukltion .solution-note--spacer { min-height: 32px; }

@media (max-width: 900px) {
  .leads-soukltion .solution-note__line { font-size: 0.98rem; line-height: 1.4; }
}

@media (max-width: 900px) {
  .leads-soukltion .solution-card .solution-note { position: static; margin-top: 12px; }
}

/* White card variant for solution grid (light background with dark copy) */
.solution-card--white {
  background: #ffffff;
  color: #0b0d0f;
  border: 1px solid rgba(11,13,15,0.06);
  box-shadow: 0 12px 36px rgba(2,6,23,0.06);
}
.solution-card--white .solution-card__media img { filter: none; }
.solution-card--white .solution-card__title, .solution-card--white .solution-card__copy { color: #0b0d0f; }

.intro-slider__viewport {
  position: relative;
  width: 100%;
  /* enforce a stable aspect ratio so images swapping won't change layout */
  aspect-ratio: 4 / 3; /* adjust as needed to fit your artwork */
  max-height: 560px; /* prevent an overly tall viewport on wide screens */
  border-radius: 6px;
  overflow: hidden; /* hide off-screen slides */
  background: transparent;
}
.intro-slider__slide {
  position: absolute; /* stack slides on top of each other */
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 280ms ease, transform 320ms ease;
  pointer-events: none;
  display: block;
  display: flex; /* center image inside slide */
  align-items: center;
  justify-content: center;
}
.intro-slider__slide[data-active="true"] { opacity: 1; pointer-events: auto; }

/* image inside slide: preserve aspect ratio and ensure the full image is shown */
.intro-slider__img {
  width: auto;
  height: 100%;
  display: block;
  object-fit: contain; /* preserve whole image while filling viewport height */
  object-position: center center;
  border-radius: 6px;
  transform-origin: center center;
  transform: scale(1);
  max-width: 100%;
}

/* center dots directly beneath the image and style to match highlights pagination */
.intro-slider__dots {
  /* Centered pill container beneath the image with a darker pill look and subtle inner glow */
  position: static; /* participate in document flow so we can push it down */
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  /* darker pill background to match screenshot */
  background: linear-gradient(180deg, rgba(10,12,14,0.86), rgba(22,24,28,0.76));
  padding: 8px 16px;
  border-radius: 999px;
  width: max-content;
  margin: 6px auto 0 auto; /* base centering */
  transform: translateY(-300px); /* current desktop offset */
  z-index: 6;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 8px 28px rgba(2,6,23,0.6);
  -webkit-backdrop-filter: blur(4px) saturate(1.02);
  backdrop-filter: blur(4px) saturate(1.02);
}

/* soft blurred halo behind the pill for depth (subtle, floats behind) */
.intro-slider__dots::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 12px);
  height: 32px;
  border-radius: 999px;
  background: rgba(48,60,84,0.06);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.95;
}

/* Strongly-scoped button reset so global .btn rules can't override dot sizing */
.intro-slider__dots button.intro-slider__dot,
button.intro-slider__dot,
.intro-slider__dots > button.intro-slider__dot,
.intro-slider__dot {
  all: unset;
  display: inline-block;
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28); /* muted by default */
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.32);
}
.intro-slider__dot {
  /* ensure non-selected state is slightly translucent */
  background: rgba(255,255,255,0.28);
}
.intro-slider__dot.active,
.intro-slider__dot[aria-selected="true"] {
  background: #ffffff; /* full white for selected */
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  transform: translateY(-2px) scale(1.18); /* lift slightly above the pill */
  box-shadow: 0 12px 34px rgba(0,0,0,0.55), 0 0 20px rgba(255,255,255,0.06);
  z-index: 12; /* ensure it sits above the pill and halo */
}
.intro-slider__dot:focus {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 4px;
}

/* ------------------------------------------------------------------ */
/* leadsonline.html page-scoped overrides (migrated from inline <style>) */
/* These rules only apply when the document body includes the class: */
/*   <body class="leadsonline"> */
/* Keep these scoped to avoid affecting the original ClearCase page.   */
.leadsonline .leadsonline-overview {
  background: #ffffff;
  color: #0b0d0f;
  padding-top: 48px;
  padding-bottom: 48px;
}

.customer-key-benefits .case-study-footnote {
  font-family: "Barlow", sans-serif;
  font-size: 0.7rem;
  color: #888888;
  line-height: 1.4;
  margin-top: -16px;
}

/* Use cases section background — clearcase page only */
body.leadsonline #use-cases.cellhawk-features-grid {
  background-image: linear-gradient(rgba(10, 23, 64, 0.50), rgba(10, 23, 64, 0.50)), url('images/gun-and-rifle-magazines-with-bullets-on-table-2026-03-13-01-18-41-utc.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.media-resources-section .media-card-title {
  color: #0a1740;
}

.media-card-subtitle {
  font-family: "Barlow", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a5568;
  margin-top: -10px;
  margin-bottom: 12px;
}

/* Match Benefits/FAQ section title size to other section headings */
.leadsonline .case-studies-title { font-size: 2.25rem; }

/* Animated blue gradient utility removed per request */
.leadsonline .leadsonline-overview .clearcase-intro__h,
.leadsonline .leadsonline-overview .clearcase-intro__p {
  color: #0b0d0f;
}
.leadsonline .leadsonline-overview a:not(.btn) { color: #0d6efd; }
/* If JS animation hasn't run, force the animate-card content visible for this page */
.leadsonline .leadsonline-overview .animate-card {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Also ensure solution cards are visible on the leadsonline page if JS hasn't added the visible class */
.leadsonline .clearcase-solution .animate-card {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Page-scoped background for Media & Resources section */
.leadsonline .clearcase-media-resources {
  background-image: url('images/digital_globe');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  color: #fff;
}
.leadsonline .clearcase-media-resources::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.36), rgba(0,0,0,0.36));
  pointer-events: none;
  z-index: 0;
}
.leadsonline .clearcase-media-resources > .container { position: relative; z-index: 2; }
/* Make benefit cards more opaque and contrasted on this background */
.leadsonline .clearcase-media-resources .benefit-card {
  background: rgba(6,10,16,0.86);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 22px 56px rgba(2,6,23,0.72);
  color: #ffffff;
}
.leadsonline .clearcase-media-resources .benefit-card p { color: rgba(255,255,255,0.92); }

/* Intro side card styling for leadsonline page */
.leadsonline .intro-side-card {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  overflow: hidden;
  /* softened shadow: less offset and blur, lower opacity for subtle lift */
  box-shadow: 0 8px 20px rgba(2,6,23,0.18);
  background: #fff; /* default white so image edge blends on light page */
  display: block;
}
.leadsonline .intro-side-card__media { width: 100%; display: block; }
.leadsonline .intro-side-card__media img {
  display: block;
  width: 100%;
  height: 240px; /* fixed visual height on desktop */
  object-fit: cover; /* fill the card */
  object-position: center center;
}
.leadsonline .intro-side-card__content { padding: 14px 16px; text-align: center; }
.leadsonline .intro-side-card__title { margin: 0; font-size: 1.05rem; color: #0b0d0f; font-weight: 700; }

/* How It Works — ClearCase Angle image: show full product uncropped */
body.leadsonline #how-it-works .how-it-works-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 900px) {
  .leadsonline .intro-side-card__media img { height: 220px; }
  .leadsonline .intro-side-card { max-width: 100%; }
}


@media (max-width: 920px) {
  .intro-slider { max-width: 440px; }
}
@media (max-width: 620px) {
  .intro-slider { max-width: 100%; }
  /* On small screens return pagination to normal flow below the image */
  .intro-slider__dots { position: static; gap: 10px; margin: 10px auto 0 auto; }
  .intro-slider__dot { width: 10px; height: 10px; }
}

/* Proof & Validation section (inserted under Technical Highlights) */
.proof-validation {
  background: #000;
  color: #fff;
  padding: 64px 0;
}
.proof-validation__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.proof-validation__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
/* column helpers intentionally left implicit; styles applied to modifiers if needed */

.large-gray-card {
  background: #2a2a2a;
  color: #fff;
  border-radius: 8px;
  padding: 28px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.large-gray-card__h {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}
.large-gray-card__p {
  margin: 0 0 18px 0;
  line-height: 1.4;
  color: #e6e6e6;
}
.large-gray-card__cta { margin-top: auto; }
.large-gray-card .btn { color: #fff; border-color: #fff; }

@media (max-width: 900px) {
  .proof-validation__grid { grid-template-columns: 1fr; }
  .large-gray-card { min-height: 240px; }
}

/* Validation list styling */
.validation-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
}

.validation-list li {
  padding: 12px 0 12px 28px;
  position: relative;
  color: #000000;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 500;
}

.validation-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #00AAFF;
  font-weight: 700;
  font-size: 1.2rem;
}

.validation-disclaimer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 400;
}

/* Right-column copy blocks inside Proof & Validation */
.proof-copy-block {
  background: transparent;
  padding: 8px 0 24px 0;
}
.proof-copy-block__h {
  margin: 0 0 8px 0;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
}
.proof-copy-block__p {
  margin: 0;
  color: rgba(255,255,255,0.67);
  font-size: 1.15rem;
  line-height: 1.8; /* generous leading like the attachment */
  max-width: 520px;
}

@media (max-width: 900px) {
  .proof-copy-block__h { font-size: 1.15rem; }
  .proof-copy-block__p { font-size: 1rem; line-height: 1.6; max-width: 100%; }
}

/* =================== FAQ SECTIONS - WHITE THEME =================== */
/* All FAQ sections - white background, black text, soft borders */
section.clearcase-faq {
  background: #ffffff;
  background-color: #ffffff;
  background-image: none;
}

section.clearcase-faq::before,
section.clearcase-faq::after {
  display: none;
  content: none;
  background: none;
  width: 0;
  height: 0;
}

section.clearcase-faq .clearcase-faq__title {
  color: #000000;
}

section.clearcase-faq .faq-item {
  background: #ffffff;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

section.clearcase-faq .faq-item:hover {
  background: #f5f5f5;
  background-color: #f5f5f5;
  transform: none;
  box-shadow: none;
}

section.clearcase-faq .faq-item[open] {
  background: #ffffff;
  background-color: #ffffff;
}

section.clearcase-faq .faq-item summary,
section.clearcase-faq .faq-item__q,
section.clearcase-faq .faq-item__a,
section.clearcase-faq .faq-item__a p {
  color: #000000;
}

section.clearcase-faq .faq-item summary::after {
  border-color: #999999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23999999' d='M7 10l5 5 5-5z'/></svg>");
}