.page-promo {
  color: #333333; /* Dark text for light body background */
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding-top: var(--header-offset, 120px); /* Ensure content is below fixed header */
  background-color: #FFFFFF; /* Explicitly set for content area */
}

.page-promo__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-promo__hero-section {
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  padding: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px; /* Minimum height for hero section */
}

.page-promo__hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.7); /* Darken image for text readability, not changing color */
}

.page-promo__hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 40px;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay for text */
  border-radius: 10px;
}

.page-promo__hero-title {
  font-size: 3.2em;
  margin-bottom: 15px;
  color: #FFFFFF;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  line-height: 1.2;
}

.page-promo__hero-description {
  font-size: 1.2em;
  margin-bottom: 30px;
  color: #F0F0F0;
}

.page-promo__hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.page-promo__btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}

.page-promo__btn--primary {
  background-color: #FCBC45; /* Login color for primary action */
  color: #000000;
  border: 2px solid #FCBC45;
}

.page-promo__btn--primary:hover {
  background-color: #e0a53b;
  transform: translateY(-2px);
}

.page-promo__btn--secondary {
  background-color: #000000; /* Main color */
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
}

.page-promo__btn--secondary:hover {
  background-color: #333333;
  transform: translateY(-2px);
}

.page-promo__btn--small {
  padding: 10px 20px;
  font-size: 0.9em;
  background-color: #000000; /* Main color */
  color: #FFFFFF;
  border: 1px solid #000000;
}

.page-promo__btn--small:hover {
  background-color: #333333;
}

.page-promo__btn--large {
  padding: 18px 35px;
  font-size: 1.3em;
  background-color: #FCBC45;
  color: #000000;
  border: 2px solid #FCBC45;
}

.page-promo__btn--large:hover {
  background-color: #e0a53b;
  transform: translateY(-2px);
}

.page-promo__section {
  padding: 60px 0;
  text-align: center;
}

.page-promo__section--overview {
  background-color: #f8f8f8;
}

.page-promo__section-title {
  font-size: 2.5em;
  color: #000000;
  margin-bottom: 20px;
}

.page-promo__section-text {
  font-size: 1.1em;
  max-width: 900px;
  margin: 0 auto 40px auto;
  color: #555555;
}

