@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: 2.125rem; /* spec 34px after the beta note */
    max-inline-size: 37.5rem;
  }

  .price-notes + .cluster {
    --flow-space: 2.125rem; /* spec .pn-cta 34px */
  }

  .beta-note {
    display: inline-block;
    position: relative;
    isolation: isolate;
    padding: 2px 6px;
    font-size: 1.15rem;
    font-weight: var(--weight-semi);
    color: var(--color-mark-ink);
  }

  .beta-note::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-mark);
    transform: skew(-6deg) rotate(-0.5deg);
  }

  .price-lead {
    display: block;
    margin-block-end: var(--space-2xs);
    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;
    margin-block: 0.6875rem; /* spec 11px */
    font-size: 1.5rem;
    color: var(--color-text-faint);
  }

  .price-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    color: var(--color-text);
  }

  .price-amount {
    position: relative;
    font-family: var(--font-display);
    font-size: 2.7rem; /* spec .pn-price; not a UI-scale step */
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    color: var(--color-text);
  }

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

  .price-unit {
    font-size: 1rem;
    color: var(--color-text-faint);
  }

  .price-note {
    font-family: var(--font-hand);
    font-size: 1.45rem;
    font-weight: var(--weight-semi);
    color: var(--color-accent-strong);
    rotate: -1.5deg;
  }

  /* 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;
  }
}