/* The site footer, the same on every page including the home page (5 October). Laid out like Hinge's: the
   wordmark on the left, three columns of links on the right, the small print along the bottom. Dark, full width,
   and always at the bottom of the window even on a short page. The wordmark rises in letter by letter when the
   footer comes into view (footer.js adds data-in; without it the wordmark simply shows). */

body:not(.home) { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body:not(.home) > main { flex: 1 0 auto; }

.site-foot {
  background: #161618; color: #F5F5F7; margin-top: 64px;
  font: 400 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sf-in { max-width: 1120px; margin-inline: auto; padding: 72px 20px 32px; display: grid; gap: 56px; }
.sf-top { display: grid; gap: 48px; }
@media (min-width: 860px) { .sf-top { grid-template-columns: 1fr auto; align-items: start; } }

.sf-mark {
  display: inline-flex; align-items: center; gap: 0; text-decoration: none; width: fit-content;
  font: 600 clamp(22px, 2.3vw, 27px)/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.03em; color: #F5F5F7;
}
.site-foot .sf-mark, .site-foot .sf-mark:hover { color: #F5F5F7; text-decoration: none; }
.sf-mark span { display: inline-block; }
.sf-mark span.c { color: #FF4D6D; }
.sf-bubble { width: 1.1em; height: 1.1em; color: #FF4D6D; margin-right: .32em; flex: none; }
.sf-bubble .e { fill: #161618; }
.sf-bubble .a { fill: none; stroke: #161618; stroke-width: 6.5; stroke-linecap: round; }

/* The wordmark is drawn, not typed: "Rizzpond" is built from thick monoline strokes (stems, bowls, arches, the
   i's dot) and each stroke draws itself in pen order, left to right — the way Hinge's footer logo builds itself.
   pathLength="1" on every path, so one dash of length 1 covers any stroke. Without footer.js it simply shows. */
.sf-type { height: 1.02em; width: auto; overflow: visible; display: block; }
.sf-type path { fill: none; stroke-width: 13; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 2; }
.sf-type path.w { stroke: #F5F5F7; } .sf-type path.c { stroke: #FF4D6D; }
.sf-type .dot.w { fill: #F5F5F7; } .sf-type .dot { transform-box: fill-box; transform-origin: center; }
.sf-js .sf-bubble { transform: scale(.15); opacity: 0; transition: transform .6s cubic-bezier(.34, 1.45, .64, 1), opacity .25s ease-out; }
.sf-js .site-foot[data-in] .sf-bubble { transform: none; opacity: 1; }
.sf-js .sf-type path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s cubic-bezier(.65, 0, .35, 1); }
.sf-js .sf-type .dot { transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.6, .64, 1); }
.sf-js .site-foot[data-in] .sf-type path { stroke-dashoffset: 0; }
.sf-js .site-foot[data-in] .sf-type .dot { transform: none; }
.sf-type .t1 { transition-delay: 0.180s; }
.sf-type .t2 { transition-delay: 0.235s; }
.sf-type .t3 { transition-delay: 0.290s; }
.sf-type .t4 { transition-delay: 0.345s; }
.sf-type .t5 { transition-delay: 0.400s; }
.sf-type .t6 { transition-delay: 0.455s; }
.sf-type .t7 { transition-delay: 0.510s; }
.sf-type .t8 { transition-delay: 0.565s; }
.sf-type .t9 { transition-delay: 0.620s; }
.sf-type .t10 { transition-delay: 0.675s; }
.sf-type .t11 { transition-delay: 0.730s; }
.sf-type .t12 { transition-delay: 0.785s; }
.sf-type .t13 { transition-delay: 0.840s; }
.sf-type .t14 { transition-delay: 0.895s; }
/* Hover: Wink tilts hello. */
.sf-js .site-foot[data-in] .sf-mark:hover .sf-bubble { transform: rotate(-10deg) scale(1.08); transition-delay: 0s; transition-duration: .5s; }
.sf-tag { margin: 14px 0 0; color: rgba(245, 245, 247, .55); font-size: 15px; }

.sf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
@media (min-width: 560px) { .sf-cols { grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 32px 64px; } }
.sf-cols div { display: grid; gap: 12px; align-content: start; }
.sf-cols h2 { margin: 0 0 6px; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 0; color: rgba(245, 245, 247, .55); }
.site-foot .sf-cols a { color: #F5F5F7; text-decoration: none; font-weight: 600; font-size: 16px; width: fit-content; transition: color .2s; }
.site-foot .sf-cols a:hover { color: #FF4D6D; text-decoration: none; }

.sf-bottom { display: grid; gap: 10px; font-size: 13px; color: rgba(245, 245, 247, .55); border-top: 1px solid rgba(245, 245, 247, .1); padding-top: 24px; }
@media (min-width: 860px) { .sf-bottom { grid-template-columns: auto 1fr; gap: 32px; } .sf-bottom .fine { text-align: right; } }
.sf-bottom p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .sf-js .sf-bubble { transform: none; opacity: 1; transition: none; }
  .sf-js .sf-type path { stroke-dashoffset: 0; transition: none; }
  .sf-js .sf-type .dot { transform: none; transition: none; }
}
body.home .site-foot { margin-top: 0; }