/* Vertah — shared responsive styles (all pages) */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  height: auto;
}

/* Before/after slider */
.vh-hero-media {
  padding: 24px 8px 28px 16px;
}

.vh-ba-layer {
  will-change: clip-path;
}

.vh-ba-label {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .vh-hero-media {
    padding: 20px 4px 24px 8px;
  }

  .vh-hero-sticker--bf {
    top: auto !important;
    bottom: 8px !important;
    right: 4px !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .vh-hero-sticker--halloween {
    top: -10px !important;
    right: 4px !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .vh-ba-label {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }

  .vh-ba-label--before {
    top: 12px !important;
    right: 12px !important;
  }

  .vh-ba-label--after {
    top: 12px !important;
    left: 12px !important;
  }
}

/* Video embed */
.vh-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0E1116;
}

.vh-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Header / mobile nav */
@media (max-width: 900px) {
  header {
    position: relative;
  }

  header > div:first-child {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 12px !important;
  }

  [data-nav-menu] {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 120;
    box-shadow: 0 12px 28px rgba(14, 17, 22, 0.1);
  }

  body.vh-nav-open {
    overflow: hidden;
  }
}

/* Homepage hero */
@media (max-width: 940px) {
  .vh-hero {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .vh-hero-media {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
  }

  .vh-bento {
    grid-template-columns: 1fr !important;
  }

  .vh-2col {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .vh-h1 {
    font-size: 52px !important;
  }
}

@media (max-width: 1024px) {
  .vh-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .vh-stats > div {
    border-right: none !important;
    border-bottom: 3px solid #0E1116;
  }

  .vh-stats > div:nth-child(2n) {
    border-right: none !important;
  }

  .vh-stats > div:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
}

/* Tablet / mobile shared */
@media (max-width: 768px) {
  header > div:first-child {
    padding-left: 16px !important;
    padding-right: 16px !important;
    height: 64px !important;
  }

  [data-nav-menu] {
    top: 64px;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .vh-h1 {
    font-size: 38px !important;
    line-height: 1.02 !important;
  }

  .vh-h2 {
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  .vh-h1 br,
  .vh-h2 br,
  .w-h1 br,
  .a-h1 br,
  .b-h1 br,
  .c-h1 br,
  .d-h1 br,
  .p-h1 br,
  .fq-h1 br,
  .art-h1 br {
    display: none;
  }

  section[style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .vh-stats {
    grid-template-columns: 1fr !important;
  }

  .vh-stats > div {
    border-bottom: 3px solid #0E1116;
  }

  .vh-stats > div:last-child {
    border-bottom: none !important;
  }

  .vh-num {
    font-size: 40px !important;
  }

  .vh-seal {
    width: 80px !important;
    height: 80px !important;
    bottom: -16px !important;
    left: -8px !important;
  }

  .vh-hero-sticker--halloween {
    right: 4px !important;
    top: -8px !important;
    transform: rotate(4deg) !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .vh-2col[style*="1fr auto 1fr"] {
    text-align: center;
  }

  .vh-2col[style*="1fr auto 1fr"] > div:nth-child(2) {
    transform: rotate(90deg);
    justify-self: center;
  }

  .vh-step {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .vh-idx {
    font-size: 64px !important;
    width: auto !important;
  }

  .vh-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .vh-cta-row > a {
    text-align: center;
    justify-content: center;
  }

  .w-step {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .f-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .f-row .f-img {
    order: -1;
  }

  .d-2col,
  .d-flow {
    grid-template-columns: 1fr !important;
  }

  .a-2col,
  .c-2col {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .b-grid,
  .p-cols,
  .p-grid,
  .p-cards {
    grid-template-columns: 1fr !important;
  }

  .w-h1,
  .a-h1,
  .b-h1,
  .c-h1,
  .d-h1,
  .p-h1,
  .fq-h1,
  .art-h1 {
    font-size: 34px !important;
  }
}

@media (max-width: 620px) {
  .vh-h1 {
    font-size: 34px !important;
  }

  .vh-h2 {
    font-size: 26px !important;
  }

  .vh-num {
    font-size: 34px !important;
  }
}

@media (max-width: 480px) {
  .vh-mq-track span {
    padding: 0 18px !important;
    font-size: 11px !important;
  }

  .vh-demo-bar span:last-child {
    font-size: 10px !important;
    margin-left: 4px !important;
  }

  header span[style*="font-size:21px"] {
    font-size: 18px !important;
  }
}