/* Finploy Insights - one stylesheet for every public page under /insights/.
   Brand system taken from the live finploy.com landing page (23 Oct 2026):
   - Navy  #071C3A (headings, text), header navy #0a1c32
   - Gold  #C9A227 (buttons, accents), hover #b59020, bright logo gold #F3C623, ice blue #A1C2F1 on navy
   - Headings: Cormorant Garamond 600 (same as "Showing All Bank, Finance And Insurance Jobs")
   - Body and UI text: Poppins
   Everything is scoped under .fi so the site's header and footer are never changed. */
.fi {
  --fi-navy: #071C3A;
  --fi-navy-deep: #0a1c32;
  --fi-gold: #C9A227;
  --fi-gold-dark: #b59020;
  --fi-gold-text: #8C6D10;
  --fi-gold-bright: #F3C623;
  --fi-ice: #A1C2F1;
  --fi-text: #1F2937;
  --fi-muted: #5B6676;
  --fi-line: #E4E8EF;
  --fi-soft: #F7F8FB;
  --fi-radius: 14px;
  --fi-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fi-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--fi-sans);
  color: var(--fi-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 56px;
}
.fi *, .fi *::before, .fi *::after { box-sizing: border-box; }
.fi a { color: var(--fi-navy); text-decoration: none; }
.fi a:hover { color: var(--fi-gold-dark); }
.fi-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.fi-narrow { max-width: 820px; }

/* Type scale (desktop / mobile below) */
.fi-eyebrow { display: inline-block; font-family: var(--fi-sans); font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fi-gold-text); margin-bottom: 8px; }
.fi-h1 { font-family: var(--fi-serif); font-weight: 600; font-size: 46px; line-height: 1.12; color: var(--fi-navy); margin: 0 0 16px; }
.fi-h2 { font-family: var(--fi-serif); font-weight: 600; font-size: 32px; line-height: 1.2; color: var(--fi-navy); margin: 0; }
.fi-h3 { font-family: var(--fi-sans); font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--fi-navy); margin: 0 0 8px; }
.fi-lead { font-size: 18px; line-height: 1.7; color: var(--fi-muted); margin: 0 0 22px; }
.fi-meta { font-size: 13px; color: var(--fi-muted); }

.fi-crumbs { font-size: 13px; color: var(--fi-muted); padding: 22px 0 18px; }
.fi-crumbs a { color: var(--fi-muted); }
.fi-crumbs a:hover { color: var(--fi-navy); }
.fi-crumbs span { margin: 0 4px; color: #A3ADBA; }
.fi-hero { padding: 4px 0 24px; max-width: 880px; }
.fi-hero .fi-eyebrow::after { content: ""; display: block; width: 44px; height: 3px; background: var(--fi-gold); border-radius: 2px; margin-top: 8px; }

/* Section navigation */
.fi-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 32px; padding-bottom: 18px; border-bottom: 1px solid var(--fi-line); }
.fi .fi-nav a { font-size: 14px; font-weight: 500; color: var(--fi-navy); padding: 8px 16px; border: 1px solid var(--fi-line); border-radius: 999px; background: #fff; }
.fi .fi-nav a:hover { border-color: var(--fi-gold); color: var(--fi-navy); }
.fi .fi-nav a.is-active { background: var(--fi-navy); border-color: var(--fi-navy); color: var(--fi-gold-bright); }

/* Cards */
.fi-block { margin: 36px 0 10px; }
.fi-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.fi-block-head a { font-size: 14px; font-weight: 600; color: var(--fi-gold-text); }
.fi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.fi-card { background: #fff; border: 1px solid var(--fi-line); border-radius: var(--fi-radius); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.fi-card:hover { box-shadow: 0 12px 30px rgba(7, 28, 58, .10); transform: translateY(-2px); border-color: #D9C27A; }
.fi-card-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fi-soft); }
.fi-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.fi-card-body .fi-eyebrow { font-size: 11px; margin-bottom: 6px; }
.fi-card h3 { font-family: var(--fi-sans); font-size: 18px; line-height: 1.4; font-weight: 600; margin: 0 0 8px; }
.fi .fi-card h3 a { color: var(--fi-navy); }
.fi .fi-card h3 a:hover { color: var(--fi-gold-dark); }
.fi-card p { font-size: 14.5px; line-height: 1.6; color: var(--fi-muted); margin: 0 0 12px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Topic directory (Insights home) */
.fi-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.fi a.fi-topic { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--fi-line); border-left: 4px solid var(--fi-gold);
  border-radius: 10px; background: var(--fi-soft); color: var(--fi-navy); transition: background .2s ease, box-shadow .2s ease; }
.fi a.fi-topic:hover { background: #fff; box-shadow: 0 8px 22px rgba(7, 28, 58, .08); }
.fi-topic strong { font-family: var(--fi-serif); font-size: 21px; line-height: 1.25; font-weight: 600; color: var(--fi-navy); }
.fi-topic .fi-eyebrow { margin: 0; }

/* Article */
.fi-article { padding-bottom: 8px; }
.fi-notice { background: #FFF8E6; border: 1px solid #EAD38A; color: #6B5310; font-size: 14px; border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; }
.fi-byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--fi-line); border-bottom: 1px solid var(--fi-line); margin: 4px 0 26px; font-size: 15px; }
.fi .fi-byline a { font-weight: 600; color: var(--fi-navy); }
.fi-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--fi-navy); color: var(--fi-gold-bright); display: inline-flex; align-items: center;
  justify-content: center; font-weight: 600; font-size: 15px; flex: 0 0 auto; object-fit: cover; }
