/* ============================================================
   SITE FOOTER — shared
   ------------------------------------------------------------
   The homepage footer, lifted out so every page carries the same
   one. Two rules govern this file:

   1. Everything is scoped under `.site-footer`. That is not
      tidiness — each page still has its own inline <style> with
      leftover `footer`, `.footer-disc`, `.footer-cols` rules from
      the three footers this replaces. A bare `.footer-disc` here
      would tie with theirs and lose on load order, since this
      sheet is linked before the inline block. `.site-footer
      .footer-disc` outranks both, so nothing had to be deleted
      from fifteen files to make this land.

   2. It defines its own tokens. The pages disagree about which
      custom properties exist — four have no --font, five no
      --accent-light, every page but the homepage no --accent-deep
      — so a footer built on theirs would render unstyled where
      they are missing. The values below are the homepage's.
   ============================================================ */

.site-footer {
  --f-bg:           #FEFBFE;
  --f-dark:         #2B0C25;
  --f-accent:       #982782;
  --f-accent-deep:  #7A1C65;
  --f-accent-light: #F5E8F5;
  --f-white:        #FFFFFF;
  --f-font:         'Poppins', system-ui, -apple-system, sans-serif;
  --f-max-w:        1280px;
  --f-px:           2.5rem;

  background: var(--f-bg);
  border-top: 1px solid rgba(0,0,0,0.04);
  padding: 3.5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
  font-family: var(--f-font);
}

.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.site-footer a { text-decoration: none; }
.site-footer ul { margin: 0; padding: 0; }

/* Inheritance loses to any direct rule, so a page-level `h2 { font-family:
   var(--serif) }` beats the family inherited from .site-footer above and the
   signup headline comes out serif — which is exactly what quiz.html did, and
   what contact.html's `input, textarea, select` did to the email field. Naming
   the elements here puts this at (0,1,1), above both. */
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer p, .site-footer a, .site-footer li, .site-footer span,
.site-footer div, .site-footer input, .site-footer button {
  font-family: var(--f-font);
}

/* The footer's own container. It does not borrow the page's
   `.container`, because --max-w and --px are not the same on
   every page and the footer should not change width from one to
   the next. */
.site-footer .footer-inner {
  position: relative;
  z-index: 1;
  max-width: var(--f-max-w);
  margin: 0 auto;
  padding: 0 var(--f-px);
}

.site-footer .footer-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.site-footer .footer-blob-br {
  width: 680px; height: 680px; bottom: -120px; right: -140px;
  background: radial-gradient(circle, rgba(255,176,195,0.35) 0%, rgba(255,176,195,0) 65%);
}
.site-footer .footer-blob-ml {
  width: 439px; height: 439px; top: 50%; left: -130px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(179,115,172,0.25) 0%, rgba(179,115,172,0) 65%);
}

.site-footer .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 3.5rem;
  margin-bottom: 2.5rem;
}

/* Left rail: logo stacked over the link grid, beside the signup */
.site-footer .footer-brand {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}
.site-footer .footer-logo-img { height: auto; width: 180px; display: block; }
.site-footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
  padding: 1.2rem 0 1.7rem;
}
.site-footer .footer-col-head {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 15.3px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  margin-bottom: 0.9rem;
}
.site-footer .footer-col-links { list-style: none; display: flex; flex-direction: column; gap: 7.2px; }
.site-footer .footer-col-links a { font-size: 18px; font-weight: 500; color: rgba(0,0,0,0.58); transition: color 0.2s; }
.site-footer .footer-col-links a:hover { color: var(--f-accent); }

.site-footer .footer-disc {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.04);
  font-size: 11px;
  font-weight: 400;
  color: rgba(0,0,0,0.5);
  line-height: 1.7;
  margin: 0;
}

