/* ─────────────────────────────────────────────────────────────────────────
   Two finishing touches: a route through "How it works", and the footer.
   ───────────────────────────────────────────────────────────────────────── */

/* ── How it works: the route ─────────────────────────────────────────────
   The section stays as spacious as it was. The one addition is the idea the
   whole page runs on: a courier route, here joining the three steps. When the
   section arrives the line draws from stop to stop and each number lights as
   the route reaches it; the last stop keeps a slow pulse.

   Dimmed only once touches.js has armed it (.how-armed), so with no script,
   no IntersectionObserver or reduced motion the section is simply fully lit
   from the start. */

#how .steps { position: relative; }
#how .st { position: relative; padding-top: 34px; }
#how .st:nth-child(1) { --d: 0s; }
#how .st:nth-child(2) { --d: .75s; }
#how .st:nth-child(3) { --d: 1.5s; }

#how .st::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--lime);
  box-shadow: 0 0 0 5px rgba(201, 238, 10, .12);
  transition: background .45s, border-color .45s, box-shadow .45s;
  transition-delay: var(--d);
}
/* Segment from this stop to the next column's. The next stop sits one
   column plus the 16px gap to the right; the line starts 4px clear of this
   dot and ends 4px short of that one. */
#how .st:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 5px;
  width: calc(100% - 4px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lime), rgba(201, 238, 10, .35));
  transform-origin: left center;
  transition: transform .75s cubic-bezier(.6, 0, .2, 1);
  transition-delay: calc(var(--d) + .1s);
}
#how .st b { transition: color .5s; transition-delay: var(--d); }

#how.how-armed .st::before { background: var(--bg); border-color: rgba(201, 238, 10, .35); box-shadow: none; }
#how.how-armed .st::after { transform: scaleX(0); }
#how.how-armed .st b { color: rgba(201, 238, 10, .22); }

#how.how-armed.is-in .st::before { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 5px rgba(201, 238, 10, .12); }
#how.how-armed.is-in .st::after { transform: scaleX(1); }
#how.how-armed.is-in .st b { color: var(--lime); }
#how.how-armed.is-in .st:last-child::before { animation: how-pulse 2.8s ease-out 2.4s infinite; }

@keyframes how-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 238, 10, .45); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(201, 238, 10, 0); }
}

/* Stacked on a phone, so the route runs down the left instead. */
@media (max-width: 860px) {
  #how .st { padding: 0 0 0 32px; }
  #how .st::before { top: 22px; }
  #how .st:not(:last-child)::after {
    left: 5px;
    top: 38px;
    width: 2px;
    height: calc(100% - 4px);
    background: linear-gradient(180deg, var(--lime), rgba(201, 238, 10, .35));
    transform-origin: center top;
  }
  #how.how-armed .st::after { transform: scaleY(0); }
  #how.how-armed.is-in .st::after { transform: scaleY(1); }
}

/* ── Footer ───────────────────────────────────────────────────────────────
   The Robinhood shape: a clear set of link columns, a quiet legal line, and
   the name set large across the foot of the page. The live part is a status
   line that is actually live — Douala's clock, how many listings are active
   right now, and when the newest went up — rather than a decoration that
   pretends to be. */

footer.ft3 {
  display: block;
  position: relative;
  margin-top: clamp(40px, 6vw, 80px);
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  color: var(--ink);
  text-align: left;
}

.ft3-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 22px 0;
  font-size: 13px;
  color: var(--mute);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ft3-live b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ft3-live .sep { opacity: .4; }
