.px-hero{padding:28px 0 18px;background:
  radial-gradient(circle at 100% 0,#e7f1ff 0,transparent 34%),
  linear-gradient(#fff,#f6f9fd)}
.px-hero-grid{display:grid;gap:28px}
.px-hero h1{margin:12px 0 14px;color:#10254e;font-size:clamp(34px,8vw,68px);line-height:1.05;letter-spacing:-.045em}
.px-hero h1 span{color:#1769ff}
.px-lede{max-width:38rem;color:#526582;font-size:17px;line-height:1.75}
.px-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.px-stage{margin:0;overflow:hidden;border:1px solid #d5e3f3;border-radius:22px;background:#fff;box-shadow:0 24px 50px #1d4e7e22}
.px-stage img{display:block;width:100%;height:auto}
.px-stage figcaption{display:flex;justify-content:space-between;gap:8px;padding:12px 14px;background:#10254e;color:#d5e6ff;font-size:12px;font-weight:800}
.px-stage figcaption span{padding:6px 10px;border-radius:999px;background:#ffffff14}
.px-policy{padding:8px 0 22px;background:#f6f9fd}
.px-policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.px-policy p{margin:0;padding:14px;border:1px solid #d7e4f4;border-radius:16px;background:#fff}
.px-policy b{display:block;color:#10254e;font-size:18px}
.px-policy span{color:#64748b;font-size:13px}
.px-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.px-plans{padding:34px 0 10px}
.px-switch{display:grid;gap:8px}
.px-path{display:flex;flex-direction:column;gap:2px;width:100%;padding:14px 16px;border:1px solid #d5e2f2;border-radius:16px;background:#fff;text-align:start;transition:border-color .2s,background .2s,transform .2s}
.px-path span{color:#1769ff;font-size:12px;font-weight:800}
.px-path b{color:#10254e;font-size:18px}
.px-path.is-selected{border-color:#1769ff;background:#f3f8ff;box-shadow:inset 0 0 0 1px #1769ff}
.px-path:focus-visible,.px-card a:focus-visible,.px-close a:focus-visible,.px-hero-actions a:focus-visible{outline:3px solid #1769ff;outline-offset:3px}
.px-path-note{margin:14px 0 0;padding:14px 16px;border-radius:16px;background:#10254e;color:#e7eefc;line-height:1.7}
.px-cards{display:grid;gap:14px;margin-top:16px}
.px-card{display:flex;flex-direction:column;padding:18px;border:1px solid #d7e4f4;border-radius:22px;background:#fff;box-shadow:0 12px 28px #1d4e7e10}
.px-card.is-recommended{order:-1;background:linear-gradient(165deg,#17386f,#0d2348);color:#fff;border-color:#17386f}
.px-ribbon{width:max-content;margin:0 0 10px;padding:5px 10px;border-radius:999px;background:#ffffff22;color:#fff;font-size:12px;font-weight:800}
.px-audience{margin:0;color:#1769ff;font-size:13px;font-weight:800}
.px-card.is-recommended .px-audience{color:#9ec4ff}
.px-card h3{margin:4px 0 12px;font-size:32px;letter-spacing:-.04em}
.px-price{display:grid;gap:2px;margin:0}
.px-price span,.px-renew span,.px-once{color:#64748b;font-size:13px}
.px-card.is-recommended .px-price span,.px-card.is-recommended .px-renew span,.px-card.is-recommended .px-once{color:#c5d7f5}
.px-price strong{color:#10254e;font-size:40px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.px-card.is-recommended .px-price strong,.px-card.is-recommended .px-renew b{color:#fff}
.px-price small{font-size:12px}
.px-once,.px-renew{margin:8px 0 0}
.px-renew{display:flex;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid #e4edf7}
.px-card.is-recommended .px-renew{border-top-color:#ffffff2e}
.px-renew b{font-variant-numeric:tabular-nums}
.px-card ul{display:grid;gap:8px;margin:16px 0;padding:0;list-style:none}
.px-card li{position:relative;padding-inline-start:18px}
.px-card li:before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:8px;height:8px;border-radius:50%;background:#1769ff}
.px-card.is-recommended li:before{background:#8eb6ff}
.px-actions{display:grid;gap:8px;margin-top:auto}
.px-card.is-recommended .outline-button{border-color:#ffffff55;background:transparent;color:#fff}
.px-compare-section{padding:42px 0}
.px-compare{overflow-x:auto;border:1px solid #d7e4f4;border-radius:18px;background:#fff}
.px-table{width:100%;border-collapse:collapse;font-size:14px}
.px-table caption{padding:14px 16px;text-align:start;font-weight:800;color:#10254e}
.px-table th,.px-table td{padding:12px 14px;border-top:1px solid #e6eef7;text-align:start;vertical-align:middle}
.px-table thead th{color:#526582;font-size:12px}
.px-mark{font-weight:800}
.px-mark-yes{color:#0c7a52}
.px-mark-no{color:#4b5568}
.px-steps{padding:10px 0 36px}
.px-step-list{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:step}
.px-step-list li{padding:16px;border:1px solid #d7e4f4;border-radius:16px;background:#fff}
.px-step-list b{display:block;color:#10254e}
.px-step-list b:before{counter-increment:step;content:counter(step) ". ";color:#1769ff}
.px-step-list span{display:block;margin-top:4px;color:#526582;line-height:1.6}
.px-faq{padding-bottom:20px}
.px-close{margin:10px 0 0;padding:48px 0;background:
  radial-gradient(circle at 0 0,#24539a,transparent 42%),
  #0d2348;color:#fff;text-align:center}
.px-close h2{font-size:clamp(30px,6vw,48px);letter-spacing:-.04em}
.px-close p{max-width:38rem;margin:12px auto 0;color:#d5e2f6;line-height:1.7}
.px-close .px-hero-actions{justify-content:center}
.px-close .outline-button{border-color:#ffffff66;background:transparent;color:#fff}
.px-price.is-changing strong{animation:px-pop .28s ease}
@keyframes px-pop{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:720px){
  .px-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .px-table,.px-table tbody,.px-table tr,.px-table th,.px-table td{display:block;width:100%}
  .px-table tr{padding:12px 14px;border-top:1px solid #e6eef7}
  .px-table th,.px-table td{padding:3px 0;border:0}
  .px-table td:before{content:attr(data-label);display:inline-block;min-width:5.5rem;margin-inline-end:8px;color:#526582;font-weight:800}
}
@media (min-width:800px){
  .px-hero{padding:48px 0 28px}
  .px-hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
  .px-policy-grid,.px-switch{grid-template-columns:repeat(4,1fr)}
  .px-switch{grid-template-columns:repeat(3,1fr)}
  .px-cards{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .px-card.is-recommended{order:0;transform:translateY(-10px)}
  .px-step-list{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .px-path,.px-card{transition:none}
  .px-price.is-changing strong{animation:none}
  .px-card.is-recommended{transform:none}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .px-card:hover{transform:translateY(-4px)}
  .px-card.is-recommended:hover{transform:translateY(-14px)}
}