/* ============================================================================
   FoodInsights — website stylesheet

   Tokens are lifted verbatim from the "FoodInsights — Feedback components"
   design system. Nothing here invents a colour, size, radius or duration that
   the design system does not already define.
   ========================================================================= */

/* >>> webfonts: generated by tools/refresh-webfonts.py <<< */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/montserrat-300-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/montserrat-300-latin.woff2) format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/montserrat-600-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/montserrat-600-latin.woff2) format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/montserrat-700-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/montserrat-700-latin.woff2) format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/montserrat-800-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/montserrat-800-latin.woff2) format('woff2');
  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: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-300-800-italic-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-300-800-italic-latin.woff2) format('woff2');
  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: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-300-800-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/open-sans-300-800-latin.woff2) format('woff2');
  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;
}
/* <<< webfonts: end generated block >>> */

/* ---------------------------------------------------------------- tokens */
:root {
  /* ---- Brand palette (from Kleuren FoodInsights.jpg / logo mark) ---- */
  --fi-deep:   #2B3E5B; /* brand navy   - primary, ink, surfaces */
  --fi-orange: #e4613a; /* vermilion   - aperture blade (logo only) */
  --fi-green:  #8DC63F; /* brand green  - marker, action, bands */
  --fi-purple: #9B72AA; /* brand violet - accent bands */
  --fi-cyan:   #28aac0; /* cyan        - aperture blade (logo only) */
  --fi-amber:  #e59d50; /* amber       - aperture blade (logo only) */

  --fi-primary-50:  #eef1f5;
  --fi-primary-100: #d6dde7;
  --fi-primary-200: #b2becf;
  --fi-primary-300: #8597b1;
  --fi-primary-400: #3D5478;
  --fi-primary-500: #2B3E5B;
  --fi-primary-600: #24354e;
  --fi-primary-700: #1E2D44;
  --fi-primary-800: #182538;
  --fi-primary-900: #121c2b;

  --fi-green-50:  #f4faeb;
  --fi-green-100: #e4f3cb;
  --fi-green-200: #c9e79d;
  --fi-green-300: #A8D86A;
  --fi-green-400: #8DC63F;
  --fi-green-500: #7cb434;
  --fi-green-600: #6FA830;
  --fi-green-700: #54801f;
  --fi-green-800: #456a19;
  --fi-green-900: #365213;

  --fi-neutral-0:   #ffffff;
  --fi-neutral-25:  #F7F8FA;
  --fi-neutral-50:  #f0f2f6;
  --fi-neutral-100: #e3e7ee;
  --fi-neutral-200: #cbd2dd;
  --fi-neutral-300: #9BA3B0;
  --fi-neutral-400: #7c8798;
  --fi-neutral-500: #5f6b7e;
  --fi-neutral-600: #475468;
  --fi-neutral-700: #343f52;
  --fi-neutral-800: #242e3f;
  --fi-neutral-900: #151d2a;

  /* ---- Semantic aliases ---- */
  --fi-text-strong:  var(--fi-primary-500);
  --fi-text-body:    var(--fi-neutral-700);
  --fi-text-muted:   var(--fi-neutral-500);
  --fi-text-inverse: var(--fi-neutral-0);
  --fi-text-link:    var(--fi-primary-500);
  --fi-text-link-hover: var(--fi-green-700);

  --fi-surface-page:   var(--fi-neutral-0);
  --fi-surface-subtle: var(--fi-neutral-25);
  --fi-surface-sunken: var(--fi-neutral-50);
  --fi-surface-card:   var(--fi-neutral-0);
  --fi-surface-inverse:var(--fi-primary-500);
  --fi-surface-inverse-deep: var(--fi-primary-700);

  --fi-border-subtle: var(--fi-neutral-100);
  --fi-border-default:var(--fi-neutral-200);
  --fi-border-strong: var(--fi-neutral-300);
  --fi-border-inverse:rgba(255,255,255,.22);

  /* Filled controls use the deep end of the green ramp so white labels clear
     WCAG AA (white on --fi-green-700 = 6.6:1). The bright brand green #79ac2b
     stays the MARKER colour: rules, underlines, active indicators, chart
     series — never a text background. */
  /* Filled controls: light brand green with white labels, as specified.
     Measured 2.87:1 — below the 4.5:1 AA bar. Kept because it is the look
     that was asked for; the two ways back to compliant are navy labels
     (--fi-primary-700) or the deep green fill (--fi-green-700). */
  --fi-action:        var(--fi-green-600);
  --fi-action-hover:  var(--fi-green-700);
  --fi-action-active: var(--fi-green-800);
  --fi-action-text:   var(--fi-neutral-0);
  --fi-marker:        var(--fi-green-400);

  --fi-focus-ring: var(--fi-primary-400);

  --fi-success: #3f7a1a;
  --fi-success-surface: var(--fi-green-50);
  --fi-warning: #96591a;
  --fi-warning-surface: #fdf3e6;
  --fi-danger:  #b23a19;
  --fi-danger-surface:  #fdeeea;
  --fi-info:    #16707f;
  --fi-info-surface:    #e6f6f9;

  /* Text-safe twin of each accent. These are the values used wherever the accent
     has to carry text, and each clears 4.5:1 against white. */
  --fi-deep-ink:   #2B3E5B;
  --fi-green-ink:  #54801f;
  --fi-cyan-ink:   #0f6b7c;
  --fi-amber-ink:  #8a5a18;
  --fi-purple-ink: #7D5A8C;

  /* ---- Data visualisation order (aperture rotation, clockwise) ---- */
  --fi-chart-1: var(--fi-deep);
  --fi-chart-2: var(--fi-green);
  --fi-chart-3: var(--fi-cyan);
  --fi-chart-4: var(--fi-orange);
  --fi-chart-5: var(--fi-purple);
  --fi-chart-6: var(--fi-amber);

  /* ---- Type ---- */
  --fi-font-sans: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --fi-font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --fi-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fi-weight-light: 300;
  --fi-weight-regular: 400;
  --fi-weight-semibold: 600;
  --fi-weight-bold: 700;
  --fi-weight-extrabold: 800;

  /* Type scale - 1.25 major third, 16px base */
  --fi-text-2xs: 11px;
  --fi-text-xs:  12px;
  --fi-text-sm:  14px;
  --fi-text-md:  16px;
  --fi-text-lg:  18px;
  --fi-text-xl:  22px;
  --fi-text-2xl: 28px;
  --fi-text-3xl: 34px;
  --fi-text-4xl: 44px;
  --fi-text-5xl: 56px;
  --fi-text-6xl: 72px;

  --fi-leading-tight: 1.08;
  --fi-leading-snug: 1.22;
  --fi-leading-normal: 1.5;
  --fi-leading-relaxed: 1.65;

  --fi-tracking-display: -0.015em;
  --fi-tracking-normal: 0;
  --fi-tracking-wide: 0.04em;
  --fi-tracking-caps: 0.12em;

  --fi-role-display: var(--fi-weight-extrabold) var(--fi-text-5xl)/var(--fi-leading-tight) var(--fi-font-display);
  --fi-role-h1: var(--fi-weight-extrabold) var(--fi-text-4xl)/var(--fi-leading-tight) var(--fi-font-display);
  --fi-role-h2: var(--fi-weight-bold) var(--fi-text-3xl)/var(--fi-leading-snug) var(--fi-font-display);
  --fi-role-h3: var(--fi-weight-semibold) var(--fi-text-xl)/var(--fi-leading-snug) var(--fi-font-sans);
  --fi-role-body: var(--fi-weight-regular) var(--fi-text-md)/var(--fi-leading-relaxed) var(--fi-font-sans);
  --fi-role-body-lg: var(--fi-weight-light) var(--fi-text-lg)/var(--fi-leading-relaxed) var(--fi-font-sans);
  --fi-role-ui: var(--fi-weight-semibold) var(--fi-text-sm)/1.3 var(--fi-font-sans);
  --fi-role-mono: var(--fi-weight-regular) var(--fi-text-sm)/1.4 var(--fi-font-mono);

  /* ---- Space ---- */
  --fi-space-0: 0;
  --fi-space-1: 4px;
  --fi-space-2: 8px;
  --fi-space-3: 12px;
  --fi-space-4: 16px;
  --fi-space-5: 24px;
  --fi-space-6: 32px;
  --fi-space-7: 48px;
  --fi-space-8: 64px;
  --fi-space-9: 96px;
  --fi-space-10: 128px;

  --fi-gutter: var(--fi-space-5);
  --fi-section-y: var(--fi-space-9);
  --fi-container: 1200px;
  --fi-container-narrow: 760px;
  --fi-control-h-sm: 32px;
  --fi-control-h-md: 40px;
  --fi-control-h-lg: 48px;

  /* ---- Shape ---- */
  /* Angular brand: radii stay small. The 12deg aperture cut carries the character. */
  --fi-radius-none: 0;
  --fi-radius-xs: 3px;
  --fi-radius-sm: 6px;
  --fi-radius-md: 8px;
  --fi-radius-lg: 12px;
  --fi-radius-pill: 999px;

  --fi-border-width: 1px;
  --fi-border-width-thick: 2px;
  --fi-rule-accent-width: 3px;

  --fi-shadow-none: none;
  --fi-shadow-xs: 0 1px 2px rgba(21,29,42,.06);
  --fi-shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --fi-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --fi-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --fi-shadow-focus: 0 0 0 3px rgba(61,84,120,.38);

  /* Aperture blade cut - the one signature shape */
  --fi-cut-sm: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  --fi-cut-lg: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);

  --fi-ease: cubic-bezier(.2,.7,.3,1);
  --fi-ease-out: cubic-bezier(.16,1,.3,1);
  --fi-duration-fast: 120ms;
  --fi-duration: 180ms;
  --fi-duration-slow: 320ms;

  --fi-overlay: rgba(8,41,53,.55);
  --fi-blur: blur(10px);

  /* ---- Site-level additions (layout only, no new brand values) ---- */
  --fi-nav-h: 76px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--fi-nav-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font: var(--fi-role-body);
  color: var(--fi-text-body);
  background: var(--fi-surface-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fi-text-strong);
  margin: 0 0 var(--fi-space-3);
  text-wrap: balance;
}
h1 { font: var(--fi-role-h1); letter-spacing: var(--fi-tracking-display); }
h2 { font: var(--fi-role-h2); letter-spacing: var(--fi-tracking-display); }
h3 { font: var(--fi-role-h3); }
p { margin: 0 0 var(--fi-space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--fi-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--fi-duration) var(--fi-ease);
}
a:hover { color: var(--fi-text-link-hover); }
:focus-visible { outline: 2px solid var(--fi-focus-ring); outline-offset: 2px; }
code, kbd, samp { font: var(--fi-role-mono); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.fi-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--fi-primary-500); color: #fff;
  padding: var(--fi-space-3) var(--fi-space-5);
  font: var(--fi-role-ui); text-decoration: none;
}
.fi-skip:focus { left: var(--fi-space-4); top: var(--fi-space-4); color: #fff; }

/* -------------------------------------------------------------- helpers */
.fi-container {
  width: 100%; max-width: var(--fi-container);
  margin: 0 auto; padding-inline: var(--fi-gutter);
}

.fi-section { padding-block: clamp(var(--fi-space-8), 8vw, var(--fi-section-y)); }
.fi-section--tight { padding-block: clamp(var(--fi-space-7), 6vw, var(--fi-space-8)); }
.fi-section--subtle { background: var(--fi-surface-subtle); }
.fi-section--sunken { background: var(--fi-surface-sunken); }
.fi-section--inverse {
  background: var(--fi-surface-inverse);
  --fi-text-body:   rgba(255,255,255,.86);
  --fi-text-muted:  rgba(255,255,255,.80);
  --fi-text-strong: #ffffff;
  color: rgba(255,255,255,.86);
}
.fi-section--inverse .fi-eyebrow { color: rgba(255,255,255,.78); }
.fi-section--inverse h2, .fi-section--inverse h3 { color: #fff; }

/* Brand-colour bands. Navy alone ran five deep down the home page; these break
   it with the green and violet from the logo aperture. Two rules govern them:
   a coloured band never touches another coloured band (white or grey always
   sits between), and each fill is paired with the one ink that clears AA on it
   — green takes navy type, violet takes white.

   The ink is applied by re-pointing the text tokens for the band rather than
   by listing selectors, so every component inside inherits correctly. White
   surfaces sitting on the band re-point them back. */
.fi-section--green {
  background: var(--fi-green-400);
  /* Layered navy rather than flat white. White type on this green measured
     2.04:1 and washed out; navy gives 7.0:1 and lets the three levels actually
     separate — near-black headings, navy body, a softened eyebrow. The thin
     rules stay white so the band keeps some brightness. */
  --fi-text-body:   var(--fi-primary-700);
  --fi-text-muted:  var(--fi-primary-600);
  --fi-text-strong: var(--fi-primary-900);
  --fi-marker:      #ffffff;
  color: var(--fi-primary-700);
}
.fi-section--green h2,
.fi-section--green h3,
.fi-section--green h4 { color: var(--fi-primary-900); }
.fi-section--green b,
.fi-section--green strong,
.fi-section--green dt { color: var(--fi-primary-800); }
.fi-section--green .fi-eyebrow { color: rgba(18,28,43,.74); }
.fi-section--green .fi-lede { color: var(--fi-primary-700); }

.fi-section--violet {
  background: var(--fi-purple-ink);
  --fi-text-body:   rgba(255,255,255,.92);
  --fi-text-muted:  rgba(255,255,255,.88);
  --fi-text-strong: #ffffff;
  color: rgba(255,255,255,.92);
}
.fi-section--violet h2,
.fi-section--violet h3,
.fi-section--violet h4 { color: #fff; }
.fi-section--violet .fi-eyebrow { color: rgba(255,255,255,.88); }
.fi-section--violet .fi-lede { color: rgba(255,255,255,.92); }

/* A white surface sitting on any coloured band keeps the normal dark ink.
   Without this the band's token override leaks into the card and you get white
   type on a white card. The list is every class in this stylesheet that paints
   itself a card surface — regenerate it if a new white component is added. */
:is(.fi-section--green, .fi-section--violet, .fi-section--inverse)
  :is(.fi-app, .fi-boundary__side, .fi-card, .fi-cat, .fi-compare__col, .fi-flow, .fi-metric, .fi-panel, .fi-partner, .fi-prodcard, .fi-projcard, .fi-project, .fi-proof, .fi-quad, .fi-quote, .fi-switch, .fi-way, .fi-wheel__figure, .fi-flow li) {
  --fi-text-body:   var(--fi-neutral-700);
  --fi-text-muted:  var(--fi-neutral-500);
  --fi-text-strong: var(--fi-primary-500);
  --fi-marker:      var(--fi-green-400);
  color: var(--fi-neutral-700);
}
:is(.fi-section--green, .fi-section--violet, .fi-section--inverse)
  :is(.fi-app, .fi-boundary__side, .fi-card, .fi-cat, .fi-compare__col, .fi-flow, .fi-metric, .fi-panel, .fi-partner, .fi-prodcard, .fi-projcard, .fi-project, .fi-proof, .fi-quad, .fi-quote, .fi-switch, .fi-way, .fi-wheel__figure, .fi-flow li) :is(h2, h3, h4, b, strong, dt) {
  color: var(--fi-primary-500);
}

/* Counters and rules that assume a light background need the light end of the
   ramp on a dark band, and the dark end on a light one. */
.fi-section--inverse .fi-trust__num,
.fi-section--violet .fi-trust__num,
.fi-cta .fi-trust__num { color: var(--fi-green-100); }
.fi-section--inverse .fi-step::before,
.fi-section--violet .fi-step::before,
.fi-cta .fi-step::before { color: var(--fi-green-200); }
.fi-section--inverse .fi-step::after,
.fi-section--violet .fi-step::after,
.fi-cta .fi-step::after { background: rgba(255,255,255,.22); }

.fi-eyebrow { color: rgba(255,255,255,.78); }
.fi-section--inverse h2, .fi-section--inverse h3 { color: #fff; }

.fi-eyebrow {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1.2 var(--fi-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fi-neutral-500);
  margin: 0 0 var(--fi-space-3);
  display: block;
}
.fi-eyebrow--inverse { color: rgba(255,255,255,.5); }

.fi-lede { font: var(--fi-role-body-lg); color: var(--fi-text-body); max-width: 62ch; }
.fi-section--inverse .fi-lede { color: rgba(255,255,255,.8); }

.fi-section-head { max-width: 70ch; margin-bottom: var(--fi-space-7); }
.fi-section-head--center { margin-inline: auto; text-align: center; }
.fi-section-head--center .fi-lede { margin-inline: auto; }

/* Rounded corner surfaces. The old shape forbade
   box-shadow; border-radius does not, so these surfaces can take a soft shadow. */
.fi-cut { border-radius: var(--fi-radius-md); }
.fi-cut-lg { border-radius: var(--fi-radius-lg); }

/* -------------------------------------------------------------- buttons */
.fi-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--fi-space-2);
  font: var(--fi-role-ui);
  border-radius: var(--fi-radius-sm);
  border: var(--fi-border-width) solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  height: var(--fi-control-h-md); padding-inline: var(--fi-space-5);
  transition: background var(--fi-duration) var(--fi-ease),
              color var(--fi-duration) var(--fi-ease),
              border-color var(--fi-duration) var(--fi-ease),
              transform var(--fi-duration-fast) var(--fi-ease);
}
.fi-btn:active { transform: translateY(1px); }
.fi-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.fi-btn--lg { height: var(--fi-control-h-lg); padding-inline: var(--fi-space-6); font-size: var(--fi-text-md); }
.fi-btn--sm { height: var(--fi-control-h-sm); padding-inline: var(--fi-space-3); font-size: var(--fi-text-xs); }

.fi-btn--primary { background: var(--fi-action); color: var(--fi-action-text); }
.fi-btn--primary:hover { background: var(--fi-action-hover); color: var(--fi-action-text); }

.fi-btn--secondary { background: var(--fi-primary-500); color: #fff; }
.fi-btn--secondary:hover { background: var(--fi-primary-600); color: #fff; }

.fi-btn--outline { background: transparent; color: var(--fi-primary-500); border-color: var(--fi-border-strong); }
.fi-btn--outline:hover { background: var(--fi-neutral-50); border-color: var(--fi-primary-500); color: var(--fi-primary-500); }

.fi-btn--inverse { background: #fff; color: var(--fi-primary-500); }
.fi-btn--inverse:hover { background: var(--fi-neutral-100); color: var(--fi-primary-500); }

.fi-btn--outline-inverse { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.fi-btn--outline-inverse:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); color: #fff; }

.fi-btn-row { display: flex; flex-wrap: wrap; gap: var(--fi-space-3); align-items: center; }

/* ------------------------------------------------------------------ nav */
.fi-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: var(--fi-blur);
  -webkit-backdrop-filter: var(--fi-blur);
  border-bottom: var(--fi-border-width) solid var(--fi-border-subtle);
}
.fi-nav__inner {
  height: var(--fi-nav-h);
  display: flex; align-items: center; gap: var(--fi-space-6);
  position: relative;
}
.fi-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.fi-logo img { height: 48px; width: auto; }

.fi-nav__links { display: flex; align-items: center; gap: var(--fi-space-5); margin-left: auto; }
.fi-nav__links a:not(.fi-btn) {
  font: var(--fi-role-ui); color: var(--fi-text-body); text-decoration: none;
  padding-block: var(--fi-space-2); position: relative;
}
.fi-nav__links a:not(.fi-btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--fi-marker); transform: scaleX(0); transform-origin: left;
  transition: transform var(--fi-duration) var(--fi-ease);
}
.fi-nav__links a:not(.fi-btn):hover { color: var(--fi-primary-500); }
.fi-nav__links a:not(.fi-btn):hover::after { transform: scaleX(1); }

.fi-nav__cta { margin-left: var(--fi-space-2); }
.fi-nav__toggle {
  display: none; margin-left: auto;
  height: var(--fi-control-h-md); width: var(--fi-control-h-md);
  align-items: center; justify-content: center;
  background: transparent;
  border: var(--fi-border-width) solid var(--fi-border-default);
  border-radius: var(--fi-radius-sm); cursor: pointer; color: var(--fi-primary-500);
}
.fi-nav__toggle svg { width: 20px; height: 20px; }

/* ----------------------------------------------------------------- hero */
.fi-hero {
  background: var(--fi-primary-600);
  color: rgba(255,255,255,.82);
  padding-block: clamp(var(--fi-space-8), 6vw, var(--fi-space-9));
  overflow: hidden;
}
.fi-hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(var(--fi-space-6), 5vw, var(--fi-space-8));
  align-items: center;
}
.fi-hero h1 {
  color: #fff;
  font: var(--fi-weight-extrabold) clamp(34px, 5vw, var(--fi-text-5xl))/var(--fi-leading-tight) var(--fi-font-display);
  letter-spacing: var(--fi-tracking-display);
  margin-bottom: var(--fi-space-5);
}
.fi-hero h1 em { font-style: normal; color: inherit; }
.fi-hero__lede {
  font: var(--fi-role-body-lg); color: rgba(255,255,255,.82);
  max-width: 52ch; margin-bottom: var(--fi-space-6);
}
.fi-hero__note {
  margin-top: var(--fi-space-5); font-size: var(--fi-text-sm);
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: var(--fi-space-2);
}
.fi-hero__note svg { width: 16px; height: 16px; color: var(--fi-green-300); flex: 0 0 auto; }

/* Hero proof card — a product surface, not decoration. */
.fi-proof {
  background: #fff; color: var(--fi-text-body);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-radius: var(--fi-radius-lg);
  padding: var(--fi-space-5);
}
.fi-proof__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fi-space-3);
  padding-bottom: var(--fi-space-4);
  border-bottom: var(--fi-border-width) solid var(--fi-border-subtle);
}
.fi-proof__label {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1.2 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: var(--fi-text-muted); margin-bottom: var(--fi-space-1);
}
.fi-proof__lot {
  font: var(--fi-weight-semibold) var(--fi-text-sm)/1.4 var(--fi-font-mono);
  color: var(--fi-primary-500); font-variant-numeric: tabular-nums;
}
.fi-chip {
  display: inline-flex; align-items: center; gap: var(--fi-space-2);
  font: var(--fi-weight-semibold) var(--fi-text-xs)/1 var(--fi-font-sans);
  padding: 6px var(--fi-space-3); border-radius: var(--fi-radius-pill);
  background: var(--fi-success-surface); color: var(--fi-success);
}
.fi-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.fi-proof__rows { display: grid; gap: var(--fi-space-3); padding-block: var(--fi-space-4); margin: 0; }
.fi-proof__row { display: flex; justify-content: space-between; gap: var(--fi-space-4); font-size: var(--fi-text-sm); }
.fi-proof__row dt { color: var(--fi-text-muted); }
.fi-proof__row dd { margin: 0; font-weight: var(--fi-weight-semibold); color: var(--fi-text-strong); text-align: right; }

