/* The screen template every marketing page uses (homepage, /homeowners),
   plus the shared footer. Pages link it after /bar.css. */
*, *::before, *::after { box-sizing: border-box; }
/* Every screen after the first uses the same template, Tesla style:
   headline, one line under it, one button, then the photo full width. */
.screen, .hero-cta {
  font-family: var(--font-text);
  color: #171a20;
  text-align: center;
}
.screen .copy { padding: 96px 24px 40px; }
.screen h1, .screen h2 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05;
  text-wrap: balance; font-family: var(--font-display); font-weight: var(--weight-hero); letter-spacing: var(--tracking-headline); word-spacing: var(--word-spacing-headline);
}
.sub {
  margin: 12px 0 28px;
  font-size: clamp(18px, 1.7vw, 26px);
  color: #393c41; font-weight: var(--weight-body-strong); letter-spacing: var(--tracking-body);
}
.screen picture, .screen img { display: block; width: 100%; }
.screen img { height: 62svh; object-fit: cover; }
.screen img.washer-shot { object-position: 48% 50%; }
.screen img.pro-shot { object-position: 36% 40%; }
.screen img.family-shot { object-position: 45% 40%; }
@media (min-width: 900px) {
  .screen img { height: min(80svh, 56.25vw); }
  .screen img.washer-shot { object-position: 50% 45%; }
  .screen img.pro-shot { object-position: 50% 35%; }
  .screen img.family-shot { object-position: 50% 45%; }
}
footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  white-space: nowrap;
  padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
  font-family: var(--font-text);
  font-size: 12px;
}
footer, footer a { color: #6e6e73; text-decoration: none; }