/* missionarylane.org/pricing: plan cards come from site.css (.plans/.plan); this adds the page frame and the tables. */
.price-page { max-width: var(--wrap); margin: 0 auto; padding: clamp(16px, 4vw, 40px) var(--gut) 80px; }
.price-page > header { max-width: 46rem; }
.price-page h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); line-height: 1; margin-bottom: .35em; }
.price-page section { margin-top: clamp(48px, 7vw, 80px); }
.price-page section > h2 { margin-bottom: .3em; }
.price-page section > p { max-width: 44rem; }
.plan .per { font: 500 .95rem/1.2 var(--display); color: var(--muted); letter-spacing: 0; }
.plan .for { font: 600 1rem/1.3 var(--display); color: var(--field); margin: 0; }
.plan.featured { border: 2px solid var(--pin); }
.plan li { margin: .3em 0; }

.everyone { columns: 2 18rem; column-gap: 40px; padding-left: 1.2em; margin: 1rem 0 0; max-width: 60rem; }
.everyone li { break-inside: avoid; margin: 0 0 .5em; }
.everyone li::marker { color: var(--field); }

.table-wrap { overflow-x: auto; margin: 1.2rem 0 .6rem; -webkit-overflow-scrolling: touch; }
.ptable { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--card); border-radius: 14px; overflow: hidden; font-size: .93rem; line-height: 1.45; }
.ptable th, .ptable td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ptable thead th { font: 650 .92rem/1.25 var(--display); color: var(--ink); background: #F6F8FB; }
.ptable tbody th { font: 650 .98rem/1.3 var(--display); color: var(--ink); }
.ptable tbody th small { display: block; font: 400 .85rem/1.4 var(--body); color: var(--muted); margin-top: 3px; }
.ptable tr:last-child > * { border-bottom: 0; }
.ptable .inc { color: var(--field); font-weight: 600; }
.ptable td.num { white-space: nowrap; }
.table-note { font-size: .9rem; color: var(--muted); max-width: 44rem; }

.payg { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 24px 40px; margin-top: 1.2rem; }
.payg h3 { margin-bottom: .3em; }
.payg p { margin: 0; }

.price-cta { margin-top: clamp(56px, 8vw, 96px); padding: clamp(28px, 5vw, 48px); background: var(--ink); color: #DCE5F0; border-radius: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.price-cta h2 { color: #fff; margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.price-cta p { margin: .3em 0 0; color: #DCE5F0; }