.page-promo__promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-promo__promo-item {
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.page-promo__promo-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

.page-promo__promo-heading {
  font-size: 1.6em;
  color: #000000;
  margin-bottom: 15px;
}

.page-promo__promo-description {
  font-size: 0.95em;
  color: #666666;
  margin-bottom: 25px;
  flex-grow: 1;
}

.page-promo__featured-card {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  margin-bottom: 50px;
  overflow: hidden;
  text-align: left;
}

.page-promo__featured-card--reverse {
  flex-direction: row-reverse;
}

.page-promo__featured-img {
  width: 50%;
  height: auto;
  object-fit: cover;
  min-width: 200px; /* Ensure min size */
}

.page-promo__featured-content {
  width: 50%;
  padding: 40px;
}

.page-promo__featured-heading {
  font-size: 2em;
  color: #000000;
  margin-bottom: 20px;
}

.page-promo__featured-description {
  font-size: 1.1em;
  color: #555555;
  margin-bottom: 30px;
}

.page-promo__section--how-to {
  background-color: #f0f0f0;
}

.page-promo__steps-list {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.page-promo__step-item {
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: 30px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.page-promo__step-heading {
  font-size: 1.4em;
  color: #000000;
  margin-bottom: 10px;
}

.page-promo__step-description {
  font-size: 0.95em;
  color: #666666;
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-promo__section--why-choose {
  background-color: #FFFFFF;
}

.page-promo__why-list {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.page-promo__why-item {
  background-color: #f8f8f8;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-promo__why-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  display: inline-block;
  min-width: 64px; /* Explicitly set min-width to avoid being smaller than 200px due to general img rules */
  min-height: 64px;
  /* These are icons, so they are allowed to be smaller than 200px as per instructions, 
     but they still need to meet the overall image requirements of being content images, not tiny decorative ones. 
     The prompt stated '禁止所有小图标...任何宽度或高度小于200像素的图片', then gave example icons 32x32, 40x40. 
     I am interpreting this as 'no tiny decorative icons', but content-relevant icons (like these) that are larger 
     than the tiny examples are acceptable, as long as they are not 32x32 etc. and still serve a content purpose. 
     If they must be >=200px, I will adjust. For now, 64x64 for content icons seems reasonable within the spirit of 'no tiny decorative' but not 'no icons at all'. 
     Given the strict 'min 200x200px' rule, I will adjust these to 200x200. */
  width: 200px;
  height: 200px;
}

.page-promo__why-heading {
  font-size: 1.5em;
  color: #000000;
  margin-bottom: 10px;
}

.page-promo__why-description {
  font-size: 0.9em;
  color: #666666;
}

.page-promo__section--faq {
  background-color: #f8f8f8;
}

.page-promo__faq-item {
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 25px;
  margin-bottom: 20px;
  text-align: left;
}

.page-promo__faq-question {
  font-size: 1.3em;
  color: #000000;
  margin-bottom: 10px;
  cursor: pointer;
}

.page-promo__faq-answer {
  font-size: 1em;
  color: #555555;
  display: none; /* Hidden by default, toggled by JS */
}

.page-promo__faq-question.active + .page-promo__faq-answer {
  display: block;
}

.page-promo__section--cta {
  background-color: #000000;
  color: #FFFFFF;
  padding: 80px 0;
}

.page-promo__section--cta .page-promo__section-title {
  color: #FFFFFF;
}

.page-promo__section--cta .page-promo__section-text {
  color: #F0F0F0;
  margin-bottom: 50px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-promo__hero-title {
    font-size: 2.8em;
  }
  .page-promo__featured-card, .page-promo__featured-card--reverse {
    flex-direction: column;
  }
  .page-promo__featured-img,
  .page-promo__featured-content {
    width: 100%;
  }
  .page-promo__featured-img {
    height: 300px; /* Adjust height for smaller screens */
  }
}

@media (max-width: 768px) {
  .page-promo__hero-title {
    font-size: 2.2em;
  }
  .page-promo__hero-description {
    font-size: 1em;
  }
  .page-promo__hero-actions {
    flex-direction: column;
    gap: 15px;
  }
  .page-promo__btn {
    width: 80%;
    margin: 0 auto;
  }
  .page-promo__section-title {
    font-size: 2em;
  }
  .page-promo__promo-grid,
  .page-promo__steps-list,
  .page-promo__why-list {
    grid-template-columns: 1fr;
  }
  .page-promo__featured-content {
    padding: 30px;
  }
  .page-promo__featured-heading {
    font-size: 1.6em;
  }
  .page-promo__featured-img {
    width: 100%;
    height: auto; /* Important for mobile images */
    max-width: 100%;
  }
  .page-promo__promo-img, .page-promo__why-icon { /* Ensure all images within .page-promo are responsive */
    max-width: 100%;
    height: auto;
  }
  /* Specific rule to ensure content images are not shrunk below 200px in mobile */
  .page-promo img {
    max-width: 100% !important;
    min-width: 200px !important;
    min-height: 200px !important;
    height: auto !important;
    object-fit: cover;
  }
  /* Override for specific icon like elements if they are content-relevant but not full images */
  .page-promo__why-icon {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain; /* Icons should contain, not cover */
  }
}

@media (max-width: 480px) {
  .page-promo__hero-title {
    font-size: 1.8em;
  }
  .page-promo__hero-content {
    padding: 20px;
  }
  .page-promo__btn {
    width: 95%;
  }
  .page-promo__section-title {
    font-size: 1.8em;
  }
  .page-promo__section-text {
    font-size: 0.9em;
  }
}