.avara-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.avara-skip {
  position: fixed;
  left: 16px;
  top: -70px;
  z-index: 10000;
  background: #fff;
  color: #111;
  padding: 12px;
}
.avara-skip:focus {
  top: 16px;
}
.avara-site .q-hero-previews[data-rotation-ready] {
  height: calc(var(--preview-width) * 941 / 1672);
}
.avara-site .avara-final-hero,
.avara-site .q-hero-previews[data-rotation-ready] .avara-final-hero {
  aspect-ratio: 1672/941;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
.avara-final-hero {
  margin: 0;
}
.avara-final-hero > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Blur the mockups themselves behind the headline; keep the catalogue sharp. */
.avara-site .q-header {
  background: transparent;
  backdrop-filter: none;
}
.avara-site .q-platform-login {
  margin-left: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #d2d2d6;
  font-size: 14px;
  white-space: nowrap;
}
.avara-site .q-platform-login:hover {
  color: #fff;
}
@media (max-width: 480px) {
  .avara-site .q-header {
    gap: 12px;
  }
  .avara-site .q-header-cta {
    padding-inline: 12px;
  }
  .avara-site .q-platform-login {
    font-size: 12px;
  }
}
.avara-site .quiet-revised > .q-hero {
  position: relative;
  isolation: isolate;
  --preview-width: min(48vw, 840px);
  --preview-gap: 28px;
}
.q-hero-blur {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #171c20;
}
.q-hero-blur-fallback,
.q-hero-blur-track {
  position: absolute;
  top: -64px;
  height: calc(100% + 128px);
  filter: blur(48px);
}
.q-hero-blur-fallback {
  left: -64px;
  width: calc(100% + 128px);
  object-fit: cover;
}
.q-hero-blur-track {
  left: calc(50% - var(--preview-width) * 1.5 - var(--preview-gap));
  display: flex;
  gap: var(--preview-gap);
  width: max-content;
  animation: homepage-drift 96s linear infinite;
}
.q-hero-blur-track > img {
  flex: none;
  width: var(--preview-width);
  height: 100%;
  object-fit: cover;
}
.q-hero-blur::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(#0007 0%, #0009 40%, #000d 68%, #000 92%);
}
.avara-site .q-hero-copy > p {
  color: #eeeef0;
}
.q-hero-previews {
  position: relative;
  z-index: 1;
}
.q-hero[data-motion-paused] .q-hero-blur-track {
  animation-play-state: paused;
}
@media (max-width: 800px) {
  .avara-site .quiet-revised > .q-hero {
    --preview-width: 70vw;
    --preview-gap: 20px;
  }
}
@media (max-width: 600px) {
  .avara-site .quiet-revised > .q-hero {
    --preview-width: 86vw;
    --preview-gap: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .q-hero-blur-track {
    animation: none;
  }
}
@media (max-width: 700px) {
  [data-mobile-hidden='true'] {
    display: none !important;
  }
}
.avara-industry-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672/941;
  border-radius: 16px;
  object-fit: contain;
}

/* Original device composition, with a photo-only layer and native ClearFlow content. */
.q-edit-demo-clearflow .q-edit-backdrop {
  opacity: 0.6;
}
.q-edit-demo-clearflow .q-edit-vignette {
  background: linear-gradient(90deg, #061321a6, #06132180);
}
.q-edit-demo-clearflow .q-edit-nav b {
  font-size: clamp(10px, 2cqw, 18px);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.q-edit-demo-clearflow .q-edit-nav b small {
  display: block;
  margin-top: 3px;
  font-size: 0.4em;
  letter-spacing: 0.18em;
}
.q-edit-demo-clearflow .q-edit-button {
  background: #087eff;
  border-color: #087eff;
  color: #fff;
  border-radius: 999px;
}
.q-edit-demo-clearflow .q-edit-phone .q-edit-nav b {
  font-size: 11px;
}
.q-edit-demo-clearflow .q-edit-phone .q-edit-backdrop {
  object-position: 68% center;
}
.q-edit-demo-clearflow .q-edit-phone .q-edit-menu {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  color: #f4f4f5;
}
.q-edit-menu svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 600px) {
  .q-edit-demo-clearflow .q-edit-phone .q-edit-nav b {
    font-size: 8px;
  }
  .q-edit-demo-clearflow .q-edit-phone .q-edit-menu {
    width: 12px;
    height: 12px;
  }
}

/* A compact glass surface for the four-field contact form. */
.avara-site .q-glossy-contact {
  width: min(520px, calc(100% - 32px));
  max-width: 520px;
  padding: 38px 34px 32px;
  color: #ededed;
  border: 1px solid #e5e5e52b;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at top left, #ffffff0d, transparent 65%),
    linear-gradient(145deg, #1c1c1c80, #11111199 65%, #0b0b0b8f);
  -webkit-backdrop-filter: blur(40px) saturate(110%);
  backdrop-filter: blur(40px) saturate(110%);
  box-shadow:
    inset 0 1px 0 #ffffff17,
    0 28px 90px #0009;
}
.q-glossy-contact::backdrop {
  background: #0007;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.avara-site .q-glossy-contact .q-redesign-form {
  gap: 18px;
}
.q-glossy-contact .q-redesign-form h2 {
  margin: 0 10px 12px;
  font-size: clamp(32px, 4vw, 40px);
  letter-spacing: -1.5px;
}
.avara-site .q-glossy-contact label {
  gap: 8px;
  color: #d2d2d2;
  font-size: 14px;
}
.avara-site .q-glossy-contact input {
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid #e0e0e026;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff09, #11111155);
  box-shadow: inset 0 1px 0 #ffffff08;
  color: #f2f2f2;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.q-glossy-contact input::placeholder {
  color: #999;
}
.avara-site .q-glossy-contact input:focus {
  outline: none;
  border-color: #c4c4c480;
  background: linear-gradient(135deg, #ffffff0d, #11111155);
}
.q-glossy-contact .cta {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #ffffff55;
  border-radius: 12px;
  background: linear-gradient(#f7f7f7, #dedede);
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 16px #0003;
  color: #181818;
  font-size: 15px;
  font-weight: 600;
}
.q-glossy-contact .close-dialog {
  color: #b3b3b3;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 0;
}
.q-glossy-contact button:focus-visible {
  outline: none;
  background-color: #ffffff20;
}
.q-glossy-contact .close-dialog,
.q-glossy-contact .close-dialog:hover,
.q-glossy-contact .close-dialog:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.q-glossy-contact .cta:focus-visible {
  border-color: #ccc;
  background: linear-gradient(#fff, #d8d8d8);
}
@media (max-width: 600px) {
  .avara-site .q-glossy-contact {
    padding: 36px 22px 24px;
    border-radius: 14px;
  }
}