/* ------------------------------------------------------------------
   Lino — the footer of every page: the home page, its translations and the
   support / privacy / terms pages. Its markup is generated by
   docs/landing-pages/build.mjs; the colour tokens come from home.css or
   legal.css, whichever the page loads.
   ------------------------------------------------------------------ */
.footer{padding:10px 0 40px;color:var(--muted)}
.f-main{display:flex;justify-content:space-between;align-items:flex-start;gap:20px 48px;flex-wrap:wrap;
  border-top:1px solid rgba(60,70,110,.12);padding-top:40px}
.f-brand{display:inline-flex;align-items:center;gap:9px}
.f-brand .tile{width:34px;height:34px;border-radius:10px;background:#fff;display:grid;place-items:center;
  overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.03),0 8px 16px -10px rgba(40,60,120,.32)}
.f-brand .tile img{width:84%;height:84%;object-fit:contain;transform:translateY(1px)}
.f-brand b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:20px;letter-spacing:-0.03em;color:var(--blue)}
.f-tag{margin:12px 0 0;font-size:13.5px;max-width:280px;line-height:1.55}
.f-links{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:8px}
.f-links a{font-size:14px;color:var(--ink-soft)}
.f-links a:hover{color:var(--blue)}
.f-base{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:30px;padding-top:20px;border-top:1px solid rgba(60,70,110,.12);font-size:12.5px;color:#9AA0AE}

/* Language picker: a <details>, so the links are in the page for crawlers and
   work without JS. The list opens upwards, over the footer. */
.lang-picker{position:relative}
.lang-picker summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:99px;border:1px solid var(--line-2);background:#fff;
  font-size:13px;font-weight:500;color:var(--ink-soft)}
.lang-picker summary::-webkit-details-marker{display:none}
.lang-picker summary::after{content:"";width:6px;height:6px;margin-left:2px;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:translateY(1px) rotate(-45deg)}
.lang-picker[open] summary::after{transform:translateY(-2px) rotate(135deg)}
.lang-picker summary:hover,.lang-picker[open] summary{color:var(--ink);border-color:#C9D3EA}
.lang-ic{width:16px;height:16px;color:var(--blue)}
.lang-picker ul{list-style:none;margin:0;position:absolute;right:0;bottom:calc(100% + 8px);z-index:20;
  display:grid;grid-template-columns:repeat(2,auto);gap:2px 4px;width:max-content;max-width:calc(100vw - 32px);
  padding:10px;border-radius:16px;background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 48px -20px rgba(30,50,110,.35)}
.lang-picker a{display:block;padding:7px 12px;border-radius:8px;font-size:14px;color:var(--ink-soft);white-space:nowrap}
.lang-picker a:hover{background:var(--wash-2);color:var(--ink)}
.lang-picker a[aria-current="page"]{color:var(--blue);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:760px){
  .f-main{flex-direction:column;gap:18px}
  .f-links{padding-top:0;gap:10px 22px}
  /* A long label ("Español (Latinoamérica)") moves the picker onto its own
     line on the left, so on phones the list spans the footer instead of
     hanging off the button and past the edge of the screen. */
  .f-base{position:relative}
  .lang-picker{position:static}
  .lang-picker ul{left:0;right:0;width:auto;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lang-picker a{white-space:normal}
}