/* ==========================================================================
   Circuit Rubberband  (/products/design/circuit-simulation/circuit-rubberband/)

   The sixth and last Circuit Simulation child page. SHORTER THAN THE OTHER
   FIVE BY DESIGN: the doc asks for seven sections - banner, what it does, how
   it is used, works with, evaluate, a three-question FAQ and related - and no
   capabilities, applications or proof. NO NEW COMPONENTS; one page-local
   rule makes SmartSpice the wide lead tile in Related, as the doc asks.

   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          §5  evaluate       neutral-2-000
     §2  what it does  neutral-2-100  §6  FAQ            white
     §3  how it is used white         §7  related        neutral-2-100
     §4  works with    neutral-2-100
  ========================================================================== */

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

/* Related has two tiles, SmartSpice first and twice as wide - the doc's
   "SmartSpice first and prominently". From 640px, where the shared sheet
   would otherwise give three columns and leave one empty. */
@media (min-width:640px){
  .pf-related__list{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}

@media (min-width:1024px){
  /* How it is used has THREE blocks, so the shared three-across fits. Works
     with has two cards, two across. */
  .pf-support__grid{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 now has near-identical copies in seven page sheets - a candidate for
   product-family.css or page-banner.css. */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large,.section-headings__ctas .ps-btn--large,.pf-res__more .ps-btn{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,.section-headings__ctas .ps-btn--large .ps-btn__text,.pf-res__more .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-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)}

/* RUBBERBAND-07: family link follows the product cards. */
.pf-related__list + .pf-related__ups{margin-top:20px}