/* ==========================================================================
   Activ.ie — Homepage styles (scoped conceptually under .activ-home)
   2026-07 visual-refresh pass, content-integration pass, and V3 correction
   pass: editorial hierarchy, gradient backgrounds, varied bento composition,
   icon system, carousel + mobile fixes, real assets, header/hero corrections.
   ========================================================================== */

.activ-h2-block {
  font-size: var(--text-h2);
  margin-bottom: var(--space-8);
  max-width: 20ch;
}
.activ-section-head .activ-h2-block { margin-bottom: 0; }
.activ-draft-note {
  font-size: var(--text-small);
  color: rgba(33,26,38,0.5);
  font-style: italic;
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
}

/* -------------------------------------------------------------------------
   Header — homepage-only corrections (scoped to .activ-header--home so
   Research & Insights, which shares the same base .activ-header rules in
   components.css, is completely unaffected).
   ------------------------------------------------------------------------- */
.activ-header--home .activ-header__bar {
  max-width: 1320px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--space-8);
}
.activ-header--home .activ-header__logo { justify-self: start; }
.activ-header--home .activ-header__nav {
  justify-self: center;
  width: 100%;
  justify-content: center;
}
.activ-header--home .activ-header__nav-list {
  gap: 22px;
  list-style: none;
  margin: 0;
}
.activ-header--home .activ-header__nav-list li {
  list-style: none;
  margin: 0;
}
.activ-header--home .activ-header__nav-list li::marker { content: none; }
.activ-header--home .activ-header__nav-list a {
  white-space: nowrap;
  padding-inline: var(--space-2);
}
.activ-header--home .activ-header__actions { justify-self: end; }

