/* The footer, the same on every page (the home, About, Questions, Privacy). */
/* A dark footer: the flower alone in the corner (as granola.ai keeps just its mark), the links, and the name across
   the whole width under them in the brand's cream */
.end { margin-top: 140px; background: var(--ink); color: #fff; position: relative; overflow: hidden; font-family: var(--round); }
.end .wrap { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding: 64px 0 40px; font-size: 14px; }
.foot h4 { margin: 0 0 12px; font-size: 14px; font-weight: 500; }
.foot a { display: block; color: rgba(255, 255, 255, 0.6); text-decoration: none; margin: 6px 0; }
.foot a:hover { color: #fff; }
.foot .brand { display: inline-flex; margin: 0; }
.foot .brand img { width: 40px; height: 40px; border-radius: 10px; }
.foot .copy { color: rgba(255, 255, 255, 0.45); margin-top: 16px; }
/* The name, edge to edge across the page (70vw is the width "Tilia" takes in Instrument Serif; the home's script also
   fits it exactly), in the brand's cream, cut by the bottom edge. On the home, in a few places clusters of brand
   flowers grow along its strokes and spill past their edges. */
.wordmark {
  font-family: var(--app-serif); font-size: 70vw; line-height: 0.74; letter-spacing: -0.02em; text-align: center; white-space: nowrap;
  color: var(--cream); margin: 0.08em 0 -0.06em; user-select: none; pointer-events: none;
}
.blooms { position: absolute; left: 0; right: 0; pointer-events: none; }
.blooms canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .end { margin-top: 100px; }
  .foot { grid-template-columns: 1fr 1fr; padding-top: 48px; }
  .foot > div:first-child { grid-column: 1 / -1; }
}