/* ==========================================================================
   AI-Driven Manufacturing  (/products/manufacturing/)

   Only the patterns this page adds. The banner and breadcrumb, the FAQ
   accordion, the section headings, the closing CTA, the pending panel and the
   .band strip 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 portfolio   neutral-2-100
     §3 router      white
     §4 boundaries  neutral-2-100
     §5 proof       white
     §6 releases    neutral-2-100
     §7 design      white
     §8 endcap      neutral-2-000
     §9 faq         white
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 Header — copy on the left, the portfolio in numbers beside it
   -------------------------------------------------------------------------- */
.mfg-banner{display:flex;flex-direction:column;gap:40px}
.mfg-banner__copy{min-width:0}
.mfg-numbers{
  display:grid;grid-template-columns:1fr;gap:1px;margin:0;
  background:var(--ps-color-neutral-2-300);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  overflow:hidden;
}
.mfg-numbers__item{background:var(--sv-white);padding:20px 22px}
.mfg-numbers__label{
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.mfg-numbers__value{
  margin:6px 0 0;
  font:500 40px/44px var(--sv-font-display);letter-spacing:-.02em;
  color:var(--ps-color-brand-500);
}
/* the third figure is a phrase, not a number, so it needs its own scale */
.mfg-numbers__value--text{font-size:22px;line-height:30px;letter-spacing:-.01em}
.mfg-numbers__note{
  margin:6px 0 0;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}

@media (min-width:640px){
  .mfg-numbers{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .mfg-banner{flex-direction:row;align-items:flex-start;gap:56px}
  .mfg-banner__copy{flex:1 1 auto}
  .mfg-numbers{flex:0 0 340px;grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   §2 Portfolio at a glance

   The doc's hard constraint: no carousel, no accordion, nothing that hides a
   product behind an interaction. So this is static markup with no JS at all —
   four columns at desktop, one on mobile, every product visible on load.
   -------------------------------------------------------------------------- */
.portfolio{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.portfolio__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.portfolio__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.portfolio__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:72ch}
.portfolio__grid{
  grid-column-end:span var(--ps-grid-columns);
  display:grid;grid-template-columns:1fr;gap:20px;
}
.family{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
}
.family__name{margin:0 0 10px;color:var(--ps-color-neutral-3-500)}
.family__link{color:inherit}
.family__link:hover{color:var(--ps-color-brand-500)}
.family__what{
  margin:0 0 18px;padding-bottom:16px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.family__products{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.product{
  display:block;padding:10px 12px;margin-inline:-12px;border-radius:8px;
  transition:background-color .2s ease-out;
}
.product:hover{background:var(--ps-color-neutral-2-000)}
.product__name{
  display:block;
  font:500 14px/21px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
}
.product:hover .product__name{color:var(--ps-color-brand-500)}
.product__what{
  display:block;margin-top:2px;
  font:400 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.portfolio__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);
}
.portfolio__foot a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.portfolio__foot a:hover{color:var(--ps-color-brand-500)}

@media (min-width:640px){.portfolio{padding-block:64px}.portfolio__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.family{padding:28px 26px}}
@media (min-width:1024px){
  .portfolio{padding-block:80px}
  /* TCAD carries six products against the others' one, so the columns are not
     equal — the first gets the room it needs and the rest share what is left. */
  .portfolio__grid{grid-template-columns:1.45fr 1fr 1fr 1fr;align-items:start}
}
@media (min-width:1350px){.portfolio__head,.portfolio__grid,.portfolio__foot{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §3 Route by problem

   A definition list, not a table: the rows are independent pairs and a table
   would promise a grid relationship that is not there. It also stacks cleanly
   on a phone with no horizontal scroller.
   -------------------------------------------------------------------------- */
.router{background:var(--sv-white);padding-block:48px}
.router__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.router__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.router__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.router__list{grid-column-end:span var(--ps-grid-columns);margin:0}
.route{
  display:grid;grid-template-columns:1fr;gap:8px;
  padding:20px 0;border-bottom:1px solid var(--ps-color-neutral-2-300);
}
.route:first-child{border-top:1px solid var(--ps-color-neutral-2-300)}
.route__problem{
  font:500 16px/24px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.route__answer{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.route__target{
  flex:none;padding:4px 12px;
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:100px;
  font:500 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
  transition:border-color .2s ease-out,color .2s ease-out;
}
.route__target:hover{border-color:var(--ps-color-brand-500);color:var(--ps-color-brand-500)}
.route__sep{
  flex:none;font:400 12px/20px var(--ps-font);letter-spacing:.04em;
  color:var(--ps-color-neutral-2-900);
}
.route__detail{
  flex:1 1 16rem;min-width:0;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}

@media (min-width:640px){.router{padding-block:64px}}
@media (min-width:1024px){
  .router{padding-block:80px}
  .route{grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:32px;align-items:baseline}
}
@media (min-width:1350px){.router__head,.router__list{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §4 Coverage and boundaries — what it does, paired with what it does not
   -------------------------------------------------------------------------- */
.bounds{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.bounds__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.bounds__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px;max-width:26ch}
.bounds__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:72ch}
.bounds__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.bound{
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:22px 20px;
}
.bound__does,.bound__not{
  margin:0;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.bound__does{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--ps-color-neutral-2-300)}
.bound__not a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.bound__flag{
  display:inline-block;margin-right:8px;padding:2px 9px;
  border-radius:100px;vertical-align:1px;
  font:500 10px/16px var(--ps-font);letter-spacing:.1em;text-transform:uppercase;
}
.bound__flag--yes{background:var(--ps-color-neutral-2-000);border:1px solid var(--ps-color-brand-500);color:var(--ps-color-brand-600)}
.bound__flag--no{background:var(--ps-color-neutral-2-100);border:1px solid var(--ps-color-neutral-2-500);color:var(--ps-color-neutral-2-900)}

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

/* --------------------------------------------------------------------------
   §5 Portfolio-level proof — four signals, each carrying a figure
   -------------------------------------------------------------------------- */
.pproof{background:var(--sv-white);padding-block:48px}
.pproof__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pproof__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pproof__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pproof__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
}
.signal{
  display:flex;flex-direction:column;
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;transition:border-color .25s ease-out;
}
.signal:hover{border-color:var(--ps-color-neutral-2-500)}
.signal__figure{
  margin:0 0 10px;
  font:500 44px/48px var(--sv-font-display);letter-spacing:-.02em;
  color:var(--ps-color-brand-500);
}
.signal__name{
  margin:0 0 12px;
  font:500 15px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.signal__body{
  margin:0 0 16px;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.signal__link{align-self:flex-start;margin-top:auto}

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

/* --------------------------------------------------------------------------
   §6 Release and version index
   -------------------------------------------------------------------------- */
.releases-idx{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.releases-idx__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.releases-idx__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.releases-idx__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
/* 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. */
.releases-idx__wrap{grid-column-end:span var(--ps-grid-columns);min-width:0;display:grid;grid-template-columns:1fr;gap:24px}
.releases-idx__scroll{
  overflow-x:auto;max-width:100%;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
}
.releases-idx__scroll:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}
.vtable{
  width:100%;min-width:600px;border-collapse:collapse;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.vtable th,.vtable td{
  text-align:left;padding:13px 16px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);vertical-align:top;
}
.vtable 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;
}
.vtable tbody tr:last-child th,.vtable tbody tr:last-child td{border-bottom:0}
.vtable__family{
  font:500 13px/20px var(--ps-font);color:var(--ps-color-neutral-3-500);
  white-space:nowrap;border-right:1px solid var(--ps-color-neutral-2-300);
  background:var(--ps-color-neutral-2-000);
}
.vtable__product{font-weight:500;color:var(--ps-color-neutral-3-500)}
.vtable__ver{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.vtable__pending{
  font-family:var(--ps-font);font-size:12px;font-style:italic;
  color:var(--ps-color-neutral-2-900);
}
.releases-idx__links{display:flex;flex-wrap:wrap;gap:16px}

@media (min-width:640px){.releases-idx{padding-block:64px}}
@media (min-width:1024px){
  .releases-idx{padding-block:80px}
  .releases-idx__wrap{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:32px;align-items:start}
  .releases-idx__links{grid-column:1 / -1}
}
@media (min-width:1350px){.releases-idx__head,.releases-idx__wrap{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §7 AI-Driven Design strip — shares .band with the Company and Support hubs
   -------------------------------------------------------------------------- */
.band--design{background:var(--sv-white)}

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

/* --------------------------------------------------------------------------
   AI-Driven Manufacturing round (2026-09-24)
   -------------------------------------------------------------------------- */
/* §2 an "Explore" link under each family (MFGHUB-017 to 027) and after the
   footnote (MFGHUB-029) */
.family__explore{align-self:flex-start;margin-top:16px}
.portfolio__explore{grid-column-end:span var(--ps-grid-columns);justify-self:start;margin-top:12px}
@media (min-width:1350px){.portfolio__explore{grid-column-start:2}}

/* §3 "TCAD, then FTCO" (MFGHUB-036): the comma sits against the first pill */
.route__sep{margin-left:-6px}

/* §6 the table has the band to itself now that the pending panel is held
   (MFGHUB-073 to 078) */
@media (min-width:1024px){
  .releases-idx__wrap{grid-template-columns:minmax(0,1fr)}
}

/* 320px: "Talk to our Technical Experts" (hero) is wider than the column, as
   was "Explore AI-Driven Design" before this round; wrap them, as the Solutions
   evaluation CTA does */
@media (max-width:339.98px){
  .page-banner__ctas .ps-btn--large,.band__actions .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,.band__actions .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .product,.signal,.route__target,.family__link{transition:none}
}