/* =============================================================================
   t1963 privacy links; t1961 border-as-focus; t1960 +8px; t1959 PHASE1; t1956/t1957 X-icon + focus; t1955 crimson chips; t1953/t1954 (Mac sync authorized t1952u)
   Brand exception: red allowed for footer + logo. VP+Distribution consensus on t1948.
   Text-only platform chips; outline selected; Request an invite eyebrow; no Get the app;
   crimson glow behind card (off mobile); tighter left composition; >=12px type; 44px targets.
   ============================================================================= */

/* FOOTER (t1925, revised t1932, redesigned t1938): the site footer. Every selector is scoped under .ftr, except the one nav-fade block at the
   end (html.ftr-nav-ready / html.ftr-nav-off .nav, the t1938 "fade the nav pill while the footer is in view" rule), so nothing here can reach the hero, menu, invite flow, carousel, team or FAQ.
   References (elements only; no photo, copy or brand taken): Seasats (image background under a scrim, an oversized wordmark, footer stats), Function (an app area and the QR idea), Maze (a large wordmark, a separate social strip, a final CTA card).
   Image: the paused first frame of the approved hero master (assets/media/hero_white_sharp_desktop_master_v1_3840x2160_h264.mp4, sha256 bc5a9400...ebc42e, male v2 render, t2060u); no new image. NO App Store badge (Apple disallows pre-launch use; see assets/appstore/PROVENANCE.json).

   t1938 DESIGN SYSTEM (Tavio: "so high and distorted with no proper design principles and spacing"):
   - Spacing: ONE 8px scale, --s1 8, --s2 16, --s3 24, --s4 32, --s5 48, --s6 64. Every gap, padding and margin below is one of these (the 44px tap targets and the 1px hairlines are the only other numbers).
   - Grid: 12 columns, 24px gutter (--s3), max content 1352px, the page gutter (--gutter 44 / 28 / 16). Named areas (t1938b): 1280px+  stat nav cta / wm cta / wm soc / wm app (every block starts on a quarter line: columns 1, 5 or 9);  700-1279px  stat cta / nav cta / app cta / wm soc;  under 700px one column stat, nav, cta, soc, app, wm.
     Column tops line up (countdown, links and card start the first row), on desktop the card, the social strip and the app area occupy the SAME columns (9-12: same width, same left edge, stacked card, strip, app), the wordmark spans columns 1-8
     (capped at 840px) beside that stack, its bottom is the bottom of the stack (the app area's bottom sits on the wordmark's BASELINE: its margin is .075 x the wordmark width, the 'y' descender is 23.9% of the height), and 64px of clear space
     separates the wordmark's last pixel from the legal hairline, so the bottom band is full, not empty.
   - Type: five roles only. Eyebrow 12/16 500 uppercase .14em; label 14/20 500; body 16/24 400; heading 24/32 500 (22/28 under 700px); numbers 500 at --ftr-cdn (clamp 32 to 64px), tabular. Nothing else.
   - Image: calm. The scrim never drops below .78 alpha (it was .72), so the face silhouette is a faint tone behind everything; text sits on it at AA (checked in _tools/sections_check.py).
   CONTRAST (worst case = a pure-white video pixel under the LOWEST scrim alpha .78, a #383838 backdrop): white text 12:1, --ftr-mute #C9CCD1 7:1 (AA 4.5:1). The card is solid: ink on #F7F7F7 18:1, #4B4E53 7.8:1, white on the #0A0A0A button 19:1,
   field border #6B6E73 about 5:1 (non-text 3:1), error #B3261E 6:1. The bottom row is on #000: #C9CCD1 12:1.
   W6 (Nov 11, measured): placeholder #767676 on the white field 4.54:1 (was #8A8A8A, 3.45); the selected platform chip and the Sent pill are white on
   #DE321E 4.58:1 (was #E13A26, 4.34); focus on the light card, fields and legal bar is #D6311E, 4.54:1 on #F7F7F7 and 4.86:1 on white (was #E13A26, 4.05);
   on the selected chip the focus ring is white, 4.58:1 (it was crimson on crimson); the unselected chip's hover text is #C92E1B, 4.54:1 on its tint (was 3.65).
   Motion: the invite card's Send-to-Sent (js/footer.js, t2053u/t2054u, t2078u) is one continuous 450ms motion on the hero's ease-out cubic: the button rises into the fields' place while it narrows, rounds and turns from black to the Crimson pill, its label crossfading to "Sent" on the hero's timings; the fields fade (180ms) and the card's height eases on the same curve; the check then draws (280ms) with no pause. The card stays white. under prefers-reduced-motion it is instant. The countdown digits are plain text swaps; with prefers-reduced-motion the seconds are hidden and the digits change once a minute (js/footer.js). The nav fade has no transition under reduced motion. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ftr { --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;
  --ftr-mute: #FFEDE9; --ftr-line: rgba(255, 255, 255, .24); --ftr-accent: #E13A26; --ftr-ring: #D6311E; --ftr-on: #DE321E;   /* W6: ring 4.54:1 on the card; white on --ftr-on 4.58:1 */
  --ftr-card: #F7F7F7; --ftr-card-ink: #0A0A0A; --ftr-card-mute: #4B4E53; --ftr-field: #6B6E73; --ftr-err: #B3261E; --ftr-cdn: clamp(32px, 4.5vw, 64px);
  position: relative; isolation: isolate; overflow: hidden; background: #831613; color: #fff; font: 400 16px/24px var(--font); }

