/* ==========================================================================
   VarMan  (/products/design/analog-custom-ic/varman/)

   The eighth Analog and Custom IC product page, the same nine-section shape
   as the other seven. NO NEW COMPONENTS; one page-local rule makes the fifth
   capability block span two columns. Component prefix "vman-", because
   "vm-" is Victory Mesh's.

   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
   conversion band. No two adjacent bands share a tint.

     §1  banner        white          §6  proof          neutral-2-100
     §2  what it does  neutral-2-100  §7  evaluate       neutral-2-000
     §3  capabilities  white          §8  FAQ            white
     §4  works with    neutral-2-100  §9  related        neutral-2-100
     §5  applications  white
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section anchors - 96px clears the sticky header
   -------------------------------------------------------------------------- */
#what-it-does,#capabilities,#works-with,
#applications,#resources{scroll-margin-top:96px}

/* FIVE capability groups in the shared three-across grid: Integration spans
   the last two columns from 640, so the grid closes evenly at two and at three
   columns, as on Gateway, Expert and Hipex */
@media (min-width:640px){
  .vman-cap--wide{grid-column:span 2}
}
@media (min-width:1024px){
  /* two Works with cards, two across */
  .pf-support__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Related has TWO tiles, the doc's VarMan XMA and the family page: two
   across from 640 at every wider width, rather than the shared three and
   five */
@media (min-width:640px){
  .pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* phones: "Talk to our Technical Experts" is wider than a 375px column at the
   large button size; let it wrap, as the rounds' pages do. TODO(dev): this
   rule has near-identical copies in most product sheets - a candidate for
   product-family.css or page-banner.css. */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}
/* the closing band's button sits beside two text links, so it can be narrower
   than its label at tablet widths; let it wrap at every width, as the
   2026-09-28 audit did for SmartView and SmartDRC/LVS */
.section-headings__ctas .ps-btn--large{max-width:100%}
.section-headings__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}

/* --------------------------------------------------------------------------
   §8 FAQ - sits on white, below the conversion band
   -------------------------------------------------------------------------- */
.faq{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.pf-def,.pf-support,.pf-res,.pf-related{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
/* stated explicitly rather than left transparent: an inherited body colour
   looks right today and breaks silently the moment anything above it moves */
.pf-cap,.pf-applist{background:var(--sv-white)}
/* the conversion band takes the tint the site reserves for it site-wide */
.section-headings__wrapper--cta{background:var(--ps-color-neutral-2-000)}

/* VarMan round, 2026-09-28 (VARMAN-C49): "All of AI-Driven Design" moved
   from the heading row to after the Related list, as on Victory Device and
   Jivaro Pro */
.pf-related__list + .pf-related__up{display:inline-flex;margin-top:18px}

/* VarMan round, 2026-09-28 (VARMAN-C29 to -C39): THIRTEEN resource cards;
   the last spans the row from 640 so the grid closes evenly at two and at
   three columns (Victory Mesh's full-width card, as on Viso) */
@media (min-width:640px){
  .pf-res__grid > .pf-res-card:nth-child(13):last-child{grid-column:1/-1}
  .pf-res__grid > .pf-res-card:nth-child(13):last-child .pf-res-card__what{max-width:70ch}
}
/* phones: the new white-papers button (VARMAN-C40) wraps rather than
   overflowing, as on PEX Certify */
@media (max-width:639.98px){
  .pf-res__more .ps-btn{max-width:100%}
  .pf-res__more .ps-btn__text{white-space:normal;min-width:0}
}