/* ═══════════════════════════════════════════════════════════════════════════
   FARMLAND INDIA — WIKI MASTER STYLESHEET
   Version: v8.0 · October 2026 · Supersedes v7.1 and all earlier versions.

   DEPLOYMENT (Rajneesh):
   1. Load ONCE, globally, on wiki routes:
        <link rel="stylesheet" href="/assets/css/farmland-wiki-master-v8.css?v=8.0">
      If your CDN/CMS caches by filename rather than the ?v= query string,
      the new filename (v8) already busts the cache.
   2. Paste wiki HTML anywhere inside the page layout. The stylesheet
      neutralizes every ancestor wrapper automatically (unchanged from v7).
   3. Header height is baked in as a default (51px). If the nav height ever
      changes, update ONE token:  .fi-wiki { --fi-header-offset: 51px; }

   WHAT v8 CHANGES OVER v7.1 — "QUIET BODY" REDESIGN
   Every fi- class name from v7.1 is kept, so no article HTML needs editing.
   • Removed the "liquid glass" blurred colour blobs behind the content and
     every backdrop-filter / glass panel. The body is now a flat, calm page.
   • Body colour budget cut to ONE accent. Green (--fi-green) is the only
     colour used on light surfaces: links, section labels, active markers.
     Amber/yellow now appears ONLY on dark surfaces (hero, stat strip, dark
     promo/CTA band) and on the yellow CTA button — never on body text.
   • Navy removed entirely. Sidebar and reference-card headers are now white
     with a hairline border instead of a solid blue block.
   • Callouts (note/tip/warn) are a neutral tint with a coloured left rule —
     no tinted backgrounds, no glows.
   • Shadows reduced to a single hairline + 1px lift. No coloured shadows.
   • Reading measure: article body text is capped at ~72ch (760px) so long
     lines don't tire the eye; body size 17.5px / 1.75 line-height.
   • Headings: tighter, darker; h2 gets a thin rule above it for rhythm.
   • Table highlights, quick-conversion numbers, FAQ markers: ink or muted
     grey instead of amber.
   • Button glows removed. Primary = dark green, CTA = brand yellow, ghost =
     outline. Hover is a shade shift, not a glow.

   AUTHORING CONTRACT (Claude / content team) — unchanged:
   • Content body only: <div class="fi-wiki">…</div>. No <html>/<head>/<body>,
     no <style>, no inline style="", no platform nav/footer.
   • Only fi- classes from THIS file. No invented classes.
   • Breadcrumb INSIDE .fi-hero as first child.
   • Every wide table wrapped in .fi-tscroll.
   • All horizontal padding via .fi-wrap — sections never set their own.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inter is loaded site-wide by the main app; the wiki references the same
   font-family name rather than importing its own copy. */

/* ───────────────────────────────────────────────────────────────────────────
   §1  GLOBAL GUARDS + DOM-AGNOSTIC CONTAINER NEUTRALIZER (unchanged)
   ─────────────────────────────────────────────────────────────────────────── */
body:has(.fi-wiki) {
  overflow-x: clip;
  background: #FBFBF9 !important;   /* matches --fi-cream */
}

