/* Basic Reset & Typography */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: Amplitude, Arial, sans-serif;
      background-color: #fff;
      color: #333;
      line-height: 1.6;
    }
    a {
      text-decoration: none;
      color: #f06425; /* Orange accent */
    }

    /* HEADER & NAVIGATION */
    header {
      background-color: #2f3a56; /* Purple bar across full width */
      padding: 1rem 0;          /* Only top/bottom padding so it spans the screen */
    }

    /* .header-content centers the logo+nav within max-width */
    .header-content {
      max-width: 1000px;
      margin: 0 auto;               /* Centers this container horizontally */
      display: flex;
      align-items: center;
      justify-content: space-between;      
    }

    /* Logo (left side) */
    .logo {
      display: flex;
      align-items: center;
    }
    .logo img {
      height: 40px;
      margin-right: 0.5rem;
    }
    .logo span {
      font-size: 1.4rem;
      color: #f06425;
      font-weight: bold;
    }

    /* Nav (right side) */
    nav a {
      margin-left: 1.5rem; /* space each nav link */
      color: #ffffff;
      font-weight: bold;
    }

    /* HERO SECTION */
    .hero {
      max-width: 1000px;
      margin: 2rem auto;
      padding: 1rem;
      text-align: center;
    }
    .hero h1 {
      font-size: 2rem;
      margin-bottom: 0.75rem;
      color: #67647a;
    }
    .hero p.subhead {
      color: #f06425;
      font-size: 1.1rem;
      margin-bottom: 1rem;
      font-weight: 700;
    }

    .hero-image-text {
      display: flex;             /* Put image & text side by side */
      align-items: flex-start;   /* Top-align them */
      gap: 1rem;                 /* Space between image and text */
      margin-bottom: 2rem;       /* Give some spacing after the block */
      text-align: left; 
    }

    .hero-image-text .icon {
      width: 100px;              /* Or whatever size you want */
      height: auto;              /* Keeps the aspect ratio */
    }

    .intro-text {
      /* You can add additional styling for the text block if needed */
      line-height: 1.5;
    }

    .divider {
      width: 100%;    /* full width of the hero container */
      height: 2px;
      background-color: #ccc;
      margin: 1rem auto;
    }
    .hero .intro {
      font-size: 1rem;
      margin-bottom: 2rem;
      line-height: 1.5;
      color: #555;
      text-align: left;
    }

    /* EMAIL FORM SECTION */
    .email-box {
      
      align-items: center;
      background-color: #e3e1f7;
      border-radius: 12px;
      padding: 1.5rem;
      margin: 0 auto;
      max-width: 750px;
    }
    .email-box label {
      display: block;
      font-weight: bold;
      margin-bottom: 1rem;
      font-size: 1.1rem;
    }
   
    /* CONTENT SECTIONS (Core Value Proposition, Why ZMOY, etc.) */
    .content-section {
      max-width: 1000px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    .content-section h2 {
      font-size: 1.6rem;
      margin-bottom: 1rem;      
      color: #67647a;
    }
    .content-section ul {
      list-style: none;
      margin-left: 0;
      padding-left: 0;
    }

    .content-section ol {
      /* Show decimal numbering */
      list-style: decimal;

      /* Puts the numbers inside the content area rather than outside */
      list-style-position: inside;

      /* Adjust margins/padding so they line up with your text */
      margin-left: 0;
      padding-left: 0;
    }

    .content-section ol li::marker {
      color: #f06425;  /* your orange */
      font-weight: bold;
    }
    
    .content-section li {
      margin-bottom: 1.5rem;
      line-height: 1.4;
    }
    .content-section li strong {
      color: #f06425;
    }

    /* CTA SECTION (Bottom) */
    .cta-section {
      text-align: center;
      padding: 2rem 1rem;
      background-color: #f7f7f7;
    }
    .cta-section h3 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }
    .cta-section p {
      margin-bottom: 1rem;
    }
    .cta-section a {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background-color: #f06425;
      color: #fff;
      border-radius: 4px;
      font-weight: bold;
      transition: background-color 0.2s ease-in-out;
    }
    .cta-section a:hover {
      background-color: #d9541e;
    }

    /* FOOTER */
    footer {
      text-align: center;
      padding: 1rem;
      background-color: #eeeeee;
      margin-top: 2rem;
    }
    footer p {
      font-size: 0.9rem;
      color: #333;
    }

    /* RESPONSIVE LAYOUT */
    @media (max-width: 1000px) {
      .header-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 1rem;
      }
      nav a {
        margin-left: 0;
      }
      .hero h1 {
        font-size: 1.4rem;
      }
      .hero p.subhead {
        font-size: 1rem;
      }
     
    }