/* ============================================================================
   Site footer.  Figma 705:77988 "Frame 2147259186" (1488 x 874, radius 32).
   Drawn as the tail of the final-CTA band 705:77958, but built standalone:
   it is shared furniture and gets reused on every page. It owns no positioning
   relative to the CTA band and no shared classes with it.

   Every dimension below is the value in the node JSON. Notes on the four
   things that are easy to get wrong here:

   - The root's 64px padding is genuine Figma auto-layout padding, so it IS
     padding. Everything else that looks like an offset is a gap or a margin.
   - The legal block is drawn 1409 wide inside a 1360 column (705:78063). That
     is not a mistake in the extraction: Figma really does overhang it by 49px
     into the right padding. Reproduced, because changing it re-wraps legal
     copy.
   - 1488 is a `width`. As `max-width` the whole footer collapses onto its
     content and the 4 nav columns stop being 213.2 wide.
   - Node opacity (0.4 / 0.5 / 0.8) is set as `opacity`, not as an rgba text
     colour, because that is literally what Figma carries on those nodes.
   ========================================================================= */

/* 705:77988 — fills are [#000000, linear-gradient]. children[0] is the BOTTOM
   layer, so the gradient paints OVER the black. Re-derived from the handles
   (y -0.4363 -> 0.3476 of an 874-tall box), which is why the stops sit
   outside 0-100%: the top of the footer is already 55% of the way down the
   ramp, and everything below 34.76% (304px) is flat #0D0D0D. */
