/* ============================================================
   Pricing page only. Loaded by pricing.html after site.css.
   Tokens come from ../tokens.css — reference var(--token) only.
   ============================================================ */

.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: stretch }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto } }

.pc { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; display: flex; flex-direction: column; position: relative; min-width: 0 }
.pc.feat { border-color: var(--accent); box-shadow: 0 0 40px var(--accent-glow) }
.pc.feat::before { content: 'Most popular'; position: absolute; top: -11px; left: 26px; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 3px 11px; border-radius: 999px }
.pc-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.01em }
.pc-desc { color: var(--text-dim); font-size: 13.5px; margin-top: 5px; min-height: 2.8em }
.pc-amt { display: flex; align-items: baseline; gap: 5px; margin: 20px 0 4px; flex-wrap: wrap }
.pc-num { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1 }
.pc-num.sm { font-size: 30px }
.pc-per { font-size: 13px; color: var(--text-dim) }
.pc-note { font-size: 12.5px; color: var(--text-xdim); min-height: 1.5em; font-family: var(--font-mono) }
.pc-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 22px 0; flex: 1 }
.pc-list li { display: flex; gap: 9px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5 }
.pc-list li::before { content: '✓'; color: var(--accent); font-weight: 700; font-size: 12px; flex-shrink: 0; margin-top: 2px }
.pc-list li.off { color: var(--text-xdim) }
.pc-list li.off::before { content: '—'; color: var(--text-xdim) }
.pc-btn { display: block; text-align: center; padding: 11px; border-radius: 8px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; border: 1px solid var(--border-hi); background: transparent; color: var(--text); margin-top: auto }
.pc-btn:hover { border-color: var(--accent); color: var(--accent); opacity: 1 }
.pc.feat .pc-btn { background: var(--accent); color: var(--bg); border-color: var(--accent) }
.pc.feat .pc-btn:hover { box-shadow: 0 4px 20px var(--accent-glow); color: var(--bg) }

/* The comparison table takes the other valid approach to width: a real table at a
   fixed min-width inside a horizontally scrollable wrapper. Do not also give it
   table-layout:fixed like .spec — pick one approach per table, never both. */
.cmp-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; background: var(--bg-raised) }
.cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px }
.cmp th { padding: 13px 16px; border-bottom: 1px solid var(--border); text-align: center; font-family: var(--font-display); font-size: 14.5px; font-weight: 700 }
.cmp th:first-child { text-align: left; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-xdim) }
.cmp td { padding: 11px 16px; border-bottom: 1px solid var(--border); text-align: center; color: var(--text-dim) }
.cmp td:first-child { text-align: left; color: var(--text) }
.cmp tr:last-child td { border-bottom: 0 }
.cmp .y { color: var(--accent); font-weight: 700 }
.cmp .n { color: var(--text-xdim) }

.faq { display: grid; gap: 0 }
.faq details { border-bottom: 1px solid var(--border) }
.faq summary { padding: 16px 0; cursor: pointer; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; font-family: var(--font-mono); color: var(--accent); font-size: 17px; flex-shrink: 0 }
.faq details[open] summary::after { content: '−' }
.faq p { color: var(--text-dim); font-size: 14px; padding: 0 0 18px; max-width: 70ch }