/* ================== */
/* Section Styles     */
/* ================== */

/* Styles for specific section wrappers identified by ID or unique class.
   Many sections will primarily use .section-container (from layout.css)
   and the specific component/card styles within them.
   This file is for sections that need unique wrapper styling beyond that. */


/* --- General Section Enhancements --- */
/* Example: A section with a slightly different background */
.section-highlight {
  background-color: var(--card-background); /* Or a very light tint */
  /* If using .section-container-bleed for full width: */
  /* padding: 0; Then the .content-wrapper inside handles padding */
}
/* If .section-highlight is applied directly to .section-container: */
/* .section-highlight.section-container { padding-top: 4rem; padding-bottom: 4rem; } */


/* --- Leaderboard Section --- */
#leaderboard {
  /* Uses .section-container for width/horizontal padding and default vertical padding */
  /* If a different background is needed for the whole section: */
  /* background-color: var(--another-background-color); */
  /* For full-width background, wrap its content in .content-wrapper and apply bg to #leaderboard */
}
#leaderboard .section-title, /* Or h2 directly */
#leaderboard .section-subtitle {
    /* Specific overrides for title/subtitle color if section bg is dark, etc. */
}


/* --- Progress Section --- */
#progress {
  /* Uses .section-container for width/horizontal padding and default vertical padding */
  /* Similar to #leaderboard, can have specific background if needed */
}


/* --- Call-to-Action (CTA) Section --- */
/* Using .cta-section class selector for versatility */
.cta-section {
  text-align: center;
  padding: 5rem 2rem; /* Generous padding */
  color: white; /* Default text color for this section */
  border-radius: 20px; /* Modern, larger radius */
  margin: 4rem auto; /* Increased spacing above/below */
  position: relative; /* For pseudo-elements or overlays */
  overflow: hidden; /* Contain any decorative elements */

  /* Gradient background */
  background: linear-gradient(
    135deg, /* Adjusted angle */
    var(--gradient-start),
    var(--gradient-middle),
    var(--gradient-end)
  );
  background-size: 150% 150%; /* Slightly less aggressive sizing for smoother animation */
  animation: gradientAnimation 12s ease infinite alternate; /* Slower, alternating animation */

  /* Consider adding a subtle pattern overlay or noise */
  /* background-image: linear-gradient(...), url('path/to/noise.png'); */

  box-shadow: 0 10px 30px rgba(var(--primary-color-rgb), 0.2); /* Themed shadow */
}

/* If #cta ID is used and needs to be full-width visually */
/*
#cta.section-container-bleed {
    padding: 0; // Reset padding on the bleed container
}
#cta.section-container-bleed .content-wrapper {
    padding: 5rem 2rem; // Apply padding to the inner content
    text-align: center;
    color: white;
    position: relative; // For z-indexing if needed
    z-index: 1;
}
#cta.section-container-bleed {
    background: linear-gradient(...); // Apply gradient to the outer full-width #cta
    animation: gradientAnimation ...;
    border-radius: 0; // Full width sections usually don't have radius unless content does
    margin: 4rem 0; // Full width sections often have 0 auto margin
    box-shadow: none; // Shadow might be on inner content or not at all
}
*/


.cta-section h2 { /* Styling for heading within CTA */
  color: white; /* Ensure heading is white */
  margin-bottom: 1.25rem; /* Adjusted margin */
  font-size: 2.8rem; /* Larger for impact, or use h1/h2 from base */
  text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.cta-section .cta-description { /* Paragraph text within CTA */
  font-size: 1.25rem; /* Adjusted size */
  margin: 0 auto 2.5rem; /* Center block and add bottom margin */
  max-width: 700px; /* Limit text width */
  opacity: 0.9; /* Slightly transparent */
  color: white; /* Ensure white text */
  line-height: 1.7;
}

.cta-section .cta-note { /* Small note within CTA */
  margin-top: 1.5rem; /* Increased margin */
  font-size: 0.9rem; 
  opacity: 0.85; /* Slightly more visible */
  color: white; /* Ensure white text */
}
/* Buttons (.cta-buttons) are styled in buttons.css */


/* --- App Preview Section Wrapper --- */
/* #app-preview is the section ID from index.html */
#app-preview {
    background-color: var(--background-color); /* Or a subtle contrasting color like #EDEFF2 */
    /* Use .section-container-bleed for full width background */
}
/* If #app-preview uses .section-container-bleed */
/*
#app-preview.section-container-bleed { padding: 0; }
#app-preview.section-container-bleed .content-wrapper {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
*/
#app-preview .section-title {
    margin-bottom: 1rem;
}
#app-preview .section-subtitle {
    margin-bottom: 3rem; /* More space before the mockup */
}
/* .app-preview-placeholder and .mockup-ui are in components.css */