.afxft {
  box-sizing: border-box;
  /* 1488 is the drawn width. The max-width is what stops it overflowing:
     the footer only reflows to a column at <=1180, so from 1181 to 1487 a
     fixed 1488 box sat inside a narrower viewport and pushed the whole
     document sideways. At 1512 the two are equal (1512 - 24 = 1488), so the
     design width still measures exactly. */
  width: 1488px;
  max-width: calc(100% - 24px);
  margin: 0 auto;
  padding: 64px;
  border-radius: var(--r-32);
  display: flex; flex-direction: column; gap: 80px;
  background:
    linear-gradient(180deg, #303030 -43.63%, #0D0D0D 34.76%),
    var(--af-black);
  color: var(--af-white);
  font-family: var(--font-sans);
}
@media (max-width: 1512px) {
  .afxft { width: auto; margin: 0 12px; }
}

/* ---- 705:77989 — top row, 1360x232, SPACE_BETWEEN, align MIN ------------- */
.afxft__top {
  display: flex; flex-direction: row; justify-content: space-between;
  align-items: flex-start; gap: 48px;
}

/* 705:77990 — brand column, 332 wide, column, gap 32. Fixed width: the
   strapline is drawn on two lines at exactly 332. */
.afxft__brand { display: flex; flex-direction: column; gap: 32px; width: 332px; flex: none; }
/* 705:77991 — column, gap 16 */
.afxft__brandtop { display: flex; flex-direction: column; gap: 16px; }
/* 705:77992 "image 2" — 213x28 wordmark, real export (270x36 source) */
.afxft__mark { display: block; width: 213px; height: 28px; }
/* 705:77993 — SF Pro 400 / 14 / 21px, white at node opacity .5 */
.afxft__strap {
  margin: 0; font-size: 14px; line-height: 21px; font-weight: var(--w-regular);
  color: var(--af-white); opacity: .5;
}

/* 705:77994 — badge row, gap 8 */
.afxft__badges { display: flex; flex-direction: row; gap: 8px;
  /* Wrap. The row is two pills whose width is set by their text, and German
     ("Trustpilot-Bewertungen") is long enough to push the second one 45px past
     a 393px viewport — on every /de page, since this footer is shared. Widening
     the box rather than growing the section: at desktop there is room and it
     never wraps, so nothing moves. */
  flex-wrap: wrap;
}
/* 705:77995 / 705:78004 — 33 tall, radius 57, padding 6/14, gap 7.
   Fill is a single gradient at node opacity .14; re-derived over a 130x33 box
   (fx.py reported 73.7deg, the aspect-corrected angle is 85.8deg).
   The second paint on these nodes is visible:false — that is the hover state
   in the file, not something to ship. */
.afxft__badge {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 14px; border-radius: 57px; box-sizing: border-box;
  background: linear-gradient(85.8deg,
      rgba(255,255,255,.14) -5.38%, rgba(0,0,0,.111) 39.88%, rgba(0,0,0,0) 107.29%);
  font-family: var(--font-alt); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; color: var(--af-white); white-space: nowrap;
}
.afxft__badge img { width: 16px; height: 16px; display: block; flex: none; }

/* 705:78013 — Get Funded, 175x49, radius 28, padding 14/32, gap 8, fill lime.
   The 1.5px stroke is a HARD_LIGHT gradient; drawn with the padding-box /
   content-box mask-composite technique because CSS borders cannot take one.
   DECLARED DEVIATION: HARD_LIGHT of #053F3B over lime is nearly identical to
   the plain paint at these alphas, and Chrome would blend it in sRGB where
   Figma does not, so it ships NORMAL. Verified side by side.
   Ink is --af-lime-ink. Never inherited from the link colour. */
.afxft__cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 175px; height: 49px; padding: 14px 32px; box-sizing: border-box;
  border-radius: var(--r-28); border: 0;
  background: var(--af-lime); color: var(--af-lime-ink);
  font-family: var(--font-ui); font-weight: var(--w-semi);
  font-size: 16px; line-height: 20.83px; letter-spacing: -.48px;
  text-decoration: none; white-space: nowrap;
  transition: box-shadow var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out);
}
.afxft__cta::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(130.2deg,
      #053F3B 37.94%, rgba(5,63,59,.27) 68.05%, #053F3B 96.48%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
/* 705:78016 — 20x20 double chevron, second stroke at .4 opacity, ink #001D21.
   Both strokes live in the exported file. */
.afxft__chev { width: 20px; height: 20px; display: block; flex: none;
  transition: transform var(--t-fast) var(--e-out); }

/* ---- 705:78017 — nav columns, 949 wide, row, gap 32 ---------------------- */
.afxft__nav { display: flex; flex-direction: row; gap: 32px; width: 949px; flex: none; }

/* 705:78018 etc — 213.2 wide, column, gap 27 */
.afxft__col { display: flex; flex-direction: column; gap: 27px; width: 213.2px; flex: none; }
/* Between the reflow breakpoint and the design width the two fixed widths
   below (949 and 213.2) are wider than the space available, which is what
   actually did the overflowing. They flex through that band only. */
@media (max-width: 1487px) and (min-width: 1181px) {
  /* --acc is named explicitly. The shipped footer markup is the accordion
     variant (`class="afxft__col afxft__col--acc"`), and a first pass that
     only named the base classes left the columns at their fixed 213.2 —
     the footer box shrank correctly and its children still ran to 1405. */
  .afxft__nav, .afxft__nav--acc { width: auto; flex: 1 1 auto; min-width: 0; }
  .afxft__col, .afxft__col--acc { width: auto; flex: 1 1 0; min-width: 0; }
  .afxft__links, .afxft__link { min-width: 0; }
}

/* 705:78019 — SF Pro 510 / 14 / 14px / ls -1%, white at node opacity .4 */
.afxft__coltitle {
  margin: 0; font-size: 14px; line-height: 14px; font-weight: var(--w-medium);
  letter-spacing: -.14px; color: var(--af-white); opacity: .4;
}
/* 705:78020 — column, gap 8 */
.afxft__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* 705:78021 etc — SF Pro 510 / 16 / 24px, no tracking */
.afxft__link {
  display: inline-block;
  font-size: 16px; line-height: 24px; font-weight: var(--w-medium);
  color: var(--af-white); text-decoration: none;
  transition: opacity var(--t-fast) var(--e-out);
}

/* ---- 705:78045 — social row, 1360x60, row, gap 11 ------------------------ */
.afxft__social { display: flex; flex-direction: row; align-items: center; gap: 11px; }
/* 705:78046 etc — 331.8x60, radius 12, fill rgba(255,255,255,.05),
   BACKGROUND_BLUR 21.15 (Figma radius is 2x the CSS blur() value).
   No mix-blend-mode anywhere on these, so the backdrop-filter is safe. */
.afxft__soc {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  width: 331.8px; height: 60px; padding: 12px; border-radius: var(--r-12);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10.58px); -webkit-backdrop-filter: blur(10.58px);
  color: var(--af-white); text-decoration: none;
  transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out);
}
.afxft__soc img { width: 16px; height: 16px; display: block; flex: none; }
/* 705:78048 — SF Pro 590 / 12 / 15.84px / ls -1%, textCase UPPER */
.afxft__soc span {
  font-size: 12px; line-height: 15.84px; font-weight: var(--w-semi);
  letter-spacing: -.12px; text-transform: uppercase;
}

