{% load brickwork_components %}
{% comment %}
CTA / full-bleed: an inverse band that runs edge to edge.

WHEN TO USE THIS. Once per page, at the end. Its whole effect comes from being
the only thing on the page that looks like this; a second one halves the value
of both.

THE FULL-BLEED ESCAPE, AND WHY IT IS NEEDED. The marketing shell constrains
every direct child of .bw-marketing__content to the marketing max-width and
adds a page gutter. A section that wants the full viewport width has to escape
that, which .bw-cta-bleed does in CSS (see marketing.css). This is why the
class carries the escape rather than you wrapping the section in anything.

Because it escapes the gutter, it applies its OWN inline padding. Without that
the copy would touch the viewport edge on a phone.

CONTRAST. Like hero/media-behind, this band carries its own inverse surface and
uses the checked --bw-color-fg-on-inverse pair, so it reads identically in both
themes. The secondary action is an inverse-surface button rather than the
standard secondary, whose border is tuned for the page surface.
{% endcomment %}
<section class="bw-cta-bleed">
  <div class="bw-cta-bleed__inner">
    <h2 class="bw-cta-bleed__heading">Get paid faster, starting this month</h2>
    <p class="bw-cta-bleed__body">
      Thirty days free. Cancel by closing the tab.
    </p>
    <div class="bw-cta-bleed__actions">
      {% bw_button "Start free trial" variant="primary" size="lg" href="/accounts/signup/" %}
      <a class="bw-cta-bleed__link" href="/pricing/">See pricing</a>
    </div>
  </div>
</section>