.pricing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.2rem, 4.6vw, 5.3rem) 0 clamp(3rem, 4.1vw, 4.7rem);
  color: #f7f0e6;
  background: radial-gradient(circle at 50% 35%, rgba(81, 98, 57, .34), transparent 35%), linear-gradient(145deg, #172415, #1c2d18 48%, #162314);
}

.pricing::before {
  position: absolute;
  z-index: -3;
  inset: 0;
  content: "";
  opacity: .24;
  background: radial-gradient(ellipse at 4% 60%, rgba(10, 15, 8, .8), transparent 36%), radial-gradient(ellipse at 95% 8%, rgba(10, 15, 8, .55), transparent 30%);
}

.pricing__container { position: relative; z-index: 2; max-width: 80rem; }
.pricing__shadow { position: absolute; z-index: -1; width: 53rem; height: 46rem; opacity: .32; filter: blur(11px) saturate(.62) brightness(.83) contrast(1.07); background: url('assets/reviews-olive-4.png') center / contain no-repeat; pointer-events: none; }
.pricing__shadow--left { top: -14rem; left: -19rem; transform: rotate(-19deg); }
.pricing__shadow--right { right: -20rem; bottom: -21rem; transform: rotate(153deg); }
.pricing__shadow--top { top: -22rem; right: 16%; width: 49rem; opacity: .24; transform: rotate(25deg); }

.pricing__olive { position: absolute; z-index: 1; max-width: none; pointer-events: none; filter: saturate(.74) brightness(.98) sepia(.16) drop-shadow(0 .8rem 1.1rem rgba(0, 0, 0, .35)); }
.pricing__olive--top { top: -7.6rem; left: -7rem; width: min(32vw, 31rem); opacity: .7; transform: rotate(-13deg); }
.pricing__olive--top-right { top: -8rem; right: -8.5rem; width: min(29vw, 28rem); opacity: .57; transform: rotate(1deg); }
.pricing__olive--bottom-left { bottom: -11rem; left: -10rem; width: min(28vw, 28rem); opacity: .42; transform: rotate(178deg); }
.pricing__olive--bottom { right: -7rem; bottom: -8.5rem; width: min(36vw, 34rem); opacity: .74; transform: rotate(-4deg); }

.pricing__intro { position: relative; z-index: 2; text-align: center; }
.pricing__rule { display: block; width: 6.25rem; height: 1px; margin: 0 auto .8rem; background: #d5a86a; }
.pricing h2 { margin: 0; color: #f8f2ea; font-family: var(--pb-font-heading, 'Cormorant Garamond', Georgia, serif); font-size: clamp(3rem, 5.1vw, 5.25rem); font-weight: 400; line-height: .88; letter-spacing: -.045em; }
.pricing h2 span { color: #d8ad70; }
.pricing__intro > p { margin: .85rem 0 .9rem; font-family: var(--pb-font-heading, 'Cormorant Garamond', Georgia, serif); font-size: clamp(1.42rem, 2.25vw, 2.12rem); line-height: 1.1; }
.pricing__intro > strong { display: block; color: #d8ad70; font-family: var(--pb-font-heading, 'Cormorant Garamond', Georgia, serif); font-size: clamp(3.9rem, 6.3vw, 6.2rem); font-weight: 400; line-height: .92; letter-spacing: -.035em; }

.pricing__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: clamp(1.45rem, 2.5vw, 2.4rem); }
.pricing__detail { display: grid; grid-template-columns: 7rem 1fr; min-height: 11.6rem; align-items: center; padding: 1.25rem 1.65rem; border: 1px solid rgba(217, 179, 113, .49); border-radius: 1rem; background: rgba(29, 47, 25, .35); box-shadow: inset 0 1px rgba(255, 244, 222, .03), 0 .7rem 1.8rem rgba(2, 9, 2, .18); backdrop-filter: blur(4px); }
.pricing__icon { display: grid; width: 6rem; height: 6rem; place-items: center; border-radius: 50%; color: #d8ad70; background: rgba(142, 130, 73, .18); }
.pricing__icon svg { width: 3.7rem; height: 3.7rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.1; }
.pricing__detail > div + div { align-self: stretch; padding-left: 1.45rem; border-left: 1px solid rgba(217, 179, 113, .72); }
.pricing__detail h3 { margin: .1rem 0 .35rem; color: #faf3e9; font-family: var(--pb-font-heading, 'Cormorant Garamond', Georgia, serif); font-size: clamp(1.7rem, 2.5vw, 2.35rem); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; }
.pricing__detail p { margin: 0; font-family: var(--pb-font-heading, 'Cormorant Garamond', Georgia, serif); font-size: clamp(1.08rem, 1.5vw, 1.35rem); line-height: 1.2; }
.pricing__rule--bottom { width: 6.25rem; margin: clamp(1.7rem, 2.6vw, 2.4rem) auto 0; }

@media (max-width: 820px) {
  .pricing__details { grid-template-columns: 1fr; }
  .pricing__detail { min-height: auto; }
}

@media (max-width: 560px) {
  .pricing { padding-block: 4rem; }
  .pricing h2 { font-size: clamp(3rem, 14vw, 4.55rem); }
  .pricing__intro > p { font-size: 1.65rem; }
  .pricing__detail { grid-template-columns: 1fr; gap: 1.15rem; padding: 1.5rem; text-align: center; }
  .pricing__icon { margin: 0 auto; }
  .pricing__detail > div + div { padding: 1.15rem 0 0; border-top: 1px solid rgba(217, 179, 113, .72); border-left: 0; }
  .pricing__olive--top { top: -3rem; left: -5rem; width: 25rem; }
  .pricing__olive--bottom { right: -9rem; width: 28rem; }
}