:where(:not(html, body)):has(> .fi-wiki) {
  background:    transparent !important;
  border:        none        !important;
  border-radius: 0           !important;
  box-shadow:    none        !important;
  padding:       0           !important;
  margin:        0           !important;
  overflow:      visible     !important;
}
body:has(.fi-wiki) main {
  padding: 0 !important;
  margin: 0 !important;
}
body:has(.fi-wiki) main > * {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   §2  TOKENS — scoped to .fi-wiki
   ─────────────────────────────────────────────────────────────────────────── */
.fi-wiki {
  /* brand (dark surfaces + CTA only) */
  --fi-dark:         #0E2408;
  --fi-dark-2:       #081603;
  --fi-green:        #2D6B4A;
  --fi-green-deep:   #245A3C;
  --fi-amber:        #D4A017;   /* dark surfaces only */
  --fi-cta-yellow:   #FFE85C;
  --fi-cta-yellow-2: #F5DC3E;

  /* neutrals (the body lives here) */
  --fi-white:   #FFFFFF;
  --fi-cream:   #FBFBF9;
  --fi-field:   #F4F5F2;
  --fi-border:  #E6E8E3;
  --fi-rule:    #D9DCD6;
  --fi-ink:     #1C1F1D;
  --fi-text:    #2E332F;
  --fi-muted:   #6B746E;
  --fi-faint:   #9AA19C;

  /* body-accent tints (green only) */
  --fi-green-tint:   rgba(45,107,74,.07);
  --fi-green-line:   rgba(45,107,74,.30);

  /* type */
  --fi-display: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fi-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fi-mono:    'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* layout */
  --fi-max:            1200px;
  --fi-measure:        760px;
  --fi-pad-x:          clamp(16px, 4.5vw, 32px);
  --fi-header-offset:  51px;
  --fi-radius:         10px;
  --fi-radius-sm:      6px;
  --fi-shadow:         0 1px 2px rgba(14,36,8,.04);
  --fi-shadow-lg:      0 4px 14px rgba(14,36,8,.06);

  /* base */
  font-family: var(--fi-body);
  color: var(--fi-text);
  background: var(--fi-cream);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: clip;
}
.fi-wiki *, .fi-wiki *::before, .fi-wiki *::after { box-sizing: border-box; }
.fi-wiki img, .fi-wiki svg, .fi-wiki video { max-width: 100%; height: auto; }
.fi-wiki a { color: var(--fi-green); text-decoration: none; }
.fi-wiki a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fi-wiki :focus-visible { outline: 2px solid var(--fi-green); outline-offset: 2px; }
.fi-wiki ::selection { background: rgba(45,107,74,.16); }

/* ───────────────────────────────────────────────────────────────────────────
   §3  LAYOUT PRIMITIVES
   ─────────────────────────────────────────────────────────────────────────── */
.fi-wrap {
  max-width: var(--fi-max);
  margin-inline: auto;
  padding-inline: var(--fi-pad-x);
}
.fi-hublayout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 288px;
  gap: 40px;
  padding-block: 48px 80px;
}
.fi-artlayout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 56px;
  padding-block: 48px 80px;
}
.fi-rail { display: flex; flex-direction: column; gap: 20px; align-self: start; min-width: 0; }
.fi-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.fi-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.fi-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }

/* ───────────────────────────────────────────────────────────────────────────
   §4  HERO — dark green, full-width, breadcrumb INSIDE
   ─────────────────────────────────────────────────────────────────────────── */
.fi-hero {
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(45,107,74,.45), transparent 60%),
    linear-gradient(170deg, var(--fi-dark) 0%, var(--fi-dark-2) 100%);
  color: var(--fi-white);
  padding-top: calc(var(--fi-header-offset) + 32px);
  padding-bottom: 56px;
}

.fi-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 32px;
  min-width: 0;
}
.fi-crumb a { color: rgba(255,255,255,.62); }
.fi-crumb a:hover { color: var(--fi-white); text-decoration: none; }
.fi-crumb-sep { color: rgba(255,255,255,.25); }
.fi-crumb-here {
  color: rgba(255,255,255,.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

.fi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(212,160,23,.4);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fi-amber);
  background: rgba(212,160,23,.08);
  margin-bottom: 24px;
}
.fi-eyebrow-dot { opacity: .5; }

.fi-hero-h1 {
  font-family: var(--fi-display);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 20px;
  max-width: 860px;
}
.fi-hero-h1 em { font-style: italic; font-weight: 500; color: #E8D5A8; }
.fi-hero-sub {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
  color: rgba(255,255,255,.82);
  line-height: 1.7;
  max-width: 700px;
  margin: 0 0 28px;
}
.fi-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 12px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.6);
}
.fi-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.fi-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ───────────────────────────────────────────────────────────────────────────
   §5  STAT STRIP
   ─────────────────────────────────────────────────────────────────────────── */
