/*
   * Decorative gradient artwork.
   * Figma exports these as rotated / over-sized vectors anchored to a clipped
   * 1440x808 (hero) and 1440x542 (cta) box. The numbers below are the exact
   * resolved geometry from the design; the boxes are centre-anchored so they
   * behave identically at the 390px mobile width.
   */
  .art          { position: absolute; inset-inline: 0; overflow: hidden; pointer-events: none; }
  .art img      { display: block; max-width: none; }

  /* hero — identical geometry on desktop and mobile */
  .art--hero    { bottom: 0; height: 808px; }
  .hero-a       { position: absolute; left: 50%; top: 127.7px; width: 2430.5px; height: 1979.2px;
                  transform: translateX(-50%) rotate(6.23deg); }
  .hero-a img   { position: absolute; left: -118.6px; top: 0; width: 2669.7px; height: 1985.1px; }
  .hero-b       { position: absolute; left: calc(50% - 809px); top: 143.25px; width: 1539.46px; height: 1165.68px; }
  .hero-b img   { position: absolute; left: -32px; top: 0; width: 1603.5px; height: 1165.68px; }

  /* cta — mobile box is 435px tall, desktop 542px */
  .art--cta     { bottom: 0; height: 435px; }
  .cta-a        { position: absolute; left: calc(50% - 1164.65px); top: -9.83px; width: 2346.9px; height: 1752.9px; }
  .cta-a img    { position: absolute; left: -184.2px; top: -54.5px; width: 2716.5px; height: 1807.4px; }
  .cta-b        { position: absolute; left: calc(50% - 123.33px); top: 475.33px; width: 2409.33px; height: 1354.75px;
                  transform: translate(-50%, -50%); }
  .cta-b img    { position: absolute; inset: 0; width: 100%; height: 100%; }

  @media (min-width: 1024px) {
    .art--cta   { top: 0; bottom: auto; height: 542px; }
    .cta-a      { top: 97.2px; }
    .cta-b      { top: 582.33px; }
  }