/* /pricing — tier cards, interval selector, comparison table, pay-per-use.
   Reuses the site's own tokens (--accent, --gold, --radius, --hair, .glass,
   .band, .note) rather than inventing a parallel palette; --pc-pro is the
   only new token, a restrained purple used solely for the Pro card. */

.pr-hero .note { margin-top: 14px; }
.pr-hero .note a { color: var(--accent); }

.pr-interval-band { margin-bottom: 34px; }
.pr-interval-group {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(0,0,0,.03); border: 1px solid var(--hair);
}
.pr-interval-btn {
  border: none; background: transparent; padding: 9px 18px; border-radius: 999px;
  font-size: .86rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.pr-interval-btn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

.pr-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px; align-items: stretch;
}

.pc {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  padding: 28px 24px; border-radius: var(--radius); border: 1px solid var(--hair);
  background: rgba(255,255,255,.6); backdrop-filter: blur(14px);
}
.pc-basic { border-color: color-mix(in srgb, var(--accent) 35%, var(--hair)); }
.pc-pro {
  --pc-pro: #7c5cbf;
  border-color: color-mix(in srgb, var(--pc-pro) 40%, var(--hair));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc-pro) 6%, rgba(255,255,255,.6)), rgba(255,255,255,.6));
}
.pc-badge {
  position: absolute; top: -12px; left: 24px; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
  background: var(--accent); color: #fff;
}
.pc-pro .pc-badge { background: var(--pc-pro); }
.pc-title { margin: 6px 0 0; font-size: 1.3rem; }

.pc-price { display: flex; align-items: baseline; }
.pc-price-amt { font-size: 2.1rem; font-weight: 700; display: inline-flex; align-items: baseline; gap: 8px; }
.pc-price-per { font-size: .78rem; font-weight: 500; color: var(--ink-faint); }

.pc-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pc-features li {
  font-size: .88rem; line-height: 1.45; padding-left: 22px; position: relative; color: var(--ink-soft);
}
.pc-features li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.pc-pro .pc-features li::before { color: var(--pc-pro); }

.pc-cta {
  margin-top: 6px; text-align: center; font-weight: 650; padding: 13px 20px; border-radius: 14px;
  border: 1px solid var(--hair); cursor: pointer;
}
.pc-cta.pc-current { background: rgba(0,0,0,.04); color: var(--ink-soft); cursor: default; }
.pc-cta-disabled {
  display: block; text-align: center; padding: 13px 20px; border-radius: 14px;
  color: var(--ink-faint); font-size: .86rem; border: 1px dashed var(--hair);
}

.pr-compare-h { display: inline; }
.pr-compare summary { cursor: pointer; list-style: none; }
.pr-compare summary::-webkit-details-marker { display: none; }
.pr-scroll { overflow-x: auto; margin-top: 18px; }
.pr-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 480px; }
.pr-table th, .pr-table td { padding: 10px 14px; border-bottom: 1px solid var(--hair); text-align: left; }
.pr-table .pr-cell { text-align: center; white-space: nowrap; }
.pr-group-row th { background: rgba(0,0,0,.025); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

.pr-ppu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 18px; }
.pr-ppu-card { border: 1px solid var(--hair); border-radius: var(--radius); padding: 20px; }
.pr-ppu-card h3 { margin: 0 0 6px; font-size: 1.02rem; }
.pr-ppu-btn { margin-top: 10px; }

.pr-faq details { border-bottom: 1px solid var(--hair); padding: 14px 0; }
.pr-faq summary { cursor: pointer; font-weight: 600; }
.pr-faq p { color: var(--ink-soft); margin: 10px 0 0; font-size: .9rem; line-height: 1.6; }