.fi-chain {
  display: flex; align-items: flex-start;
  padding-top: var(--fi-space-4);
  border-top: var(--fi-border-width) solid var(--fi-border-subtle);
}
.fi-chain__node { flex: 1; text-align: center; position: relative; }
.fi-chain__node::before {
  content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px;
  background: var(--fi-green-200);
}
.fi-chain__node:first-child::before { display: none; }
.fi-chain__node.is-pending::before { background: var(--fi-neutral-200); }
.fi-chain__dot {
  width: 20px; height: 20px; border-radius: 50%; margin: 0 auto var(--fi-space-2);
  background: var(--fi-green-400); position: relative; z-index: 1;
  display: grid; place-items: center; color: #fff;
}
.fi-chain__dot svg { width: 12px; height: 12px; }
.fi-chain__node.is-pending .fi-chain__dot { background: var(--fi-neutral-200); color: var(--fi-neutral-500); }
.fi-chain__name { font-size: var(--fi-text-2xs); color: var(--fi-text-muted); line-height: 1.3; }

.fi-proof__foot {
  margin-top: var(--fi-space-4); padding-top: var(--fi-space-4);
  border-top: var(--fi-border-width) solid var(--fi-border-subtle);
  display: flex; align-items: center; gap: var(--fi-space-2);
  font-size: var(--fi-text-xs); color: var(--fi-text-muted);
}
.fi-proof__foot svg { width: 14px; height: 14px; color: var(--fi-success); flex: 0 0 auto; }

