/* pak-101 PRSXA site: social links in the footer and a back-to-top button (same as Pearl Products). Prefix: px101- */
.px101-social{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 18px}
.px101-social a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:inherit;opacity:.9;
  background:rgba(127,127,127,.14);border:1px solid rgba(127,127,127,.28);text-decoration:none;transition:background .18s,border-color .18s,color .18s,transform .18s,opacity .18s}
.px101-social a:hover,.px101-social a:focus-visible{background:#3161E8;border-color:#3161E8;color:#fff;opacity:1;transform:translateY(-2px)}
.px101-social a:focus-visible{outline:2px solid #85A5F0;outline-offset:2px}
.px101-social svg{width:16px;height:16px;display:block}
.px101-top{position:fixed;right:24px;bottom:24px;z-index:80;width:46px;height:46px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#3161E8;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(49,97,232,.38);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .22s,visibility .22s,transform .22s,background .18s}
.px101-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.px101-top:hover{background:#1F44B0}
.px101-top:focus-visible{outline:2px solid #85A5F0;outline-offset:3px}
@media (max-width:600px){.px101-top{right:16px;bottom:16px;width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.px101-social a,.px101-top{transition:none}}
/* pak-106: the back-to-top button hides while the phone menu is open (it covered the menu's Start free button) */
html.px-locked .px101-top{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transition:none}
/* pak-106f: plan comparison table on phones. The features column used to take ~85% of the width, so plan values slid under it
 * and were cut off. Now the features column is 42% and each plan column is exactly the rest, so one whole plan shows at a time;
 * a swipe moves to the next plan and settles on it. Group headings stay visible while you swipe. */
.px-cmp tr.grp th .px-cmp-gt{position:sticky;left:14px;display:inline-flex;align-items:center}
@media (max-width:640px){
  .px-cmp-wrap{container-type:inline-size;scroll-snap-type:x mandatory;scroll-padding-left:42%;overscroll-behavior-x:contain}
  .px-cmp.px-cmp-4,.px-cmp{table-layout:fixed;min-width:0;width:calc((100vw - 50px) * 2.74);width:274cqw}
  .px-cmp th.px-cmp-first,.px-cmp-4 th.px-cmp-first{width:calc((100vw - 50px) * .42);width:42cqw;min-width:0;box-shadow:1px 0 0 var(--px-rule-2,#e8ecf3);z-index:2}
  .px-cmp thead th.px-cmp-first{z-index:3}
  .px-cmp thead th:not(.px-cmp-first),.px-cmp td{width:calc((100vw - 50px) * .58);width:58cqw}
  .px-cmp thead th:not(.px-cmp-first){scroll-snap-align:start}
  .px-cmp th,.px-cmp td{padding:12px 12px;overflow-wrap:anywhere}
  .px-cmp tr.grp th .px-cmp-gt{left:12px}
}
/* pak-106g: sign-in, sign-up and password pages on phones. A long email (the "Change" row on the password step) made the single
 * page column as wide as the email, so the card ran off the right edge (Change, Forgot password, Sign in cut off). The column now
 * always fits the screen and the email shortens with "…" as designed. */
@media (max-width:980px){ .px-auth-shell{grid-template-columns:minmax(0,1fr)} }
.px-auth-main,.px-acard,.px-acard .px-panel,.px-acard form,.px-acard .px-field{min-width:0}
.px-acard{box-sizing:border-box}
.px-who{min-width:0;max-width:100%;box-sizing:border-box}