/* --- Social Feed Container --- */
/* Note: Individual posts (.social-post) are styled in cards.css */
.social-feed-section { /* If you wrap the .social-feed in a dedicated section */
    /* background-color: var(--another-bg); */
    /* padding-top: 4rem; padding-bottom: 4rem; */
}
.social-feed {
  max-width: 700px; /* Slightly reduced width for a more focused feed */
  margin: 2.5rem auto; /* Center feed and add vertical spacing */
}


/* --- User Welcome Section (Dashboard) --- */
.user-welcome { /* This is likely a smaller component within a dashboard page */
  text-align: center;
  padding: 2rem 1rem; /* Spacing for the welcome message */
  margin-bottom: 1.5rem; /* Space after welcome message before dashboard cards */
  /* background-color: var(--card-background); /* Optional: Give it a card-like bg */
  /* border-radius: 12px; */
  /* box-shadow: 0 4px 10px rgba(0,0,0,0.05); */
}

.user-welcome h2 {
  color: var(--primary-color); /* Use theme color for welcome heading */
  font-size: 2rem; /* Adjust size as needed */
  margin-bottom: 0.5rem;
}
.user-welcome p { /* Sub-text for welcome message */
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 0;
}


/* --- "Triple Threat" Section (#triple-threat from index.html) --- */
#triple-threat {
    /* This section primarily uses .section-container for layout. */
    /* If specific background or padding needed beyond .section-container, add here */
    /* e.g., background-color: #FAFBFC; */
}
#triple-threat .section-title { /* Or h2 */
    margin-bottom: 1rem; /* Adjust if needed */
}
#triple-threat .section-subtitle {
    margin-bottom: 3rem; /* More space before the triple-items */
}
/* .triple-container and .triple-item are styled in layout.css and cards.css */


/* --- Specific styles for Pricing page sections (from pricing.html) --- */
#pricing-page-header { /* Specific ID for pricing page header from pricing.html */
    padding-top: 5rem; /* Increased padding */
    padding-bottom: 5rem;
    text-align: center;
    /* color: white; /* Already in header.css via header tag general style */
    /* animated-gradient class is applied in HTML for background */
}

#pricing-page-header h1 {
    font-size: 3rem; /* Adjust size */
    margin-bottom: 1rem;
    color: white; /* Ensure white */
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

#pricing-page-header .section-subtitle { /* This is a p tag in pricing.html */
    font-size: 1.3rem;
    opacity: 0.9;
    color: white; /* Ensure subtitle is visible on gradient */
    margin-bottom: 0; /* No extra margin if it's the last element in header */
}

#pricing-details { /* Section containing the main pricing card */
    padding-top: 3rem;
    padding-bottom: 1rem; /* Reduced bottom padding as value prop follows */
}

.value-proposition-section {
  /* background-color: var(--background-color); */ /* Default from body */
  /* Or use a subtle contrast: background-color: #f0f4f8; */
  /* Use .section-container-bleed if full width background needed */
  /* Padding is handled by .section-container or .content-wrapper */
}
/* .value-card-container and .value-card are in pricing.html inline or cards.css */

.faq-section {
  /* Padding is handled by .section-container or .content-wrapper */
}
/* .faq-item, .faq-question, .faq-answer are in pricing.html inline or components.css */


@media (max-width: 768px) {
    .cta-section {
        padding: 4rem 1.5rem;
        margin: 3rem auto;
    }
    .cta-section h2 {
        font-size: 2.2rem;
    }
    .cta-section .cta-description {
        font-size: 1.1rem;
    }

    #pricing-page-header {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    #pricing-page-header h1 {
        font-size: 2.4rem;
    }
    #pricing-page-header .section-subtitle {
        font-size: 1.1rem;
    }
}

/* --- Value Proposition Section (Pricing Page) --- */
/* ... existing .value-proposition-section styles ... */

.total-value-highlight { /* For the "Get all this for just $X" text */
  text-align: center;
  margin-top: 3rem; /* More space above */
  padding: 1.5rem;
  background-color: rgba(var(--primary-color-rgb), 0.08); /* Themed highlight background */
  border-radius: 12px;
  border: 1px solid rgba(var(--primary-color-rgb), 0.2);
}
.total-value-highlight p {
  font-size: 1.25rem; /* Larger text */
  font-weight: 500; /* Medium weight */
  color: var(--text-color); /* Use main text color */
  margin-bottom: 0; /* No bottom margin for this p */
}
.total-value-highlight strong { /* For the price part */
  color: var(--primary-color);
  font-weight: 700; /* Bold price */
}