.ft3-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(201, 238, 10, .5);
  animation: ft3-beat 2.4s ease-out infinite;
  flex: none;
}
@keyframes ft3-beat { 0% { box-shadow: 0 0 0 0 rgba(201, 238, 10, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(201, 238, 10, 0); } }
.ft3-live [hidden] { display: none !important; }

.ft3-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.7fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
}
.ft3-brand .brand { display: inline-flex; color: var(--ink); text-decoration: none; }
.ft3-brand p { color: var(--mute); margin: 14px 0 22px; max-width: 32ch; font-size: 15px; }
.ft3-get { display: flex; flex-wrap: wrap; gap: 10px; }
.ft3-get a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ft3-get .play { background: var(--lime); color: #0a0b10; }
.ft3-get .web { color: var(--ink); border: 1px solid rgba(255, 255, 255, .14); }
.ft3-get .web:hover { border-color: rgba(255, 255, 255, .3); }

/* `nav` is still styled bare in styles.css (flex, centred, padding) —
   overridden here. Its align-items: center staggered the four headings,
   centring columns of different lengths against each other. */
nav.ft3-cols {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  position: static;
  background: none;
  border: 0;
  box-shadow: none;
}
.ft3-cols h4 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.ft3-cols a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  padding: 6px 0;
  opacity: .86;
  transition: opacity .2s, color .2s;
}
.ft3-cols a:hover { opacity: 1; color: var(--lime); }
.ft3-cols a.quiet { color: var(--mute); font-size: 13px; overflow-wrap: anywhere; }

.ft3-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 12.5px;
  color: rgba(139, 144, 163, .8);
}

/* The name across the foot, cropped by the edge of the page. A courier dot
   travels the line beneath it now and then — the same route that runs
   through the map behind the page and through "How it works". */
.ft3-mark {
  position: relative;
  margin: 0 calc(-1 * clamp(20px, 5vw, 96px));
  padding: 0 clamp(20px, 5vw, 96px);
  height: clamp(70px, 13vw, 190px);
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}
.ft3-word {
  display: block;
  font-size: clamp(64px, 15.5vw, 236px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .9;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(244, 246, 239, .16), rgba(244, 246, 239, .02) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ft3-route {
  /* No drawn line: across the letters it read as a strikethrough. Just the
     courier and a short streak behind it, gliding over the tops of the
     letters. */
  position: absolute;
  left: clamp(20px, 5vw, 96px);
  right: clamp(20px, 5vw, 96px);
  top: 8px;
  height: 1px;
}
.ft3-route i::before {
  content: "";
  position: absolute;
  right: 3px;
  top: 2px;
  width: 70px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(201, 238, 10, .5));
}
.ft3-route i {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px 2px rgba(201, 238, 10, .55);
  animation: ft3-courier 11s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes ft3-courier {
  0%   { left: 0;    opacity: 0; }
  6%   { opacity: 1; }
  45%  { left: 48%; }
  55%  { left: 48%; }   /* a stop on the way */
  94%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (max-width: 860px) {
  .ft3-top { grid-template-columns: 1fr; }
  nav.ft3-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 520px) {
  .ft3-legal { flex-direction: column; }
  /* .wrap's gutter drops to 16px here; the full-bleed name must match it or
     it pokes 4px past the edge of the screen. */
  .ft3-mark { margin: 0 -16px; padding: 0 16px; }
  .ft3-route { left: 16px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ft3-dot, .ft3-route i, #how.how-armed.is-in .st:last-child::before { animation: none; }
  .ft3-route i { left: 48%; }
}

/* ── Language switch ───────────────────────────────────────────────────────
   Next to "Get the app", so it stays on screen when the links collapse on a
   phone. A plain link to the other page, not a script toggle: each language
   is its own URL, which is what search engines index. */
.nav-end { display: flex; align-items: center; gap: 10px; flex: none; }
.lang-sw {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); color: var(--mute, #8b90a3);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-decoration: none;
  transition: color .2s, border-color .2s;
}
.lang-sw:hover, .lang-sw:focus-visible { color: var(--ink, #f4f6ef); border-color: rgba(201,238,10,.5); }
/* With the switch beside the button there is no longer room for the name on
   one line on a phone; it takes two ("Mambanda / Market") instead of running
   under the switch. */
@media (max-width: 480px) {
  .site-nav .brand { white-space: normal; line-height: 1.05; }
  .lang-sw { min-width: 36px; min-height: 36px; padding: 0 9px; font-size: 12px; }
  .nav-end { gap: 6px; }
}