.water-bloom {
  --paper: #f7f4ed;
  --ink: #263d35;
  --pine: #38674c;
  --mist: #e3e9d9;
}

.water-bloom .app-store-link { gap: 1.25rem; border-radius: 2rem; }
.water-bloom .site-nav { flex-wrap: wrap; }
.bloom-hero {
  width: min(calc(100% - 5rem), 72rem);
  margin-inline: auto;
  padding-block: 3rem 4rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.bloom-hero h1 { font-size: clamp(3.6rem, 6vw, 5.7rem); }
.bloom-hero h1 span {
  display: block;
  margin-top: 0.65rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.bloom-tagline {
  margin-block: 2.7rem 1.2rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.3vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
}
.bloom-hero .bloom-play { margin-top: 1.8rem; padding: 1rem 1.4rem; font-size: 1rem; }
.bloom-how { display: inline-block; margin-top: 2rem; padding-block: 0.5rem; font-size: 0.9rem; }
.bloom-how span { margin-left: 0.75rem; }
.bloom-game { width: min(100%, 20rem); margin: 0 auto; }
.bloom-game img {
  width: 100%;
  height: auto;
  border-radius: 1.75rem;
  box-shadow: 0 1.5rem 3rem #263d351c;
  border: 1px solid #a7af944d;
}
.bloom-game figcaption { margin-top: 1rem; font-size: 0.75rem; text-align: center; color: #566355; }
.bloom-steps { scroll-margin-top: 2rem; }
.bloom-steps .step { align-items: start; margin-block: 2rem; }
.bloom-steps h2 { font-size: 1.8rem; }
.bloom-invitation { max-width: 39rem; padding: 5rem 1.25rem; margin: 0 auto; text-align: center; }
.bloom-invitation h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.bloom-invitation > p:not(.eyebrow):not(.store-note) { margin-block: 1.5rem; }
.bloom-invitation .store-note { margin: 1rem auto 0; }
.bloom-footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.bloom-footer-links a { padding-block: 0.6rem; }

@media (max-width: 62rem) {
  .bloom-hero { width: min(calc(100% - 3rem), 48rem); gap: 2.5rem; }
  .bloom-hero h1 { font-size: 3.75rem; }
  .bloom-tagline { font-size: 2.3rem; }
  .water-bloom .site-header { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
  .water-bloom .site-nav { margin-top: 0; }
}
@media (max-width: 42rem) {
  .bloom-hero { width: calc(100% - 2rem); grid-template-columns: 1fr; padding-block: 2.5rem; }
  .bloom-hero h1 { font-size: clamp(3.3rem, 13.2vw, 4.6rem); }
  .bloom-tagline { margin-top: 2rem; }
  .bloom-game { width: min(78%, 20rem); }
  .water-bloom .site-nav { display: flex; gap: 0.65rem; font-size: 0.85rem; }
  .water-bloom .site-nav .app-store-link { padding: 0.55rem 0.8rem; gap: 0.5rem; }
  .bloom-steps .step { margin-block: 1.5rem; }
  .bloom-invitation { padding-block: 3.5rem; }
}