/* ==========================================================================
   Production-Ready IP (PRO IP)  (/products/design/design-ip/production-ready-ip/)

   A Design IP child built on product-family.css, cloned from the Design IP
   hub (WF-08, 2026-10-09, record 138). Page-local pieces, each a copy of the
   Design IP hub's rule of the same shape (design-ip.css, WF-02), renamed so
   the hub's round markup stays untouched:
     .pro-banner__layout / .pro-media   hero copy beside image E; neutral
                                        placeholder (DEP-01, PRO1)
     .pro-terms                         the two term blocks under the
                                        definition, two across from 640
     .pro-cover                         the link band to the Design IP table
     .pro-catalog                       one resource card
     .pro-cta                           the closing band (no image)

   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  catalog     white
     §2  what it is    neutral-2-100  §6  CTA         neutral-2-000
     §3  families      white          §7  related     neutral-2-100
     §4  coverage      neutral-2-100
   ========================================================================== */

/* section anchors - 96px clears the sticky header */
#what-it-is,#families,#coverage,#catalog{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   §1 banner: copy beside image E from 1024
   -------------------------------------------------------------------------- */
.pro-banner__layout{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media (min-width:1024px){.pro-banner__layout{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
.pro-banner__line{margin:20px 0 0;color:var(--ps-color-secondary-5-500)}
.pro-banner__line a,.pro-cta__line a{
  color:var(--ps-color-brand-600);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ps-color-neutral-2-500);
}
.pro-banner__line a:hover,.pro-cta__line a:hover{color:var(--ps-color-brand-500);text-decoration-color:currentColor}
.pro-media{
  width:100%;aspect-ratio:16 / 10;border-radius:20px;
  background:var(--ps-color-neutral-2-100);border:1px solid var(--ps-color-neutral-2-300);
}
/* phones: the large buttons are wider than a 375px column; let them wrap */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large,.pro-cta .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text,.pro-cta .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

/* --------------------------------------------------------------------------
   §2 the two term blocks: two across from 640 (the shared grid goes to
   three at 1024; two terms stay two)
   -------------------------------------------------------------------------- */
@media (min-width:640px){.pro-terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pro-terms{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --------------------------------------------------------------------------
   §4 the link band: heading and lead, the link beside them from 1024
   -------------------------------------------------------------------------- */
.pro-cover{padding-block:48px}
.pro-cover__inner{grid-column-end:span var(--ps-grid-columns);display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.pro-cover__title{margin:0 0 12px;color:var(--ps-color-neutral-3-500)}
.pro-cover__lead{margin:0;max-width:70ch;color:var(--ps-color-secondary-5-500)}
.pro-cover__link{justify-self:start}
@media (min-width:640px){.pro-cover{padding-block:64px}}
@media (min-width:1024px){
  .pro-cover{padding-block:80px}
  .pro-cover__inner{grid-template-columns:minmax(0,1fr) auto;gap:48px}
}
@media (min-width:1350px){.pro-cover__inner{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §5 the catalog: one resource card at a card's width
   -------------------------------------------------------------------------- */
.pro-catalog{padding-block:48px}
.pro-catalog__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.pro-catalog__title{margin:0 0 12px;color:var(--ps-color-neutral-3-500)}
.pro-catalog__lead{margin:0;max-width:70ch;color:var(--ps-color-secondary-5-500)}
.pro-catalog__grid{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px;
}
@media (min-width:640px){.pro-catalog{padding-block:64px}.pro-catalog__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pro-catalog{padding-block:80px}.pro-catalog__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1350px){.pro-catalog__head,.pro-catalog__grid{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §6 the closing band
   -------------------------------------------------------------------------- */
.pro-cta{padding-block:48px;background:var(--ps-color-neutral-2-000)}
.pro-cta__inner{grid-column-end:span var(--ps-grid-columns)}
.pro-cta__title{margin:0 0 14px;color:var(--ps-color-neutral-3-500)}
.pro-cta__body{margin:0 0 24px;max-width:65ch;color:var(--ps-color-secondary-5-500)}
.pro-cta__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.pro-cta__line{margin:20px 0 0;color:var(--ps-color-secondary-5-500)}
@media (min-width:640px){.pro-cta{padding-block:64px}}
@media (min-width:1024px){.pro-cta{padding-block:80px}}
@media (min-width:1350px){.pro-cta__inner{grid-column-start:2;grid-column-end:span 10}}

/* --------------------------------------------------------------------------
   §7 Related: four tiles, four across from 1024 rather than the shared five
   -------------------------------------------------------------------------- */
@media (min-width:1024px){.pf-related__list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.pf-def,.pro-cover,.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 */
.pf-cards,.pro-catalog{background:var(--sv-white)}
/* cards on a white band take the shared card tint, as elsewhere on the site */
.pf-cards .pf-card,.pro-catalog .pf-res-card{background:var(--ps-color-neutral-2-000)}