/* ============================================================
   Dock Scheduling Page (dockschedule.css) — CLEAN (no duplicates)
   + Edits: equal column width, right-align Chaos stack, pills/image width match,
            larger Chaos images to match Solution, arrow centered in container.
   ============================================================ */

:root{
  --compareWidth: 640px;     /* 🔧 shared width for pills + image groups */
  --chaosImgH: 260px;        /* 🔧 Chaos image height */
  --solutionImgH: 260px;     /* 🔧 Solution image height */
  --hotRed: #ff1f1f;
}

/* ================= Hero ================= */

.dock-hero{
  position: relative;
  padding: 3.5rem 0;
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;

  /* layered "digital" background */
  background:
    radial-gradient(900px 600px at 12% 20%, rgba(198,26,26,.18), transparent 60%),
    radial-gradient(900px 700px at 80% 35%, rgba(198,26,26,.10), transparent 62%),

    /* diagonal scan lines */
    repeating-linear-gradient(
      135deg,
      rgba(198,26,26,.09) 0px,
      rgba(198,26,26,.09) 1px,
      transparent 1px,
      transparent 18px
    ),

    /* subtle vertical grid */
    repeating-linear-gradient(
      to right,
      rgba(17,24,39,.05) 0px,
      rgba(17,24,39,.05) 1px,
      transparent 1px,
      transparent 28px
    ),

    /* base */
    linear-gradient(#ffffff, #f7f7f8);
}

/* Fade hero pattern into clean white bottom (helps transition) */
.dock-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:120px;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.95) 70%,
    rgba(255,255,255,1) 100%
  );
}

.dock-hero__grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
}

.dock-hero__copy h1{
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.05;
  margin: 0.5rem 0;
}


/* ============================
   Dock Hero Polish (SEO + UI)
   ============================ */

/* Constrain hero text width */
.hero-copy-wrap {
  max-width: 640px;
}

/* Eyebrow label pill */
.dock-hero .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.18);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Accent line under H1 */
.dock-hero__copy h1 {
  position: relative;
}

.dock-hero__copy h1::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  margin-top: 14px;
  background: linear-gradient(90deg, #dc2626, rgba(220,38,38,0));
  border-radius: 999px;
}

/* Hero paragraph polish */
.dock-hero .hero-lede {
  margin-top: 18px;
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(17, 24, 39, 0.74);
  max-width: 60ch;
}

/* Integration pill (reuse from YMS if not global) */
.integration-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1.4;
}

.integration-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-weight: 700;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.15);
  border-radius: 50%;
  flex-shrink: 0;
}

.integration-pill a {
  color: #dc2626;
  font-weight: 600;
  text-decoration: none;
}

.integration-pill a:hover {
  text-decoration: underline;
}






.dock-hero__copy .subtitle{
  max-width: 55ch;
  color: #4b5563;
}

.hero-actions{
  margin-top: 1.4rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Hero media card */
.dock-hero__media{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18);
  border: 4px solid var(--fls-red, #c61a1a);
}

.dock-hero__media img,
.dock-hero__media video{
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive hero */
@media (max-width: 900px){
  .dock-hero__grid{
    grid-template-columns: 1fr;
  }
  .dock-hero__media{
    order: -1;
  }
}

/* ================= Video Expand (Hero) ================= */

.demo-video{
  position: relative;
}

/* Expand button */
.demo-video__expand{
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,10,14,.65);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  z-index: 3;
}

.demo-video__expand:hover{
  background: rgba(10,10,14,.82);
}

/* Modal overlay */
.video-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.video-modal.is-open{
  display: block;
}

.video-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}

.video-modal__panel{
  position: relative;
  width: min(1100px, 92vw);
  margin: 6vh auto 0;
  background: #0b0b10;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  overflow: hidden;
}

.video-modal__panel video{
  width: 100%;
  height: auto;
  display: block;
  max-height: 80vh;
}

.video-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}


/* ================= Problem → Solution ================= */

