/* Basalt marketing site: pricing page (/pricing, /pt/precos).
   Builds on site.css tokens; everything here is prefixed pr- so it never collides. */

/* ---------- billing toggle ---------- */
.pr-bar-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3) var(--s-4); }
.pr-toggle {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px;
  border-radius: var(--r-pill); background: var(--surface-2);
}
.pr-toggle::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: var(--r-pill); background: var(--fg-strong);
  transition: transform .5s var(--ease);
}
html[data-billing-mode="annual"] .pr-toggle::before { transform: translateX(100%); }
.pr-toggle button {
  position: relative; z-index: 1; min-width: 112px; height: 36px; padding: 0 18px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted); font: 500 var(--t-small)/1 var(--font-sans); cursor: pointer;
  transition: color .35s var(--ease);
}
.pr-toggle button:hover { color: var(--fg-strong); }
.pr-toggle button[aria-pressed="true"] { color: var(--bg); }
.pr-save { font: 500 12px/1 var(--font-mono); letter-spacing: .02em; color: var(--subtle); transition: color .35s var(--ease); }
.pr-save b { font-weight: 500; color: var(--muted); transition: color .35s var(--ease); }
html[data-billing-mode="annual"] .pr-save, html[data-billing-mode="annual"] .pr-save b { color: var(--fg-strong); }
html:not(.js) .pr-toggle { display: none; }

/* ---------- coverage meter (signature visual) ---------- */
.pr-meter { margin-top: var(--s-8); font-family: var(--font-mono); font-size: var(--t-mono); }
.pr-meter-read { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--s-4); color: var(--subtle); }
.pr-meter-read b { font-weight: 500; color: var(--fg-strong); }
.pr-meter-read span { font-variant-numeric: tabular-nums; }
.pr-meter-read span em { font-style: normal; color: var(--fg); white-space: nowrap; }
.pr-meter-bar {
  margin: 12px 0 10px; height: 18px; overflow: hidden; white-space: pre; line-height: 18px; font-size: 14px;
  letter-spacing: 0; color: var(--subtle); user-select: none;
}
.pr-meter-bar .f { color: var(--fg-strong); }
.pr-meter-bar .e { color: var(--muted); }
.pr-meter-ticks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.pr-meter-ticks span { display: grid; gap: 4px; text-align: right; color: var(--subtle); transition: color .4s var(--ease); }
.pr-meter-ticks span b { font-weight: 400; color: var(--muted); transition: color .4s var(--ease); }
.pr-meter-ticks span.on, .pr-meter-ticks span.on b { color: var(--fg-strong); }

/* ---------- plan cards ---------- */
.pr-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); align-items: stretch; }
.pr-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6) var(--s-5) var(--s-5);
  border-radius: 20px; background: var(--surface); transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