.fi-statbar {
  background: var(--fi-dark-2);
  border-top: 1px solid rgba(255,255,255,.07);
  color: var(--fi-white);
}
.fi-statbar .fi-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.fi-stat {
  padding: 20px 18px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.07);
}
.fi-stat:last-child { border-right: none; }
.fi-stat-k {
  font-family: var(--fi-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fi-amber);
  margin-bottom: 4px;
}
.fi-stat-v {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* white stat chips (light surfaces → neutral) */
.fi-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--fi-white);
  border: 1px solid var(--fi-rule);
  border-radius: var(--fi-radius-sm);
  padding: 10px 16px;
}
.fi-chip-num { font-size: 18px; font-weight: 600; color: var(--fi-ink); letter-spacing: -.01em; }
.fi-chip-lbl { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fi-muted); }

/* ───────────────────────────────────────────────────────────────────────────
   §6  SIDEBAR GUIDE NAV
   ─────────────────────────────────────────────────────────────────────────── */
.fi-sidenav {
  background: var(--fi-white);
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius);
  overflow: hidden;
  box-shadow: var(--fi-shadow);
  align-self: start;
  position: sticky;
  top: calc(var(--fi-header-offset) + 20px);
}
.fi-sidenav-head {
  background: var(--fi-white);
  color: var(--fi-ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 18px;
  border-bottom: 1px solid var(--fi-border);
  display: flex;
  align-items: center;
  gap: 9px;
}
.fi-sidenav-group {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fi-faint);
  padding: 16px 18px 6px;
}
.fi-sidenav a.fi-sidenav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--fi-text);
  border-left: 2px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.fi-sidenav a.fi-sidenav-link:hover {
  background: var(--fi-field);
  color: var(--fi-ink);
  text-decoration: none;
}
.fi-sidenav a.fi-sidenav-link.fi-active {
  background: var(--fi-green-tint);
  border-left-color: var(--fi-green);
  color: var(--fi-ink);
  font-weight: 600;
}
.fi-hot { font-size: 12px; opacity: .7; }

/* ───────────────────────────────────────────────────────────────────────────
   §7  CARDS
   ─────────────────────────────────────────────────────────────────────────── */
.fi-card {
  background: var(--fi-white);
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius);
  padding: 24px;
  box-shadow: var(--fi-shadow);
}
.fi-card-h {
  font-family: var(--fi-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fi-ink);
  margin: 0 0 6px;
}
.fi-card-sub { font-size: 13.5px; color: var(--fi-muted); margin: 0 0 16px; }

/* article/link card */
.fi-acard {
  background: var(--fi-white);
  border: 1px solid var(--fi-border);
  box-shadow: var(--fi-shadow);
  border-radius: var(--fi-radius);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s, box-shadow .15s;
}
.fi-acard:hover {
  border-color: var(--fi-green-line);
  box-shadow: var(--fi-shadow-lg);
  text-decoration: none;
}
.fi-acard-kicker {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fi-muted);
}
.fi-acard-title { font-size: 15.5px; font-weight: 600; color: var(--fi-ink); line-height: 1.4; }
.fi-acard:hover .fi-acard-title { color: var(--fi-green); }
.fi-acard-desc { font-size: 13.5px; color: var(--fi-muted); line-height: 1.55; }

