/* Site footer. Markup is generated from data/footer.json by scripts/footer.mjs. */
/* The footer carries its own serif so the tagline and "Explore Klaar" look the same on every page (pages load Fraunces in different weights, and none with an italic). Latin subset, SIL Open Font License. */
@font-face{font-family:"Fraunces Footer";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/footer/fraunces-italic-400-latin.woff2") format("woff2")}
@font-face{font-family:"Fraunces Footer";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/footer/fraunces-500-latin.woff2") format("woff2")}
footer.sf{--sf-bg:#F5F0EA;--sf-ink:#232323;--sf-body:#5C524D;--sf-mute:#55524E;--sf-quiet:#6F6560;--sf-burg:#9E2227;--sf-burg-dark:#85191D;--sf-line:rgba(42,42,46,.12);
  position:relative;z-index:1;display:block;clear:both;width:100%;box-sizing:border-box;margin:0;padding:72px 0 40px;background:var(--sf-bg) !important;border-top:1px solid var(--sf-line);
  color:var(--sf-ink);font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.4;text-align:left;text-transform:none;letter-spacing:0;-webkit-font-smoothing:antialiased}
footer.sf *,footer.sf *::before,footer.sf *::after{box-sizing:border-box}
footer.sf p,footer.sf h2,footer.sf h3,footer.sf ul,footer.sf li{margin:0;padding:0;list-style:none;letter-spacing:0;text-transform:none}
footer.sf a{color:inherit;text-decoration:none;transition:color .15s}
footer.sf a:hover{color:var(--sf-burg)}
footer.sf .sf-in{width:min(1240px,calc(100% - 64px));margin:0 auto}

footer.sf .sf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
footer.sf .sf-brand{flex:1 1 420px;max-width:640px}
footer.sf .sf-logo{display:inline-block}
footer.sf .sf-logo img{display:block;height:40px;width:auto}
footer.sf .sf-tag{margin-top:22px;font-family:"Fraunces Footer",Fraunces,Georgia,serif;font-style:italic;font-weight:400;font-size:16px;line-height:1.65;color:var(--sf-quiet)}
footer.sf .sf-side{display:flex;flex-direction:column;align-items:flex-end;gap:22px}
footer.sf .sf-actions{display:flex;align-items:center;gap:28px}
footer.sf .sf-login{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--sf-ink)}
footer.sf .sf-demo{display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border-radius:999px;background:var(--sf-burg);color:#fff;font-size:15px;font-weight:500;white-space:nowrap}
footer.sf .sf-demo:hover{background:var(--sf-burg-dark);color:#fff}
footer.sf .sf-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px 28px;width:100%;padding-top:18px;border-top:1px solid var(--sf-line)}
footer.sf .sf-badges li{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--sf-body)}
footer.sf .sf-badges img{display:block;width:30px;height:30px}

footer.sf .sf-explore{display:flex;align-items:center;gap:32px;margin-top:48px;padding-top:28px;border-top:1px solid var(--sf-line)}
footer.sf .sf-explore-h{font-family:"Fraunces Footer",Fraunces,Georgia,serif;font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.01em;color:var(--sf-ink)}
footer.sf .sf-rule{flex:1;height:1px;background:var(--sf-line)}

footer.sf .sf-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:40px;margin-top:36px}
footer.sf .sf-group+.sf-group{margin-top:34px}
footer.sf .sf-h{margin-bottom:10px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:var(--sf-burg)}
footer.sf .sf-h a{display:inline-flex;align-items:center;gap:8px;color:var(--sf-burg)}
footer.sf .sf-h a:hover{color:var(--sf-burg-dark)}
footer.sf .sf-ico{flex-shrink:0}
footer.sf .sf-list a{display:inline-block;padding:4px 0;font-size:14px;line-height:1.4;color:var(--sf-body)}
footer.sf .sf-list a:hover{color:var(--sf-burg)}
footer.sf .sf-list .sf-soon{display:inline-block;padding:4px 0;font-size:14px;line-height:1.4;color:var(--sf-quiet)}
footer.sf .sf-list .sf-soon .sf-tag-new{display:inline-block;margin:0 0 0 4px;padding:0 5px;border:1px solid #E2DFD9;border-radius:999px;font-family:Poppins,system-ui,sans-serif;font-style:normal;font-weight:500;font-size:9px;line-height:1.5;letter-spacing:0;text-transform:none;vertical-align:1px;color:#75757C}
footer.sf .sf-tag-new{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid var(--sf-burg);border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sf-burg);vertical-align:middle}

