<!--
  Visionary Capacity Builders public program page
  Primary surface: Zoho LandingPage custom HTML section
  Replace every ALL_CAPS URL placeholder before publishing.
-->
<style>
  .vcb-page {
    --vcb-ink: #191511;
    --vcb-purple: #4b255f;
    --vcb-teal: #006c73;
    --vcb-gold: #b87717;
    --vcb-cream: #f8f1e7;
    --vcb-white: #ffffff;
    --vcb-muted: #5e574f;
    --vcb-line: #ddd0bf;
    color: var(--vcb-ink);
    background: var(--vcb-white);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.6;
  }
  .vcb-page *, .vcb-page *::before, .vcb-page *::after { box-sizing: border-box; }
  .vcb-page a { color: var(--vcb-purple); text-underline-offset: .18em; }
  .vcb-page a:focus-visible { outline: 3px solid var(--vcb-gold); outline-offset: 4px; }
  .vcb-skip { position: absolute; left: -9999px; top: 0; z-index: 10; }
  .vcb-skip:focus { left: 1rem; top: 1rem; background: var(--vcb-white); padding: .75rem 1rem; }
  .vcb-wrap { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
  .vcb-section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
  .vcb-soft { background: var(--vcb-cream); }
  .vcb-dark { background: var(--vcb-ink); color: var(--vcb-white); }
  .vcb-dark a:not(.vcb-button) { color: #f2c879; }
  .vcb-kicker { margin: 0 0 .75rem; color: var(--vcb-gold); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .vcb-title, .vcb-page h2, .vcb-page h3 { line-height: 1.12; margin-top: 0; }
  .vcb-title { max-width: 17ch; margin-bottom: 1rem; font-size: clamp(2.5rem, 7vw, 5.6rem); letter-spacing: -.045em; }
  .vcb-page h2 { max-width: 22ch; margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.025em; }
  .vcb-page h3 { margin-bottom: .65rem; font-size: clamp(1.25rem, 2.3vw, 1.65rem); }
  .vcb-lead { max-width: 64ch; font-size: clamp(1.12rem, 2vw, 1.35rem); }
  .vcb-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }
  .vcb-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .75rem 1.15rem; border: 2px solid var(--vcb-purple); border-radius: .35rem; background: var(--vcb-purple); color: var(--vcb-white) !important; font-weight: 800; text-decoration: none; }
  .vcb-button:hover { background: #371847; border-color: #371847; }
  .vcb-button--disabled { cursor: not-allowed; opacity: .7; }
  .vcb-button--disabled small { margin-left: .45rem; font-size: .72em; font-weight: 700; }
  .vcb-button--light { border-color: var(--vcb-white); background: transparent; }
  .vcb-button--light:hover { background: var(--vcb-white); color: var(--vcb-ink) !important; }
  .vcb-hero { padding: clamp(4rem, 10vw, 8rem) 0; background: linear-gradient(135deg, var(--vcb-cream) 0 64%, #eadbc5 64%); }
  .vcb-hero-grid, .vcb-grid-2 { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .vcb-hero-grid { grid-template-columns: 1.25fr .75fr; }
  .vcb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcb-hero-image { width: 100%; max-height: 600px; object-fit: contain; border: 1px solid var(--vcb-line); box-shadow: 0 18px 45px rgba(25, 21, 17, .16); background: var(--vcb-white); }
  .vcb-measure { max-width: 70ch; }
  .vcb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
  .vcb-card { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--vcb-line); border-radius: .55rem; background: var(--vcb-white); }
  .vcb-card p:last-child { margin-bottom: 0; }
  .vcb-tags { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; list-style: none; }
  .vcb-tags li { padding: .48rem .75rem; border: 1px solid var(--vcb-line); border-radius: 999px; background: var(--vcb-white); font-weight: 700; }
  .vcb-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; padding: 0; list-style: none; counter-reset: vcb-step; }
  .vcb-steps li { counter-increment: vcb-step; padding: 1.15rem; border-top: 4px solid var(--vcb-gold); background: var(--vcb-white); }
  .vcb-steps li::before { content: counter(vcb-step); display: block; color: var(--vcb-purple); font-size: 1.8rem; font-weight: 900; }
  .vcb-callout { padding: clamp(1.6rem, 4vw, 3rem); border-left: 8px solid var(--vcb-gold); background: var(--vcb-cream); }
  .vcb-note { color: var(--vcb-muted); font-size: .95rem; }
  .vcb-final { text-align: center; }
  .vcb-final h2, .vcb-final .vcb-lead { margin-inline: auto; }
  @media (max-width: 860px) {
    .vcb-hero-grid, .vcb-grid-2, .vcb-cards { grid-template-columns: 1fr; }
    .vcb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vcb-hero { background: var(--vcb-cream); }
  }
  @media (max-width: 520px) {
    .vcb-page { font-size: 17px; }
    .vcb-wrap { width: min(100% - 1.25rem, 1120px); }
    .vcb-actions, .vcb-button { width: 100%; }
    .vcb-steps { grid-template-columns: 1fr; }
  }
</style>

<main class="vcb-page" id="vcb-top">
  <a class="vcb-skip" href="#vcb-main">Skip to program information</a>

  <section class="vcb-hero" aria-labelledby="vcb-title">
    <div class="vcb-wrap vcb-hero-grid">
      <div>
        <p class="vcb-kicker">Better We, Inc. presents</p>
        <h1 class="vcb-title" id="vcb-title">Visionary Capacity Builders</h1>
        <p class="vcb-lead"><strong>You've already built something. Let's strengthen what's underneath it.</strong></p>
        <p class="vcb-measure">A practical capacity-building program for entrepreneurs, small businesses, and nonprofit organizations ready to strengthen their foundations, expand what works, and connect community support to clear needs.</p>
        <div class="vcb-actions">
          <span class="vcb-button vcb-button--disabled" aria-disabled="true" data-future-href="GIVEBUTTER_CAPACITY_BUILDER_PROGRAM_URL">Explore the program <small>Coming soon</small></span>
          <a class="vcb-button vcb-button--light" href="#vcb-how">See how it works</a>
        </div>
      </div>
      <div>
        <img class="vcb-hero-image" src="https://previewengine-accl.zohoexternal.com/image/WD/jp7nmb6beac9c2b8644d08ab6d4ea250e6356?version=1.0&amp;width=2046&amp;height=1536" alt="Community news-style Visionary Capacity Builders launch graphic for The Fish Hut in Hemet" loading="eager">
      </div>
    </div>
  </section>

  <div id="vcb-main">
    <section class="vcb-section" aria-labelledby="vcb-what">
      <div class="vcb-wrap vcb-grid-2">
        <div>
          <p class="vcb-kicker">What this is</p>
          <h2 id="vcb-what">Capacity before crisis</h2>
        </div>
        <div class="vcb-measure">
          <p>Visionary Capacity Builders helps people strengthen the systems, tools, relationships, and resources beneath work that already matters. It is not a grant contest and it does not ask builders to become someone else. It helps make the next responsible step more visible and more possible.</p>
          <p>The public page explains the program. Givebutter holds the live program environment and each individual Capacity Builder campaign.</p>
        </div>
      </div>
    </section>

    <section class="vcb-section vcb-soft" aria-labelledby="vcb-capacity">
      <div class="vcb-wrap">
        <p class="vcb-kicker">What can be strengthened</p>
        <h2 id="vcb-capacity">The work beneath the work</h2>
        <ul class="vcb-tags" aria-label="Capacity areas">
          <li>Operations</li><li>Equipment</li><li>Financial systems</li><li>Technology</li><li>Communications</li><li>Team development</li><li>Governance</li><li>Partnerships</li><li>Fundraising readiness</li><li>Learning and planning</li>
        </ul>
      </div>
    </section>

    <section class="vcb-section" id="vcb-how" aria-labelledby="vcb-how-title">
      <div class="vcb-wrap">
        <p class="vcb-kicker">How it works</p>
        <h2 id="vcb-how-title">A clear path from need to capacity</h2>
        <ol class="vcb-steps">
          <li><strong>Learn.</strong><br>Clarify the capacity need and the change it can unlock.</li>
          <li><strong>Build.</strong><br>Shape a practical plan around the builder's real context.</li>
          <li><strong>Connect.</strong><br>Link useful people, knowledge, tools, and local relationships.</li>
          <li><strong>Resource.</strong><br>Invite in-kind, professional, and community support.</li>
          <li><strong>Fundraise.</strong><br>Use a dedicated Givebutter campaign when financial support is part of the plan.</li>
        </ol>
      </div>
    </section>

    <section class="vcb-section vcb-soft" aria-labelledby="vcb-pathways">
      <div class="vcb-wrap">
        <p class="vcb-kicker">Choose a pathway</p>
        <h2 id="vcb-pathways">Different structures. Shared commitment to stronger foundations.</h2>
        <div class="vcb-cards">
          <article class="vcb-card">
            <h3>Entrepreneurs &amp; Small Businesses</h3>
            <p>For established or emerging community-serving ventures that need stronger operating capacity, equipment, systems, visibility, or strategic support.</p>
            <p><span class="vcb-button vcb-button--disabled" aria-disabled="true" data-future-href="GIVEBUTTER_ENTREPRENEUR_PATHWAY_URL">Explore this pathway <small>Coming soon</small></span></p>
          </article>
          <article class="vcb-card">
            <h3>Nonprofit Organizations</h3>
            <p>For mission-driven organizations strengthening governance, infrastructure, fundraising readiness, program delivery, communications, or team capacity.</p>
            <p><span class="vcb-button vcb-button--disabled" aria-disabled="true" data-future-href="GIVEBUTTER_NONPROFIT_PATHWAY_URL">Explore this pathway <small>Coming soon</small></span></p>
          </article>
        </div>
      </div>
    </section>

    <section class="vcb-section vcb-dark" aria-labelledby="vcb-givebutter">
      <div class="vcb-wrap vcb-grid-2">
        <div>
          <p class="vcb-kicker">The live program environment</p>
          <h2 id="vcb-givebutter">Meet the current Capacity Builders</h2>
        </div>
        <div class="vcb-measure">
          <p>Givebutter is where current Capacity Builder campaigns live. Each campaign can carry the builder's story, defined capacity need, progress, updates, and ways to contribute. The program page stays evergreen while the live campaign environment changes as builders enter and complete the program.</p>
          <p><span class="vcb-button vcb-button--disabled" aria-disabled="true" data-future-href="GIVEBUTTER_CAPACITY_BUILDER_PROGRAM_URL">Visit the Capacity Builder program <small>Coming soon</small></span></p>
        </div>
      </div>
    </section>

    <section class="vcb-section" aria-labelledby="vcb-example">
      <div class="vcb-wrap">
        <div class="vcb-callout">
          <p class="vcb-kicker">Current example</p>
          <h2 id="vcb-example">The Fish Hut</h2>
          <p class="vcb-lead">An established Hemet business strengthening the equipment underneath its day-to-day operation, including commercial refrigeration and freezer capacity.</p>
          <p>This is one example of the program in motion—not the definition of the whole program.</p>
          <p><span class="vcb-button vcb-button--disabled" aria-disabled="true" data-future-href="GIVEBUTTER_FISH_HUT_CAMPAIGN_URL">View The Fish Hut campaign <small>Coming soon</small></span></p>
        </div>
      </div>
    </section>

    <section class="vcb-section vcb-soft" aria-labelledby="vcb-local">
      <div class="vcb-wrap vcb-grid-2">
        <div>
          <p class="vcb-kicker">Local activation</p>
          <h2 id="vcb-local">The program can show up in community</h2>
        </div>
        <div class="vcb-measure">
          <p>Local gatherings, learning sessions, partner introductions, and community storytelling can help people encounter the program in real life. These activations support the program; they do not replace its evergreen public doorway or its live Givebutter environment.</p>
        </div>
      </div>
    </section>

    <section class="vcb-section" aria-labelledby="vcb-learn">
      <div class="vcb-wrap vcb-grid-2">
        <article>
          <p class="vcb-kicker">Keep building</p>
          <h2 id="vcb-learn">Learning through TXNL Academy</h2>
          <p>Explore learning tools and capacity-building resources that can support the work before, during, and after a campaign.</p>
          <p><a class="vcb-button" href="https://betterweinc.zoholearn.com/">Visit TXNL Academy</a></p>
        </article>
        <article>
          <p class="vcb-kicker">Resource partners</p>
          <h2>Strengthen what someone else has built</h2>
          <p><strong>What do you have that could strengthen what someone else has already built?</strong></p>
          <p>Offer expertise, equipment, space, connections, professional services, or another practical resource.</p>
          <p><span class="vcb-button vcb-button--disabled" aria-disabled="true" data-future-href="RESOURCE_PARTNER_CONTACT_URL">Become a resource partner <small>Coming soon</small></span></p>
        </article>
      </div>
    </section>

    <section class="vcb-section vcb-dark vcb-final" aria-labelledby="vcb-final-title">
      <div class="vcb-wrap">
        <p class="vcb-kicker">Start here</p>
        <h2 id="vcb-final-title">Stronger foundations make more possible.</h2>
        <p class="vcb-lead">Explore the current Capacity Builders, choose the pathway that fits, or bring a resource that can help someone take the next responsible step.</p>
        <div class="vcb-actions" style="justify-content:center">
          <span class="vcb-button vcb-button--disabled" aria-disabled="true" data-future-href="GIVEBUTTER_CAPACITY_BUILDER_PROGRAM_URL">Explore current builders <small>Coming soon</small></span>
          <span class="vcb-button vcb-button--light vcb-button--disabled" aria-disabled="true" data-future-href="RESOURCE_PARTNER_CONTACT_URL">Offer a resource <small>Coming soon</small></span>
        </div>
      </div>
    </section>
  </div>
</main>