/* Pilot page: How It Works styles */
#how {
  background: #17171a;
  color: #ffffff;
  padding: 60px 0;
}

/* Header row: title left, subtitle right on wide screens */
.how-header {
  display: flex;
  flex-direction: column; /* stack title and subtitle */
  align-items: flex-start;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto 18px;
}

#how .section-title {
  color: #ffffff;
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 6px 0;
}

#how .section-sub {
  color: rgba(255,255,255,0.92);
  margin: 0;
  font-size: 16px;
  max-width: 1000px;
  text-align: left; /* subtitle beneath title */
}


/* Steps row */
#how .steps {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

#how .step-card {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 18px;
  box-sizing: border-box;
  flex: 0 0 calc(25% - 15px);
  max-width: calc(25% - 15px);
  text-align: center;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.03);
}

#how .step-card img {
  width: 100%;
  height: 160px; /* ensure equal image height */
  object-fit: contain;
  display: block;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.02);
  padding: 12px;
  border-radius: 8px;
}

#how .step-title {
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  font-size: 16px;
}

#how .step-text {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
}

/* Make bullets centered under each image (already text-align center on card) */

/* Responsive breakpoints */
@media (max-width: 991px) {

  #how .step-card {
    flex: 1 1 45%;
    max-width: 45%;
    min-height: 320px;
  }
}

@media (max-width: 575px) {
  #how .step-card {
    flex: 1 1 100%;
    max-width: 100%;
    min-height: auto;
  }
  #how .section-sub {
    text-align: center;
  }
}

/* Desktop / large screens: ensure four items in a row */
@media (min-width: 1200px) {
  /* ensure 4 cards per row on wide screens */
  #how .step-card { flex: 0 0 calc(25% - 15px); max-width: calc(25% - 15px); }
}

/* medium screens: three per row */
@media (max-width: 1199px) and (min-width: 992px) {
  #how .step-card { flex: 0 0 calc(33.333% - 14px); max-width: calc(33.333% - 14px); }
}

/* tablet: two per row */
@media (max-width: 991px) and (min-width: 576px) {
  #how .step-card { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
}

/* Small adjustments for other inserted sections */
#benefits, #details, #winwin, .guarantee {
  padding: 40px 0;
}

/* promo badges */
.promo-badges { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.promo-badge { background: rgba(0,0,0,0.25); color:#fff; padding:12px 16px; border-radius:8px; }

/* media-split layout small tweaks */
.media-split { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.media-split .media-box { flex:1 1 48%; }
.media-split > div { flex:1 1 48%; }
@media (max-width: 768px) {
  .media-split { flex-direction:column; }
  .media-split .media-box, .media-split > div { flex:1 1 100%; }
}

/* ------------------------------------------------------------------ */
/* Additional sections styled to match the 'How It Works' visual tone */
/* ------------------------------------------------------------------ */

/* Guarantee box: prominent centered card */
.guarantee {
  background: #2a2a2e;
  color: #fff;
  padding: 48px 0;
}
.guarantee .guarantee-box {
  max-width: 980px;
  margin: 0 auto;
  background: rgba(255,255,255,0.02);
  border-radius: 14px;
  padding: 34px 32px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center; /* center content like the screenshot */
}
.guarantee-title {
  /* keep title color consistent with other sections (inherited white) */
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  color: inherit;
}
.guarantee-text, .guarantee-note {
  color: rgba(255,255,255,0.9);
  margin: 8px auto;
  line-height: 1.6;
  max-width: 920px;
}
.guarantee .guarantee-box strong { font-weight: 800; color: #fff; }

/* Benefits area: two-column card grid similar tone to steps */
#benefits {
  background: #17171a;
  color: #fff;
  padding: 48px 0 30px;
}

/* Title and subtitle */
#benefits .section-title {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 8px;
}
#benefits .section-sub {
  color: rgba(255,255,255,0.88);
  margin-bottom: 22px;
  font-size: 15px;
}

.grid-2 {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.grid-2 .card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
  padding: 22px 20px;
  border-radius: 12px;
  flex: 0 0 calc(50% - 11px);
  max-width: calc(50% - 11px);
  color: rgba(255,255,255,0.97);
  min-height: 160px;
}
.grid-2 .card h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #ffffff;
  font-weight: 800;
}
.grid-2 .list {
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.95);
}
.grid-2 .list li { margin-bottom: 8px; }