/* Image background + scrim: calm, never below .78 */
.ftr-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #831613; }
.ftr-field { position: absolute; display: block; pointer-events: none; }
.ftr-field-deep { inset: 0; background: #831613; }
.ftr-field-crimson {
  top: 8%; right: 2%; width: min(42%, 560px); height: 70%;
  background: radial-gradient(ellipse 65% 55% at 50% 40%, rgba(225, 58, 38, .70) 0%, rgba(225, 58, 38, .28) 48%, rgba(225, 58, 38, 0) 72%);
  opacity: .95;
}
@media (max-width: 699px) {
  .ftr-field-crimson { display: none; } /* flat deep red on mobile */
}
.ftr-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(131, 22, 19, .35) 0%, rgba(131, 22, 19, .08) 28%, rgba(131, 22, 19, 0) 48%, rgba(131, 22, 19, .12) 78%, rgba(131, 22, 19, .25) 100%); }

.ftr-in { position: relative; max-width: calc(1352px + 2 * var(--gutter)); margin: 0 auto; padding: var(--s5) var(--gutter); }
.ftr :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ftr-cta :focus-visible { outline-color: var(--ftr-ring); }

/* The grid */
.ftr-top { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "stat" "nav" "cta" "soc" "wm"; gap: var(--s4) var(--s3); align-items: start; }
.ftr-stat { grid-area: stat; }
.ftr-nav { grid-area: nav; }
.ftr-cta { grid-area: cta; }
.ftr-app { display: none !important; }
.ftr-soc { grid-area: soc; }
.ftr-wm { grid-area: wm; }

/* Type roles */
.ftr-eye { display: none; } /* t1953 removed */
.ftr-lbl { margin: 0 0 var(--s2); color: var(--ftr-mute); font: 600 12px/16px var(--font); letter-spacing: .14em; text-transform: uppercase; }
.ftr-tx { margin: 0; font: 400 16px/24px var(--font); }

