/* ==========================================================================
   AI-Driven Design  (/products/design/)

   Only the patterns this page adds. The banner and breadcrumb, the FAQ
   accordion, the section headings, the closing CTA 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 families   neutral-2-100
     +  interop     white          (added 2026-09-21, not in the doc)
     §3 proof      neutral-2-100  (was white before interop landed above it)
     +  releases    white          (added 2026-09-21, not in the doc)
     §4 mfg strip  neutral-2-100
     §5 endcap     neutral-2-000
     §6 faq        white

   Eight sections. Six come from the SEO structure doc; the interop and release
   modules were added at the client's request so this page matches its sibling
   /products/manufacturing/, which has both. Adding interop above the proof
   section forced proof from white to tint to keep the alternation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §2 Three family cards

   Children are text links inside the card, per the doc. The card grows to its
   content rather than being forced equal: Analog and Custom IC carries nine
   children against Design IP's two, and padding them to match would leave two
   cards mostly empty.
   -------------------------------------------------------------------------- */
.families{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.families__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.families__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.families__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.families__grid{
  grid-column-end:span var(--ps-grid-columns);
  display:grid;grid-template-columns:1fr;gap:20px;align-items:start;
}
.dfamily{
  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;
}
.dfamily:hover{border-color:var(--ps-color-neutral-2-500)}
.dfamily__name{margin:0 0 10px;color:var(--ps-color-neutral-3-500)}
.dfamily__link{color:inherit}
.dfamily__link:hover{color:var(--ps-color-brand-500)}
.dfamily__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);
}
.dfamily__children{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:1px}
.dchild{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
  padding:9px 12px;margin-inline:-12px;border-radius:8px;
  transition:background-color .2s ease-out;
}
.dchild:hover{background:var(--ps-color-neutral-2-000)}
.dchild__name{
  font:500 14px/21px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
}
.dchild:hover .dchild__name{color:var(--ps-color-brand-500)}
/* the published product name beside the capability label — "Jivaro Pro" is what
   somebody who already knows the tool is scanning for */
.dchild__tool{
  flex:none;padding:1px 8px;
  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);
}
.dchild__desc{
  flex:1 1 100%;
  font:400 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.dfamily__children--groups .dchild{padding-block:12px}
.dfamily__all{align-self:flex-start;margin-top:auto}

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

/* --------------------------------------------------------------------------
   §3 Design customer proof

   The metric leads, because it is the thing the doc asks for and the thing a
   reader scans. The quote supports it; the attribution carries the weight.
   -------------------------------------------------------------------------- */
/* tinted, not white: the interop band above it is white */
.dproof{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300);padding-block:48px}
.dproof__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.dproof__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.dproof__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.dproof__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:20px;
}
.dcase{
  display:flex;flex-direction:column;
  /* white on the tinted band, so the card still reads as a card */
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:28px 26px;transition:border-color .25s ease-out;
}
.dcase:hover{border-color:var(--ps-color-neutral-2-500)}
.dcase__metric{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin:0 0 20px;padding-bottom:20px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
}
.dcase__from{
  font:500 24px/30px var(--sv-font-display);letter-spacing:-.01em;
  color:var(--ps-color-neutral-2-900);text-decoration:line-through;
  text-decoration-thickness:1px;
}
.dcase__arrow{font-size:18px;line-height:30px;color:var(--ps-color-neutral-2-900)}
.dcase__to{
  font:500 36px/40px var(--sv-font-display);letter-spacing:-.02em;
  color:var(--ps-color-brand-500);
}
.dcase__unit{
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.dcase__quote{margin:0 0 20px}
.dcase__quote p{
  margin:0;
  font:400 15px/24px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.dcase__who{display:flex;flex-direction:column;gap:3px;margin:0 0 18px}
.dcase__company{font:500 14px/21px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.dcase__speaker{font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.dcase__spec{
  margin-top:4px;
  font:500 11px/16px var(--ps-font);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.dcase__link{align-self:flex-start;margin-top:auto}
.dproof__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);
}
.dproof__foot a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.dproof__foot a:hover{color:var(--ps-color-brand-500)}

@media (min-width:640px){.dproof{padding-block:64px}}
@media (min-width:1024px){.dproof{padding-block:80px}.dproof__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1350px){.dproof__head,.dproof__grid,.dproof__foot{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §4 Manufacturing strip — shares .band; the reciprocal of mfg-design.html
   -------------------------------------------------------------------------- */
.band--mfg{background:var(--ps-color-neutral-2-100);border-block:1px solid var(--ps-color-neutral-2-300)}

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


/* --------------------------------------------------------------------------
   Banner numbers — mirrors .mfg-numbers on /products/manufacturing/

   Kept as its own class rather than sharing mfg-numbers, because that lives in
   manufacturing.css and a page-specific sheet must not be linked by another
   page. If a third page ever needs this, extract it the way section-heading,
   page-banner and pending were extracted.
   -------------------------------------------------------------------------- */
.dsn-banner{display:flex;flex-direction:column;gap:40px}
.dsn-banner__copy{min-width:0}
.dsn-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;
}
.dsn-numbers__item{background:var(--sv-white);padding:20px 22px}
.dsn-numbers__label{
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
.dsn-numbers__value{
  margin:6px 0 0;
  font:500 40px/44px var(--sv-font-display);letter-spacing:-.02em;
  color:var(--ps-color-brand-500);
}
.dsn-numbers__value--text{font-size:20px;line-height:28px;letter-spacing:-.01em}
.dsn-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){.dsn-numbers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){
  .dsn-banner{flex-direction:row;align-items:flex-start;gap:56px}
  .dsn-banner__copy{flex:1 1 auto}
  .dsn-numbers{flex:0 0 340px;grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Interop and boundaries

   Not in the SEO doc — added so this page matches its sibling. The does /
   does-not pairs sit left, the format table right: the pairs are the argument
   and the table is the evidence for it.
   -------------------------------------------------------------------------- */
.interop{background:var(--sv-white);padding-block:48px}
.interop__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.interop__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px;max-width:26ch}
.interop__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:72ch}
/* min-width:0 so the table scroller inside can actually contain its table */
.interop__wrap{grid-column-end:span var(--ps-grid-columns);min-width:0;display:grid;grid-template-columns:1fr;gap:32px}
.interop__bounds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ibound{
  background:var(--ps-color-neutral-2-000);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:14px;
  padding:18px;
}
.ibound__does,.ibound__not{
  margin:0;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.ibound__does{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--ps-color-neutral-2-300)}
.ibound__not a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.ibound__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;
}
.ibound__flag--yes{background:var(--sv-white);border:1px solid var(--ps-color-brand-500);color:var(--ps-color-brand-600)}
.ibound__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)}

.interop__table-wrap{min-width:0}
.interop__sub{
  margin:0 0 16px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.interop__scroll{
  overflow-x:auto;max-width:100%;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
}
.interop__scroll:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}
.itable{
  width:100%;min-width:560px;border-collapse:collapse;
  font:400 12px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.itable th,.itable td{
  text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);vertical-align:top;
}
.itable thead th{
  font:500 10px/15px 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;
}
.itable tbody tr:last-child th,.itable tbody tr:last-child td{border-bottom:0}
.itable__tool{font-weight:500;color:var(--ps-color-neutral-3-500);white-space:nowrap}
.itable__role{
  display:block;margin-top:2px;white-space:normal;
  font:400 10px/16px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900);
}
.interop__note{
  margin:14px 0 0;
  font:400 11px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.interop__note a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}

