/* ═══════════════ THE FOOTER, REDESIGNED: THE FINAL CHAPTER (5 Oct 2026) ═══════════════
   Same card, same release, same tokens: .foot__card keeps page.js §4b's transform and
   #footer keeps its theme tokens (--deep / --deep-fg / --deep-fg2 / --deep-fg3 /
   --deep-line), so dark is Sëëk's plum-black and light is the light theme's own
   footer material. Only what is INSIDE the card is new.

   HIERARCHY, top to bottom: the brand; ONE invitation (display serif, the largest
   type in the card) with ONE action (a full-width white button on phones); a
   quieter navigation in which Explore leads and Availability is a status, not a
   menu; then the small print, behind the card's only hairline. */

.ft { padding: 28px 24px 20px; }

/* ── the invitation ─────────────────────────────────────────────────────── */
.ft__brand {
  display: inline-flex; align-items: center; gap: 10px;
  padding-block: 11px; margin-block: -11px;        /* a 44px target without moving the type */
  color: var(--deep-fg);
  font-family: var(--f-ui); font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none;
}
.ft__brand img { width: 34px; height: auto; }

.ft__h {
  margin: 40px 0 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: 38px; line-height: 1.04; letter-spacing: -.028em;
  color: var(--deep-fg);
}
.ft__sub {
  margin: 16px 0 0; max-width: 34ch;
  font-family: var(--f-ui); font-size: 16px; line-height: 1.5; letter-spacing: -.01em;
  color: var(--deep-fg2); text-wrap: pretty;
}
.ft__cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 54px; margin-top: 28px; padding: 0 28px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: #FFFFFF; color: #16111F;
  font-family: var(--f-ui); font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-enter);
}
.ft__cta:hover { transform: translateY(-1.5px); }

/* the no-JavaScript form: the sheet's field and notice, in the footer's tones */
.ft__form { display: flex; flex-direction: column; margin-top: 24px; max-width: 420px; }
.ft__label { margin: 0 0 8px 2px; font-size: 13px; font-weight: 500; color: var(--deep-fg2); }
.ft__form input {
  height: 54px; padding: 0 18px; border: 0; border-radius: 14px;
  background: rgba(255,255,255,.06); color: var(--deep-fg);
  box-shadow: inset 0 0 0 1px var(--deep-line);
  font-family: var(--f-ui); font-size: 16px;
}
.ft__form .ft__cta { margin-top: 12px; }
.ft__legal { margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: var(--deep-fg3); }
.ft__legal a { color: var(--deep-fg); text-decoration: underline; text-underline-offset: 2px; }

/* ── the navigation: Explore leads, Availability is a status ─────────────── */
.ft__nav {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px;
  margin-top: 56px;
}
.ft__kicker {
  margin: 0 0 12px;
  font-family: var(--f-ui); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--deep-fg3);
}
.ft__nav ul { margin: 0; padding: 0; list-style: none; }
.ft__group--explore a {
  display: block; padding: 10px 0;                 /* 44px rows: easy to tap, still a list */
  color: var(--deep-fg);
  font-family: var(--f-ui); font-size: 19px; line-height: 24px; letter-spacing: -.015em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-enter);
}
.ft__group--status li {
  display: flex; align-items: center; gap: 8px; padding: 11px 0;
  color: var(--deep-fg2);
  font-family: var(--f-ui); font-size: 16px; line-height: 22px; letter-spacing: -.01em;
}
.ft__live { color: var(--deep-fg); }
.ft__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.ft__group--status a {
  display: block; margin: -11px 0; padding: 11px 0;
  color: var(--deep-fg); text-decoration: underline; text-decoration-color: var(--deep-line);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease-enter);
}
.ft__group--explore a:hover { color: var(--deep-fg2); }
.ft__group--status a:hover { text-decoration-color: currentColor; }
/* Contact (added 6 Oct 2026, once hello@ was verified to send and receive): one address
   on its own row under the two groups, in the status rows' type, so Explore still leads */
.ft__group--contact { grid-column: 1 / -1; }
.ft__mail {
  display: inline-block; padding: 11px 0; margin: -11px 0;   /* a 44px target */
  color: var(--deep-fg);
  font-family: var(--f-ui); font-size: 16px; line-height: 22px; letter-spacing: -.01em;
  text-decoration: underline; text-decoration-color: var(--deep-line); text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease-enter);
}
.ft__mail:hover { text-decoration-color: currentColor; }

/* ── the small print: secondary, but not all one weight ──────────────────── */
.ft__base {
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--deep-line);
  font-family: var(--f-ui);
}
.ft__legalrow { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ft__privacy {
  display: inline-block; padding-block: 13px; margin-block: -13px;
  color: var(--deep-fg); font-size: 16px; letter-spacing: -.01em;
  text-decoration: none;
}
.ft__privacy:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft__meta { color: var(--deep-fg3); font-size: 14px; }
.ft__endrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 26px;
  color: var(--deep-fg3); font-size: 14px;
}
.ft__top {
  display: inline-flex; align-items: center; gap: 6px;
  padding-block: 14px; margin-block: -14px;
  color: var(--deep-fg2); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-enter);
}
.ft__top:hover { color: var(--deep-fg); }

/* ── wider: the same order, using the width ──────────────────────────────── */
@media (min-width: 640px) {
  .ft__cta { display: inline-flex; width: auto; }
}
@media (min-width: 760px) {
  .ft { padding: 48px 48px 28px; }
  .ft__h { font-size: 48px; }
}
@media (min-width: 1000px) {
  .ft { padding: 64px 64px 32px; }
  /* the invitation on the left, the navigation on the right, bottoms aligned */
  .ft__main {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 120px); align-items: end;
  }
  .ft__h { font-size: clamp(52px, 2.2vw + 26px, 64px); }
  .ft__sub { font-size: 17px; }
  .ft__nav { margin-top: 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
  .ft__base {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    margin-top: 72px;
  }
  .ft__legalrow { flex-direction: row; align-items: center; gap: 28px; }
  .ft__endrow { margin-top: 0; gap: 32px; }
}

/* ── the sheet's privacy notice (seek-next-fmot.css styles the sheet) ────── */
.wlm__legal {
  margin: 14px 0 0; text-align: center;
  font-family: var(--f-ui); font-size: 13px; line-height: 1.4; letter-spacing: -.005em;
  color: var(--wlm-ink3); text-wrap: pretty;
}
.wlm__legal a {
  color: var(--wlm-ink); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
  /* a 44px-tall hit area: vertical padding on an inline box grows what can be tapped
     without moving a single line; the side padding is handed back by the margin */
  padding: 14px 4px; margin: 0 -4px;
}
.wlm__legal + .wlm__note { margin-top: 4px; }