/*
 * The footer, and it is the same object on both properties.
 *
 * Served at `/chase-footer.css` on **both** www.foilio.co and app.foilio.co, from one file,
 * by an explicit route in server.js registered ahead of the host-matching middleware. That is
 * the whole design: Dan asked for it to be identical on both, and the only way to guarantee
 * identical is one file rather than two that agree today.
 *
 * It appears on four surfaces — the marketing page, /privacy, /support, and the app itself —
 * and the markup is repeated in each because this project has no templating. **If you change
 * the markup, change it in all four**: site/index.html, public/privacy.html,
 * public/support.html, public/index.html.
 *
 * **Desktop only, by Dan's decision.** Below 1000px it is `display: none` — which is not a
 * cop-out but the thing that makes it safe to put inside the app at all: the app is
 * full-screen with a fixed bottom nav on phones, and a footer in that space would sit under
 * the nav or push it. 1000px is the app's own `wide()` breakpoint, so the footer appears
 * exactly when the desktop top bar does.
 *
 * Every link is absolute. On the marketing site a product link could be a #hash, but the app
 * is a different origin and the same markup has to work from both — so they all point at
 * www.foilio.co and the two are byte-identical.
 */

/*
 * Self-defence, and it is not optional.
 *
 * This block lands inside three different stylesheets — site/styles.css, public/policy.css and
 * the app's public/styles.css — each of which styles bare `a`, `li`, `ul` and `p` for its own
 * document. "Identical on both" cannot survive that unless the footer states everything it
 * needs rather than inheriting it. The policy pages proved the point immediately: their
 * `li::before` put a lime square in front of every footer link and their `a` rule underlined
 * the wordmark.
 *
 * So: reset the elements this footer uses, inside this footer only, before styling them.
 * Every value below is stated in full for the same reason — no shorthand that leaves a
 * longhand to be inherited from whatever else is on the page.
 */
.fo-foot ul, .fo-foot li, .fo-foot p, .fo-foot h4 { margin: 0; padding: 0; }
.fo-foot ul { list-style: none; }
.fo-foot li { position: static; }
.fo-foot li::before, .fo-foot li::after { content: none; display: none; }
.fo-foot a { text-decoration: none; border: 0; background: none; }
.fo-foot * { box-sizing: border-box; border-radius: 0; }

.fo-foot {
  display: none;
  border-top: 1px solid #262626;
  background: #0A0A0A;
  color: #9C9C9C;
  font: 500 14px/1.6 Manrope, 'Helvetica Neue', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1000px) { .fo-foot { display: block; } }

.fo-foot-in {
  max-width: 1760px; margin: 0 auto;
  padding: 56px 23px 26px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}

/* ── The brand column ── */
/* `.tb-mark` and `.brand`, a third time — 9px diamond, 12px gap, Anton 25/1 at 1.6px. Written
   out rather than inherited because this file has to stand alone on two hosts. */