/* ---------------------------------------------------------------- stats */
.fi-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fi-space-5); }
.fi-stat { border-left: var(--fi-rule-accent-width) solid var(--fi-marker); padding-left: var(--fi-space-4); }
.fi-stat__n {
  display: block;
  font: var(--fi-weight-extrabold) var(--fi-text-3xl)/1.05 var(--fi-font-display);
  letter-spacing: var(--fi-tracking-display);
  color: var(--fi-text-strong); font-variant-numeric: tabular-nums;
}
.fi-stat__l { font-size: var(--fi-text-sm); color: var(--fi-text-muted); margin-top: var(--fi-space-2); }

/* ------------------------------------------------------------- compare */
.fi-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fi-space-5); }
.fi-compare__col {
  border: var(--fi-border-width) solid var(--fi-border-default);
  border-radius: var(--fi-radius-lg);
  padding: var(--fi-space-6);
  background: var(--fi-surface-card);
}
.fi-compare__col--now { background: var(--fi-neutral-50); }
.fi-compare__col--fi {
  background: var(--fi-primary-500); border-color: var(--fi-primary-500);
  color: rgba(255,255,255,.82);
}
.fi-compare__col--fi h3 { color: #fff; }
.fi-compare h3 { margin-bottom: var(--fi-space-5); }
.fi-compare li {
  display: flex; gap: var(--fi-space-3); align-items: flex-start;
  padding-block: var(--fi-space-3); font-size: var(--fi-text-sm); line-height: 1.55;
  border-top: var(--fi-border-width) solid var(--fi-border-subtle);
}
.fi-compare__col--fi li { border-top-color: var(--fi-border-inverse); }
.fi-compare li:first-child { border-top: 0; padding-top: 0; }
.fi-compare li svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.fi-compare__col--now li svg { color: var(--fi-neutral-400); }
.fi-compare__col--fi li svg { color: var(--fi-green-300); }

/* ---------------------------------------------------------------- wheel */
.fi-wheel {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(var(--fi-space-6), 4vw, var(--fi-space-8));
  align-items: start;
}
.fi-wheel__figure {
  margin: 0; background: #fff;
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-radius: var(--fi-radius-lg);
  padding: var(--fi-space-5);
}
.fi-wheel__figure img { width: 100%; }
.fi-wheel__figure figcaption {
  margin-top: var(--fi-space-4); padding-top: var(--fi-space-4);
  border-top: var(--fi-border-width) solid var(--fi-border-subtle);
  font-size: var(--fi-text-xs); color: var(--fi-text-muted); line-height: 1.5;
}
.fi-quads { display: grid; gap: var(--fi-space-4); }
.fi-quad {
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-left: var(--fi-rule-accent-width) solid var(--fi-q, var(--fi-marker));
  padding: var(--fi-space-4) var(--fi-space-5);
}
.fi-quad h3 {
  font: var(--fi-weight-semibold) var(--fi-text-xs)/1.2 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: var(--fi-q-ink, var(--fi-text-strong)); margin-bottom: var(--fi-space-3);
}
.fi-quad li {
  font-size: var(--fi-text-sm); color: var(--fi-text-body);
  padding-block: 3px; display: flex; gap: var(--fi-space-3); line-height: 1.45;
}
.fi-quad li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--fi-q); margin-top: 8px; flex: 0 0 auto;
}

/* ------------------------------------------------------------ solutions */
.fi-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fi-space-5); }
.fi-card {
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-radius: var(--fi-radius-lg);
  padding: var(--fi-space-6);
  display: flex; flex-direction: column;
  transition: border-color var(--fi-duration) var(--fi-ease),
              transform var(--fi-duration) var(--fi-ease);
}
.fi-card:hover { border-color: var(--fi-border-strong); transform: translateY(-2px); }
.fi-card__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--fi-c, var(--fi-primary-500)); color: #fff;
  margin-bottom: var(--fi-space-5); border-radius: var(--fi-radius-md);
}
.fi-card__icon svg { width: 20px; height: 20px; }
.fi-card__problem {
  font-size: var(--fi-text-sm); color: var(--fi-text-muted);
  border-left: 2px solid var(--fi-border-default);
  padding-left: var(--fi-space-4);
  margin-bottom: var(--fi-space-4); line-height: 1.55;
}
.fi-card > p { font-size: var(--fi-text-sm); line-height: 1.6; }
.fi-card__benefits {
  margin-top: auto; padding-top: var(--fi-space-5);
  border-top: var(--fi-border-width) solid var(--fi-border-subtle);
  display: grid; gap: var(--fi-space-3);
}
.fi-card__benefits li { display: flex; gap: var(--fi-space-3); align-items: flex-start; font-size: var(--fi-text-sm); line-height: 1.45; }
.fi-card__benefits svg { width: 16px; height: 16px; color: var(--fi-c, var(--fi-green-700)); flex: 0 0 auto; margin-top: 2px; }

/* ---------------------------------------------------------------- steps */
.fi-steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--fi-space-5); }
.fi-step { position: relative; padding-top: var(--fi-space-6); }
.fi-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font: var(--fi-weight-semibold) var(--fi-text-xs)/1 var(--fi-font-mono);
  color: var(--fi-green-700); letter-spacing: var(--fi-tracking-wide);
}
.fi-step::after {
  content: ""; position: absolute; top: 22px; left: 0; right: 0; height: 2px;
  background: var(--fi-green-100);
}
.fi-step:last-child::after { background: linear-gradient(90deg, var(--fi-green-100), transparent); }
.fi-step h3 {
  font: var(--fi-weight-semibold) var(--fi-text-md)/1.35 var(--fi-font-sans);
  margin: var(--fi-space-5) 0 var(--fi-space-2);
}
.fi-step p { font-size: var(--fi-text-sm); color: var(--fi-text-muted); line-height: 1.55; }

/* --------------------------------------------------------------- quotes */
.fi-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fi-space-5); }
.fi-quote {
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-top: var(--fi-rule-accent-width) solid var(--fi-q, var(--fi-marker));
  padding: var(--fi-space-6); display: flex; flex-direction: column; margin: 0;
}
.fi-quote__n {
  font: var(--fi-weight-extrabold) var(--fi-text-4xl)/1 var(--fi-font-display);
  color: var(--fi-q, var(--fi-primary-500));
  letter-spacing: var(--fi-tracking-display);
  font-variant-numeric: tabular-nums; margin-bottom: var(--fi-space-3);
}
.fi-quote blockquote { margin: 0 0 var(--fi-space-5); font-size: var(--fi-text-sm); line-height: 1.6; color: var(--fi-text-body); }
.fi-quote figcaption {
  margin-top: auto; padding-top: var(--fi-space-4);
  border-top: var(--fi-border-width) solid var(--fi-border-subtle);
  font-size: var(--fi-text-xs); color: var(--fi-text-muted);
}
.fi-quote figcaption b {
  display: block; color: var(--fi-text-strong);
  font-weight: var(--fi-weight-semibold); font-size: var(--fi-text-sm); margin-bottom: 2px;
}

/* ---------------------------------------------------------------- trust */
.fi-trust {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(var(--fi-space-6), 5vw, var(--fi-space-8)); align-items: center;
}
.fi-trust__list { display: grid; gap: var(--fi-space-5); }
.fi-trust__item { display: flex; gap: var(--fi-space-4); }
.fi-trust__num {
  font: var(--fi-weight-semibold) var(--fi-text-xs)/1 var(--fi-font-mono);
  color: var(--fi-green-800); padding-top: 5px; flex: 0 0 auto;
  letter-spacing: var(--fi-tracking-wide);
}
.fi-section--inverse .fi-trust__num,
.fi-section--violet .fi-trust__num,
.fi-cta .fi-trust__num { color: var(--fi-green-100); }
.fi-trust__item h3 {
  font: var(--fi-weight-semibold) var(--fi-text-md)/1.35 var(--fi-font-sans);
  color: #fff; margin-bottom: var(--fi-space-2);
}
.fi-trust__item p { font-size: var(--fi-text-sm); color: rgba(255,255,255,.72); line-height: 1.6; }

/* ------------------------------------------------------------------ faq */
.fi-faq { max-width: var(--fi-container-narrow); margin-inline: 0; }
.fi-faq details { border-bottom: var(--fi-border-width) solid var(--fi-border-subtle); }
.fi-faq summary {
  cursor: pointer; list-style: none; padding-block: var(--fi-space-5);
  font: var(--fi-weight-semibold) var(--fi-text-md)/1.4 var(--fi-font-sans);
  color: var(--fi-text-strong);
  display: flex; align-items: center; justify-content: space-between; gap: var(--fi-space-4);
}
.fi-faq summary::-webkit-details-marker { display: none; }
.fi-faq summary::after {
  content: ""; width: 11px; height: 11px; flex: 0 0 auto;
  border-right: 2px solid var(--fi-green-700);
  border-bottom: 2px solid var(--fi-green-700);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--fi-duration) var(--fi-ease);
}
.fi-faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.fi-faq details > div {
  padding-bottom: var(--fi-space-5);
  font-size: var(--fi-text-sm); line-height: 1.65;
  color: var(--fi-text-body); max-width: 68ch;
}

