/* Hopwatch website. One stylesheet for every page: the app's cream day and plum night
   (follows prefers-color-scheme), candy hues from src/jelly/theme.ts, SF Pro Rounded via
   the system font stack. No external fonts or assets. */

:root {
  color-scheme: light dark;
  --bg: #FFF4E8;
  --card: #FFFBF6;
  --sunken: #F8E7D5;
  --line: #EEDCCB;
  --ink: #2B1B3D;
  /* The app's muted (#8C7A99) is too light for running text on cream; this one clears 5:1. */
  --muted: #6E5C7D;
  --link: #C22B74;
  --track: #F4E2D0;
  --track-rim: #FFF9F2;
  --track-shade: #E6CDB6;

  --pink: #FF6FB5;
  --blue: #4B8BFF;
  --violet: #A36AFF;
  --amber: #FFC53D;
  --orange: #FF8A3D;
  --green: #34C97E;

  --font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Nunito, Quicksand, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --measure: 36rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #150F1D;
    --card: #1E1728;
    --sunken: #241B2F;
    --line: #30263C;
    --ink: #FBF3FF;
    --muted: #A99BB8;
    --link: #FF8CC8;
    --track: #261D31;
    --track-rim: #3A2E47;
    --track-shade: #1A1323;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.14em; }

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 6px;
}