@media (max-width: 1180px) {
  .activ-header--home .activ-header__nav-list { display: none; }
  .activ-header--home .activ-header__menu-toggle { display: flex; }
  .activ-header--home .activ-header__actions .activ-btn--secondary { display: none; }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.activ-home-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-16);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(203,108,230,0.14), transparent 46%),
    radial-gradient(circle at 88% 12%, rgba(131,207,192,0.16), transparent 50%),
    radial-gradient(circle at 78% 88%, rgba(226,134,216,0.12), transparent 48%),
    linear-gradient(180deg, #FBF9FC 0%, #F7F4FA 100%);
}
.activ-home-hero__shape {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--soft-lilac), var(--pale-green) 70%, transparent 100%);
  opacity: 0.6;
  filter: blur(4px);
  pointer-events: none;
}
.activ-home-hero__shape--2 {
  top: auto;
  right: auto;
  bottom: -18%;
  left: -10%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at 60% 40%, var(--activ-pink-accent), var(--pale-mint) 70%, transparent 100%);
  opacity: 0.3;
  filter: blur(4px);
}
.activ-home-hero__inner {
  display: grid;
  grid-template-columns: 43fr 57fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
  padding-block: var(--space-16);
}
.activ-home-hero__copy { max-width: 560px; }
.activ-home-hero__headline {
  font-size: var(--text-display);
  margin-block: var(--space-6) var(--space-6);
}
.activ-home-hero__headline-accent {
  color: var(--activ-purple); /* solid #CB6CE6 fallback, per brief, for browsers without background-clip:text support */
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .activ-home-hero__headline-accent {
    background-image: var(--gradient-headline);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.activ-home-hero__sub { margin-bottom: var(--space-8); max-width: 46ch; }
.activ-home-hero__ctas { display: flex; gap: var(--space-4); margin-bottom: var(--space-12); }
.activ-home-hero__trust { flex-wrap: wrap; }

/* Homepage-scoped button variants — kept out of the shared components.css
   stylesheet on purpose, so Research & Insights / Members (which also use
   the base .activ-btn/.activ-btn--secondary classes) are never affected. */
.activ-btn--outline-purple {
  background: var(--white);
  color: var(--activ-purple-deep);
  border-color: var(--activ-purple);
}
@media (hover: hover) and (pointer: fine) {
  .activ-btn--outline-purple:hover {
    background: var(--white);
    color: var(--activ-purple-deep);
    border-color: var(--activ-purple-deep);
  }
}

/* "Explore nutrition tools" hover inversion — scoped specifically to the
   hero CTA row (not the shared .activ-btn--outline-purple class itself)
   so the "Discover all brands" button, which reuses that same class in the
   rewards section, is completely unaffected and keeps its approved V6
   hover behaviour untouched. !important on colour explicitly defeats any
   inherited theme/Gecko anchor-hover rule once this runs on the real site. */
@media (hover: hover) and (pointer: fine) {
  .activ-home-hero__ctas .activ-btn--outline-purple:hover {
    background: #CB6CE6;
    border-color: #CB6CE6;
  }
  .activ-home-hero__ctas .activ-btn--outline-purple:hover,
  .activ-home-hero__ctas .activ-btn--outline-purple:hover span,
  .activ-home-hero__ctas .activ-btn--outline-purple:hover svg {
    color: #FFFFFF !important;
  }
}
.activ-home-hero__ctas .activ-btn--outline-purple:focus-visible {
  outline: 2px solid var(--activ-purple);
  outline-offset: 3px;
}

/* "Join Activ.ie" (and any other .activ-btn--reward instance on the
   homepage, e.g. the Explore Research & Insights button) — text must stay
   pure white in every state, explicitly overriding both the shared
   component's own hover rule and any inherited Gecko/theme anchor-hover
   colour rule once this runs on the real staging site. Contrast note: the
   shared --activ-green resting fill already sits at ~4.12:1 against white
   (the practical ceiling for this hue at AA-adjacent contrast) — any
   brighter hover fill measurably drops below that, so the hover fill is
   kept identical to the resting fill and the "pop" is delivered entirely
   through the lift/scale/shadow transform instead of a colour shift. This
   was a deliberate call; see homepage-v7-corrections-report.md. */
.activ-btn--reward,
.activ-btn--reward:hover,
.activ-btn--reward:focus-visible,
.activ-btn--reward:active,
.activ-btn--reward span,
.activ-btn--reward svg,
.activ-btn--reward:hover span,
.activ-btn--reward:hover svg,
.activ-btn--reward:focus-visible span,
.activ-btn--reward:focus-visible svg {
  color: #FFFFFF !important;
}
@media (hover: hover) and (pointer: fine) {
  .activ-btn--reward:hover {
    background: var(--activ-green);
  }
}
.activ-btn--reward:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(30,143,78,0.45);
}

/* "Pop" hover: upward lift + scale + stronger shadow, never a plain colour
   darkening. Reduced-motion keeps the colour/border feedback but drops the
   transform, per the shared reduced-motion convention used sitewide. */
.activ-btn--pop {
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .activ-btn--pop:hover {
    transform: translateY(-3px) scale(1.035);
    box-shadow: var(--shadow-2);
  }
  .activ-btn--pop:hover .activ-arrow-glyph { transform: translateX(3px); }
}
.activ-btn--pop:active { transform: translateY(0) scale(0.97); }
.activ-btn--pop:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .activ-btn--pop:hover { transform: none; }
}

.activ-home-hero__media { display: flex; flex-direction: column; }
.activ-home-hero__visual { position: relative; }
.activ-home-hero__media-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 40%, rgba(203,108,230,0.22), transparent 65%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.activ-home-hero__media-frame {
  position: absolute;
  inset: 14px -14px -14px 14px;
  border-radius: var(--radius-xl);
  background: var(--gradient-headline);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}
.activ-home-hero__photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.activ-home-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% 40%;
}
.activ-home-hero__orbit {
  position: absolute;
  top: -9%;
  right: -9%;
  width: 130px;
  height: 130px;
  z-index: 2;
  opacity: 0.55;
  pointer-events: none;
}
.activ-home-hero__app-mockup {
  position: absolute;
  left: -20px;
  bottom: -32px;
  width: 250px;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 24px 40px rgba(33,26,38,0.26));
  pointer-events: none;
}

/* Social buttons directly beneath the hero visual card — centred as a
   group under the image/phone composition at every breakpoint. */
