/* ==========================================================================
   Solutions hub

   Only the patterns this page adds. The banner, the two-axis panels, the FAQ
   accordion, the section headings and the closing CTA all come from
   stylesheets already linked, so this page is the same object as the homepage
   and /products/ rather than a lookalike.

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

/* --------------------------------------------------------------------------
   §2 Two-axis panels — the homepage Solutions explorer, mirrored

   The homepage leads with By Technology and weights the panels 1.16fr / 1fr so
   its 14 rows and 10 rows finish level. This page leads with By Industry, per
   the copy, so the weighting mirrors: the 14-entry panel still takes the wider
   column, it is just on the right now.
   -------------------------------------------------------------------------- */
.solution-panel__descriptor{
  margin:-4px 0 0;
  color:var(--ps-color-secondary-5-500);
  font:400 13px/19px var(--ps-font);letter-spacing:normal;
}
@media (min-width:1180px){
  .pathfinder-companion--industry-first .pathfinder-companion__panels{grid-template-columns:1fr 1.16fr}
}

/* --------------------------------------------------------------------------
   §3 Ten questions

   The homepage's .solution-row language one size up: same hairline separation,
   same red rule growing on hover, same 3px arrow travel. Larger type and a
   two-column list keep it distinct from the compact rows directly above.
   -------------------------------------------------------------------------- */
.question-list{background:var(--sv-white);padding-block:48px}
.question-list__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.question-list__title{color:var(--ps-color-neutral-3-500);margin:0;text-align:center}

.question-list__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;
  column-gap:24px;
}
.question-list__item{display:flex}

.question-row{
  position:relative;flex:1 1 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 8px 18px 18px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
  color:var(--ps-color-neutral-3-500);
  transition:color .2s ease-out,background-color .2s ease-out;
}
.question-row::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:2px;height:0;
  background:var(--ps-color-brand-500);border-radius:2px;
  transition:height .25s ease-out;
}
.question-row:hover,.question-row:focus-visible{color:var(--ps-color-brand-600)}
.question-row:hover::before,.question-row:focus-visible::before{height:56%}

.question-row__text{min-width:0;font:400 15px/22px var(--ps-font);letter-spacing:normal}
.question-row__arrow{
  display:flex;flex:none;color:var(--ps-color-neutral-2-900);
  transition:transform .2s ease-out,color .2s ease-out;
}
.question-row__arrow svg{width:14px;height:12px;fill:currentColor}
.question-row:hover .question-row__arrow,
.question-row:focus-visible .question-row__arrow{transform:translateX(3px);color:var(--ps-color-brand-500)}

@media (min-width:640px){
  .question-list{padding-block:64px}
  /* two columns read top-to-bottom then across — a list, not a zigzag */
  .question-list__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(5,auto)}
}
@media (min-width:1024px){
  .question-list{padding-block:80px}
  .question-row__text{font-size:16px;line-height:23px}
}
@media (min-width:1350px){
  .question-list__head,.question-list__grid{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §6 Foundry and PDK table

   A real table, in the served source, crawlable. The horizontal scroller is the
   only place on either page allowed to scroll sideways, and it is focusable so
   a keyboard can reach it.
   -------------------------------------------------------------------------- */
.pdk-table-section{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
  padding-block:48px;
}
.pdk-table-section__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pdk-table-section__title{color:var(--ps-color-neutral-3-500);margin:0 0 16px;max-width:22ch}
.pdk-table-section__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:72ch}
.pdk-table-section__wrap{grid-column-end:span var(--ps-grid-columns)}

.pdk-table__scroll{
  overflow-x:auto;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
}
.pdk-table__scroll:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}

.pdk-table{
  width:100%;min-width:640px;
  border-collapse:collapse;
  font:400 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pdk-table th,.pdk-table td{
  text-align:left;padding:14px 18px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
  vertical-align:middle;
}
.pdk-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;
}
.pdk-table tbody tr:last-child th,
.pdk-table tbody tr:last-child td{border-bottom:0}
.pdk-table tbody tr{transition:background-color .2s ease-out}
.pdk-table tbody tr:hover{background:var(--ps-color-neutral-2-000)}
.pdk-table__foundry{font-weight:500;color:var(--ps-color-neutral-3-500);white-space:nowrap}
.pdk-table td a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.pdk-table td a:hover{color:var(--ps-color-brand-500)}

