/* Invoxity footer, design E ("the index", after spur.us): the offices' working
   day on top, link groups on a 12-column grid with a coral hover trail,
   INVOXITY in particles and a live office ticker. Markup is generated by
   site-tools/build_header.py (build_footer_e); behaviour is in site-header.js. */
.ivx-fe {
    position: relative;
    z-index: 2;
    background: #0e0e0e;
    color: #f1f1f1;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    /* The accent colour; a page may override these three (InvoChef uses its green). */
    --fe-accent: #ff7b5e;
    --fe-accent-rgb: 255 123 94;
    --fe-accent-soft: #ffd2c6;
    --fe-mono: "JetBrains Mono", ui-monospace, monospace;
}
.ivx-fe *, .ivx-fe *::before, .ivx-fe *::after { box-sizing: border-box; }
.ivx-fe a { color: inherit; text-decoration: none; }
.ivx-fe ul { list-style: none; margin: 0; padding: 0; }
.ivx-fe h4, .ivx-fe p { margin: 0; }
.ivx-fe :focus-visible { outline: 2px solid var(--fe-accent); outline-offset: 3px; }
/* Full width, with the same side margin as the site's other full-width sections. */
.ivx-fe-in { padding: 40px 48px 0; }
@media (max-width: 760px) { .ivx-fe-in { padding: 32px 20px 0; } }