/* reference card (header now light) */
.fi-refcard {
  background: var(--fi-white);
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius);
  overflow: hidden;
  box-shadow: var(--fi-shadow);
}
.fi-refcard-head {
  background: var(--fi-white);
  color: var(--fi-ink);
  padding: 20px 24px;
  border-bottom: 1px solid var(--fi-border);
}
.fi-refcard-title {
  font-family: var(--fi-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 4px;
}
.fi-refcard-sub {
  font-size: 12px;
  color: var(--fi-muted);
}

/* dark promo card — the one dark accent allowed in the body rail */
.fi-promo {
  background: var(--fi-dark);
  border-radius: var(--fi-radius);
  color: var(--fi-white);
  padding: 26px 24px;
}
.fi-promo-kicker {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fi-amber);
  margin-bottom: 10px;
}
.fi-promo-title {
  font-family: var(--fi-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.fi-promo-desc { font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.6; margin: 0 0 18px; }

/* quick-conversion list */
.fi-quickconv {
  background: var(--fi-white);
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius);
  padding: 20px 22px;
  box-shadow: var(--fi-shadow);
}
.fi-quickconv-h {
  font-family: var(--fi-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--fi-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.fi-qc-row { padding: 10px 0; border-bottom: 1px solid var(--fi-border); }
.fi-qc-row:last-child { border-bottom: none; }
.fi-qc-eq { font-size: 14px; color: var(--fi-text); font-variant-numeric: tabular-nums; }
.fi-qc-eq strong { color: var(--fi-ink); font-weight: 600; }
.fi-qc-note { font-size: 12px; color: var(--fi-muted); margin-top: 3px; }

/* ───────────────────────────────────────────────────────────────────────────
   §8  TABLES — always inside .fi-tscroll
   ─────────────────────────────────────────────────────────────────────────── */
.fi-tscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin: 24px 0;
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius-sm);
  background: var(--fi-white);
}
.fi-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.fi-table thead th {
  background: var(--fi-field);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fi-muted);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fi-border);
  white-space: nowrap;
}
.fi-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--fi-border);
  vertical-align: top;
  color: var(--fi-text);
}
.fi-table tbody tr:last-child td { border-bottom: none; }
.fi-table tbody tr:hover { background: var(--fi-cream); }
.fi-td-name { font-size: 15px; font-weight: 600; color: var(--fi-ink); }
.fi-td-num  { font-size: 14px; color: var(--fi-ink); white-space: nowrap; }
.fi-td-note { font-size: 13px; color: var(--fi-muted); }
.fi-td-hl   { font-size: 13px; font-weight: 600; color: var(--fi-green); }

/* compact key-value table */
.fi-kv { width: 100%; border-collapse: collapse; font-size: 14px; }
.fi-kv td { padding: 10px 0; border-bottom: 1px solid var(--fi-border); color: var(--fi-text); }
.fi-kv td:first-child { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fi-muted); width: 42%; }
.fi-kv tr:last-child td { border-bottom: none; }

/* ───────────────────────────────────────────────────────────────────────────
   §9  ARTICLE BODY TYPOGRAPHY — the reading column
   ─────────────────────────────────────────────────────────────────────────── */
.fi-body { min-width: 0; max-width: var(--fi-measure); }
.fi-body h2 {
  font-family: var(--fi-display);
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--fi-ink);
  line-height: 1.2;
  margin: 56px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--fi-rule);
}
.fi-body h2:first-child,
.fi-body .fi-label + h2,
.fi-body .fi-lead + h2 { margin-top: 0; padding-top: 0; border-top: none; }
.fi-body h3 {
  font-family: var(--fi-display);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fi-ink);
  margin: 36px 0 10px;
}
.fi-body h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fi-ink);
  margin: 28px 0 8px;
}
.fi-body p  { margin: 0 0 18px; color: var(--fi-text); font-size: 17.5px; line-height: 1.75; }
.fi-body ul, .fi-body ol { margin: 0 0 20px; padding-left: 24px; font-size: 17px; line-height: 1.7; }
.fi-body li { margin-bottom: 8px; }
.fi-body li::marker { color: var(--fi-muted); }
.fi-body strong { font-weight: 600; color: var(--fi-ink); }
.fi-body a { text-decoration: underline; text-decoration-color: var(--fi-green-line); text-underline-offset: 3px; }
.fi-body a:hover { text-decoration-color: var(--fi-green); }
.fi-lead { font-size: 19px; font-weight: 400; color: var(--fi-text); line-height: 1.7; }

