/* ─── Clinchr Partners page ───
   Loaded after styles.css, landing.css (kicker, poster words, finale band)
   and about.css (hero, section label, h2, the partner card), so the page is
   built from the same parts as Home and About. This file only adds what is
   unique to /partnerships: the hero actions, the three-audience offer, the
   partner list and the live totals. Same type rules as about.css: display,
   body and the one label voice, nothing else. */

/* ─── Hero actions ─── */

.pt-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 6px;
}
.pt-hero-mail { font-size: .92rem; color: var(--t2); }
.pt-hero-mail a {
  color: var(--t1);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  transition: color .2s ease, border-color .2s ease;
}
.pt-hero-mail a:hover { color: var(--red); border-color: var(--red); }

/* ─── What partners get ───
   Three hairline columns, one per audience — the About page's rules grid
   turned sideways. */

.pt-offer { padding: 80px 0; border-top: 1px solid var(--border); }
.pt-offer-head { margin-bottom: 40px; }
.pt-offer-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}
.pt-offer-grid li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 32px 8px;
}
.pt-offer-grid li:first-child { padding-left: 0; }
.pt-offer-grid li:last-child { padding-right: 0; }
.pt-offer-grid li + li { border-left: 1px solid var(--border); }
.pt-offer-who {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}
.pt-offer-grid h3 {
  font-family: var(--display); font-variation-settings: var(--display-axes);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--t1);
}
.pt-offer-grid p { font-size: .95rem; line-height: 1.65; color: var(--t2); }

/* ─── In our corner ─── */

.pt-partners {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 64px;
  align-items: center;
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.pt-partners-copy .ab-h2 { margin-bottom: 20px; }
.pt-partners-copy > p:last-child { font-size: 1rem; line-height: 1.7; color: var(--t2); max-width: 46ch; }
.pt-partner-list { display: flex; flex-direction: column; gap: 12px; }

/* The plate carries a monogram under the logo, so a missing file degrades
   to initials instead of an empty white square. */
.pt-partner .ab-partner-plate { position: relative; overflow: hidden; }
.pt-partner .ab-partner-plate img { position: relative; z-index: 1; background: #FFFFFF; }
.pt-monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display); font-variation-settings: var(--display-axes);
  font-size: 1.4rem;
  color: #17171A;
}

/* ─── On Clinchr so far ───
   Two big totals, set like the poster headlines. Hidden (the [hidden]
   attribute) until get_public_stats() returns real signal. */

.pt-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 48px;
  padding: 72px 0 88px;
  border-top: 1px solid var(--border);
}
.pt-proof[hidden] { display: none; }
.pt-proof .ab-label { grid-column: 1 / -1; margin-bottom: 0; }
.pt-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0 72px;
}
.pt-proof-stat { display: flex; flex-direction: column; gap: 10px; }
.pt-proof-stat b {
  font-family: var(--display); font-variation-settings: var(--display-axes);
  font-weight: 400;
  font-size: clamp(3.6rem, 8vw, 6.5rem);
  line-height: .86;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--t1);
}
.pt-proof-stat:first-child b { color: var(--red); }
.pt-proof-stat span { font-size: 1rem; color: var(--t2); }
.pt-proof-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  font-weight: 600;
  color: var(--t1);
  text-decoration: none;
  transition: color .2s ease;
}
.pt-proof-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.pt-proof-link:hover { color: var(--red); }
.pt-proof-link:hover svg { transform: translateX(4px); }

/* ─── Finale ───
   The ink band inverts the button to a light plate, like its store buttons. */
.lp-finale .pt-finale-btn { background: #F4F4F2; border-color: #F4F4F2; color: #0E0E10; }
.lp-finale .pt-finale-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ─── Responsive ─── */

@media (max-width: 900px) {
  .pt-offer { padding: 60px 0; }
  .pt-offer-grid { grid-template-columns: 1fr; }
  .pt-offer-grid li,
  .pt-offer-grid li:first-child,
  .pt-offer-grid li:last-child { padding: 28px 0; }
  .pt-offer-grid li + li { border-left: 0; border-top: 1px solid var(--border); }
  .pt-partners { grid-template-columns: 1fr; gap: 32px; padding: 60px 0; }
  .pt-proof { grid-template-columns: 1fr; align-items: start; padding: 60px 0 72px; }
}

@media (max-width: 600px) {
  .pt-hero-actions .btn-primary { width: 100%; }
  .pt-proof-grid { grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .pt-proof-stat b { font-size: clamp(2.8rem, 15vw, 4rem); }
}

/* The partner address, under the finale button — on ink in both themes. */
.pt-finale-mail { margin-top: 20px; font-size: .95rem; color: rgba(244, 244, 242, .62); }
.pt-finale-mail a {
  color: #F4F4F2;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 244, 242, .3);
  transition: color .2s ease, border-color .2s ease;
}
.pt-finale-mail a:hover { color: var(--red); border-color: var(--red); }