/* Blockify Affiliate Program page — scoped enhancements.
   The section markup carries its own inline styles (from the cut design), so this
   file only holds the bits that can't live inline: FAQ accordion, CTA hover glow,
   reveal-on-scroll, and the responsive column collapses. Everything is scoped
   under .affiliate-page so it never leaks into the rest of the site. */

.affiliate-page { position: relative; overflow-x: hidden; }

/* Faint vertical grid overlay behind every section (matches the design canvas). */
.affiliate-page > .aff-grid {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.030) 0 1px, transparent 1px 60px);
  pointer-events: none;
  z-index: 0;
}
.affiliate-page > section { position: relative; z-index: 1; }

/* FAQ accordion (native <details>). */
.affiliate-page details > summary { list-style: none; cursor: pointer; }
.affiliate-page details > summary::-webkit-details-marker { display: none; }
.affiliate-page details[open] .faq-plus { transform: rotate(45deg); }

/* CTA hover glow. */
.affiliate-page .aff-cta:hover {
  box-shadow: 0 0 0 1px rgba(255, 89, 44, 0.25), 0 12px 40px -10px rgba(255, 89, 44, 0.45) !important;
  color: rgb(255, 255, 255) !important;
}

/* App name → redirect link. */
.affiliate-page .aff-app-name a { color: inherit; text-decoration: none; transition: color 150ms ease; }
.affiliate-page .aff-app-name a:hover { color: rgb(255, 89, 44); }

/* Reveal-on-scroll (progressive enhancement — see affiliate.js). */
.affiliate-page [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.affiliate-page [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .affiliate-page [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Responsive: collapse the two-column sections. */
@media (max-width: 1024px) {
  .affiliate-page section > div[style*="grid-template-columns:minmax"] { grid-template-columns: 1fr !important; }
  .affiliate-page section > div > div[style*="position:sticky"] { position: static !important; }
}

/* Rewards grid is a fixed 3-col; collapse it for smaller screens. */
@media (max-width: 980px) {
  .affiliate-page div[style*="grid-template-columns:repeat(3,minmax"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 720px) {
  .affiliate-page section > div[style*="repeat(4,minmax"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  /* Each Rewards card full-width on mobile (one per row). */
  .affiliate-page div[style*="grid-template-columns:repeat(3,minmax"] { grid-template-columns: 1fr !important; }
}