/* ==========================================================================
   Products and Workflows hub

   Only the patterns this page adds. Everything it shares — the strategic cards,
   the partner rail, the FAQ accordion, the section headings, the closing CTA and
   the page banner — comes from stylesheets already linked, so the pages are the
   same object rather than lookalikes.

   Colour follows the client's standing instruction that black is an accent
   rather than the dominant treatment: this page has no dark band at all. The
   structure is carried by white against the faint neutral tint, with the red
   accent on rules and arrows exactly as the homepage uses it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §3 Foundry and PDK strip

   Copy on the left of its own band, the seven approved foundry marks beneath.
   Reuses .partner-rail__cell and .partner-rail__logo wholesale — including the
   grayscale-to-colour hover and the js/partner-logos.js missing-file fallback —
   so a logo behaves identically on both pages.
   -------------------------------------------------------------------------- */
/* Tinted like the homepage's own content bands (pathfinder, journal) rather
   than the lighter tone reserved for the closing CTA, so no two adjacent bands
   share a colour. Padding follows the homepage rhythm: 48 / 64 / 80. */
.pdk-strip{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
  padding-block:48px;
}
.pdk-strip__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:36px}
.pdk-strip__title{color:var(--ps-color-neutral-3-500);margin:0 0 16px;max-width:20ch}
.pdk-strip__body{color:var(--ps-color-secondary-5-500);margin:0 0 28px;max-width:70ch}
.pdk-strip__links{display:flex;flex-wrap:wrap;gap:16px}

/* Seven cells rather than the homepage's twelve, in two rows of 4 + 3.
   The rail sits on the same inset as every other section on the page, so its
   left edge lines up with the copy above it. partners.css already pins the rail
   to grid-column-start:2 from 1350 up, so the span here must be 10 to match —
   spanning 12 from column 2 would reach a 13th column, and the implicit column
   narrows all twelve, which is what pulled this band 2px out of alignment. */
.pdk-strip__grid{
  grid-column-start:1;
  grid-column-end:span var(--ps-grid-columns);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:640px){
  .pdk-strip{padding-block:64px}
  .pdk-strip__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1024px){
  .pdk-strip{padding-block:80px}
}
@media (min-width:1350px){
  .pdk-strip__head,
  .pdk-strip__grid{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §4 Customer proof

   Named customer, the family it belongs to, the result in one line, and who
   said it. The card language is the page's own: hairline border, 16px radius,
   the red rule that grows on hover, 3px arrow travel.
   -------------------------------------------------------------------------- */
.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;text-align:center}

.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{
  position:relative;
  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)}
/* the same growing red rule the strategic cards and Solutions rows use */
.proof-card::before{
  content:"";position:absolute;left:-1px;top:24px;
  width:2px;height:0;
  background:var(--ps-color-brand-500);
  border-radius:2px;
  transition:height .25s ease-out;
}
.proof-card:hover::before,.proof-card:focus-within::before{height:44px}

.proof-card__head{margin-bottom:14px}
.proof-card__family{
  display:block;
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
  margin-bottom:8px;
}
.proof-card__name{color:var(--ps-color-neutral-3-500);margin:0}
.proof-card__result{color:var(--ps-color-secondary-5-500);margin:0 0 16px;flex:1 1 auto}
.proof-card__source{
  color:var(--ps-color-neutral-2-900);
  font:400 12px/17px var(--ps-font);letter-spacing:normal;
  margin:0 0 18px;
  padding-top:14px;
  border-top:1px solid var(--ps-color-neutral-2-300);
}
.proof-card__link{align-self:flex-start}

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

/* --------------------------------------------------------------------------
   §8 Licensing and support strip

   Four text-led cards on the faint tint, so the band reads as reference rather
   than as another set of feature cards.
   -------------------------------------------------------------------------- */
.support-strip{
  background:var(--ps-color-neutral-2-100);
  border-top:1px solid var(--ps-color-neutral-2-300);
  padding-block:48px;
}
/* While §4 Customer proof is held (Products round, 2026-09-24) the strip sits
   directly after the tinted PDK band, so it takes the white ground instead.
   The rule only matches when the two are adjacent, so it stops applying on
   its own the day the proof section is switched back on. */
.pdk-strip + .support-strip{background:var(--sv-white)}
.support-strip__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px;text-align:center}
.support-strip__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.support-strip__body{color:var(--ps-color-secondary-5-500);margin:0}

.support-strip__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
}
.support-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;
}
.support-card:hover{border-color:var(--ps-color-neutral-2-500)}
.support-card__heading{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.support-card__body{color:var(--ps-color-secondary-5-500);margin:0 0 20px;flex:1 1 auto}
.support-card__link{align-self:flex-start}

.support-strip__footnote{
  grid-column-end:span var(--ps-grid-columns);
  margin:28px 0 0;text-align:center;
  color:var(--ps-color-neutral-2-900);
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
}
.support-strip__footnote a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.support-strip__footnote a:hover{color:var(--ps-color-brand-500)}

@media (min-width:640px){
  .support-strip{padding-block:64px}
  .support-strip__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .support-card{padding:28px 26px}
}
@media (min-width:1180px){
  .support-strip{padding-block:80px}
  .support-strip__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1350px){
  .support-strip__head,.support-strip__grid,.support-strip__footnote{grid-column-start:2;grid-column-end:span 10}
}

@media (prefers-reduced-motion:reduce){
  .proof-card,.proof-card::before,.support-card{transition:none}
}