/* The signature wave — the mark, repeated.
 *
 * The padlock wave is the shape in the logo, and the holding page says plainly
 * what it is for: it "sits in the logo, marks the three pillars, opens every
 * section and closes the footer." In this theme it had stopped at the logo,
 * so the site had a signature it never signed with. These rules carry it
 * through the pages.
 *
 * It is drawn as a mask rather than an inline SVG for two reasons. No module
 * markup had to change — seventeen templates keep the labels they already had.
 * And the shape takes the ink of whatever it opens through currentColor: slate
 * on the light ground, sky on navy, slate again on the band. One rule, every
 * ground, no second copy of the palette. The path itself lives in tokens.css,
 * which is the only file allowed a literal.
 *
 * The homepage is left out. It opens on its own terms and does not need the
 * mark repeated down it.
 *
 * The whole file is inside @supports. Without mask the shape cannot be drawn,
 * and the declarations would leave a filled rectangle where the signature
 * should be — a signature that renders as a black bar is worse than one that
 * is simply absent, so in that browser nothing is drawn at all.
 */

@supports ((-webkit-mask: none) or (mask: none)) {

  /* .pl-proof__label is deliberately absent. It labels each figure in the
   * proof bar rather than opening a section, so on Trade it drew the mark
   * four times in one row. A signature repeated four times in a line is
   * not a rhyme, it is a stutter. */

  body:not(.home) .pl-answer__label::after,
  body:not(.home) .pl-band__eyebrow::after,
  body:not(.home) .pl-contact__label::after,
  body:not(.home) .pl-duo__eyebrow::after,
  body:not(.home) .pl-faq__label::after,
  body:not(.home) .pl-figure-teaser__label::after,
  body:not(.home) .pl-formblock__label::after,
  body:not(.home) .pl-founder__label::after,
  body:not(.home) .pl-mech-steps__label::after,
  body:not(.home) .pl-network__label::after,
  body:not(.home) .pl-origin-hero__eyebrow::after,
  body:not(.home) .pl-pillars__label::after,
  body:not(.home) .pl-product-hero__eyebrow::after,
  body:not(.home) .pl-projects__label::after,
  body:not(.home) .pl-range__label::after,
  body:not(.home) .pl-steps__label::after,
  body:not(.home) .pl-page-hero__text > .label:first-child::after,
  body:not(.home) .pl-section > .pl-wrap > .label:first-child::after {
    content: "";
    display: inline-block;
    flex: none;
    vertical-align: middle;
    width: 2.2rem;
    aspect-ratio: 100 / 24;
    margin-left: var(--sp-2);
    background-color: currentColor;
    -webkit-mask: var(--pl-wave) left center / contain no-repeat;
    mask: var(--pl-wave) left center / contain no-repeat;
  }

  /* Closing the footer.
   *
   * Above the payoff, not through it: that line is fixed copy under spec §7.5
   * and nothing here touches it. The mark is wider than the one that opens a
   * section, because it closes the whole page rather than introducing a
   * paragraph. */
  body:not(.home) .pl-footer__payoff::before {
    content: "";
    display: block;
    width: 3.4rem;
    aspect-ratio: 100 / 24;
    margin-bottom: var(--sp-2);
    background-color: currentColor;
    -webkit-mask: var(--pl-wave) left center / contain no-repeat;
    mask: var(--pl-wave) left center / contain no-repeat;
  }

}