.landing { display: flex; flex-direction: column; min-height: 100dvh; }
.l-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) clamp(16px, 4vw, 56px); }
.landing main { flex: 1; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(16px, 4vh, 48px) clamp(16px, 4vw, 56px) clamp(32px, 6vh, 72px);
  max-width: 1360px;
  margin: 0 auto;
}
.hero__copy { display: grid; gap: var(--s5); align-content: end; min-width: 0; }

.wordmark { display: flex; flex-wrap: wrap; gap: clamp(6px, 0.8vw, 12px); margin: 0 0 var(--s2); }
.wordmark .tile {
  --tile-size: clamp(58px, 7.4vw, 112px);
  transform: translateY(var(--lift)) rotate(var(--tilt));
}
.wordmark__break { display: block; flex-basis: 100%; height: 0; }
.wordmark.is-falling .tile { animation: tile-fall 900ms var(--ease-spring) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes tile-fall {
  0% { opacity: 0; transform: translateY(-120px) rotate(calc(var(--tilt) * -6)); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(var(--lift)) rotate(var(--tilt)); }
}
.hero__lead { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.4; max-width: 34ch; color: var(--chalk); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.hero__actions .btn--primary { min-width: 220px; }
.join { display: flex; gap: var(--s2); min-width: 0; }
.join .input { width: 9.5em; min-height: 60px; text-align: center; font-size: var(--t-lg); }
.join__msg { color: var(--spire-200); min-height: 1.5em; }
.join__msg.is-bad { color: var(--bad); font-weight: 700; }

.hero__square { margin: 0; display: grid; gap: var(--s3); }
.houses--hero { --house-base: 150px; min-height: 0; gap: clamp(8px, 1.4vw, 18px); padding: 0; border-bottom-width: 4px; list-style: none; }
.houses--hero .house { max-width: 150px; }
.houses--hero .house__name { font-size: var(--t-md); }
.hero__square figcaption { color: var(--spire-200); font-size: var(--t-sm); max-width: 44ch; }

.how { max-width: 1360px; margin: 0 auto; padding: clamp(32px, 6vh, 64px) clamp(16px, 4vw, 56px); box-shadow: 0 -2px 0 var(--spire-700); }
.how h2 { font-size: var(--t-2xl); margin-bottom: var(--s5); }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.how__steps li { display: flex; gap: var(--s4); align-items: flex-start; }
.how__n.tile { --tile-size: 56px; flex: none; transform: rotate(-3deg); }
.how__steps li:nth-child(2) .how__n { transform: rotate(2deg); }
.how__steps h3 { font-size: var(--t-xl); margin-bottom: var(--s1); }
.how__steps p { color: var(--chalk-dim); max-width: 36ch; }
.how__steps b { font-family: var(--f-display); color: var(--chalk); }

.l-foot { padding: var(--s5) clamp(16px, 4vw, 56px) calc(var(--s5) + env(safe-area-inset-bottom)); color: var(--spire-200); font-size: var(--t-sm); border-top: 2px solid var(--spire-700); }

@media (max-width: 959px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero__square { max-width: 560px; }
  .how__steps { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 559px) {
  .wordmark .tile { --tile-size: min(19vw, 84px); }
  .hero__actions { display: grid; }
  .hero__actions .btn--primary { width: 100%; }
  .join .input { flex: 1; width: auto; min-width: 0; }
  .houses--hero { --house-base: 90px; }
  .houses--hero .house__name { font-size: var(--t-sm); }
  .l-top .btn { padding: 0 var(--s2); }
}