/* The approved studies share the main page's galaxy, while keeping their own
   typography and proportions. The hero and header retain their original CSS. */
.home-automation,
.home-websites {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #eff1ef;
  background: transparent;
  --muted: #a6afb8;
  --line: #ffffff1c;
}

.home-automation {
  min-height: 0;
}

.home-automation .demo-card > h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 20px;
}

/* A section introduction is not a second site header. */
.home-websites .build-intro {
  height: auto;
  border: 0;
  margin: 0;
  position: static;
  z-index: auto;
}

.home-websites {
  color: var(--showcase-ink);
  padding-block: clamp(32px, 5vw, 80px);
}

.home-websites #web-build-title {
  font-size: clamp(36px, 3.65vw, 51px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.06em;
  text-align: left;
  text-wrap: balance;
  margin: 0;
}

.home-websites #web-build-title span {
  background: var(--showcase-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The illustration borrows .demo-card only for its glass glint. It is an
   absolutely laid-out browser, not a fifth automation card. */
.home-websites .wb-browser {
  display: block;
  flex: initial;
  min-width: 0;
  padding: 0;
}

.home-websites .wb-browser > :not([data-demo-glass]) {
  position: absolute;
  z-index: auto;
}

.home-websites .wb-browser > .wb-cursor {
  z-index: 7;
}

.home-websites .wb-browser > [data-demo-glass]::before {
  content: none;
}

/* The website study's generic empty-glass fallback must not retint the cards. */
.home-automation .demo-card > [data-demo-glass]:empty {
  border-color: #ffffff2b;
  background: #ffffff05;
}

@media (max-width: 1039px) {
  .home-websites #web-build-title {
    font-size: 42px;
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  .home-automation .demo-card > h2 {
    font-size: clamp(13px, 3.4vw, 21px);
    line-height: 1.28;
    margin-bottom: 16px;
  }
}

@media (max-width: 620px) {
  .home-websites #web-build-title {
    font-size: clamp(32px, 8.7vw, 48px);
    letter-spacing: -.055em;
  }
}

@media (max-width: 360px) {
  .home-automation .demo-card > h2 {
    font-size: 12.5px;
    line-height: 1.24;
    margin-bottom: 12px;
  }
}

@media (max-width: 359px) {
  .home-websites #web-build-title {
    font-size: 32px;
  }
}