/* Homepage carousels */
.fb-post-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  height: 340px;
  display: flex;
  flex-direction: column;
}
.fb-post-card img {
  width: 100%;
  border-radius: 6px;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.fb-post-card p {
  margin: 6px 0 0;
  font-size: .95rem;
  color: #374151;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.engagement { font-size: .85rem; color: #6b7280; margin-top: auto; }
.pilot-logo { max-width: 120px; filter: grayscale(100%); transition: filter .3s; }
.pilot-logo:hover { filter: grayscale(0%); }

/* Utilities for Pipeline Demo */
.small{font-size:14px}
.xsmall{font-size:12px}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* FB-like card */
.fb-card{background:#F9FAFB;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 3px 14px rgba(17,24,39,.05)}
.avatar-initial{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#4F46E5,#06B6D4);color:#fff;font-weight:700;font-size:14px}
.media-16x9{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#f3f4f6}
.media-16x9 img{width:100%;height:100%;object-fit:cover;display:block}
.wm-badge{position:absolute;right:8px;bottom:8px;background:rgba(17,24,39,.72);color:#fff;font-size:10px;border-radius:999px;padding:4px 8px}

/* Stepper */
.pipeline-steps{list-style:none;padding-left:0;margin:0}
.pipeline-steps li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed #e5e7eb}
.pipeline-steps li:last-child{border-bottom:none}
.pipeline-steps .dot{width:10px;height:10px;border-radius:50%;background:#d1d5db;display:inline-block}
.pipeline-steps li.is-active .dot{background:#111827}
.pipeline-steps li.is-done .dot{background:#06b6d4}
.pipeline-steps .meta{margin-left:auto;color:#6b7280;font-size:12px}

/* Controls */
/* Inline day pills (visual only) */
.days-inline{display:flex;flex-wrap:wrap;gap:.5rem}
.day-pill{position:relative}
.day-pill input{position:absolute;inset:0;opacity:0}
.day-pill span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:32px;padding:0 .8rem;border-radius:999px;font-weight:600;transition:background .15s,color .15s}
.day-pill input:checked + span{background:#d1e7dd;color:#0f5132}
.day-pill input:not(:checked) + span{background:#f8d7da;color:#842029}
.day-pill input:focus-visible + span{box-shadow:0 0 0 2px rgba(79,70,229,.25)}

/* Timeline chips */
.timeline-chips{display:flex;flex-wrap:wrap;gap:8px}
.timeline-chips .chip{background:#111827;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px}

/* Inline video player + cinema backdrop */
.inline-video{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(900px,92vw);max-height:84vh;z-index:1050}
.inline-video[hidden]{display:none}
.inline-video-inner{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35);max-height:84vh;background:#000}
.inline-video-inner video{display:block;width:100%;height:auto;max-height:84vh}
.btn-close-video{position:absolute;right:8px;top:8px;z-index:2;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:50%;width:32px;height:32px;line-height:28px;text-align:center;font-size:20px}
.btn-close-video:hover{background:rgba(0,0,0,.8)}
.cinema-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:saturate(90%) blur(1px);z-index:1040;opacity:0;transition:opacity .2s ease}
.cinema-backdrop.show{opacity:1}

/* ------------------------------ */
/* Modern buttons and tabs (site) */
/* ------------------------------ */

:root{
  --sp-indigo: #4F46E5;
  --sp-indigo-600:#4338CA;
  --sp-teal:   #06B6D4;
  --sp-dark:   #111827;
  --sp-muted:  #6B7280;
  --sp-border: #E5E7EB;
  --sp-bg:     #F9FAFB;
  --sp-radius: 999px;
  --sp-shadow: 0 6px 16px rgba(17,24,39,.10);
  --sp-shadow-sm: 0 2px 6px rgba(17,24,39,.08);
}

/* Base button */
.btn{
  border-radius: var(--sp-radius);
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: .2px;
  padding: .6rem 1rem;
  box-shadow: var(--sp-shadow-sm);
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(79,70,229,.25), var(--sp-shadow);
}

/* Primary (indigo) */
.btn-primary{
  background: linear-gradient(180deg, var(--sp-indigo) 0%, var(--sp-indigo-600) 100%);
  border-color: var(--sp-indigo-600);
  color: #fff;
}
.btn-primary:hover{ filter: saturate(1.05) brightness(1.02); box-shadow: var(--sp-shadow); }

/* Outline secondary */
.btn-outline-secondary{
  background: #fff;
  border-color: var(--sp-border);
  color: var(--sp-dark);
}
.btn-outline-secondary:hover{ border-color: var(--sp-indigo); color: var(--sp-indigo); box-shadow: var(--sp-shadow-sm); }

/* Ghost */
.btn-ghost{
  background: transparent;
  color: var(--sp-indigo);
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover{ color: var(--sp-indigo-600); background: rgba(79,70,229,.06); }

/* Sizes */
.btn-sm{ padding: .45rem .8rem; font-weight: 600; }
.btn-lg{ padding: .8rem 1.25rem; font-size: 1rem; }

/* Disabled */
.btn:disabled, .btn.disabled{ opacity: .6; box-shadow: none; transform: none; }

/* Icon spacing */
.btn [class^="bi-"], .btn svg{ margin-right: .35rem; }

/* Segmented nav pills for demo tabs */
#demoTabs{ gap:.5rem }
#demoTabs .nav-link{
  border: 1px solid var(--sp-border);
  background: #fff;
  color: var(--sp-dark);
  border-radius: var(--sp-radius);
  padding: .55rem 1rem;
  font-weight: 600;
  box-shadow: var(--sp-shadow-sm);
}
#demoTabs .nav-link.active{
  border-color: var(--sp-indigo);
  color:#fff;
  background: linear-gradient(180deg, var(--sp-indigo) 0%, var(--sp-indigo-600) 100%);
  box-shadow: var(--sp-shadow);
}
#demoTabs .nav-link:focus-visible{ box-shadow: 0 0 0 3px rgba(79,70,229,.25), var(--sp-shadow-sm); }

/* legacy day-chip styles removed in favor of segmented */


/* Fixed header offset for site pages */
.has-fixed-header main.container{ padding-top: 80px; }

/* Prevent anchor targets from hiding under the fixed header */
#hero, #demo, #demorun, #how-it-works, #features, #pricing, #faq { scroll-margin-top: 88px; }

/* Ensure space below sticky header */

/* Sticky header UX improvements */
@media (min-width: 992px){
  .navbar.fixed-top{
    min-height: 80px;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(120%) blur(8px);
  }
  .navbar.fixed-top::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -80px;
    height: 80px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,.97), rgba(255,255,255,0));
  }
}