/* ==========================================================================
   AUTHIFY HUB — Public footer (pricing / cart / checkout pages)
   Ported 1:1 from theauthify.com's footer-cta.css, using Hub's own token
   names (--ink-*, --paper, --white in place of --color-text-*, --color-bg-*).
   ========================================================================== */

.pf-footer{
  border-top: 1px solid var(--ink-100);
  padding-block: var(--space-lg) var(--space-md);
  background: var(--white);
  margin-top: var(--space-lg);
}
.pf-container{
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.pf-top{
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
}
.pf-brand{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); max-width: 340px; }
.pf-brand img{ height: 24px; width: auto; }
.pf-brand p{ font-size: 0.75rem; line-height: 1.6; color: var(--ink-500); }

.pf-cols{
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: var(--space-md) var(--space-sm);
  flex: 1 1 700px;
  max-width: 900px;
}
.pf-col h5{ font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); margin-bottom: var(--space-sm); font-weight: 600; }
.pf-col a{ display: block; font-size: 0.75rem; color: var(--ink-700); padding-block: 0.3rem; text-decoration: none; transition: color var(--dur-fast) var(--ease-smooth); }
.pf-col a:hover{ color: var(--gold-500); }

.pf-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-100);
  font-size: 0.75rem;
  color: var(--ink-500);
}
.pf-legal{ display: flex; gap: var(--space-sm); }
.pf-parent{ color: var(--ink-500); text-decoration: none; }
.pf-parent:hover{ color: var(--gold-500); }
.pf-parent strong{ font-weight: 600; color: var(--ink-700); }
.pf-parent:hover strong{ color: var(--gold-500); }

@media (max-width: 720px){
  .pf-top{ flex-direction: column; }
  .pf-cols{ grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-md); max-width: none; }
}
@media (max-width: 420px){
  .pf-cols{ grid-template-columns: repeat(2, 1fr); }
}