/* SimpleFi AI Pillars v1.0.0 - generated by scripts/build_wp_plugin.py
   Edit scripts/pillars_data.py and rebuild. Do not edit this file. */

/* ══════════════════════════════════════════════════════════════════
   THE COMPONENT  everything below is scoped to .sfi-pillars so it
   cannot collide with the WordPress theme. This is the block to paste.
   ══════════════════════════════════════════════════════════════════ */
.sfi-pillars{--p-teal:#0A4157;--p-cyan:#169BD0;--p-cyanlt:#88BCDC;--p-gold:#FFC000;
  --p-rule:#DCE4E8;--p-body:#4A585F;--p-muted:#7C8A92;
  font-family:"Source Sans Pro","Source Sans 3",-apple-system,sans-serif;font-weight:300;position:relative}
.sfi-pillars *{box-sizing:border-box}
.sfi-pillars__head{margin:0 0 4px}
.sfi-pillars__title{font-size:clamp(21px,2.4vw,29px);font-weight:300;color:var(--p-teal);letter-spacing:-.02em;line-height:1.16;margin:0}
.sfi-pillars__title b{font-weight:700}
.sfi-pillars__sub{font-size:15.5px;color:var(--p-body);margin:7px 0 0;max-width:70ch}
.sfi-pillars--onDark .sfi-pillars__title{color:#fff}
.sfi-pillars--onDark .sfi-pillars__sub{color:rgba(255,255,255,.8)}
/* the rail */
.sfi-pillars__rail{position:relative;margin:26px 0 0;padding-top:26px}
.sfi-pillars__rail::before{content:"";position:absolute;left:11%;right:11%;top:11px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--p-cyanlt),var(--p-cyan) 45%,var(--p-teal))}
.sfi-pillars--onDark .sfi-pillars__rail::before{background:linear-gradient(90deg,rgba(136,188,220,.55),var(--p-cyan) 45%,#fff)}
.sfi-pillars__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
/* the node on the rail */
.sfi-pillars__node{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:19px;height:19px;border-radius:50%;
  background:#fff;border:3px solid var(--p-cyan);z-index:2;transition:all .18s ease}
.sfi-pillars--onDark .sfi-pillars__node{background:#0A3348}
/* the card */
.sfi-pillars__card{position:relative;display:flex;flex-direction:column;padding:22px 20px 20px;
  background:#fff;border:1px solid var(--p-rule);border-radius:4px;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}
.sfi-pillars__card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--p-cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
a.sfi-pillars__card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -12px rgba(10,65,87,.35);border-color:var(--p-cyan)}
a.sfi-pillars__card:hover::after{transform:scaleX(1)}
a.sfi-pillars__card:hover .sfi-pillars__node{border-color:var(--p-teal);transform:translateX(-50%) scale(1.15)}
a.sfi-pillars__card:focus-visible{outline:3px solid var(--p-cyan);outline-offset:3px}
/* the big watermark numeral */
.sfi-pillars__num{position:absolute;right:12px;top:4px;font-size:52px;line-height:1;font-weight:700;
  color:var(--p-teal);opacity:.06;letter-spacing:-.04em;pointer-events:none}
.sfi-pillars__ico{width:30px;height:30px;color:var(--p-cyan);margin-bottom:11px}
.sfi-pillars__ico svg{width:100%;height:100%;display:block}
.sfi-pillars__verb{font-size:20px;font-weight:700;color:var(--p-teal);letter-spacing:-.01em;line-height:1.1}
.sfi-pillars__who{font-size:14px;color:var(--p-muted);font-weight:600;margin-top:2px}
.sfi-pillars__desc{font-size:14.5px;color:var(--p-body);line-height:1.42;margin-top:10px;flex:1}
.sfi-pillars__more{font-size:13.5px;font-weight:700;color:var(--p-cyan);margin-top:13px;display:flex;align-items:center;gap:5px}
.sfi-pillars__more svg{width:13px;height:13px;transition:transform .18s ease}
a.sfi-pillars__card:hover .sfi-pillars__more svg{transform:translateX(3px)}
/* ── the brand lockup slot ──────────────────────────────────────────
   Heights are per-logo, not uniform: AttestiFi is a wide horizontal
   lockup, the two SimpleFi marks are near-square and carry a small
   tagline. Equal heights would let AttestiFi dominate and would make
   the other two illegible. min-height keeps the four rows aligned. */
.sfi-pillars__brand{margin-top:15px;padding-top:13px;border-top:1px solid var(--p-rule);
  display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.sfi-pillars__blogo{height:46px;display:flex;align-items:center;gap:10px}
.sfi-pillars__blabel{font-size:15px;font-weight:700;color:var(--p-teal);line-height:1.15;letter-spacing:-.01em}
.sfi-pillars__bkick{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--p-muted)}
.sfi-pillars__logo{display:block;width:auto;max-width:100%}
.sfi-pillars__logo--dk{display:none}
.sfi-pillars__logo--attestifi{height:37px}
.sfi-pillars__logo--planifi{height:44px}
.sfi-pillars__logo--workerbee{height:42px}
.sfi-pillars__logo--sapbai{height:28px}
/* the active (you are here) state */
.sfi-pillars__card--here{background:linear-gradient(158deg,var(--p-teal),#0a3348);border-color:var(--p-teal)}
.sfi-pillars__card--here::after{transform:scaleX(1);background:var(--p-gold)}
.sfi-pillars__card--here .sfi-pillars__num{color:#fff;opacity:.13}
.sfi-pillars__card--here .sfi-pillars__verb{color:#fff}
.sfi-pillars__card--here .sfi-pillars__who{color:var(--p-cyanlt)}
.sfi-pillars__card--here .sfi-pillars__desc{color:rgba(255,255,255,.84)}
.sfi-pillars__card--here .sfi-pillars__ico{color:var(--p-gold)}
.sfi-pillars__card--here .sfi-pillars__node{background:var(--p-gold);border-color:var(--p-gold);box-shadow:0 0 0 5px rgba(255,192,0,.22)}
/* swap in the dark-background lockups wherever the card goes dark */
.sfi-pillars__card--here .sfi-pillars__logo--lt,.sfi-pillars--onDark .sfi-pillars__logo--lt{display:none}
.sfi-pillars__card--here .sfi-pillars__logo--dk,.sfi-pillars--onDark .sfi-pillars__logo--dk{display:block}
.sfi-pillars__card--here .sfi-pillars__brand,.sfi-pillars--onDark .sfi-pillars__brand{border-top-color:rgba(255,255,255,.2)}
.sfi-pillars__card--here .sfi-pillars__bkick,.sfi-pillars--onDark .sfi-pillars__bkick{color:rgba(255,255,255,.62)}
.sfi-pillars__card--here .sfi-pillars__blabel,.sfi-pillars--onDark .sfi-pillars__blabel{color:#fff}
.sfi-pillars__here{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--p-teal);background:var(--p-gold);padding:4px 10px;border-radius:2px;margin-top:13px;align-self:flex-start}
/* ── the foundation layer ──────────────────────────────────────────
   A plinth the four cards stand on. It must NOT read as a fifth pillar,
   so: full width rather than a grid cell, solid teal against the white
   cards, and four short legs dropping from the card centres into it. */
.sfi-pillars__found{position:relative;display:flex;align-items:center;gap:20px;margin-top:30px;
  padding:18px 24px;border-radius:4px;text-decoration:none;
  background:linear-gradient(100deg,var(--p-teal),#0a3348);
  transition:transform .18s ease,box-shadow .18s ease}
a.sfi-pillars__found:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(10,65,87,.5)}
a.sfi-pillars__found:focus-visible{outline:3px solid var(--p-cyan);outline-offset:3px}
.sfi-pillars__legs{position:absolute;left:0;right:0;top:-16px;height:16px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:16px;pointer-events:none}
.sfi-pillars__legs i{justify-self:center;width:2px;height:16px;
  background:linear-gradient(180deg,var(--p-rule),var(--p-teal))}
.sfi-pillars--onDark .sfi-pillars__legs i{background:linear-gradient(180deg,rgba(255,255,255,.25),var(--p-cyan))}
.sfi-pillars--onDark .sfi-pillars__found{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2)}
.sfi-pillars__found__ico{flex:0 0 auto;width:30px;height:30px;color:var(--p-cyanlt)}
.sfi-pillars__found__ico svg{width:100%;height:100%;display:block}
.sfi-pillars__found__body{flex:1;min-width:0}
.sfi-pillars__found__kick{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--p-cyanlt)}
.sfi-pillars__found__t{display:block;font-size:19px;font-weight:700;color:#fff;line-height:1.2;margin-top:3px}
.sfi-pillars__found__d{display:block;font-size:14px;color:rgba(255,255,255,.8);margin-top:4px;line-height:1.4}
.sfi-pillars__found__go{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:13.5px;
  font-weight:700;color:var(--p-cyanlt);white-space:nowrap}
.sfi-pillars__found__go svg{width:13px;height:13px;transition:transform .18s ease}
a.sfi-pillars__found:hover .sfi-pillars__found__go svg{transform:translateX(3px)}
.sfi-pillars--compact .sfi-pillars__found{padding:14px 18px;gap:15px;margin-top:26px}
.sfi-pillars--compact .sfi-pillars__found__t{font-size:16px}
.sfi-pillars--compact .sfi-pillars__found__d{font-size:13px}
.sfi-pillars--compact .sfi-pillars__found__ico{width:24px;height:24px}
/* the closing line */
.sfi-pillars__foot{margin-top:18px;font-size:15px;color:var(--p-body);border-left:3px solid var(--p-gold);padding-left:14px}
.sfi-pillars__foot b{color:var(--p-teal)}
.sfi-pillars--onDark .sfi-pillars__foot{color:rgba(255,255,255,.85)}
.sfi-pillars--onDark .sfi-pillars__foot b{color:#fff}
.sfi-pillars--onDark .sfi-pillars__card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.18)}
.sfi-pillars--onDark .sfi-pillars__verb{color:#fff}
.sfi-pillars--onDark .sfi-pillars__desc{color:rgba(255,255,255,.78)}
.sfi-pillars--onDark .sfi-pillars__num{color:#fff}
/* compact variant for the pillar landing pages */
.sfi-pillars--compact .sfi-pillars__card{padding:16px 15px 15px}
.sfi-pillars--compact .sfi-pillars__verb{font-size:17px}
.sfi-pillars--compact .sfi-pillars__desc{font-size:13.5px;margin-top:7px}
.sfi-pillars--compact .sfi-pillars__num{font-size:40px}
.sfi-pillars--compact .sfi-pillars__ico{width:24px;height:24px;margin-bottom:8px}
.sfi-pillars--compact .sfi-pillars__brand{margin-top:12px;padding-top:11px;gap:6px}
.sfi-pillars--compact .sfi-pillars__blogo{height:36px}
.sfi-pillars--compact .sfi-pillars__logo--attestifi{height:30px}
.sfi-pillars--compact .sfi-pillars__logo--planifi{height:35px}
.sfi-pillars--compact .sfi-pillars__logo--workerbee{height:33px}
.sfi-pillars--compact .sfi-pillars__logo--sapbai{height:22px}
.sfi-pillars--compact .sfi-pillars__blabel{font-size:13px}
/* responsive */
@media(max-width:1000px){
  .sfi-pillars__grid{grid-template-columns:1fr 1fr;gap:14px}
  .sfi-pillars__rail::before{display:none}
  .sfi-pillars__node{display:none}
  .sfi-pillars__rail{padding-top:0}
  .sfi-pillars__legs{display:none}
  .sfi-pillars__found{flex-wrap:wrap;gap:12px}
  .sfi-pillars__found__go{width:100%}
}
@media(max-width:560px){.sfi-pillars__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .sfi-pillars__card,.sfi-pillars__card::after,.sfi-pillars__more svg,.sfi-pillars__node,.sfi-pillars__found{transition:none}
  a.sfi-pillars__card:hover,a.sfi-pillars__found:hover{transform:none}
}