@media (max-width: 767px) {
  .grid-2 .card { flex: 1 1 100%; max-width: 100%; }
}

/* Pilot details area: badges and specs styled as compact cards */
#details {
  background: #2a2a2e;
  color: #fff;
  padding: 48px 0;
}
.promo-badges { margin-bottom: 14px; }
.promo-badge { background: rgba(255,255,255,0.03); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.06); display:inline-block; font-size:14px; }
.promo-badge strong { font-weight:700; margin-right:6px; }
.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.spec {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 70px;
}
.spec .label { color: rgba(255,255,255,0.7); font-size: 13px; margin-bottom: 6px; display:block; text-align:center; }
.spec .value { color: #fff; font-weight:700; font-size:15px; }

@media (max-width: 992px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .specs { grid-template-columns: 1fr; }
}

/* Dimensions image box */
.media-box .card img, #dimensionsImage { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.45); }

/* Dashed container around the dimensions image to match screenshot */
.media-box {
  border: 1px dashed rgba(255,255,255,0.06);
  padding: 18px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Important note bar in details */
#details .card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 12px 14px;
  border-radius: 8px;
  color: rgba(255,255,255,0.95);
}

/* Robot size segmented control */
.segmented { display:inline-flex; gap:8px; background: rgba(255,255,255,0.02); padding:6px; border-radius:999px; border:1px solid rgba(255,255,255,0.03); align-items:center; }
.segmented input { display:none; }
.segmented label { cursor:pointer; padding:8px 14px; border-radius:999px; color: rgba(255,255,255,0.95); background: transparent; font-weight:700; }
.segmented input:checked + label { background: #ffcf00; color: #111; }
.segmented .segmented-highlight { display:none; }

/* Left column: make the size label and fit-notes look like screenshot */
#details .h3-tight { font-size:16px; margin-bottom:12px; color:#fff; font-weight:700; }
#details .fit-notes { background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); padding:12px; border-radius:8px; color:rgba(255,255,255,0.9); }

/* Win-win callout: similar to guarantee but more prominent */
#winwin {
  background: #17171a;
  color: #fff;
  padding: 48px 0;
}
.promo-callout {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255,255,255,0.02);
  border-radius: 14px;
  padding: 34px 36px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 30px rgba(0,0,0,0.55), 0 0 40px rgba(255,205,0,0.03);
  text-align: center;
}
.promo-callout .section-title { margin-bottom: 10px; font-size: 28px; font-weight:800; color: inherit; }

/* center the heading and give it a small rounded card look */
.promo-callout .section-title {
  text-align: center !important;
  display: inline-block;
  background: rgba(0,0,0,0.12);
  padding: 10px 18px;
  border-radius: 10px;
  margin: 0 auto 14px;
}
.winwin-text { color: rgba(255,255,255,0.9); line-height:1.6; margin:0 auto; max-width:920px; }

/* small utility: keep section subtitles consistent */
.section-sub { font-size: 15px; color: rgba(255,255,255,0.9); }

/* Make the entire blog/video section dark to match the site theme */
.ud-blog-details {
  background-color: #2a2a2e;
  color: #ffffff;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Ensure the inner image/video wrapper doesn't force a white background */
.ud-blog-details .ud-blog-details-image,
.ud-blog-details .hero-media,
.ud-blog-details .video-wrap {
  background: transparent;
}

/* Make sure content and sidebar text is visible on dark bg */
.ud-blog-details .ud-blog-details-content,
.ud-blog-details .ud-blog-sidebar {
  color: #ffffff;
}

/* Newsletter box should keep its card look but sit on dark bg */
.ud-newsletter-box { background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); }

/* Force all descendant text in the blog/video section to white to avoid accidental overrides */
.ud-blog-details, .ud-blog-details * {
  color: #ffffff !important;
}

/* Keep links readable but white as well */
.ud-blog-details a { color: #ffffff !important; }

/* Ensure Pilot Details section text is white (titles, badges, specs, coverage) */
#details, #details * {
  color: #ffffff !important;
}
#details a { color: #ffffff !important; }
#coverageBlurb { color: #ffffff !important; }