---
// Flagship highlight — Git for 3D Printing.
//
// Originally a two-column billboard (copy + fake agent-chat mock).
// The mock was cut on 2026-04-24 — no image is better than a fake
// image — which meant the section's atmospheric background
// (orange radials + slightly-darker base) was doing
// nothing except creating a seam between this section and the
// learning-curve section above it.  The section now shares the
// page's main canvas and differentiates itself through content and
// typographic weight, not paint.
//
// Tier honesty: the H2 carries a small ``Pro`` pill for users who
// don't read the paragraph below the list.  Patent-pending does NOT
// live here — the homepage IP band and the pricing footer carry
// the single, considered, generic statement; per-feature patent
// callouts are explicitly forbidden anywhere on the site to avoid
// mapping the filing surface for competitors.
---

<section class="g3d-section">
  <div class="container">
    <div class="g3d-inner">
      <div class="g3d-copy">
        <h2 class="g3d-heading">Git for 3D Printing <span class="g3d-pro-pill">Pro</span></h2>
        <p class="g3d-lead">
          Branch new ideas without losing the working version. Merge what prints best.
          Sign a release and prove later that nothing changed.
        </p>
        <p class="g3d-sub">Works on three things you iterate on:</p>
        <ul class="g3d-list">
          <li><strong>Your designs</strong> &mdash; the mesh itself</li>
          <li><strong>Your decorations</strong> &mdash; logos, textures, photo-emboss, brand assets</li>
          <li><strong>Your features</strong> &mdash; reusable parts: a hat for an action figure, a mounting bracket, chamfers, fillets, pockets, holes</li>
        </ul>
        <p class="g3d-lead g3d-lead-small">
          On Pro and up. Local-first &mdash; branches, merges, and signed releases live on your machine. Pro adds cross-machine cloud sync; Business adds team pull requests and approval gates; Enterprise adds audit log export, SSO, and step-up authentication on production releases.
        </p>
        <div class="g3d-ctas">
          <a href="/pricing" class="btn g3d-btn-primary">Get Pro &rarr;</a>
          <a href="#features" class="btn btn-ghost g3d-btn-secondary">See all features</a>
        </div>
      </div>
    </div>
  </div>
</section>

<style is:global>
  /* Shares the page's main dark canvas — no distinct background.
     Only a hairline border-top delimits the section, matching the
     rhythm every other ``.bordered`` section on the page follows. */
  .g3d-section {
    padding: 80px 0;
    border-top: 1px solid var(--border);
  }

  /* Single-column layout.  Content centers on the page's vertical
     spine to match the hero + learning-curve sections above;
     individual sub-blocks (list, tier footnote) reset their text-
     align to left for readability where centered multi-line bodies
     would otherwise look ragged. */
  .g3d-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }

  /* Pro pill, inline with the H2.  Subordinate to the heading —
     this is a quiet tier signal, not a competing callout. */
  .g3d-pro-pill {
    display: inline-block;
    vertical-align: middle;
    margin-left: 14px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(255, 107, 43, 0.35);
    border-radius: 999px;
    position: relative;
    top: -0.15em;
  }

  .g3d-heading {
    font-family: var(--font);
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: var(--text);
    text-wrap: balance;
  }
  .g3d-heading::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #f59e42);
    border-radius: 2px;
    /* Auto side-margins center the accent bar under the now-
       centered heading. */
    margin: 16px auto 0;
  }

  .g3d-lead {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text);
    /* Centered block so the 540px paragraph sits on the spine. */
    margin: 0 auto 20px;
    max-width: 540px;
    /* Prevent last-line orphans. */
    text-wrap: pretty;
  }
  /* Tier footnote — wider column + left-aligned body text because
     centering 4+ lines of dense text reads as ragged.  Block still
     sits on the spine via auto margins. */
  .g3d-lead-small {
    font-size: 15px;
    color: var(--text-muted);
    text-wrap: pretty;
    max-width: 640px;
    text-align: left;
  }

  .g3d-sub {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 12px;
  }

  .g3d-list {
    list-style: none;
    padding: 0;
    /* Centered block — the cluster of bullets sits on the spine,
       but items inside read left-aligned so the arrow + label line
       up naturally and long items don't go ragged on both edges. */
    margin: 0 auto 24px;
    max-width: 560px;
    text-align: left;
  }
  .g3d-list li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 16px;
    color: var(--text);
  }
  .g3d-list li::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 600;
  }
  .g3d-list strong { color: var(--text); font-weight: 600; }

  .g3d-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    /* Center the button row on the spine. */
    justify-content: center;
  }
  .g3d-btn-secondary { margin-left: 0; }

  @media (max-width: 900px) {
    .g3d-section { padding: 56px 0; }
  }
</style>