/* section label */
.fi-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fi-green);
  margin: 0 0 14px;
}
.fi-label::after { content: ''; flex: 0 0 32px; height: 1px; background: var(--fi-rule); }

.fi-hr { border: none; border-top: 1px solid var(--fi-rule); margin: 40px 0; }

.fi-quote {
  border-left: 2px solid var(--fi-green);
  padding: 4px 0 4px 22px;
  margin: 28px 0;
  font-family: var(--fi-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  font-style: italic;
  color: var(--fi-ink);
}

/* ───────────────────────────────────────────────────────────────────────────
   §10  CALLOUTS — neutral surface, coloured left rule only
   ─────────────────────────────────────────────────────────────────────────── */
.fi-note, .fi-tip, .fi-warn {
  display: flex;
  gap: 14px;
  background: var(--fi-field);
  border: 1px solid var(--fi-border);
  border-left-width: 3px;
  border-radius: var(--fi-radius-sm);
  padding: 16px 18px;
  margin: 24px 0;
  font-size: 15px;
  line-height: 1.6;
}
.fi-note { border-left-color: var(--fi-green); }
.fi-tip  { border-left-color: var(--fi-amber); }
.fi-warn { border-left-color: #B45309; }
.fi-callout-ic { flex: 0 0 auto; font-size: 16px; line-height: 1.5; opacity: .85; }
.fi-callout-b h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--fi-ink); }
.fi-callout-b p  { margin: 0; color: var(--fi-text); font-size: 15px; }

/* ───────────────────────────────────────────────────────────────────────────
   §11  BUTTONS — no glows
   ─────────────────────────────────────────────────────────────────────────── */
.fi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--fi-radius-sm);
  padding: 12px 22px;
  font-family: var(--fi-body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none !important;
}
.fi-btn:active { transform: translateY(1px); }

.fi-btn-primary { background: var(--fi-dark); color: var(--fi-white); }
.fi-btn-primary:hover { background: #1A3A14; }

.fi-btn-green { background: var(--fi-green); color: var(--fi-white); }
.fi-btn-green:hover { background: var(--fi-green-deep); }

.fi-btn-amber { background: var(--fi-cta-yellow); color: var(--fi-dark); }
.fi-btn-amber:hover { background: var(--fi-cta-yellow-2); }

.fi-btn-amber-outline { background: transparent; color: var(--fi-ink); border-color: var(--fi-rule); }
.fi-btn-amber-outline:hover { border-color: var(--fi-ink); }

.fi-btn-ghost { background: var(--fi-white); color: var(--fi-green); border-color: var(--fi-green-line); }
.fi-btn-ghost:hover { border-color: var(--fi-green); background: var(--fi-green-tint); }

.fi-btn-onDark {
  background: rgba(255,255,255,.06);
  color: var(--fi-white);
  border-color: rgba(255,255,255,.28);
}
.fi-btn-onDark:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

.fi-btn-block { width: 100%; }

/* ───────────────────────────────────────────────────────────────────────────
   §12  PILLS & BADGES
   ─────────────────────────────────────────────────────────────────────────── */
.fi-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.fi-pill {
  display: inline-block;
  background: var(--fi-white);
  border: 1px solid var(--fi-rule);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fi-text);
  transition: border-color .15s, color .15s;
}
a.fi-pill:hover { border-color: var(--fi-green); color: var(--fi-green); text-decoration: none; }

.fi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fi-green-tint);
  color: var(--fi-green);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
}
.fi-badge-amber { background: var(--fi-field); color: var(--fi-text); }
.fi-badge-dark  { background: var(--fi-dark); color: var(--fi-white); }

/* ───────────────────────────────────────────────────────────────────────────
   §13  FAQ & TOC
   ─────────────────────────────────────────────────────────────────────────── */