.activ-home-hero__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  position: relative;
  z-index: 1;
}
.activ-social-btn {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 1.5px solid var(--activ-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--activ-purple-deep);
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.activ-social-btn svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) {
  .activ-social-btn:hover {
    background: var(--activ-purple);
    color: var(--white);
    border-color: var(--activ-purple);
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-2);
  }
}
.activ-social-btn:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .activ-social-btn:hover { transform: none; }
}

@media (max-width: 1023px) {
  .activ-home-hero { min-height: 75vh; }
  .activ-home-hero__inner { gap: var(--space-12); }
}
@media (max-width: 834px) {
  /* Boss-requested mobile/tablet order: image + phone composition first,
     then the social row (already nested directly under the visual, so it
     naturally follows), then headline/paragraph/buttons/pills. Achieved
     purely by flipping which flex item comes first — no markup duplication,
     no second mobile-only hero. */
  .activ-home-hero__inner { grid-template-columns: 1fr; padding-block: var(--space-12); }
  .activ-home-hero__copy { max-width: none; order: 2; }
  .activ-home-hero__media { order: 1; margin-bottom: var(--space-8); }
  .activ-home-hero__shape { width: 420px; height: 420px; }
  .activ-home-hero__shape--2 { display: none; }
  .activ-home-hero__orbit { display: none; }
  .activ-home-hero__app-mockup { width: 180px; left: 12px; bottom: -20px; }
}
@media (max-width: 480px) {
  .activ-home-hero { min-height: auto; padding-top: var(--space-8); }
  .activ-home-hero__inner { padding-block: var(--space-8) var(--space-6); gap: var(--space-8); }
  .activ-home-hero__headline { margin-block: var(--space-4); }
  .activ-home-hero__ctas { flex-direction: column; margin-bottom: var(--space-8); }
  .activ-home-hero__shape { display: none; }
  .activ-home-hero__media-frame { inset: 8px -8px -8px 8px; }
  .activ-home-hero__app-mockup { width: 145px; left: 8px; bottom: -14px; }
  .activ-home-hero__socials { margin-top: var(--space-16); }
}
@media (max-width: 767px) {
  .activ-home-hero__shape { filter: blur(2px); }
}

/* -------------------------------------------------------------------------
   Marquee — full-width strip between Hero and How It Works
   ------------------------------------------------------------------------- */
.activ-marquee {
  background: linear-gradient(90deg, var(--charcoal), var(--activ-purple-ink));
  overflow: hidden;
  white-space: nowrap;
  height: 56px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.activ-marquee__track {
  display: inline-flex;
  align-items: center;
  /* Fallback for the brief window before JS measures (or if JS fails) —
     close enough to avoid a visible jump on first paint; homepage.js
     overwrites this with the group's real measured pixel width. */
  --activ-marquee-group-width: 50%;
  animation: activ-marquee-scroll 28s linear infinite;
  will-change: transform;
}
.activ-marquee__group {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-inline-end: 22px;
}
.activ-marquee__text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.3px;
}
.activ-marquee__dot { font-size: 10px; color: var(--activ-mint); }
@keyframes activ-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--activ-marquee-group-width)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .activ-marquee__track { animation: none; }
}
@media (max-width: 767px) {
  .activ-marquee { height: 46px; }
  .activ-marquee__text { font-size: 15px; }
}
@media (max-width: 390px) {
  .activ-marquee__text { font-size: 13px; }
  .activ-marquee__group { gap: 16px; padding-inline-end: 16px; }
}

/* -------------------------------------------------------------------------
   How it works
   ------------------------------------------------------------------------- */
