/* ==========================================================================
   Partners hub  (/partners/)

   Not to be confused with partners.css, which is the homepage's partner LOGO
   RAIL — a different component on a different page.

   Only the patterns this page adds. The banner and breadcrumb, the FAQ
   accordion, the section headings, the closing CTA and the pending panel all
   come from stylesheets already linked.

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100; --ps-color-neutral-2-000 is reserved for the
   closing CTA. No two adjacent bands share a tint, and there is no dark band.

     §1 banner      white
     §2 types       neutral-2-100
     §3 interop     white
     §4 standards   neutral-2-100
     §5 proof       white
     §6 become      neutral-2-100
     §7 endcap      neutral-2-000
     §8 faq         white
   ========================================================================== */

/* --------------------------------------------------------------------------
   §2 Partner types — four category cards, each naming its organisations

   Named as text, not as logos: partner logo use rights are still pending, and
   the live page lists these as text too.
   -------------------------------------------------------------------------- */
.ptypes{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.ptypes__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.ptypes__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px;max-width:26ch}
.ptypes__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.ptypes__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
}
.ptype{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;transition:border-color .25s ease-out;
}
.ptype:hover{border-color:var(--ps-color-neutral-2-500)}
.ptype__count{display:flex;align-items:baseline;gap:7px;margin:0 0 10px}
.ptype__count-num{
  font:500 28px/32px var(--ps-font);letter-spacing:-.01em;
  color:var(--ps-color-brand-500);
}
.ptype__count-word{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.ptype__name{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.ptype__what{
  margin:0 0 18px;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.ptype__orgs{list-style:none;margin:0 0 18px;padding:0}
.ptype__orgs li{
  padding:8px 0;border-bottom:1px solid var(--ps-color-neutral-2-300);
  font:400 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.ptype__orgs li:last-child{border-bottom:0}
.ptype__link{align-self:flex-start;margin-top:auto}
.ptypes__foot{
  grid-column-end:span var(--ps-grid-columns);
  margin:24px 0 0;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.ptypes__foot a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.ptypes__foot a:hover{color:var(--ps-color-brand-500)}

@media (min-width:640px){.ptypes{padding-block:64px}.ptypes__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ptype{padding:28px 26px}}
@media (min-width:1024px){.ptypes{padding-block:80px}.ptypes__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1350px){.ptypes__head,.ptypes__grid,.ptypes__foot{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §3 Works with your flow — three vendor cards, then the format table

   The strongest section on the page, and the one that is currently three bare
   names in a bullet list on the live site.
   -------------------------------------------------------------------------- */
.interop{background:var(--sv-white);padding-block:48px}
.interop__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.interop__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px;max-width:24ch}
.interop__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:72ch}
.interop__vendors{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0 0 40px;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
}
.vendor{
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
}
.vendor__name{color:var(--ps-color-neutral-3-500);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--ps-color-neutral-2-300)}
.vendor__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.vendor__points li{
  position:relative;padding-left:18px;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.vendor__points li::before{
  content:"";position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;
  background:var(--ps-color-brand-500);
}
.vendor__points strong{font-weight:500;color:var(--ps-color-neutral-3-500)}

/* min-width:0 matters: a grid item defaults to min-width:auto, which lets it
   grow to its content and defeats the scroller inside it. */
.interop__table-wrap{grid-column-end:span var(--ps-grid-columns);min-width:0}
.interop__sub{
  margin:0 0 16px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.interop__scroll{
  overflow-x:auto;max-width:100%;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
}
.interop__scroll:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}
.interop-table{
  width:100%;min-width:660px;border-collapse:collapse;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.interop-table th,.interop-table td{
  text-align:left;padding:14px 16px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);vertical-align:top;
}
.interop-table thead th{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-3-500);background:var(--ps-color-neutral-2-000);white-space:nowrap;
}
.interop-table tbody tr:last-child th,.interop-table tbody tr:last-child td{border-bottom:0}
.interop-table tbody tr{transition:background-color .2s ease-out}
.interop-table tbody tr:hover{background:var(--ps-color-neutral-2-000)}
.interop-table__tool{font-weight:500;color:var(--ps-color-neutral-3-500);white-space:nowrap}
.interop-table__role{
  display:block;margin-top:3px;white-space:normal;
  font:400 11px/17px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900);
}
.interop__note{
  margin:16px 0 0;
  font:400 11px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);max-width:80ch;
}

@media (min-width:640px){.interop{padding-block:64px}.vendor{padding:28px 26px}}
@media (min-width:1024px){
  .interop{padding-block:80px}
  .interop__vendors{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1350px){.interop__head,.interop__vendors,.interop__table-wrap{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §4 Standards bodies — evidence of compliance, not a badge wall
   -------------------------------------------------------------------------- */
.standards{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.standards__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.standards__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.standards__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:72ch}
.standards__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.standard{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:22px 20px;transition:border-color .25s ease-out;
}
.standard:hover{border-color:var(--ps-color-neutral-2-500)}
.standard__name{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.standard__does{
  margin:0 0 12px;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.standard__means{
  margin:0 0 16px;padding:12px 14px;
  background:var(--ps-color-neutral-2-000);
  border-left:2px solid var(--ps-color-brand-500);border-radius:0 8px 8px 0;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.standard__link{
  align-self:flex-start;margin-top:auto;
  font:500 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
  text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;
}
.standard__link:hover{color:var(--ps-color-brand-500)}

@media (min-width:640px){.standards{padding-block:64px}.standards__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.standard{padding:24px 22px}}
@media (min-width:1024px){.standards{padding-block:80px}.standards__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1350px){.standards__head,.standards__grid{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §5 Partner proof — three dated items
   -------------------------------------------------------------------------- */
.proof{background:var(--sv-white);padding-block:48px}
.proof__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.proof__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.proof__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.proof__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
}
.proof-card{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;transition:border-color .25s ease-out;
}
.proof-card:hover{border-color:var(--ps-color-neutral-2-500)}
.proof-card__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;
}
.proof-card__date{
  font:400 12px/18px var(--ps-font);letter-spacing:.02em;
  color:var(--ps-color-neutral-2-900);
}
.proof-card__who{
  padding:3px 10px;
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:100px;
  font:500 11px/17px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
}
.proof-card__headline{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.proof-card__body{
  margin:0 0 18px;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.proof-card__link{align-self:flex-start;margin-top:auto}
.proof__more{grid-column-end:span var(--ps-grid-columns);margin-top:28px}

@media (min-width:640px){.proof{padding-block:64px}.proof-card{padding:28px 26px}}
@media (min-width:1024px){.proof{padding-block:80px}.proof__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1350px){.proof__head,.proof__grid,.proof__more{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §6 Become a partner — the routes that exist, beside the pending panel

   Same shape as §9 of /support/: what works is stated plainly, what cannot be
   sourced is shown as a reserved slot rather than filled in.
   -------------------------------------------------------------------------- */
.become{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.become__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.become__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.become__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.become__body{grid-column-end:span var(--ps-grid-columns);display:grid;grid-template-columns:1fr;gap:24px}
.become__sub{
  margin:0 0 12px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.become__intro{
  margin:0 0 8px;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);max-width:66ch;
}
.become__routes{list-style:none;margin:0;padding:0}
.become__routes li{
  display:flex;flex-direction:column;gap:5px;
  padding:16px 0;border-bottom:1px solid var(--ps-color-neutral-2-300);
}
.become__routes li:last-child{border-bottom:0}
.become__route-name{font:500 15px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.become__route-detail{font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.become__route-detail a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.become__route-detail a:hover{color:var(--ps-color-brand-500)}
.become__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}

@media (min-width:640px){.become{padding-block:64px}}
@media (min-width:1024px){
  .become{padding-block:80px}
  .become__body{grid-template-columns:7fr 5fr;gap:40px}
}
@media (min-width:1350px){.become__head,.become__body{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §8 FAQ — sits on white, below the tinted closing CTA
   -------------------------------------------------------------------------- */
.faq{background:var(--sv-white)}

@media (prefers-reduced-motion:reduce){
  .ptype,.standard,.proof-card,.interop-table tbody tr{transition:none}
}

/* --------------------------------------------------------------------------
   Partners round, 2026-09-24 (docs/handoffs/partners/)
   New text links and tags the finalized copy adds. Removed and held blocks
   live in components/held/partners-*.html.
   -------------------------------------------------------------------------- */
/* PARTNERS-14: second link in the Foundry card, under the card link */
.ptype__more{margin:10px 0 0}
/* PARTNERS-32 to 38: the first column is now "Where in your flow"; the tool
   name moves to the second column and keeps the tool styling */
.interop-table__where{font-weight:400;color:var(--ps-color-neutral-3-500)}
/* PARTNERS-41: text link between the table and the trademark note */
.interop__more{margin:20px 0 0}
/* PARTNERS-57, 60, 63: "Press release" after the date and source pill */
.proof-card__type{
  font:400 12px/18px var(--ps-font);letter-spacing:.02em;
  color:var(--ps-color-neutral-2-900);
}
/* PARTNERS-72, 73: the partnering section is now its body, a button and a
   text link, sitting on the section grid */
.become > .ps-grid > .ps-grid__inner > .become__actions{
  grid-column-end:span var(--ps-grid-columns);
  align-items:center;margin-top:0;
}
.become__more{margin:0}
@media (min-width:1350px){.become > .ps-grid > .ps-grid__inner > .become__actions{grid-column-start:2;grid-column-end:span 10}}
/* PARTNERS-78: text link under the contact buttons */
.section-headings__more{margin:-16px 0 0;text-align:center}