/* ------------------------------------------------------------------ cta */
.fi-cta { background: var(--fi-primary-700); color: rgba(255,255,255,.82); }
.fi-cta__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--fi-space-8); align-items: center; }
/* Same min-width:auto trap as .fi-feature — a 1fr track still floors at its
   item's min-content width, which pushed this panel past a 320px screen. */
.fi-cta__inner > * { min-width: 0; }
.fi-cta h2 { color: #fff; }
.fi-cta__steps { display: grid; gap: var(--fi-space-4); }
.fi-cta__step { display: flex; gap: var(--fi-space-4); align-items: flex-start; font-size: var(--fi-text-sm); color: rgba(255,255,255,.78); line-height: 1.55; }
.fi-cta__step b { display: block; color: #fff; font-weight: var(--fi-weight-semibold); margin-bottom: 2px; }
.fi-cta__badge {
  width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  border: var(--fi-border-width) solid var(--fi-border-inverse);
  font: var(--fi-weight-semibold) var(--fi-text-xs)/1 var(--fi-font-mono);
  color: var(--fi-green-300);
}

/* --------------------------------------------------------------- footer */
/* The logo artwork is dark-teal type on transparency, so the footer stays
   light — a reversed logo variant does not exist and must not be invented. */
.fi-footer {
  background: var(--fi-surface-sunken);
  border-top: var(--fi-border-width) solid var(--fi-border-default);
  padding-block: var(--fi-space-8) var(--fi-space-6);
  color: var(--fi-text-body);
}
.fi-footer__grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: var(--fi-space-6); }
.fi-footer .fi-logo img { height: 50px; }
.fi-footer h4 {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1.2 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: var(--fi-text-muted); margin-bottom: var(--fi-space-4);
}
.fi-footer li { padding-block: var(--fi-space-2); }
.fi-footer a { color: var(--fi-text-body); text-decoration: none; font-size: var(--fi-text-sm); }
.fi-footer a:hover { color: var(--fi-text-link-hover); }
.fi-footer__about { font-size: var(--fi-text-sm); color: var(--fi-text-muted); max-width: 42ch; margin-top: var(--fi-space-4); line-height: 1.6; }
.fi-footer__bar {
  margin-top: var(--fi-space-7); padding-top: var(--fi-space-5);
  border-top: var(--fi-border-width) solid var(--fi-border-default);
  display: flex; flex-wrap: wrap; gap: var(--fi-space-4); justify-content: space-between;
  font-size: var(--fi-text-xs); color: var(--fi-text-muted);
}

/* ------------------------------------------------------- placeholder aid */
/* Every figure, quote and client name on this page that is NOT yet backed by
   a verified source carries .is-ph. The toggle highlights them all so nothing
   invented ships by accident. Delete .is-ph as each is replaced, then delete
   this block and the button. */
.fi-phbtn { display: none; }
body.fi-ph-dev .fi-phbtn {
  display: inline-flex;
  position: fixed; right: var(--fi-space-5); bottom: var(--fi-space-5); z-index: 60;
  font: var(--fi-weight-semibold) var(--fi-text-xs)/1 var(--fi-font-sans);
  background: var(--fi-neutral-900); color: #fff; border: 0;
  padding: var(--fi-space-3) var(--fi-space-4); border-radius: var(--fi-radius-pill);
  cursor: pointer; box-shadow: var(--fi-shadow-lg);
}
body.fi-show-ph .is-ph {
  outline: 2px dashed var(--fi-warning);
  outline-offset: 3px;
  background-color: var(--fi-warning-surface);
}

/* --------------------------------------------- long-word safety nets */
/*  hyphens:auto needs <html lang> to pick its
   dictionary, and stays phone-only because wide columns read better without
   it. overflow-wrap is the last resort for an unbreakable token. */
body { overflow-wrap: break-word; }
@media (max-width: 640px) {
  /* Headings only. Running prose set with hyphens:auto breaks mid-word all the
     way down the paragraph ("evi-dence", "au-ditor"), which looks worse than
     the ragged edge it fixes; overflow-wrap above already stops a long token
     from pushing the page sideways. */
  h1, h2, h3, h4, summary { hyphens: auto; }
}
/* .fi-btn is nowrap with a fixed height, which is right on a wide screen and
   wrong on a narrow one: a long label ("More about the research environment")
   cannot wrap, so it holds the whole page open. Below 560px the label wraps
   and the control grows instead of the page. */
@media (max-width: 560px) {
  .fi-btn {
    white-space: normal; text-align: center;
    height: auto; min-height: var(--fi-control-h-md);
    padding-block: var(--fi-space-3);
  }
  .fi-btn--lg { min-height: var(--fi-control-h-lg); }
}

/* -------------------------------------------- full-screen section rhythm */
/* Each content section fills the viewport below the sticky header, so one
   section reads as one screen.

   Gated on a viewport that can actually hold a section. Measured at 390x844,
   most sections are 1.2-1.6 screens tall and the product grid is 2.6, so on a
   phone this is impossible without clipping content — there, sections keep
   their natural height.

   min-height, never height: a section taller than the screen still grows
   rather than hiding its overflow. Snap is `proximity`, not `mandatory`, for
   the same reason — mandatory traps a tall section and you cannot read its
   bottom.

   The funding strip and the stats band are deliberately thin and are excluded;
   they pair with the section above them to make up a screen. */
@media (min-width: 861px) and (min-height: 620px) {
  main > section:not(.fi-funding):not(.fi-section--tight):not(.fi-anchornav):not(.fi-pagehead):not(.fi-section--compact) {
    /* Tuned for a normal laptop, not a large monitor. The cap matters: on a
       1300px-tall display an uncapped 100svh section becomes a half-empty
       cavern. The cap is set to what a normal computer screen produces, so a
       large monitor shows sections at the same size as a laptop rather than
       scaling them up. 1080p and every ordinary laptop still fill exactly.
       The 92px is the existing scroll-padding-top (nav + 16px breathing room);
       do NOT also set scroll-margin-top or the two stack and the section lands
       168px down. */
    min-height: calc(100vh - var(--fi-nav-h) - 16px);
    min-height: min(calc(100svh - var(--fi-nav-h) - 16px), 860px);
    display: flex;
    align-items: center;
    scroll-snap-align: start;
  }
  /* the single container child must span the flex line */
  main > section:not(.fi-funding):not(.fi-section--tight):not(.fi-anchornav):not(.fi-pagehead):not(.fi-section--compact) > * {
    width: 100%;
  }
  /* .fi-pagehead is excluded from the full-screen height above, but it must
     still be a snap target: without one at the top of the page the browser
     snaps to the FIRST available target on load, and the page opens already
     scrolled past its own header. */
  /* Whatever the first section is — pagehead, funding strip, hero — it must be
     a snap target, or the browser snaps to the first one that is and the page
     opens already scrolled past its own top. */
  main > section.fi-pagehead,
  main > section:first-child {
    scroll-snap-align: start;
  }
  html { scroll-snap-type: y proximity; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

/* A section's padding is generous by default — up to 96px top and bottom. On a
   normal laptop that is what pushes the content past the screen: measured at
   1366x768 (660px viewport) the content alone is 751px. Trim the padding as the
   viewport gets shorter so a section still fits one screen on an ordinary
   display, rather than only on a large monitor. */
@media (min-width: 861px) and (max-height: 880px) {
  main > section:not(.fi-funding):not(.fi-section--tight):not(.fi-anchornav):not(.fi-pagehead):not(.fi-section--compact) {
    padding-block: var(--fi-space-6);
  }
}
@media (min-width: 861px) and (max-height: 720px) {
  main > section:not(.fi-funding):not(.fi-section--tight):not(.fi-anchornav):not(.fi-pagehead):not(.fi-section--compact) {
    padding-block: var(--fi-space-5);
  }
  .fi-section-head { margin-bottom: var(--fi-space-5); }
}

/* ------------------------------------------------------------ phone pass */
/* Measured at 390x844 before changing anything: the home page was 15.5 screens
   of scrolling, footer links were 19px tall against a 44px minimum touch
   target, and 76 text nodes rendered below 12px. */
@media (max-width: 760px) {

  /* 1 — vertical space. 64px top and bottom on 11 sections is 1,408px of pure
     padding on the home page alone. 40px still separates the bands clearly. */
  .fi-section { padding-block: var(--fi-space-7); }
  .fi-section--tight { padding-block: var(--fi-space-6); }
  .fi-section-head { margin-bottom: var(--fi-space-6); }

  /* 2 — use the width. A phone is 390px, not 200px: short paired items read
     better two-across than stacked, and it halves their height. */
  .fi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fi-space-5); }
  .fi-quads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fi-space-4); }
  .fi-cta__steps { gap: var(--fi-space-3); }

  /* 3 — touch targets. An inline footer link is 19px tall; 12px of vertical
     padding brings the tappable box to ~44px without moving the text. */
  .fi-footer ul a,
  .fi-nav__links a:not(.fi-btn) {
    display: inline-block;
    padding-block: var(--fi-space-3);
  }
  .fi-footer ul { margin-block: calc(var(--fi-space-3) * -1); }
  .fi-footer__contact a { display: inline-block; padding-block: var(--fi-space-3); }

  /* the two controls a thumb actually reaches for */
  .fi-nav__toggle { height: 44px; width: 44px; }
  .fi-logo { padding-block: var(--fi-space-1); }

  /* 4 — the smallest type. 11px and 12px are fine on a desktop at arm's
     length and too small held in one hand. */
  :root {
    --fi-text-2xs: 12px;
    --fi-text-xs:  13px;
  }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .fi-hero__grid { grid-template-columns: 1fr; }
  .fi-wheel { grid-template-columns: 1fr; }
  .fi-trust { grid-template-columns: 1fr; }
  .fi-cta__inner { grid-template-columns: 1fr; gap: var(--fi-space-6); }
  .fi-steps { grid-template-columns: repeat(2, 1fr); gap: var(--fi-space-6); }
  .fi-step::after { display: none; }
  .fi-quotes { grid-template-columns: 1fr; }
  .fi-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .fi-nav__links {
    display: none; position: absolute; top: var(--fi-nav-h); left: calc(var(--fi-gutter) * -1); right: calc(var(--fi-gutter) * -1);
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    border-bottom: var(--fi-border-width) solid var(--fi-border-subtle);
    padding: var(--fi-space-2) var(--fi-gutter) var(--fi-space-5);
    box-shadow: var(--fi-shadow-md);
  }
  .fi-nav__links.is-open { display: flex; }
  .fi-nav__links a { padding-block: var(--fi-space-4); border-bottom: var(--fi-border-width) solid var(--fi-border-subtle); }
  .fi-nav__links a::after { display: none; }
  .fi-nav__links .fi-btn { margin-top: var(--fi-space-4); }
  .fi-nav__toggle { display: inline-flex; }
  .fi-nav__cta { display: none; }
}
@media (max-width: 760px) {
  .fi-stats { grid-template-columns: repeat(2, 1fr); gap: var(--fi-space-6); }
  .fi-compare { grid-template-columns: 1fr; }
  .fi-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --fi-gutter: var(--fi-space-4); }
  /* A stat is a number and a two-word label, and a step is a short title and a
     line of text — both fit two-across at 390px and stacking them only added
     scrolling. The footer stays one column; its links are full sentences. */
  .fi-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fi-space-5); }
  .fi-footer__grid { grid-template-columns: 1fr; }
  .fi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-logo img { height: 36px; }
  .fi-chain__name { font-size: 11px; }
  .fi-proof { padding: var(--fi-space-4); }
}


