@layer blocks {
  /* Prices written out as annotated notes rather than cards: a name, a big
     figure, a unit, and a handwritten remark. The saving on the yearly plan is
     circled by hand, see .price-circle. */
  .price-notes {
    --flow-space: var(--space-s);
  }

  .price-notes + .cluster {
    --flow-space: var(--space-l); /* spec .pn-cta 34px */
  }

  .price-lead {
    display: block;
    font-size: var(--text-lg);
    rotate: -2deg;
  }

  .price-line {
    --cluster-align: baseline;
    --cluster-space: 0.55ch;
    font-size: var(--text-lg);
  }

  .price-amount {
    position: relative;
    font-size: var(--text-3xl);
    line-height: var(--leading-none);
  }

  .price-amount small {
    font-size: 0.5em;
  }

  /* Hand-drawn ring around the figure. Overrides the global svg sizing rules,
     which would otherwise clamp it to 1em. */
  .price-circle {
    position: absolute;
    inset: calc(-1 * var(--space-2xs)) calc(-1 * var(--space-xs));
    z-index: 2;
    overflow: visible;
    pointer-events: none;
  }

  .price-circle svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    rotate: -2deg;
  }

  .price-circle path {
    fill: none;
    stroke: var(--color-decorative);
    stroke-width: 2.3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.92;
  }
}