/* ==========================================================================
   Product family page patterns

   The sections a Manufacturing family page is built from: definition block,
   simulation flow, capability accordion, tool cards, applications grid,
   foundry and platform support, customer proof, release band, resources strip
   and licensing strip.

   Extracted from tcad.css when /products/manufacturing/lithography/ became the
   second page to need them. Plasma and Photonics are the other two families
   and will need the same ten, so this is the point at which copying stops
   scaling. Same rule as section-heading.css, page-banner.css and pending.css:
   a component used by more than one page does not live in a page's own sheet.

   The `t*` prefix went with the move. A page about lithography should not be
   styled by classes named for TCAD, and Plasma and Photonics would only have
   made that worse. `pf-` is product-family.

   WHAT A PAGE STILL OWNS. Its own sheet, linked LAST, carries the sections only
   it has - TCAD keeps the calibration path and the academic band - and the
   band tints.

   BAND TINTS ARE DELIBERATELY NOT SET HERE. Which tint a section takes depends
   on where it sits in a particular page, not on what the section is: proof is
   white on TCAD and tinted on Lithography, because the sections above them
   differ. Every section below is transparent and every page declares its own
   run at the top of its sheet, where the alternation can be read in one place.
   ========================================================================== */

/* §1 — the secondary brochure link sits beside the primary button */
.pf-hero__brochure{align-self:center}

/* --------------------------------------------------------------------------
   §2 Definition block

   The answer paragraph is set larger than body copy because it is the thing
   the page exists to state, and because an answer engine lifting it should be
   lifting something that reads as a definition.
   -------------------------------------------------------------------------- */
