/* ---------- FORCE-FILL + CLIP (paste after other CSS) ---------- */
  .video-wrapper {
    position: relative !important;        /* wrapper must be positioning context */
    width: 100% !important;
    aspect-ratio: 16 / 9;                 /* preferred */
    min-height: 200px;                    /* safety net so it never collapses too small */
    background: #000 !important;          /* black so no white shows through */
    overflow: hidden !important;          /* <--- important: hides player chrome overflow */
    border-radius: 1rem !important;       /* match rounded-4 (adjust if needed) */
    padding: 0 !important;
  }

  /* Make thumbnail fill and be covered */
  .video-wrapper img {
    position: absolute !important;
    inset: 0 !important;                  /* top:0;right:0;bottom:0;left:0 */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    border: 0 !important;
    z-index: 1;
  }

  /* Make injected iframe fill and be clipped exactly like the thumbnail */
  .video-wrapper iframe,
  .video-wrapper .yt-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
    z-index: 0;
  }

  /* keep play button above everything */
  .video-wrapper .play-button { z-index: 2; pointer-events: none; }

  /* Optional extra: if a thin white gap persists from some parent background,
    this places a black strip at bottom to mask it. Usually not needed. */
  .video-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(#000, rgba(0,0,0,0)) ;
    pointer-events: none;
    z-index: 3;
  }

/* Perfect center alignment */
.play-button {
  pointer-events: none;
  z-index: 5;
}

/* Desktop size */
.play-icon {
  font-size: 90px;
}

/* Tablet */
@media (max-width: 992px) {
  .play-icon {
    font-size: 70px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .play-icon {
    font-size: 50px;
  }
}
  
/* Light one-off styles to improve layout while keeping your theme */
.embed-hero {
  padding: 64px 20px;
  text-align:center;
  background: linear-gradient(135deg, rgba(88,64,255,0.06), rgba(46,200,255,0.03));
  border-radius: 12px;
  margin-bottom: 28px;
}
.embed-hero h1 { font-size: 36px; margin: 0 0 12px; }
.embed-hero p.lead { max-width:760px; margin:0 auto 18px; color: #444; line-height:1.6; }
.app-buttons img { height:44px; margin-right:12px; vertical-align:middle; }

.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:24px; }
.feature-card { background: #fff; border-radius:10px; padding:18px; box-shadow:0 6px 18px rgba(20,20,40,0.04); display:flex; gap:12px; align-items:flex-start; }
.feature-icon { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg,#6f5cff,#2ec8ff); color:white; font-weight:700; }

.screens-row { display:flex; gap:18px; align-items:center; justify-content:center; margin-top:26px; flex-wrap:wrap; }
.screen-thumb { width:320px; max-width:45%; border-radius:10px; box-shadow:0 8px 30px rgba(15,15,40,0.06); overflow:hidden; background:#000; }
.code-sample { background:#0b1220; color:#e6f2ff; padding:16px; border-radius:8px; font-family: monospace; font-size:13px; line-height:1.5; overflow:auto; }
.cta-block { text-align:center; margin:28px 0; }
.faq { max-width:900px; margin: 0 auto; }
.faq-item { border-bottom:1px solid #eee; padding:12px 0; }
.faq-question { cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-answer { display:none; padding-top:8px; color:#444; }
.copy-btn { background:transparent; border:1px solid rgba(255,255,255,0.14); color:inherit; padding:6px 8px; border-radius:6px; cursor:pointer; }
@media (max-width:720px){ .embed-hero h1{font-size:28px} .screen-thumb{max-width:90%} }