/* Hardware and installation details: consistent symbols, closer grouping and a
   clear reading order. Loaded after the existing page styles. */
.ui-icon{display:block;width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.spec-icon,.step-icon{display:block;flex-shrink:0;fill:none;color:var(--accent);transition:transform 200ms var(--ease),opacity 200ms ease}
.spec-icon{width:34px;height:34px}
.step-icon{width:42px;height:42px}

#requirements .mac-specs>div{justify-content:flex-start;min-height:202px;gap:26px;padding:28px}
#requirements .mac-specs dt{display:flex;align-items:center;gap:14px;min-height:34px;font-size:15px;line-height:1.35}
#requirements .mac-specs dd{font-size:clamp(21px,1.7vw,27px);line-height:1.3;text-wrap:pretty}
#requirements .mac-note{margin-top:24px;font-size:16px;max-width:76ch}

#install .install-steps li{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-height:232px;padding:var(--pad);gap:0}
#install .install-steps li::before{content:counter(step,decimal-leading-zero) / "";position:absolute;top:33px;right:var(--pad);margin:0;padding:0;font-family:var(--text);font-size:14px;font-weight:500;line-height:1;letter-spacing:0;color:var(--muted)}
#install .step-icon{margin-bottom:24px}
#install .install-steps h3{margin-bottom:12px;font-size:clamp(23px,1.9vw,30px)}
#install .install-steps p{max-width:37ch;font-size:17px;line-height:1.55}

@media(max-width:1100px){
  #requirements .mac-specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #requirements .mac-specs>div{min-height:180px;padding:24px;gap:20px}
  #requirements .mac-specs dd{font-size:24px;max-width:25ch}
  #install .install-steps li{padding:26px;min-height:224px}
  #install .install-steps li::before{top:27px;right:26px}
  #install .step-icon{margin-bottom:22px}
}
@media(max-width:900px){
  #install .install-steps{grid-template-columns:1fr;gap:10px}
  #install .install-steps li{grid-template-columns:44px minmax(0,1fr);gap:4px 22px;align-items:start;min-height:0;padding:24px}
  #install .install-steps li::before{top:25px;right:24px;font-size:13px}
  #install .step-icon{grid-column:1;grid-row:1/3;width:38px;height:38px;margin:1px 0 0}
  #install .install-steps h3{grid-column:2;grid-row:1;font-size:25px;margin:0 28px 7px 0}
  #install .install-steps p{grid-column:2;grid-row:2;max-width:60ch}
}
@media(max-width:520px){
  #requirements .mac-specs{grid-template-columns:1fr;gap:8px}
  #requirements .mac-specs>div{grid-template-columns:minmax(0,.48fr) minmax(0,1fr);gap:18px;align-items:center;min-height:0;padding:20px}
  #requirements .mac-specs dt{display:grid;align-content:center;justify-items:start;gap:9px;font-size:14px}
  #requirements .spec-icon{width:30px;height:30px}
  #requirements .mac-specs dd{font-size:19px;line-height:1.4;max-width:none}
  #requirements .mac-note{font-size:15px;margin-top:22px}
  #install .install-steps{gap:8px}
  #install .install-steps li{grid-template-columns:36px minmax(0,1fr);gap:4px 16px;padding:22px 20px}
  #install .install-steps li::before{top:25px;right:20px;font-size:12px}
  #install .step-icon{width:34px;height:34px;margin-top:1px}
  #install .install-steps h3{font-size:22px;margin-right:20px}
  #install .install-steps p{font-size:16px;line-height:1.55}
}
@media(prefers-reduced-motion:no-preference){
  #requirements .mac-specs>div:hover .spec-icon,#install .install-steps li:hover .step-icon{transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){.spec-icon,.step-icon{transition:none}}