.pf-def{padding-block:48px}
.pf-def__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-def__title{color:var(--ps-color-neutral-3-500);margin:0 0 16px}
.pf-def__answer{
  margin:0;max-width:68ch;
  font:400 17px/28px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-def__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.pf-def-block{
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:22px 20px;
}
.pf-def-block__name{
  margin:0 0 10px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.pf-def-block__body{
  margin:0;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-def-block__body em{font-style:italic;color:var(--ps-color-neutral-3-500)}

@media (min-width:640px){.pf-def{padding-block:64px}}
@media (min-width:1024px){
  .pf-def{padding-block:80px}
  .pf-def__answer{font-size:19px;line-height:31px}
  .pf-def__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1350px){.pf-def__head,.pf-def__grid{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §3 Simulation flow

   Built as an ordered list of real links rather than inline SVG — see the
   component comment for why. The connector is a CSS pseudo-element, so it is
   decorative and never read out, and the sequence reflows to a stack on a
   phone instead of scrolling sideways.
   -------------------------------------------------------------------------- */
.pf-flow{padding-block:48px}
.pf-flow__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-flow__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-flow__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-flow__wrap{grid-column-end:span var(--ps-grid-columns);display:grid;grid-template-columns:1fr;gap:24px}
.pf-flow__chain{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:10px;
}
.pf-node{position:relative}
/* the connector: a short rule between consecutive nodes, decorative only */
.pf-node + .pf-node::before{
  content:"";position:absolute;left:50%;top:-10px;height:10px;width:1px;
  background:var(--ps-color-neutral-2-500);
}
.pf-node__link,.pf-node--input{
  display:flex;flex-direction:column;gap:3px;height:100%;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
  padding:14px 16px;
  transition:border-color .25s ease-out;
}
.pf-node__link:hover{border-color:var(--ps-color-brand-500)}
.pf-node--input{background:var(--ps-color-neutral-2-000);border-style:dashed}
/* An input node often NAMES the product the structure came from, and the
   structure docs require every product named in a flow to be a link. But
   .pf-node--input is an <li>, not an <a>, so nothing here styled an anchor
   inside it: links rendered in exactly the colour of the surrounding text with
   no underline, which is to say invisibly. Found on Victory Device, repeated
   on Utmost IV and Victory RCx, then moved here. Underlined as well as
   recoloured, so the cue does not depend on colour perception. */
.pf-node--input a{
  color:var(--ps-color-brand-600);
  text-decoration:underline;text-underline-offset:2px;
}
.pf-node--input a:hover{color:var(--ps-color-brand-500)}
.pf-node--out .pf-node__link{background:var(--ps-color-neutral-2-000)}
.pf-node__step{
  font:500 10px/15px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.pf-node__name{
  font:500 14px/21px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
}
.pf-node--input .pf-node__name{color:var(--ps-color-neutral-3-500)}
.pf-node__link:hover .pf-node__name{color:var(--ps-color-brand-500)}
.pf-node__what{
  font:400 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-flow__aside{
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);
  border-left:2px solid var(--ps-color-brand-500);
  border-radius:0 14px 14px 0;padding:20px 22px;
}
.pf-flow__aside-name{margin:0 0 10px;font:500 15px/22px var(--ps-font);letter-spacing:normal}
.pf-flow__aside-name a{color:var(--ps-color-brand-600)}
.pf-flow__aside-name a:hover{color:var(--ps-color-brand-500)}
.pf-flow__aside-body{
  margin:0;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}

@media (min-width:640px){
  .pf-flow{padding-block:64px}
  .pf-flow__chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-node + .pf-node::before{display:none}
}
@media (min-width:1024px){
  .pf-flow{padding-block:80px}
  .pf-flow__chain{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1350px){.pf-flow__head,.pf-flow__wrap{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §4 Capability groups — accordion, open and crawlable without JS
   -------------------------------------------------------------------------- */
.pf-groups{padding-block:48px}
.pf-groups__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.pf-groups__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-groups__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-groups__list{grid-column-end:span var(--ps-grid-columns);display:flex;flex-direction:column;gap:8px}
.pf-group__item{
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
  transition:border-color .25s ease-out;
}
.pf-group__item:hover{border-color:var(--ps-color-neutral-2-500)}
.pf-group__item.is-open{border-color:var(--ps-color-neutral-3-500)}
.pf-group__heading{margin:0}
.pf-group__question{
  width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:18px 20px;
}
.pf-group__question:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:-2px;border-radius:12px}
.pf-group__question-text{
  font:500 16px/24px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-group__tool{
  padding:2px 10px;
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:100px;
  font:400 11px/17px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.pf-group__marker{
  margin-left:auto;flex:none;position:relative;width:13px;height:13px;
}
.pf-group__marker::before,.pf-group__marker::after{
  content:"";position:absolute;background:var(--ps-color-neutral-3-500);
  transition:transform .25s ease-out,opacity .25s ease-out;
}
.pf-group__marker::before{left:0;top:6px;width:13px;height:1px}
.pf-group__marker::after{left:6px;top:0;width:1px;height:13px}
.pf-group__item.is-open .pf-group__marker::after{transform:scaleY(0);opacity:0}
/* Open by default so the six descriptions are readable with JavaScript off;
   the module stamps is-enhanced on the group and then closes them. */
.pf-group__answer{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.22,.61,.36,1)}
.pf-groups__list.is-enhanced .pf-group__item:not(.is-open) .pf-group__answer{grid-template-rows:0fr}
/* Padding goes on the CHILDREN, never on .pf-group__answer-inner itself. The
   inner is the grid item, and an item's own padding is part of its box - it
   cannot be clipped by its own overflow:hidden, so a 0fr row still resolves to
   the padding height and the panel never fully closes. faq.css does the same
   thing for the same reason. */
.pf-group__answer-inner{overflow:hidden;min-height:0}
.pf-group__answer-inner p{
  margin:0 20px 14px;max-width:74ch;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-group__link{display:inline-flex;margin:0 20px 20px}

@media (min-width:640px){.pf-groups{padding-block:64px}}
@media (min-width:1024px){.pf-groups{padding-block:80px}}
@media (min-width:1350px){.pf-groups__head,.pf-groups__list{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §5 Tool cards
   -------------------------------------------------------------------------- */
.pf-cards{padding-block:48px}
.pf-cards__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-cards__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-cards__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-cards__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
}
.pf-card{
  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;
  /* Cards are anchor targets on two pages - FTCO's Powered by band and the
     six products on Circuit Simulation - so an #anchor jump has to clear the
     sticky header, same as .pf-module. Moved here from ftco.css at its
     second use. Harmless on cards without an id. */
  scroll-margin-top:96px;
}
.pf-card:hover{border-color:var(--ps-color-neutral-2-500)}
.pf-card__name{margin:0 0 10px;color:var(--ps-color-neutral-3-500)}
.pf-card__job{
  margin:0 0 16px;padding-bottom:16px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-card__features{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.pf-card__features li{
  position:relative;padding-left:16px;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-card__features li::before{
  content:"";position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;background:var(--ps-color-brand-500);
}
.pf-card__link{align-self:flex-start;margin-top:auto}
/* Per-card nodes line: which foundries and nodes a card's product line
   covers, set apart from the card's job. Moved here from design-ip.css
   (.dip-card__nodes) at its second use, the MIPI page. Pages whose cards sit
   on a tinted band keep this line on the lighter tint. */
.pf-card__nodes{
  margin:0 0 18px;padding:10px 12px;
  background:var(--ps-color-neutral-2-000);border-radius:8px;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}

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

/* --------------------------------------------------------------------------
   §5b One-product feature band — the alternative to a card grid of one

   For a family that contains exactly ONE product. Two families do: Plasma
   (VSim Plasma) and Photonics (XSim). Both of their structure docs rule the
   card grid out in the same words - "One feature band, NOT a card grid of
   one" - and they are right to. .pf-cards above is a three-column grid; a
   single card in it reads as a grid with two products missing, which is
   precisely the wrong thing to say about a family you are trying to sell.

   Extracted from plasma.css when Photonics became the second page to need it.
   Same rule as everything else in this sheet: extract at the second use, not
   the first. Nothing changed in the move.

   Two columns at desktop: the product argument on the left, its named
   capabilities on the right. Below 1024 it stacks, argument first, because
   the capability list only means something once you know what the tool is.

   THE RIGHT COLUMN IS DELIBERATELY NOT A SET OF CARDS. Cards would make a
   short list look like the start of a longer one that stops early; a bordered
   panel containing three entries looks like a panel containing three entries,
   which is the truth. The panel takes any number of .pl-prod__item children
   without a change here.

   BAND TINT IS NOT SET, for the same reason as every other section in this
   sheet: it depends on where the band sits in a particular page. Each page
   states it in its own run.
   -------------------------------------------------------------------------- */
.pl-prod{padding-block:48px}
.pl-prod__inner{
  grid-column-end:span var(--ps-grid-columns);
  display:flex;flex-direction:column;gap:32px;
}
.pl-prod__eyebrow{
  display:block;margin-bottom:10px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.pl-prod__title{color:var(--ps-color-neutral-3-500);margin:0 0 16px}
.pl-prod__body{color:var(--ps-color-secondary-5-500);margin:0 0 16px;max-width:60ch}
.pl-prod__body:last-of-type{margin-bottom:24px}
.pl-prod__body strong{color:var(--ps-color-neutral-3-500)}

.pl-prod__apps{
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
}
.pl-prod__apps-title{
  margin:0 0 16px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.pl-prod__list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:18px}
.pl-prod__item{display:flex;flex-direction:column;gap:6px}
.pl-prod__item-name{
  font:500 15px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pl-prod__item-what{
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pl-prod__note{
  margin:0;padding-top:16px;
  border-top:1px solid var(--ps-color-neutral-2-300);
  font:400 12px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}

@media (min-width:640px){.pl-prod{padding-block:64px}}
@media (min-width:1024px){
  .pl-prod{padding-block:80px}
  /* argument wider than the panel beside it: the left column carries the
     prose and the button, the right one carries short entries */
  .pl-prod__inner{flex-direction:row;align-items:flex-start;gap:48px}
  .pl-prod__copy{flex:1 1 58%}
  .pl-prod__apps{flex:1 1 42%}
}
@media (min-width:1350px){.pl-prod__inner{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §5c Anchored component rows — a named part of a product, linkable directly

   For a product that CONTAINS named parts a reader may need to be sent to
   individually. Two pages do: Victory Device, whose modules are Giga,
   Luminous, MixedMode, REM and Electro-Chemistry, and Victory TCAD Lab,
   whose suite is DeckBuild, Victory Visual, Victory DoE and Silver.

   Both structure docs ask for the same thing in almost the same words -
   "its own anchor so it can be linked directly" - so each row is an H3 with
   an id and a visible # handle beside it. An application engineer can send
   someone to #giga or #deckbuild instead of to the page and a paragraph of
   directions.

   Extracted from victory-device.css when Victory TCAD Lab became the second
   page to need it. The vd- prefix went with the move, for the same reason
   the t* prefix did when this sheet was created: a page about the TCAD Lab
   should not be styled by classes named for Victory Device.

   Laid out as a row per module rather than a card grid, because the modules
   are read as a list to scan rather than as options to compare, and because
   a row gives the name, what it does and when to reach for it in one line of
   sight at desktop width.

   The abbreviation tile on the left is decorative - aria-hidden - and exists
   to give the eye something to anchor on when scanning five rows. It carries
   no information the heading does not.
   -------------------------------------------------------------------------- */
.pf-mod{padding-block:48px}
.pf-mod__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-mod__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-mod__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-mod__list{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:12px;
}
.pf-module{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:20px 22px;
  scroll-margin-top:96px;   /* so an #anchor jump clears the sticky header */
}
.pf-module__mark{
  flex:none;display:flex;align-items:center;justify-content:center;
  min-width:52px;height:52px;padding:0 8px;
  background:var(--ps-color-brand-000);
  border:1px solid var(--ps-color-brand-100);border-radius:12px;
  font:500 13px/18px var(--ps-font);letter-spacing:.02em;
  color:var(--ps-color-brand-600);
}
.pf-module__body{min-width:0}
.pf-module__name{color:var(--ps-color-neutral-3-500);margin:0 0 8px}
/* the anchor handle: quiet until the row is hovered or it is focused */
.pf-module__anchor{
  margin-left:6px;
  font:400 14px/1 var(--ps-font);
  color:var(--ps-color-neutral-2-500);
  opacity:0;transition:opacity .18s ease-out,color .18s ease-out;
}
.pf-module:hover .pf-module__anchor,
.pf-module__anchor:focus-visible{opacity:1;color:var(--ps-color-brand-500)}
.pf-module__what,
.pf-module__when{
  margin:0 0 8px;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-module__when{margin-bottom:0;color:var(--ps-color-neutral-3-200,var(--ps-color-secondary-5-500))}
.pf-module__what strong,
.pf-module__when strong{color:var(--ps-color-neutral-3-500)}
.pf-mod__foot{grid-column-end:span var(--ps-grid-columns);margin:24px 0 0}

/* --------------------------------------------------------------------------
   §6 Applications

   Each tile reserves an image slot. The media panel is styled in its own right,
   so a tile with no artwork yet reads as a deliberate panel rather than a
   broken image — the <img> carries alt="" and simply renders nothing until a
   file exists at the path.
   -------------------------------------------------------------------------- */
.pf-apps{padding-block:48px}
.pf-apps__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-apps__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-apps__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-apps__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.pf-app__link{
  display:flex;flex-direction:column;height:100%;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:14px;
  overflow:hidden;transition:border-color .25s ease-out;
}
.pf-app__link:hover{border-color:var(--ps-color-brand-500)}
.pf-app__media{
  position:relative;display:block;aspect-ratio:16 / 9;
  background:var(--ps-color-neutral-2-000);
  border-bottom:1px solid var(--ps-color-neutral-2-300);
  /* a faint grid, so an empty slot reads as a reserved panel not a failure */
  background-image:
    linear-gradient(var(--ps-color-neutral-2-200) 1px,transparent 1px),
    linear-gradient(90deg,var(--ps-color-neutral-2-200) 1px,transparent 1px);
  background-size:14px 14px,14px 14px;
}
.pf-app__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the reserved state: no <img> is emitted until artwork exists, so nothing
   404s. Replaced wholesale by .pf-app__img when a file is dropped in. */
.pf-app__slot{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 10px/16px var(--ps-font);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.pf-app__name{
  display:block;padding:12px 14px 0;
  font:500 14px/21px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
}
.pf-app__link:hover .pf-app__name{color:var(--ps-color-brand-500)}
.pf-app__what{
  display:block;padding:3px 14px 14px;
  font:400 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}

@media (min-width:640px){.pf-apps{padding-block:64px}.pf-apps__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.pf-apps{padding-block:80px}.pf-apps__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1350px){.pf-apps__head,.pf-apps__grid{grid-column-start:2;grid-column-end:span 10}}

/* Application tiles and rows with nowhere to go.

   Some applications have no true destination on this site - no industry page
   owns them - and are marked up as a <span> rather than an <a>. The base
   rules above style the link case, including a hover border, so a span
   carrying the same class would light up under the cursor and promise a page
   that does not exist. These three rules take that promise away, and stop the
   name being coloured like a link.

   Same three rules for both components: .pf-app, the tile grid TCAD and
   Lithography use, and .pf-approw, the row list the product pages and Plasma
   use. THIRD USE IS WHAT MOVED THEM - Lithography's tiles, Plasma's rows and
   VSim Plasma's rows - which is the threshold plasma.css recorded for them:
   "A third is the point at which both move into product-family.css
   together, in their own commit." */
.pf-app--unlinked .pf-app__link,
.pf-approw--unlinked .pf-approw__link{cursor:default}
.pf-app--unlinked .pf-app__link:hover{border-color:var(--ps-color-neutral-2-300)}
.pf-approw--unlinked .pf-approw__link:hover{border-color:var(--ps-color-neutral-2-300)}
/* not a link, so it must not be coloured like one */
.pf-app--unlinked .pf-app__name,
.pf-approw--unlinked .pf-approw__name{color:var(--ps-color-neutral-3-500)}

/* --------------------------------------------------------------------------
   §8 Foundry, platform and hardware
   -------------------------------------------------------------------------- */
.pf-support{padding-block:48px}
.pf-support__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-support__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-support__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-support__grid{
  grid-column-end:span var(--ps-grid-columns);
  display:grid;grid-template-columns:1fr;gap:20px;
}
.pf-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;
}
.pf-support-card__name{margin:0 0 14px;color:var(--ps-color-neutral-3-500)}
.pf-support-card__body{
  margin:0 0 14px;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-support-card__note{
  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 12px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-support-card__note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300);
  border-radius:4px;padding:1px 4px;overflow-wrap:anywhere;
}
.pf-support-card__list{list-style:none;margin:0 0 16px;padding:0}
.pf-support-card__list li{
  padding:7px 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-secondary-5-500);
}
.pf-support-card__list li:last-child{border-bottom:0}
/* Links inside the list. An anchor in a block that is not itself an <a>
   inherits the surrounding colour with no underline and renders invisibly.
   Moved here from plasma.css and photonics.css at its third use - SmartSpice's
   Works with cards - which is the recorded threshold for nested-link rules. */
.pf-support-card__list a{
  color:var(--ps-color-brand-600);
  text-decoration:underline;text-underline-offset:2px;
}
.pf-support-card__list a:hover{color:var(--ps-color-brand-500)}
.pf-support-card__link{align-self:flex-start;margin-top:6px}
.pf-support-card__link:first-of-type{margin-top:auto}

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

/* --------------------------------------------------------------------------
   §9 Customer proof
   -------------------------------------------------------------------------- */
.pf-proof{padding-block:48px}
.pf-proof__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-proof__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-proof__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-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;
}
.pf-proof-card{
  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;
}
.pf-proof-card:hover{border-color:var(--ps-color-neutral-2-500)}
.pf-proof-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.pf-proof-card__date{font:400 12px/18px var(--ps-font);letter-spacing:.02em;color:var(--ps-color-neutral-2-900)}
.pf-proof-card__tag{
  padding:3px 10px;background:var(--sv-white);
  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);
}
.pf-proof-card__who{margin:0 0 12px;color:var(--ps-color-neutral-3-500)}
.pf-proof-card__result{
  margin:0 0 14px;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-proof-card__quote{margin:0 0 12px}
.pf-proof-card__quote p{
  margin:0;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-proof-card__speaker{
  margin:0 0 16px;
  font:400 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.pf-proof-card__link{align-self:flex-start;margin-top:auto}
.pf-proof__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);
}
.pf-proof__foot a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}

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

/* --------------------------------------------------------------------------
   §10 Latest release — download intent first, version table beside it
   -------------------------------------------------------------------------- */
.pf-release{padding-block:48px}
.pf-release__inner{grid-column-end:span var(--ps-grid-columns);display:grid;grid-template-columns:1fr;gap:28px}
.pf-release__eyebrow{
  display:block;margin-bottom:10px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.pf-release__title{color:var(--ps-color-neutral-3-500);margin:0 0 16px}
.pf-release__body{color:var(--ps-color-secondary-5-500);margin:0 0 14px;max-width:62ch}
.pf-release__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}
.pf-release__versions{
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:22px 20px;align-self:start;
}
.pf-release__versions-title{
  margin:0 0 14px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.pf-release__list{margin:0 0 14px}
.pf-release__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--ps-color-neutral-2-300);
}
.pf-release__row:last-child{border-bottom:0}
.pf-release__row dt{font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.pf-release__row dd{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ps-color-secondary-5-500)}
.pf-release__note{
  margin:0 0 14px;
  font:400 11px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.pf-release__link{align-self:flex-start}

@media (min-width:640px){.pf-release{padding-block:64px}}
@media (min-width:1024px){
  .pf-release{padding-block:80px}
  .pf-release__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
}
@media (min-width:1350px){.pf-release__inner{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §11 Resources strip — static today, shaped for a feed
   -------------------------------------------------------------------------- */
/* Figures strip: short, sourced figures above the resource cards. Moved here
   from design-ip.css (.dip-facts) at its second use, the MIPI page. One
   column, two from 640px; each page sets its own column count from 1024px,
   because the number of figures differs (five on Design IP, four on MIPI). */
.pf-facts{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0 0 28px;padding:0;
  display:grid;grid-template-columns:1fr;gap:12px;
}
.pf-fact{
  display:flex;flex-direction:column;gap:4px;
  padding:16px 18px;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
}
.pf-fact__big{
  font:500 18px/26px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-fact__what{
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
@media (min-width:640px){.pf-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1350px){.pf-facts{grid-column-start:2;grid-column-end:span 10}}
.pf-res{padding-block:48px}
.pf-res__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-res__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-res__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-res__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.pf-res-card{
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:14px;
  padding:18px 20px;transition:border-color .25s ease-out;
}
.pf-res-card:hover{border-color:var(--ps-color-neutral-2-500)}
.pf-res-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px}
.pf-res-card__type{
  padding:2px 9px;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:100px;
  font:500 10px/16px var(--ps-font);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.pf-res-card__date{font:400 11px/17px var(--ps-font);letter-spacing:.02em;color:var(--ps-color-neutral-2-900)}
.pf-res-card__name{margin:0 0 8px;font:500 14px/21px var(--ps-font);letter-spacing:normal}
.pf-res-card__name a{color:var(--ps-color-brand-600)}
.pf-res-card__name a:hover{color:var(--ps-color-brand-500)}
.pf-res-card__what{
  margin:0;
  font:400 12px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
/* A customer's words inside a resource card. THIRD USE IS WHAT MOVED IT:
   Utmost IV (.ut-quote, left in place so that round's markup is untouched),
   Analog and Custom IC, then Gateway. */
.pf-res-card__quote{margin:10px 0 8px;padding-left:14px;border-left:2px solid var(--ps-color-brand-500)}
.pf-res-card__quote p{
  margin:0;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-res-card__who{
  margin:0;
  font:500 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.pf-res__more{grid-column-end:span var(--ps-grid-columns);display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}

@media (min-width:640px){.pf-res{padding-block:64px}.pf-res__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pf-res{padding-block:80px}.pf-res__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1350px){.pf-res__head,.pf-res__grid,.pf-res__more{grid-column-start:2;grid-column-end:span 10}}

/* A plain list of further documents under the resource cards. SECOND USE IS
   WHAT MOVED IT: Victory Device (its round, VDEVICE-62..68), then Power
   Devices. victory-device.css keeps its identical copy, because that page's
   copy round is applied and its files stay untouched. */
.pf-res__docs{grid-column-end:span var(--ps-grid-columns);margin-top:32px}
.pf-res__docs-title{margin:0 0 12px;font:500 16px/24px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.pf-res__docs-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.pf-res__doc{
  display:flex;flex-direction:column;gap:2px;height:100%;
  background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
  padding:12px 16px;transition:border-color .25s ease-out;
}
.pf-res__doc:hover{border-color:var(--ps-color-brand-500)}
.pf-res__doc-type{font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;color:var(--ps-color-neutral-2-900)}
.pf-res__doc-name{font:500 14px/21px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600)}
.pf-res__doc:hover .pf-res__doc-name{color:var(--ps-color-brand-500)}
@media (min-width:640px){.pf-res__docs-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pf-res__docs-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1350px){.pf-res__docs{grid-column-start:2;grid-column-end:span 10}}
@media (prefers-reduced-motion:reduce){.pf-res__doc{transition:none}}

/* --------------------------------------------------------------------------
   §13 Licensing and support — four cards, tools only, no IP
   -------------------------------------------------------------------------- */
.pf-lic{padding-block:48px}
.pf-lic__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-lic__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-lic__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-lic__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
}
.pf-lic-card{
  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:22px 20px;
}
.pf-lic-card__name{
  margin:0 0 12px;
  font:500 15px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-lic-card__body{
  margin:0 0 14px;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-lic-card__body strong{font-weight:500;color:var(--ps-color-neutral-3-500)}
.pf-lic-card__meta{
  margin:0 0 16px;
  font:400 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.pf-lic-card__warn{
  margin:0 0 16px;padding:11px 13px;
  background:var(--sv-white);
  border-left:2px solid var(--ps-color-brand-500);border-radius:0 8px 8px 0;
  font:500 12px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-lic-card__link{align-self:flex-start;margin-top:auto}

@media (min-width:640px){.pf-lic{padding-block:64px}.pf-lic__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pf-lic{padding-block:80px}.pf-lic__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1350px){.pf-lic__head,.pf-lic__grid{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   Reduced motion

   Every transition in this sheet, switched off in one place. It lives here
   rather than in a page sheet because the selectors are all this sheet's:
   a page that links product-family.css gets the honouring for free, and
   cannot forget to copy it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pf-node__link,.pf-card,.pf-app__link,.pf-proof-card,.pf-res-card,.pf-group__item,.pf-group__answer,
  .pf-group__marker::before,.pf-group__marker::after{transition:none}
}


/* ==========================================================================
   Product PAGE patterns

   Everything below is shared by the single-PRODUCT pages - Victory Process,
   Victory Device, and the four TCAD tools still to come. Distinct from the
   product-FAMILY sections above, which serve TCAD, Lithography, Plasma and
   Photonics.

   Extracted from victory-process.css when Victory Device became the second
   page to need all five. That sheet's own comment called it: "this is the
   first non-accordion capability grid on the site, and the rule is to extract
   at the second use, not the first."

   The five:
     pf-cap       capability groups, H3 + two or three lines, NOT an accordion
     pf-hubflow   the flow as a hub - one in, this tool, several out
     pf-applist   applications as a compact row list
     pf-cta       three routes in one band, not one closing button
     pf-related   the sibling-product strip

   NAMING, AND A COLLISION AVOIDED. The compact application row list is
   pf-applist / pf-approw, NOT pf-apps / pf-app. Those names were already
   taken by the application TILE grid above, which TCAD and Lithography use
   and which reserves an image slot per tile. Two different components, two
   different names. Do not tidy them together.

   TWO THINGS STAY WITH THE PAGE, because both depend on the page rather than
   on the component:
     - band tints, for the same reason as the family sections above;
     - pf-hubflow's desktop column count, which depends on how many nodes that
       page's flow has. Victory Process has six and Victory Device five.
   ========================================================================== */
/* --------------------------------------------------------------------------
   §3 Capability groups

   NOT AN ACCORDION, and that is the doc's instruction rather than an
   oversight: "Each group an H3 with two or three lines beneath it." The TCAD
   and Lithography capability sections are accordions because their docs ask
   for "a tab or accordion set". Here every group is visible on load, with no
   interaction and no JavaScript involved at all.

   Shaped like .pf-def-block but with a real heading rather than an
   uppercase label, because these are H3s in the document outline and the
   type should say so. Kept page-local: this is the first non-accordion
   capability grid on the site, and the rule is to extract at the second use,
   not the first. If Victory Device and Victory Mesh want the same thing,
   that is the moment to move it into product-family.css.
   -------------------------------------------------------------------------- */
.pf-cap{padding-block:48px}
.pf-cap__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-cap__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-cap__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-cap__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.pf-cap-block{
  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:22px 20px;
}
.pf-cap-block__name{color:var(--ps-color-neutral-3-500);margin:0 0 12px}

/* Links nested inside a capability block.

   Same class of problem as .pf-node--input a above: an anchor inside a block
   that is not itself an <a> inherits the surrounding text colour with no
   underline and renders invisibly. Capability blocks routinely name the tool
   either side of the one being described, so the rule is not optional.

   THIRD USE IS WHAT MOVED IT. Victory RCx introduced it, Victory Mesh was the
   second, and Victory Analytics is the third - the same three-use threshold
   that moved .pf-node--input a into this sheet, and the one
   victory-atomistic.css recorded explicitly while this selector was still
   below the line. */
.pf-cap-block__body a{
  color:var(--ps-color-brand-600);
  text-decoration:underline;text-underline-offset:2px;
}
.pf-cap-block__body a:hover{color:var(--ps-color-brand-500)}
.pf-cap-block__body{
  margin:0 0 10px;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-cap-block__body:last-child{margin-bottom:0}
.pf-cap-block__link{margin-top:auto;padding-top:14px}

/* --------------------------------------------------------------------------
   §4 The flow, as a hub rather than a chain

   One input, this tool, four outputs. The shared .pf-node markup is reused
   unchanged so the nodes read identically across the three pages that carry
   a flow; only the "you are here" node is new.

   .pf-node--self is not a link, because linking a page to itself from its
   own diagram is a dead click. It is given the brand tint instead, so it
   reads as the subject of the diagram rather than as a disabled link.
   -------------------------------------------------------------------------- */
.pf-node--self{
  display:flex;flex-direction:column;gap:3px;height:100%;
  background:var(--ps-color-brand-000);
  border:1px solid var(--ps-color-brand-500);border-radius:12px;
  padding:14px 16px;
}
.pf-node--self .pf-node__step{color:var(--ps-color-brand-600)}
.pf-node--self .pf-node__name{color:var(--ps-color-brand-600)}
/* The shared chain is 4 columns from 1024, which suits the TCAD page's eight
   nodes as 4 + 4. This page has six, so 4 columns leaves a ragged 4 + 2.
   Overridden to 3 + 3 at 1024 and to a single row of six once there is real
   width, which is what actually reads as a hub. Both overrides live in their
   media blocks below: an unscoped rule here would win at 390px too and crush
   six nodes into a three-column phone layout. */

/* --------------------------------------------------------------------------
   §5 Applications

   A compact linked list, not the tile grid the TCAD and Lithography pages
   use. Those docs ask for thumbnails from real simulation output, which do
   not exist yet and leave a reserved slot per tile; this doc asks for "one
   line per application" and nothing more, so there is nothing pending here
   and no image slot to reserve.

   Each row is one link: what it is, what is in it, and where it goes.
   -------------------------------------------------------------------------- */
.pf-applist{padding-block:48px}
.pf-applist__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.pf-applist__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-applist__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-applist__list{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:10px;
}
.pf-approw__link{
  display:grid;grid-template-columns:1fr;gap:4px;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
  padding:16px 18px;
  transition:border-color .25s ease-out;
}
.pf-approw__link:hover{border-color:var(--ps-color-brand-500)}
.pf-approw__name{
  font:500 15px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-approw__what{
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-approw__to{
  display:inline-flex;align-items:center;gap:6px;
  font:500 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
}
.pf-approw__link:hover .pf-approw__to{color:var(--ps-color-brand-500)}
.pf-approw__icon{display:inline-flex;width:12px;height:12px}
.pf-approw__icon svg{width:100%;height:100%;fill:currentColor}

/* --------------------------------------------------------------------------
   §7 Three routes, not one button

   The doc's reasoning, which is the sharpest line in it: "Existing customers
   come to product pages for a download or a manual as often as new buyers
   come for a demo. One button misroutes half of them."

   So this band replaces the single-action closing CTA every other page uses.
   Three equal cards on the neutral-2-000 the site reserves for a conversion
   band, each with its own destination. No embedded form.
   -------------------------------------------------------------------------- */
.pf-cta{background:var(--ps-color-neutral-2-000);padding-block:48px}
.pf-cta__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.pf-cta__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-cta__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-cta__routes{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.pf-route{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
}
.pf-route__name{
  margin:0 0 10px;
  font:500 16px/24px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.pf-route__body{
  margin:0 0 20px;
  font:400 13px/21px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
/* the action sits at the bottom of every card, however long the copy */
.pf-route > .ps-btn,
.pf-route__links{margin-top:auto}
.pf-route__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}

/* --------------------------------------------------------------------------
   §9 Related products

   A strip, not a card grid — this is a way out of the page, and it should
   not compete with the conversion band above it.
   -------------------------------------------------------------------------- */
/* No background here. It came across from victory-process.css with one baked
   in, which contradicted this sheet's own rule two sections up - the related
   strip is tinted on both product pages today, but that is where it happens
   to sit in their runs, not a property of the component. pf-cta below DOES
   keep its neutral-2-000, because that tint is reserved site-wide for the
   conversion band and really is intrinsic to it. */
.pf-related{padding-block:40px}
.pf-related__inner{grid-column-end:span var(--ps-grid-columns)}
.pf-related__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 24px;margin-bottom:20px;
}
.pf-related__title{color:var(--ps-color-neutral-3-500);margin:0}
/* Two "up" links beside the heading, for pages whose doc asks for the family
   page AND the unit page (SmartSpice, SmartSpice Pro). Grouped so the head's
   space-between keeps the heading left and the pair right, rather than
   spreading three items across the row. Moved here from smartspice.css at
   its second use. */
.pf-related__ups{display:flex;flex-wrap:wrap;gap:8px 24px}
.pf-related__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:10px;
}
.pf-related__link{
  display:flex;flex-direction:column;gap:2px;height:100%;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:12px;
  padding:14px 16px;
  transition:border-color .25s ease-out;
}
.pf-related__link:hover{border-color:var(--ps-color-brand-500)}
.pf-related__name{
  font:500 14px/21px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
}
.pf-related__link:hover .pf-related__name{color:var(--ps-color-brand-500)}
.pf-related__what{
  font:400 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}

@media (min-width:640px){
  .pf-mod{padding-block:64px}
  .pf-cap,.pf-applist,.pf-cta{padding-block:64px}
  .pf-related{padding-block:52px}
  .pf-cap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-cta__routes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-related__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* name, detail and destination on one line once there is room */
  .pf-approw__link{grid-template-columns:minmax(0,4fr) minmax(0,5fr) auto;align-items:center;gap:20px}
}
@media (min-width:1024px){
  .pf-mod{padding-block:80px}
  /* name and detail beside "when to reach for it" once there is room */
  .pf-module__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 28px;width:100%}
  .pf-module__name{grid-column:1 / -1}
  .pf-module__what,.pf-module__when{margin-bottom:0}
  .pf-cap,.pf-applist,.pf-cta{padding-block:80px}
  .pf-related{padding-block:60px}
  .pf-cap__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf-cta__routes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf-related__list{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:1350px){
  .pf-mod__head,.pf-mod__list,.pf-mod__foot,
  .pf-cap__head,.pf-cap__grid,
  .pf-applist__head,.pf-applist__list,
  .pf-cta__head,.pf-cta__routes,
  .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}
@media (prefers-reduced-motion:reduce){
  .pf-approw__link,.pf-related__link,.pf-module__anchor{transition:none}
}

/* --------------------------------------------------------------------------
   §14 Parts table - a foundry / part name / features table, one row per part

   The Mixel PHY pages' table: the doc for each says "Foundry, part name,
   features, matching the live catalogue". A real table in the served source,
   crawlable and complete without JavaScript. The scroller is the only thing
   on the page allowed to scroll sideways, and it is focusable so a keyboard
   can reach it. Moved here from mipi-d-phy.css (.dphy-parts, .dphy-table) at
   its second use, MIPI C-PHY. The filter bar D-PHY puts above it stays in
   that page's sheet until a second page needs one.
   -------------------------------------------------------------------------- */
.pf-parts{padding-block:48px}
.pf-parts__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.pf-parts__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.pf-parts__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.pf-parts__wrap{grid-column-end:span var(--ps-grid-columns);min-width:0}
.pf-ptable__scroll{
  overflow-x:auto;max-width:100%;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
}
.pf-ptable__scroll:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}
/* a collection filter hides the list when nothing matches */
.pf-ptable[hidden],.pf-ptable__scroll:has(.pf-ptable[hidden]){display:none}
.pf-ptable{
  width:100%;min-width:600px;border-collapse:collapse;
  font:400 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.pf-ptable th,.pf-ptable td{
  text-align:left;padding:12px 16px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);vertical-align:top;
}
.pf-ptable 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;
}
.pf-ptable tbody tr:last-of-type td{border-bottom:0}
.pf-ptable tbody tr{transition:background-color .2s ease-out}
.pf-ptable tbody tr:hover{background:var(--ps-color-neutral-2-000)}
.pf-ptable__foundry{white-space:nowrap}
.pf-ptable__part{font-weight:500;color:var(--ps-color-neutral-3-500)}
.pf-parts__footnote{
  margin:20px 0 0;max-width:80ch;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.pf-parts__footnote a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.pf-parts__footnote a:hover{color:var(--ps-color-brand-500)}
@media (min-width:640px){.pf-parts{padding-block:64px}}
@media (min-width:1024px){.pf-parts{padding-block:80px}}
@media (min-width:1350px){.pf-parts__head,.pf-parts__wrap{grid-column-start:2;grid-column-end:span 10}}
@media (prefers-reduced-motion:reduce){.pf-ptable tbody tr{transition:none}}

/* --------------------------------------------------------------------------
   Parts filter bar and no-match state (.pf-filter / .pf-empty)

   The bar js/collection-filter.js drives over a .pf-ptable, after the
   Solutions PDK bar (.pdk-filter in solutions.css). Hidden in the markup and
   revealed by the module, so a visitor without JavaScript gets the whole table
   and no dead controls. Five selects fit one row from 1024. Moved here from
   mipi-d-phy.css (.dphy-filter / .dphy-empty) at its second use, the
   C-PHY/D-PHY Combo page.
   -------------------------------------------------------------------------- */
.pf-filter{
  display:flex;flex-direction:column;gap:16px;
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:20px;margin-bottom:20px;
}
.pf-filter[hidden]{display:none}
.pf-filter__selects{display:grid;grid-template-columns:1fr;gap:14px}
.pf-filter__field,.pf-filter__search{display:flex;flex-direction:column;gap:6px;min-width:0}
.pf-filter__label{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.pf-filter__select,.pf-filter__input{
  width:100%;
  font:400 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:8px;
  padding:10px 12px;
  transition:border-color .2s ease-out;
}
.pf-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;
}
.pf-filter__select:hover,.pf-filter__input:hover{border-color:var(--ps-color-neutral-2-500)}
.pf-filter__select:focus-visible,.pf-filter__input:focus-visible{
  outline:2px solid var(--ps-color-brand-500);outline-offset:1px;border-color:transparent;
}
.pf-filter__search-field{position:relative;display:flex;align-items:center}
.pf-filter__search-icon{position:absolute;left:12px;pointer-events:none;fill:var(--ps-color-neutral-2-900)}
.pf-filter__input{padding-left:34px}
.pf-filter__input::-webkit-search-cancel-button{cursor:pointer}
.pf-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);
}
.pf-filter__count{margin:0;font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.pf-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;
}
.pf-filter__clear:hover{color:var(--ps-color-brand-500)}
.pf-filter__clear[hidden]{display:none}

.pf-empty[hidden]{display:none}
.pf-empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
}
.pf-empty__text{margin:0;color:var(--ps-color-secondary-5-500);font:400 15px/23px var(--ps-font);letter-spacing:normal;max-width:62ch}

@media (min-width:480px){
  .pf-filter__selects{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:640px){
  .pf-filter{padding:22px 24px}
  .pf-filter__selects{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf-empty{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px}
}
@media (min-width:1024px){
  /* five selects in one row; search and the count underneath */
  .pf-filter__selects{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .pf-filter__select,.pf-filter__input,.pf-filter__clear{transition:none}
}