@layer app {
  body:has(.pricing-page) { background: #ffffff; }
  .pricing-page { min-height: calc(100vh - 10rem); padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: 5rem; }
  .pricing-hero { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .pricing-kicker, .plan-label { color: var(--primary-hover); font-size: 0.9rem; font-weight: 800; }
  .pricing-hero h1 { margin-top: 0.4rem; color: var(--ink); font-family: "Manrope", var(--font-sans); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
  .pricing-hero p:last-child { max-width: 36rem; margin-top: 0.75rem; color: var(--muted); font-size: 1.05rem; }
  .pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .price-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 1.5rem; min-height: 28rem; border: 1px solid var(--line); border-radius: 0.75rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: #ffffff; }
  .price-card h2 { margin-top: 0.45rem; color: var(--ink); font-family: "Manrope", var(--font-sans); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; }
  .price-card .plan-label { color: var(--primary-hover); }
  .price { margin-top: 1.25rem; color: var(--ink); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
  .price small { color: var(--muted); font-size: 0.9rem; font-weight: 700; letter-spacing: 0; }
  .plan-summary { max-width: 32rem; color: var(--muted); }
  .plan-features { display: grid; align-content: start; gap: 0.65rem; margin: 0; padding: 0; list-style: none; color: var(--ink); font-size: 0.92rem; font-weight: 700; }
  .plan-features li { display: flex; gap: 0.55rem; align-items: baseline; }
  .plan-features li::before { color: var(--primary-hover); content: "✓"; }
  .price-card.featured { border-color: var(--ink); background: var(--ink); color: #ffffff; }
  .price-card.featured h2, .price-card.featured .price, .price-card.featured .plan-features { color: #ffffff; }
  .price-card.featured .plan-label { color: var(--progress); }
  .price-card.featured .price small, .price-card.featured .plan-summary { color: var(--line); }
  .price-card.featured .plan-features li::before { color: var(--progress); }
  .price-card.featured .button { border-color: var(--progress); background: var(--progress); color: var(--ink); }
  .price-card.featured .button:hover { border-color: #ffffff; background: #ffffff; }
  .pricing-actions { display: grid; gap: 0.65rem; }
  .price-card.featured .button.secondary { border-color: var(--line); background: transparent; color: #ffffff; }
  .price-card.featured .button.secondary:hover { border-color: #ffffff; background: #ffffff; color: var(--ink); }

  @media (max-width: 680px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .price-card { min-height: 0; }
  }
}