/* ============================================================================
   Multi-page additions — products, projects, about.
   Same token vocabulary as above; no new brand values.
   ========================================================================= */

/* ------------------------------------------------------- nav: products */
.fi-nav__group { position: relative; }
.fi-nav__group > button {
  font: var(--fi-role-ui); color: var(--fi-text-body);
  background: none; border: 0; cursor: pointer;
  padding-block: var(--fi-space-2);
  display: inline-flex; align-items: center; gap: var(--fi-space-2);
}
.fi-nav__group > button::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--fi-duration) var(--fi-ease);
}
.fi-nav__group:hover > button,
.fi-nav__group:focus-within > button { color: var(--fi-primary-500); }
.fi-nav__menu {
  position: absolute; top: calc(100% + var(--fi-space-3)); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 280px; background: #fff;
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  box-shadow: var(--fi-shadow-lg);
  padding: var(--fi-space-2);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--fi-duration) var(--fi-ease),
              transform var(--fi-duration) var(--fi-ease),
              visibility var(--fi-duration);
}
.fi-nav__group:hover .fi-nav__menu,
.fi-nav__group:focus-within .fi-nav__menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.fi-nav__menu a {
  display: grid; grid-template-columns: 3px 1fr; gap: var(--fi-space-3);
  align-items: start; padding: var(--fi-space-3);
  text-decoration: none; color: var(--fi-text-body);
}
.fi-nav__menu a::after { display: none; }
.fi-nav__menu a:hover { background: var(--fi-neutral-50); }
.fi-nav__menu a > span:first-child { background: var(--fi-c); align-self: stretch; }
.fi-nav__menu b {
  display: block; font: var(--fi-role-ui);
  color: var(--fi-text-strong); margin-bottom: 2px;
}
.fi-nav__menu em {
  font-style: normal; font-size: var(--fi-text-xs);
  color: var(--fi-text-muted); line-height: 1.45;
}
.fi-nav__links a[aria-current="page"] { color: var(--fi-primary-500); }
.fi-nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* --------------------------------------------------------- product hero */
.fi-phero {
  background: var(--fi-primary-600);
  color: rgba(255,255,255,.82);
  padding-block: clamp(var(--fi-space-7), 7vw, var(--fi-space-9));
}
.fi-phero__grid { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(var(--fi-space-6), 5vw, var(--fi-space-8)); align-items: center; }
.fi-phero h1 {
  color: #fff;
  font: var(--fi-weight-extrabold) clamp(32px, 4.4vw, var(--fi-text-4xl))/var(--fi-leading-tight) var(--fi-font-display);
  letter-spacing: var(--fi-tracking-display); margin-bottom: var(--fi-space-4);
}
.fi-phero__lede { font: var(--fi-role-body-lg); color: rgba(255,255,255,.82); max-width: 54ch; margin-bottom: var(--fi-space-6); }
.fi-phero__tag {
  display: inline-flex; align-items: center; gap: var(--fi-space-2);
  font: var(--fi-weight-semibold) var(--fi-text-xs)/1 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: #fff; background: var(--fi-c-ink, var(--fi-primary-700)); padding: 7px var(--fi-space-3);
  margin-bottom: var(--fi-space-5); border-radius: var(--fi-radius-md);
}

/* ------------------------------------------------- product cards (home) */
.fi-prodgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fi-space-5); }
.fi-prodcard {
  --fi-c: var(--fi-primary-500);
  position: relative; display: flex; flex-direction: column;
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-top: var(--fi-rule-accent-width) solid var(--fi-c);
  padding: var(--fi-space-6); text-decoration: none;
  transition: border-color var(--fi-duration) var(--fi-ease),
              transform var(--fi-duration) var(--fi-ease),
              box-shadow var(--fi-duration) var(--fi-ease);
}
.fi-prodcard:hover { transform: translateY(-3px); box-shadow: var(--fi-shadow-md); border-color: var(--fi-border-default); border-top-color: var(--fi-c); }
.fi-prodcard h3 { color: var(--fi-text-strong); margin-bottom: var(--fi-space-2); }
.fi-prodcard__role {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1.2 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: var(--fi-c-ink, var(--fi-primary-500)); margin-bottom: var(--fi-space-4);
}
.fi-prodcard p { font-size: var(--fi-text-sm); line-height: 1.6; color: var(--fi-text-body); }
.fi-prodcard__meta {
  margin-top: auto; padding-top: var(--fi-space-5);
  display: flex; flex-wrap: wrap; gap: var(--fi-space-2);
}
.fi-tag {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1 var(--fi-font-mono);
  color: var(--fi-text-muted); background: var(--fi-neutral-50);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  padding: 5px var(--fi-space-2);
}
.fi-prodcard__go {
  margin-top: var(--fi-space-5); font: var(--fi-role-ui); color: var(--fi-c-ink, var(--fi-primary-500));
  display: inline-flex; align-items: center; gap: var(--fi-space-2);
}
.fi-prodcard__go svg { width: 15px; height: 15px; transition: transform var(--fi-duration) var(--fi-ease); }
.fi-prodcard:hover .fi-prodcard__go svg { transform: translateX(3px); }

/* ------------------------------------------------------ feature blocks */
.fi-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--fi-space-6), 5vw, var(--fi-space-8)); align-items: center; }
/* A grid child defaults to min-width:auto, so the 420px min-width on a chart SVG
   held its track open and pushed the whole page sideways on a phone. min-width:0
   lets the track shrink and hands the scrolling back to .fi-chart's overflow-x. */
.fi-feature > * { min-width: 0; }
.fi-panel { min-width: 0; }
.fi-chart { min-width: 0; }
.fi-feature + .fi-feature { margin-top: clamp(var(--fi-space-7), 6vw, var(--fi-space-9)); }
.fi-feature--flip > *:first-child { order: 2; }

.fi-panel {
  background: #fff;
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-radius: var(--fi-radius-lg);
  padding: var(--fi-space-5);
}
.fi-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fi-space-3); padding-bottom: var(--fi-space-4);
  border-bottom: var(--fi-border-width) solid var(--fi-border-subtle);
  margin-bottom: var(--fi-space-4);
}
.fi-panel__title { font: var(--fi-weight-semibold) var(--fi-text-sm)/1.3 var(--fi-font-sans); color: var(--fi-text-strong); }
.fi-panel__label {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1.2 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: var(--fi-text-muted); margin-bottom: var(--fi-space-1);
}
.fi-panel__foot {
  margin-top: var(--fi-space-4); padding-top: var(--fi-space-4);
  border-top: var(--fi-border-width) solid var(--fi-border-subtle);
  font-size: var(--fi-text-xs); color: var(--fi-text-muted); line-height: 1.5;
}

/* -------------------------------------------------------- capability list */
.fi-caps { display: grid; gap: var(--fi-space-5); }
.fi-cap { display: grid; grid-template-columns: 28px 1fr; gap: var(--fi-space-4); }
.fi-cap__i {
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--fi-c); color: #fff; border-radius: var(--fi-radius-md);
}
.fi-cap__i svg { width: 15px; height: 15px; }
.fi-cap h3 { font: var(--fi-weight-semibold) var(--fi-text-md)/1.35 var(--fi-font-sans); margin-bottom: var(--fi-space-2); }
.fi-cap p { font-size: var(--fi-text-sm); color: var(--fi-text-muted); line-height: 1.6; }

/* --------------------------------------------------------- metric tiles */
.fi-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fi-space-3); }
.fi-metric {
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-left: var(--fi-rule-accent-width) solid var(--fi-m, var(--fi-marker));
  padding: var(--fi-space-3) var(--fi-space-4);
  background: var(--fi-surface-card);
}
.fi-metric__k {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1.2 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: var(--fi-text-muted); margin-bottom: var(--fi-space-2);
}
.fi-metric__v {
  font: var(--fi-weight-semibold) var(--fi-text-xl)/1 var(--fi-font-mono);
  color: var(--fi-text-strong); font-variant-numeric: tabular-nums;
}
.fi-metric__v small { font-size: var(--fi-text-xs); font-weight: var(--fi-weight-regular); color: var(--fi-text-muted); margin-left: 3px; }
.fi-metric__r { font-size: var(--fi-text-2xs); color: var(--fi-text-muted); margin-top: var(--fi-space-2); }
.fi-metric.is-breach { border-left-color: var(--fi-danger); background: var(--fi-danger-surface); }
.fi-metric.is-breach .fi-metric__v { color: var(--fi-danger); }

/* --------------------------------------------------------------- charts */
.fi-chart { width: 100%; overflow-x: auto; }
.fi-chart svg { display: block; width: 100%; height: auto; min-width: 420px; }

/* ---------------------------------------------------------------- table */
.fi-tablewrap { overflow-x: auto; }
.fi-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.fi-table th, .fi-table td {
  text-align: left; padding: var(--fi-space-3) var(--fi-space-3);
  border-bottom: var(--fi-border-width) solid var(--fi-border-subtle);
  font-size: var(--fi-text-sm);
}
.fi-table th {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1.2 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: var(--fi-text-muted); white-space: nowrap;
}
.fi-table td.num, .fi-table th.num { text-align: right; font-family: var(--fi-font-mono); font-variant-numeric: tabular-nums; }
.fi-table th.num { font-family: var(--fi-font-sans); }
.fi-table tbody tr:last-child td { border-bottom: 0; }
.fi-table tfoot td {
  font-weight: var(--fi-weight-semibold); color: var(--fi-text-strong);
  border-top: var(--fi-border-width-thick) solid var(--fi-border-default); border-bottom: 0;
}
.fi-pill {
  display: inline-block; font: var(--fi-weight-semibold) var(--fi-text-2xs)/1 var(--fi-font-sans);
  padding: 5px var(--fi-space-2); border-radius: var(--fi-radius-pill);
  background: var(--fi-success-surface); color: var(--fi-success); white-space: nowrap;
}
.fi-pill--warning { background: var(--fi-warning-surface); color: var(--fi-warning); }
.fi-pill--danger { background: var(--fi-danger-surface); color: var(--fi-danger); }
.fi-pill--info { background: var(--fi-info-surface); color: var(--fi-info); }