.fi-avatar-lg { width: 58px; height: 58px; font-size: 19px; }
.fi-avatar-xl { width: 96px; height: 96px; font-size: 30px; }
.fi-hero-img { margin: 0 0 30px; }
.fi-hero-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--fi-radius); display: block; background: var(--fi-soft); }
.fi-hero-img figcaption { font-size: 12px; color: var(--fi-muted); margin-top: 6px; }

.fi-body { font-size: 17px; line-height: 1.85; color: var(--fi-text); }
.fi-body p { margin: 0 0 18px; }
.fi-body h2 { font-family: var(--fi-serif); font-size: 32px; line-height: 1.2; font-weight: 600; color: var(--fi-navy); margin: 40px 0 12px; }
.fi-body h3 { font-family: var(--fi-sans); font-size: 19px; line-height: 1.4; font-weight: 600; color: var(--fi-navy); margin: 28px 0 8px; }
.fi-body a { color: var(--fi-navy); text-decoration: underline; text-decoration-color: var(--fi-gold); text-underline-offset: 3px; }
.fi-body a:hover { color: var(--fi-gold-dark); }
.fi-body ul, .fi-body ol { margin: 0 0 20px; padding-left: 22px; }
.fi-body li { margin-bottom: 8px; }
.fi-body li::marker { color: var(--fi-gold); }
.fi-body strong { color: var(--fi-navy); font-weight: 600; }
.fi-body blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--fi-gold);
  font-family: var(--fi-serif); font-size: 24px; font-style: italic; color: var(--fi-navy); }
.fi-body table { width: 100%; border-collapse: collapse; margin: 20px 0 26px; font-size: 15px; line-height: 1.5; display: block; overflow-x: auto; }
.fi-body th, .fi-body td { border: 1px solid var(--fi-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.fi-body th { background: var(--fi-navy); color: #fff; font-weight: 600; }
.fi-body tr:nth-child(even) td { background: var(--fi-soft); }

.fi-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 8px; font-size: 14px; }
.fi-share span { font-weight: 600; color: var(--fi-navy); margin-right: 4px; }
.fi .fi-share a { padding: 6px 14px; border: 1px solid var(--fi-line); border-radius: 999px; color: var(--fi-navy); }
.fi .fi-share a:hover { border-color: var(--fi-gold); background: #FFFBEF; }

.fi-box { background: var(--fi-soft); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); padding: 20px 22px; margin: 24px 0; font-size: 15.5px; line-height: 1.65; }
.fi-box .fi-h3 { font-family: var(--fi-serif); font-size: 23px; }
.fi-box ul, .fi-box ol { margin: 0 0 8px; padding-left: 20px; }
.fi-box li { margin-bottom: 6px; }
.fi-box li::marker { color: var(--fi-gold); }
.fi .fi-box a { color: var(--fi-navy); text-decoration: underline; text-decoration-color: var(--fi-gold); text-underline-offset: 3px; }
.fi-author-box { display: flex; gap: 16px; align-items: flex-start; }
.fi-author-box p { margin: 6px 0 0; }
.fi-author-head { display: flex; gap: 22px; align-items: flex-start; }

/* Call to action: navy panel like the site header, gold button like "Candidate Login" */
.fi-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 44px 0 0; padding: 30px 32px;
  border-radius: var(--fi-radius); background: var(--fi-navy-deep); }
.fi-cta .fi-eyebrow { color: var(--fi-gold-bright); }
.fi-cta h2 { font-family: var(--fi-serif); font-size: 30px; line-height: 1.2; font-weight: 600; color: #fff; margin: 0 0 6px; }
.fi-cta p { margin: 0; color: var(--fi-ice); font-size: 15px; }
.fi-btn, .fi a.fi-btn { display: inline-block; background: var(--fi-gold); color: var(--fi-navy); font-weight: 600; font-size: 16px; padding: 13px 26px;
  border-radius: 10px; text-decoration: none; white-space: nowrap; transition: background .2s ease, transform .2s ease; }
.fi-btn:hover, .fi a.fi-btn:hover { background: var(--fi-gold-dark); color: var(--fi-navy); transform: translateY(-1px); }

.fi-pager { display: flex; justify-content: space-between; margin: 30px 0 0; font-weight: 600; }
.fi .fi-pager a { color: var(--fi-gold-text); }

@media (max-width: 768px) {
  .fi-wrap { padding: 0 16px; }
  .fi-h1 { font-size: 33px; line-height: 1.15; }
  .fi-h2, .fi-body h2 { font-size: 26px; }
  .fi-cta h2 { font-size: 25px; }
  .fi-lead { font-size: 16.5px; }
  .fi-body { font-size: 16.5px; line-height: 1.8; }
  .fi-grid { grid-template-columns: 1fr; gap: 18px; }
  .fi-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fi .fi-nav a { white-space: nowrap; }
  .fi-cta { padding: 24px 20px; }
  .fi-author-head { flex-direction: column; }
}