.pricing-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 92px;
  color: var(--paper);
  background: var(--ink);
}

.pricing-hero::after {
  position: absolute;
  top: -118px;
  right: clamp(12px, 8vw, 120px);
  content: "$";
  color: rgba(224, 169, 46, .1);
  font: 600 clamp(14rem, 30vw, 25rem)/1 Fraunces, Georgia, serif;
  pointer-events: none;
}

.pricing-hero .wrap { position: relative; z-index: 1; }
.pricing-hero .eyebrow { margin-bottom: 14px; color: var(--mustard); }
.pricing-hero h1 { max-width: 13ch; margin: 0; font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 600; line-height: 1; letter-spacing: -.025em; }
.pricing-hero .lede { max-width: 52ch; margin-top: 20px; color: rgba(244, 243, 240, .72); font-size: 1.1rem; font-weight: 500; }

.pricing-section { padding: 64px 0 16px; }
.pricing-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); gap: 40px; align-items: center; }
.price-card { padding: 40px; border-radius: 24px; color: var(--paper); background: var(--ink); text-align: center; box-shadow: 0 24px 60px rgba(22, 24, 29, .14); }
.price-card .plan { margin: 0; color: var(--paper); font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.price-card .wordmark .lt { color: var(--paper); }
.price-card .wordmark .hv { color: var(--mustard); }
.price-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 24px; }
.price-option { display: flex; flex-direction: column; padding: 22px 18px; border: 1px solid rgba(244, 243, 240, .2); border-radius: 16px; text-align: left; }
.price-option .amt { display: flex; align-items: baseline; gap: 5px; margin: 12px 0 8px; font-size: 2.35rem; font-weight: 600; line-height: 1; }
.price-unit { font-size: 1rem; font-weight: 500; }
.price-option .billing-note { min-height: 3.2em; margin: 0 0 18px; color: rgba(244, 243, 240, .68); font-size: .84rem; font-weight: 500; line-height: 1.45; }
.price-feat { display: flex; flex-direction: column; gap: 11px; margin: 0 0 26px; padding: 0; list-style: none; text-align: left; }
.price-feat li { display: flex; gap: 11px; color: rgba(244, 243, 240, .9); font-size: .96rem; font-weight: 500; }
.price-feat .tick { flex: none; color: var(--mustard); font-weight: 900; }
.price-card .btn { width: 100%; justify-content: center; }

.pricing-note { padding: clamp(8px, 3vw, 28px); }
.pricing-note h2 { max-width: 13ch; margin: 12px 0 18px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.06; letter-spacing: -.018em; }
.pricing-note > p:last-of-type { max-width: 46ch; color: var(--grey); font-size: 1.04rem; font-weight: 500; }
.pricing-note a { display: inline-block; margin-top: 22px; color: var(--mustard-deep); font-weight: 700; }
.pricing-note a:hover,
.pricing-note a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 800px) {
  .pricing-hero { padding: 58px 0 70px; }
  .pricing-layout { grid-template-columns: 1fr; }
  .pricing-note { grid-row: 1; padding: 0; }
}

@media (max-width: 560px) {
  .price-card { padding: 28px 22px; border-radius: 20px; }
  .price-options { grid-template-columns: 1fr; }
  .price-option .billing-note { min-height: 0; }
}