/* ------------------------------------------------------------- outcomes */
.fi-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fi-space-5); }
.fi-outcome { border-left: var(--fi-rule-accent-width) solid var(--fi-c); padding-left: var(--fi-space-4); }
.fi-outcome h3 { font: var(--fi-weight-semibold) var(--fi-text-md)/1.35 var(--fi-font-sans); margin-bottom: var(--fi-space-2); }
.fi-outcome p { font-size: var(--fi-text-sm); color: var(--fi-text-muted); line-height: 1.6; }

/* ----------------------------------------------------- product switcher */
.fi-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fi-space-4); }
.fi-switch a {
  --fi-c: var(--fi-primary-500);
  display: block; padding: var(--fi-space-5);
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-top: var(--fi-rule-accent-width) solid var(--fi-c);
  text-decoration: none;
  transition: transform var(--fi-duration) var(--fi-ease), box-shadow var(--fi-duration) var(--fi-ease);
}
.fi-switch a:hover { transform: translateY(-2px); box-shadow: var(--fi-shadow-sm); }
.fi-switch b { display: block; font: var(--fi-role-ui); color: var(--fi-text-strong); margin-bottom: var(--fi-space-2); }
.fi-switch span { font-size: var(--fi-text-xs); color: var(--fi-text-muted); line-height: 1.5; display: block; }

/* -------------------------------------------------------------- projects */
.fi-projects { display: grid; gap: var(--fi-space-5); }
.fi-project {
  display: grid; grid-template-columns: 210px 1fr; gap: clamp(var(--fi-space-5), 4vw, var(--fi-space-7));
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-left: var(--fi-rule-accent-width) solid var(--fi-c, var(--fi-marker));
  padding: var(--fi-space-6);
}
.fi-project__side { display: grid; gap: var(--fi-space-4); align-content: start; }
.fi-project__k {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1.2 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: var(--fi-text-muted); margin-bottom: var(--fi-space-1);
}
.fi-project__v { font-size: var(--fi-text-sm); color: var(--fi-text-strong); font-weight: var(--fi-weight-semibold); line-height: 1.45; }
.fi-project h3 { margin-bottom: var(--fi-space-3); }
.fi-project p { font-size: var(--fi-text-sm); line-height: 1.65; }
.fi-project__q {
  margin-top: var(--fi-space-4); padding: var(--fi-space-4);
  background: var(--fi-surface-sunken);
  border-left: 2px solid var(--fi-border-default);
  font-size: var(--fi-text-sm); line-height: 1.6; color: var(--fi-text-body);
}
.fi-project__q b { color: var(--fi-text-strong); }

/* ----------------------------------------------------------- about/essay */
.fi-essay { max-width: 68ch; margin-inline: auto; }
.fi-essay > p { font: var(--fi-weight-regular) var(--fi-text-lg)/1.7 var(--fi-font-sans); color: var(--fi-text-body); margin-bottom: var(--fi-space-5); }
.fi-essay h2 {
  font: var(--fi-weight-bold) var(--fi-text-2xl)/var(--fi-leading-snug) var(--fi-font-display);
  letter-spacing: var(--fi-tracking-display);
  margin-top: clamp(var(--fi-space-7), 6vw, var(--fi-space-8)); margin-bottom: var(--fi-space-4);
}
.fi-essay h2:first-child { margin-top: 0; }
.fi-essay__mark {
  font: var(--fi-weight-semibold) var(--fi-text-xs)/1.2 var(--fi-font-mono);
  letter-spacing: var(--fi-tracking-wide);
  color: var(--fi-green-700); display: block; margin-bottom: var(--fi-space-3);
}
.fi-pull {
  margin: var(--fi-space-7) 0; padding-left: var(--fi-space-6);
  border-left: var(--fi-rule-accent-width) solid var(--fi-marker);
}
.fi-pull p {
  font: var(--fi-weight-light) clamp(22px, 2.6vw, var(--fi-text-2xl))/1.35 var(--fi-font-display);
  color: var(--fi-text-strong); letter-spacing: var(--fi-tracking-display); margin: 0;
}
.fi-essay ul { margin: 0 0 var(--fi-space-5); display: grid; gap: var(--fi-space-3); }
.fi-essay ul li { display: flex; gap: var(--fi-space-3); font-size: var(--fi-text-md); line-height: 1.65; }
.fi-essay ul li::before { content: ""; width: 5px; height: 5px; background: var(--fi-marker); margin-top: 11px; flex: 0 0 auto; }
.fi-essay strong { color: var(--fi-text-strong); font-weight: var(--fi-weight-semibold); }

/* A boundary diagram: two entities, one good, one translation. */
.fi-boundary { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.fi-boundary__side {
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  padding: var(--fi-space-5);
}
.fi-boundary__side h4 {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1.2 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: var(--fi-text-muted); margin-bottom: var(--fi-space-4);
}
.fi-boundary__row { display: flex; justify-content: space-between; gap: var(--fi-space-3); padding-block: var(--fi-space-2); font-size: var(--fi-text-xs); }
.fi-boundary__row dt { color: var(--fi-text-muted); }
.fi-boundary__row dd { margin: 0; font-family: var(--fi-font-mono); color: var(--fi-text-strong); text-align: right; }
.fi-boundary__gap {
  width: 74px; display: grid; place-items: center; position: relative;
  background: var(--fi-surface-sunken);
  border-block: var(--fi-border-width) solid var(--fi-border-subtle);
}
.fi-boundary__gap span {
  font: var(--fi-weight-semibold) var(--fi-text-2xs)/1.2 var(--fi-font-sans);
  letter-spacing: var(--fi-tracking-caps); text-transform: uppercase;
  color: var(--fi-warning); writing-mode: vertical-rl; transform: rotate(180deg);
}
.fi-boundary__gap::before, .fi-boundary__gap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 2px dashed var(--fi-border-strong);
}
.fi-boundary__gap::before { left: 0; }
.fi-boundary__gap::after { right: 0; }
.fi-boundary__cap { margin-top: var(--fi-space-4); font-size: var(--fi-text-xs); color: var(--fi-text-muted); text-align: center; line-height: 1.5; }

/* ---------------------------------------------------------- page header */
.fi-pagehead {
  background: var(--fi-primary-600);
  color: rgba(255,255,255,.82);
  padding-block: clamp(var(--fi-space-7), 7vw, var(--fi-space-8));
}
.fi-pagehead h1 {
  color: #fff;
  font: var(--fi-weight-extrabold) clamp(32px, 4.4vw, var(--fi-text-4xl))/var(--fi-leading-tight) var(--fi-font-display);
  letter-spacing: var(--fi-tracking-display); margin-bottom: var(--fi-space-4);
}
.fi-pagehead .fi-lede { color: rgba(255,255,255,.8); }

/* -------------------------------------------------------- misc helpers */
.fi-note {
  display: flex; gap: var(--fi-space-3);
  background: var(--fi-info-surface);
  border-left: var(--fi-rule-accent-width) solid var(--fi-cyan);
  padding: var(--fi-space-4); font-size: var(--fi-text-sm); line-height: 1.6;
}
.fi-note svg { width: 18px; height: 18px; color: var(--fi-info); flex: 0 0 auto; margin-top: 2px; }
.fi-stack { display: grid; gap: var(--fi-space-5); }

/* --------------------------------------------------- responsive (new) */
@media (max-width: 1000px) {
  .fi-phero__grid { grid-template-columns: 1fr; }
  .fi-feature { grid-template-columns: 1fr; }
  .fi-feature--flip > *:first-child { order: 0; }
  .fi-outcomes { grid-template-columns: 1fr; gap: var(--fi-space-5); }
  .fi-switch { grid-template-columns: 1fr; }
  .fi-project { grid-template-columns: 1fr; gap: var(--fi-space-5); }
  .fi-project__side { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .fi-nav__group { width: 100%; }
  .fi-nav__group > button {
    width: 100%; justify-content: space-between;
    padding-block: var(--fi-space-4);
    border-bottom: var(--fi-border-width) solid var(--fi-border-subtle);
  }
  .fi-nav__menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; box-shadow: none; border: 0; padding: 0 0 var(--fi-space-3);
    display: none;
  }
  .fi-nav__group:focus-within .fi-nav__menu,
  .fi-nav__group.is-open .fi-nav__menu { display: grid; transform: none; }
  .fi-nav__menu a { padding-block: var(--fi-space-3); }
}
@media (max-width: 760px) {
  .fi-prodgrid { grid-template-columns: 1fr; }
  .fi-metrics { grid-template-columns: 1fr; }
  .fi-boundary { grid-template-columns: 1fr; }
  .fi-boundary__gap { width: auto; height: 54px; border-block: 0; border-inline: var(--fi-border-width) solid var(--fi-border-subtle); }
  .fi-boundary__gap span { writing-mode: horizontal-tb; transform: none; }
  .fi-boundary__gap::before, .fi-boundary__gap::after { top: auto; bottom: auto; left: 0; right: 0; width: auto; height: 0; border-left: 0; border-top: 2px dashed var(--fi-border-strong); }
  .fi-boundary__gap::before { top: 0; }
  .fi-boundary__gap::after { bottom: 0; }
  .fi-project__side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .fi-project__side { grid-template-columns: 1fr; }
  .fi-project { padding: var(--fi-space-5); }
}


/* ============================================================================
   Photography — warehouse and inspection imagery.
   Same token vocabulary as above; no new brand values.

   Two components only:
     .fi-photoband  one wide 16:9 photograph with a caption plate on it
     .fi-cats       a grid of 4:3 tiles naming the goods in each picture
   ========================================================================= */

/* ------------------------------------------------------- wide photo band */
.fi-photoband {
  position: relative;
  margin: 0;
  background: var(--fi-neutral-100);
  border-radius: var(--fi-radius-lg);
}
.fi-photoband img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.fi-photoband figcaption {
  font-size: var(--fi-text-sm); line-height: 1.55;
  color: rgba(255,255,255,.86);
  background: rgba(8,41,53,.86);
  border-left: var(--fi-rule-accent-width, 3px) solid var(--fi-green);
  padding: var(--fi-space-4) var(--fi-space-5);
}
.fi-photoband figcaption b {
  display: block; margin-bottom: 2px;
  font-weight: var(--fi-weight-semibold); color: #fff;
}
/* On anything wider than a phone the plate sits on the photograph itself; the
   bottom-right corner is left clear so the cut stays visible. */
@media (min-width: 721px) {
  .fi-photoband figcaption {
    position: absolute; left: 0; bottom: 0; width: min(68ch, 66%);
  }
}

/* Inside the essay column the band is narrower, so it gets some air of its own. */
.fi-essay .fi-photoband { margin-block: var(--fi-space-7); }