/* Invite card: inline email + optional social handle + Request Invite. js/footer.js sends it through js/invite.js (lane W3). */
.ftr-cta { position: relative; min-width: 0; padding: var(--s3); background: var(--ftr-card); color: var(--ftr-card-ink); }
.ftr-cta.is-sent-animating { overflow: hidden; }
.ftr-cta.is-sent-animating .ftr-form { pointer-events: none; }
.ftr-cta.is-sent-animating .ftr-btn[aria-disabled="true"] { background: #0A0A0A; }   /* t2053u: the button keeps its colour while it turns to Sent, as the hero's does */
.ftr-cta h2 { display: none; }
.ftr-form { display: grid; gap: var(--s2); margin: 0; }
.ftr-f { display: grid; gap: var(--s1); min-width: 0; margin: 0; padding: 0; border: 0; container-type: inline-size; container-name: ftrf; }
.ftr-f label { color: var(--ftr-card-ink); font: 500 14px/20px var(--font); }
.ftr-f .ftr-opt { color: var(--ftr-card-mute); font-weight: 400; }
.ftr-box { display: flex; align-items: center; min-width: 0; min-height: 48px; padding: 0 var(--s2); border: 1px solid var(--ftr-field); border-radius: 0; background: #fff; }
/* t1961: focus = existing border turns crimson (no outer outline/gap). 1px border + 1px 0-spread shadow ≈ 2px, no layout shift */
.ftr-box:focus-within {
  outline: none;
  border-color: var(--ftr-ring);
  box-shadow: 0 0 0 1px var(--ftr-ring);
}
.ftr-box[data-invalid],
.ftr-box[data-invalid]:focus-within {
  outline: none;
  border: 1px solid var(--ftr-err);
  box-shadow: 0 0 0 1px var(--ftr-err); /* same in-border pattern; focused+invalid stays error, no second ring */
  padding: 0 var(--s2);
}
.ftr-box input { flex: 1 1 auto; min-width: 0; width: 100%; height: 46px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ftr-card-ink); font: 400 16px/24px var(--font); outline: none; -webkit-appearance: none; appearance: none; }
/* beat .ftr :focus-visible + global :focus-visible — input never draws a second ring */
.ftr-cta .ftr-box input:focus,
.ftr-cta .ftr-box input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.ftr-box input::placeholder { color: #767676; opacity: 1; }
.ftr-box input::-webkit-input-placeholder { color: #767676; opacity: 1; }
.ftr-box input::-moz-placeholder { color: #767676; opacity: 1; }
.ftr-pre { flex: 0 0 auto; margin-right: 2px; color: var(--ftr-card-mute); font: 400 16px/24px var(--font); }
.ftr-err { margin: 0; color: var(--ftr-err); font: 500 14px/20px var(--font); }
.ftr-err:empty { display: none; }
/* Social choice: an equal 3-column segmented control, one row at every width; the text hides (kept for screen readers) when a cell is too narrow */
.ftr-plat { min-width: 0; margin: 0; padding: 0; border: 0; }
.ftr-f .ftr-box + .ftr-plat .ftr-seg {
  border-top: 0; /* joins the handle field as one control group */
  margin-top: -1px;
}
.ftr-plat-lbl { display: none; } /* t1953: no visible Platform label */
.ftr-seg { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ftr-field); background: #fff; }
.ftr-chip { position: relative; display: block; min-width: 0; }
.ftr-chip + .ftr-chip { border-left: 1px solid var(--ftr-field); }
.ftr-r { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ftr-cb { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 44px; padding: 0 4px; color: var(--ftr-card-ink); font: 500 14px/20px var(--font); }
.ftr-cb svg { display: block; width: 16px; height: 16px; flex: 0 0 auto; }
/* t1955: all platforms selected = solid crimson; unselected hover = tinted crimson (not solid) so selected stays distinct */
.ftr-r:checked + .ftr-cb { background: var(--ftr-on); color: #fff; box-shadow: none; font-weight: 600; } /* W6: white on #DE321E 4.58:1 */
.ftr-chip:has(.ftr-r:not(:checked)):hover .ftr-cb {
  background: rgba(225, 58, 38, .12); color: #C92E1B; box-shadow: inset 0 0 0 1px #E13A26;   /* W6: text 4.54:1 on the tint */
}
.ftr-r:focus-visible + .ftr-cb { outline: 2px solid var(--ftr-ring); outline-offset: -4px; }
.ftr-r:checked:focus-visible + .ftr-cb { outline-color: #fff; }   /* W6: on the selected chip a crimson ring disappeared */
/* platform labels always visible */
/* t1956: X chip is logo-only (accessible name via aria-label + .sr-only); .ftr-cb flex already centers the icon */
.ftr-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 var(--s3); border: 0; border-radius: 0; background: #0A0A0A; color: #fff;
  font: 500 16px/24px var(--font); text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; } /* t1955: black CTA vs crimson chips */
.ftr-btn:hover { background: #222; }
.ftr-btn:focus-visible { outline: 2px solid var(--ftr-ring); outline-offset: 2px; }
.ftr-btn[aria-disabled="true"] { cursor: default; background: #5C5C5C; }
.ftr-btn[aria-busy="true"] { background: #0A0A0A; }   /* W3: while the request is out the button keeps its black and reads "Sending...", as the hero's Send keeps its white */
/* W3: the state line under the button (too many tries, something went wrong; read out by #ftr-live) */
.ftr-msg { margin: 0; color: var(--ftr-err); font: 500 14px/20px var(--font); }
.ftr-msg:empty { display: none; }
/* t2067u, t2078u, t2079u Sent state: the card keeps its white; the button settles as a Crimson pill reading "Sent ✓". Nothing else (the footer already shows the Phase 1 date). */
.ftr-sent { display: flex; align-items: flex-start; width: 100%; cursor: default; }
.ftr-sent-b { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 48px; padding: 0 var(--s3); border-radius: 24px; background: var(--ftr-on); color: #fff; font: 500 16px/24px var(--font); }
.ftr-sent svg { display: block; width: 24px; height: 24px; }
.ftr-sent:focus { outline: none; }
.ftr-cta [hidden] { display: none; }

/* Stats: the Phase 1 countdown (no other metric). Four units in one row on one baseline: seconds are the same size as the others, only muted. */
.ftr-stat { min-width: 0; }
.ftr-cd { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start; align-items: start; gap: 0 var(--s2); margin: 0; }
.ftr-un { display: flex; flex-direction: column; min-width: 0; }
.ftr-n { font: 500 var(--ftr-cdn)/1 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ftr-k { margin-top: var(--s1); color: var(--ftr-mute); font: 500 12px/16px var(--font); letter-spacing: .14em; text-transform: uppercase; }
.ftr-un.s .ftr-n { color: var(--ftr-mute); }
.ftr-cap { margin: var(--s2) 0 0; color: var(--ftr-mute); font: 500 14px/20px var(--font); }
.ftr-shut { margin: 0; font: 500 var(--ftr-cdn)/1 var(--font); letter-spacing: -0.03em; }
.ftr-stat [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ftr-un.s { display: none; } }

/* Links — t2026u / t2027u: two category groups (Product, Company) with the same bold uppercase label style as Explore.
   The two columns stay close (48px, 64px on desktop) rather than stretching across the nav area, with clear room from the Phase 1 countdown
   (padding-left on desktop, extra margin-top when the groups sit under the timer). */
.ftr-nav {
  min-width: 0;
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  column-gap: var(--s5); /* 48px: tight, intentional gap between Product and Company */
  align-items: start;
}
.ftr-group { min-width: 0; }
.ftr-nav .ftr-lbl {
  margin: 0 0 var(--s1); /* 8px to first link — proximity tighter than group gaps */
  color: #fff;
  font: 700 12px/16px var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
} /* category label: heavier than body links */
/* t1959: PHASE 1 REQUESTS CLOSE matches EXPLORE weight/contrast (FOLLOW STAXYZ unchanged) */
.ftr-stat > .ftr-lbl {
  margin: 0 0 var(--s2);
  color: #fff;
  font: 700 12px/16px var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ftr-links { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.ftr-links li { display: flex; }
.ftr-links a {
  display: inline-flex; align-items: center;
  min-height: 40px; /* 8px grid; desktop column stack uses this as row rhythm */
  padding: 0;
  font: 400 16px/24px var(--font);
}
.ftr-links a { color: #fff; text-decoration: none; }
.ftr-links a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* App area (on the grid, columns 1-5, bottom-aligned with the card): the app area is hidden (display: none). */
.ftr-app { display: none !important; }
.ftr-qr { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 96px; height: 96px; border: 1px dashed rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .04); }
.ftr-qr .emb { width: 40px; height: 40px; }
.ftr-qr i { position: absolute; width: 16px; height: 16px; border: 0 solid #fff; }
.ftr-qr .tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.ftr-qr .tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.ftr-qr .bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.ftr-qr .br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.ftr-app-r { min-width: 0; }
.ftr-app-r .ftr-lbl { margin: 0 0 var(--s1); }

/* Social strip: directly under the card, the same columns and width */
.ftr-soc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); min-width: 0; margin-top: var(--s3); padding: var(--s2) var(--s3); border: 1px solid rgba(255, 255, 255, .42); background: rgba(131, 22, 19, .22); }
.ftr-soc .ftr-lbl { margin: 0; }
.ftr-soc-l { display: flex; gap: var(--s1); }
.ftr-s { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%; color: #fff; text-decoration: none; }
.ftr-s svg { display: block; width: 24px; height: 24px; }
.ftr-s:is(:hover, :focus-visible) {
  border-color: #E13A26; background: #E13A26; color: #fff;
}   /* t2028u: all three Follow Staxyz circles use the same crimson fill (was a translucent white hover, with only LinkedIn overridden to crimson) */

/* Oversized wordmark (the approved header wordmark asset, white, decorative): fills its grid area (columns 1-8 on desktop), capped, aspect ratio kept */
.ftr-wm { min-width: 0; margin: var(--s3) 0 0; padding: 0 var(--s2); }
.ftr-wm img { display: block; width: 100%; max-width: 760px; height: auto; aspect-ratio: 3871.25 / 1216.18; }

/* The very bottom of the page: a plain black strip under a hairline. (c) on the left, the four policy links on the right (stacked on phones).
   14px, 44px tall, 32px apart. */
.ftr-base { background: #fff; border-top: 1px solid rgba(10, 10, 10, .12); color: #0A0A0A; }
.ftr-base-in { display: flex; flex-direction: column; align-items: flex-start; gap: 0; max-width: calc(1352px + 2 * var(--gutter)); margin: 0 auto; padding: var(--s1) var(--gutter); font: 400 14px/20px var(--font); }
.ftr-copy { display: flex; align-items: center; min-height: 44px; margin: 0; color: #0A0A0A; }
.ftr-legal { display: flex; flex-direction: column; gap: var(--s1); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; max-width: 100%; } /* legal_launch: terms + support wrap */
.ftr-legal li { min-width: 0; }
.ftr-pl { display: inline-flex; align-items: center; min-height: 44px; color: #0A0A0A; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: default; }
a.ftr-pl { cursor: pointer; } /* t1963: real policy hrefs */
.ftr-base .ftr-pl:focus-visible { outline: 2px solid var(--ftr-ring); outline-offset: 2px; }

@media (min-width: 700px) {
  .ftr-in { padding-top: var(--s6); padding-bottom: var(--s6); }   /* 64px from the wordmark's last pixel (its y descender) to the hairline */
  .ftr-cta { padding: var(--s4); }
  /* t1959/t1960: optical -2px half-leading; +8px (--s1) nudge down (tablet countdown) */
  .ftr-stat { padding-top: var(--s1); }
  .ftr-stat > .ftr-lbl { margin-top: -2px; }
  .ftr-nav { margin-top: var(--s2); }   /* t2027u: 32px grid row gap + 16px = 48px under the countdown */
  /* h2 removed t1948 */
  /* tablets: left = countdown, links, app area, wordmark (about 535px); right = card, social strip (about 496px): the two columns end within about 40px of each other */
  .ftr-top { grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: "stat stat stat stat stat stat cta cta cta cta cta cta"
                         "nav  nav  nav  nav  nav  nav  cta cta cta cta cta cta"
                         "wm   wm   wm   wm   wm   wm   soc soc soc soc soc soc"; }
  .ftr-cd { column-gap: var(--s3); }
  .ftr-base-in { flex-direction: row; align-items: center; justify-content: space-between; }
  .ftr-legal { flex-direction: row; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: center; }
}
@media (min-width: 1280px) {
  /* desktop: three quarter-lines, columns 1 / 5 / 9. Left = countdown (1-4), links (5-8), wordmark (1-8, capped at 840px); right = card, social strip, app area (9-12), so the bottom band is full */
  .ftr-top { --wm-w: min(840px, calc((2 * min(1352px, 100vw - 2 * var(--gutter)) - var(--s3)) / 3));
    grid-template-areas: "stat stat stat stat nav nav nav nav cta cta cta cta"
                         "wm   wm   wm   wm   wm  wm  wm  wm  cta cta cta cta"
                         "wm   wm   wm   wm   wm  wm  wm  wm  soc soc soc soc"; }
  .ftr-wm { align-self: end; margin-top: var(--s3); padding: 0; }
  /* t1960: +8px (--s1) below card-top align; keep -2px half-leading compensation */
  .ftr-stat { padding-top: var(--s1); }
  .ftr-nav { padding-top: var(--s1); padding-left: var(--s5); column-gap: var(--s6); margin-top: 0; }   /* t2027u: 48px from the countdown plus the 24px grid gutter; 64px between the two groups; cancel the tablet margin-top so labels stay aligned with the timer */
  .ftr-stat > .ftr-lbl,
  .ftr-nav .ftr-lbl { margin-top: -2px; }
  .ftr-links { flex-direction: column; flex-wrap: nowrap; gap: 0; }
}

/* NAV FADE (t1938), the only rule here that is not under .ftr: while the footer is in view js/footer.js (IntersectionObserver) sets html.ftr-nav-off, which fades the sticky nav pill out
   (opacity, then visibility so its links leave the tab order) and back in when the footer leaves. The pill's design is untouched. Under reduced motion it simply appears and disappears. */
html.ftr-nav-ready .nav { transition: opacity 200ms ease, visibility 0s linear 0s; }
html.ftr-nav-off .nav { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, visibility 0s linear 200ms; }
@media (prefers-reduced-motion: reduce) { html.ftr-nav-ready .nav, html.ftr-nav-off .nav { transition: none; } }

/* t1954 mobile Explore: clear 44px tap targets, readable spacing */
@media (max-width: 699px) {
  .ftr-nav { column-gap: var(--s5); margin-top: var(--s2); }   /* t2027u: 48px between groups; 32+16=48px under the countdown */
  .ftr-nav .ftr-lbl { margin-bottom: var(--s1); }
  .ftr-links { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .ftr-links a { min-height: 44px; padding: 0; }
}