/* Product pages (invoMind, InvoChef) keep a row of their own links on top. */
.ivx-fe-product { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid #2c2c2c; font-size: 14px; color: #b5b5b5; }
.ivx-fe-product strong { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; color: #ffffff; }
.ivx-fe-product a:hover { color: var(--fe-accent); }

/* The shared heading: a coral square, a grey label and a thin rule. */
.ivx-fe-gh, .ivx-fe-dh { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #2c2c2c; color: #a3a3a3; font-size: 13px; font-weight: 500; }
.ivx-fe-gh::before, .ivx-fe-dh::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--fe-accent); }
.ivx-fe-gh button { display: flex; align-items: center; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: default; }
.ivx-fe-pm { display: none; margin-left: auto; font-family: var(--fe-mono); color: #f1f1f1; transition: transform .25s; }
.ivx-fe-gh .ivx-fe-br { margin-left: 12px; font-size: 12px; }

/* [ bracket ] links: the brackets part on hover. */
.ivx-fe .ivx-fe-br { display: inline-flex; gap: 8px; font-family: var(--fe-mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--fe-accent); transition: gap .25s cubic-bezier(.2, .7, .2, 1); }
.ivx-fe .ivx-fe-br:hover { gap: 14px; }

/* our working day */
.ivx-fe-day { margin-bottom: 52px; }
.ivx-fe-dh { flex-wrap: wrap; row-gap: 6px; }
.ivx-fe-sub { font-family: var(--fe-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #6f6f6f; }
.ivx-fe-who { margin-left: auto; font-family: var(--fe-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--fe-accent); }
.ivx-fe-who.none { color: #a3a3a3; }
.ivx-fe-chart { position: relative; padding-top: 22px; }
.ivx-fe-axis { position: relative; height: 18px; margin-left: 110px; font-family: var(--fe-mono); font-size: 10px; color: #6b6b6b; }
.ivx-fe-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.ivx-fe-axis span:first-child { transform: none; }
.ivx-fe-axis span:last-child { transform: translateX(-100%); }
.ivx-fe-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; height: 30px; }
.ivx-fe-row b { font-family: var(--fe-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .03em; line-height: 1.25; text-transform: uppercase; }
.ivx-fe-row b span { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #8a8a8a; }
.ivx-fe-track { position: relative; height: 8px; background: repeating-linear-gradient(90deg, #1b1b1b 0 calc(100% / 24 - 1px), #0e0e0e calc(100% / 24 - 1px) calc(100% / 24)); }
.ivx-fe-track u { position: absolute; top: 0; bottom: 0; background: rgb(var(--fe-accent-rgb) / .3); border: 1px solid rgb(var(--fe-accent-rgb) / .7); text-decoration: none; }
.ivx-fe-track u.open { background: var(--fe-accent); border-color: var(--fe-accent); }
.ivx-fe-now { position: absolute; top: 22px; bottom: 0; width: 2px; background: #ffffff; pointer-events: none; }
.ivx-fe-now::before { content: "NOW"; position: absolute; top: 0; left: 6px; padding: 0 3px; background: #0e0e0e; font-family: var(--fe-mono); font-size: 9.5px; letter-spacing: .08em; color: #ffffff; }
/* Near the end of the line the label sits on the left, clear of the last hour. */
.ivx-fe-now.flip::before { left: auto; right: 6px; }
@media (max-width: 700px) {
    .ivx-fe-axis { margin-left: 92px; }
    .ivx-fe-axis span:nth-child(even) { display: none; }
    .ivx-fe-row { grid-template-columns: 92px minmax(0, 1fr); }
    .ivx-fe-who { margin-left: 21px; }
}

/* the link grid */
.ivx-fe-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
    .ivx-fe-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 20px; }
    .ivx-fe-s3 { grid-column: span 3; }
    .ivx-fe-s6 { grid-column: span 6; }
    .ivx-fe-s9 { grid-column: span 9; }
}
.ivx-fe-brand { display: grid; align-content: start; gap: 28px; }
.ivx-fe-logo img { display: block; width: auto; height: 56px; }
.ivx-fe-ctas, .ivx-fe-social { display: grid; gap: 4px; justify-items: start; }
.ivx-fe-social a { font-family: var(--fe-mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.ivx-fe-social a:hover { color: var(--fe-accent); }
.ivx-fe-body { display: grid; gap: 28px 20px; padding-top: 24px; }
@media (min-width: 1000px) { .ivx-fe-body { grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); } }
.ivx-fe-body h4 { margin-bottom: 14px; font-size: 13px; font-weight: 500; color: #a3a3a3; }
.ivx-fe-body h4.blank { visibility: hidden; }
.ivx-fe-body small { display: block; margin-bottom: 8px; font-size: 12.5px; color: #8a8a8a; }
/* Spur-style hover: the bar snaps on, then fades slowly once the pointer
   leaves, so sweeping down a column leaves a trail. */
.ivx-fe-body ul a { position: relative; display: block; overflow: hidden; padding: 4px 0; font-family: var(--fe-mono); font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; }
.ivx-fe-body ul a::before { content: ""; position: absolute; inset: 0; background: var(--fe-accent); opacity: 0; transition: opacity .9s cubic-bezier(.3, 0, .2, 1); }
.ivx-fe-body ul a span { position: relative; display: inline-block; transition: transform .3s cubic-bezier(.2, .7, .2, 1), color .12s; }
.ivx-fe-body ul a:hover::before, .ivx-fe-body ul a:focus-visible::before { opacity: 1; transition: none; }
.ivx-fe-body ul a:hover span, .ivx-fe-body ul a:focus-visible span { transform: translateX(22px); color: #141414; transition: transform .18s cubic-bezier(.2, .7, .2, 1), color 0s; }
.ivx-fe-body ul a:focus-visible { outline: none; }

/* Phones and tablets: each group is an accordion with a + toggle. */
@media (max-width: 999px) {
    .ivx-fe-brand { margin-bottom: 36px; }
    .ivx-fe-gh { padding: 0; }
    .ivx-fe-gh button { flex: 1; padding: 16px 0; cursor: pointer; }
    .ivx-fe-pm { display: block; }
    .ivx-fe-gh .ivx-fe-br { display: none; }
    .ivx-fe-g.open .ivx-fe-pm { transform: rotate(45deg); }
    .ivx-fe-g:not(.open) .ivx-fe-body { display: none; }
    .ivx-fe-g.open .ivx-fe-body { padding-bottom: 28px; }
}

/* INVOXITY in particles (a plain wordmark until the script draws it) */
.ivx-fe-word { position: relative; margin-top: 56px; aspect-ratio: 5.2 / 1; }
.ivx-fe-word canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ivx-fe-word .fallback { display: block; text-align: center; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 16.5vw; line-height: 1.15; letter-spacing: -.02em; color: var(--fe-accent); user-select: none; }
.ivx-fe-word.drawn .fallback { visibility: hidden; }

/* legal line and the live office ticker */
.ivx-fe-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 22px 26px; font-family: var(--fe-mono); font-size: 12px; }
.ivx-fe-legal nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ivx-fe-legal nav a:hover { color: var(--fe-accent); }
.ivx-fe-live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; letter-spacing: .04em; text-transform: uppercase; color: var(--fe-accent); }
.ivx-fe-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--fe-accent); animation: ivx-fe-pulse 1.8s ease-in-out infinite; }
.ivx-fe-live i.off { background: #6b6b6b; animation: none; }
@keyframes ivx-fe-pulse { 50% { box-shadow: 0 0 0 5px rgb(var(--fe-accent-rgb) / .18); } }
.ivx-fe-c { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 500; color: #8a8a8a; }
@media (max-width: 999px) { .ivx-fe-live { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ivx-fe *, .ivx-fe *::before { transition: none !important; }
    .ivx-fe-live i { animation: none; }
}