CTA — .mv-cta

node scripts/add.mjs cta --out ./src/marvelous

<div id="cta-demo" style="background:var(--mv-bg)">
  <!-- Band (default) -->
  <section class="mv-cta" aria-labelledby="cta-b-title">
    <div class="mv-cta-inner">
      <div class="mv-cta-panel">
        <p class="mv-cta-eyebrow">Ready when you are</p>
        <h2 class="mv-cta-title" id="cta-b-title">Close September <span class="mv-cta-muted">in Ledgerline.</span></h2>
        <p class="mv-cta-text">Connect your bank feeds this afternoon and run your next month-end on a single screen. Our team migrates your checklist for you.</p>
        <div class="mv-cta-actions">
          <a class="mv-button" data-size="lg" href="#cta-demo">Start a free trial</a>
          <a class="mv-button" data-size="lg" data-variant="outline" href="#cta-demo">Book a demo</a>
        </div>
        <p class="mv-cta-note">
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>30 days free</span>
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>No card required</span>
          <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Free migration</span>
        </p>
      </div>
    </div>
  </section>

  <!-- Ink -->
  <section class="mv-cta" data-variant="ink" aria-labelledby="cta-i-title">
    <div class="mv-cta-inner" style="padding-top:0">
      <div class="mv-cta-panel">
        <div class="mv-cta-bg" aria-hidden="true">
          <div class="mv-dot-pattern" data-fill style="--mv-dot-pattern-mask: radial-gradient(ellipse 55% 90% at 100% 100%, #000 10%, transparent 70%)"></div>
        </div>
        <p class="mv-cta-eyebrow">For controllers &amp; CFOs</p>
        <h2 class="mv-cta-title" id="cta-i-title">Your auditor will <span class="mv-cta-muted">thank you.</span></h2>
        <p class="mv-cta-text">Give them a read-only link to every match, approval and journal of the year — signed, timestamped and exportable in one click.</p>
        <div class="mv-cta-actions">
          <a class="mv-button" data-size="lg" href="#cta-demo">Talk to a specialist</a>
          <a class="mv-button" data-size="lg" data-variant="ghost" href="#cta-demo">Security →</a>
        </div>
        <p class="mv-cta-note">SOC 2 Type II · ISO 27001 · GDPR, hosted in the EU</p>
      </div>
    </div>
  </section>

  <!-- Newsletter -->
  <section class="mv-cta" data-variant="newsletter" aria-labelledby="cta-n-title">
    <div class="mv-cta-inner" style="padding-top:0">
      <div class="mv-cta-panel">
        <p class="mv-cta-eyebrow">The Close Notes</p>
        <h2 class="mv-cta-title" id="cta-n-title">One month-end playbook, <span class="mv-cta-muted">every other Tuesday.</span></h2>
        <p class="mv-cta-text">Checklists, accrual templates and war stories from 21,000 finance leads. A four-minute read, never a sales pitch.</p>
        <form class="mv-cta-form" id="cta-news" novalidate>
          <label class="mv-sr-only" for="cta-email">Work email</label>
          <input class="mv-input" data-size="lg" id="cta-email" type="email" placeholder="[email protected]" autocomplete="email" aria-describedby="cta-news-status">
          <button class="mv-button" data-size="lg" type="submit">Subscribe</button>
        </form>
        <p class="mv-cta-note">Unsubscribe in one click. We never share your address.</p>
        <p class="mv-cta-status" id="cta-news-status" role="status" aria-live="polite"></p>
      </div>
    </div>
  </section>

  <script type="module">
    const form = document.querySelector("#cta-news");
    const status = document.querySelector("#cta-news-status");
    const input = form?.querySelector("input");
    const seen = new Set();
    let timer;
    const say = (state, text) => {
      clearTimeout(timer);
      status.dataset.state = state;
      status.textContent = text;
      timer = setTimeout(() => { status.textContent = ""; delete status.dataset.state; }, 5000);
    };
    form?.addEventListener("submit", (e) => {
      e.preventDefault();
      const email = input.value.trim().toLowerCase();
      if (!email) return;
      if (!input.checkValidity()) return say("error", "That address doesn’t look right. Check for a typo.");
      if (seen.has(email)) return say("error", "You’re already subscribed with this address.");
      seen.add(email);
      input.value = "";
      say("success", "Subscribed. The next issue lands on Tuesday.");
    });
  </script>
</div>