/* /pricing and /es/pricing (built by web-v2-tools/build_pricing.py). Uses the v2 tokens only:
   Ink/Paper surfaces, Violet as the one hue, hairlines + soft neutral shadows for depth. */

main.pr{display:block}
.pr-hero{padding:clamp(56px,9vw,104px) 0 0;text-align:center}
.pr-hero .v-sub{max-width:34ch}
.pr-canceled{margin:24px auto 0;max-width:460px;padding:12px 18px;border-radius:16px;background:var(--v-vsoft);color:var(--v-ink);font-size:15px}
.pr-plans{padding:60px 0 clamp(72px,9vw,120px)}
.pr-plans .v-plans{margin-top:0}

.pr-sec{padding:clamp(72px,9vw,120px) 0;text-align:center}
.pr-sec .v-h2{max-width:22ch;margin:0 auto}

/* ── compare plans: all three plans fit a phone screen; roomier from 700px ── */
/* a real border, not an inset shadow (cells would paint over an inset hairline).
   contain:paint keeps any sideways scroll area from widening the whole page on phones (Chrome mobile). */
.pr-table{margin:40px auto 0;max-width:980px;overflow-x:auto;contain:paint;border-radius:24px;background:var(--v-card);
  border:1px solid rgba(20,24,32,.07);box-shadow:var(--v-shadow);text-align:left}
.pr-table:focus-visible{outline:2px solid var(--v-vink);outline-offset:4px}
.pr-table table{width:100%;border-collapse:collapse;table-layout:fixed}
.pr-table thead td{width:40%}
.pr-table thead th{font:600 11px/1.2 var(--v-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--v-mute);padding:20px 4px 10px;text-align:center}
.pr-table thead .pr-col-pro{color:var(--v-vink)}
.pr-table thead .pr-col-team{color:var(--v-ink)}
.pr-long{display:none}
.pr-table th[scope=row]{font-weight:500;font-size:14px;line-height:1.35;color:var(--v-soft);padding:12px 8px 12px 16px;border-top:1px solid var(--v-line2)}
.pr-table td{padding:12px 4px;text-align:center;font-size:12.5px;line-height:1.3;color:var(--v-ink);border-top:1px solid var(--v-line2)}
.pr-table td:last-child{background:rgba(20,17,11,.025)}
.pr-group th{font:600 11px/1 var(--v-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-vink);padding:24px 16px 10px;text-align:left}
.pr-ic{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;vertical-align:middle}
.pr-yes .pr-ic{background:var(--v-vsoft);color:var(--v-vink)}
.pr-no .pr-ic{color:rgba(32,27,20,.26)}
@media (min-width:700px){
  .pr-table{margin-top:48px;border-radius:30px}
  .pr-table thead td{width:34%}
  .pr-table thead th{font-size:12.5px;letter-spacing:.1em;padding:26px 14px 14px}
  .pr-long{display:inline}
  .pr-table th[scope=row]{font-size:15.5px;padding:15px 16px 15px 28px}
  .pr-table td{font-size:14.5px;padding:15px 14px}
  .pr-group th{font-size:12px;padding:30px 28px 12px}
  .pr-ic{width:26px;height:26px}
}

/* ── before you're charged ── */
.pr-points{list-style:none;margin:48px auto 0;padding:0;display:grid;gap:14px;max-width:1040px;text-align:left}
.pr-points li{padding:28px 26px 26px;border-radius:26px;background:var(--v-card);box-shadow:var(--v-cardline),var(--v-shadow)}
.pr-points .pr-ic{width:46px;height:46px;border-radius:14px;background:var(--v-vsoft);color:var(--v-vink);margin-bottom:18px}
.pr-points h3{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.pr-points p{margin:0;color:var(--v-mute);font-size:16px;line-height:1.5}
.pr-fine{max-width:68ch;margin:30px auto 0}
.pr-fine a{color:var(--v-vink);text-decoration:underline;text-underline-offset:3px}

/* ── comparing tools (quiet, last) ── */
.pr-tools{padding:clamp(56px,7vw,88px) 0}
body.v2 .pr-tools .pr-tools-h{margin:0 0 24px;font-size:clamp(1.4rem,4vw,1.75rem);letter-spacing:-.025em}
.pr-tools-grid{display:grid;gap:10px;max-width:980px;margin:0 auto;text-align:left;grid-template-columns:minmax(0,1fr)}
.pr-tools-grid a{display:grid;gap:4px;padding:18px 20px;border-radius:20px;text-decoration:none;background:var(--v-paper);
  box-shadow:var(--v-cardline);transition:box-shadow .25s,transform .3s var(--v-ease)}
.pr-tools-grid a:hover{box-shadow:inset 0 0 0 1px rgba(123,92,198,.45),var(--v-shadow);transform:translateY(-1px)}
.pr-tools-grid b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.pr-tools-grid small{font-size:14px;line-height:1.45;color:var(--v-mute)}
.pr-tools-all{display:inline-flex;margin-top:18px}

@media (min-width:700px){.pr-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:860px){.pr-points{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.pr-tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}