/* The landing's footer (Dasha, 25 Oct): one large light card at the page's end, with the logo, a sign-up for tips, every page
   of the site in five columns, and the copyright under a thin rule. Only on the landing pages (index.html, diamond-rain.html):
   every other page keeps the slim row of assets/header.css (.ijf), and tools/header.py leaves this footer as it is. It carries
   its own colours and font sizes, so the block pastes into another page as is. */
.ijlf { --lf-ink: #191826; --lf-ink2: #5e5c70; --lf-ink3: #8a889a; --lf-line: rgba(25, 24, 38, .08); --lf-blue: #6E72F2; --lf-red: #c2334d;
  width: calc(100% - 2 * clamp(16px, 4vw, 48px)); max-width: 1344px; margin: clamp(24px, 4vw, 48px) auto clamp(16px, 2vw, 24px);
  font-family: 'Sora', system-ui, sans-serif; color: var(--lf-ink); text-align: left; }
.ijlf *, .ijlf *::before, .ijlf *::after { box-sizing: border-box; }
.ijlf [hidden] { display: none !important; }
.ijlf a:focus-visible, .ijlf button:focus-visible { outline: 2px solid var(--lf-blue); outline-offset: 2px; }
.ijlf-card { padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 56px) 22px; border-radius: 32px; background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(25, 24, 38, .055), 0 1px 2px rgba(25, 24, 38, .04), 0 30px 70px -48px rgba(40, 44, 120, .3); }  /* the header's white and edge (Dasha, 26 Oct) */
/* seven columns (26 Oct: the live site's Documentation, Integrations, Events, Help and Legal join Features and Pricing) do not fit
   beside the brand block: the brand block on top, the columns in one row under it at every width */
.ijlf-top { display: flex; flex-direction: column; gap: 36px 56px; }

/* the logo, the sign-up and the social pages */
.ijlf-brand { flex: none; width: min(100%, 420px); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ijlf-logo { display: inline-flex; text-decoration: none; }
.ijlf-logo img { display: block; height: 38px; width: auto; }  /* the serif logo ijewel 3d (Dasha, 6 Nov) */
.ijlf-form { width: 100%; margin: 28px 0 0; }
.ijlf-lead { display: block; font: 500 15px/1.4 'Sora', system-ui, sans-serif; letter-spacing: -.01em; color: var(--lf-ink); }
.ijlf-field { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 5px; border-radius: 16px; background: #fff;  /* rounded as the site's buttons, not a pill (Dasha, 26 Oct) */
  box-shadow: 0 0 0 1px rgba(25, 24, 38, .1); transition: box-shadow .2s; }
.ijlf-field:focus-within { box-shadow: 0 0 0 1.5px var(--lf-blue), 0 0 0 5px rgba(110, 114, 242, .14); }
.ijlf-field:has([aria-invalid="true"]) { box-shadow: 0 0 0 1.5px var(--lf-red); }
.ijlf-field input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 40px; margin: 0; padding: 0 6px 0 14px; border: 0; border-radius: 11px;
  background: transparent; font: 400 14px/1 'Sora', system-ui, sans-serif; color: var(--lf-ink); outline: none; }
.ijlf-field input::placeholder { color: var(--lf-ink3); }
.ijlf-go { -webkit-appearance: none; appearance: none; flex: none; height: 40px; margin: 0; padding: 0 18px; border: 0; border-radius: 11px; background: var(--lf-ink); color: #fff;
  font: 500 14px/1 'Sora', system-ui, sans-serif; cursor: pointer; transition: background .2s, opacity .2s; }
.ijlf-go:hover { background: #2b2940; }
.ijlf-go.is-wait { opacity: .45; }  /* muted until the address is right; still clickable, so a click can say what is wrong */
.ijlf-err, .ijlf-ok { margin: 8px 0 0 16px; font: 400 12.5px/1.4 'Sora', system-ui, sans-serif; }
.ijlf-err { color: var(--lf-red); }
.ijlf-ok { color: #2f7a4f; font-weight: 500; }
.ijlf-note { margin: 12px 0 0; font: 400 12px/1.5 'Sora', system-ui, sans-serif; color: var(--lf-ink3); }
.ijlf-note a { color: var(--lf-ink2); text-decoration: underline; text-underline-offset: 2px; }
.ijlf-note a:hover { color: var(--lf-ink); }
.ijlf-soc { display: flex; gap: 2px; margin: 22px 0 0 -8px; }
.ijlf-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--lf-ink2); transition: color .2s, background .2s; }
.ijlf-ic:hover { color: var(--lf-ink); background: rgba(25, 24, 38, .05); }

/* every page, in five columns; each column as wide as its longest name, the space between them shared */
.ijlf-cols { flex: none; width: 100%; display: flex; justify-content: space-between; gap: 32px 24px; min-width: 0; }
.ijlf-col { flex: none; }
.ijlf .ijlf-h { margin: 0 0 16px; font: 500 12.5px/1.2 'Sora', system-ui, sans-serif; letter-spacing: .01em; color: var(--lf-ink3); text-wrap: initial; }
.ijlf-tg { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: default; }  /* the heading as it is on a wide screen; a button for the phone's folding */
.ijlf-chev { display: none; }
.ijlf-col ul { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.ijlf-col a { display: inline-flex; align-items: baseline; gap: 4px; font: 400 14px/1.35 'Sora', system-ui, sans-serif; color: var(--lf-ink2); text-decoration: none; transition: color .2s; }
.ijlf-col a:hover { color: var(--lf-ink); }
.ijlf-ar { font-size: 11px; color: var(--lf-ink3); }  /* another site, in a new tab */
.ijlf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.ijlf-co { margin: clamp(36px, 5vw, 56px) 0 0; padding-top: 22px; border-top: 1px solid var(--lf-line); text-align: center;
  font: 400 12.5px/1.4 'Sora', system-ui, sans-serif; color: var(--lf-ink2); }

/* a laptop that is narrow, or a tablet: the sign-up on top, the columns under it in one row */
/* a tablet: five columns do not fit beside each other, so three to a row */
@media (max-width: 1100px) {
  .ijlf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (max-width: 900px) {
  .ijlf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* a phone: the columns two by two, each link a finger's height */
@media (max-width: 640px) {
  .ijlf-card { border-radius: 24px; }
  /* the groups one under the other, folded; the heading is a full-width row with a chevron at the right, a tap opens the list (Dasha, 29 Oct) */
  .ijlf-cols { display: flex; flex-direction: column; gap: 0; }
  .ijlf-col { width: 100%; border-top: 1px solid rgba(25, 24, 38, .08); }  /* full width, so the chevron sits at the right; no line after the last group (Dasha, 29 Oct) */
  .ijlf .ijlf-h { margin: 0; }
  .ijlf-tg { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 2px; font-size: 14.5px; color: var(--lf-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ijlf-chev { display: block; flex: none; width: 18px; height: 18px; color: var(--lf-ink3); transition: transform .3s; }
  .ijlf-col.is-open .ijlf-chev { transform: rotate(180deg); }
  .ijlf-col ul { display: none; gap: 0; padding: 0 2px 10px; } .ijlf-col.is-open ul { display: flex; }
  .ijlf-col a { min-height: 40px; align-items: center; }
  .ijlf-soc { margin-top: 16px; }
  .ijlf-ic { width: 44px; height: 44px; }
  .ijlf-co { font-size: 12px; }
}