/* Shield product clips (Views/Shared/_ShieldClip.cshtml). Works on the light
   and dark sections of the Shield pages: text inherits the section color. */
.shield-clip { margin: 0; display: grid; gap: .85rem; }
.shield-clip-frame {
  position: relative; padding: 1px; border-radius: 1.15rem;
  background: linear-gradient(135deg, rgba(14,165,233,.58), rgba(99,102,241,.5), rgba(148,163,184,.2));
  box-shadow: 0 24px 65px rgba(15,23,42,.22);
}
.shield-clip-video {
  display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 16 / 9;
  border-radius: calc(1.15rem - 1px); background: #061126;
}
.shield-clip-play {
  /* Bottom-left, clear of each clip's headline and highlighted element.
     Shown only once shield-clips.js has taken over (no-JS keeps native controls). */
  display: none; position: absolute; z-index: 2; left: 4.5%; bottom: 7%;
  align-items: center; gap: .7rem; min-height: 52px; padding: .6rem 1rem .6rem .65rem;
  color: #0f2741; background: rgba(255,255,255,.95); border: 1px solid rgba(255,255,255,.82); border-radius: 999px;
  box-shadow: 0 14px 38px rgba(2,6,23,.32); cursor: pointer;
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.shield-clip.is-enhanced .shield-clip-play { display: flex; }
.shield-clip-play:hover { transform: translateY(-2px); box-shadow: 0 18px 45px rgba(2,6,23,.42); }
.shield-clip-play:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
.shield-clip-play-icon {
  display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #6366f1); border-radius: 50%; font-size: 1.1rem;
}
.shield-clip-play-copy { display: grid; gap: .1rem; text-align: left; line-height: 1.15; }
.shield-clip-play-copy strong { font-size: .8rem; font-weight: 800; }
.shield-clip-play-copy small { color: #64748b; font-size: .66rem; font-weight: 700; }
.shield-clip.is-playing .shield-clip-play { visibility: hidden; opacity: 0; pointer-events: none; }
.shield-clip-caption { display: grid; gap: .45rem; font-size: .86rem; line-height: 1.6; opacity: .85; }
.shield-clip-transcript summary { cursor: pointer; font-weight: 700; width: fit-content; }
.shield-clip-transcript summary:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; border-radius: 4px; }
.shield-clip-transcript ol { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
@media (max-width: 575px) {
  .shield-clip-play { min-height: 44px; padding: .45rem .8rem .45rem .45rem; }
  .shield-clip-play-icon { width: 30px; height: 30px; flex-basis: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .shield-clip-play, .shield-clip-play:hover { transition: none; transform: none; }
}

/* Launcher card: the same container as the homepage's
   "NEW · FindIP Shield · Free Preview" video (Views/Home/Index.cshtml). */
.shield-clip-card {
  position: relative; overflow: hidden; border-radius: 1.35rem;
  box-shadow: 0 30px 80px rgba(2,6,23,.45);
}
.shield-clip-launch, .shield-clip-poster { display: block; width: 100%; }
.shield-clip-launch {
  position: relative; padding: 0; overflow: hidden; cursor: pointer;
  background: #061126; border: 1px solid rgba(148,163,184,.22); border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.shield-clip-poster { height: auto; aspect-ratio: 16 / 9; transition: transform .35s ease, filter .35s ease; }
.shield-clip-launch:hover .shield-clip-poster { filter: brightness(.82); transform: scale(1.008); }
.shield-clip-pill {
  position: absolute; left: 50%; top: 73%; display: flex; min-width: 260px; min-height: 64px;
  align-items: center; gap: .7rem; padding: .55rem 1.05rem .55rem .6rem;
  color: #071426; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.78); border-radius: 999px;
  box-shadow: 0 16px 44px rgba(2,6,23,.45), 0 0 0 7px rgba(103,232,249,.1);
  transform: translate(-50%, -50%); transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  pointer-events: none;
}
.shield-clip-pill-icon {
  display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed); border-radius: 50%;
  box-shadow: 0 8px 22px rgba(79,70,229,.34); font-size: 1.35rem;
}
.shield-clip-pill-icon i { margin-left: 2px; }
.shield-clip-pill-copy { display: grid; gap: .08rem; text-align: left; line-height: 1.2; }
.shield-clip-pill-copy strong { font-size: .92rem; font-weight: 900; white-space: nowrap; }
.shield-clip-pill-copy small { color: #526076; font-size: .7rem; font-weight: 700; }
.shield-clip-launch:hover .shield-clip-pill, .shield-clip-launch:focus-visible .shield-clip-pill {
  background: #fff; box-shadow: 0 20px 54px rgba(2,6,23,.55), 0 0 0 9px rgba(103,232,249,.2);
  transform: translate(-50%, -50%) scale(1.045);
}
.shield-clip-launch:focus-visible { outline: 3px solid #67e8f9; outline-offset: 4px; }

/* The dialog, as the homepage's. */
.shield-clip-dialog {
  width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 24px);
  padding: 0; overflow: hidden; color: #f8fafc; background: #061126;
  border: 1px solid rgba(148,163,184,.3); border-radius: 1.25rem; box-shadow: 0 35px 110px rgba(2,6,23,.72);
}
.shield-clip-dialog::backdrop { background: rgba(2,6,23,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.shield-clip-dialog-header, .shield-clip-dialog-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem;
}
.shield-clip-dialog-header { border-bottom: 1px solid rgba(148,163,184,.18); }
.shield-clip-dialog-header h2 { margin: 0; color: #fff; font-size: 1rem; font-weight: 800; }
.shield-clip-dialog-close {
  display: grid; width: 36px; height: 36px; padding: 0; place-items: center; color: #cbd5e1;
  background: rgba(255,255,255,.06); border: 1px solid rgba(148,163,184,.18); border-radius: .65rem; font-size: 1.35rem;
}
.shield-clip-dialog-close:hover, .shield-clip-dialog-close:focus-visible { color: #fff; background: rgba(255,255,255,.11); }
.shield-clip-dialog-video {
  display: block; width: 100%; height: auto; max-height: calc(100vh - 158px); object-fit: contain; background: #061126;
}
.shield-clip-dialog-footer { color: #94a3b8; border-top: 1px solid rgba(148,163,184,.18); font-size: .78rem; }

@media (max-width: 575px) {
  .shield-clip-pill { min-width: 0; min-height: 52px; top: 76%; padding: .45rem .85rem .45rem .45rem; }
  .shield-clip-pill-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 1.1rem; }
  .shield-clip-pill-copy strong { font-size: .8rem; }
  .shield-clip-pill-copy small { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .shield-clip-poster, .shield-clip-pill { transition: none; }
  .shield-clip-launch:hover .shield-clip-poster { transform: none; }
}