/* ==========================================================================
   Circuit Simulation  (/products/design/circuit-simulation/)

   The first AI-Driven Design family page. Built on the same shared sheet as
   the four Manufacturing families - pf-def, pf-cards, pf-applist, pf-cap,
   pf-res, pf-cta, pf-related and faq all come from product-family.css.

   ONE NEW COMPONENT: cs-choose, the SmartSpice / SmartSpice Pro comparison
   the doc asks for in §4. Nothing in the shared sheet compares two products
   side by side, so it is page-local until a second page needs one - at which
   point it moves to product-family.css in its own commit, per the rule every
   other component on this site has followed.

   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, and there is no dark
   band.

     §1  banner        white          §6  interop        neutral-2-100
     §2  definition    neutral-2-100  §7  resources      white
     §3  products      white          §8  evaluate       neutral-2-000
     §4  comparison    neutral-2-100  §9  FAQ            white
     §5  applications  white          §10 related        neutral-2-100
   ========================================================================== */

/* --------------------------------------------------------------------------
   §3 Circuit Rubberband's eyebrow

   The sixth card is a capability of SmartSpice and Gateway rather than a
   product (open item CS2), and the eyebrow says so before the name does. Same
   type treatment as pl-prod's eyebrow in the shared sheet, so it reads as the
   site's existing label style rather than a new one.
   -------------------------------------------------------------------------- */
.cs-kind{
  margin:0 0 8px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}

/* --------------------------------------------------------------------------
   §4 cs-choose: SmartSpice or SmartSpice Pro

   Two panels that share row tracks. On desktop the grid defines seven rows
   and each panel spans all seven as a subgrid, so the tag, name, "when"
   paragraph, the three facts and the button line up across the two panels
   however long either side's copy runs. Where subgrid is not supported each
   panel simply lays out on its own - still correct, just not level.

   The seven rows are fixed by the markup: tag, name, when, three facts, link.
   Change the markup and the span has to change with it.
   -------------------------------------------------------------------------- */
.cs-choose{padding-block:48px}
.cs-choose__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:32px}
.cs-choose__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.cs-choose__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}

.cs-choose__grid{
  grid-column-end:span var(--ps-grid-columns);
  display:grid;grid-template-columns:1fr;gap:20px;
}
.cs-pick{
  display:grid;grid-template-columns:1fr;align-content:start;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:24px 22px;
}
.cs-pick__tag{
  margin:0 0 8px;
  font:500 11px/16px var(--ps-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ps-color-brand-600);
}
.cs-pick__name{margin:0 0 12px;color:var(--ps-color-neutral-3-500)}
.cs-pick__when{
  margin:0 0 16px;padding-bottom:16px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
  font:400 15px/24px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.cs-pick__fact{padding-block:10px;border-bottom:1px solid var(--ps-color-neutral-2-200)}
.cs-pick__label{
  margin:0 0 2px;
  font:500 12px/18px var(--ps-font);letter-spacing:.04em;
  color:var(--ps-color-secondary-5-600);
}
.cs-pick__value{
  margin:0;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.cs-pick__link{justify-self:start;align-self:end;margin-top:20px}

.cs-choose__note{
  grid-column-end:span var(--ps-grid-columns);
  margin:24px 0 0;max-width:80ch;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}

@media (min-width:640px){
  .cs-choose{padding-block:64px}
  .cs-pick{padding:28px 26px}
}
@media (min-width:1024px){
  .cs-choose{padding-block:80px}
  .cs-choose__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(7,auto);
    column-gap:24px;row-gap:0;
  }
  @supports (grid-template-rows:subgrid){
    .cs-pick{grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
  }
}
@media (min-width:1350px){
  .cs-choose__head,.cs-choose__grid,.cs-choose__note{grid-column-start:2;grid-column-end:span 10}
}

@media (min-width:1024px){
  /* -----------------------------------------------------------------------
     Column count this page overrides

     pf-cap is three across in the shared sheet, sized for product pages'
     capability groups. The interop section has FOUR blocks and three across
     would strand the fourth. 2x2 also pairs them correctly: what goes in
     (netlists, models) on top, where it runs and what comes out underneath.
     Same override as Photonics' methods.
     ----------------------------------------------------------------------- */
  .pf-cap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

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

/* --------------------------------------------------------------------------
   Band run for this page

   product-family.css leaves every shared section transparent, because the
   tint depends on where a section sits rather than on what it is. This is the
   run set out in the header comment above, in one place so it can be read at
   once.
   -------------------------------------------------------------------------- */
.pf-def,.cs-choose,.pf-cap,.pf-related{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
/* stated rather than inherited: a white band that relies on nothing above
   it being tinted looks right today and breaks silently the moment anything
   above it moves */
.pf-cards,.pf-applist,.pf-res{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   Circuit Simulation round (2026-09-25)
   -------------------------------------------------------------------------- */
/* CIRCSIM-13 uses the shared .pf-cap-block__link (product-family.css) */
/* CIRCSIM-15: the product-briefs row under the resource buttons */
.cs-briefs{grid-column-end:span var(--ps-grid-columns);margin:18px 0 0;font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.cs-briefs a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.cs-briefs a:hover{color:var(--ps-color-brand-500)}
@media (min-width:1350px){.cs-briefs{grid-column-start:2;grid-column-end:span 10}}
/* CIRCSIM-17, -18: the visible link label on each Related card */
.pf-related__label{display:block;margin-top:auto;padding-top:8px;font:500 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-brand-600)}
.pf-related__link:hover .pf-related__label{color:var(--ps-color-brand-500)}
/* button labels wrap instead of overflowing: the closing band's route
   columns are narrow at 1024 too, so that rule applies at every width */
.pf-cta .ps-btn{max-width:100%}
.pf-cta .ps-btn .ps-btn__text{white-space:normal;min-width:0}
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large,.pf-res__more .ps-btn{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,.pf-res__more .ps-btn__text{white-space:normal;min-width:0}
}