.activ-steps-section { background: var(--white); }
.activ-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .activ-steps::before {
    content: "";
    position: absolute;
    top: 68px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(154,63,184,0.25) 20%, rgba(154,63,184,0.25) 80%, transparent);
    z-index: 0;
  }
}
.activ-steps__card {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.activ-steps__card--lead { padding: var(--space-8); }
.activ-steps__card .activ-icon-chip { margin-bottom: var(--space-4); }
.activ-steps__index {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 700;
  color: var(--activ-purple-deep); /* solid fallback */
  margin-bottom: var(--space-3);
  line-height: 1;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .activ-steps__index {
    background-image: linear-gradient(135deg, var(--activ-lilac-deep), var(--activ-pink-accent));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.activ-steps__card--lead .activ-icon-chip { background: rgba(255,255,255,0.6); }

@media (max-width: 1023px) {
  .activ-steps { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 767px) {
  .activ-steps { grid-template-columns: 1fr; }
  /* Mobile order follows DOM order: Join, Track, Earn — no reordering. */
}

/* -------------------------------------------------------------------------
   Bento — movement, wellbeing, rewards
   ------------------------------------------------------------------------- */
.activ-bento-section {
  background: linear-gradient(180deg, var(--warm-neutral) 0%, var(--off-white) 100%);
}
.activ-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "activity wellbeing community community"
    "activity metric metric rewardmini";
  gap: var(--space-6);
}
.activ-bento__item--activity { grid-area: activity; }
.activ-bento__item--wellbeing { grid-area: wellbeing; }
.activ-bento__item--community { grid-area: community; }
.activ-bento__item--metric { grid-area: metric; }
.activ-bento__item--rewardmini { grid-area: rewardmini; }

.activ-bento .activ-photo-card__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
.activ-bento__item--wellbeing,
.activ-bento__item--metric,
.activ-bento__item--rewardmini {
  display: flex;
  flex-direction: column;
}

.activ-bento__illustration {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 30% 30%, var(--pale-mint), var(--pale-green) 85%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--activ-mint-deep);
  margin-bottom: var(--space-4);
}
.activ-bento__illustration svg { width: 28px; height: 28px; }

.activ-mini-tracker { display: flex; gap: var(--space-2); margin-block: var(--space-3) var(--space-4); }
.activ-mini-tracker span {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small);
  font-weight: 600;
  background: var(--warm-neutral);
  color: rgba(33,26,38,0.4);
}
.activ-mini-tracker span.is-done { background: var(--activ-purple); color: var(--white); }

@media (max-width: 1023px) {
  .activ-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "activity activity"
      "community community"
      "wellbeing wellbeing"
      "metric rewardmini";
  }
  .activ-bento .activ-photo-card__media { min-height: 260px; }
}
@media (max-width: 767px) {
  .activ-bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "activity"
      "community"
      "wellbeing"
      "metric"
      "rewardmini";
  }
}

/* -------------------------------------------------------------------------
   Wearables — replaces the former Groups & Challenges homepage section
   ------------------------------------------------------------------------- */
.activ-wearables-section { position: relative; overflow: clip; background: var(--off-white); }
.activ-wearables-section::before {
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  width: 560px;
  height: 560px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(131,207,192,0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.activ-wearables {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-16);
  align-items: center;
}
.activ-wearables__accent { color: var(--activ-purple-deep); }
.activ-wearables__pills { margin-top: var(--space-6); }
.activ-wearables__pills .activ-pill__icon { color: var(--activ-mint-deep); }

.activ-wearables__visual { position: relative; }
.activ-wearables__glow {
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle at 50% 45%, rgba(203,108,230,0.22), rgba(131,207,192,0.14) 55%, transparent 75%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.activ-wearables__visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}
.activ-wearables__sync-card {
  position: absolute;
  top: var(--space-6);
  right: var(--space-4);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--space-3) var(--space-4);
  max-width: 220px;
}
.activ-wearables__sync-card strong { display: block; font-size: var(--text-small); font-family: var(--font-display); }
.activ-wearables__sync-card span { font-size: 0.75rem; color: rgba(33,26,38,0.6); }

@media (max-width: 1023px) {
  .activ-wearables { grid-template-columns: 1fr; gap: var(--space-10, var(--space-8)); }
  .activ-wearables__visual { order: 2; max-width: 480px; margin-inline: auto; }
  .activ-wearables__copy { order: 1; }
}
@media (max-width: 480px) {
  .activ-wearables__sync-card { max-width: 170px; padding: var(--space-2) var(--space-3); }
}

/* -------------------------------------------------------------------------
   Video showcase (real supplied video)
   ------------------------------------------------------------------------- */
