/*
  Floating "check this yourself" panel for /company/security-trust and
  /company/data-flow.

  Same component design as the blog sidebar (resources/blog/blog-sidebar.css):
  white panel, 1px border, small uppercase label, stacked buttons carrying the
  provider logo, a label and an external-link glyph. It appears once the reader
  has passed the hero and retreats before the footer, exactly as the blog one
  does.

  Vertically centred on the right. It tracks the edge of the 1060px content
  column, so on a wide monitor it sits in the gutter exactly as the blog one
  does, and on a narrower window it falls back to hugging the window edge.
  It stays clear of the bottom-right corner because the HubSpot chat launcher
  lives there.
*/

.airev {
  --airev-w: 238px;
  --airev-gap: 16px;

  position: fixed;
  top: 50%;
  /* Sits near the window edge wherever that clears the 1060px content column,
     and pulls inward only on windows too narrow for that. */
  right: clamp(20px, calc((100vw - 1060px) / 2 - var(--airev-w) - var(--airev-gap)), 48px);
  width: var(--airev-w);
  z-index: 50;
  display: none;
  opacity: 0;
  transform: translateY(-50%) translateX(10px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .10);
}

.airev.visible { opacity: 1; transform: translateY(-50%); pointer-events: auto }

/* One nudge the first time it arrives, so a reader scrolling past notices it.
   JS adds the class once per page load and removes it when it finishes. */
.airev.arriving { animation: airev-nudge .62s cubic-bezier(.36, .07, .19, .97) .22s 1 }

@keyframes airev-nudge {
  0%,  100% { transform: translateY(-50%) translateX(0)     rotate(0) }
  14%       { transform: translateY(-50%) translateX(-7px)  rotate(-1.1deg) }
  30%       { transform: translateY(-50%) translateX(6px)   rotate(.9deg) }
  46%       { transform: translateY(-50%) translateX(-4px)  rotate(-.6deg) }
  62%       { transform: translateY(-50%) translateX(3px)   rotate(.4deg) }
  80%       { transform: translateY(-50%) translateX(-1.5px) rotate(-.2deg) }
}

@media (min-width: 900px)  { .airev { display: block } }
@media (min-width: 1440px) { .airev { --airev-w: 252px } }

/*
  Below about 1640px there is no gutter beside the 1060px column, so a centred
  panel would sit across the middle of the content. Tuck it against the window
  edge instead, high enough to clear the chat launcher in the corner.
*/
@media (max-width: 1639px) {
  .airev          { top: auto; bottom: 170px; transform: translateX(10px) }
  .airev.visible  { transform: none }
  .airev.arriving { animation-name: airev-nudge-edge }
}

@keyframes airev-nudge-edge {
  0%,  100% { transform: translateX(0)      rotate(0) }
  14%       { transform: translateX(-7px)   rotate(-1.1deg) }
  30%       { transform: translateX(6px)    rotate(.9deg) }
  46%       { transform: translateX(-4px)   rotate(-.6deg) }
  62%       { transform: translateX(3px)    rotate(.4deg) }
  80%       { transform: translateX(-1.5px) rotate(-.2deg) }
}

.airev-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.airev-btns { display: flex; flex-direction: column; gap: 8px }

.airev-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.airev-btn:hover { border-color: var(--text); background: #ffffff; transform: translateY(-1px) }

.airev-btn-logo { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center }
.airev-btn-logo svg { width: 100%; height: 100% }
.airev-btn-label { flex: 1 }
.airev-btn-external { width: 12px; height: 12px; color: var(--text-tertiary); flex-shrink: 0; display: flex }
.airev-btn-external svg { width: 100%; height: 100% }

@media (prefers-reduced-motion: reduce) {
  .airev, .airev.visible { transition: none; transform: translateY(-50%) }
  .airev.arriving { animation: none }
  .airev-btn:hover { transform: none }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1639px) {
  .airev, .airev.visible { transform: none }
}