@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 + .cluster {
    --flow-space: 2.125rem; /* spec .pn-cta 34px */
  }

  .price-lead {
    display: block;
    font-family: var(--font-hand);
    font-size: 1.5rem;
    font-weight: var(--weight-semi);
    color: var(--color-text-faint);
    rotate: -2deg;
  }

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

  .price-amount {
    position: relative;
    font-size: 2.7rem;
    line-height: var(--leading-none);
  }

  .price-amount small {
    font-size: 0.5em;
    font-weight: var(--weight-semi);
    color: var(--color-text-faint);
  }

  /* Hand-drawn ring around the figure. Overrides the global svg sizing rules,
     which would otherwise clamp it to 1em. */
  .price-circle {
    position: absolute;
    inset: -10px -15px -8px;
    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;
  }
}