.dock-problem{
  padding: 4rem 0;
  background: linear-gradient(
    180deg,
    rgba(198,26,26,0.06) 0%,
    rgba(198,26,26,0.10) 50%,
    rgba(198,26,26,0.06) 100%
  );
  border-top: 1px solid rgba(198,26,26,0.25);
}

.split-visuals{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center; /* centers arrow relative to the two stacks */
}

/* Big arrow */
.flow-arrow{
  align-self: center;            /* ✅ centers within grid row */
  justify-self: center;          /* ✅ centers in its column */
  font-size: 4rem;
  font-weight: 900;
  color: var(--fls-red, #c61a1a);
  letter-spacing: 0.3rem;
  opacity: 0.85;
  transform: translateY(0);
  animation: pulseArrow 2.5s ease-in-out infinite;
}

@keyframes pulseArrow{
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* Make both columns vertical stacks */
.problem-side,
.solution-side{
  display: flex;
  flex-direction: column;
}

/* ✅ Right-align the Chaos stack (toward center/right edge of its column) */
.problem-side{
  align-items: flex-end;
  text-align: left; /* keep pill text readable */
}

/* ✅ Keep Solution stack aligned left (toward center) */
.solution-side{
  align-items: flex-start;
  text-align: left;
}

/* Shared width for titles + pills + image groups (matches edges) */
.problem-side h2,
.solution-side h2,
.problem-side .pill-list,
.solution-side .pill-list,
.problem-images,
.solution-img{
  width: 100%;
  max-width: var(--compareWidth);
}

/* Titles */
.problem-side h2,
.solution-side h2{
  text-align: center;
  margin: 0 0 0.5rem;
  color: #111827;
}

/* ================= Pills (replace bullets) ================= */

.pill-list{
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0.5rem;

  display: grid;
  gap: 0.6rem;
}

.pill-list li{
  position: relative;
  padding: 0.65rem 0.9rem 0.65rem 3.0rem;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.18);
  background: rgba(255,255,255,0.55);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  color: #111827;
  line-height: 1.2;
  font-weight: 600;
}

/* icon “circle” on the left */
.pill-list li::before{
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
}

/* === Chaos (X) === */
.pill-list--bad li{
  border-color: rgba(255,31,31,0.35);
  background: rgba(255,255,255,0.40);
}

.pill-list--bad li::before{
  content: "✕";
  color: var(--hotRed);
  background: rgba(255,31,31,0.12);
  border: 1px solid rgba(255,31,31,0.35);
}

/* === Solution (✓) === */
.pill-list--good li{
  border-color: rgba(34,197,94,0.38);
  background: rgba(255,255,255,0.50);
}

.pill-list--good li::before{
  content: "✓";
  color: #22c55e;
  background: rgba(34,197,94,0.14);
  border: 1px solid rgba(34,197,94,0.38);
}

/* ================= Images ================= */

/* Problem: two equal-height image cards */
.problem-images{
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.problem-img{
  height: var(--chaosImgH);
  border-radius: 12px;
  overflow: hidden;
  border: 4px solid var(--hotRed);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.problem-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(40%) contrast(0.95);
  opacity: 0.85;
}

/* Solution: one full-width card like problem */
.solution-img{
  margin-top: 0.75rem;
  height: var(--solutionImgH);
  border-radius: 12px;
  overflow: hidden;
  border: 4px solid var(--hotRed);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

.solution-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive problem section */
@media (max-width: 900px){
  .split-visuals{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .flow-arrow{
    display: none;
  }
  .problem-side,
  .solution-side{
    align-items: center; /* stack center on mobile */
  }
  .problem-images{
    grid-template-columns: 1fr;
  }
  :root{
    --chaosImgH: 220px;
    --solutionImgH: 220px;
    --compareWidth: 100%;
  }
  .pill-list li{
    border-radius: 18px;
    padding-left: 2.8rem;
  }
}

/* ================= Benefits ================= */

.dock-benefits{
  background: #fafafa;
  padding: 3rem 0;
}

.benefit-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.benefit-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.25rem;
}

/* ================= Flow ================= */

.dock-flow{
  padding: 3rem 0;
}

.flow-steps{
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}

.flow-steps li{
  counter-increment: step;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.flow-steps li strong{
  display: inline;
  font-weight: 700;
}

.flow-steps li strong::before{
  content: counter(step) ". ";
  color: var(--fls-red, #c61a1a);
}

/* ================= CTA – Light Digital Style ================= */

.dock-cta{
  position: relative;
  padding: 3.5rem 0;
  color: #111827;
  overflow: hidden;

  background:
    /* subtle red glow */
    radial-gradient(900px 400px at 15% 50%, rgba(198,26,26,0.20), transparent 65%),
    radial-gradient(900px 400px at 85% 50%, rgba(198,26,26,0.15), transparent 65%),

    /* diagonal digital lines */
    repeating-linear-gradient(
      135deg,
      rgba(198,26,26,0.08) 0px,
      rgba(198,26,26,0.08) 1px,
      transparent 1px,
      transparent 18px
    ),

    /* base */
    linear-gradient(
      180deg,
      #fff 0%,
      #f9fafb 100%
    );

  border-top: 1px solid rgba(198,26,26,0.25);
}

/* Inner CTA layout */
.dock-cta .cta{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
}

/* Headline */
.dock-cta h2{
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 0.35rem;
  color: #111827;
}

/* Subtext */
.dock-cta p{
  color: #374151;
  font-size: 1.05rem;
  max-width: 52ch;
}

/* CTA Button */
.dock-cta .btn.primary{
  background: linear-gradient(
    135deg,
    #c61a1a,
    #ff3b3b
  );
  border: none;
  box-shadow: 0 18px 40px rgba(198,26,26,0.35);
  padding: 0.9rem 1.6rem;
  font-weight: 700;
}

.dock-cta .btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 55px rgba(198,26,26,0.45);
}

/* Mobile */
@media (max-width: 900px){
  .dock-cta .cta{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .dock-cta p{
    margin-left: auto;
    margin-right: auto;
  }
}







/* Operational impact: 4-up grid */
.benefit-grid--4{
  grid-template-columns: repeat(4, 1fr);
}

.benefit-card h3{
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.benefit-card h3 i{
  color: var(--fls-red, #c61a1a);
}

/* Responsive */
@media (max-width: 1100px){
  .benefit-grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .benefit-grid--4{ grid-template-columns: 1fr; }
}


/* Operational Impact – red bordered cards */
.benefit-card{
  border: 2px solid rgba(198,26,26,0.35); /* Fidelis red */
  box-shadow: 0 10px 30px rgba(198,26,26,0.12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Hover lift (optional but recommended) */
.benefit-card:hover{
  transform: translateY(-4px);
  border-color: #c61a1a;
  box-shadow: 0 18px 45px rgba(198,26,26,0.25);
}

/* Icon emphasis */
.benefit-card h3 i{
  color: #c61a1a;
}



.dock-define {
  padding: 34px 0 10px;
}

.dock-define h2 {
  margin: 0 0 10px;
}

.dock-define p {
  margin: 0;
  max-width: 78ch;
  color: rgba(17, 24, 39, 0.74);
  line-height: 1.7;
}
/* ============================
   CTA Pricing Pill
   ============================ */

.cta-pricing-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  max-width: 520px;
  background: rgba(220, 38, 38, 0.05);
  border: 1px dashed rgba(220, 38, 38, 0.18);
  border-radius: 999px;
  font-size: 0.92rem;
  line-height: 1.4;
}

.cta-pricing-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-weight: 700;
  font-size: 0.8rem;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
  border-radius: 50%;
  flex-shrink: 0;
}

.cta-pricing-pill p {
  margin: 0;
}

.cta-pricing-pill a,
.cta-pricing-pill a:visited {
  color: #dc2626;
  font-weight: 600;
  text-decoration: none;
}

.cta-pricing-pill a:hover {
  text-decoration: underline;
}