/* ═══════════════════════════════════════════════════════════════════════════
   fonts.css — StaffCore marketing site. Self-hosted, 16 September 2026.

   ── WHY THESE ARE SERVED FROM HERE ────────────────────────────────────────
   These four families used to load from fonts.googleapis.com. Fonts set no
   cookies, so that was never a consent-banner question — but fetching them
   sends every visitor's IP address to Google, on a site that otherwise
   contacts nobody at all. A German court awarded damages over exactly that in
   2022 and the UK position is less settled, so this removes the question
   rather than answering it.

   With this file in place, staff-core.app makes NO third-party request of any
   kind. It is also faster: no extra DNS lookup, no second TLS handshake, and
   no render-blocking stylesheet on someone else's server.

   ── ⚠ THE FAMILY NAMES HERE MUST MATCH THE SITE'S OWN CSS ─────────────────
   The upstream packages call these "Fraunces Variable", "Bricolage Grotesque
   Variable" and so on. The site's CSS variables ask for 'Fraunces' and
   'Bricolage Grotesque'. They are declared under the SITE'S names on purpose,
   so not one line of existing page CSS has to change. Rename these and the
   pages silently fall back to Georgia and Helvetica — silently, because a
   missing font is not an error, it is just a different page.

   ── The two ranges ────────────────────────────────────────────────────────
   Each family is declared twice with a unicode-range. A browser downloads the
   latin-ext file ONLY if the page actually contains one of those characters,
   so an English page pays for latin alone. Same behaviour Google Fonts gave.
   ═══════════════════════════════════════════════════════════════════════════ */

/* latin-ext: only fetched when an accented character appears on the page. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/fraunces-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/fraunces-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(/fonts/bricolage-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(/fonts/bricolage-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/jakarta-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/jakarta-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/fonts/jetbrains-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/fonts/jetbrains-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   The consent banner (cookies.js). Kept here so every page that already links
   this stylesheet gets it without a second request.

   ⚠ It sits ABOVE the page, not over it: `position:fixed` at the bottom with
     a shadow, and the page keeps its own scroll. It is not a modal and it does
     not trap the reader. Somebody who wants to read the pricing page before
     answering a cookie question is allowed to.
   ═══════════════════════════════════════════════════════════════════════════ */
.sc-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #FFFFFF; border-top: 3px solid #005EB8;
  box-shadow: 0 -6px 24px rgba(0, 41, 79, 0.16);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.sc-cookies-in {
  max-width: 1080px; margin: 0 auto; padding: 18px 20px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.sc-cookies-txt { flex: 1 1 380px; min-width: 260px; }
.sc-cookies-txt strong { display: block; font-size: 16px; color: #00294F; margin-bottom: 4px; }
.sc-cookies-txt p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #40576A; }
.sc-cookies-txt a { color: #005EB8; }
.sc-cookies-btns { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
/* ⚠ 44px minimum: this is tapped on phones, and the two choices are the same
   size on purpose. A big "Accept" beside a small grey "Reject" is a dark
   pattern, and the ICO has said so. */
.sc-cookies-btns button {
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  min-height: 46px; min-width: 150px; padding: 0 22px; border-radius: 8px; border: 2px solid #005EB8;
}
.sc-ck-accept { background: #005EB8; color: #fff; }
.sc-ck-essential { background: #fff; color: #005EB8; }
.sc-cookies-btns button:hover { filter: brightness(0.94); }
.sc-cookies-btns button:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }
@media (max-width: 560px) {
  .sc-cookies-in { padding: 16px; }
  .sc-cookies-btns { width: 100%; }
  .sc-cookies-btns button { flex: 1 1 0; padding: 0 12px; }
}