<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Groundzy - Smart Tree Mapping</title>
  <meta name="description" content="Professional tree mapping with Groundzy smart species identification. Perfect for arborists, landscapers, municipalities, and tree enthusiasts. Map, identify, and manage trees with precision." />
  <meta name="keywords" content="tree mapping, tree identification, arborist software, tree management, GPS tree mapping, tree care, landscape management, municipality tree inventory" />
  <meta name="author" content="Groundzy" />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://www.groundzy.com/" />
  
  <!-- Platform identification -->
  <meta name="generator" content="Custom Built - Groundzy Platform" />
  <meta name="platform" content="Custom Web Application" />
  <meta name="framework" content="Custom Built" />
  <meta name="application-name" content="Groundzy Tree Mapping Platform" />
  <meta name="application-version" content="2.0" />
  
  <!-- Prevent WordPress author page indexing -->
  <meta name="robots" content="noindex, nofollow" if="author" />
  <meta name="googlebot" content="noindex, nofollow" if="author" />
  
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.groundzy.com/" />
  <meta property="og:title" content="Groundzy - Smart Tree Mapping" />
  <meta property="og:description" content="Professional tree mapping with Groundzy smart species identification. Perfect for arborists, landscapers, municipalities, and tree enthusiasts." />
  <meta property="og:image" content="https://www.groundzy.com/images/logo_app.png" />
  <meta property="og:image:width" content="512" />
  <meta property="og:image:height" content="512" />
  <meta property="og:image:alt" content="Groundzy App Logo - Smart Tree Mapping Platform" />
  <meta property="og:site_name" content="Groundzy" />
  <meta property="og:locale" content="en_US" />
  
  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://www.groundzy.com/" />
  <meta property="twitter:title" content="Groundzy - Smart Tree Mapping" />
  <meta property="twitter:description" content="Professional tree mapping with Groundzy smart species identification. Perfect for arborists, landscapers, municipalities, and tree enthusiasts." />
  <meta property="twitter:image" content="https://www.groundzy.com/images/logo_app.png" />
  <meta property="twitter:image:alt" content="Groundzy App Logo - Smart Tree Mapping Platform" />
  <meta name="twitter:site" content="@groundzy" />
  <meta name="twitter:creator" content="@groundzy" />
  
  <!-- Favicon -->
  <link rel="icon" type="image/png" sizes="32x32" href="images/logo_favecon.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="images/logo_favecon.png" />
  <link rel="apple-touch-icon" href="images/logo_app.png" />
  <link rel="shortcut icon" href="images/logo_favecon.png" />
  
  <!-- Mobile App Icons -->
  <link rel="apple-touch-icon" sizes="180x180" href="images/logo_app.png" />
  <link rel="icon" type="image/png" sizes="192x192" href="images/logo_app.png" />
  <link rel="icon" type="image/png" sizes="512x512" href="images/logo_app.png" />
  
  <!-- PWA Manifest -->
  <link rel="manifest" href="manifest.json" />
  
  <!-- Mobile Theme -->
  <meta name="theme-color" content="#9FEF4C" />
  <meta name="msapplication-TileColor" content="#9FEF4C" />
  <meta name="msapplication-TileImage" content="images/logo_app.png" />
  
  <!-- Preload critical resources -->
  <link rel="preload" href="images/logo.svg" as="image" />
  <link rel="preload" href="images/logo_favecon.png" as="image" />
  <link rel="preload" href="css/landing.css" as="style" />
  
  <!-- CSS Imports -->
  <link rel="stylesheet" href="css/buttons.css?v=1.0" />
  <link rel="stylesheet" href="css/forms.css?v=1.0" />
  <link rel="stylesheet" href="css/colors.css?v=1.0" />
  <link rel="stylesheet" href="css/typography.css?v=1.0" />
  <link rel="stylesheet" href="css/layout.css?v=1.0" />
  <link rel="stylesheet" href="css/pricing.css?v=1.0" />
  <link rel="stylesheet" href="css/components/signup-modal.css?v=1.0" />
  <link rel="stylesheet" href="css/signup.css?v=1.0" />
  
  <!-- Landing page specific styles -->
  <link rel="stylesheet" href="css/landing.css?v=1.1" />
  
  <!-- Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Groundzy",
    "description": "Groundzy Smart Tree Mapping for professional tree management",
    "url": "https://www.groundzy.com",
    "applicationCategory": "BusinessApplication",
    "operatingSystem": "Web Browser",
    "applicationSubCategory": "Tree Management Software",
    "softwareVersion": "2.0",
    "softwareRequirements": "Modern Web Browser",
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD",
      "description": "Free tier for homeowners"
    },
    "provider": {
      "@type": "Organization",
      "name": "Groundzy",
      "url": "https://www.groundzy.com"
    },
    "featureList": [
      "Tree Mapping",
      "Groundzy Smart Species Identification", 
      "GPS Precision",
      "Tree History Management",
      "Professional GZ-TIN System",
      "Team Collaboration"
    ]
  }
  </script>
