/* The site footer, the same on every page (owner, 7 Nov 2026: "a consistent header and footer ... as a
   reusable element for all pages"). Its markup is content/site-chrome/footer.html, stamped into each page by
   scripts/site-chrome.mjs. Every value it needs is set here, so it looks the same whatever the page loads. */
.ft{--ft-dark:#0c0d0d;--ft-line:rgba(255,255,255,.12);--ft-text:#ecedeb;--ft-mute:#a1a5a0;--ft-mint:#9ed6b2;--ft-gut:max(20px,4vw);
  margin:0 12px 12px;padding:72px 0 40px;border-radius:0 0 20px 20px;background:var(--ft-dark);color:var(--ft-text);
  font-family:"Figtree",-apple-system,"Segoe UI",system-ui,sans-serif;font-size:17px;font-weight:400;line-height:1.55;letter-spacing:0;
  text-align:left;-webkit-font-smoothing:antialiased}
.ft *{box-sizing:border-box}
.ft .wrap{width:100%;max-width:calc(1160px + 2 * var(--ft-gut));margin:0 auto;padding-left:var(--ft-gut);padding-right:var(--ft-gut)}
.ft a{color:inherit;text-decoration:none}
/* The wordmark, then one column each: four on most pages, five on guide and comparison pages, which add their list */
.ft__grid{display:grid;grid-auto-flow:column;grid-template-columns:minmax(0,1.4fr);grid-auto-columns:minmax(0,1fr);gap:48px 32px}
.ft .word{display:inline-block;font-family:"Fraunces",Georgia,serif;font-size:40px;font-weight:600;letter-spacing:-.05em;line-height:1;
  font-optical-sizing:auto;white-space:nowrap;color:#fff}
.ft .word span{color:var(--ft-mint)}
.ft h3{margin:0 0 12px;padding-bottom:18px;border-bottom:1px solid var(--ft-line);font-family:inherit;font-size:16px;font-weight:450;
  line-height:1.55;letter-spacing:0;text-transform:none;color:var(--ft-mute)}
.ft__col a{display:block;padding:9px 0;font-size:17px;line-height:1.4;color:rgba(255,255,255,.88)}
.ft__col a:hover{color:#fff}
.ft__ai{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin-top:48px;padding-top:24px;
  border-top:1px solid var(--ft-line);font-size:15px;color:var(--ft-mute)}
.ft__ai a{display:inline-flex;align-items:center;min-height:24px;padding:2px 0;color:rgba(255,255,255,.88)}
.ft__ai a:hover{color:#fff}
.ft__ai a:focus-visible{outline:2px solid var(--ft-mint);outline-offset:4px}
.ft__ai + .ft__base{margin-top:24px}
.ft__base{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:72px;font-size:15px;color:var(--ft-mute)}
.ft__legal{display:flex;flex-wrap:wrap;gap:8px 24px}
.ft__legal a:hover{color:#fff}
/* React pages only: privacy settings and the language picker between the two base lines */
.ft__tools{display:flex;align-items:center;gap:20px}
.ft__tools button{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.ft__tools button:hover{color:#fff}
@media (max-width:1100px){
  .ft__grid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft__brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .ft{margin:0 8px 8px;padding:56px 0 32px}
  .ft__grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  .ft .word{font-size:34px}
  .ft__ai{margin-top:36px;gap:0 12px}
  .ft__ai > span{flex-basis:100%;margin-bottom:2px}
  .ft__ai a{min-height:44px;min-width:44px}
  .ft__base{flex-direction:column;align-items:flex-start;gap:12px;margin-top:48px}
}