/*--------------------------------------------------------------
# 5G IPTV Setup Guide page styles
# Scoped gs-* classes so existing site styles are unaffected
--------------------------------------------------------------*/
.gs-wrap { max-width: 920px; margin: 0 auto; }
.gs-wrap h1 { font-size: 30px; font-weight: 700; color: #222222; margin-bottom: 15px; }
.gs-wrap h2 { font-size: 24px; font-weight: 700; color: #106eea; margin: 40px 0 15px; padding-bottom: 8px; border-bottom: 2px solid #e7f1fd; }
.gs-wrap h3 { font-size: 18px; font-weight: 600; color: #222222; margin: 22px 0 8px; }
.gs-wrap p, .gs-wrap li { font-size: 15px; line-height: 1.8; color: #555555; }
.gs-wrap ul { padding-left: 20px; }
.gs-wrap .gs-lead { font-size: 16px; color: #444444; }

/* Checklist / info cards */
.gs-card { background: #f8fbff; border: 1px solid #e7f1fd; border-left: 4px solid #106eea; border-radius: 6px; padding: 16px 18px; margin: 14px 0; }
.gs-card h3 { margin-top: 0; }

/* Numbered setup steps */
.gs-step { display: flex; gap: 16px; margin: 16px 0; }
.gs-num { flex: 0 0 40px; height: 40px; background: #106eea; color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.gs-body { flex: 1; }
.gs-body h3 { margin: 0 0 6px; font-size: 17px; }

/* Device grid */
.gs-devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 20px 0; }
.gs-device { background: #ffffff; border: 1px solid #e7f1fd; border-radius: 8px; padding: 16px 18px; }
.gs-device h3 { margin-top: 0; font-size: 16px; color: #106eea; }
.gs-device p { font-size: 14px; margin-bottom: 0; }

/* Tip / note box */
.gs-tip { background: #fff8e6; border-left: 4px solid #f59e0b; border-radius: 6px; padding: 14px 18px; margin: 20px 0; font-size: 15px; }
.gs-note { background: #f1f6fe; border-radius: 6px; padding: 16px 18px; margin: 24px 0; font-size: 15px; }
.gs-note a { color: #106eea; font-weight: 600; }

/* Buttons */
.gs-cta { display: inline-block; background: #106eea; color: #ffffff !important; padding: 12px 26px; border-radius: 4px; font-weight: 600; font-size: 15px; text-decoration: none; margin: 4px 8px 4px 0; }
.gs-cta:hover { background: #0d5cc7; color: #ffffff !important; }
.gs-cta.gs-cta-outline { background: transparent; color: #106eea !important; border: 1px solid #106eea; }
.gs-cta.gs-cta-outline:hover { background: #106eea; color: #ffffff !important; }

@media (max-width: 768px) {
  .gs-wrap h1 { font-size: 24px; }
  .gs-wrap h2 { font-size: 20px; }
  .gs-step { flex-direction: column; gap: 8px; }
}