/* ==========================================================================
   Installation and OS Support  (/support/installation-guide/)

   The third Support child, built like Downloads. Shared: the page banner,
   the .pf-cap blocks and .pf-related (product-family.css), the FAQ.
   Page-local:
     .ins-steps__list  the four steps (numbered in their heading text)
     .ins-label        the baseline label over the OS list
     .ins-list         the OS list
     .ins-code         the three yum lines; inline code in the blocks

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100. No two adjacent bands share a tint:

     §1  banner            white          §5  documents   white
     §2  before you install neutral-2-100 §6  FAQ         neutral-2-100
     §3  four steps        white          §7  related     white
     §4  OS support        neutral-2-100
   ========================================================================== */

#before-you-install,#license-server,#steps,#os-support,#documents,
#step-download,#step-install,#step-license-server,#step-register,
#operating-systems,#linux-packages,#hardware{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   Columns: §2 and §4 three across, §3 and §5 two by two then four across
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  .ins-before .pf-cap__grid,.ins-os .pf-cap__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ins-steps .pf-cap__grid,.ins-docs .pf-cap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1350px){
  .ins-steps .pf-cap__grid,.ins-docs .pf-cap__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* §3 the step number. INSTALL-OS-DEV-01 (copy round, 2026-09-29): the numbers
   are now in the heading text ("1. Download"), so the list's counter badge is
   gone and each step shows its number once. */

/* inline code and the yum block */
.ins-steps code,.ins-os code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--ps-color-neutral-2-100);border:1px solid var(--ps-color-neutral-2-300);
  border-radius:4px;padding:1px 5px;overflow-wrap:anywhere;
}
/* the yum block scrolls inside its card: without min-width:0 the card (a
   1fr grid item below 1024) grows to the longest line and the band clips it */
.ins-os .pf-cap-block{min-width:0}
.ins-code{
  max-width:100%;
  margin:0 0 10px;padding:10px 12px;border-radius:8px;overflow-x:auto;
  background:var(--ps-color-neutral-2-100);border:1px solid var(--ps-color-neutral-2-300);
}
.ins-code code{background:none;border:0;padding:0;font-size:12px;line-height:20px;white-space:pre;overflow-wrap:normal;color:var(--ps-color-secondary-5-500)}

/* §4 the OS list */
.ins-label{
  margin:-4px 0 8px;
  font:500 12px/18px var(--ps-font);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ps-color-neutral-3-500);
}
.ins-list{margin:0 0 12px;padding-left:18px;font:400 14px/22px var(--ps-font);color:var(--ps-color-secondary-5-500)}

/* the §4 lead carries a link */
.ins-os .pf-cap__lead a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.ins-os .pf-cap__lead a:hover{color:var(--ps-color-brand-500)}

/* --------------------------------------------------------------------------
   §7 Related: three tiles, three across from 1024; four with the held tile
   -------------------------------------------------------------------------- */
@media (min-width:640px){.pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pf-related__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.pf-related__list:has(> li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}}
.ins-related__up{margin-top:20px}

@media (min-width:1350px){
  .ins-before .pf-cap__head,.ins-before .pf-cap__grid,
  .ins-steps .pf-cap__head,.ins-steps .pf-cap__grid,
  .ins-os .pf-cap__head,.ins-os .pf-cap__grid,
  .ins-docs .pf-cap__head,.ins-docs .pf-cap__grid,
  .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}

/* phones: the large buttons can be wider than a 320px column; let them wrap */
@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}
}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.ins-before,.ins-os,.faq{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.ins-steps,.ins-docs,.pf-related{background:var(--sv-white)}
.ins-steps .pf-cap-block,.ins-docs .pf-cap-block,.pf-related__link{background:var(--ps-color-neutral-2-000)}