/* ---- 705:78060 — legal block, column, gap 32 ----------------------------- */
.afxft__legal { display: flex; flex-direction: column; gap: 32px; }
/* 705:78061 "Line 422" — 1360 wide, 1px #FFFFFF at node opacity .1 */
.afxft__rule { height: 1px; border: 0; margin: 0; background: var(--af-white); opacity: .1; }
/* 705:78062 — column, gap 32 */
.afxft__legalin { display: flex; flex-direction: column; gap: 32px; }
/* 705:78063 — SF Pro 400 / 14 / 18.48px, white at node opacity .5.
   Width 1409 in a 1360 column: see the header note. The four paragraphs are
   one TEXT node in Figma separated by blank lines, so the paragraph gap is
   exactly one line box (18.48px). */
.afxft__disclosure { width: 1409px; max-width: none; opacity: .5; }
.afxft__disclosure p {
  margin: 0 0 18.48px; font-size: 14px; line-height: 18.48px;
  font-weight: var(--w-regular); color: var(--af-white);
}
.afxft__disclosure p:last-child { margin-bottom: 0; }
@media (max-width: 1512px) { .afxft__disclosure { width: 100%; } }

/* 705:78064 — 1360x14, SPACE_BETWEEN */
.afxft__base {
  display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 80px;
}
/* 705:78065 — SF Pro 510 / 14 / 14px / ls -1%, node opacity .4 */
.afxft__copy {
  margin: 0; font-size: 14px; line-height: 14px; font-weight: var(--w-medium);
  letter-spacing: -.14px; color: var(--af-white); opacity: .4;
}
/* 705:78066 — row, gap 32; each item node opacity .8 */
.afxft__baselinks { display: flex; flex-direction: row; align-items: center; gap: 32px; }
.afxft__baselink {
  font-size: 14px; line-height: 14px; font-weight: var(--w-medium);
  letter-spacing: -.14px; color: var(--af-white); text-decoration: none; opacity: .8;
  transition: opacity var(--t-fast) var(--e-out);
}

/* ---- motion ------------------------------------------------------------
   Transform and opacity only, hover gated on a real pointer, reduced motion
   already neutralised globally in atlas-tokens.css.                        */
@media (hover: hover) and (pointer: fine) {
  .afxft__link:hover      { opacity: .6; }
  .afxft__baselink:hover  { opacity: 1; }
  .afxft__soc:hover       { background-color: var(--w-10); }
  .afxft__cta:hover       { box-shadow: 2px 14px 24px 0 rgba(38,63,66,.18); }
  .afxft__cta:hover .afxft__chev { transform: translateX(2px); }
}
.afxft__cta:active, .afxft__soc:active { transform: scale(.97); }

.afxft a:focus-visible {
  outline: 2px solid var(--af-lime); outline-offset: 3px; border-radius: 4px;
}
.afxft__cta:focus-visible { outline-offset: 4px; }

/* ---- narrow viewports ---------------------------------------------------
   The frame is only drawn at 1512. Below the design width the fixed columns
   are released so the footer still reads; nothing here changes the 1512
   rendering. */