</head>
<body>
  <!-- Header/Navigation -->
  <header class="site-header">
    <nav class="main-nav">
      <div class="logo">
        <a href="/" onclick="window.scrollTo({top:0,behavior:'smooth'})">
          <img src="images/logo.svg" alt="Groundzy - Groundzy AI-Powered Tree Mapping Platform" />
        </a>
      </div>
      <button class="mobile-menu-btn" aria-label="Open navigation">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <ul class="nav-links">
        <li><a href="#homeowners">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#" onclick="openSignupModal('teams', 'join'); return false;">Join a Team</a></li>
        <li class="mobile-cta">
          <a href="https://app.groundzy.com" class="button button-primary">Dashboard</a>
        </li>
      </ul>
      <div class="nav-ctas">
        <a href="https://app.groundzy.com" class="button button-primary">Dashboard</a>
      </div>
    </nav>
  </header>

  <!-- Main Content -->
  <main>
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-container">
        <!-- Logo -->
        <div class="hero-logo">
          <img src="images/logo_slogan.svg" alt="Groundzy - Groundzy AI-Powered Tree Mapping Platform" />
        </div>
        
        <!-- Main Content -->
        <div class="hero-content">
          <h1>Map, Identify & Manage Trees Like Never Before</h1>
          <p class="hero-subtitle">Professional tree mapping made simple. Perfect for homeowners, arborists, property managers, and municipalities. Start mapping your trees today.</p>
          
          <!-- Learn More Button -->
          <div class="hero-learn-more">
            <a href="#homeowners" class="learn-more-btn">
              <span>Explore Groundzy</span>
              <img src="images/icons/icon_arrow_down.svg" alt="Arrow Down" class="arrow-down" />
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- For Homeowners Section -->
    <section class="homeowners-section" id="homeowners">
      <div class="container">
        <div class="homeowners-header">
          <div class="feature-badge">
            <span>🌳 Modern Tree Care</span>
          </div>
          <h2>Smart Tree Management</h2>
          <p>Map, identify, and care for your trees. Free forever for homeowners.</p>
        </div>
        
        <div class="homeowners-showcase">
          <div class="homeowners-features">
            <div class="homeowners-feature">
              <div class="feature-icon">
                <img src="images/icons/icon_history-01.svg" alt="Tree Mapping" />
              </div>
              <div class="feature-content">
                <h3>Tree History</h3>
                <p>Track your trees' growth, health, and care history. See how they change over time.</p>
              </div>
            </div>
            
            <div class="homeowners-feature">
              <div class="feature-icon">
                <img src="images/icons/icon_alert.svg" alt="Groundzy Identifying Wand" />
              </div>
              <div class="feature-content">
                <h3>Smart Alerts</h3>
                <p>Get notifications for watering, pruning, and weather protection. Never miss tree care.</p>
              </div>
            </div>
            
            <div class="homeowners-feature">
              <div class="feature-icon">
                <img src="images/icons/icon_weather.svg" alt="Weather" />
              </div>
              <div class="feature-content">
                <h3>Care Recommendations</h3>
                <p>Get personalized care tips based on your tree species and local conditions.</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Keep Exploring Button -->
        <div class="homeowners-explore">
          <a href="#professional-platform" class="explore-btn">
            <span>Keep Exploring</span>
            <img src="images/icons/icon_arrow_down.svg" alt="Arrow Down" class="arrow-down" />
          </a>
        </div>

      </div>
    </section>

    <!-- Professional Tree Management Platform Section -->
    <section class="professional-platform" id="professional-platform">
      <div class="container">
        <div class="platform-header">
          <div class="feature-badge">
            <span>Groundzy Dashboard</span>
          </div>
          <h2>Professional Tree Management Platform</h2>
          <p>Three powerful features work together to provide complete tree management: Interactive Mapping with GPS precision, Complete History Management, and Professional GZ-TIN identification system.</p>
        </div>
        
        <div class="platform-showcase">
          <div class="platform-features">
            <div class="platform-feature">
              <div class="feature-icon">
                <img src="images/icons/icon_mapping.svg" alt="Interactive Mapping" />
              </div>
              <div class="feature-content">
                <h3>Interactive Mapping</h3>
                <p>Google Maps integration with GPS precision and 400+ species-specific markers for professional tree management. Features include GPS precision mapping, 400+ species markers, property organization, real-time sync, export capabilities, and client management.</p>
              </div>
            </div>
            
            <div class="platform-feature">
              <div class="feature-icon">
                <img src="images/icons/icon_history_management.svg" alt="History Management" />
              </div>
              <div class="feature-content">
                <h3>History Management</h3>
                <p>Complete tree lifecycle tracking from planting to removal with detailed service history and health assessments. Includes lifecycle tracking, service history, health assessments, growth monitoring, cost management, and maintenance logs.</p>
              </div>
            </div>
            
            <div class="platform-feature">
              <div class="feature-icon">
                <img src="images/icons/icon_gztin_system.svg" alt="GZ-TIN System" />
              </div>
              <div class="feature-content">
                <h3>GZ-TIN System</h3>
                <p>Professional tree identification numbers (GZ-ABC12-12345) with complete audit trail and documentation. Features unique tree IDs, audit trail, professional documentation, client reference, compliance readiness, and time tracking.</p>
              </div>
            </div>
          </div>
          
          <div class="platform-preview">
            <div class="preview-container">
              <div class="preview-header">
                <span class="preview-badge">Live Preview</span>
                <h4>Professional Dashboard</h4>
              </div>
              <div class="preview-content">
                <div class="map-preview">
                  <div class="map-interface" style="background-image: url('images/live_preview_map.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
                    <div class="tree-marker" style="top: 30%; left: 18%; z-index: 6;">
                      <img src="images/markers/icon-63.svg" alt="Amur Maple" class="marker-icon" style="width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));" />
                      <span class="gz-tin" style="opacity: 0; transition: opacity 0.2s ease;">GZ-ABC12-12345</span>
                    </div>
                    <div class="tree-marker" style="top: 48%; left: 16%; z-index: 4;">
                      <img src="images/markers/icon-41.svg" alt="Red Maple" class="marker-icon" style="width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));" />
                      <span class="gz-tin" style="opacity: 0; transition: opacity 0.2s ease;">GZ-ABC12-12346</span>
                    </div>
                    <div class="tree-marker" style="top: 68%; left: 18%; z-index: 2;">
                      <img src="images/markers/icon-63.svg" alt="Amur Maple" class="marker-icon" style="width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));" />
                      <span class="gz-tin" style="opacity: 0; transition: opacity 0.2s ease;">GZ-ABC12-12347</span>
                    </div>
                    <div class="tree-marker" style="top: 32%; left: 45%; z-index: 5;">
                      <img src="images/markers/icon-223.svg" alt="Freeman Maple" class="marker-icon" style="width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));" />
                      <span class="gz-tin" style="opacity: 0; transition: opacity 0.2s ease;">GZ-ABC12-12348</span>
                    </div>
                    <div class="tree-marker" style="top: 45%; left: 58%; z-index: 3;">
                      <img src="images/markers/icon-386.svg" alt="Grey Alder" class="marker-icon" style="width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));" />
                      <span class="gz-tin" style="opacity: 0; transition: opacity 0.2s ease;">GZ-ABC12-12349</span>
                    </div>
                    <div class="tree-marker" style="top: 70%; left: 45%; z-index: 1;">
                      <img src="images/markers/icon-195.svg" alt="Red-osier Dogwood" class="marker-icon" style="width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));" />
                      <span class="gz-tin" style="opacity: 0; transition: opacity 0.2s ease;">GZ-ABC12-12350</span>
                    </div>
                  </div>
                  <div class="property-info-under" style="margin-top: 0.75rem; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #9FEF4C; font-weight: 500;">
                    <div style="margin-bottom: 0.25rem;">Property: 2433 Sir Martian Ln</div>
                    <div style="opacity: 0.8;">6 trees mapped • Last updated: 2 hours ago</div>
                    <div style="margin-top: 0.5rem; font-size: 0.7rem; opacity: 0.6; color: #D6FFD6;">Hover over tree icons to view GZ-TIN</div>
                  </div>
                </div>
                <div class="history-preview">
                  <div class="history-timeline">
                    <div class="timeline-item">
                      <span class="date">Dec 1, 2024</span>
                      <span class="action">Health Assessment</span>
                      <span class="tree">GZ-ABC12-12345</span>
                    </div>
                    <div class="timeline-item">
                      <span class="date">Nov 15, 2024</span>
                      <span class="action">Pruning Service</span>
                      <span class="tree">GZ-ABC12-12346</span>
                    </div>
                    <div class="timeline-item">
                      <span class="date">Nov 1, 2024</span>
                      <span class="action">Tree Added</span>
                      <span class="tree">GZ-ABC12-12347</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="platform-cta">
          <p>Experience professional tree management that scales from homeowners to enterprise teams.</p>
          <div class="cta-buttons">
            <a href="#pricing" class="button button-primary">Try Groundzy</a>
          </div>
          <p class="cta-subtext">Free Homeowner Plan • Cancel anytime</p>
        </div>
      </div>
    </section>

    <!-- Companies That Use Us Section -->
    <section class="companies-trust">
      <div class="companies-container">
        <div class="feature-badge">
          <span>Trusted by Teams</span>
        </div>
        <h2 class="companies-title">Teams Growing with&nbsp;Groundzy</h2>
        <p class="companies-subtitle">Empowering organizations to manage trees smarter, together. Join the growing community of tree care professionals.</p>
        <div class="companies-logos">
          <!-- Team logos -->
          <img src="images/teams/justfortrees.svg" alt="Just For Trees" class="company-logo" style="height: 48px; width: auto; filter: brightness(0) invert(1);" />
          <!-- Add more company logos here as partnerships develop -->
        </div>
        
        <!-- Call to action for teams -->
        <div style="text-align: center; margin-top: 2rem;">
          <a href="#" onclick="openSignupModal('teams'); return false;" class="button button-secondary" style="background: rgba(159,239,76,0.1); border: 2px solid #9FEF4C; color: #9FEF4C; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.3s ease;">
            Join the Movement
          </a>
        </div>
      </div>
    </section>

    <!-- Rest of Groundzy Features Section -->
    <section class="groundzy-features" id="groundzy-features">
      <div class="container">
        <div class="features-header">
          <div class="feature-badge">
            <span>Complete Platform</span>
          </div>
          <h2>The Right Tools for Every Scale</h2>
          <p>Groundzy grows with you, providing the perfect tools whether you're managing a backyard or an entire city's tree inventory.</p>
        </div>
        
        <div class="features-progression">
          <div class="progression-tier homeowners">
            <div class="tier-header">
              <h3>Homeowners</h3>
              <p>Perfect for backyard tree management</p>
            </div>
            <div class="tier-features">
              <div class="feature-item">
                              <img src="images/icons/icon_wand.svg" alt="Groundzy Identifying Wand" />
              <span>Groundzy Identifying Wand</span>
              </div>
              <div class="feature-item">
                <img src="images/icons/icon_map.svg" alt="Basic Mapping" />
                <span>Basic Tree Mapping</span>
              </div>
              <div class="feature-item">
                <img src="images/icons/icon_weather.svg" alt="Weather" />
                <span>Weather Integration</span>
              </div>
            </div>
          </div>
          
          <div class="progression-arrow">→</div>
          
          <div class="progression-tier professionals">
            <div class="tier-header">
              <h3>Professionals</h3>
              <p>Arborists, landscapers, and property managers</p>
            </div>
            <div class="tier-features">
              <div class="feature-item">
                <img src="images/icons/icon_health.svg" alt="Health Assessment" />
                <span>Health Assessments</span>
              </div>
              <div class="feature-item">
                <img src="images/icons/icon_export.svg" alt="Export" />
                <span>Professional Reports</span>
              </div>
              <div class="feature-item">
                <img src="images/icons/icon_client.svg" alt="Client Management" />
                <span>Client Management</span>
              </div>
            </div>
          </div>
          
          <div class="progression-arrow">→</div>
          
          <div class="progression-tier enterprise">
            <div class="tier-header">
              <h3>Municipalities & Enterprise</h3>
              <p>City planners, large organizations, and government</p>
            </div>
            <div class="tier-features">
              <div class="feature-item">
                <img src="images/icons/icon_share.svg" alt="Team Collaboration" />
                <span>Team Collaboration</span>
              </div>
              <div class="feature-item">
                <img src="images/icons/icon_report.svg" alt="Advanced Analytics" />
                <span>Advanced Analytics</span>
              </div>
              <div class="feature-item">
                <img src="images/icons/icon_map.svg" alt="Enterprise Mapping" />
                <span>Enterprise Mapping</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="features-cta">
          <p>Find the perfect Groundzy solution for your needs</p>
          <div class="cta-buttons">
            <a href="#pricing" class="button button-primary">Sign Up</a>
          </div>
        </div>
      </div>
    </section>



    <!-- Pricing Section -->
    <section class="pricing" id="pricing" style="background: #1E3C3C; color: #5FAA44; padding: 60px 0;">
      <div class="pricing-header">
        <img src="images/logo.svg" alt="Groundzy Logo" />
        <h1 class="highlight-yellowgreen" style="color: #f4f8f6;">Simple Plans.<br>Powerful Tree&nbsp;Mapping.</h1>
        <p style="color: #fff;">From backyards to cities, Groundzy grows with you.</p>
        <div class="no-contracts" style="color: #D6FFD6;">No contracts, no mess.</div>
      </div>
      
      <div class="plans-row" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto 3rem auto; padding: 0 20px;">
        <!-- Mobile Pricing Toggle -->
        <div class="mobile-pricing-toggle" style="display: none; margin-bottom: 2rem; text-align: center;">
          <button id="expandFeaturesBtn" class="button button-secondary" style="background: rgba(159,239,76,0.1); border: 2px solid #9FEF4C; color: #9FEF4C; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;">
            <span id="expandBtnText">View All Features</span>
            <img id="expandIcon" src="images/icons/icon_arrow_down.svg" alt="Expand" style="margin-left: 8px; transition: transform 0.3s ease; width: 16px; height: 16px;" />
          </button>
        </div>
        <div class="plan-card" style="background: transparent; border: 2px solid #bbb; border-radius: 16px; padding: 2rem; text-align: center; transition: all 0.3s ease; position: relative; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); color: #f4f8f6;">
          <div class="plan-label" style="margin-bottom:8px;text-align:center;">
            <span style="display:block;font-size:0.95em;font-weight:500;letter-spacing:0.04em;color:#d6ffd6;">Groundzy</span>
            <span style="display:block;font-size:2em;font-weight:800;line-height:1.1;color:#f4f8f6;">Home</span>
          </div>
          <div class="plan-price" style="margin-bottom:14px;font-size:2.5rem;font-weight:700;color:#f4f8f6;line-height:1;">Free</div>
          <div class="plan-desc" style="margin-bottom:28px;color:#d6ffd6;font-size:1rem;line-height:1.5;">Perfect for homeowners mapping their property trees.</div>
          <ul class="plan-features" style="list-style:none;padding:0;margin:0 0 2rem 0;text-align:left;">
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Interactive mapping</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Limited markers</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Catalog access</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Limited GZ-TIN (Tree ID) access</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Limited tree management</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Very limited Groundzy Identifying Wand & Groundzy Wizard</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Basic search</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">No data/map export</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Basic user settings</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Basic support</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;">Basic weather integration</li>
          </ul>
          <button onclick="openSignupModal('home')" class="button button-primary" style="width:100%;margin-bottom:0.5rem;display:inline-block;text-align:center;text-decoration:none;border:none;cursor:pointer;">Get Started</button>
        </div>
        
        <div class="plan-card featured" style="background: rgba(159,239,76,0.1); border: 2px solid #9FEF4C; border-radius: 16px; padding: 2rem; text-align: center; transition: all 0.3s ease; position: relative; box-shadow: 0 8px 32px rgba(159, 239, 76, 0.2); color: #f4f8f6;">
          <div class="plan-badge" style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#9FEF4C;color:#1E3C3C;font-weight:600;letter-spacing:0.5px;font-family:'JetBrains Mono',monospace;">Most Popular</div>
          <div class="plan-label" style="margin-bottom:8px;text-align:center;">
            <span style="display:block;font-size:0.95em;font-weight:500;letter-spacing:0.04em;color:#d6ffd6;">Groundzy</span>
            <span style="display:block;font-size:2em;font-weight:800;line-height:1.1;color:#f4f8f6;">Pro</span>
          </div>
          <div class="plan-price" style="margin-bottom:14px;font-size:2.5rem;font-weight:700;color:#f4f8f6;line-height:1;">$20<span style='font-size:0.6em;font-weight:400;color:#d6ffd6;'>/month</span></div>
          <div class="plan-desc" style="margin-bottom:28px;color:#d6ffd6;font-size:1rem;line-height:1.5;">Ideal for professionals, arborists, landscapers, and students.</div>
          <ul class="plan-features" style="list-style:none;padding:0;margin:0 0 2rem 0;text-align:left;">
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);"><strong style="color:#f4f8f6;font-weight:600;">Everything in Home, plus:</strong></li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Unlimited markers</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Unlimited GZ-TIN (Tree ID) access</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Unlimited tree management</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Unlimited Groundzy Identifying Wand & Groundzy Wizard</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Advanced search</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Unlimited data/map export</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Clients & properties management</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Advanced reports & analytics</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Advanced user settings</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Priority support</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Advanced weather integration</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;">Widgets</li>
          </ul>
          <button onclick="openSignupModal('pro')" class="button button-primary" style="width:100%;margin-bottom:0.5rem;display:inline-block;text-align:center;text-decoration:none;border:none;cursor:pointer;">Get Started</button>
          <button onclick="openSignupModal('pro', 'join')" class="button button-tertiary" style="width:100%;margin-top:0.5em;font-size:0.9rem;padding:0.75rem 1.5rem;display:inline-block;text-align:center;text-decoration:none;border:none;cursor:pointer;">Join a Team</button>
        </div>
        
        <div class="plan-card" style="background: transparent; border: 2px solid #bbb; border-radius: 16px; padding: 2rem; text-align: center; transition: all 0.3s ease; position: relative; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); color: #f4f8f6;">
          <div class="plan-label" style="margin-bottom:8px;text-align:center;">
            <span style="display:block;font-size:0.95em;font-weight:500;letter-spacing:0.04em;color:#d6ffd6;">Groundzy</span>
            <span style="display:block;font-size:2em;font-weight:800;line-height:1.1;color:#f4f8f6;">Teams</span>
          </div>
          <div class="plan-price" style="margin-bottom:6px;font-size:2.5rem;font-weight:700;color:#f4f8f6;line-height:1;">Custom pricing</div>
          <div style="color:#d6ffd6;font-size:1em;font-weight:500;margin-bottom:10px;">Any team size</div>
          <div class="plan-desc" style="margin-bottom:28px;color:#d6ffd6;font-size:1rem;line-height:1.5;">Built for teams, from small crews to municipalities and large organizations.</div>
          <ul class="plan-features" style="list-style:none;padding:0;margin:0 0 2rem 0;text-align:left;">
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);"><strong style="color:#f4f8f6;font-weight:600;">Everything in Pro, plus:</strong></li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Team collaboration and management</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Admin controls and user management</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Dedicated account management</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">Custom onboarding and training</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.1);">API access (for enterprise)</li>
            <li style="padding:0.5rem 0;color:#f4f8f6;font-size:0.95rem;line-height:1.4;">White-label options (for enterprise)</li>
          </ul>
          <button onclick="openSignupModal('teams')" class="button button-primary" style="width:100%;margin-bottom:0.5rem;display:inline-block;text-align:center;text-decoration:none;border:none;cursor:pointer;">Get Started</button>
          <button onclick="openSignupModal('teams', 'join')" class="button button-tertiary" style="width:100%;margin-top:0.5em;font-size:0.9rem;padding:0.75rem 1.5rem;display:inline-block;text-align:center;text-decoration:none;border:none;cursor:pointer;">Join a Team</button>
        </div>
      </div>
      
      <div class="gtin-highlight" style="margin: 40px auto 0 auto; max-width: 900px; border: 2px solid #9FEF4C; border-radius: 16px; background: rgba(159,239,76,0.06); padding: 32px 24px 28px 24px; text-align: center; color: #d6ffd6; box-sizing: border-box;">
        <div class="gtin-title" style="color: #9FEF4C; font-size: 1.1em; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.01em;">Included in Every Plan</div>
        <div class="gtin-main" style="font-size: 1.45em; font-weight: 700; color: #f4f8f6; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 10px;">
          <img src="images/icons/green_checkmark.svg" alt="Checkmark" class="gtin-check" style="height: 1.5em; width: 1.5em; vertical-align: middle; margin-right: 6px; display: inline-block;" />
          <span class="gtin-main-text" style="color: #f4f8f6; font-weight: 700; letter-spacing: 0.01em;">Groundzy Tree Identification Number (GZ-TIN)</span>
        </div>
        <div class="gtin-desc" style="color: #d6ffd6; font-size: 1.08em; margin-top: 0; margin-bottom: 0; line-height: 1.6; max-width: 700px; margin-left: auto; margin-right: auto;">
          Every plan includes access to the Groundzy Tree Identification Number system. Track tree history, services, health records, and complete lifecycle management across all tiers.
        </div>
      </div>
      
      <div class="trial-note" style="text-align: center; color: #d6ffd6; font-size: 0.95rem; margin-top: 2rem; padding: 1rem; background: rgba(159,239,76,0.1); border-radius: 8px; max-width: 600px; margin-left: auto; margin-right: auto;">All plans include a 14-day free trial. No contracts, cancel anytime.</div>
    </section>

    <!-- FAQ Section -->
    <section class="faq bg-alt" id="faq">
      <div class="container">
        <div class="faq-header">
          <div class="feature-badge">
            <span>Frequently Asked Questions</span>
          </div>
          <h2>Common Questions About Groundzy</h2>
          <p>Everything you need to know about getting started with professional tree mapping and Groundzy AI-powered identification.</p>
        </div>
        
        <div class="faq-list">
          <details class="faq-item">
            <summary>What's included in the free Groundzy Home plan?</summary>
            <p>The free plan includes interactive mapping with limited markers, basic catalog access, limited GZ-TIN (Tree ID) access, basic tree management, very limited Groundzy Identifying Wand & Groundzy Wizard (5 uses), basic search, no data/map export, basic user settings, basic support, and basic weather integration. Perfect for homeowners mapping their property trees.</p>
          </details>
          
          <details class="faq-item">
            <summary>What features come with Groundzy Pro ($20/month)?</summary>
            <p>Pro includes everything in Home, plus unlimited markers, unlimited GZ-TIN access, unlimited tree management, unlimited Groundzy Identifying Wand & Groundzy Wizard, advanced search, unlimited data/map export, clients & properties management, advanced reports & analytics, advanced user settings, priority support, advanced weather integration, and widgets. Ideal for professionals, arborists, landscapers, and students.</p>
          </details>
          
          <details class="faq-item">
            <summary>How does the GZ-TIN (Groundzy Tree Identification Number) system work?</summary>
            <p>Every tree gets a unique identification number (format: GZ-ABC12-12345) that allows you to track individual trees across time, maintain health records, reference specific trees in reports, and maintain a complete audit trail. This professional system is included in every plan and helps with compliance, client communication, and historical tracking.</p>
          </details>
          
          <details class="faq-item">
            <summary>Can I use Groundzy for commercial and professional projects?</summary>
            <p>Absolutely! Groundzy Pro and Teams plans are designed for professional use. Perfect for arborists, landscapers, property managers, municipalities, and organizations managing large-scale tree inventories. The platform scales from individual professionals to enterprise teams.</p>
          </details>
          
          <details class="faq-item">
            <summary>How accurate is the Groundzy Identifying Wand?</summary>
            <p>Our Groundzy AI can identify over 400+ tree species with high accuracy. For best results, upload clear photos of leaves, bark, or the entire tree. The system learns and improves with each identification. Free plan includes very limited access, while Pro and Teams plans offer unlimited Groundzy AI identification.</p>
          </details>
          
          <details class="faq-item">
            <summary>What export options are available?</summary>
            <p>Pro and Teams plans include unlimited data export capabilities. Generate professional reports, export to CSV/Excel, create PDF summaries, share maps with clients or team members, and export complete tree inventories with all associated data and history.</p>
          </details>
          
          <details class="faq-item">
            <summary>How does team collaboration work?</summary>
            <p>Groundzy Teams allows multiple users to work together on tree management projects. Team admins can invite members using unique invite codes, manage user permissions, and collaborate on shared properties and tree inventories. Perfect for municipalities, large organizations, and professional teams.</p>
          </details>
          
          <details class="faq-item">
            <summary>Is there a free trial available?</summary>
            <p>Yes! All paid plans (Pro and Teams) include a 14-day free trial with no credit card required. You can explore all features during the trial period and cancel anytime. The Groundzy Home plan is completely free forever.</p>
          </details>
          
          <details class="faq-item">
            <summary>What kind of support do you offer?</summary>
            <p>Free plan users get basic support, while Pro and Teams plans include priority support. Teams plans also include dedicated account management, custom onboarding, and training. Our support team is available Monday through Friday, 8am-5pm.</p>
          </details>
          
          <details class="faq-item">
            <summary>Is my data secure and private?</summary>
            <p>Absolutely. Your tree data is stored securely in the cloud with enterprise-grade encryption. We never share your data with third parties, and you maintain full ownership of all your tree information. Our platform follows industry best practices for data security and privacy.</p>
          </details>
          
          <details class="faq-item">
            <summary>Can I cancel my subscription anytime?</summary>
            <p>Yes! There are no contracts or long-term commitments. You can cancel your subscription at any time, and you'll continue to have access to your data until the end of your current billing period. Your tree data remains accessible even after cancellation.</p>
          </details>
        </div>
      </div>
    </section>

    <!-- Final CTA Section -->
    <section class="final-cta">
      <div class="container">
        <div style="text-align: center; margin-bottom: 2rem;">
          <img src="images/dark_logo.svg" alt="Groundzy Logo" style="height: 120px; width: auto; margin-bottom: 1rem;" />
        </div>
        <h2>Ready to use Groundzy?</h2>
        <p>Join hundreds of professionals who trust Groundzy for their tree mapping and identification needs. Start with 15 trees free, no credit card required.</p>
        <a href="#pricing" class="button button-large" style="background-color: #1E3C3C; color: #9FEF4C; border: 2px solid #1E3C3C; border-radius: 8px; padding: 1rem 2rem; font-size: 1.125rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(30, 60, 60, 0.2); text-decoration: none; display: inline-block;">Try Groundzy</a>
        <p class="cta-subtext">14-day free trial on all paid plans • No contracts • Cancel anytime</p>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="site-footer-modern">
    <div class="footer-container">
      <div class="footer-col about-col">
        <div class="footer-logo-row">
          <img src="images/logo.svg" alt="Groundzy Logo" class="footer-logo-modern" />
        </div>
        <p class="footer-desc">Smart tree mapping for everyone—from homeowners to city planners. Groundzy makes it easy to identify, document, and care for your trees.</p>
        <div class="footer-socials">
          <a href="https://instagram.com/groundzy" target="_blank" aria-label="Instagram" class="footer-social-icon">
            <img src="images/icons/icon_instagram.svg" alt="Instagram" />
          </a>
          <a href="https://facebook.com/groundzy" target="_blank" aria-label="Facebook" class="footer-social-icon">
            <img src="images/icons/icon_facebook.svg" alt="Facebook" />
          </a>
          <a href="https://linkedin.com/company/groundzy" target="_blank" aria-label="LinkedIn" class="footer-social-icon">
            <img src="images/icons/icon_linkedin.svg" alt="LinkedIn" />
          </a>
          <a href="mailto:info@groundzy.com" aria-label="Email" class="footer-social-icon">
            <img src="images/icons/icon_email.svg" alt="Email" />
          </a>
          <a href="https://youtube.com/@groundzy" target="_blank" aria-label="YouTube" class="footer-social-icon">
            <img src="images/icons/icon_youtube.svg" alt="YouTube" />
          </a>
        </div>
      </div>
      <div class="footer-col links-col">
        <h4>Links</h4>
        <ul>
          <li><a href="#features">Features</a></li>
          <li><a href="#pricing">Pricing</a></li>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#" onclick="openSignupModal('pro'); return false;">Sign Up</a></li>
          <li><a href="https://app.groundzy.com">Dashboard</a></li>
        </ul>
      </div>
      <div class="footer-col legal-col">
        <h4>Legal</h4>
        <ul>
          <li><a href="/privacy">Privacy Policy</a></li>
          <li><a href="/cookies">Cookie Policy</a></li>
          <li><a href="/terms">Terms of Service</a></li>
          <li><a href="/legal">Legal Notice</a></li>
        </ul>
      </div>
      <div class="footer-col contact-col">
        <h4>Contact Us</h4>
        <ul class="footer-contact-list">
          <li><span class="footer-contact-icon">
            <img src="images/icons/icon_location.svg" alt="Location" style="vertical-align:middle;" />
          </span> Aurora, IL</li>
          <li><span class="footer-contact-icon">
            <img src="images/icons/icon_envelope.svg" alt="Email" style="vertical-align:middle;" />
          </span> <a href="mailto:info@groundzy.com">info@groundzy.com</a></li>
          <li><span class="footer-contact-icon">
            <img src="images/icons/icon_clock.svg" alt="Clock" style="vertical-align:middle;" />
          </span> Support: Mon–Fri, 8am–5pm</li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom-modern">
      <span>&copy; 2024 Groundzy. All rights reserved.</span>
    </div>
  </footer>

  <!-- Mobile Menu Overlay -->
  <div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>

  <!-- Signup Modal Overlay -->
  <div class="signup-modal-bg" id="signupModalBg">
    <div class="signup-modal" id="signupModal">
      <button class="close-btn" id="closeModalBtn" aria-label="Close">&times;</button>
      
      <!-- Step 1: Team Choice (Teams tier only) -->
      <div id="step1" class="signup-step">
        <h2 id="modalTierTitle">Welcome to Groundzy Teams!</h2>
        <div class="teams-intro" style="text-align:center;margin-bottom:2em;color:#666;">
          <p style="font-size:0.9em;margin-bottom:1em;">Perfect for organizations, municipalities, and teams that need to collaborate on tree management projects.</p>
        </div>
        
        <p style="text-align:center;margin-bottom:2em;font-weight:500;">Are you creating a new team or joining an existing one?</p>
        <div class="teams-choice-btns" style="display:flex;gap:1em;justify-content:center;flex-wrap:wrap;">
          <button class="button button-primary" id="createTeamBtn" style="min-width:200px;">
            <div style="text-align:center;">
              <div style="font-weight:600;margin-bottom:0.25em;">Create a Team</div>
              <div style="font-size:0.8em;opacity:0.8;">Start a new organization</div>
            </div>
          </button>
          <button class="button button-secondary" id="joinTeamBtn" style="min-width:200px;">
            <div style="text-align:center;">
              <div style="font-weight:600;margin-bottom:0.25em;">Join a Team</div>
              <div style="font-size:0.8em;opacity:0.8;">Use an invite code</div>
            </div>
          </button>
        </div>
      </div>

      <!-- Step 2: Invitation Code Validation (Only if joining team) -->
      <div id="step2" class="signup-step" style="display:none;">
        <h2>Join Existing Team</h2>
        <form id="inviteCodeForm" autocomplete="off">
          <div class="form-group">
            <label for="inviteCode">Team Invite Code *</label>
            <input type="text" id="inviteCode" class="form-input" placeholder="Enter the invite code provided by your team admin" required />
            <small style="color:#666;font-size:0.8em;">This code should have been shared with you by your team administrator</small>
          </div>
          
          <div class="error-message" id="inviteCodeError" style="display:none;"></div>
          <button type="submit" class="button button-primary" id="validateInviteBtn">
            <span id="validateInviteBtnText">Validate Invite Code</span>
            <span id="validateInviteBtnSpinner" class="loading-spinner" style="display:none;"></span>
          </button>
        </form>
        
        <div style="text-align:center;margin-top:1em;">
          <button class="button button-tertiary" id="backToTeamChoice">← Back</button>
        </div>
      </div>

      <!-- Step 3: Authentication -->
      <div id="step3" class="signup-step" style="display:none;">
        <h2 id="authStepTitle">Create Your Account</h2>
        <form id="authForm" autocomplete="off">
        <div class="form-group">
          <label for="signupEmail">Email</label>
          <input type="email" id="signupEmail" class="form-input" placeholder="you@email.com" required />
        </div>
        <div class="form-group">
          <label for="signupPassword">Password</label>
          <input type="password" id="signupPassword" class="form-input" placeholder="Create a password" required minlength="8" />
        </div>
          <div class="error-message" id="authError" style="display:none;"></div>
          <div class="success-message" id="authSuccess" style="display:none;"></div>
          <button type="submit" class="button button-primary" id="authSubmitBtn">
            <span id="authBtnText">Create Account</span>
            <span id="authBtnSpinner" class="loading-spinner" style="display:none;"></span>
          </button>
      </form>
        
        <div style="text-align:center;margin-top:1em;">
          <button class="button button-tertiary" id="backToInviteValidation" style="display:none;">← Back</button>
        </div>
      </div>

      <!-- Step 4: Profile Creation -->
      <div id="step4" class="signup-step" style="display:none;">
        <h2>Complete Your Profile</h2>
        <form id="profileForm" autocomplete="off">
          <div class="form-group">
            <label for="firstName">First Name</label>
            <input type="text" id="firstName" class="form-input" placeholder="Your first name" required />
    </div>
          <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" id="lastName" class="form-input" placeholder="Your last name" required />
          </div>

          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-input" placeholder="Choose a unique username" required />
            <div class="username-suggestions" id="usernameSuggestions" style="display:none;">
              <small>Suggestions: <span id="suggestionsList"></span></small>
            </div>
            <div class="username-status" id="usernameStatus" style="display:none;">
              <small id="usernameStatusText"></small>
            </div>
          </div>
          <div class="form-checkbox-group">
            <input type="checkbox" id="termsAccept" required />
            <label for="termsAccept">
              I agree to the <a href="legal/terms-of-service.html" target="_blank">Terms of Service</a> and <a href="legal/privacy-policy.html" target="_blank">Privacy Policy</a>
            </label>
          </div>
          <div class="form-checkbox-group">
            <input type="checkbox" id="marketingAccept" />
            <label for="marketingAccept">
              Send me updates about new features and tree care tips (optional)
            </label>
          </div>
          <div class="error-message" id="profileError" style="display:none;"></div>
          <button type="submit" class="button button-primary" id="profileSubmitBtn">
            <span id="profileBtnText">Continue</span>
            <span id="profileBtnSpinner" class="loading-spinner" style="display:none;"></span>
          </button>
        </form>
        
        <div style="text-align:center;margin-top:1em;">
          <button class="button button-tertiary" id="backToAuth">← Back</button>
          </div>
        </div>
        
      <!-- Step 5: Team Profile Setup (Teams only) -->
      <div id="step5" class="signup-step" style="display:none;">
        <h2>Tell us about your organization</h2>
        <p style="color:#555;margin-bottom:1em;text-align:center;">This helps us tailor your Groundzy experience.</p>
        
        <form id="orgDetailsForm" autocomplete="off" style="margin-top:1em;">
          <div class="form-group">
            <label for="orgName">Organization Name *</label>
            <input type="text" id="orgName" class="form-input" placeholder="e.g. Maple Tree Services" required maxlength="60" />
          </div>
          
          <div class="form-group">
            <label for="orgTypeIndustry">What best describes your organization? *</label>
            <select id="orgTypeIndustry" class="form-input" required>
              <option value="">Select one</option>
              <option value="arboriculture_business">Arboriculture Business</option>
              <option value="landscaping_business">Landscaping Business</option>
              <option value="property_management">Property Management Company</option>
              <option value="nonprofit">Non-profit (Environmental/Tree/Green)</option>
              <option value="municipality">Municipality / Local Government</option>
              <option value="school">School / Educational Institution</option>
              <option value="other">Other</option>
            </select>
            <input type="text" id="orgTypeIndustryOther" class="form-input" style="display:none;margin-top:0.5em;" placeholder="Please specify" />
          </div>
          
          <div class="form-group">
            <label for="orgWebsite">Organization Website (optional)</label>
            <input type="url" id="orgWebsite" class="form-input" placeholder="e.g. https://mapletrees.com" />
          </div>
          
          <div class="form-group">
            <label for="userRole">Your Role *</label>
            <select id="userRole" class="form-input" required>
              <option value="">Select role</option>
              <option value="owner">Owner</option>
              <option value="admin">Admin</option>
              <option value="manager">Manager</option>
              <option value="staff">Staff</option>
              <option value="other">Other</option>
            </select>
          </div>
          
          <div class="error-message" id="orgDetailsError" style="display:none;"></div>
          <button type="submit" class="button button-primary" id="orgDetailsSubmitBtn">
            <span id="orgDetailsBtnText">Continue</span>
            <span id="orgDetailsBtnSpinner" class="loading-spinner" style="display:none;"></span>
          </button>
        </form>
        
        <div style="text-align:center;margin-top:1em;">
          <button class="button button-tertiary" id="backToProfile">← Back</button>
        </div>
      </div>

      <!-- Step 6: Team Size Selection (Teams only) -->
      <div id="step6" class="signup-step" style="display:none;">
        <h2 id="teamSizePrompt">How big is your team?</h2>
        
        <form id="teamSizeForm" autocomplete="off" style="margin-top:1.5em;">
          <div id="teamSizeOptions" style="display:flex;flex-direction:column;gap:1em;margin-top:0.5em;">
            <button type="button" class="team-size-card" data-size="10" data-name="Small Team">Small Team<br><span class="team-size-desc">Up to 10 users</span></button>
            <button type="button" class="team-size-card" data-size="50" data-name="Medium Team">Medium Team<br><span class="team-size-desc">Up to 50 users</span></button>
            <button type="button" class="team-size-card" data-size="200" data-name="Large Team">Large Team<br><span class="team-size-desc">Up to 200 users</span></button>
            <button type="button" class="team-size-card" data-size="enterprise" data-name="Enterprise">Need more? Enterprise<br><span class="team-size-desc">201+ users (Contact us)</span></button>
          </div>
          <input type="hidden" id="teamSize" required />
          <input type="hidden" id="teamSizeName" />
          <div id="teamSizeError" style="color:#c00;font-size:0.95em;display:none;margin-bottom:1em;"></div>
          <button type="submit" class="button button-primary" style="margin-top:1.5em;">Continue</button>
        </form>
        
        <div style="text-align:center;margin-top:1em;">
          <button class="button button-tertiary" id="backToOrgDetails">← Back</button>
        </div>
      </div>

      <!-- Step 7: Payment (Teams only) -->
      <div id="step7" class="signup-step" style="display:none;">
        <h2>Plan & Payment</h2>
        <div id="pricingInfoTable" style="margin:2em 0 1em 0;text-align:left;"></div>
        <form id="paymentForm" autocomplete="off" style="margin-top:1.5em;">
          <div id="paymentPlaceholder" style="color:#888;text-align:center;margin-bottom:1.5em;">[Payment form will go here]</div>
          <button type="submit" class="button button-primary">Start Subscription</button>
        </form>
        <div style="text-align:center;margin-top:1em;">
          <button class="button button-tertiary" id="backToTeamSize">← Back</button>
        </div>
      </div>

      <!-- Step 7b: Enterprise Contact Form -->
      <div id="step7Enterprise" class="signup-step" style="display:none;">
        <h2>Contact Sales for Enterprise</h2>
        <form id="enterpriseContactForm" autocomplete="off" style="margin-top:1.5em;">
          <div class="form-group">
            <label for="enterpriseName">Your Name</label>
            <input type="text" id="enterpriseName" class="form-input" required maxlength="40" />
          </div>
          <div class="form-group">
            <label for="enterpriseEmail">Email</label>
            <input type="email" id="enterpriseEmail" class="form-input" required />
          </div>
          <div class="form-group">
            <label for="enterprisePhone">Phone (optional)</label>
            <input type="tel" id="enterprisePhone" class="form-input" />
          </div>
          <button type="submit" class="button button-primary">Request a Call</button>
        </form>
        <div style="text-align:center;margin-top:1em;">
          <button class="button button-tertiary" id="backToTeamSizeEnterprise">← Back</button>
        </div>
      </div>

      <!-- Step 8: Success -->
      <div id="step8" class="signup-step" style="display:none;">
        <h2>Welcome to Groundzy!</h2>
        <div style="text-align:center;margin:2em 0;">
          <p style="font-size:1.1em;margin-bottom:1em;">Your account has been created successfully!</p>
          <p style="color:#666;margin-bottom:2em;" id="trialInfo">You're now on a 14-day free trial. No payment required until your trial ends.</p>
          
          <!-- Teams-specific success content -->
          <div id="teamsSuccessContent" style="display:none;">
            <div style="background:#f8f9fa;padding:1.5em;border-radius:8px;margin:1em 0;text-align:left;">
              <h3 style="margin-top:0;color:#1E3C3C;">Team Setup Complete!</h3>
              
              <!-- For team creators -->
              <div id="teamCreatorInfo" style="display:none;">
                <p style="margin-bottom:1em;"><strong>Your team has been created successfully!</strong></p>
                <div style="background:#C8F5B4;padding:1em;border-radius:6px;margin:1em 0;">
                  <p style="margin:0 0 0.5em 0;font-weight:600;">Invite your team members using these codes:</p>
                  <div class="invite-code-container" style="display:flex;gap:1em;flex-wrap:wrap;margin-bottom:0.5em;">
                    <div style="flex:1;min-width:200px;">
                      <label style="font-size:0.8em;color:#666;">Team Invite Code:</label>
                      <div style="background:white;padding:0.5em;border-radius:4px;font-family:monospace;font-weight:600;border:1px solid #ddd;">
                        <span id="primaryInviteCode"></span>
                        <button onclick="copyToClipboard('primaryInviteCode')" style="float:right;background:none;border:none;cursor:pointer;color:#9FEF4C;margin-right:0.5em;" title="Copy to clipboard">📋</button>
                      </div>
                    </div>
                      </div>
                  <div style="text-align:center;margin-top:1em;">
                    <button onclick="shareInviteCode()" class="button button-secondary" style="font-size:0.9em;padding:0.5em 1em;">
                      📤 Share Invite Code
          </button>
                  </div>
                  <p style="font-size:0.8em;color:#666;margin:0;">Share these codes with your team members so they can join your organization.</p>
                </div>
                <p style="font-size:0.9em;color:#666;">As the team owner, you have full administrative control over your team's settings and member management.</p>
              </div>
              
              <!-- For team joiners -->
              <div id="teamJoinerInfo" style="display:none;">
                <p style="margin-bottom:1em;"><strong>You've successfully joined the team!</strong></p>
                <div style="background:#C8F5B4;padding:1em;border-radius:6px;margin:1em 0;">
                  <p style="margin:0 0 0.5em 0;font-weight:600;">Team Information:</p>
                  <p style="margin:0;font-size:0.9em;">Team: <strong id="joinedTeamName"></strong></p>
                  <p style="margin:0;font-size:0.9em;">Role: <strong>Member</strong></p>
                </div>
                <p style="font-size:0.9em;color:#666;">You can now collaborate with your team members and access shared data.</p>
              </div>
            </div>
          </div>
          
          <div class="error-message" id="redirectError" style="display:none;"></div>
          <button class="button button-primary" id="goToDashboardBtn">
            <span id="dashboardBtnText">Go to Dashboard</span>
            <span id="dashboardBtnSpinner" class="loading-spinner" style="display:none;"></span>
          </button>
    </div>
  </div>

      <div class="signup-modal-footer">
        Already have an account?
        <a href="index.html">Sign in</a>
      </div>
    </div>
  </div>

  <!-- Firebase SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore-compat.js"></script>
  
  <!-- Firebase Configuration Module -->
  <script src="modules/firebase-config.js"></script>
  
  <!-- Code Generator Module - Load after Firebase initialization -->
  <script src="modules/code-generator.js"></script>
  
  <!-- Session Manager Module -->
  <script src="modules/auth/session-manager.js"></script>
  
  <!-- Username Generator Module -->
  <script src="modules/auth/username-generator.js"></script>

  <!-- Mobile Pricing Styles -->
  <style>
    @media (max-width: 768px) {
      .plans-row {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 10px !important;
      }
      
      .plan-card {
        margin-bottom: 1rem !important;
        padding: 1.5rem !important;
      }
      
      .plan-features {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        opacity: 0 !important;
        margin: 0 !important;
      }
      
      .plan-features.expanded {
        max-height: 2000px !important;
        opacity: 1 !important;
        margin: 0 0 2rem 0 !important;
      }
      
      .mobile-pricing-toggle {
        display: block !important;
      }
      
      .plan-features li {
        font-size: 0.9rem !important;
        padding: 0.4rem 0 !important;
      }
      
      .plan-price {
        font-size: 2rem !important;
      }
      
      .plan-label span:last-child {
        font-size: 1.5em !important;
      }
      
      .plan-desc {
        margin-bottom: 1rem !important;
      }
    }
    
    @media (max-width: 480px) {
      .plan-card {
        padding: 1rem !important;
      }
      
      .plan-features li {
        font-size: 0.85rem !important;
      }
      
      .plan-price {
        font-size: 1.8rem !important;
      }
    }
  </style>

  <!-- JavaScript -->
  <script src="modules/landing.js"></script>
  <script src="modules/signup-modal.js"></script>
  
  <!-- Mobile Pricing JavaScript -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const expandBtn = document.getElementById('expandFeaturesBtn');
      const expandBtnText = document.getElementById('expandBtnText');
      const expandIcon = document.getElementById('expandIcon');
      const planFeatures = document.querySelectorAll('.plan-features');
      
      if (expandBtn) {
        expandBtn.addEventListener('click', function() {
          const isExpanded = planFeatures[0].classList.contains('expanded');
          
          planFeatures.forEach(features => {
            if (isExpanded) {
              features.classList.remove('expanded');
            } else {
              features.classList.add('expanded');
            }
          });
          
          if (isExpanded) {
            expandBtnText.textContent = 'View All Features';
            expandIcon.style.transform = 'rotate(0deg)';
          } else {
            expandBtnText.textContent = 'Collapse Features';
            expandIcon.style.transform = 'rotate(180deg)';
          }
        });
      }
      
      // Auto-expand on larger screens
      function handleResize() {
        if (window.innerWidth > 768) {
          planFeatures.forEach(features => {
            features.classList.add('expanded');
          });
          if (expandBtnText) {
            expandBtnText.textContent = 'View All Features';
          }
          if (expandIcon) {
            expandIcon.style.transform = 'rotate(0deg)';
          }
        }
      }
      
      window.addEventListener('resize', handleResize);
      handleResize(); // Initial check
    });
  </script>
</body>
</html> 