.fi-faq details {
  background: var(--fi-white);
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.fi-faq summary {
  padding: 16px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--fi-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.fi-faq summary::-webkit-details-marker { display: none; }
.fi-faq summary::after { content: '+'; font-size: 18px; font-weight: 400; color: var(--fi-muted); }
.fi-faq details[open] summary::after { content: '–'; }
.fi-faq details[open] summary { border-bottom: 1px solid var(--fi-border); }
.fi-faq-a { padding: 16px 20px; font-size: 15px; line-height: 1.7; color: var(--fi-text); }

.fi-toc {
  background: transparent;
  border: none;
  padding: 4px 0 0;
  align-self: start;
  position: sticky;
  top: calc(var(--fi-header-offset) + 24px);
}
.fi-toc-h { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fi-faint); margin: 0 0 12px; }
.fi-toc a {
  display: block;
  padding: 6px 0 6px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fi-muted);
  border-left: 1px solid var(--fi-rule);
  transition: color .15s, border-color .15s;
}
.fi-toc a:hover { color: var(--fi-ink); text-decoration: none; }
.fi-toc a.fi-active { border-left: 2px solid var(--fi-green); margin-left: -.5px; color: var(--fi-ink); font-weight: 600; }

/* ───────────────────────────────────────────────────────────────────────────
   §14  BOTTOM CTA BANNER & RELATED
   ─────────────────────────────────────────────────────────────────────────── */
.fi-ctaband {
  background: var(--fi-dark);
  border-radius: var(--fi-radius);
  color: var(--fi-white);
  padding: clamp(28px, 5vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 64px 0 0;
}
.fi-ctaband-title { font-family: var(--fi-display); font-size: clamp(22px, 2.8vw, 28px); font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; }
.fi-ctaband-sub,
.fi-body .fi-ctaband-sub { font-size: 14.5px; color: rgba(255,255,255,.72); margin: 0; max-width: 520px; line-height: 1.6; }
/* dark surfaces placed inside .fi-body must not inherit body paragraph colour */
.fi-body .fi-promo-desc  { color: rgba(255,255,255,.72); font-size: 13.5px; }
.fi-body .fi-ctaband p, .fi-body .fi-promo p { color: inherit; }

.fi-related { margin-top: 56px; }

/* ───────────────────────────────────────────────────────────────────────────
   §15  RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .fi-hublayout { grid-template-columns: 232px minmax(0,1fr); gap: 32px; }
  .fi-hublayout > .fi-rail { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .fi-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fi-artlayout { gap: 40px; }
}
@media (max-width: 860px) {
  .fi-hublayout, .fi-artlayout { grid-template-columns: 1fr; padding-block: 32px 56px; gap: 28px; }
  .fi-sidenav, .fi-toc { position: static; }
  .fi-toc { padding: 16px 18px; background: var(--fi-white); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-sm); }
  .fi-body { max-width: none; }
  .fi-hublayout > .fi-rail { grid-template-columns: 1fr; }
  .fi-grid-3, .fi-grid-2 { grid-template-columns: 1fr; }
  .fi-hero { padding-bottom: 40px; }
  .fi-crumb { font-size: 10.5px; margin-bottom: 22px; }
  .fi-crumb-here { max-width: 100%; }
  .fi-stat { padding: 16px 12px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .fi-statbar .fi-wrap { grid-template-columns: 1fr 1fr; padding-inline: 0; }
  .fi-ctaband { flex-direction: column; align-items: flex-start; }
  .fi-btn { padding: 12px 20px; }
  .fi-body p { font-size: 17px; }
  .fi-body h2 { margin-top: 44px; padding-top: 20px; }
}
@media (max-width: 480px) {
  .fi-wiki { font-size: 15px; }
  .fi-grid-4 { grid-template-columns: 1fr; }
  .fi-statbar .fi-wrap { grid-template-columns: 1fr; }
  .fi-eyebrow { font-size: 10px; padding: 6px 12px; }
  .fi-card, .fi-acard { padding: 18px; }
  .fi-body p { font-size: 16.5px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   §16  MOTION & ACCESSIBILITY
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fi-wiki *, .fi-wiki *::before, .fi-wiki *::after {
    transition: none !important;
    animation: none !important;
  }
}