body:has(.snap-container) .identity-plate {
  bottom: 100px !important;
  left: 16px !important;
  right: auto !important;
  width: min(680px, calc(100% - 104px)) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 11px 11px !important;
  border-radius: 22px 22px 18px 18px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-bottom-color: rgba(255,255,255,.055) !important;
  background: linear-gradient(180deg, rgba(8,10,15,.36), rgba(8,10,15,.63)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;
}

body:has(.snap-container) .case-nudge {
  display: none !important;
}

body:has(.snap-container) .case-meta {
  gap: 6px !important;
  font-size: 10.5px !important;
  margin-bottom: 3px !important;
  color: rgba(255,255,255,.68) !important;
}

body:has(.snap-container) .dot {
  width: 3.5px !important;
  height: 3.5px !important;
  background: rgba(255,255,255,.38) !important;
}

body:has(.snap-container) .identity-plate h1 {
  font-size: clamp(22px, 5.15vw, 40px) !important;
  line-height: .95 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  max-height: 2em !important;
}

body:has(.snap-container) .action-row {
  display: flex !important;
  gap: 7px !important;
  margin-top: 9px !important;
  flex-wrap: nowrap !important;
}

body:has(.snap-container) .identity-plate .action-row > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

body:has(.snap-container) .primary-btn,
body:has(.snap-container) .secondary-btn,
body:has(.snap-container) .link-btn {
  padding: 10px 11px !important;
  font-size: 12.25px !important;
}

body:has(.snap-container) .top-fade {
  background: linear-gradient(180deg, rgba(5,6,8,.3) 0%, rgba(5,6,8,.07) 28%, rgba(5,6,8,0) 48%) !important;
}

body:has(.snap-container) .bottom-fade {
  background: linear-gradient(180deg, rgba(5,6,8,0) 0%, rgba(5,6,8,.04) 44%, rgba(5,6,8,.58) 78%, rgba(5,6,8,.95) 100%) !important;
}

body:has(.snap-container) .loader-card {
  display: none !important;
}

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  body:has(.snap-container) .snap-card {
    background: radial-gradient(circle at center, rgba(30,41,59,.9), #050608 68%) !important;
  }

  body:has(.snap-container) .case-image {
    object-fit: contain !important;
    object-position: center center !important;
    background: #050608 !important;
  }

  body:has(.snap-container) .identity-plate {
    left: 50% !important;
    right: auto !important;
    bottom: 96px !important;
    width: min(760px, calc(100vw - 360px)) !important;
    max-width: 760px !important;
    min-width: 520px !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 10px 14px 12px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    background: linear-gradient(180deg, rgba(8,10,15,.24), rgba(8,10,15,.48)) !important;
    backdrop-filter: blur(12px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(115%) !important;
    box-shadow: 0 14px 42px rgba(0,0,0,.18) !important;
  }

  body:has(.snap-container) .identity-plate h1 {
    font-size: clamp(28px, 3.2vw, 46px) !important;
  }

  body:has(.snap-container) .case-meta {
    font-size: 10px !important;
  }

  body:has(.snap-container) .primary-btn,
  body:has(.snap-container) .secondary-btn,
  body:has(.snap-container) .link-btn {
    padding: 10px 18px !important;
    font-size: 12.5px !important;
  }

  body:has(.snap-container) .top-fade {
    background: linear-gradient(180deg, rgba(5,6,8,.42) 0%, rgba(5,6,8,.08) 24%, rgba(5,6,8,0) 52%) !important;
  }

  body:has(.snap-container) .bottom-fade {
    background: linear-gradient(180deg, rgba(5,6,8,0) 0%, rgba(5,6,8,.08) 48%, rgba(5,6,8,.68) 84%, rgba(5,6,8,.94) 100%) !important;
  }
}

body:has(.snap-container) .instruction-grid strong::before {
  content: " " !important;
}

body:has(.snap-container) .instruction-grid strong::after {
  content: " " !important;
}

body:has(.snap-container) .nav-area {
  gap: 5px !important;
  align-items: center !important;
}

body:has(.snap-container) .bottom-nav {
  transform: translateX(0) !important;
}

body:has(.snap-container) .nav-helper {
  position: fixed !important;
  top: 64px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(520px, calc(100vw - 32px)) !important;
  max-width: min(520px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 42px !important;
  padding: 8px 14px 9px !important;
  border-radius: 999px !important;
  background: rgba(8,10,15,.54) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 0 18px rgba(239,68,68,.10) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transform: translateX(-50%) !important;
  transform-origin: 80% 50% !important;
  z-index: 19 !important;
  overflow: hidden !important;
  transition: opacity 950ms ease, transform 1100ms cubic-bezier(.2,.85,.2,1), width 950ms ease, max-width 950ms ease, min-height 950ms ease, padding 950ms ease, border-radius 950ms ease, box-shadow 950ms ease, background 950ms ease !important;
}

body:has(.snap-container) .nav-helper span,
body:has(.snap-container) .nav-helper small {
  display: none !important;
}

body:has(.snap-container) .nav-helper::before {
  content: "Swipe up/down to browse cases" !important;
  display: block !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  transition: opacity 420ms ease, transform 700ms ease !important;
}

body:has(.snap-container) .nav-helper::after {
  content: "Tap More for Blog, Support, Media Kit, Contact, and Trust Center" !important;
  display: block !important;
  margin-top: 2px !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 9.3px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  transition: opacity 420ms ease, transform 700ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  body:has(.snap-container) .nav-helper::before {
    content: "Desktop: use your mouse wheel to browse cases" !important;
  }

  body:has(.snap-container) .nav-helper::after {
    content: "More opens Blog, Support, Media Kit, Contact, and Trust Center" !important;
  }
}

body:has(.snap-container) .nav-helper.folding {
  opacity: .16 !important;
  transform: translateX(calc(-50% + 145px)) translateY(calc(100vh - 154px)) scale(.18) !important;
  width: 94px !important;
  max-width: 94px !important;
  min-height: 42px !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  background: rgba(239,68,68,.18) !important;
  border-color: rgba(255,110,110,.34) !important;
  box-shadow: 0 0 34px rgba(239,68,68,.34), 0 0 72px rgba(239,68,68,.18) !important;
}

body:has(.snap-container) .nav-helper.folding::before,
body:has(.snap-container) .nav-helper.folding::after {
  opacity: 0 !important;
  transform: scale(.85) !important;
}

body:has(.snap-container) .resource-nav {
  position: relative !important;
  overflow: visible !important;
}

body:has(.snap-container) .resource-nav::after {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 105, 105, .24) !important;
  box-shadow: 0 0 24px rgba(239,68,68,.18) !important;
  opacity: .85 !important;
  pointer-events: none !important;
}

body:has(.snap-container) .resource-nav.pulse::after {
  animation: snapMorePulse 1.8s ease-in-out infinite !important;
}

@keyframes snapMorePulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (max-width: 430px) {
  body:has(.snap-container) .identity-plate {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
  }

  body:has(.snap-container) .bottom-nav {
    transform: translateX(0) !important;
  }

  body:has(.snap-container) .nav-helper {
    top: 60px !important;
    width: calc(100vw - 42px) !important;
    max-width: calc(100vw - 42px) !important;
    min-height: 39px !important;
    padding: 7px 12px 8px !important;
  }

  body:has(.snap-container) .nav-helper::before {
    font-size: 11px !important;
  }

  body:has(.snap-container) .nav-helper::after {
    font-size: 8.5px !important;
  }

  body:has(.snap-container) .nav-helper.folding {
    transform: translateX(calc(-50% + 112px)) translateY(calc(100vh - 146px)) scale(.18) !important;
    width: 84px !important;
    max-width: 84px !important;
  }
}

@media (max-height: 760px) {
  body:has(.snap-container) .identity-plate {
    bottom: 96px !important;
    padding: 9px 10px 10px !important;
  }
  body:has(.snap-container) .identity-plate h1 {
    font-size: clamp(20px, 4.55vw, 34px) !important;
    line-height: .96 !important;
    -webkit-line-clamp: 2 !important;
    max-height: 1.95em !important;
  }
  body:has(.snap-container) .case-meta {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }
  body:has(.snap-container) .action-row {
    margin-top: 8px !important;
    gap: 6px !important;
  }
  body:has(.snap-container) .primary-btn,
  body:has(.snap-container) .secondary-btn {
    padding: 9px 9px !important;
    font-size: 11.5px !important;
  }
  body:has(.snap-container) .bottom-nav {
    transform: translateX(0) !important;
  }
  body:has(.snap-container) .nav-helper {
    top: 54px !important;
    min-height: 36px !important;
    padding: 6px 11px 7px !important;
  }
  body:has(.snap-container) .nav-helper::before {
    font-size: 10.5px !important;
  }
  body:has(.snap-container) .nav-helper::after {
    font-size: 8px !important;
  }
  body:has(.snap-container) .nav-helper.folding {
    transform: translateX(calc(-50% + 112px)) translateY(calc(100vh - 138px)) scale(.18) !important;
  }
}