/* --------------------------------------------------------- category tiles */
.fi-cats {
  display: grid; gap: var(--fi-space-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fi-cat {
  margin: 0; overflow: hidden;
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-radius: var(--fi-radius-md);
  transition: border-color var(--fi-duration) var(--fi-ease);
}
.fi-cat:hover { border-color: var(--fi-border-strong); }
.fi-cat img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.fi-cat figcaption { padding: var(--fi-space-3) var(--fi-space-4) var(--fi-space-4); }
.fi-cat__n {
  display: block;
  font: var(--fi-weight-semibold) var(--fi-text-sm)/1.3 var(--fi-font-sans);
  color: var(--fi-text-strong);
}
.fi-cat__d {
  display: block; margin-top: 3px;
  font-size: var(--fi-text-xs); line-height: 1.5; color: var(--fi-text-muted);
}

@media (max-width: 1000px) { .fi-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .fi-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A band that introduces a run of feature blocks keeps the same rhythm those
   blocks keep between themselves. */
.fi-photoband + .fi-feature { margin-top: clamp(var(--fi-space-7), 6vw, var(--fi-space-9)); }
.fi-photoband + .fi-projects { margin-top: clamp(var(--fi-space-6), 5vw, var(--fi-space-8)); }

/* In a narrow column the overlay plate swallows the picture, so this variant
   keeps the caption under it at every width. */
.fi-photoband--stacked figcaption { position: static; width: auto; }


/* ============================================================================
   Project pages — funding strip, anchor nav, partner blocks.
   Same token vocabulary as above; no new brand values.
   ========================================================================= */

/* ------------------------------------------------------- funding strip */
/* Sits directly under the site header, before the hero, on an explicit white
   background. No scroll animation and no consent gate, so the EU attribution
   is present for every visitor from the first paint.

   Size rule (Bijlage IX, 1.7): the EU emblem may not be smaller than the
   largest other logo on the page. Measured on height, flag only, ignoring the
   funding text under it and the file's own white margin.

     EU asset      360x291; the solid flag block is 232px = 79.7% of it.
                   At 230px wide that renders 186px tall, flag 148px.
                   At 190px wide (below 720px): 154px tall, flag 122px.
     OPZuid logo   777x126. At 260px wide: 42px tall. At 210px: 34px.
     FoodInsights  header mark, 38px tall (30px below 860px).

   So the flag clears the tallest other logo by roughly 3.5x at every
   breakpoint. Re-measure on the actual image if an asset is replaced. */
.fi-funding {
  background: #fff;
  border-bottom: var(--fi-border-width) solid var(--fi-border-subtle);
  padding-block: var(--fi-space-5);
}
.fi-funding__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fi-space-5) var(--fi-space-6);
}
.fi-funding__eu     { width: 230px; }
.fi-funding__opzuid { width: 260px; }
.fi-funding__eu, .fi-funding__opzuid {
  max-width: 100%; height: auto;
  object-fit: contain; /* never cover: that would crop the emblem */
}
.fi-funding__txt {
  margin: 0; flex: 1 1 18rem;
  font-size: var(--fi-text-sm); line-height: 1.6; color: var(--fi-text-muted);
}

@media (max-width: 720px) {
  .fi-funding__inner { gap: var(--fi-space-4); }
  .fi-funding__eu     { width: 190px; }
  .fi-funding__opzuid { width: 210px; }
}

/* ---------------------------------------------------------- anchor nav */
.fi-anchornav { border-bottom: var(--fi-border-width) solid var(--fi-border-subtle); background: #fff; }
.fi-anchornav ul {
  display: flex; gap: var(--fi-space-5); margin: 0; padding: 0; list-style: none;
  overflow-x: auto;
}
.fi-anchornav a {
  display: block; padding-block: var(--fi-space-4); white-space: nowrap;
  font: var(--fi-role-ui); color: var(--fi-text-body); text-decoration: none;
  border-bottom: var(--fi-rule-accent-width) solid transparent;
}
.fi-anchornav a:hover { color: var(--fi-text-strong); border-bottom-color: var(--fi-marker); }
@media (max-width: 720px) { .fi-anchornav { display: none; } }

/* Anchor targets clear the sticky header instead of hiding under it. */
section[id] { scroll-margin-top: var(--fi-space-8); }

/* ----------------------------------------------------- 4-step sequence */
.fi-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .fi-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .fi-steps--4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- partner grid */
/* auto-fit rather than a fixed four, because a project has as many partners as
   it has: three here, four on De Stamhouder. A fixed count leaves an empty
   column on the right when the numbers do not match. Empty tracks collapse,
   so the cards always fill the row. This also replaces the old breakpoints. */
.fi-partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  column-gap: var(--fi-space-5);
  row-gap: var(--fi-space-5);
}
.fi-partner {
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-radius: var(--fi-radius-md);
  padding: var(--fi-space-5);
  display: flex; flex-direction: column; gap: var(--fi-space-4);
}
/* Partner logos have not been supplied. The name is set as text rather than
   redrawn as a mark; see CONTENT_NOTES.md. */
.fi-partner__n {
  font: var(--fi-weight-semibold) var(--fi-text-md)/1.3 var(--fi-font-sans);
  color: var(--fi-text-strong);
  padding-bottom: var(--fi-space-3);
  border-bottom: var(--fi-rule-accent-width) solid var(--fi-c, var(--fi-marker));
}
.fi-partner p { margin: 0; font-size: var(--fi-text-sm); line-height: 1.6; color: var(--fi-text-body); }

/* A name that wraps to two lines would otherwise push its rule and its body
   text below those of its neighbours. Subgrid hands the card the row heights
   of the row it sits in, so the rules line up and the paragraphs start level.
   Without subgrid the flex column above still renders correctly, just
   unaligned — which is what every browser did before this rule. */
@supports (grid-template-rows: subgrid) {
  .fi-partner {
    display: grid; grid-row: span 2; grid-template-rows: subgrid;
  }
}

/* ------------------------------------------------------- fact list (meta) */
.fi-facts { display: grid; gap: var(--fi-space-3); margin: 0; }
.fi-facts > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: var(--fi-space-4);
  padding-bottom: var(--fi-space-3);
  border-bottom: var(--fi-border-width) solid var(--fi-border-subtle);
}
.fi-facts dt { font-size: var(--fi-text-sm); color: var(--fi-text-muted); }
.fi-facts dd { margin: 0; font-size: var(--fi-text-md); color: var(--fi-text-strong); }
@media (max-width: 560px) { .fi-facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------------------------------------------------------- contact */
.fi-contact {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(var(--fi-space-6), 5vw, var(--fi-space-8));
  align-items: start;
}
.fi-contact > * { min-width: 0; }
.fi-contact h2 { font: var(--fi-weight-bold) var(--fi-text-xl)/1.3 var(--fi-font-display); margin-bottom: var(--fi-space-5); }

.fi-field { display: grid; gap: var(--fi-space-2); margin-bottom: var(--fi-space-4); }
.fi-field label { font: var(--fi-role-ui); color: var(--fi-text-strong); }
.fi-field label span { color: var(--fi-green-700); }
.fi-field input, .fi-field textarea {
  font: var(--fi-role-body); color: var(--fi-text-body);
  background: var(--fi-surface-page);
  border: var(--fi-border-width) solid var(--fi-border-default);
  border-radius: var(--fi-radius-sm);
  padding: var(--fi-space-3) var(--fi-space-4);
  width: 100%;
}
.fi-field textarea { resize: vertical; min-height: 7rem; }
.fi-field input:focus-visible, .fi-field textarea:focus-visible {
  outline: 2px solid var(--fi-focus-ring); outline-offset: 1px;
  border-color: var(--fi-primary-400);
}
/* :user-invalid, not :invalid — an empty required field is invalid from the
   moment the page loads, which would paint every box red before anyone types. */
.fi-field input:user-invalid,
.fi-field textarea:user-invalid { border-color: var(--fi-danger); }
.fi-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fi-space-4); }
.fi-field-row > * { min-width: 0; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.fi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.fi-form__status { margin-top: var(--fi-space-4); font-size: var(--fi-text-sm); min-height: 1.2em; }
.fi-form__status.is-ok  { color: var(--fi-success); }
.fi-form__status.is-err { color: var(--fi-danger); }
.fi-form__note { margin-top: var(--fi-space-3); font-size: var(--fi-text-sm); color: var(--fi-text-muted); }

.fi-map { margin: var(--fi-space-6) 0 0; }
.fi-map img {
  width: 100%; height: auto; display: block;
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-radius: var(--fi-radius-lg);
}
.fi-map figcaption {
  margin-top: var(--fi-space-3);
  font-size: var(--fi-text-sm); color: var(--fi-text-muted);
}

@media (max-width: 860px) {
  .fi-contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fi-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ------------------------------------------------------ legal prose */
/* Long-form running text — privacy, cookies, terms. Narrower measure than a
   marketing section, and the base reset strips list markers, so they come back
   here. */
.fi-prose { max-width: 70ch; }
.fi-prose h2 {
  font: var(--fi-weight-bold) var(--fi-text-xl)/1.3 var(--fi-font-display);
  margin-top: var(--fi-space-7);
}
.fi-prose h2:first-of-type { margin-top: var(--fi-space-5); }
.fi-prose h3 {
  font: var(--fi-weight-semibold) var(--fi-text-md)/1.4 var(--fi-font-sans);
  color: var(--fi-text-strong);
  margin-top: var(--fi-space-5); margin-bottom: var(--fi-space-2);
}
.fi-prose p { margin-bottom: var(--fi-space-4); }
.fi-prose ul:not(.fi-facts) { list-style: disc; padding-left: 1.25rem; margin-bottom: var(--fi-space-4); }
.fi-prose ul:not(.fi-facts) li { margin-bottom: var(--fi-space-2); }
.fi-prose a { text-decoration: underline; }
.fi-prose code {
  background: var(--fi-surface-sunken); padding: 1px 5px;
  border-radius: var(--fi-radius-xs); font-size: var(--fi-text-sm);
}
.fi-prose .fi-facts { margin-block: var(--fi-space-5); }
.fi-meta {
  font-size: var(--fi-text-sm); color: var(--fi-text-muted);
  margin-bottom: var(--fi-space-6);
}

/* ------------------------------------------------------- contrast fix */
/* .fi-cta paints a dark teal panel and sets a light inherited colour, but
   .fi-lede hard-sets --fi-text-body, so the lead paragraph rendered dark grey
   on dark teal in every CTA on the site. Same shape as the existing
   `.fi-section--inverse .fi-lede` rule, which already handles the other dark
   surface. */
.fi-cta .fi-lede { color: rgba(255,255,255,.8); }

/* ------------------------------------------------------------- print */
/* Both project build briefs ask for a print style that keeps the content and
   the funding component readable without the navigation chrome. */
@media print {
  .fi-nav, .fi-anchornav, .fi-skip, .fi-phbtn, .fi-footer__grid { display: none !important; }
  .fi-funding { border-bottom: 1px solid #000; break-inside: avoid; }
  body { background: #fff; color: #000; }
  .fi-phero, .fi-section--inverse, .fi-cta, .fi-pagehead {
    background: #fff !important; background-image: none !important; color: #000 !important;
  }
  .fi-phero h1, .fi-section--inverse h2, .fi-section--inverse h3,
  .fi-cta h2, .fi-pagehead h1 { color: #000 !important; }
  .fi-phero__lede, .fi-section--inverse .fi-lede, .fi-cta .fi-lede { color: #000 !important; }
  .fi-photoband figcaption { position: static; width: auto; background: #fff; color: #000; }
  .fi-btn { display: none; }
  .fi-section { padding-block: var(--fi-space-5); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* ------------------------------------------------------ footer contact */
.fi-footer__contact {
  margin-top: var(--fi-space-4);
  font-style: normal;
  font-size: var(--fi-text-sm); line-height: 1.8; color: var(--fi-text-muted);
}
.fi-footer__contact a { font-size: inherit; }


/* ============================================================================
   Over ons — vier toepassingen, datakwaliteitsvragen, twee werkvormen.
   Same token vocabulary as above; no new brand values.
   ========================================================================= */

/* ------------------------------------------------- vier toepassingen (2x2) */
.fi-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fi-space-5); }
.fi-app {
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-radius: var(--fi-radius-lg);
  padding: var(--fi-space-5);
  display: flex; flex-direction: column; gap: var(--fi-space-4);
}
.fi-app__k {
  font: var(--fi-weight-semibold) var(--fi-text-xs)/1.2 var(--fi-font-mono);
  letter-spacing: var(--fi-tracking-wide); text-transform: uppercase;
  color: var(--fi-c-ink, var(--fi-green-700));
}
/* All four headings share one size and weight — none of the four applications
   outranks the others. */
.fi-app h3 {
  margin: 0;
  font: var(--fi-weight-semibold) var(--fi-text-xl)/var(--fi-leading-snug) var(--fi-font-display);
  color: var(--fi-text-strong);
}
.fi-app p { margin: 0; }
.fi-app__q {
  margin-top: auto; padding-left: var(--fi-space-4);
  border-left: var(--fi-rule-accent-width) solid var(--fi-c, var(--fi-marker));
  font-size: var(--fi-text-sm); line-height: 1.6; color: var(--fi-text-muted);
}
.fi-app__q b { display: block; color: var(--fi-text-strong); font-weight: var(--fi-weight-semibold); }
@media (max-width: 860px) { .fi-apps { grid-template-columns: 1fr; } }

/* ---------------------------------------------- vijf datakwaliteitsvragen */
.fi-checks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fi-space-5); margin: 0; }
.fi-checks > div { border-top: var(--fi-rule-accent-width) solid var(--fi-marker); padding-top: var(--fi-space-4); }
.fi-checks dt {
  font: var(--fi-weight-semibold) var(--fi-text-md)/1.3 var(--fi-font-sans);
  color: var(--fi-text-strong); margin-bottom: var(--fi-space-2);
}
.fi-checks dd { margin: 0; font-size: var(--fi-text-sm); line-height: 1.6; color: var(--fi-text-body); }
@media (max-width: 900px) { .fi-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fi-checks { grid-template-columns: 1fr; } }

/* ------------------------------------------------- compact / centred band */
/* A short closing band — a heading and three short steps — does not need a
   full screen. --compact keeps its natural height; --centred centres the
   heading and the row beneath it. */
.fi-section--compact { padding-block: clamp(var(--fi-space-7), 5vw, var(--fi-space-8)); }
.fi-section--centred { text-align: center; }
.fi-section--centred .fi-section-head {
  margin-inline: auto;
  margin-bottom: var(--fi-space-6);
  max-width: 48ch;
}
.fi-section--centred .fi-lede { margin-inline: auto; }
/* .fi-steps is a 5-column grid for the home page's five steps; with three
   items they would sit in the left three-fifths. Match the column count. */
.fi-section--centred .fi-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 56rem;
  margin-inline: auto;
}
/* the step counter and its rule are left-anchored by default */
.fi-section--centred .fi-step { padding-top: var(--fi-space-7); }
.fi-section--centred .fi-step::before { left: 0; right: 0; text-align: center; }
.fi-section--centred .fi-step::after { top: 26px; }

/* ------------------------------------------------------- data quality */
/* Was: a full-width heading, then five cramped columns, then a two-column
   block whose right half was an empty <div>. Now the text runs down one
   column and the five checks down the other, so both halves carry weight
   and each check gets a full line instead of a 180px column. */
.fi-dq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--fi-space-6), 5vw, var(--fi-space-8));
  align-items: start;
}
.fi-dq > * { min-width: 0; }
.fi-dq__text h3 {
  margin-top: var(--fi-space-6);
  font: var(--fi-weight-semibold) var(--fi-text-md)/1.35 var(--fi-font-sans);
}
.fi-dq .fi-lede { max-width: none; }
.fi-checks--stacked { grid-template-columns: 1fr; gap: var(--fi-space-4); }
@media (max-width: 900px) {
  .fi-dq { grid-template-columns: 1fr; }
  .fi-checks--stacked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .fi-checks--stacked { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ twee manieren van werken */
.fi-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fi-space-5); }
.fi-way {
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-top: var(--fi-rule-accent-width) solid var(--fi-c, var(--fi-marker));
  padding: var(--fi-space-5);
}
.fi-way h3 { margin-top: 0; }
.fi-way p:last-child { margin-bottom: 0; }
.fi-ways__tie {
  grid-column: 1 / -1; margin: 0;
  font: var(--fi-weight-light) clamp(19px, 2vw, var(--fi-text-xl))/1.5 var(--fi-font-display);
  color: var(--fi-text-strong);
}
@media (max-width: 860px) { .fi-ways { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ projectvoorbeelden */
.fi-projcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fi-space-5); }
.fi-projcard {
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-radius: var(--fi-radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.fi-projcard img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fi-projcard__body { padding: var(--fi-space-5); display: flex; flex-direction: column; gap: var(--fi-space-4); flex: 1; }
.fi-projcard h3 { margin: 0; }
.fi-projcard p { margin: 0; font-size: var(--fi-text-sm); line-height: 1.6; }
.fi-projcard__go { margin-top: auto; font: var(--fi-role-ui); }
/* A project without a page keeps its description but says so instead of
   linking nowhere. */
.fi-projcard__soon { margin-top: auto; font-size: var(--fi-text-sm); color: var(--fi-text-muted); }
@media (max-width: 720px) { .fi-projcards { grid-template-columns: 1fr; } }

/* Four short questions read better as a wider row than as 2x2 blocks. */
.fi-apps--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fi-space-5); }
.fi-apps--compact .fi-app { border-radius: var(--fi-radius-md); }
@media (max-width: 1000px) { .fi-apps--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .fi-apps--compact { grid-template-columns: 1fr; } }


/* ============================================================================
   Digital Vital Poultry Chain — three pillars and the conceptual chain view.
   Same token vocabulary as above; no new brand values.
   ========================================================================= */

/* Three equal pillars. Same block as the four applications on About, so the
   two pages stay one family. */
.fi-apps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .fi-apps--3 { grid-template-columns: 1fr; } }

