/* /partnerships, Figma partnership 3433:9669 (2026-09-24). */

.pt-hero .vp-hero-copy { flex-basis: 602px; }
.pt-hero-body { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }
.pt-hero-photo {
  flex: 1 1 0; min-width: 0; max-width: 820px; align-self: stretch; min-height: clamp(480px, 32vw, 640px);
  border-radius: 24px; overflow: hidden; --vp-ring: var(--sunny, #FFD100);
  background: var(--neutral-300, #E5E1D8);
}
.pt-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; border-radius: inherit; }

/* Frame hero-section 3730:20354 is 688 tall: 60px under the photo. */
@media (min-width: 1101px) { .pt-hero { padding-bottom: 60px; } }

/* ---- Logo sections (revised 2026-10-01, Isabel at More Better): a section
   badge over the heading, then two auto-scrolling rows of white 311 x 179
   logo cards. Row one drifts left, row two drifts right, both loop forever,
   pause on hover, and clip at the viewport edge (Figma partnership
   3433:9669 shows the rows bleeding past the 104px gutter). Each row holds
   its list twice; the second copy is aria-hidden, so translateX(-50%) lands
   exactly where the first copy started and the loop never jumps. ---- */
.pt-logos { padding: 96px 0; display: flex; flex-direction: column; align-items: center; gap: 64px; background: #fff; overflow: hidden; }
/* Frame: donors section ends 56px under its last logo row (903 - 847), so
   the two partner groups sit 152px apart, not 192. */
#product-donors { padding-bottom: 56px; }
.pt-logos-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 1070px; padding: 0 104px; box-sizing: content-box; }
.pt-logos-head .d-h2 { font-size: clamp(34px, 4.3vw, 64px); }
.pt-logos-head p { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }
.pt-logos-head .d-badge { margin-bottom: 8px; }

.pt-marquee { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.pt-row { width: 100%; overflow: hidden; }
.pt-track { display: flex; width: max-content; will-change: transform; animation: pt-scroll-left var(--pt-dur, 44s) linear infinite; }
.pt-row--reverse .pt-track { animation-name: pt-scroll-right; }
.pt-row:hover .pt-track, .pt-row:focus-within .pt-track { animation-play-state: paused; }
@keyframes pt-scroll-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes pt-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* Each copy of the list carries its own trailing gap (padding-right = gap),
   so both copies measure exactly N x (card + gap) and -50% is a whole copy. */
.pt-tiles { list-style: none; margin: 0; padding: 0 16px 0 0; display: flex; gap: 16px; flex: none; }
.pt-tile {
  flex: none; width: 311px; height: 179px; box-sizing: border-box;
  background: #fff; border: 2px solid var(--neutral-200, #F1EDE5); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.pt-tile img { width: 100%; max-width: 279px; height: 100px; object-fit: contain; display: block; }

/* Reduced motion: no marquee. The rows collapse into one centred, wrapping
   grid of the same cards (display: contents lifts every card into
   .pt-marquee), and the aria-hidden duplicates disappear. */
@media (prefers-reduced-motion: reduce) {
  .pt-marquee { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1344px; padding: 0 20px; box-sizing: border-box; }
  .pt-row, .pt-track, .pt-tiles { display: contents; }
  .pt-track { animation: none; }
  .pt-tiles[aria-hidden="true"] { display: none; }
}

@media (max-width: 1100px) {
  .pt-hero .vp-hero-copy { flex: none; }
  .pt-hero-photo { flex: none; width: 100%; aspect-ratio: 541 / 405; min-height: 0; }
  .pt-logos { padding: 72px 0; gap: 40px; }
  .pt-logos-head { padding: 0 40px; }
}
@media (max-width: 720px) {
  /* Figma "Partnerships - Mobile" hero: the second paragraph is small muted
     body text under the button, not a second lead. */
  .pt-hero-body { font-size: 15px; line-height: 1.6; letter-spacing: 0; }
  .pt-hero-photo { aspect-ratio: 327 / 245; }
  .pt-logos-head .d-h2 { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .pt-logos-head p { font-size: 16px; }
  /* Logo tiles: hairline border, small radius. */
  .pt-tile { border-width: 1px; border-radius: 8px; }
  .pt-tiles { gap: 12px; padding-right: 12px; }
  .pt-tile { width: 220px; height: 128px; padding: 12px; }
  .pt-tile img { height: 72px; }
  .pt-marquee { gap: 12px; }
}
/* Figma "Partnerships - Mobile" 3807:24737: 165 x 95 cards, 8px apart, rows
   16px apart, 24px gutter for the copy. */
@media (max-width: 640px) {
  .pt-logos { padding: 48px 0; gap: 32px; }
  #product-donors { padding-bottom: 32px; }
  .pt-logos-head { padding: 0 24px; }
  .pt-marquee { gap: 16px; }
  .pt-tiles { gap: 8px; padding-right: 8px; }
  .pt-tile { width: 165px; height: 95px; padding: 10px; }
  .pt-tile img { height: 54px; max-width: 145px; }
  @media (prefers-reduced-motion: reduce) {
    .pt-marquee { gap: 8px; padding: 0 24px; }
    .pt-tile { width: calc(50% - 4px); }
  }
}