/* ============================================================
   FOOTER CONTROLS — language switcher + social links. Reused
   verbatim in two places: the mobile full-screen menu's footer
   and the final CTA section's footer row (see .footer-row below
   for how the two groups share one row there).
   ============================================================ */
.lang-switch {
  margin-top: clamp(34px, 5svh, 55px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 16px);
}
.lang-btn {
  position: relative; /* anchors the ::before tap-area expansion below */
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-disabled);
  text-decoration: none; /* it's an <a> now (a real link to the other
                            language URL), not a <button> — kill the
                            default underline */
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-05);
  transition: color var(--duration) var(--ease-standard);
  white-space: nowrap;
}
/* the visible label is only ~15px tall (well under the 44px tap-target
   minimum) but reads correctly at this small, quiet size for a footer
   control — an invisible expanded hit area closes the accessibility gap
   without changing how it looks. Width isn't expanded (the label is
   already wider than 44px), only height. */
.lang-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 44px;
}
.lang-btn.active { color: var(--text-muted); }
.lang-btn:hover:not(.active) { color: var(--gray-400); }
.lang-flag { font-style: normal; letter-spacing: 0; font-size: 14px; line-height: 1; }
/* on mobile: flags only, no text labels */
.lang-text { display: none; }
@media (min-width: 768px) {
  .lang-text { display: inline; }
}

/* footer — quiet, secondary; the waitlist form is still the one thing
   asking for attention on this screen */
.social-links {
  margin-top: var(--space-fluid-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 26px);
}
.social-links a {
  position: relative; /* anchors the ::before tap-area expansion below */
  display: flex;
  align-items: center;
  justify-content: center;
  /* icon glyph optically matched to the .final-footer-brand wordmark on
     the opposite side of the footer row — same size and visual mass, so
     the two ends of the row read as a balanced pair rather than a bold
     wordmark against faint little icons. 20px glyph in a 28px target. */
  width: 28px;
  height: 28px;
  opacity: 0.9;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
/* 28px is under the 44px tap-target minimum — an invisible expanded hit
   area closes the gap without growing the visible icon (which is sized
   deliberately, see above). Icons sit far enough apart (18px+ gap) that
   the expanded areas don't overlap between adjacent links. */
.social-links a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.social-links a:hover { opacity: 1; }
.social-links img { width: 20px; height: 20px; object-fit: contain; }

/* language switch and social links share one row in the footer */
.footer-row {
  margin-top: clamp(34px, 5svh, 55px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 32px);
}
.footer-row .lang-switch,
.footer-row .social-links { margin-top: 0; }
/* centred dot between the two footer groups — same quiet grey as the
   language separator it replaces */
.footer-sep {
  color: var(--border-default);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}