/* ------------------------------------------------- conceptual chain view */
/* A chain, not a process: each link is a separate business that holds its own
   records. The arrow between them is where the data has to survive. */
.fi-flow {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fi-space-5); margin: 0; padding: 0; list-style: none;
  counter-reset: link;
}
.fi-flow li {
  position: relative;
  background: var(--fi-surface-card);
  border: var(--fi-border-width) solid var(--fi-border-subtle);
  border-top: var(--fi-rule-accent-width) solid var(--fi-c, var(--fi-marker));
  border-radius: var(--fi-radius-md);
  padding: var(--fi-space-5);
}
.fi-flow__n {
  display: block; margin-bottom: var(--fi-space-2);
  font: var(--fi-weight-semibold) var(--fi-text-xs)/1 var(--fi-font-mono);
  letter-spacing: var(--fi-tracking-wide); color: var(--fi-green-700);
}
.fi-flow__t {
  display: block;
  font: var(--fi-weight-semibold) var(--fi-text-md)/1.3 var(--fi-font-sans);
  color: var(--fi-text-strong);
}
.fi-flow__d { display: block; margin-top: 4px; font-size: var(--fi-text-sm); line-height: 1.5; color: var(--fi-text-muted); }
/* The handover marker sits in the gutter between two links. */
.fi-flow li + li::before {
  content: ""; position: absolute; top: 50%; left: calc(var(--fi-space-5) * -1);
  width: var(--fi-space-5); height: 1px; background: var(--fi-border-strong);
}
@media (max-width: 900px) {
  .fi-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-flow li + li::before { display: none; }
}
@media (max-width: 520px) { .fi-flow { grid-template-columns: 1fr; } }

.fi-flow__cap {
  margin: var(--fi-space-4) 0 0;
  font-size: var(--fi-text-xs); color: var(--fi-text-muted); line-height: 1.5;
}

/* .fi-stack is a plain grid, so on a <ul> the list markers disappear. These
   two lists need visible bullets; the <div> uses elsewhere are unaffected. */
ul.fi-stack { margin: 0; padding: 0; list-style: none; }
ul.fi-stack > li {
  position: relative; padding-left: var(--fi-space-5);
  font-size: var(--fi-text-md); line-height: 1.65; color: var(--fi-text-body);
}
ul.fi-stack > li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 5px; height: 5px; background: var(--fi-marker);
}

/* ------------------------------------------- alignment across the pillars */
/* 'Marketplace for CO₂ and NH₃ credits' wraps to two lines where 'DataLab'
   and 'EduLab' do not, so the body text and the link below it sat lower than
   in the neighbouring cards. This row is always a single row of three, so its
   row-gap is free to serve as the spacing inside the cards, and subgrid can
   hand each card the four row heights of the row it sits in: label, heading,
   body, link. Without subgrid the flex column still renders, just unaligned. */
@supports (grid-template-rows: subgrid) {
  .fi-apps--3 .fi-app {
    display: grid; grid-row: span 4; grid-template-rows: subgrid;
    row-gap: var(--fi-space-4);
  }
}

/* Four outcomes in a three-column grid leave one on a row of its own. This
   page has exactly four; the shared .fi-outcomes stays as it is for the pages
   that have three or five. */
.fi-outcomes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .fi-outcomes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .fi-outcomes--4 { grid-template-columns: 1fr; } }

/* 'An approach to emission reductions' wraps where its neighbours do not, so
   the paragraphs underneath started at four different heights. Same subgrid
   treatment as the pillars: heading row and body row, shared across the four.
   The h3's own bottom margin is dropped in favour of the grid row-gap, or it
   would be counted twice. */
@supports (grid-template-rows: subgrid) {
  .fi-outcomes--4 .fi-outcome {
    display: grid; grid-row: span 2; grid-template-rows: subgrid;
    row-gap: var(--fi-space-2);
  }
  .fi-outcomes--4 .fi-outcome h3 { margin-bottom: 0; }
  .fi-outcomes--4 .fi-outcome p { margin-bottom: 0; }
}


/* ============================================================================
   Standalone diagrams.
   A chart inside a .fi-panel is bounded by its column. One that sits loose in
   a section would otherwise stretch to the full 1200px container, scaling the
   SVG's own type up with it until the labels outweigh the body text. These
   caps set the scale factor: viewBox width x scale = max-width.
   ========================================================================= */
.fi-chart--diagram { max-width: 720px; margin-inline: 0; }  /* 490 wide -> ~1.47x */
.fi-chart--wide    { max-width: 940px; margin-inline: auto; }  /* 600 wide -> ~1.57x */