/* ============================================================
   Netiva — /pricing
   Loaded after /styles.css on /pricing only. Uses the tokens from
   styles.css and reuses .plan / .price-switch / .feature / .cta-band.
   Bump ASSET_V in src/config/site.ts when this file changes.
   ============================================================ */

/* ---------- utilities ---------- */
.pr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
main a:focus-visible, main button:focus-visible, main summary:focus-visible, .pr-table-wrap:focus-visible {
  outline: 2px solid var(--accent-ink); outline-offset: 3px;
}
.pr-draft {
  padding: 9px 16px; text-align: center;
  background: color-mix(in oklab, #F59E0B 16%, var(--surface)); color: #92400E; font: 600 13px/1.4 var(--font);
}
.pr-h2 { margin-top: 14px; }
.pr-h3 { font-size: 17px; margin-bottom: 14px; }
.pr-small { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.pr-band--alt { background: var(--surface); border-block: 1px solid var(--border-soft); }

/* ---------- hero + billing switch ---------- */
.pr-hero { padding-bottom: 32px; }
.pr-hero .section-head { max-width: 880px; }
.pr-title { margin-top: 16px; font-size: clamp(38px, 5.4vw, 64px); text-wrap: balance; }
.pr-lead { margin: 20px auto 0; max-width: 620px; }
.pr-hero .price-switch { margin-top: 30px; }
.price-switch .ps-label { padding: 6px 2px; }
.price-switch .ps-label:hover { color: var(--ink); }

/* ---------- plan cards ---------- */
.pr-plans {
  display: flex; gap: 16px; align-items: stretch; justify-content: center;
  margin-top: 44px; padding-top: 12px; /* room for .flag (top:-11px) */
}
.pr-plan { flex: 1 1 0; min-width: 0; padding: 26px 20px 24px; }
.pr-plan p { margin: 0; }
.pr-plan h3.pname { margin: 0; font-size: 15px; letter-spacing: 0; line-height: 1.4; }
.pr-plan .pprice { margin-top: 12px; }
.pr-from { margin-top: 12px; font: 600 13px/1 var(--font); color: var(--muted); }
.pr-from + .pprice { margin-top: 4px; }
.pr-billed { min-height: 20px; font-size: 13px; line-height: 20px; color: var(--muted); }
.pr-plan .pdesc { margin-top: 12px; min-height: 58px; line-height: 1.5; }
.pr-plan__credits {
  display: flex; align-items: center; gap: 7px; margin-top: 14px !important;
  padding: 8px 10px; border-radius: 9px; background: var(--accent-tint); color: var(--accent-ink);
  font: 600 13px/1.35 var(--font);
}
.pr-plan .btn { margin-top: 18px; height: auto; min-height: 44px; padding: 10px 14px; white-space: normal; text-align: center; line-height: 1.25; }
.pr-plan__inc { margin-top: 20px !important; font: 600 13px/1.4 var(--font); color: var(--ink); }
.pr-plan ul { flex: 0 0 auto; margin: 12px 0 0; gap: 10px; }
.pr-plan__inc + ul { margin-top: 10px; }
.pr-plan:not(:has(.pr-plan__inc)) ul { margin-top: 20px; }
.pr-plan li { font-size: 13.5px; line-height: 1.45; }
.pr-plan.featured { box-shadow: var(--shadow-lg); }
.pr-note { margin: 28px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.pr-note a { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-weight: 600; color: var(--accent-ink); }
.pr-note a:hover { text-decoration: underline; }

/* ---------- credits explainer ---------- */
.pr-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 48px; }
.pr-points .feature p + p { margin-top: 8px; }
.pr-addon-price { font: 700 15px/1.3 var(--font) !important; color: var(--accent-ink) !important; }
.pr-usage { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 24px; }
.pr-usage__col { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.pr-mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.pr-mini th, .pr-mini td { padding: 10px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--border-soft); }
.pr-mini thead th { border-top: 0; padding-top: 0; font: 600 12px/1.3 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pr-mini tbody th { font-weight: 500; color: var(--ink-2); padding-right: 16px; }
.pr-mini td { font-weight: 600; color: var(--ink); white-space: nowrap; text-align: right; }
.pr-mini thead th:last-child { text-align: right; }
.pr-topups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-topups li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border-soft); font-size: 14px; color: var(--ink-2); }
.pr-topups li:first-child { border-top: 0; padding-top: 0; }
.pr-topups strong { color: var(--ink); white-space: nowrap; }

/* ---------- compare table ---------- */
.pr-tabs { display: none; }
.pr-table-wrap {
  margin-top: 40px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-sm);
}
.pr-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.45; }
.pr-table .pr-corner { width: 28%; }
.pr-table th, .pr-table td { padding: 14px 16px; text-align: center; vertical-align: middle; border-top: 1px solid var(--border-soft); }
.pr-table thead th, .pr-table thead td {
  position: sticky; top: 0; z-index: 2; border-top: 0;
  background: var(--surface); box-shadow: inset 0 -1px 0 var(--border);
  font: 700 15px/1.3 var(--font); color: var(--ink); padding-block: 18px;
}
.pr-table thead tr > :first-child { border-top-left-radius: 16px; }
.pr-table thead tr > :last-child { border-top-right-radius: 16px; }
.pr-table thead th.is-featured { color: var(--accent-ink); }
.pr-table tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-2); }
.pr-table td { color: var(--ink); }
.pr-table td.is-featured { background: color-mix(in oklab, var(--accent-tint) 55%, var(--surface)); }
.pr-table .pr-group th {
  text-align: left; padding-top: 26px; padding-bottom: 10px;
  font: 600 12px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--surface);
}
.pr-table tbody:first-of-type .pr-group th { border-top: 0; }
.pr-hint { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.pr-yes { color: var(--accent); vertical-align: middle; }
.pr-no { color: var(--divider); }
.pr-table tbody:last-of-type tr:last-child > * { padding-bottom: 20px; }

/* ---------- enterprise ---------- */
.pr-ent-band { padding: 24px 0 8px; }
.pr-ent {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center;
  padding: 48px; border-radius: 24px; background: #E6E1F8; border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
}
.pr-ent__copy .lead { margin-top: 14px; }
.pr-ent__points { margin: 0 0 26px; gap: 12px; }
.pr-ent__points li { align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.pr-ent__points .ck { color: var(--accent-ink); flex-shrink: 0; margin-top: 2px; }

/* ---------- FAQ (native <details>, no height cap) ---------- */
.pr-faq { max-width: 780px; margin: 44px auto 0; }
.pr-qa { border-bottom: 1px solid var(--border); }
.pr-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; cursor: pointer; list-style: none; }
.pr-qa summary::-webkit-details-marker { display: none; }
.pr-qa__q { font: 600 16.5px/1.4 var(--font); letter-spacing: -.01em; color: var(--ink); }
.pr-qa__chev { flex-shrink: 0; color: var(--muted); transition: transform .25s; }
.pr-qa[open] .pr-qa__chev { transform: rotate(180deg); }
.pr-qa__a p { margin: 0; padding: 0 4px 22px; max-width: 92%; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  .pr-plans { flex-wrap: wrap; }
  .pr-plan { flex: 0 1 calc((100% - 32px) / 3); }
}
@media (max-width: 980px) {
  .pr-usage, .pr-ent { grid-template-columns: 1fr; }
  .pr-ent { padding: 36px 28px; gap: 28px; }
  /* the nav is sticky below 981px */
  .pr-table thead th, .pr-table thead td { top: 64px; }
}
@media (max-width: 900px) {
  .pr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pr-table { min-width: 720px; }
  .pr-table thead th, .pr-table thead td { position: static; }
}
@media (max-width: 760px) {
  .pr-hero { padding-bottom: 16px; }
  .pr-plan { flex-basis: calc((100% - 16px) / 2); }
  .pr-plan .pdesc { min-height: 0; }

  /* one plan column at a time (pricing.js adds .pr-js and drives data-col) */
  .pr-js .pr-tabs {
    display: flex; gap: 6px; margin-top: 32px; padding: 4px; overflow-x: auto;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
    position: sticky; top: 72px; z-index: 3; box-shadow: var(--shadow-sm);
  }
  .pr-tab {
    flex: 1 0 auto; min-height: 40px; padding: 0 8px; border: 0; border-radius: 9px; cursor: pointer;
    background: transparent; color: var(--ink-2); font: 600 13.5px/1 var(--font);
  }
  .pr-tab[aria-pressed="true"] { background: var(--accent); color: #fff; }
  .pr-js .pr-table-wrap { margin-top: 12px; overflow: visible; }
  .pr-js .pr-table { min-width: 0; table-layout: auto; }
  .pr-js .pr-table thead { display: none; }
  .pr-js .pr-table tbody th[scope="row"] { width: 62%; }
  .pr-js .pr-table .pr-c { display: none; }
  .pr-js .pr-table[data-col="1"] .pr-c1,
  .pr-js .pr-table[data-col="2"] .pr-c2,
  .pr-js .pr-table[data-col="3"] .pr-c3,
  .pr-js .pr-table[data-col="4"] .pr-c4,
  .pr-js .pr-table[data-col="5"] .pr-c5,
  .pr-js .pr-table[data-col="6"] .pr-c6 { display: table-cell; text-align: right; background: none; }
  .pr-table th, .pr-table td { padding: 12px 14px; }
}
@media (max-width: 560px) {
  .pr-plan { flex-basis: 100%; }
  .pr-ent { padding: 28px 20px; }
  .pr-usage__col { padding: 20px 16px; }
  .pr-qa__a p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-qa__chev { transition: none; }
}