/* Partners in three screens (Dasha, 22 Oct): the kinds of partner, the directory, then what each kind gets (the directory is what
   a visitor comes for, so it comes second). The header floats over the screens (/site/assets/snap.css); each screen starts under it,
   with the title at least the landing's distance below the header. */
body.one.pp > main { display: block; width: auto; max-width: none; padding: 0; }
.pp-sec { display: flex; flex-direction: column; justify-content: center; width: calc(100% - 2 * clamp(16px, 4vw, 48px)); max-width: 1180px; margin: 0 auto; padding: 112px 0 32px; }
.one-head .h1 { margin: 0; font: 500 clamp(34px, 4.4vw, 56px)/1.04 var(--sans); letter-spacing: -.045em; color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the three kinds: the card of the header's panels, with who fits */
.pp-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.pp-type, .pp-card, .pp-table { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(25, 24, 38, .08); box-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 18px 44px -24px rgba(25, 24, 38, .24); border-radius: 20px; }
.pp-type { display: flex; flex-direction: column; padding: 30px 30px 32px; }  /* more air (Dasha, 22 Oct) */
.pp-type .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(110, 114, 242, .1); color: #6E72F2; }
.pp-type b { margin-top: 20px; font: 500 17px/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.pp-type small { margin-top: 8px; font: 400 14px/1.45 var(--sans); color: var(--ink2); }
.pp-type .fit { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(25, 24, 38, .07); font: 500 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #6E72F2; }
.pp-type ul { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.pp-type ul li { position: relative; padding-left: 18px; font: 400 13.5px/1.4 var(--sans); color: var(--ink); }
.pp-type ul li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: rgba(110, 114, 242, .5); }
/* what each kind gets */
.pp-table { max-width: 860px; width: 100%; margin: 0 auto; padding: 8px 24px; }
.pp-table table { width: 100%; border-collapse: collapse; font: 400 14.5px/1.3 var(--sans); }
.pp-table th, .pp-table td { padding: 12px 8px; text-align: center; border-bottom: 1px solid rgba(25, 24, 38, .06); }
.pp-table tr:last-child th, .pp-table tr:last-child td { border-bottom: 0; }
.pp-table thead th { font: 500 13px/1.2 var(--sans); color: var(--ink2); }
.pp-table tbody th { text-align: left; font-weight: 400; color: var(--ink); }
.pp-table td svg { color: #6E72F2; vertical-align: middle; }
.pp-table .no { color: rgba(25, 24, 38, .22); }
/* the directory */
.pp-tabs { display: flex; justify-content: center; gap: 6px; margin: -6px auto 16px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); width: max-content; }
.pp-tabs button { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 500 14px/1 var(--sans); color: var(--ink2); transition: background .2s, color .2s; }
.pp-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.pp-tabs button:focus-visible { outline: 2px solid #6E72F2; outline-offset: 2px; }
#directory { max-width: 1300px; }  /* wider, so each card has the room its air takes (Dasha, 22 Oct) */
.pp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.pp-grid[hidden] { display: none; }
/* a card reads top down (Dasha, 22 Oct: more readable): the logo in a box of one size, the name, where they are, one plain line on
   what they do, three short tags, and the links as clear text buttons */
.pp-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border-radius: 22px; transition: transform .25s, box-shadow .25s, background .25s; }
.pp-card:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 24px 50px -24px rgba(25, 24, 38, .3); }
.pp-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pp-top > span:last-child { min-width: 0; }
.pp-logo { flex: none; display: grid; place-items: center; width: 68px; height: 52px; padding: 7px 9px; box-sizing: border-box; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(25, 24, 38, .07); }
.pp-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-top b { display: block; font: 500 16px/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.pp-top small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12.5px/1.35 var(--sans); color: var(--ink2); }
.pp-card p { margin: 16px 0 0; font: 400 14px/1.5 var(--sans); color: var(--ink); }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 20px; padding: 0; list-style: none; }
.pp-tags li { padding: 5px 9px; border-radius: 999px; background: rgba(110, 114, 242, .09); font: 500 12px/1.2 var(--sans); color: #4b4e9e; white-space: nowrap; }
.pp-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(25, 24, 38, .07); }
.pp-links a { font: 500 14px/1.2 var(--sans); color: #5053D0; text-decoration: none; }
.pp-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-links i { font-style: normal; }
.pp-sec .one-acts:has(.btn + .btn) { column-gap: 10px; }  /* the hero's two buttons side by side */
@media (max-width: 1100px) { .pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .pp-sec { padding: 100px 0 28px; justify-content: flex-start; }  /* the title clear of the header, as on the landing (Dasha, 22 Oct) */
  .pp-types { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pp-type { padding: 18px; }
  .pp-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-table { padding: 4px 12px; } .pp-table table { font-size: 13px; } .pp-table th, .pp-table td { padding: 10px 4px; } .pp-table thead th { font-size: 11.5px; } }
@media (min-width: 861px) and (max-height: 820px) {
  .pp-type { padding: 18px 20px; } .pp-type .fit { margin-top: 12px; padding-top: 10px; } .pp-type ul { gap: 5px; margin-top: 8px; }
  .pp-table th, .pp-table td { padding: 8px; } #directory .one-head { margin-bottom: 16px; } #directory .one-head p { margin-top: 8px; }
  .pp-sec { padding-top: 104px; } .pp-card { padding: 16px 18px; } .pp-card p { margin-top: 10px; } .pp-tags { margin-top: 10px; } .pp-links { padding-top: 12px; } }
/* a phone (Dasha, 22 Oct: the site must work on a phone): finger-sized targets, text no smaller than 12 px */
@media (max-width: 860px) { .pp-type .fit, .pp-table thead th { font-size: 12px; } .pp-tabs button { min-height: 40px; }
  .pp-links { gap: 0 20px; padding-top: 6px; } .pp-links a { display: inline-flex; align-items: center; min-height: 40px; } }