.pr-card:hover, .pr-card:focus-within { background: var(--surface-2); }
.pr-card.pick { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.pr-card.pick:hover, .pr-card.pick:focus-within { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.pr-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 24px; }
.pr-card h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg-strong); }
.pr-label { font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; padding: 7px 10px; border-radius: var(--r-pill); background: var(--fg-strong); color: var(--bg); white-space: nowrap; }
.pr-for { color: var(--muted); font-size: var(--t-small); line-height: 1.5; min-height: 4.5em; }
.pr-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pr-amt { font-size: 40px; font-weight: 500; letter-spacing: -0.045em; line-height: 1; color: var(--fg-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-per { font-size: var(--t-small); color: var(--muted); }
.pr-bill { margin-top: -6px; font-size: 13px; color: var(--subtle); min-height: 1.5em; }
.pr-spec { margin: 0; padding: 14px 16px; display: grid; gap: 7px; border-radius: 12px; background: rgba(255,255,255,.025); font: var(--t-mono)/1.4 var(--font-mono); }
.pr-card.pick .pr-spec { background: rgba(255,255,255,.04); }
.pr-spec div { display: flex; justify-content: space-between; gap: var(--s-3); }
.pr-spec dt { color: var(--subtle); }
.pr-spec dd { margin: 0; color: var(--fg-strong); text-align: right; }
.pr-card .dots { flex: 1; align-content: start; }
.pr-card .dots li { font-size: var(--t-small); }
.pr-cta { display: grid; gap: 10px; margin-top: var(--s-2); }
.pr-cta .btn { width: 100%; }
.pr-cta small { font-size: 12.5px; line-height: 1.4; color: var(--subtle); text-align: center; min-height: 2.8em; }
.pr-cta small a { color: var(--muted); transition: color .25s; }
.pr-cta small a:hover { color: var(--fg-strong); }

/* enterprise: slim row */
.pr-ent {
  margin-top: var(--s-3); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6); border-radius: 20px; background: var(--surface); transition: background .45s var(--ease);
}
.pr-ent:hover, .pr-ent:focus-within { background: var(--surface-2); }
.pr-ent h3 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.pr-ent p { margin-top: 4px; color: var(--muted); font-size: var(--t-small); }
.pr-ent .pr-custom { font: 500 var(--t-small)/1 var(--font-mono); color: var(--fg-strong); white-space: nowrap; }
.pr-note { margin-top: var(--s-5); text-align: center; font-size: 13px; color: var(--subtle); }

/* ---------- one-time products ---------- */
.pr-once-panel { border-radius: 28px; background: var(--surface); padding: var(--s-8) var(--s-7); }
.pr-once { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-7); }
.pr-once.solo { grid-template-columns: minmax(0, 1fr); }
.pr-ticket { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--s-6); padding: var(--s-6); border-radius: 20px; background: var(--surface-2); transition: background .45s var(--ease); align-content: start; }
.pr-ticket:hover, .pr-ticket:focus-within { background: var(--surface-3); }
.pr-once.solo .pr-ticket { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.pr-ticket-main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.pr-ticket h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.pr-ticket-main > p { color: var(--muted); font-size: 15px; }
.pr-ticket .actions { margin-top: var(--s-2); }
.pr-receipt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 12px; font: var(--t-mono)/1.45 var(--font-mono); }
.pr-receipt li { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pr-receipt span { flex: none; color: var(--muted); white-space: nowrap; }
.pr-receipt i { flex: 1 1 0; width: 0; min-width: 16px; overflow: hidden; white-space: nowrap; font-style: normal; color: var(--faint); }
.pr-receipt i::before { content: "........................................................................................................................"; }
.pr-receipt b { flex: 0 1 auto; font-weight: 400; color: var(--fg-strong); text-align: right; max-width: 62%; }
.pr-receipt li.sum { margin-top: 6px; }
.pr-receipt li.sum span, .pr-receipt li.sum b { color: var(--fg-strong); }

/* ---------- comparison table ---------- */
.pr-compare .table-wrap { margin-top: var(--s-7); }
.pr-compare table { min-width: 720px; table-layout: fixed; }
.pr-compare col.feat { width: 32%; }
.pr-compare thead th { padding: var(--s-5) var(--s-5) var(--s-4); vertical-align: bottom; background: var(--surface); }
.pr-compare thead th b { display: block; font-weight: 500; font-size: 15px; color: var(--fg-strong); }
.pr-compare thead th span { display: block; margin-top: 4px; font: 12px/1.3 var(--font-mono); color: var(--subtle); font-variant-numeric: tabular-nums; }
.pr-compare thead th:first-child { color: var(--subtle); font: 12px/1 var(--font-mono); letter-spacing: .04em; }
.pr-compare tbody tr:nth-child(odd) td { background: transparent; }
.pr-compare tbody th, .pr-compare tbody td { padding: 11px var(--s-5); }
.pr-compare tbody th[scope="row"] { color: var(--fg); font-weight: 400; background: var(--surface); }
.pr-compare tbody td { color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.pr-compare tr.grp th { padding: var(--s-6) var(--s-5) var(--s-2); font: 500 12px/1 var(--font-mono); letter-spacing: .05em; color: var(--subtle); text-transform: uppercase; background: var(--surface); }
.pr-compare tbody:first-of-type tr.grp th { padding-top: var(--s-3); }
.pr-compare tbody tr:not(.grp):hover th, .pr-compare tbody tr:not(.grp):hover td { background: rgba(255,255,255,.025); }
.pr-compare .y, .pr-compare .n { font-family: var(--font-mono); }
.pr-compare .y { color: var(--fg-strong); }
.pr-compare .n { color: var(--subtle); }
.pr-compare tbody:last-of-type tr:last-child > * { padding-bottom: var(--s-5); }
.pr-compare tbody:last-of-type tr:last-child > :first-child { border-bottom-left-radius: var(--r-card); }
.pr-compare tbody:last-of-type tr:last-child > :last-child { border-bottom-right-radius: var(--r-card); }
.pr-compare thead th:first-child { border-top-left-radius: var(--r-card); }
.pr-compare thead th:last-child { border-top-right-radius: var(--r-card); }

/* coming soon: slim row */
.pr-soon { margin-top: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-card); background: var(--surface); font-size: var(--t-small); color: var(--muted); }
.pr-soon .tag { font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; padding: 6px 9px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--fg); }
.pr-soon b { font-weight: 500; color: var(--fg-strong); }

.pr-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }

/* ---------- desktop: plan header sticks under the nav ---------- */
@media (min-width: 961px) {
  .pr-compare .table-wrap { overflow: visible; }
  .pr-compare thead th { position: sticky; top: 68px; z-index: 2; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-once-panel { padding: var(--s-7) var(--s-5); }
  .pr-once { grid-template-columns: minmax(0, 1fr); }
  .pr-once.solo .pr-ticket { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .pr-faq { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  /* sticky feature column while the table scrolls sideways */
  .pr-compare tbody th[scope="row"], .pr-compare thead th:first-child { position: sticky; left: 0; z-index: 1; }
  .pr-compare tr.grp th { position: static; }
  .pr-compare tr.grp th span { position: sticky; left: var(--s-4); }
  .pr-meter-ticks span b { display: none; }
}
@media (max-width: 560px) {
  .pr-plans { grid-template-columns: minmax(0, 1fr); }
  .pr-for, .pr-bill { min-height: 0; }
  .pr-ent { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); }
  .pr-ent .btn { width: 100%; }
  .pr-once-panel { padding: var(--s-6) var(--s-4); border-radius: 22px; }
  .pr-ticket { padding: var(--s-5); }
  .pr-receipt li { flex-wrap: wrap; gap: 2px 10px; }
  .pr-receipt i { display: none; }
  .pr-receipt b { max-width: none; text-align: left; flex-basis: 100%; }
  .pr-compare col.feat { width: 36%; }
  .pr-compare table { min-width: 620px; }
  .pr-compare thead th, .pr-compare tbody th, .pr-compare tbody td { padding-left: var(--s-3); padding-right: var(--s-3); }
  .pr-toggle button { min-width: 0; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-toggle::before { transition: none; }
}
.pr-faq .head .link { font-size: inherit; }
.pr-ticket .btn-ghost { background: var(--surface-3); }
.pr-ticket .btn-ghost:hover { background: #262626; }