/* ── Right rail: signup over the product CTA ──────────────── */
.site-footer .footer-right {
  width: 540px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.site-footer .footer-signup {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.site-footer .signup-head { display: flex; flex-direction: column; gap: 1.25rem; }
.site-footer .signup-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.167em;
  text-transform: uppercase;
  color: #ad7ca3;
  line-height: 1.42;
}
.site-footer .signup-hed {
  font-size: clamp(2rem, 4.5vw, 3.375rem);
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--f-dark);
  line-height: 0.68;
  white-space: nowrap;
  margin: 0;
}
.site-footer .signup-sub {
  font-size: 1.375rem;
  font-weight: 300;
  color: rgba(0,0,0,0.58);
  line-height: 1.27;
  margin: 0;
}
.site-footer .email-form { position: relative; height: 52px; }
.site-footer .email-form input {
  position: absolute;
  inset: 0;
  width: 100%;
  font-family: var(--f-font);
  font-size: 14px;
  font-weight: 300;
  color: var(--f-dark);
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 100px;
  padding: 0 140px 0 1.4rem;
  outline: none;
  transition: border-color 0.2s;
}
.site-footer .email-form input::placeholder { color: rgba(0,0,0,0.5); }
.site-footer .email-form input:focus { border-color: #982782; }
.site-footer .email-form button {
  position: absolute;
  right: 0; top: 0;
  height: 100%;
  font-family: var(--f-font);
  font-size: 13px;
  font-weight: 500;
  padding: 0 1.5rem;
  border-radius: 100px;
  background: #982782;
  color: var(--f-white);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.site-footer .email-form button:hover { background: #7a1f69; }
.site-footer .signup-note { font-size: 12px; font-weight: 300; color: #ad7ca3; margin: 0; text-align: center; }

.site-footer .footer-promo {
  display: flex;
  align-items: stretch;
  gap: 1.35rem;
  background: var(--f-accent-light);
  border-radius: 16px;
  overflow: hidden;
  padding-right: 1.5rem;
}
.site-footer .footer-promo-img {
  width: 108px;
  flex-shrink: 0;
  align-self: stretch;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.site-footer .footer-promo-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.35rem 0;
}
.site-footer .footer-promo-hed {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--f-dark);
  margin: 0;
}
.site-footer .footer-promo-sub {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(0,0,0,0.58);
  margin: 0;
}

/* The promo CTA carries its own button. Ten of the fifteen pages
   have no .btn-primary of their own to inherit. */
.site-footer .footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding: 0.8rem 1.8rem;
  font-family: var(--f-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 100px;
  background: var(--f-accent);
  color: var(--f-white);
  cursor: pointer;
  transition: background 0.2s;
}
.site-footer .footer-cta:hover { background: var(--f-accent-deep); }

/* ── Clinical references (homepage only) ──────────────────── */
.site-footer .references-heading {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ad7ca3;
  margin-top: 1.2rem;
  margin-bottom: 0.8rem;
}
.site-footer .references {
  list-style: none;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(0,0,0,0.14);
  counter-reset: ref;
}
.site-footer .references li {
  counter-increment: ref;
  position: relative;
  padding-left: 2.4rem;
  font-size: 12px;
  font-weight: 300;
  color: rgba(0,0,0,0.62);
  line-height: 1.667;
  margin-bottom: 0.4rem;
}
.site-footer .references li::before {
  content: '[' counter(ref) ']';
  position: absolute;
  left: 0;
  color: rgba(0,0,0,0.45);
  font-size: 11px;
  font-weight: 500;
}
/* Brand pink on #FEFBFE = 6.94:1 — clears AA for body text */
.site-footer .references li a { color: var(--f-accent); text-decoration: underline; text-underline-offset: 2px; }
.site-footer .references li a:hover { color: var(--f-accent-deep); }

/* ── Reveal ───────────────────────────────────────────────────
   Gated on .js-reveal, which footer.js adds. Five of the pages
   have no reveal observer of their own, so an ungated
   `opacity: 0` would leave the footer permanently invisible
   there the moment anything went wrong with the script. */
.site-footer.js-reveal .reveal {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(16px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              filter 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
  transition-delay: 0.12s;
}
.site-footer.js-reveal .reveal.d1 { transition-delay: 0.24s; }
.site-footer.js-reveal .reveal.d2 { transition-delay: 0.36s; }
.site-footer.js-reveal .reveal.visible {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .site-footer.js-reveal .reveal { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-footer .footer-top { flex-direction: column; gap: 3rem; }
  .site-footer .footer-right { width: 100%; }
  .site-footer .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  /* base line-height is 0.68 for the single-line desktop lockup;
     once this wraps on narrow screens the lines would collide */
  .site-footer .signup-hed { white-space: normal; line-height: 1.05; }
}
@media (max-width: 480px) {
  .site-footer { --f-px: 1rem; }
  .site-footer .footer-promo { gap: 1rem; padding-right: 1.1rem; }
  .site-footer .footer-promo-img { width: 88px; }
  .site-footer .footer-promo-body { padding: 1.1rem 0; }
  .site-footer .footer-promo-hed { font-size: 16px; }
  .site-footer .footer-promo-sub { font-size: 12.5px; }
}