/* Page-specific styles for healthcare.html — everything else is Tailwind utilities. */

/* Tailwind's default spacing scale only has half-steps at 0.5/1.5/2.5/3.5 —
   values like w-6.5, gap-4.5, py-5.5 don't exist as generated utilities and
   silently no-op. These fill in the missing half-steps (4.5–9.5) actually
   used on this page, at Tailwind's own 0.25rem-per-step rate. */
.gap-4\.5 { gap: 1.125rem; }
.gap-5\.5 { gap: 1.375rem; }
.gap-6\.5 { gap: 1.625rem; }
.gap-7\.5 { gap: 1.875rem; }
.gap-8\.5 { gap: 2.125rem; }
.gap-9\.5 { gap: 2.375rem; }

.w-4\.5 { width: 1.125rem; }
.w-5\.5 { width: 1.375rem; }
.w-6\.5 { width: 1.625rem; }
.w-7\.5 { width: 1.875rem; }
.w-8\.5 { width: 2.125rem; }
.w-9\.5 { width: 2.375rem; }

.h-4\.5 { height: 1.125rem; }
.h-5\.5 { height: 1.375rem; }
.h-6\.5 { height: 1.625rem; }
.h-7\.5 { height: 1.875rem; }
.h-8\.5 { height: 2.125rem; }
.h-9\.5 { height: 2.375rem; }

.m-4\.5 { margin: 1.125rem; }
.m-5\.5 { margin: 1.375rem; }
.m-6\.5 { margin: 1.625rem; }
.mt-4\.5 { margin-top: 1.125rem; }
.mt-5\.5 { margin-top: 1.375rem; }
.mt-6\.5 { margin-top: 1.625rem; }
.mb-4\.5 { margin-bottom: 1.125rem; }
.mb-5\.5 { margin-bottom: 1.375rem; }
.mb-6\.5 { margin-bottom: 1.625rem; }
.mb-7\.5 { margin-bottom: 1.875rem; }
.ml-4\.5 { margin-left: 1.125rem; }
.mr-4\.5 { margin-right: 1.125rem; }
.mx-4\.5 { margin-left: 1.125rem; margin-right: 1.125rem; }
.my-4\.5 { margin-top: 1.125rem; margin-bottom: 1.125rem; }

.p-4\.5 { padding: 1.125rem; }
.p-5\.5 { padding: 1.375rem; }
.p-6\.5 { padding: 1.625rem; }
.p-7\.5 { padding: 1.875rem; }
.pt-4\.5 { padding-top: 1.125rem; }
.pb-4\.5 { padding-bottom: 1.125rem; }
.pb-5\.5 { padding-bottom: 1.375rem; }
.pl-4\.5 { padding-left: 1.125rem; }
.pr-4\.5 { padding-right: 1.125rem; }
.px-4\.5 { padding-left: 1.125rem; padding-right: 1.125rem; }
.px-5\.5 { padding-left: 1.375rem; padding-right: 1.375rem; }
.px-6\.5 { padding-left: 1.625rem; padding-right: 1.625rem; }
.py-4\.5 { padding-top: 1.125rem; padding-bottom: 1.125rem; }
.py-5\.5 { padding-top: 1.375rem; padding-bottom: 1.375rem; }
.py-6\.5 { padding-top: 1.625rem; padding-bottom: 1.625rem; }

