/* Original Vaulter hero rules, isolated from the rest of the new site. */
.hero {
  padding: 80px 80px 40px;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  background: url("../assets/brand/logo-vertical-simple-light.65207ab251694173.svg") no-repeat bottom right;
  background-size: cover;
  background-color: var(--color-background);
  line-height: 1;
}
.hero__row { display: flex; flex-wrap: wrap; align-content: center; align-items: center; width: 100%; }
.hero__column { flex: 50%; max-width: 50%; }
.hero .hero-title { margin: 12px 0 36px; }
.hero .nowrap { white-space: nowrap; }
.hero a { text-decoration: none; }
.hero__visual { text-align: right; }
.hero__product-image {
  display: block;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(67, 76, 96, .06);
  border-radius: 8px;
  background: #f8f5f0;
  box-shadow:
    0 16px 40px -24px rgba(79, 43, 57, .20),
    0 2px 10px rgba(33, 41, 62, .025);
}
.hero__product-image img { width: 100%; mix-blend-mode: multiply; }
.hero__cta { display: inline-block; margin-top: var(--space-60); }
@media (max-width: 1279px) { .hero { padding-right: var(--space-20); } }
@media (max-width: 1149px) {
  .hero { padding-left: var(--space-40); }
  .hero .hero-title { margin-right: var(--space-20); }
  .hero .eyebrow { margin-right: var(--space-20); }
  .hero .nowrap { white-space: break-spaces; }
}
@media (max-width: 759px) {
  .hero .hero-title { margin-right: 0; margin-bottom: var(--space-24); }
  .hero .eyebrow { margin-right: 0; }
  .hero { padding-right: 0; }
}
@media (max-width: 599px) {
  .hero .hero-title, .hero .eyebrow { margin-right: var(--space-40); }
  .hero__column { flex: 100%; max-width: 100%; }
  .hero { padding-top: 140px; }
  .hero__visual { text-align: center; }
  .hero__cta { margin: 30px 0; }
}
@media (max-width: 399px) { .hero { padding-left: var(--space-20); } }
@media (max-width: 319px) { .hero { padding-top: 100px; } }

/* New copy uses the existing body typography and original animated CTA. */
.hero__description { line-height: var(--leading-body); }
@media (max-width: 599px) { .hero__description { margin-right: var(--space-40); } }

/* Shared subpage variants; the homepage retains the original hero composition. */
body.page--hero main { padding-top: 0; }
.hero--subpage { padding-top: 120px; }
.hero__image { display: block; width: 100%; }
.hero__image img { width: 100%; }
.hero--subpage .hero__visual { padding-left: var(--space-40); }
.hero--text { min-height: auto; padding-top: 160px; padding-bottom: var(--section-space); }
.hero--text .hero__column { flex: 100%; max-width: 900px; }
@media (max-width: 599px) {
  .hero--subpage, .hero--text { padding-top: 140px; }
  .hero--subpage .hero__visual { padding: 0 var(--space-40) 0 0; }
}

.platform-screen {
  margin-top: clamp(32px, 4vw, 64px);
  padding-inline: clamp(0px, calc(10vw - 60px), 96px);
}
.platform-screen__frame {
  display: block;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(67, 76, 96, .10);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px -20px rgba(33, 41, 62, .20);
}
.platform-screen__frame img { display: block; width: 100%; height: auto; }