.fo-foot-brand { display: flex; align-items: center; gap: 12px; color: #FFFFFF; text-decoration: none; }
/* The C monogram, masked so `background` keeps deciding the colour. Literal hex rather than a
   token because this one file is served to both properties and cannot see either one's
   variables. Same artwork as `public/icon.svg`. */
.fo-foot-brand i { width: 12px; height: 12px; flex: none; background: #7CE22B;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M0%200H30.75V8.5H0Z%20M0%208.5H8.5V55.5H0Z%20M0%2055.5H30.75V64H0Z%20M22%208.5H51.25V17H22Z%20M22%2047H51.25V55.5H22Z%20M42.5%200H64V8.5H42.5Z%20M42.5%2055.5H64V64H42.5Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M0%200H30.75V8.5H0Z%20M0%208.5H8.5V55.5H0Z%20M0%2055.5H30.75V64H0Z%20M22%208.5H51.25V17H22Z%20M22%2047H51.25V55.5H22Z%20M42.5%200H64V8.5H42.5Z%20M42.5%2055.5H64V64H42.5Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
/* The wordmark. `Archivo` is declared by whichever stylesheet loads beside this one — styles.css
   on the app, site/styles.css on www, policy.css on the policy pages — and all three now do. */
.fo-foot-brand span { font-family: Archivo, 'Helvetica Neue', sans-serif; font-weight: 700; font-size: 25px;
  line-height: 1; letter-spacing: 0.007em; text-transform: uppercase; }
/* `.fo-foot .fo-foot-blurb`, not `.fo-foot-blurb`. The reset above is `.fo-foot p` — one class
   and one element, which outranks a lone class — so a bare `.fo-foot-blurb { margin }` loses to
   it and silently reads as zero. Two classes beat one class plus an element. */
.fo-foot .fo-foot-blurb { margin: 24px 0 0; max-width: 300px; font-size: 13.5px; line-height: 1.65; color: #7C7C7C; }

/* ── The social row ──
 * Placeholders, at Dan's request, and deliberately **not links**: Chase has no accounts on
 * any of these yet, and five icons pointing at dead URLs is a worse footer than five that
 * plainly do nothing. They are `<span>`s with no href and `aria-hidden`, so a screen reader
 * skips them entirely rather than announcing five buttons that go nowhere.
 * When the accounts exist: swap each span for an <a href>, drop the aria-hidden, add a label,
 * and delete `pointer-events: none` below. Nothing else changes. */
.fo-foot-social { display: flex; gap: 10px; margin-top: 20px; }
.fo-foot-social span {
  width: 38px; height: 38px;
  background: #111111; border: 1px solid #262626;
  pointer-events: none;
  position: relative;
}
/* The marks are CSS masks rather than inline SVG, so the paths live once in this file instead
   of five times over in each of the four documents that carry the footer. A mask is coloured
   by `background`, which is what lets one rule tint all five.
   `mask-image` with a data: URI is governed by `img-src`, and both hosts allow `data:` — the
   marketing CSP is `img-src 'self' data:` and the app's adds blob: and Scrydex to the same. */
.fo-foot-social span::before {
  content: ''; position: absolute; inset: 0;
  background: #606060;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 17px 17px; mask-size: 17px 17px;
}
.fo-foot-social .ig::before {
  -webkit-mask-image: var(--ig); mask-image: var(--ig);
}
.fo-foot-social .tw::before { -webkit-mask-image: var(--tw); mask-image: var(--tw); }
.fo-foot-social .tt::before { -webkit-mask-image: var(--tt); mask-image: var(--tt); }
.fo-foot-social .yt::before { -webkit-mask-image: var(--yt); mask-image: var(--yt); }
.fo-foot-social .dc::before { -webkit-mask-image: var(--dc); mask-image: var(--dc); }

.fo-foot {
  --ig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.41.6.22 1 .48 1.4.9.4.42.7.82.9 1.38.2.42.4 1.06.4 2.23.1 1.27.1 1.65.1 4.85s0 3.58-.1 4.85c0 1.17-.2 1.8-.4 2.23-.2.56-.5.96-.9 1.38-.4.42-.8.68-1.4.9-.4.16-1 .36-2.2.41-1.3.07-1.7.07-4.9.07s-3.6 0-4.9-.07c-1.2-.05-1.8-.25-2.2-.41-.6-.22-1-.48-1.4-.9-.4-.42-.7-.82-.9-1.38-.2-.42-.4-1.06-.4-2.23C2.1 15.58 2 15.2 2 12s.1-3.58.1-4.85c0-1.17.2-1.8.4-2.23.2-.56.5-.96.9-1.38.4-.42.8-.68 1.4-.9.4-.16 1-.36 2.2-.41C8.4 2.2 8.8 2.2 12 2.2m0 5.6a4.2 4.2 0 100 8.4 4.2 4.2 0 000-8.4m0 6.9a2.7 2.7 0 110-5.4 2.7 2.7 0 010 5.4m5.4-7a1 1 0 11-2 0 1 1 0 012 0'/%3E%3C/svg%3E");
  --tw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.8 7.8L23.2 22h-6.3l-4.9-6.4L6.3 22H3.2l7.3-8.3L2.8 2h6.4l4.4 5.9zm-1.1 18.1h1.7L8.3 3.8H6.4z'/%3E%3C/svg%3E");
  --tt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 2h-3.2v13.4a2.7 2.7 0 11-2.7-2.7c.3 0 .5 0 .8.1V9.5a6 6 0 00-.8-.1 5.9 5.9 0 105.9 5.9V8.6a7.1 7.1 0 004.2 1.3V6.6a4.1 4.1 0 01-4.2-4.6z'/%3E%3C/svg%3E");
  --yt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.9a3 3 0 00-2.1-2.1C19.5 4.3 12 4.3 12 4.3s-7.5 0-9.4.5A3 3 0 00.5 6.9C0 8.8 0 12 0 12s0 3.2.5 5.1a3 3 0 002.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 002.1-2.1c.5-1.9.5-5.1.5-5.1s0-3.2-.5-5.1zM9.6 15.6V8.4l6.3 3.6z'/%3E%3C/svg%3E");
  --dc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 4.4A19.8 19.8 0 0015.4 3l-.3.5a18.3 18.3 0 00-6.2 0L8.6 3a19.8 19.8 0 00-4.9 1.4C.6 9 0 13.4.3 17.8a19.9 19.9 0 006.1 3l1.2-1.7a13 13 0 01-2-1l.5-.4a14.2 14.2 0 0012 0l.5.4a13 13 0 01-2 1l1.2 1.7a19.9 19.9 0 006.1-3c.4-5-.6-9.4-3.6-13.4zM8.2 15.3c-1.2 0-2.2-1.1-2.2-2.4 0-1.4 1-2.4 2.2-2.4s2.2 1 2.2 2.4c0 1.3-1 2.4-2.2 2.4zm7.6 0c-1.2 0-2.2-1.1-2.2-2.4 0-1.4 1-2.4 2.2-2.4s2.2 1 2.2 2.4c0 1.3-1 2.4-2.2 2.4z'/%3E%3C/svg%3E");
}

/* ── The link columns ── */
.fo-foot-col h4 {
  margin: 0 0 18px;
  font: 800 10.5px/1 Manrope, 'Helvetica Neue', Helvetica, sans-serif;
  letter-spacing: 2.2px; text-transform: uppercase; color: #606060;
}
.fo-foot-col ul { margin: 0; padding: 0; list-style: none; }
.fo-foot-col li { margin: 0 0 13px; }
.fo-foot-col a { color: #C8C8C8; text-decoration: none; font-size: 14px; }
.fo-foot-col a:hover { color: #7CE22B; }
/* Not a link, because there is no listing behind it yet — the same rule the hero badge
   follows. It becomes an <a> the day the app is live. */
.fo-foot-col .soon { color: #606060; font-size: 14px; }
.fo-foot-col .soon em { font-style: normal; color: #7CE22B; font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase; margin-left: 8px; }

/* ── The bottom rule ── */
.fo-foot-bot {
  max-width: 1760px; margin: 0 auto; padding: 22px 23px 34px;
  border-top: 1px solid #1C1C1C;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  font-size: 12.5px; color: #606060;
}
.fo-foot-bot .tag { color: #7C7C7C; }