/* Features spacing + pro scroll reveal */

/* Container grid applied dynamically via JS */
.hwx-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch; /* make items fill row height */
  gap: 36px; /* increased spacing */
  padding-bottom: 72px; /* breathing room above footer */
  /* Responsive container width matching CTA scale */
  max-width: clamp(720px, 92vw, 1280px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  justify-items: stretch;
  justify-content: center;
}
@media (min-width: 1024px) {
  .hwx-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Each item keeps original markup; we only add padding and spacing */
.hwx-item {
  padding: 12px 4px;
  height: auto;
  width: 100%;
}
.hwx-item h3 { margin: 0 0 8px; font-weight: 700; color: #fff; }
.hwx-item p { margin: 0; color: rgba(226,232,240,.92); }

/* Unified glassmorphism card style (applied to all cards) */
.hwx-card {
  position: relative;
  height: auto;
  width: 100%;
  border-radius: 24px; /* rounded-3xl */
  background: rgba(17,24,39,0.40); /* bg-gray-900/40 */
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  backdrop-filter: blur(24px) saturate(120%); /* blur-2xl */
  border: 1px solid rgba(255,255,255,0.10); /* border-white/10 */
  padding: 44px !important; /* unified outer padding to match card 4 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
  transition: transform 300ms ease, background-color 300ms ease, filter 300ms ease;
}
.hwx-card:hover { background: rgba(17,24,39,0.60); transform: scale(1.02); }

/* Force card to occupy full cell and use flex column layout */
.hwx-item > .hwx-card {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Professional reveal animation */
.reveal {
  --reveal-dur: 800ms;
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(.98);
  filter: blur(10px);
  transition:
    opacity var(--reveal-dur) ease,
    transform var(--reveal-dur) cubic-bezier(.22,1,.36,1),
    filter var(--reveal-dur) ease;
  transition-delay: var(--reveal-delay);
  will-change: transform, opacity, filter;
}
.reveal.show {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Reduced motion: disable transforms */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none !important; filter: none !important; transition: opacity 200ms ease; }
}

/* Always show full text: remove any clamps/heights from build CSS */
.section#deep-features .card .pro-paragraph,
.hwx-card p.pro-paragraph {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  line-clamp: unset !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* Remove extra header box behind the 2nd card title (Professional Summarization) */
.hwx-grid .hwx-item:nth-child(2) .hwx-card :is(div,section,article,header):not(.hwx-card):has(h3) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.hwx-grid .hwx-item:nth-child(2) .hwx-card :is(div,section,article,header):not(.hwx-card):has(h3)::before,
.hwx-grid .hwx-item:nth-child(2) .hwx-card :is(div,section,article,header):not(.hwx-card):has(h3)::after {
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.hwx-grid .hwx-item:nth-child(2) .hwx-card h3::before {
  content: none !important;
}

/* Also hide any element immediately preceding the h3 (the extra decorative box) */
.hwx-grid .hwx-item:nth-child(2) .hwx-card :not(h3):has(+ h3) {
  display: none !important;
}
/* Hide any preceding sibling of h3 within the card (not only immediate) */
.hwx-grid .hwx-item:nth-child(2) .hwx-card > :not(h3):has(~ h3) {
  display: none !important;
}
/* Remove pseudo-elements from those preceding siblings just in case */
.hwx-grid .hwx-item:nth-child(2) .hwx-card > :not(h3):has(~ h3)::before,
.hwx-grid .hwx-item:nth-child(2) .hwx-card > :not(h3):has(~ h3)::after {
  content: none !important;
}
/* Fallback: if the first child is not the title, hide it */
.hwx-grid .hwx-item:nth-child(2) .hwx-card > :first-child:not(h3) {
  display: none !important;
}