@media (min-width:640px){.interop{padding-block:64px}.ibound{padding:20px}}
@media (min-width:1024px){
  .interop{padding-block:80px}
  .interop__wrap{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px;align-items:start}
}
@media (min-width:1350px){.interop__head,.interop__wrap{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   Release and version index — eleven of fifteen tools carry a version
   -------------------------------------------------------------------------- */
.drel{background:var(--sv-white);padding-block:48px}
.drel__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.drel__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.drel__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.drel__wrap{grid-column-end:span var(--ps-grid-columns);min-width:0}
.drel__scroll{
  overflow-x:auto;max-width:100%;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
}
.drel__scroll:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}
.dtable{
  width:100%;min-width:640px;border-collapse:collapse;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.dtable th,.dtable td{
  text-align:left;padding:12px 16px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);vertical-align:top;
}
.dtable 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;
}
.dtable tbody tr:last-child th,.dtable tbody tr:last-child td{border-bottom:0}
.dtable__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);
}
.dtable__product{font-weight:500;color:var(--ps-color-neutral-3-500)}
.dtable__note{
  display:block;margin-top:2px;
  font:400 11px/17px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900);
}
.dtable__ver{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.dtable__pending{
  font-family:var(--ps-font);font-size:12px;font-style:italic;
  color:var(--ps-color-neutral-2-900);
}
.drel__footnote{
  margin:16px 0 0;
  font:400 12px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
.drel__links{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}

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

/* --------------------------------------------------------------------------
   AI-Driven Design round (2026-09-24)
   -------------------------------------------------------------------------- */
/* DESIGN-01: the eTopus metric gets its label on a line of its own */
.dcase__unit--line{flex-basis:100%}

/* phones: "Talk to our Technical Experts" (banner) is wider than a 320px column,
   and "Explore AI-Driven Manufacturing" already overflowed at 375 before this
   round; let both wrap, as the Solutions evaluation CTA does. The release
   index (DESIGN-H3) is held as built, so its links are left alone. */
@media (max-width:639.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){
  .dfamily,.dchild,.dcase,.dfamily__link{transition:none}
}