/*
        This pricing page was hand‑crafted for SustainZone and takes inspiration
        from Persefoni’s pricing structure.  It uses modern, responsive
        techniques and minimal styling to remain consistent with the existing
        SustainZone design language (clean typography, generous white space and
        subtle use of brand colours).  Feel free to adjust the variables below
        to better align with your brand palette.
      */
      :root {
        --color-primary: #0a0a23;
        --color-secondary: #009a3e; /* accent green similar to SustainZone */
        --color-background: #ffffff;
        --color-surface: #f8f9fa;
        --color-border: #e0e0e0;
        --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }

      html {
        box-sizing: border-box;
      }
      *, *::before, *::after {
        box-sizing: inherit;
      }

      body {
        margin: 0;
        font-family: var(--font-base);
        background-color: var(--color-background);
        color: var(--color-primary);
        line-height: 1.5;
      }

      /* Global containers */
      .container {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 0;
      }

      /* Header */
      header {
        position: sticky;
        top: 0;
        z-index: 999;
        background: var(--color-background);
        border-bottom: 1px solid var(--color-border);
      }
      header nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
      }
      header .logo {
        font-weight: bold;
        font-size: 1.3rem;
        color: var(--color-primary);
        text-decoration: none;
      }
      header .nav-links {
        display: flex;
        align-items: center;
        gap: 2rem;
      }
      header .nav-links a {
        text-decoration: none;
        color: var(--color-primary);
        font-weight: 500;
        transition: color 0.2s ease;
      }
      header .nav-links a:hover {
        color: var(--color-secondary);
      }
      header .cta {
        margin-left: 2rem;
      }
      .btn {
        display: inline-block;
        padding: 0.75rem 1.25rem;
        border-radius: 999px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s ease;
      }
      .btn-primary {
        background-color: var(--color-secondary);
        color: #fff;
      }
      .btn-primary:hover {
        background-color: #007f32;
      }
      .btn-outline {
        border: 2px solid var(--color-secondary);
        color: var(--color-secondary);
      }
      .btn-outline:hover {
        background-color: var(--color-secondary);
        color: #fff;
      }

      /* Hero section */
      .hero {
        text-align: center;
        padding: 4rem 0 2rem;
        background: var(--color-surface);
      }
      .hero h1 {
        font-size: 2.25rem;
        margin: 0;
        font-weight: 700;
      }
      .hero p {
        margin-top: 1rem;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        color: #4a4a68;
        font-size: 1.125rem;
      }

      /* Plan cards */
      .plans {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        margin-top: 3rem;
      }
      .plan {
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .plan h3 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
      }
      .plan .tagline {
        font-size: 0.875rem;
        color: var(--color-secondary);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 1rem;
      }
      .plan p {
        flex-grow: 1;
        color: #5a5a7a;
        margin-bottom: 1rem;
      }
      .features {
        list-style: none;
        padding: 0;
        margin: 0 0 1rem 0;
      }
      .features li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0.5rem;
      }
      .features li::before {
        content: "✓";
        color: var(--color-secondary);
        font-weight: bold;
        margin-right: 0.5rem;
      }
      .plan .cta {
        margin-top: 1rem;
        text-align: center;
      }

      /* Feature comparison table */
      .comparison {
        margin-top: 4rem;
        overflow-x: auto;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        background: var(--color-surface);
      }
      th, td {
        padding: 0.75rem 1rem;
        border: 1px solid var(--color-border);
        text-align: left;
      }
      th {
        background-color: var(--color-background);
        font-weight: 600;
      }
      td {
        vertical-align: top;
      }
      tr:nth-child(even) td {
        background-color: var(--color-background);
      }
      .center {
        text-align: center;
      }
      .tick {
        color: var(--color-secondary);
        font-weight: bold;
      }
      .addon {
        color: #9a841a;
        font-style: italic;
      }
      .coming {
        color: #888;
        font-style: italic;
      }

      /* FAQ styles */
      .faq {
        margin-top: 4rem;
      }
      .faq h2 {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
        text-align: center;
      }
      .faq-item {
        margin-bottom: 1.5rem;
      }
      .faq-item h3 {
        margin: 0;
        font-size: 1.125rem;
        cursor: pointer;
      }
      .faq-item p {
        margin: 0.5rem 0 0;
        color: #5a5a7a;
        display: none;
      }

      /* Show answer when input is checked */
      .faq-item input {
        display: none;
      }
      .faq-item input:checked ~ p {
        display: block;
      }

      .faq-item label {
        display: block;
      }

      @media (max-width: 600px) {
        .hero h1 {
          font-size: 1.8rem;
        }
      }