img { display: block; max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus { left: var(--gutter); top: 0.75rem; z-index: 10; background: var(--card); padding: 0.5rem 0.9rem; border-radius: 999px; }

/* Top bar: the app icon, the name, and a few quiet links. */
.bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.brand img { width: 2.25rem; height: 2.25rem; border-radius: 22%; }
.bar nav { margin-left: auto; display: flex; gap: 1.1rem; font-weight: 600; font-size: 0.98rem; }
.bar nav a { color: var(--ink); text-decoration: none; }
.bar nav a:hover { color: var(--link); }

/* Landing: the hero. Phones stack headline, lede, demo, stores; wide screens put the
   copy on the left and the live dial on the right. */
.hero {
  display: grid;
  gap: 0 3rem;
  padding-top: clamp(0.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.hero .demo { margin-top: 1.6rem; }
@media (min-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: 1fr auto auto 1fr; }
  .hero h1 { grid-row: 2; }
  .hero .lede { grid-row: 3; }
  .hero .stores { grid-row: 4; align-self: start; }
  .hero .demo { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}

h1 {
  margin: 0;
  font-size: clamp(2.6rem, 9.5vw, 4.6rem);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero h1 span { display: block; }

.lede {
  margin: 1.1rem 0 0;
  max-width: 32rem;
  font-size: clamp(1.08rem, 2.6vw, 1.22rem);
  line-height: 1.5;
}

.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 1.6rem; }

/* Store badges: Apple's and Google's artwork, unmodified (no tint, tilt or animation, as
   both brand guidelines ask), all 48 px tall. The Google PNGs are cropped to the badge, and the
   gap keeps the clear space of a quarter of the badge height that both ask for. */
.badge { display: block; flex: none; line-height: 0; }
.badge img { display: block; width: auto; height: 48px; }
.stores .soon { margin: 0; color: var(--muted); font-weight: 700; }

/* Jellies (jelly.js): a character in a box of --size, its body moving inside .jelly-move
   around the floor at 90 % of the height. Napping jellies breathe slowly. */
.jelly { position: relative; display: block; width: var(--size); height: var(--size); transform-origin: 50% 90%; }
.jelly-move { position: absolute; inset: 0; transform-origin: 50% 90%; will-change: transform; }
.jelly-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.jelly-sticker {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  line-height: 1;
  box-shadow: 0 1.5px 3px rgb(43 27 61 / 0.18);
  transform: rotate(var(--lean, 0deg));
  user-select: none;
}
.jelly.breathe { animation: jelly-breathe var(--breath, 2300ms) ease-in-out var(--phase, 0ms) infinite alternate; }
.jelly.breathe-stage { --breath: 1700ms; --b: 0.035; }
.jelly.is-offscreen { animation-play-state: paused; }
@keyframes jelly-breathe {
  to { transform: scale(calc(1 - var(--b, 0.028) * 0.5), calc(1 + var(--b, 0.028))); }
}
/* The glow under a jelly: a touch stronger at night, like the app. */
.jglow { stop-opacity: 0.32; }
.jglow-mid { stop-opacity: 0.16; }
@media (prefers-color-scheme: dark) {
  .jglow { stop-opacity: 0.55; }
  .jglow-mid { stop-opacity: 0.28; }
}
.jelly-mould { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.jelly-mould path { fill: var(--sunken); stroke: var(--c, var(--muted)); stroke-width: 1.8; stroke-dasharray: 4.5 4; stroke-linecap: round; opacity: 0.8; }

/* The demo: a 24-hour candy dial with the running jelly on stage. */
.demo { display: grid; justify-items: center; gap: 0.4rem; }

.dial {
  position: relative;
  width: min(100%, 25rem);
  aspect-ratio: 1;
}
.dial > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial .groove { fill: none; stroke: var(--track); stroke-width: 30; }
.dial .groove-rim { fill: none; stroke: var(--track-rim); stroke-width: 2; }
.dial .groove-shade { fill: none; stroke: var(--track-shade); stroke-width: 2; opacity: 0.8; }
.dial .flash { fill: none; stroke-width: 34; }
.dial .tick { fill: var(--muted); opacity: 0.35; }
.dial .hour { fill: var(--muted); font: 600 11px var(--font); letter-spacing: 0.04em; }
.dial .bean { fill: none; stroke-width: 19; stroke-linecap: round; }
.dial .bean-gloss { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: 0.45; }
.dial .head { filter: blur(5px); opacity: 0.8; }
.dial .head-dot { fill: #fff; }
/* The running bean, its glowing head and the ring flash redraw on their own layer, so the
   rest of the dial never repaints while a bean pours in. */
.dial-live { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
.dial-live .head { filter: none; opacity: 1; }
.head-stop { stop-color: var(--head, #4B8BFF); }

.center {
  position: absolute;
  inset: 21%;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}
.stage { position: relative; width: 52%; aspect-ratio: 1; margin-bottom: -4%; }
.stage-slot { position: absolute; inset: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stage-slot .jelly { width: 100%; height: 100%; }
.stage-floor {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(43 27 61 / 0.2), transparent);
  transition: opacity 0.2s;
}
@media (prefers-color-scheme: dark) { .stage-floor { background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), transparent); } }
.stage .is-away { opacity: 0; }
.center .name { font-weight: 800; font-size: clamp(1rem, 3.6vw, 1.2rem); line-height: 1.2; }
.timer {
  font-weight: 900;
  font-size: clamp(2rem, 8.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.timer small { font-size: 0.42em; font-weight: 800; color: var(--muted); letter-spacing: 0; }
.since { margin-top: 0.3rem; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* A label that just changed drops in with a jelly bounce. */
.boing { animation: boing 0.75s both; transform-origin: 50% 80%; }
@keyframes boing {
  from { transform: scale(1.18, 0.62); }
  to { transform: none; }
}
@supports (animation-timing-function: linear(0, 1)) {
  .boing { animation-timing-function: linear(0, 0.054, 0.196, 0.394, 0.618, 0.84, 1.039, 1.197, 1.306, 1.365, 1.375, 1.345, 1.285, 1.207, 1.122, 1.04, 0.968, 0.913, 0.877, 0.86, 0.86, 0.875, 0.9, 0.93, 0.962, 0.993, 1.018, 1.037, 1.049, 1.053, 1.052, 1.045, 1.035, 1.023, 1.011, 1, 0.991, 0.985, 0.981, 0.98, 1); }
}

/* The cast: tap a jelly to switch to it. They nap until picked, like in the app. */
.cast {
  display: flex;
  justify-content: center;
  gap: clamp(0.25rem, 2vw, 0.9rem);
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}
.cast button {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  width: clamp(4.4rem, 21vw, 5.6rem);
  padding: 0.2rem 0 0.4rem;
  border: 0;
  border-radius: 1.2rem;
  background: none;
  color: var(--ink);
  font: 700 0.86rem/1.2 var(--font);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.cast .slot { position: relative; width: 100%; aspect-ratio: 1; }
.cast .slot .jelly { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The running jelly's slot keeps an empty dimple in exactly its shape. */
.slot.is-away .jelly { opacity: 0; }
.slot.is-away .jelly-mould { opacity: 1; }
.cast [aria-pressed="true"] .label { color: var(--link); }

.hint { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--muted); transition: opacity 0.6s; }
.hint.is-done { opacity: 0; }

/* Flying jellies live above everything while they hop. */
.flyer-layer { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.flyer { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }

.splash {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.12);
  animation: splash 0.55s cubic-bezier(0.2, 0.75, 0.3, 1) forwards;
}
@keyframes splash {
  from { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  70% { opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }

/* Screens: a scroll-snapping strip on phones, four across on wide screens. */
main { overflow-x: clip; }
.section { padding-top: clamp(2.5rem, 7vw, 5rem); }
h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.section > p { max-width: var(--measure); margin: 0; color: var(--muted); }

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(62vw, 15rem);
  gap: 1rem;
  margin: 0.6rem calc(var(--gutter) * -1) 0;
  padding: 4.6rem var(--gutter) 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  list-style: none;
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
@media (min-width: 60rem) {
  .shots { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.shots li { position: relative; scroll-snap-align: start; }
.shots figure { position: relative; z-index: 1; margin: 0; }
.shots img {
  width: 100%;
  aspect-ratio: 460 / 1000;
  border-radius: 1.6rem;
  background: var(--sunken);
  box-shadow: 0 0 0 1px var(--line), 0 18px 36px -22px rgb(43 27 61 / 0.55);
}
.shots figcaption { margin-top: 0.8rem; font-size: 0.95rem; line-height: 1.4; color: var(--muted); }
.shots figcaption b { display: block; color: var(--ink); font-weight: 800; font-size: 1.05rem; }

/* A jelly peeking over the top of the first screenshot; boop it and it ducks. */
.peek {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 14%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(calc(16px - var(--rise, 0) * 80px));
}
html:not(.js-jelly) .peek { display: none; }

/* What else it does: every feature has a jelly doing its thing. */
.features {
  display: grid;
  gap: 2rem 3rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 46rem) { .features { grid-template-columns: 1fr 1fr; } }
.feat { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0 1rem; align-items: start; max-width: 34rem; }
.feat.has-card { grid-template-columns: minmax(0, 1fr); }
.feat h3 { margin: 0.2rem 0 0.25rem; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.feat p { margin: 0; }
.feat-jelly {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.4rem;
  min-height: 5.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.feat-jelly > [data-jelly] { display: block; }

.mini-dial { position: absolute; inset: -0.2rem; width: calc(100% + 0.4rem); height: calc(100% + 0.4rem); overflow: visible; }
.mini-groove { fill: none; stroke: var(--track); stroke-width: 9; }
.mini-day path { fill: none; stroke-width: 7; stroke-linecap: round; }
.mini-head { fill: #A36AFF; stroke: #fff; stroke-width: 2.4; }
.mini-day { transform-origin: 50px 50px; }
.mini-dial.is-spinning .mini-day { animation: day-spin 1.1s cubic-bezier(0.3, 0.1, 0.2, 1); }
@keyframes day-spin { to { transform: rotate(360deg); } }

.surprise {
  margin-top: 0.7rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font: 800 0.92rem/1.2 var(--font);
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.35), inset 0 -3px 0 rgb(0 0 0 / 0.12), 0 6px 14px -8px #DC3F8A;
  touch-action: manipulation;
}
.surprise:active { transform: scale(1.05, 0.9); }

.jar {
  position: relative;
  display: grid;
  grid-template-columns: 5.2rem auto;
  align-items: center;
  gap: 0 0.9rem;
  margin-top: 0.8rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.jar svg { grid-row: span 2; width: 5.2rem; height: auto; overflow: visible; }
.jar-glass { fill: rgb(255 255 255 / 0.45); stroke: var(--line); stroke-width: 3; }
@media (prefers-color-scheme: dark) { .jar-glass { fill: rgb(255 255 255 / 0.05); stroke: #3A2E47; } }
.jar-fill { fill: #34C97E; }
.jar-surface { fill: none; stroke: #86E7B5; stroke-width: 5; stroke-linecap: round; }
.jar-shine { fill: #fff; opacity: 0.55; }
.jar-lid { fill: #34C97E; stroke: #1B9A5B; stroke-width: 2; }
.jar-label { font-weight: 800; font-variant-numeric: tabular-nums; align-self: end; }
.jar-star { align-self: start; font-weight: 800; color: #1B9A5B; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@media (prefers-color-scheme: dark) { .jar-star { color: #86E7B5; } }
.jar-star.is-on { opacity: 1; transform: none; }

/* The Lock Screen card mirrors whatever runs in the hero above. */
.live {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15rem 0.7rem;
  margin-top: 0.9rem;
  padding: 0.75rem 0.9rem 0.8rem;
  border-radius: 1.4rem;
  background: rgb(43 27 61 / 0.88);
  color: #FBF3FF;
  max-width: 22rem;
  box-shadow: 0 14px 30px -18px rgb(43 27 61 / 0.8);
}
@media (prefers-color-scheme: dark) { .live { background: #241B2F; box-shadow: 0 0 0 1px #30263C; } }
.live-jelly { width: 44px; height: 44px; }
.live-text { display: grid; line-height: 1.25; }
.live-name { font-weight: 800; }
.live-since { font-size: 0.82rem; opacity: 0.7; }
.live-timer { font-weight: 900; font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.live-pills { grid-column: 1 / -1; display: flex; gap: 0.45rem; margin-top: 0.45rem; }
.live-pills span { padding: 0.32rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 800; background: rgb(255 255 255 / 0.14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The ghost goes see-through, all but its face. */
.jelly .skin { transition: opacity 0.6s; }
.jelly.is-boo .skin { transition: opacity 0.25s; opacity: 0.12; }

/* Apple Intelligence: the jelly thinks, then gets its suggestion. */
.suggested {
  position: absolute;
  left: 50%;
  bottom: -0.6rem;
  translate: -50% 0;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.suggested.is-on { opacity: 1; transform: none; }
[data-feature="ai"].is-thinking .feat-jelly::before {
  content: "···";
  position: absolute;
  top: -0.4rem;
  right: 0;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--muted);
  animation: think 0.9s ease-in-out infinite alternate;
}
@keyframes think { from { opacity: 0.3; } to { opacity: 1; } }

/* English and German: two jellies chatting. */
.chat { display: flex; align-items: end; justify-content: center; gap: 0.1rem; width: 5.4rem; }
.talker { position: relative; display: grid; justify-items: center; }
.bubble {
  position: relative;
  margin-bottom: 0.2rem;
  padding: 0.12rem 0.42rem;
  border-radius: 0.7rem;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Sections pop in with a squish as they scroll into view (hop.js adds .is-in). */
html.will-pop .pop { opacity: 0; }
html.will-pop .pop.is-in { animation: pop-in 0.9s var(--delay, 0ms) both; transform-origin: 50% 100%; }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(18px) scale(0.92, 0.84); }
  25% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@supports (animation-timing-function: linear(0, 1)) {
  html.will-pop .pop.is-in { animation-timing-function: linear(0, 0.045, 0.161, 0.323, 0.506, 0.691, 0.862, 1.007, 1.119, 1.196, 1.24, 1.254, 1.244, 1.215, 1.174, 1.127, 1.08, 1.037, 0.999, 0.971, 0.951, 0.939, 0.935, 0.938, 0.945, 0.955, 0.967, 0.979, 0.99, 1, 1.007, 1.012, 1.015, 1.016, 1.016, 1.014, 1.011, 1.008, 1.005, 1.003, 1); }
}

/* Text pages: privacy, support, Impressum. A calm jelly keeps the title company. */
.page { padding-top: clamp(1rem, 4vw, 2.5rem); padding-bottom: 1rem; }
.page-title { display: flex; align-items: end; justify-content: space-between; gap: 1rem; max-width: var(--measure); }
.page-title [data-jelly] { flex: none; margin-bottom: -0.2rem; }
.page h1 { font-size: clamp(2.3rem, 8vw, 3.4rem); }
.page .lede { max-width: var(--measure); }
.updated { margin: 0.8rem 0 0; font-size: 0.9rem; color: var(--muted); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.4rem; font-size: clamp(1.3rem, 4vw, 1.6rem); }
.prose p, .prose ul, .prose ol, .prose address { margin: 0 0 0.9rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose address { font-style: normal; }
.prose dl { margin: 0 0 0.9rem; display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; }
.prose dt { color: var(--muted); }
.prose dd { margin: 0; }
.note {
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  border-radius: 1.1rem;
  background: var(--sunken);
}
.note p { margin: 0; }
.mail { font-weight: 800; font-size: 1.15rem; }

/* Footer: the credit, and the legal links every page needs. */
.site-foot {
  margin-top: clamp(3.5rem, 9vw, 6rem);
  padding-top: 1.4rem;
  padding-bottom: 2.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  font-size: 0.95rem;
  color: var(--muted);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
/* The trademark credits the store badges require. */
.site-foot .marks { flex-basis: 100%; margin: 0; font-size: 0.75rem; line-height: 1.5; }
.credit {
  display: inline-flex;
  align-items: end;
  gap: 0.45rem;
  margin: 0 auto 0 0;
  color: var(--ink);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.01em;
  cursor: default;
}
.credit [data-jelly] { flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}