/* Web keeps the full application header in normal document flow.
   The shared Components header is intentionally dense on small screens; making
   that entire block sticky would leave too little room for page content. */
.ta-site-header {
  position: relative;
  top: auto;
}

/* Authored public-page images must shrink with their grid cell. Components V2
   owns the shared layout, while this Web shell protects V1 media with large
   intrinsic dimensions from widening the document on narrow viewports. */
.ta-content-figure,
.ta-brief-visual > img {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

img.ta-image-loading {
  background-color: var(--ta-surface-alt);
  background-image: linear-gradient(
    105deg,
    transparent 30%,
    color-mix(in srgb, var(--ta-accent) 14%, transparent) 45%,
    color-mix(in srgb, var(--ta-text) 12%, transparent) 50%,
    color-mix(in srgb, var(--ta-accent) 14%, transparent) 55%,
    transparent 70%
  );
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 220% 100%;
  color: transparent;
  animation: ta-image-skeleton 1.25s ease-in-out infinite;
}

@keyframes ta-image-skeleton {
  to {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  img.ta-image-loading {
    background-position: 50% 0;
    animation: none;
  }
}

.ta-media-fallback {
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(8rem, 24vw, 14rem);
  display: grid;
  place-content: center;
  gap: .55rem;
  padding: 1.25rem;
  border: 1px dashed var(--ta-line-strong);
  background: linear-gradient(135deg, var(--ta-surface-alt), var(--ta-surface));
  color: var(--ta-muted);
  font-family: var(--ta-font-mono);
  text-align: center;
}

.ta-media-fallback strong {
  color: var(--ta-accent-strong);
  font-size: var(--ta-text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ta-media-fallback small {
  max-width: 32rem;
  font-size: var(--ta-text-xs);
  line-height: 1.5;
}

.ta-brief-visual > .ta-media-fallback {
  min-height: 28rem;
}

.ta-tool-hero-image > .ta-media-fallback {
  height: 100%;
  min-height: 0;
  padding: 1rem;
  border: 0;
  border-radius: inherit;
}

.ta-tool-sales__hero-mark > .ta-media-fallback {
  width: 14.375rem;
  height: 14.375rem;
  min-height: 0;
}

.ta-tool-sales__screens .ta-media-fallback {
  min-height: 0;
  aspect-ratio: 3 / 4;
}

.thumbnail > .ta-media-fallback {
  height: 100%;
  min-height: 20rem;
  border: 0;
}

@media (max-width: 56.25rem) {
  .thumbnail > .ta-media-fallback {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}