/* Plan cards (Pay as you go · MailValid Plus · Enterprise).
   Shared by the public pricing page (app/templates/pricing.html) and the
   dashboard plans block (app/templates/dashboard/billing.html) so both always
   show the same design. Plain CSS because the Tailwind build is prebuilt and
   purged — new arbitrary utility values would not render. */
.pr-page, .pr-plans { --ink:#10213D; --body:#40516B; --muted:#72819A; --line:#EAF0F6; --edge:#DCE5EF;
  --blue:#2563EB; --blue-d:#1D4ED8; --green:#00A87A; }
.pr-plans h2, .pr-plans h3, .pr-plans p { margin:0; }
.pr-plans { display:grid; grid-template-columns:repeat(3, minmax(0, 339px)); justify-content:center; gap:20px; align-items:stretch; }
.pr-plan { position:relative; display:flex; flex-direction:column; gap:16px; padding:24px; background:#fff;
  border:1px solid var(--edge); border-radius:16px; box-shadow:0 8px 24px rgba(16,33,61,.07); }
.pr-plan--featured { border:2px solid var(--blue); padding:23px; box-shadow:0 12px 28px rgba(37,99,235,.14); }
.pr-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); height:28px; padding:0 14px;
  display:inline-flex; align-items:center; background:var(--blue); color:#fff; font-size:11px; line-height:14px;
  font-weight:700; border-radius:999px; white-space:nowrap; }
.pr-plan-name { font-size:20px; line-height:26px; font-weight:700; color:var(--ink); }
.pr-plan-desc { font-size:13px; line-height:1.45; color:var(--body); margin-top:6px !important; min-height:38px; }
.pr-price { display:flex; justify-content:center; align-items:baseline; gap:6px; }
.pr-amount { font-size:32px; line-height:42px; font-weight:900; color:var(--ink); }
.pr-amount--custom { font-size:24px; line-height:31px; letter-spacing:-0.02em; }
.pr-per { font-size:18px; line-height:26px; font-weight:500; color:var(--muted); }
.pr-period { font-size:20px; line-height:26px; font-weight:700; text-align:center; color:var(--ink); margin-top:4px !important; }
.pr-period--sub { font-size:14px; line-height:18px; font-weight:400; }
.pr-ent-price { min-height:120px; display:flex; flex-direction:column; justify-content:center; }
.pr-slider { height:50px; margin-top:16px; border-radius:999px; border:1px solid rgba(219,234,254,.5);
  background:linear-gradient(180deg,#FFFFFF 0%,#EDF5FF 100%); display:flex; align-items:center; padding:0 16px; }
/* The transparent 14px left border insets the thumb's travel, so even the
   first stop shows a little blue before the thumb. The gradient covers the
   whole box (border included); --pos (0–1, set by JS) puts the fill edge at
   the thumb's centre: 14px cap + 12px thumb radius + travel × pos. */
.pr-range { -webkit-appearance:none; appearance:none; box-sizing:border-box; width:100%; height:15px; margin:0; border:0;
  border-left:14px solid transparent; border-radius:999px; cursor:pointer; outline:none;
  --fill:calc(26px + (100% - 38px) * var(--pos, 0));
  background:linear-gradient(90deg,#1D4ED8 0,#1D4ED8 var(--fill),#DBEAFE var(--fill),#DBEAFE 100%) border-box; }
.pr-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:#fff; border:1.5px solid var(--edge); box-shadow:0 3px 9px rgba(16,33,61,.08); cursor:grab; }
.pr-range:active::-webkit-slider-thumb { cursor:grabbing; transform:scale(1.08); }
.pr-range::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:#fff; border:1.5px solid var(--edge);
  box-shadow:0 3px 9px rgba(16,33,61,.08); cursor:grab; }
.pr-range::-moz-range-track { height:15px; border-radius:999px; background:transparent; }
.pr-range:focus-visible { outline:2px solid var(--blue); outline-offset:6px; }
.pr-unit { font-size:12px; line-height:16px; font-weight:500; color:#454545; text-align:center; margin-top:4px !important; }
.pr-unit--good { color:#00772C; }
.pr-divider { height:1px; background:var(--line); }
.pr-btn { display:flex; align-items:center; justify-content:center; width:100%; height:44px; padding:0 22px; border-radius:99px;
  font-size:13px; line-height:17px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; text-decoration:none; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease; }
.pr-btn:active { transform:scale(.98); }
.pr-btn--soft { background:#EEF3FE; border:1px solid rgba(29,78,216,.2); color:var(--blue-d); }
.pr-btn--soft:hover { background:#E1EAFD; border-color:rgba(29,78,216,.35); }
.pr-btn--solid { background:var(--blue-d); border:1px solid var(--blue-d); color:#fff; }
.pr-btn--solid:hover { background:#1E40AF; border-color:#1E40AF; }
.pr-features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pr-features li { display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:20px; color:#2B323E; }
.pr-features .pr-features-lead { font-weight:700; color:var(--ink); }
.pr-check { flex:none; width:16px; height:16px; margin-top:2px; border-radius:8px; background:rgba(0,168,122,.1); color:var(--green);
  display:inline-flex; align-items:center; justify-content:center; }
.pr-check svg { width:10px; height:10px; stroke-width:2.5; }
.pr-bestfor { margin-top:auto !important; background:rgba(250,204,21,.1); border-radius:9px; padding:10px 12px;
  font-size:14px; line-height:20px; font-weight:500; color:#544300; }

@media (max-width:1079px) {
  .pr-plans { grid-template-columns:repeat(2, minmax(0, 339px)); }
}
@media (max-width:767px) {
  .pr-plans { grid-template-columns:minmax(0, 400px); }
  .pr-plan-desc, .pr-ent-price { min-height:0; }
}