/*
 * Shared-system core: design tokens, typography and layout.
 *
 * Extracted from the WPCode global snippet during migration. The rules are the
 * source rules, unchanged apart from vendor prefixes noted below; only their
 * grouping is new, so a page loads what it renders instead of the whole sheet.
 */

@keyframes fbiflow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.fbi{--blue:#0066CC;
  --sky:#0B87D0;
  --cyan:#2EB0E7;
  --navy:#041853;
  --navy2:#042B6D;
  --ink:#182238;
  --mut:#4B586E;
  --line:#E2E9F3;
  --bg:#F6F9FD;

  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  margin:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;}
.fbi *{box-sizing:border-box;margin:0;padding:0}
.fbi img{max-width:100%;display:block}
.fbi h1,
.fbi h2,
.fbi h3,
.fbi .plex{font-family:'IBM Plex Sans','Inter','Segoe UI',sans-serif}
.fbi h1{font-size:clamp(28px,3.6vw,40px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  max-width:850px;
  margin-bottom:8px;
  color:#fff!important;}
.fbi h2{font-size:clamp(25px,3.1vw,36px);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.18;}
.fbi h2.dark{color:var(--navy)!important}
.fbi .prose{margin-top:20px}
.fbi .prose p:last-child{margin-bottom:0}
.fbi .prose strong{color:var(--navy2);font-weight:600}
.fbi .wrap{max-width:1150px;margin:0 auto;padding:0 26px}
.fbi .sec{padding:84px 0}
.fbi .sec.soft{background:var(--bg)}
.fbi .duo{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
.fbi .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* ==========================================================
   RESPONSIVE

   These sat at the top of the file during the migration, above the
   declarations they were meant to override. A media query carries no extra
   specificity, so `.fbi .duo{grid-template-columns:1.08fr .92fr}` further down
   won on every screen and the two-column splits never collapsed — which is
   why text and images were sharing a phone's width across the whole site.
   Moving the block to the end is the whole fix; the rules themselves are
   unchanged.
   ========================================================== */
@media(max-width:940px){
  .fbi .duo{grid-template-columns:1fr;gap:44px}
  .fbi .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .fbi .sec{padding:58px 0}
  .fbi .cards{grid-template-columns:1fr}
}