/* =============================================================================
   Salty Web Co — the footer, one for every page.

   Self-contained: it brings its own colours, so it looks the same whatever
   stylesheet the page around it uses. The markup is in each page between
   <!-- footer --> and <!-- /footer -->; its links are root paths (/trades/,
   /#pricing), so the same block works at any depth and the Spanish build
   turns them into /es/ links where a Spanish page exists.
   ============================================================================= */
.ft{--f-ground:#101216;--f-line:rgba(255,255,255,.09);--f-line-strong:rgba(255,255,255,.17);--f-text:#EEF1F5;
  --f-muted:#98A1AC;--f-dim:#8A94A0;--f-accent:#FF7A1A;--f-soft:rgba(255,122,26,.13);
  --f-ease:cubic-bezier(.4,0,.2,1);--f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --f-display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;
  background:var(--f-ground);border-top:1px solid var(--f-line);padding:64px 0 0;overflow:hidden;
  color:var(--f-text);font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;text-align:left;font-size:16px;line-height:1.5}
.ft *{box-sizing:border-box}
.ft a{text-decoration:none}
.ft .ft-wrap{width:min(100% - 40px,1180px);margin-inline:auto}
.ft-top{display:grid;gap:36px;grid-template-columns:1fr;margin-bottom:34px}
@media(min-width:1200px){.ft-top{grid-template-columns:.9fr 3fr;gap:48px}}
.ft-brand{display:flex;gap:15px;align-items:flex-start}
.ft-brand img{height:66px;width:auto;object-fit:contain;flex:none;border-radius:22%}
.ft-brand b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;margin-bottom:7px}
.ft-brand span{display:block;color:var(--f-muted);font-size:.9rem;line-height:1.6}
.ft-social{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.ft-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--f-line-strong);border-radius:11px;color:var(--f-dim);background:rgba(255,255,255,.045);
  transition:color .25s var(--f-ease),border-color .25s var(--f-ease),background .25s var(--f-ease),transform .25s var(--f-ease)}
.ft-social a:hover{color:var(--f-accent);border-color:var(--f-accent);background:var(--f-soft);transform:translateY(-2px)}
.ft-social svg{width:18px;height:18px}
.ft-cols{display:grid;gap:26px 22px;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.ft-cols{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.ft-cols{grid-template-columns:repeat(5,1fr)}}
.ft-cols h3{font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--f-accent);margin:0 0 8px}
/* 44px tall rows: every link is a comfortable tap on a phone */
.ft-cols a,.ft-cols span{display:flex;align-items:center;min-height:44px;color:var(--f-muted);font-size:.92rem;line-height:1.3;
  transition:color .2s var(--f-ease)}
.ft-cols a:hover{color:var(--f-text)}
.ft a:focus-visible{outline:3px solid var(--f-accent);outline-offset:2px;border-radius:6px}
.ft-in{border-top:1px solid var(--f-line);padding:18px 0 4px;display:flex;flex-wrap:wrap;gap:8px 18px;
  justify-content:space-between;color:var(--f-dim);font-size:.82rem}
.ft-word{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:.8;white-space:nowrap;
  font-size:clamp(3rem,13.6vw,13.4rem);text-align:center;margin-top:30px;user-select:none;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,122,26,.22),transparent 80%);-webkit-background-clip:text;background-clip:text;
  transform:translateY(12%)}