.page-support {\n  font-family: Arial, sans-serif;\n  line-height: 1.6;\n  color: #333333; /* Default text color for light background */\n  background-color: var(--background-color, #FFFFFF); /* Inherit from shared, default to white */\n}\n\n.page-support__hero-section {\n  position: relative;\n  width: 100%;\n  height: 60vh; /* Adjust as needed */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  overflow: hidden;\n  padding-top: var(--header-offset, 120px); /* Applied in default style for header offset */\n}\n\n.page-support__hero-image {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: 1;\n}\n\n.page-support__hero-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.6); /* Dark overlay for text readability */\n  z-index: 2;\n}\n\n.page-support__hero-content {\n  position: relative;\n  z-index: 3;\n  color: #FFFFFF;\n  max-width: 800px;\n  padding: 20px;\n}\n\n.page-support__hero-title {\n  font-size: 3em;\n  margin-bottom: 20px;\n  color: #FFFFFF;\n}\n\n.page-support__hero-description {\n  font-size: 1.2em;\n  margin-bottom: 30px;\n}\n\n.page-support__section-title {\n  font-size: 2.5em;\n  text-align: center;\n  margin-bottom: 20px;\n  color: #017439; /* Brand color for titles */\n}\n\n.page-support__section-description {\n  font-size: 1.1em;\n  text-align: center;\n  max-width: 900px;\n  margin: 0 auto 40px auto;\n  padding: 0 15px;\n}\n\n.page-support__container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 40px 20px;\n}\n\n/* Background color rules for contrast */\n.page-support__dark-bg {\n  background-color: #017439;\n  color: #FFFFFF;\n}\n\n.page-support__dark-bg .page-support__section-title {\n  color: #FFFFFF;\n}\n\n.page-support__light-bg {\n  background-color: #FFFFFF;\n  color: #333333;\n}\n\n/* Buttons */\n.page-support__btn-primary {\n  display: inline-block;\n  background-color: #C30808; /* Register/Login color */\n  color: #FFFF00; /* Register/Login font color */\n  padding: 15px 30px;\n  border-radius: 5px;\n  text-decoration: none;\n  font-weight: bold;\n  transition: background-color 0.3s ease;\n  border: none;\n  cursor: pointer;\n}\n\n.page-support__btn-primary:hover {\n  background-color: #a30707;\n}\n\n.page-support__btn-secondary {\n  display: inline-block;\n  background-color: #017439; /* Main brand color */\n  color: #FFFFFF; /* White text for contrast */\n  padding: 15px 30px;\n  border-radius: 5px;\n  text-decoration: none;\n  font-weight: bold;\n  transition: background-color 0.3s ease;\n  border: none;\n  cursor: pointer;\n}\n\n.page-support__btn-secondary:hover {\n  background-color: #005f2c;\n}\n\n.page-support__cta-buttons {\n  display: flex;\n  justify-content: center;\n  gap: 20px;\n  margin-top: 30px;\n  flex-wrap: wrap; /* Allow wrapping on small screens */\n}\n\n/* Channels Section */\n.page-support__channels-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 30px;\n  margin-top: 50px;\n  margin-bottom: 40px;\n}\n\n.page-support__channel-card {\n  background-color: #f9f9f9;\n  padding: 30px;\n  border-radius: 8px;\n  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\n  text-align: center;\n  transition: transform 0.3s ease;\n}\n\n.page-support__channel-card:hover {\n  transform: translateY(-5px);\n}\n\n.page-support__channel-title {\n  font-size: 1.8em;\n  color: #017439;\n  margin-bottom: 15px;\n}\n\n.page-support__channel-text {\n  margin-bottom: 20px;\n}\n\n/* FAQ Section */\n.page-support__faq-list {\n  max-width: 900px;\n  margin: 50px auto;\n}\n\n.page-support__faq-item {\n  background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white on dark background */\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n  margin-bottom: 10px;\n  border-radius: 8px;\n  overflow: hidden;\n  color: #FFFFFF;\n}\n\n.page-support__faq-item summary {\n  list-style: none; /* Hide default marker */\n  cursor: pointer;\n  padding: 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-weight: bold;\n  font-size: 1.1em;\n  transition: background-color 0.3s ease;\n}\n\n.page-support__faq-item summary:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.page-support__faq-item summary::-webkit-details-marker {\n  display: none;\n}\n