footer.sf .sf-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:56px;padding-top:30px;border-top:3px solid var(--sf-burg)}
footer.sf .sf-copy p{font-size:13px;line-height:1.9;color:var(--sf-mute)}
footer.sf .sf-legal{display:flex;flex-wrap:wrap;gap:8px 28px}
footer.sf .sf-legal a{font-size:13px;color:var(--sf-mute)}
footer.sf .sf-social{display:flex;gap:12px}
footer.sf .sf-social a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(42,42,46,.16);border-radius:50%;background:#FBF8F4;color:var(--sf-ink)}
footer.sf .sf-social a:hover{color:var(--sf-burg);border-color:var(--sf-burg)}

@media (max-width:900px){
  footer.sf{padding:56px 0 32px}
  footer.sf .sf-in{width:calc(100% - 48px)}
  footer.sf .sf-side{align-items:flex-start;width:100%}
  footer.sf .sf-badges{justify-content:flex-start}
  footer.sf .sf-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  footer.sf .sf-bottom{flex-direction:column;align-items:flex-start;margin-top:40px}
}
@media (max-width:480px){
  footer.sf .sf-actions{flex-wrap:wrap;gap:16px 24px}
  footer.sf .sf-cols{gap:28px 16px}
}

/* Some pages restyle every section with ID-heavy rules; this keeps the footer's own look on all of them. */
footer#site-footer#site-footer#site-footer{background:#F5F0EA !important;border-top:1px solid rgba(42,42,46,.16) !important}

/* Phone: groups collapse into tap-to-open rows (js/site-footer.js adds .sf-acc and the toggles). */
footer.sf .sf-toggle{display:none}
@media (max-width:640px){
  footer.sf.sf-acc .sf-cols{grid-template-columns:1fr;gap:0;margin-top:20px}
  footer.sf.sf-acc .sf-col{display:block}
  footer.sf.sf-acc .sf-group+.sf-group{margin-top:0}
  footer.sf.sf-acc .sf-group{border-top:1px solid var(--sf-line)}
  footer.sf.sf-acc .sf-col:last-child .sf-group:last-child{border-bottom:1px solid var(--sf-line)}
  footer.sf.sf-acc .sf-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;margin:0;font-size:13px}
  footer.sf.sf-acc .sf-h a{flex:1;min-height:50px}
  footer.sf.sf-acc .sf-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;margin:-4px -10px -4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sf-burg);cursor:pointer}
  footer.sf.sf-acc .sf-toggle svg{transition:transform .2s}
  footer.sf.sf-acc .sf-group.is-open .sf-toggle svg{transform:rotate(180deg)}
  footer.sf.sf-acc .sf-list{display:none;padding:0 0 12px}
  footer.sf.sf-acc .sf-group.is-open .sf-list{display:block}
  footer.sf.sf-acc .sf-list a,footer.sf.sf-acc .sf-list .sf-soon{padding:8px 0;font-size:15px}
}

/* Same footer height on every page at phone width (ticket 143).
   1. Some pages carry a rule that makes every footer link at least 44px tall on phones and others do not, so the
      legal links and the logo link were 44px on most pages and 18px and 40px on ten of them (a 30px difference).
      The footer now sets this itself, so it is the same everywhere.
   2. On /solutions/ai-forward/ a page rule (#page img { height: auto !important }) let the footer logo grow back to
      its file size (230x75) on phones, adding 31px. The extra :is(body,#klaar-x) repeats lift this rule above any
      page rule that uses an ID. */
@media (max-width:900px){
  :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) footer.sf.sf .sf-legal a,
  :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) footer.sf.sf .sf-logo{display:inline-flex !important;align-items:center !important;min-height:44px !important}
}
:is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) footer.sf.sf .sf-logo img{height:40px !important;width:auto !important;max-width:none !important}