/* The site's footer: the name and its line, then the links in three groups, Product,
   Support and Legal; the small print beneath. */
footer.site-footer { padding: 64px 24px 48px; color: var(--text-3); font-size: 14px; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; justify-content: initial; }
.footer-brand a { display: inline-flex; align-items: center; gap: 10px; font: 600 19px "Fredoka", var(--display); color: var(--text); }
.footer-brand img { width: 30px; height: 30px; }
.footer-brand p { margin-top: 12px; max-width: 260px; line-height: 1.5; color: var(--text-2); }
.site-footer nav { display: grid; align-content: start; gap: 10px; }
.site-footer nav h2 { margin-bottom: 4px; font: 600 12px var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.site-footer nav a { color: var(--text-2); font-size: 15px; width: fit-content; }
.site-footer nav a:hover { color: var(--text); }
.site-footer .footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-2); font-size: 13px; }
.site-footer .footer-base a:hover { color: var(--text); }
/* Narrower: the name and its line on a row of their own, the four lists under it. */
@media (max-width: 1000px) {
  .site-footer .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  footer.site-footer { padding: 48px 16px 40px; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* The big Pips (js/bigpip.js): part of Pip, big, peeking into the page from an edge. Drawn
   as Pip is: a white ball with a crisp shade along its lower right, upright capsule eyes a
   little above the middle. --lx/--ly (-1...1) are where it's looking; it leans a little
   that way, on top of its --tilt. */
.big-pip { --tilt: 0deg; position: relative; overflow: hidden; pointer-events: none; }
.big-pip__body {
  position: absolute; width: var(--d); height: var(--d);
  border-radius: 50%; background: #fff; box-shadow: inset calc(var(--d) * -0.07) calc(var(--d) * -0.08) 0 0 rgb(222, 226, 236);
  rotate: calc(var(--tilt) + var(--lx, 0) * 2.4deg);
  animation: big-pip-breathe 1.8s ease-in-out infinite alternate paused;
}
.big-pip.awake .big-pip__body { animation-play-state: running; }
.big-pip.live .big-pip__body { transition: translate 1.3s cubic-bezier(0.22, 1.2, 0.36, 1), rotate 0.9s cubic-bezier(0.2, 0.9, 0.25, 1); }
@keyframes big-pip-breathe { from { scale: 1.012 0.988; } to { scale: 0.992 1.01; } }
.big-pip__face { position: absolute; inset: 0; translate: calc(var(--lx, 0) * var(--d) * 0.08) calc(var(--ly, 0) * var(--d) * 0.06); transition: translate 0.32s cubic-bezier(0.2, 0.9, 0.25, 1); }
.big-pip__face i { position: absolute; top: 34%; width: 11%; height: 20%; border-radius: 999px; background: rgb(23, 23, 31); transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.5, 1); }
.big-pip__face i:first-child { left: 29.5%; }
.big-pip__face i:last-child { left: 59.5%; }
/* The pointer right over it: eyes a little wider. */
.big-pip.near .big-pip__face i { transform: scale(1.1, 1.14); }
.big-pip.calm .big-pip__body { animation: none; }

/* Under the footer: half of it, up to the eyes, over the page's bottom edge, leaning from
   its base. (Room above its head, so leaning, breathing and the bounce as it comes up
   never clip it.) */
.big-pip--foot { --d: clamp(280px, 58vw, 760px); --look-down: 0.3; height: calc(var(--d) * 0.64); margin: 40px -24px -48px; }
.big-pip--foot .big-pip__body { left: 50%; top: calc(var(--d) * 0.06); margin-left: calc(var(--d) / -2); transform-origin: 50% 100%; }
.big-pip--foot.wait .big-pip__body { translate: 0 36%; }
/* Behind its face, the name: nearly the page's width, in the wordmark's rounded letters,
   and faint enough to stay behind. It rises in with Pip. */
.big-pip__word {
  position: absolute; left: 50%; top: calc(var(--d) * 0.02); translate: -50% 0;
  font: 700 clamp(92px, 24.5vw, 470px)/0.9 "Fredoka", var(--display); letter-spacing: -0.02em; white-space: nowrap;
  color: rgba(255, 255, 255, 0.075); user-select: none;
}
.big-pip.wait .big-pip__word { opacity: 0; translate: -50% 12%; }
.big-pip.live .big-pip__word { transition: opacity 1.2s ease, translate 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
@media (max-width: 760px) {
  .big-pip--foot { margin: 36px -16px -40px; }
}

/* In the hero: leaning in from the window's right edge beside the heading, tilted toward
   the words, both eyes showing. It slides in once the heading has. Wide windows only:
   beside a phone's heading there's no room. */
.big-pip--hero { --d: clamp(300px, 26vw, 440px); --tilt: -18deg; --look-down: 0.7; position: absolute; top: 34px; right: 0; width: calc(var(--d) * 0.8); height: calc(var(--d) * 1.3); }
.big-pip--hero .big-pip__body { left: calc(var(--d) * 0.06); top: calc(var(--d) * 0.15); transform-origin: 50% 50%; }
.big-pip--hero.wait .big-pip__body { translate: 70% 0; }
/* Narrower, there's no room beside the heading: Pip sits on the demo Mac's top edge instead
   (main.js moves it into the Mac), on the right, upright, both eyes over the edge, so it's
   cut by the Mac itself wherever the Mac ends. The demo moves down to make room. */
@media (max-width: 1180px) {
  .hero { --pip-d: clamp(130px, 26vw, 220px); }
  .hero .demo-shell { margin-top: calc(var(--pip-d) * 0.64 + 14px); }
  .big-pip--hero { --d: var(--pip-d); --tilt: 0deg; --look-down: 0.3; top: auto; bottom: 100%; right: 9%; width: calc(var(--d) * 1.08); height: calc(var(--d) * 0.64); }
  .big-pip--hero .big-pip__body { left: calc(var(--d) * 0.04); top: calc(var(--d) * 0.06); transform-origin: 50% 100%; }
  .big-pip--hero.wait .big-pip__body { translate: 0 70%; }
}
.demo-shell.full .big-pip--hero { display: none; }