/* Site footer — approved design A (PRP Labs Footer canvas, 2026-09-12).
   Built for a 40+ reader: links 16px, nothing under 14px, every text colour at
   or above 4.5:1. All type comes from the theme tokens, so it follows the site
   typeface (Atkinson Hyperlegible) rather than naming a font here.

   prototype.css styles the BARE `footer` element (twice: padding, .82rem type,
   line-height 1.75) plus .fgrid/.fbadge/.disc/.fbot. The new markup uses pf-*
   classes so none of those old rules reach it, and the element-level ones are
   reset below. */

footer.site-footer {
  position: relative;
  padding: 0;
  background: #F4F7FA;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
.site-footer p, .site-footer ul { margin: 0; padding: 0; }
.site-footer ul { list-style: none; }

.pf-trim {
  height: 2px;
  background: linear-gradient(90deg, rgba(54, 213, 255, 0) 0%, var(--neon) 22%, var(--accent) 50%, var(--neon) 78%, rgba(54, 213, 255, 0) 100%);
  box-shadow: 0 0 14px 1px rgba(54, 213, 255, .45);
}

.pf-wrap { display: flex; flex-direction: column; gap: 52px;
  padding-block: clamp(48px, 6vw, 68px) 32px; }

/* ---------------------------------------------------------------- columns */
.pf-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 48px; }

.pf-brand { display: flex; flex-direction: column; gap: 20px; padding-right: 24px; min-width: 0; }
.pf-logo { display: flex; width: max-content; }
.site-footer .pf-logo img { display: block; width: 132px; height: auto; max-width: 100%; }
.pf-tag { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }

.pf-badges { display: flex; flex-wrap: wrap; gap: 9px; }
.pf-badges li { display: flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px;
  background: #fff; border: 1px solid #D9E2F0; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(4, 25, 58, .05);
  font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.pf-badges svg { flex: none; color: var(--accent); }

.pf-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.site-footer .pf-h { margin: 0 0 2px; font-family: var(--sans); font-size: 16px; font-weight: 700;
  line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pf-col ul { display: flex; flex-direction: column; gap: 12px; }
.site-footer .pf-col a { display: inline-block; padding: 2px 0; font-size: 16px; line-height: 1.4;
  color: var(--ink-2); text-decoration: none; border-radius: 4px; }
.site-footer .pf-col a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .pf-col a:focus-visible,
.site-footer .pf-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------- disclaimer */
.pf-disc { display: flex; gap: 18px; align-items: flex-start; padding: 22px 26px;
  background: #fff; border: 1px solid #D9E2F0; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(4, 25, 58, .05), 0 14px 34px -26px rgba(4, 25, 58, .28); }
.pf-disc-i { flex: none; width: 44px; height: 44px; border-radius: 11px; background: var(--accent-soft);
  color: var(--accent); display: flex; align-items: center; justify-content: center; }
.pf-disc-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-disc-h { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.pf-disc-b { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 1040px; text-wrap: pretty; }

/* ------------------------------------------------------------- bottom bar */
/* The fixed "Questions?" button sits bottom-right over the page; the right
   padding keeps this line clear of it instead of letting it hide half the text. */
.pf-bot { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 190px 0 0; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
  .pf-brand { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 640px) {
  .pf-wrap { gap: 36px; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .pf-col--wide { grid-column: 1 / -1; }
  .pf-col a { font-size: 16px; }
  .pf-disc { padding: 18px; }
  .pf-disc-i { display: none; }
  .pf-bot { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 0 72px; }
}