/* For partners: hero tone, toggle states, card entry on toggle, narrow-width layout. Static styles are inline. */
.pa-hero .mrm-tone { color: var(--orange-200); } /* the default tones fall below 3:1 on orange-700 */
.pa-mode { white-space: nowrap; background: transparent; color: var(--text-on-dark-muted); }
.pa-mode[aria-pressed="false"]:hover { color: var(--white); }
.pa-mode[aria-pressed="true"] { background: var(--paper); color: var(--ink-900); }
/* A shown set fades its cards in one after the other (display none -> grid restarts the animation). */
.pa-card { animation: pa-in .4s calc(var(--i) * 70ms) var(--ease-standard) both; }
@keyframes pa-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1100px) {
  .pa-set { grid-template-columns: repeat(2, 1fr) !important; }
  .pa-split { gap: 40px !important; }
}
@media (max-width: 800px) {
  .pa-sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .pa-sec + .pa-sec { padding-top: 0 !important; }
  .pa-tab { padding: 96px 20px 40px !important; }
  .pa-set, .pa-split { grid-template-columns: minmax(0, 1fr) !important; }
  .pa-card { min-height: 0 !important; }
  .pa-row { grid-template-columns: 32px minmax(0, 1fr) !important; gap: 12px !important; padding: 28px 0 !important; }
  .pa-split .mrm-tile { aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 400px) { .pa-mode { padding: 10px !important; font-size: 13px !important; } }