@media (max-width: 1180px) {
  .afxft { padding: 40px 24px; gap: 48px; }
  .afxft__top { flex-direction: column; gap: 48px; }
  .afxft__brand, .afxft__nav { width: 100%; }
  .afxft__nav { flex-wrap: wrap; }
  .afxft__col { width: calc(50% - 16px); }
  .afxft__social { flex-wrap: wrap; }
  .afxft__soc { width: calc(50% - 6px); }
  .afxft__base { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* The file draws the footer wordmark the same way as the navbar: two stacked
   copies with the upper one COLOR_DODGE. Reproduced literally in CSS that
   dodges against the page and renders GREEN, not white. Sampling the reference
   gives a flat white mark, so force it white and stay backdrop-independent.
   Same fix as .afx-nav__logo img in atlas-chrome.css. */
.afxft__brandtop img:first-of-type { filter: brightness(0) invert(1); }

/* ---- 774:121833 — the Community frame's footer -------------------------
   Identical to 705:77988 in every respect except that it does not draw the
   brand column's "Get Funded" button, which makes the top row 161 instead of
   232 and the whole footer 803 instead of 874. That is the entire difference,
   so it is a modifier rather than a second footer.
   Used by fragments/comm-final.html. */
.afxft--nocta .afxft__cta { display: none; }

/* ============================================================================
   MOBILE — Figma 705:140672 "Frame 2147259284" (inside the mobile home frame
   705:78552), 377 x 1821 at x 8: padding 32/20, radius 32, gap 32.
   SHARED FILE: every rule below is inside @media (max-width:767px) and every
   selector is .afxft*, so no other page's desktop rendering can be reached.
   ========================================================================= */
@media (max-width: 767px) {
  /* 705:140672 — root column, gap 32 (the 1180 rule leaves it at 48, which
     pushed the social row, back-to-top and legal block 16 low). */
  .afxft { padding: 32px 20px; border-radius: var(--r-32); margin: 0 8px; gap: 32px; }
  .afxft__top { gap: 32px; }
  /* 705:140745 / 140751 — the copyright line and the Terms/Privacy/Cookies
     row are 32 apart, not the 24 the 1180 rule gives them. */
  .afxft__base { gap: 32px; }
  /* Tap targets — visual box as drawn, hit area grown with a pseudo-element. */
  .afxft__link, .afxft__baselink { position: relative; display: inline-block; }
  .afxft__link::before, .afxft__baselink::before {
    content: ''; position: absolute; left: -6px; right: -6px; top: -12px; bottom: -12px;
  }

  /* Three geometry misses carried over from the first mobile pass, all of
     them measured against 705:140672 while wiring the accordion below.
     705:140676 — the wordmark is 180x24 on mobile, not the 1512 213x28. */
  .afxft__mark { width: 180px; height: 24px; }
  /* 705:140674 — the badge row sits 24 under the strapline, not 32. The gap
     between the badges and Get Funded stays 32 (705:140673), so this is a
     margin on the one child rather than a changed column gap. */
  .afxft__badges { margin-top: -8px; }
  /* 705:140727 etc — the social tiles are 163x56 on mobile, not 60 tall.
     163 is what calc(50% - 6px) already gives on a 337 track. */
  .afxft__soc { height: 56px; }
}

/* The three elements the mobile accordion needs are OFF by default, so the
   1512 rendering of this footer — on every page that loads it — is exactly
   what it was. Only the @media (max-width:767px) block below turns them on. */
.afxft__acc, .afxft__accbtn, .afxft__totop { display: none; }

/* ============================================================================
   MOBILE, part 2 — the two things the first pass could not do in CSS alone:
   the link columns become accordion rows, and a "back to top" link appears.

   Both are ADDITIVE. The markup they need (a checkbox, a label and an anchor
   per fragments/footer.html) is display:none above 767px, so the 1512
   rendering of this footer is unchanged on every page — including the pages
   that still carry the PREVIOUS footer markup, because every rule below is
   either scoped to .afxft__col--acc / .afxft__acc / .afxft__totop (which
   those pages do not have) or is a sibling selector off .afxft__acc (which
   matches nothing when the checkbox is absent). A page with the old markup
   therefore renders below 767 exactly as it did: four titled link columns.

   There is no JavaScript. The disclosure is a checkbox + label, which is
   keyboard operable and needs no script; "back to top" is href="#top", the
   HTML spec's special fragment that scrolls to the top of the document when
   nothing has that id.
   ========================================================================= */
@media (max-width: 767px) {

  /* ---- 705:140701 — the nav becomes a 337-wide stack of rows on an 8 gap.
     337 = the frame's 377 less its 20px side padding, i.e. 100% here.
     --acc, NOT .afxft__nav: a page still carrying the previous footer markup
     has no modifier and keeps its 2-up wrapped grid, which is what it had
     before this change. */
  .afxft__nav--acc { flex-direction: column; flex-wrap: nowrap; gap: 8px; width: 100%; }
  .afxft__col--acc { width: 100%; gap: 0; }

  /* the 1512 heading is replaced by the row; only where a row exists */
  .afxft__acc ~ .afxft__coltitle { display: none; }

  /* The checkbox is the state. Visually hidden but still focusable, so the
     row is reachable by keyboard and the focus ring lands on the label. */
  .afxft__acc {
    display: block; position: absolute; width: 1px; height: 1px; margin: 0;
    padding: 0; border: 0; opacity: 0; pointer-events: none;
  }

  /* 705:140703 — 337x53, fill rgba(255,255,255,.05), radius 16, padding 16,
     SPACE_BETWEEN / CENTER. Title SF Pro 590 / 16 / 21.12 / ls -0.8. */
  .afxft__accbtn {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    gap: 16px; box-sizing: border-box; width: 100%; height: 53px; padding: 16px;
    border-radius: var(--r-16); background: rgba(255,255,255,.05);
    font-family: var(--font-sans); font-weight: var(--w-semi);
    font-size: 16px; line-height: 21.12px; letter-spacing: -.8px;
    color: var(--af-white); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out);
  }
  /* 705:140705 — 16x16 frame holding an 11.5x6.5 solid white caret. Drawn
     inline rather than exported: it is one path and the file has no export
     for it. It points down when closed and flips when open; the frame draws
     only the closed state, so the flip is the convention, not the node. */
  .afxft__accic { width: 16px; height: 16px; display: block; flex: none;
    color: var(--af-white); transition: transform var(--t-base) var(--e-out); }
  .afxft__acc:checked ~ .afxft__accbtn .afxft__accic { transform: rotate(180deg); }

  /* closed */
  .afxft__acc ~ .afxft__links { display: none; }
  /* 705:140707 — open panel, 337x96: padding 0 16, column, gap 12, links
     SF Pro 510 / 16 / 24. The frame puts 32 between the row and the panel
     (705:140702) and then 32 to the next row, where a closed pair is only 8
     apart (705:140711) — so the panel carries 32 above and 24 below, the 24
     plus the column's own 8 gap making the 32 below. */
  .afxft__acc:checked ~ .afxft__links {
    display: flex; gap: 12px; padding: 0 16px; margin: 32px 0 24px;
  }
  .afxft__acc:checked ~ .afxft__links .afxft__link { line-height: 24px; }

  /* focus ring on the row, driven by the hidden input */
  .afxft__acc:focus-visible ~ .afxft__accbtn {
    outline: 2px solid var(--af-lime); outline-offset: 3px;
  }

  /* ---- 705:140742 — "back to top", 105x16 (81 + 8 + 16), row, gap 8,
     centred. SF Pro 590 / 12 / 15.84 / ls -0.12, textCase UPPER.
     The frame puts 60 above and below it (705:140724) and the root gap is
     32, so the element carries the remaining 28 each side. */
  .afxft__totop {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 8px; align-self: center; width: 105px; height: 16px; margin: 28px 0;
    position: relative;
    font-family: var(--font-sans); font-weight: var(--w-semi);
    font-size: 12px; line-height: 15.84px; letter-spacing: -.12px;
    text-transform: uppercase; color: var(--af-white); text-decoration: none;
    transition: opacity var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out);
  }
  /* 705:140744 — vuesax/linear/arrow-up, 16x16, stroked. Inlined: no export. */
  .afxft__totop svg { width: 16px; height: 16px; display: block; flex: none; color: var(--af-white); }
  /* 16 tall is far under the 44 minimum and it has 48px of clearance
     either side, so the hit area is grown to 44 with a pseudo-element. */
  .afxft__totop::before {
    content: ''; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px;
  }

  .afxft__accbtn:active, .afxft__totop:active { transform: scale(.98); }
  .afxft__totop:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 4px; }
}
/* Hover gated on a real pointer, or it sticks after a tap. */
@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
  .afxft__accbtn:hover { background-color: var(--w-10); }
  .afxft__totop:hover  { opacity: .7; }
}