/*─────────────────────────────────────────────────────────────
      GLOBAL VARIABLES (DESKTOP & MOBILE)
    ─────────────────────────────────────────────────────────────*/
    :root {
      /* Headings */
      --h1-size: 2rem;
      --h1-weight: 400;
      --h1-color: #393737;

      --h2-size: 1.75rem;
      --h2-weight: 500;
      --h2-color: #393737;

      /* Body text */
      --body-size: 1rem;
      --body-line-height: 1.6;
      --body-color: #393737;

      /* Intro paragraphs */
      --intro-size: 1.2rem;
      --intro-weight: 500;
      --intro-color: #393737;
      --intro-max-width: 34em;

      /* Bullets */
      --bullet-symbol: "●";
      --bullet-symbol-size: 0.6em;
      --bullet-color: #393737;
      --bullet-gap: 0.5em;

      /* Section spacing – change this once to affect all gaps */
      --section-gap: 3rem;

      /* GAP BETWEEN BULLETS (or intro) AND NEXT H2 */
      --space-bullets-bottom: .1rem;

      /* Button */
      --btn-font-size: 1.6rem;
      --btn-padding: 0.3em 1.2em;
      --btn-bg: #393737;
      --btn-color: #ffffff;
      --btn-radius: 0.3em;
      --btn-hover-brightness: 3;

      /* Hyperlinks */
      --link-color: #393737;
      --link-hover-color: #f71f13;
      --nav-link-size: 1rem;
    }

    /*─────────────────────────────────────────────────────────────
      RESET & BASE
    ─────────────────────────────────────────────────────────────*/
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: Arial, sans-serif;
      font-size: var(--body-size);
      line-height: var(--body-line-height);
      color: var(--body-color);
      text-align: center;
    }

    /* HEADINGS */
    h1 {
      font-size: var(--h1-size);
      font-weight: var(--h1-weight);
      color: var(--h1-color);
      margin-bottom: 2rem;
      line-height: 1.2;
    }
    h2 {
      font-size: var(--h2-size);
      font-weight: var(--h2-weight);
      color: var(--h2-color);
      margin-bottom: 1rem;
      line-height: 1.3;
    }

    /* INTRO PARAGRAPHS */
    p.intro {
      font-size: var(--intro-size);
      font-weight: var(--intro-weight);
      color: var(--intro-color);
      margin: 0 auto var(--space-bullets-bottom);
      max-width: var(--intro-max-width);
    }

    /* BULLETED PARAGRAPHS */
    .custom-bullets {
      display: inline-block;
      text-align: left;
      margin-bottom: var(--space-bullets-bottom);
    }
    .custom-bullets p {
      position: relative;
      padding-left: calc(var(--bullet-symbol-size) + var(--bullet-gap));
      margin-bottom: 0.5em;
      font-size: var(--body-size);
      line-height: var(--body-line-height);
      color: var(--body-color);
    }
    .custom-bullets p::before {
      content: var(--bullet-symbol);
      position: absolute;
      left: 0;
      top: 0;
      font-size: var(--bullet-symbol-size);
      color: var(--bullet-color);
      line-height: 1;
    }

    /* UNIFORM SECTION SPACING */
    section {
      margin: 0;
    }
    section + section {
      margin-top: var(--section-gap);
    }

    /* BUTTON */
    .btn {
      display: inline-block;
      margin: 0 auto;
      font-size: var(--btn-font-size);
      padding: var(--btn-padding);
      background: var(--btn-bg);
      color: var(--btn-color);
      text-decoration: none;
      border-radius: var(--btn-radius);
      transition: filter 0.2s;
    }
    .btn:hover {
      filter: brightness(var(--btn-hover-brightness));
    }

    /* HYPERLINKS */
    a {
      color: var(--link-color);
      text-decoration: underline;
      transition: color 0.2s ease;
    }
    a:hover {
      color: var(--link-hover-color);
    }

    /* NAVIGATION LINKS */
    .nav-link {
      font-size: var(--nav-link-size);
      color: var(--link-color);
      text-decoration: underline;
      transition: color 0.2s ease;
    }
    .nav-link:hover {
      color: var(--link-hover-color);
    }

    /* DIVIDER LINES */
    .divider {
      width: 15%;
      height: 1px;
      background-color: #a6a6a6;
      margin: 2rem auto;
    }

/*─────────────────────────────────────────────────────────────
 DESKTOP THREE-COLUMN LAYOUT FOR "JOIN OUR COMMUNITY" 
 ─────────────────────────────────────────────────────────────*/
.join-community-links {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-top: 2rem;
}

.join-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

@media only screen and (max-width: 800px) {
  .join-community-links {
    display: block;
    text-align: center;
  }
  .join-column {
    text-align: center;
    margin-bottom: 2rem;
  }
}


    /*─────────────────────────────────────────────────────────────
      MOBILE OVERRIDES (ONLY SCREEN ≤800px)
    ─────────────────────────────────────────────────────────────*/
    @media only screen and (max-width: 800px) {
      :root {
        --h1-size: 1.75rem;
        --h2-size: 1.5rem;
        --body-size: 1rem;
		   --p-size: .7rem;
        --intro-size: 1rem;
        --btn-font-size: 1rem;
        --section-gap: 1.7rem;
        /* keep same gap or tweak here if you want a different mobile-only spacing */
        --space-bullets-bottom: 0rem;
        /* Navigation links mobile font size */
        --nav-link-size: 0.9rem;
      }

      /* force-override for some mobile browsers */
      h1 { font-size: var(--h1-size) !important; }
      h2 { 
        font-size: var(--h2-size) !important;
        margin-bottom: 0.5rem !important;
      }
      body {
        font-size: var(--body-size) !important;
      
      }
      p.intro {
        font-size: var(--intro-size) !important;
        margin-bottom: var(--space-bullets-bottom) !important;
      }
      .custom-bullets {
        margin-bottom: var(--space-bullets-bottom) !important;
      }
      .btn {
        font-size: var(--btn-font-size) !important;
        padding: var(--btn-padding) !important;
      }
      .nav-link {
        font-size: var(--nav-link-size) !important;
      }
    }