/* Partnership — Figma 13586:47263 (desktop 1440) · 13586:47290 (mobile 390).
   Desktop: 1em = Figma px / 16 (fluid scale of .body). Mobile: see the ≤479 block. */

.partnership-page {
  --ps-ink: #141414;          /* ink/850 */
  --ps-gray: var(--gray-1);   /* gray/500 #6b7280 */
  --ps-ease: cubic-bezier(.16, 1, .3, 1);
}
/* Active menu item: css/site-additions.css. */
/* Focus ring: one rule for the whole page in css/site-additions.css. */

/* One screen: navbar + hero = viewport. --ps-nav-h comes from js/partnership.js;
   the fallback is the navbar's own geometry (padding 3em + button 2.25em + 20px line + 2px border). */
.ps-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--ps-nav-h, calc(5.25em + 22px));
}

/* 01 Hero — the swap */
.ps-hero {
  position: relative;
  isolation: isolate;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5em 3.75em;
  background-color: var(--white);
  color: var(--ps-ink);
  overflow: hidden;
}

/* Artwork fills the hero. Taller than the frame → cover by height.
   Shorter → the frame may lose at most 2.5em of white sky on top, the rest is cut from the bottom,
   so the glass never rises under the lead (keeps the text on white). */
.ps-hero__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ps-hero__art picture { display: block; width: 100%; height: 100%; }
.ps-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% max(100%, -2.5em);
}

.ps-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  width: 55em;                /* 880 */
  max-width: 100%;
  text-align: center;
}
.ps-eyebrow { margin: 0; color: var(--ps-gray); text-transform: uppercase; }
.ps-title { width: 100%; color: var(--ps-ink); }
.ps-title > span { display: block; }
.ps-title__muted { color: var(--ps-gray); }
.ps-br-m { display: none; }
.ps-lead { width: 31em; max-width: 100%; margin: 0; color: var(--ps-gray); } /* 620 at 20px */

.ps-action { display: flex; align-items: center; gap: 1.5em; padding-top: 1em; }
.ps-cta { flex: none; }
.ps-proof { display: flex; flex-direction: column; align-items: flex-start; gap: .25em; margin: 0; }
.ps-stars { display: flex; gap: .25em; }
.ps-stars img { display: block; width: 1em; height: 1em; }
.ps-proof__text { font-size: .875em; line-height: 1.2; color: var(--ps-gray); white-space: nowrap; }

.ps-captions {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1em;
  margin: 0;
  color: var(--ps-ink);       /* ink/850 on the glass: contrast 13–17 : 1 */
}
.ps-caption { display: flex; flex-direction: column; gap: .25em; }
.ps-caption__label { font-size: .875em; line-height: 1.2; text-transform: uppercase; }
.ps-caption__value { margin: 0; font-size: 1.25em; line-height: 1.2; letter-spacing: -.025em; }

/* Motion: once, on load — the stack rises 8px, the glass settles. Transform/opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .ps-reveal { animation: ps-rise .6s var(--ps-ease) both; animation-delay: calc(80ms + var(--ps-i, 0) * 70ms); }
  .ps-title { --ps-i: 1; }
  .ps-lead { --ps-i: 2; }
  .ps-action { --ps-i: 3; }
  .ps-captions { --ps-i: 4; }
  .ps-hero__img { transform-origin: 50% 100%; animation: ps-settle 1.6s var(--ps-ease) both; }
}
@keyframes ps-rise { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes ps-settle { from { opacity: .5; transform: scale(1.04); } to { opacity: 1; transform: none; } }

@media (min-width: 1920px) { .partnership-page { font-size: 21.333px; } }

/* Portrait tablets (desktop layout on a tall screen): cover-by-height blew the artwork up 2.3×
   and left only the gap between the two groups of glass. Fit it by width at the bottom instead,
   and drop the captions onto it. */
@media (min-width: 480px) and (max-width: 1024px) and (max-aspect-ratio: 1/1) {
  .ps-hero { justify-content: space-between; }
  .ps-hero__img { object-fit: contain; object-position: 50% 100%; }
}

/* Mobile 390. Inside the hero 1em = 16px at 390 (4.2vw × 16/16.38),
   so every value below is Figma mobile px / 16 and the site classes keep their own sizes. */
@media screen and (max-width: 479px) {
  .ps-main { padding-top: var(--ps-nav-h, 5.03em); }
  .ps-hero {
    font-size: .97680098em;
    justify-content: space-between;
    gap: 2em;
    padding: 2em 1em 1.5em;
  }
  .ps-hero__img { object-position: 50% max(100%, -3.5em); }
  .ps-head { width: 100%; }
  .ps-eyebrow { font-size: .75em; font-weight: 400; }
  .ps-br-m { display: inline; }
  .ps-lead { width: 100%; line-height: 1.4; letter-spacing: -.03125em; }
  .ps-action { flex-direction: column; gap: 1em; width: 100%; padding-top: .5em; }
  .ps-cta { width: 100%; justify-content: space-between; }
  .ps-proof { flex-direction: row; align-items: center; gap: .5em; }
  .ps-proof__text { font-size: .75em; font-weight: 400; }
  .ps-captions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; align-items: end; }
  .ps-caption__label { font-size: .75em; font-weight: 400; }
  .ps-caption__value { font-size: .875em; font-weight: 400; letter-spacing: -.0714286em; }
}

.ps-action#contact { scroll-margin-top: calc(var(--ps-nav-h, 80px) + 20px); }