/* Soft mockup-panel placeholder used inside app/portal previews */
.hc-ph {
  background-image: repeating-linear-gradient(45deg, var(--color-brand-50) 0px, var(--color-brand-50) 12px, var(--color-brand-100) 12px, var(--color-brand-100) 24px);
}
.hc-ph-sm {
  background-image: repeating-linear-gradient(45deg, #f2f4f7 0px, #f2f4f7 8px, #eceff3 8px, #eceff3 16px);
}

/* Reveal / typing animations, shared naming with the ecommerce page for consistency */
@keyframes hc-slide-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hc-pop { 0% { opacity: 0; transform: scale(.85); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hc-typing-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.hc-reveal { animation: hc-slide-in .45s ease both; }
.hc-reveal-pop { animation: hc-pop .5s ease both; }
.hc-reveal-delay-1 { animation-delay: .7s; }
.hc-reveal-delay-2 { animation-delay: 1.5s; }
.hc-reveal-delay-3 { animation-delay: 3s; }
.hc-reveal-delay-4 { animation-delay: 3.8s; }
.hc-typing-dot { animation: hc-typing-dot 1.2s infinite; }
.hc-typing-dot:nth-child(2) { animation-delay: .15s; }
.hc-typing-dot:nth-child(3) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .hc-ph, .hc-ph-sm { background-image: none; }
  .hc-reveal, .hc-reveal-pop, .hc-typing-dot { animation: none !important; }
}

/* ============================================================
   Premium visual polish layer — additive only, no layout changes.
   Note: never set `position` on an element that already carries a
   Tailwind position utility (absolute/relative) — a class selector
   here has higher specificity than a single Tailwind utility class
   and will silently override it, breaking layout (learned the hard way).
   ============================================================ */

/* soft dot-grid mesh, radially masked — applied to elements that are
   already `absolute inset-0` via Tailwind, so no position set here */
.hc-mesh-dots{
  background-image:radial-gradient(circle at 1px 1px, rgba(94,119,161,.14) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 30%, #000 35%, transparent 100%);
  mask-image:radial-gradient(ellipse 65% 60% at 50% 30%, #000 35%, transparent 100%);
}

/* soft grid lines for the dark patient-journey section */
.hc-grid-lines{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 35%, #000 25%, transparent 100%);
  mask-image:radial-gradient(ellipse 75% 75% at 50% 35%, #000 25%, transparent 100%);
}

/* gradient-ring hover for flat bordered cards (All You Need / Secure & Compliant) */
.hc-card-hover{position:relative;transition:transform .25s ease, box-shadow .25s ease;}
.hc-card-hover:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(38,48,65,.35);}
.hc-card-hover::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg, var(--color-brand-100), rgba(169,186,212,0) 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.hc-card-hover:hover::before{opacity:1;}

/* animated sweeping highlight along the patient-journey connector lines */
.hc-flow-connector{overflow:hidden;}
.hc-flow-connector::after{
  content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg, transparent, rgba(94,119,161,.9), transparent);
  animation:hc-flow-sweep 3.4s linear infinite;
}
@keyframes hc-flow-sweep{0%{transform:translateX(-140%);}100%{transform:translateX(350%);}}

/* glow pulse behind the Knowledge Engine badge */
.hc-glow-badge{position:relative;}
.hc-glow-badge::after{
  content:"";position:absolute;inset:-16px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, rgba(94,119,161,.3), transparent 70%);
  filter:blur(18px);animation:hc-glow-pulse 4.5s ease-in-out infinite;
}
@keyframes hc-glow-pulse{0%,100%{opacity:.55;}50%{opacity:1;}}

@media (prefers-reduced-motion: reduce) {
  .hc-flow-connector::after, .hc-glow-badge::after { animation: none !important; }
}

/* ============================================================
   #features — vertical tabs at >=1024px, accordion below it.
   One markup tree serves both: every .hc-feat-item is a header
   plus a body. Below 1024px the item is a self-contained card and
   the body collapses; at 1024px and up .hc-feat becomes a grid,
   the items go `display:contents`, headers stack in column 1 and
   the open body fills column 2 as the panel card.
   ============================================================ */

.hc-feat-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  font: inherit;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hc-feat-chev { flex: none; color: #94a3b8; transition: transform .3s ease, color .2s ease; }
.hc-feat-item.is-open > .hc-feat-head-wrap .hc-feat-chev { transform: rotate(180deg); color: var(--color-brand); }

.hc-feat-body { overflow: hidden; }
.hc-feat-inner { padding: 2px 18px 20px; }

/* ---------- accordion: below 1024px ---------- */
@media (max-width: 1023.98px) {
  .hc-feat { display: flex; flex-direction: column; gap: 12px; }

  .hc-feat-item {
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 14px 30px -26px rgba(23, 29, 38, 0.4);
  }

  .hc-feat-body { max-height: 0; opacity: 0; }
  .hc-feat-item.is-open > .hc-feat-body { opacity: 1; }

  /* transitions only after the first measure, so nothing animates on load */
  .hc-feat-ready .hc-feat-body {
    transition: max-height .38s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
  }
}

/* ---------- tabs: 1024px and up ---------- */
@media (min-width: 1024px) {
  .hc-feat {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 36px;
    row-gap: 6px;
    /* One row per header (there are five) plus a trailing flexible row.
       The panel spans every row, and because it crosses a flexible (1fr)
       track the spec keeps it from stretching the five header rows — so the
       leftover panel height lands in the last row and the headers stay
       at their natural pitch. */
    grid-template-rows: repeat(5, min-content) 1fr;
    align-content: start;
  }

  .hc-feat-item { display: contents; }

  .hc-feat-head-wrap { grid-column: 1; align-self: start; }

  .hc-feat-head { font-weight: 700; color: #62748e; }
  .hc-feat-head:hover { color: #0f172a; }
  .hc-feat-item.is-open > .hc-feat-head-wrap .hc-feat-head {
    background: #fff;
    border-color: var(--color-line);
    color: #0f172a;
    font-weight: 800;
    box-shadow: 0 10px 24px -14px rgba(23, 29, 38, 0.2);
  }

  .hc-feat-chev { display: none; }

  .hc-feat-body {
    grid-column: 2;
    grid-row: 1 / -1;
    max-height: none;
    opacity: 1;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 24px;
    box-shadow: 0 26px 56px -34px rgba(23, 29, 38, 0.2);
  }
  .hc-feat-item:not(.is-open) > .hc-feat-body { display: none; }

  .hc-feat-inner { padding: 36px; }
}

@media (max-width: 475px) {
    .ctaButtons a {width: 100%; text-align: center;}
}