/* Page-Specific Styles */
@layer pages {
  /* Hero Section */
  .hero-section {
    padding-block: var(--sccx-space-3xl);
    background: var(--sccx-primary);
    color: white;
  }

  .hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sccx-space-xl);
    align-items: center;
  }

  @media (min-width: 768px) {
    .hero-content {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Hero Text */
  .hero-text h1 {
    margin-block-end: var(--sccx-space-m);
    color: white;
  }

  .hero-subhead {
    font-size: var(--sccx-text-lg);
    line-height: var(--sccx-leading-relaxed);
    color: oklch(0.9 0.02 var(--sccx-neutral-h));
    margin-block-end: var(--sccx-space-l);
  }

  .hero-actions {
    display: flex;
    gap: var(--sccx-space-m);
    flex-wrap: wrap;
  }

  .hero-image {
    display: flex;
    justify-content: center;
  }

  /* Intro Section */
  .intro-section {
    padding-block: var(--sccx-space-3xl);
  }

  .intro-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sccx-space-xl);
    align-items: center;
  }

  @media (min-width: 768px) {
    .intro-content {
      grid-template-columns: 1.5fr 1fr;
    }
  }

  .intro-text h2 {
    margin-block-end: var(--sccx-space-m);
  }

  .intro-text p {
    color: var(--sccx-text-muted);
    line-height: var(--sccx-leading-relaxed);
    margin-block-end: var(--sccx-space-m);
  }

  /* Features Section */
  .features-section {
    padding-block: var(--sccx-space-3xl);
    background: var(--sccx-surface);
  }

  .features-section h2 {
    text-align: center;
    margin-block-end: var(--sccx-space-2xl);
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sccx-space-l);
  }

  /* Updates Section */
  .updates-section {
    padding-block: var(--sccx-space-3xl);
  }

  .updates-section h2 {
    text-align: center;
    margin-block-end: var(--sccx-space-m);
  }

  .updates-intro {
    max-inline-size: 800px;
    margin-inline: auto;
    text-align: center;
    margin-block-end: var(--sccx-space-2xl);
  }

  .updates-intro p {
    color: var(--sccx-text-muted);
    line-height: var(--sccx-leading-relaxed);
    margin-block-end: var(--sccx-space-m);
  }

  .updates-cta {
    font-weight: var(--sccx-weight-semibold);
    color: var(--sccx-primary);
  }

  .updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sccx-space-l);
  }

  /* Gallery Section */
  .gallery-section {
    padding-block: var(--sccx-space-3xl);
    background: var(--sccx-surface);
  }

  .gallery-section h2 {
    text-align: center;
    margin-block-end: var(--sccx-space-m);
  }

  .gallery-intro {
    text-align: center;
    color: var(--sccx-text-muted);
    margin-block-end: var(--sccx-space-2xl);
  }

  /* Contact Section */
  .contact-section {
    padding-block: var(--sccx-space-3xl);
  }

  .contact-section h2 {
    text-align: center;
    margin-block-end: var(--sccx-space-m);
  }

  .contact-intro {
    text-align: center;
    color: var(--sccx-text-muted);
    margin-block-end: var(--sccx-space-2xl);
  }

  /* Compliance Section */
  .compliance-section {
    padding-block: var(--sccx-space-2xl);
    background: oklch(var(--sccx-primary-l) var(--sccx-primary-c) var(--sccx-primary-h) / 0.05);
  }

  .compliance-content {
    max-inline-size: 800px;
    margin-inline: auto;
    text-align: center;
  }

  .compliance-content h2 {
    margin-block-end: var(--sccx-space-m);
  }

  .compliance-content p {
    color: var(--sccx-text-muted);
    line-height: var(--sccx-leading-relaxed);
  }

  .compliance-content a {
    color: var(--sccx-primary);
    font-weight: var(--sccx-weight-medium);
  }
}