.activ-video-section { background: linear-gradient(180deg, var(--white) 0%, var(--warm-neutral) 100%); }
.activ-video-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-3);
  background: var(--charcoal);
}
.activ-video-frame__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.activ-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 45%);
  pointer-events: none;
  z-index: 1;
}
.activ-video-frame__caption {
  position: absolute;
  left: var(--space-8);
  bottom: var(--space-8);
  z-index: 2;
  color: var(--white);
  max-width: 42ch;
}
.activ-video-frame__caption .activ-eyebrow { color: rgba(255,255,255,0.85); }
.activ-video-frame__caption .activ-h2-block { color: var(--white); margin-bottom: 0; }
.activ-video-frame__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.9);
  color: var(--activ-purple-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-2);
  transition: background-color var(--dur-hover) ease, transform var(--dur-hover) ease, opacity var(--dur-hover) ease;
}
.activ-video-frame__play svg { width: 26px; height: 26px; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) {
  .activ-video-frame__play:hover { background: var(--white); transform: translate(-50%, -50%) scale(1.06); }
}
.activ-video-frame.is-playing .activ-video-frame__play { opacity: 0; pointer-events: none; }
/* Keep the control reachable while playing: hidden by default (no controls
   during successful autoplay), but restored on hover/focus so a visitor can
   still pause — otherwise a manually-started (e.g. reduced-motion fallback)
   video could never be paused again once playback begins. */
.activ-video-frame.is-playing:hover .activ-video-frame__play,
.activ-video-frame.is-playing:focus-within .activ-video-frame__play {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 767px) {
  .activ-video-frame__caption { left: var(--space-4); bottom: var(--space-4); max-width: 26ch; }
  .activ-video-frame__play { width: 52px; height: 52px; }
}

/* -------------------------------------------------------------------------
   Research teaser
   ------------------------------------------------------------------------- */
.activ-research-teaser {
  background: linear-gradient(160deg, var(--muted-blue) 0%, var(--soft-lilac) 100%);
}

/* Centred intro — eyebrow/heading/paragraph/CTA, no narrow left column. */
.activ-research-teaser__intro {
  max-width: 850px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
  text-align: center;
}
.activ-research-teaser__intro .activ-eyebrow { justify-content: center; }
.activ-research-teaser__intro .activ-h2-block {
  max-width: 850px;
  margin-inline: auto;
  margin-block: var(--space-4);
}
.activ-research-teaser__intro .activ-lede {
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

/* Balanced card grid underneath — one row of 3 on desktop, 2+1 on tablet,
   stacked on mobile. Static grid (no carousel mechanic). */
.activ-research-teaser__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: 1080px;
  margin-inline: auto;
}
.activ-insight-card { min-height: 200px; display: flex; flex-direction: column; }

@media (max-width: 1023px) {
  .activ-research-teaser__cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .activ-research-teaser__cards .activ-insight-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - (var(--space-6) / 2));
    margin-inline: auto;
  }
}
@media (max-width: 767px) {
  .activ-research-teaser__cards { grid-template-columns: 1fr; max-width: 420px; }
  .activ-research-teaser__cards .activ-insight-card:nth-child(3) { max-width: none; }
}

/* -------------------------------------------------------------------------
   Research & Partners (real institution logos)
   ------------------------------------------------------------------------- */
.activ-partners-section { background: var(--white); text-align: center; }
.activ-partners__heading { max-width: 22ch; margin-inline: auto; }
.activ-partners__heading-accent { display: block; color: var(--activ-purple-deep); }
.activ-partners__intro { max-width: 56ch; margin-inline: auto; }
.activ-partners__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin-block: var(--space-8);
}
/* Explicit (not min-) height so the img's percentage max-height below has a
   resolvable containing block — the previous fixed-pixel max-height (85px)
   was the real reason logos read as "still far too small" even though the
   outer tile was already a reasonable size. Responsive percentages now do
   the sizing instead of one tiny global pixel maximum. */
