.home {
  display: grid;
  gap: 28px;
}

.hero .titlebar {
  font-weight: 700;
}

.hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 40px;
  padding: 32px 32px 36px;
}

.hero-copy {
  display: grid;
  gap: 12px;
  max-width: 34rem;
}

.hero-copy h1 {
  font-size: clamp(40px, 7vw, 68px);
  line-height: 1.02;
}

.hero-copy p {
  margin: 0;
}

.hero-lead {
  font-size: 24px;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}


.home-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
  align-items: stretch;
}

.home-columns > .window {
  display: flex;
  flex-direction: column;
}

.home-columns .window-body {
  flex: 1;
  font-size: 18px;
}

.moves {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.6em;
}

.moves li::marker {
  color: var(--stamp);
  font-weight: 700;
}

.share {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.share .btn {
  margin-top: auto;
}

.share p {
  margin: 0;
}

@media (max-width: 820px) {
  .hero-body {
    grid-template-columns: 1fr;
    padding: 20px 16px 24px;
  }

  .slop-demo {
    justify-self: center;
    margin-top: 8px;
  }

  .home-columns {
    grid-template-columns: 1fr;
  }
}

/* Privacy card: a posted picture with the name blacked out. */
.cover-demo {
  margin: 4px 0 18px;
}

.cover-post {
  position: relative;
  width: min(280px, 100%);
  padding: 8px 8px 10px;
  border: 2px solid var(--ink);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  transform: rotate(-1.5deg);
}

.cover-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #666;
}

.cover-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #111;
}

.cover-bar {
  width: 110px;
  height: 14px;
  background: #111;
}

.cover-art {
  height: 72px;
  background:
    radial-gradient(circle at 30% 30%, #ff9de2 0, transparent 45%),
    radial-gradient(circle at 75% 70%, #4ff0ff 0, transparent 50%),
    linear-gradient(135deg, #3b1d8f, #8a2be2 45%, #ff7a3d);
}

.cover-stamp {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 58px;
  height: 58px;
  transform: rotate(-10deg);
}

.cover-stamp svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hero: a made-up slop post, and the stamp landing on it on a loop. */
.slop-demo {
  position: relative;
  justify-self: end;
  width: min(300px, 100%);
  margin: 0 12px 0 0;
}

.slop-post {
  padding: 10px 10px 12px;
  border: 2px solid var(--ink);
  background: #fff;
  box-shadow: 2px 2px 0 var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transform: rotate(2deg);
}

.slop-art {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, #ff9de2 0, transparent 45%),
    radial-gradient(circle at 75% 70%, #4ff0ff 0, transparent 50%),
    linear-gradient(135deg, #3b1d8f, #8a2be2 45%, #ff7a3d);
}

.slop-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.55) 9px 10px),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255, 255, 255, 0.55) 9px 10px),
    radial-gradient(circle, #e0fbff, #38c8ff 55%, #2a5bff);
  box-shadow: 0 0 24px 8px rgba(120, 230, 255, 0.85);
  transform: translate(-50%, -50%);
}

.slop-spark {
  position: absolute;
  color: #fff;
  text-shadow: 0 0 8px #fff;
}

.slop-spark.s1 { left: 12%; top: 14%; font-size: 22px; }
.slop-spark.s2 { right: 12%; top: 22%; font-size: 16px; }
.slop-spark.s3 { left: 22%; bottom: 12%; font-size: 18px; }

.slop-title {
  margin: 10px 0 4px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.slop-body {
  margin: 0 0 6px;
  color: #666;
  font-size: 13px;
  line-height: 1.35;
}

.slop-meta {
  margin: 0;
  color: #888;
  font-size: 12px;
}

.slop-stamp {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: slop-stamp 4.5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.slop-stamp-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.slop-saved {
  position: absolute;
  right: -8px;
  bottom: -14px;
  padding: 3px 10px;
  border: 2px solid var(--ink);
  background: var(--note, #ffff99);
  font-size: 15px;
  font-weight: 700;
  animation: slop-saved 4.5s ease-out infinite;
}

@keyframes slop-stamp {
  0%, 18% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(-18deg); }
  19% { opacity: 1; transform: translate(-50%, -50%) scale(0.35) rotate(-18deg); }
  26% { transform: translate(-50%, -50%) scale(1.08) rotate(4deg); }
  31%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
  96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
}

@keyframes slop-saved {
  0%, 36% { opacity: 0; transform: translateY(6px); }
  42%, 86% { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .slop-stamp,
  .slop-saved {
    animation: none;
  }

  .slop-stamp {
    transform: translate(-50%, -50%) rotate(-6deg);
  }
}

/* Install: pin the icon to the toolbar, drawn in the site's own lines. */
.pin-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: center;
  gap: 24px 40px;
  font-size: 18px;
}

.pin-demo {
  margin: 0;
}

.pin-browser {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding-bottom: 18px;
}

.pin-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--ink);
  background: var(--face);
}

.pin-address {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  background: var(--sheet);
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The two things to click, marked like a note, not with the stamp's ring. */
.pin-callout {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  background: var(--note, #ffff99);
  box-shadow: 2px 2px 0 var(--ink);
}

.pin-callout svg {
  width: 22px;
  height: 22px;
}

.pin-menu {
  width: min(260px, calc(100% - 24px));
  margin: 10px 12px 0 auto;
  border: 2px solid var(--ink);
  background: var(--sheet);
  box-shadow: 2px 2px 0 var(--ink);
}

.pin-menu-title {
  margin: 0;
  padding: 6px 10px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.pin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.pin-logo {
  display: block;
  width: 24px;
  height: 24px;
}

.pin-name {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}

.pin-demo figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 820px) {
  .pin-body {
    grid-template-columns: 1fr;
  }
}