.pdk-table__status{
  display:inline-flex;align-items:center;gap:6px;
  font:500 12px/16px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);white-space:nowrap;
}
.pdk-table__status::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ps-color-neutral-2-500);
}
.pdk-table__status--available::before{background:var(--ps-color-success-800,#2e7d32)}

/* The mandated empty state, shown by js/pdk-filter.js when a filter
   combination matches nothing. Hidden in the markup, so it never appears on a
   no-JS page where nothing can be filtered away. */
.pdk-empty[hidden]{display:none}
.pdk-empty{
  margin-top:20px;
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
}
.pdk-empty__text{margin:0;color:var(--ps-color-secondary-5-500);font:400 15px/23px var(--ps-font);letter-spacing:normal;max-width:62ch}

.pdk-table-section__footnote{
  margin:24px 0 0;
  color:var(--ps-color-neutral-2-900);
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
}
.pdk-table-section__footnote a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.pdk-table-section__footnote a:hover{color:var(--ps-color-brand-500)}

@media (min-width:640px){
  .pdk-table-section{padding-block:64px}
  .pdk-empty{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px}
}
@media (min-width:1024px){
  .pdk-table-section{padding-block:80px}
}
@media (min-width:1350px){
  .pdk-table-section__head,.pdk-table-section__wrap{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §7 Customer results

   Four stacked full-width cards. The quote block and the detail block swap
   sides card to card, which is the alternation the structure doc asks for,
   carried by real content rather than by stock imagery.
   -------------------------------------------------------------------------- */
.results{background:var(--sv-white);padding-block:48px}
.results__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.results__title{color:var(--ps-color-neutral-3-500);margin:0;text-align:center}

.results__list{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:20px;
}
.result-card{
  display:grid;grid-template-columns:1fr;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  overflow:hidden;
  transition:border-color .25s ease-out;
}
.result-card:hover{border-color:var(--ps-color-neutral-2-500)}

.result-card__quote{
  padding:28px 24px;
  background:var(--ps-color-neutral-2-000);
  display:flex;flex-direction:column;gap:20px;justify-content:center;
}
.result-card__blockquote{margin:0}
.result-card__blockquote p{
  margin:0;
  color:var(--ps-color-neutral-3-500);
  font:400 17px/27px var(--ps-font);letter-spacing:normal;
}
.result-card__blockquote p::before{content:"\201C"}
.result-card__blockquote p::after{content:"\201D"}
.result-card__attribution{display:flex;flex-direction:column;gap:4px}
.result-card__customer{
  color:var(--ps-color-neutral-3-500);
  font:500 15px/22px var(--ps-font);letter-spacing:normal;
}
.result-card__speaker{
  color:var(--ps-color-neutral-2-900);
  font:400 13px/19px var(--ps-font);letter-spacing:normal;
}

.result-card__detail{
  padding:28px 24px;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.result-card__tag{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.result-card__did{color:var(--ps-color-secondary-5-500);margin:0}
.result-card__outcome{
  margin:0;
  color:var(--ps-color-neutral-3-500);
  font:500 15px/23px var(--ps-font);letter-spacing:normal;
  padding-top:14px;
  border-top:1px solid var(--ps-color-neutral-2-300);
  align-self:stretch;
}

@media (min-width:640px){
  .results{padding-block:64px}
  .result-card__quote,.result-card__detail{padding:32px 30px}
}
@media (min-width:1024px){
  .results{padding-block:80px}
  .result-card{grid-template-columns:6.4fr 5.6fr;align-items:stretch}
  .result-card__quote{border-right:1px solid var(--ps-color-neutral-2-300)}
  /* alternate: even cards put the quote on the right */
  .result-card:nth-child(even) .result-card__quote{order:2;border-right:0;border-left:1px solid var(--ps-color-neutral-2-300)}
  .result-card:nth-child(even) .result-card__detail{order:1}
  .result-card__quote,.result-card__detail{padding:38px 36px}
}
@media (min-width:1350px){
  .results__head,.results__list{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §8 Evidence
   -------------------------------------------------------------------------- */
.evidence{
  background:var(--ps-color-neutral-2-100);
  border-top:1px solid var(--ps-color-neutral-2-300);
  padding-block:48px;
}
.evidence__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px;text-align:center}
.evidence__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.evidence__lead{color:var(--ps-color-secondary-5-500);margin:0}

.evidence__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
}
.evidence-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;
}
.evidence-card:hover{border-color:var(--ps-color-neutral-2-500)}
.evidence-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.evidence-card__format{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.evidence-card__year{
  font:400 12px/16px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.evidence-card__year::before{content:"\00B7";margin-right:10px}
.evidence-card__heading{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.evidence-card__proves{color:var(--ps-color-secondary-5-500);margin:0 0 20px;flex:1 1 auto}
.evidence-card__link{align-self:flex-start}
.evidence__all{grid-column-end:span var(--ps-grid-columns);margin:28px 0 0;text-align:center}
.evidence__all .ps-btn-jump{display:inline-flex}

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

/* --------------------------------------------------------------------------
   §9 How an evaluation works

   The numerals are the hero slide navigation's treatment, reused so the page
   keeps one voice for sequence. They are decorative: the H3 carries the name.
   -------------------------------------------------------------------------- */
.evaluation{background:var(--sv-white);padding-block:48px}
.evaluation__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.evaluation__title{color:var(--ps-color-neutral-3-500);margin:0;text-align:center}

.evaluation__steps{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
  counter-reset:none;
}
.eval-step{
  display:flex;flex-direction:column;
  padding-top:20px;
  border-top:2px solid var(--ps-color-neutral-2-300);
}
.eval-step__num{
  display:block;
  font:500 12px/16px var(--ps-font);letter-spacing:.14em;
  color:var(--ps-color-brand-500);
  margin-bottom:12px;
}
.eval-step__heading{color:var(--ps-color-neutral-3-500);margin:0 0 10px}
.eval-step__body{color:var(--ps-color-secondary-5-500);margin:0}

.evaluation__note{
  grid-column-end:span var(--ps-grid-columns);
  margin:28px 0 0;
  padding:18px 20px;
  background:var(--ps-color-neutral-2-000);
  border-left:2px solid var(--ps-color-brand-500);border-radius:0 8px 8px 0;
  color:var(--ps-color-neutral-3-500);
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
}
.evaluation__cta{grid-column-end:span var(--ps-grid-columns);margin-top:28px;display:flex;justify-content:center}

@media (min-width:640px){
  .evaluation{padding-block:64px}
  .evaluation__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}
@media (min-width:1024px){
  .evaluation{padding-block:80px}
}
@media (min-width:1350px){
  .evaluation__head,.evaluation__steps,.evaluation__note,.evaluation__cta{grid-column-start:2;grid-column-end:span 10}
}

@media (prefers-reduced-motion:reduce){
  .question-row,.question-row::before,.question-row__arrow,
  .result-card,.evidence-card,.pdk-table tbody tr{transition:none}
}

/* --------------------------------------------------------------------------
   §6 filter bar

   Hidden in the markup and revealed by js/pdk-filter.js, so a visitor without
   JavaScript gets the complete table and no dead controls. Selects and search
   sit above the table; the count and the clear control sit under them.
   -------------------------------------------------------------------------- */
.pdk-filter{
  display:flex;flex-direction:column;gap:16px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:20px;margin-bottom:20px;
}
.pdk-filter[hidden]{display:none}

.pdk-filter__selects{display:grid;grid-template-columns:1fr;gap:14px}
.pdk-filter__field,.pdk-filter__search{display:flex;flex-direction:column;gap:6px;min-width:0}
.pdk-filter__label{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.pdk-filter__select,.pdk-filter__input{
  width:100%;
  font:400 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:8px;
  padding:10px 12px;
  transition:border-color .2s ease-out;
}
.pdk-filter__select{
  appearance:none;padding-right:34px;cursor:pointer;
  /* the caret is a CSS triangle rather than an image, so it inherits colour */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.pdk-filter__select:hover,.pdk-filter__input:hover{border-color:var(--ps-color-neutral-2-500)}
.pdk-filter__select:focus-visible,.pdk-filter__input:focus-visible{
  outline:2px solid var(--ps-color-brand-500);outline-offset:1px;border-color:transparent;
}
.pdk-filter__search-field{position:relative;display:flex;align-items:center}
.pdk-filter__search-icon{
  position:absolute;left:12px;pointer-events:none;
  fill:var(--ps-color-neutral-2-900);
}
.pdk-filter__input{padding-left:34px}
.pdk-filter__input::-webkit-search-cancel-button{cursor:pointer}

.pdk-filter__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--ps-color-neutral-2-300);
}
.pdk-filter__count{
  margin:0;
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pdk-filter__clear{
  background:none;border:0;padding:0;cursor:pointer;
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
  text-decoration:underline;text-underline-offset:2px;
  transition:color .2s ease-out;
}
.pdk-filter__clear:hover{color:var(--ps-color-brand-500)}
.pdk-filter__clear[hidden]{display:none}

@media (min-width:640px){
  .pdk-filter{padding:22px 24px}
  .pdk-filter__selects{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .pdk-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:18px 24px;align-items:end}
  .pdk-filter__foot{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  .pdk-filter__select,.pdk-filter__input,.pdk-filter__clear{transition:none}
}

/* --------------------------------------------------------------------------
   Solutions v3 round, 2026-09-24 (SOLUTIONS-03, 53 DESIGN-ADJUST): "Talk to
   our Technical Experts" runs ~24px past the edge of the two large buttons
   below ~340px. The label must not be shortened, so there it wraps inside.
   -------------------------------------------------------------------------- */
@media (max-width:339.98px){
  .page-banner__ctas .ps-btn--large,
  .evaluation__cta .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,
  .evaluation__cta .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}