.activ-partners__card {
  height: 190px;
  padding: var(--space-4);
  background: var(--white);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) ease;
}
.activ-partners__card img {
  max-width: 78%;
  max-height: 68%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Per-logo allowances — especially wide marks may use more width; the one
   near-square mark (NIHR) may use more height. Aspect ratios measured
   directly from the locally-bundled, whitespace-cropped files. */
.activ-partners__card--wide img { max-width: 86%; }
.activ-partners__card--square img { max-height: 80%; }

@media (hover: hover) and (pointer: fine) {
  .activ-partners__card:hover {
    transform: translateY(-4px);
    border-color: var(--activ-purple);
    box-shadow: var(--shadow-1);
  }
}
.activ-partners__cta { display: inline-flex; margin-top: var(--space-2); }
@media (max-width: 1023px) {
  .activ-partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .activ-partners__card { height: 165px; }
}
@media (max-width: 480px) {
  .activ-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .activ-partners__card { height: 135px; padding: var(--space-4); }
  .activ-partners__card img { max-width: 84%; }
}

/* -------------------------------------------------------------------------
   Member stories — centred card group, controls and heading
   ------------------------------------------------------------------------- */
.activ-stories-section { background: var(--white); }
.activ-stories-section .activ-section-head { justify-content: center; text-align: center; }
.activ-stories-section .activ-draft-note { text-align: center; }
.activ-stories-section .activ-carousel__viewport { justify-content: center; }
.activ-stories-section .activ-carousel__controls { justify-content: center; gap: var(--space-6); }
.activ-stories-section .activ-carousel__progress { flex: 0 0 auto; width: 160px; }
.activ-story-card { width: 320px; }
.activ-story-card .activ-photo-card__media { aspect-ratio: 4/5; }
.activ-story-card__name { font-size: var(--text-small); font-weight: 600; margin-top: var(--space-2); color: rgba(33,26,38,0.6); }
.activ-quote-icon { width: 22px; height: 22px; color: var(--activ-purple); opacity: 0.45; margin-bottom: var(--space-2); }
@media (max-width: 767px) {
  .activ-story-card {
    width: calc((100vw - (2 * var(--page-gutter)) - 1rem) * 0.86);
    max-width: 340px;
  }
  .activ-stories-section .activ-carousel__viewport { justify-content: flex-start; }
}

/* -------------------------------------------------------------------------
   Rewards snapshot
   ------------------------------------------------------------------------- */
.activ-rewards-section {
  background: linear-gradient(180deg, var(--off-white) 0%, var(--pale-mint) 100%);
}
.activ-rewards-heading-accent {
  display: block;
  color: var(--activ-purple-deep); /* solid fallback */
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .activ-rewards-heading-accent {
    background-image: var(--gradient-headline);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
/* Real partner reward-brand marquee — matches the boss-supplied original
   Elementor widget's exact mechanic, scale and edge treatment
   (INPUT-FOR-CLAUDE/old-homepage/html-widgets/reward-cards-widget.html),
   reimplemented as scoped, activ--prefixed classes in this stylesheet
   (never inline/global CSS in the PHP template) with translate3d instead
   of translateX. Genuinely transparent throughout — background: transparent;
   border: 0; box-shadow: none — so the section's pale-mint gradient shows
   directly behind every card; the only shadow is the drop-shadow on each
   gift-card image itself. Pausing on hover/keyboard-focus and the
   reduced-motion fallback are handled in CSS via :hover, :focus-within and
   the prefers-reduced-motion media query — no JavaScript dependency. */
.activ-rewards-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 54px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.activ-rewards-marquee::before,
.activ-rewards-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.activ-rewards-marquee::before { left: 0; background: linear-gradient(to right, var(--pale-mint), transparent); }
.activ-rewards-marquee::after { right: 0; background: linear-gradient(to left, var(--pale-mint), transparent); }
@media (prefers-reduced-motion: reduce) {
  /* Static, accessible fallback: no forced animation, no duplicated visual
     content (the aria-hidden loop-copy is simply not needed once nothing is
     scrolling), native horizontal scroll if the single row of real cards is
     wider than the viewport. */
  .activ-rewards-marquee { overflow-x: auto; }
}

.activ-rewards-track {
  display: flex;
  width: max-content;
  position: relative;
  z-index: 2;
  animation: activ-reward-scroll 34s linear infinite;
  will-change: transform;
  background: transparent;
}
.activ-rewards-marquee:hover .activ-rewards-track,
.activ-rewards-marquee:focus-within .activ-rewards-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .activ-rewards-track { animation: none; }
  .activ-rewards-track .activ-reward-group[aria-hidden="true"] { display: none; }
}

/* Single activ-scroll keyframe definition for this component. */
@keyframes activ-reward-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.activ-reward-group {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  background: transparent;
}

.activ-reward-item {
  width: 370px;
  height: 230px;
  flex: 0 0 370px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0.9;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.activ-reward-item img {
  max-width: 355px;
  max-height: 215px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 16px 24px rgba(31,41,51,0.18));
  transition: transform 0.35s ease, filter 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .activ-reward-item:hover { transform: scale(1.06) translateY(-6px); opacity: 1; z-index: 5; position: relative; }
  .activ-reward-item:hover img { filter: drop-shadow(0 24px 34px rgba(31,41,51,0.28)); }
}
.activ-reward-item:focus-visible {
  opacity: 1;
  z-index: 5;
  position: relative;
  border-radius: var(--radius-md);
}
@media (prefers-reduced-motion: reduce) {
  .activ-reward-item:hover { transform: none; }
}

@media (max-width: 767px) {
  .activ-rewards-marquee { padding: 38px 0; }
  .activ-rewards-marquee::before,
  .activ-rewards-marquee::after { width: 45px; }
  .activ-reward-group { gap: 18px; padding-right: 18px; }
  .activ-reward-item { width: 260px; height: 165px; flex: 0 0 260px; }
  .activ-reward-item img { max-width: 248px; max-height: 153px; }
  .activ-rewards-track { animation-duration: 26s; }
}

/* Discover all brands — centred beneath the marquee. */
.activ-rewards-discover {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

/* -------------------------------------------------------------------------
   Final CTA — page-in-page framing, strong accent panel
   ------------------------------------------------------------------------- */
.activ-final-cta {
  background:
    radial-gradient(circle at 18% 20%, rgba(203,108,230,0.18), transparent 55%),
    radial-gradient(circle at 85% 82%, rgba(226,134,216,0.16), transparent 55%),
    var(--soft-lilac);
}
.activ-final-cta__panel {
  background: var(--gradient-cta-panel);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-24) var(--space-16);
  text-align: center;
  box-shadow: var(--shadow-3);
}
.activ-final-cta__panel .activ-h2-block { max-width: none; margin-inline: auto; color: var(--white); }
.activ-final-cta__panel .activ-lede { max-width: 48ch; margin: 0 auto var(--space-8); color: rgba(255,255,255,0.85); }
.activ-final-cta__panel .activ-cta-row { justify-content: center; flex-wrap: wrap; }
.activ-final-cta__panel .activ-btn--primary { background: var(--white); color: var(--activ-purple-deep); box-shadow: none; }
.activ-final-cta__panel .activ-btn--primary:hover { background: rgba(255,255,255,0.9); }
.activ-final-cta__panel .activ-btn--ghost { color: var(--white); }

.activ-final-cta__stores {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.activ-store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 9px 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-md);
  color: var(--white);
  transition: background-color var(--dur-hover) ease, transform var(--dur-hover) ease;
}
.activ-store-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
.activ-store-badge__text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.activ-store-badge__text small { font-size: 10px; color: rgba(255,255,255,0.7); }
.activ-store-badge__text strong { font-size: 15px; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .activ-store-badge:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }
}
@media (max-width: 767px) {
  .activ-final-cta__panel { padding: var(--space-16) var(--space-6); }
  .activ-final-cta__stores { flex-direction: column; align-items: stretch; }
  .activ-store-badge { justify-content: center; }
}
@media (max-width: 480px) {
  .activ-final-cta { padding-block: var(--space-12); }
  .activ-final-cta__panel { padding: var(--space-12) var(--space-4); border-radius: var(--radius-lg); }
}