/* The price page (site/pricing), after anga's: a pale violet opening, the word huge on the left,
   a picture and the lede on the right; then the plans on ink, edge to edge, three columns, each
   a name and its line, the price huge, what it includes with the logo's ring as the tick. */
@layer components {
  .pricing__head {
    display: grid;
    gap: var(--block-space-double) calc(var(--inline-space) * 6);
    align-items: end;
    margin: calc(-1 * var(--block-space-double)) var(--bleed) 0; /* meets the header */
    padding: clamp(3rem, 10vh, 6rem) var(--site-edge);
    background: var(--color-link-tint);

    @media (min-width: 52rem) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

    & h1 {
      margin-block-start: var(--block-space);
      font-size: clamp(3.25rem, 1rem + 7vw, 8rem); /* the word on one line in its half */
      font-weight: 800;
      line-height: 0.85;
      letter-spacing: -0.06em;
      text-transform: uppercase;
    }
  }

  .pricing__aside {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);

    & .site-image { border-radius: var(--radius-large); }
    & .site-lede { margin: 0; font-size: var(--text-large); }
  }

  /* The plans, on ink, fixed in either mode. */
  .pricing__plans {
    margin: 0 var(--bleed);
    padding: clamp(3rem, 10vh, 6rem) var(--site-edge);
    color: #fff;
    background: oklch(22.1% 0.031 292.3);

    &.pricing__plans { margin-block-start: calc(-1 * var(--block-space) * 1.5); } /* flush under the opening: undoes .site-page's gap */
  }

  .pricing .pricing__plans-title { /* beats .site-page h2 */
    margin: 0 0 var(--block-space-double);
    font-size: clamp(3rem, 1rem + 8vw, 7.5rem);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.06em;
    text-align: end;
    text-transform: uppercase;
  }

  .pricing .site-prices {
    gap: var(--inline-space-double);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    border: 0;

    & > .pricing__plan {
      gap: var(--block-space-half);
      padding: calc(var(--block-space) * 1.75) calc(var(--inline-space) * 3);
      color: rgb(255 255 255 / 0.75);
      background: rgb(255 255 255 / 0.05);
      border: 0;
      border-radius: var(--radius-large);
    }

    & dt {
      display: flex;
      flex-direction: column;
      font-size: var(--text-x-large);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: #fff;

      & small { font-size: var(--text-small); font-weight: 400; letter-spacing: 0; color: rgb(255 255 255 / 0.65); }
    }

    & dd { color: rgb(255 255 255 / 0.75); }

    & .metrics__figure { order: 0; margin-block-start: var(--block-space); color: #fff; }
    & > div:first-child .metrics__figure { color: #c8f04a; } /* the price to read first: the stamp's lime */
    & .pricing__talk { font-size: clamp(2.25rem, 1.25rem + 3vw, 3.25rem); }
  }

  .pricing__includes {
    margin-block-start: var(--block-space);
    padding-block-start: var(--block-space);
    border-block-start: 1px solid rgb(255 255 255 / 0.15);

    & ul { display: flex; flex-direction: column; gap: var(--block-space-half); margin: var(--block-space-half) 0 0; padding: 0; list-style: none; }

    & li {
      display: flex;
      gap: var(--inline-space);
      max-inline-size: none;
      font-weight: 600;
      color: #fff;

      &::before { /* the logo's ring and tick, in lime */
        content: "";
        flex: none;
        inline-size: 1.2em;
        block-size: 1.2em;
        background: #c8f04a;
        mask: url("/assets/motifs/ring-e0d35887.svg") center / contain no-repeat;
      }
    }
  }

  .pricing .pricing__plans .btn {
    --btn-background: #fff;
    --btn-color: oklch(22.1% 0.031 292.3);
    --btn-border: #fff;
    --btn-hover-background: #6448e8;
    --btn-hover-color: #fff;
    --btn-hover-border: #6448e8;
  }
}