/* Homepage pricing (#pricing): dark, premium cards. Homepage only: the
   /pricing page shares the base plan styles and is untouched. */
body.hp #pricing{position:relative;padding:72px 0 76px;color:#fff;
  background:radial-gradient(760px 380px at 50% 0%,rgba(124,58,237,.20),transparent 70%),#0e0b1d;border-top:1px solid rgba(255,255,255,.06)}
body.hp #pricing .sechead{text-align:center;max-width:680px;margin:0 auto 38px}
body.hp #pricing .pr-eyebrow{display:inline-flex;padding:6px 14px;border-radius:999px;border:1px solid rgba(196,181,253,.28);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C4B5FD;margin-bottom:16px}
body.hp #pricing .sechead h2{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.025em;margin:0 0 12px;
  background:linear-gradient(90deg,#fff 0%,#E4DEFF 45%,#B9A8FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body.hp #pricing .sechead .lead{font-size:17px;color:rgba(255,255,255,.68);margin:0}
body.hp #pricing .pr-trial{margin:14px 0 0;font-size:13.5px;color:rgba(255,255,255,.5)}
body.hp #pricing .pr-trial strong{color:rgba(255,255,255,.82);font-weight:600}

body.hp #pricing .plans{max-width:1000px;gap:24px;align-items:stretch}
body.hp #pricing .plan{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:30px 32px 30px;box-shadow:none}
body.hp #pricing .plan-pro{border:1px solid rgba(167,139,250,.55);
  background:linear-gradient(180deg,rgba(124,58,237,.16),rgba(99,102,241,.05) 55%,rgba(255,255,255,.025));
  box-shadow:0 22px 50px -24px rgba(124,58,237,.45)}
body.hp #pricing .plan-pro::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.9),transparent)}
body.hp #pricing .plan-head{display:flex;align-items:center;gap:12px}
body.hp #pricing .pr-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  background:rgba(167,139,250,.16);color:#C4B5FD}
body.hp #pricing .plan-pro .pr-icon{background:linear-gradient(135deg,#6366F1,#8B5CF6);color:#fff}
body.hp #pricing .pr-icon svg{width:17px;height:17px}
body.hp #pricing .plan-name{font-size:23px;font-weight:700;letter-spacing:-.015em;text-transform:none;color:#fff}
body.hp #pricing .plan-flag{position:static;margin-left:auto;background:rgba(167,139,250,.18);color:#DDD6FE;
  font-size:11px;letter-spacing:.08em;padding:6px 11px;border-radius:999px;text-transform:uppercase}
body.hp #pricing .plan-blurb{margin:10px 0 0;font-size:14.5px;color:rgba(255,255,255,.58)}
body.hp #pricing .plan-price{margin:18px 0 0}
body.hp #pricing .plan-price .amt{font-size:46px;color:#fff}
body.hp #pricing .plan-price .per{color:rgba(255,255,255,.5)}
body.hp #pricing .plan-line{margin:10px 0 0;font-size:14.5px;color:rgba(255,255,255,.66)}
body.hp #pricing .plan-line-strong{color:#fff;font-weight:600}
body.hp #pricing .plan-cats{color:#C4B5FD}
body.hp #pricing .plan-anchor{color:rgba(255,255,255,.5)}
body.hp #pricing .plan-feats{flex:1;margin:22px 0 24px;padding:20px 20px;border:1px solid rgba(255,255,255,.07);border-radius:14px;
  background:rgba(8,6,20,.45);gap:13px}
body.hp #pricing .plan-feats li{font-size:15px;line-height:1.55;color:rgba(255,255,255,.86)}
body.hp #pricing .plan-feats svg{fill:#A78BFA}
body.hp #pricing .plan a{margin-top:auto}
body.hp #pricing .plan a.btn-quiet{background:transparent;border:1px solid rgba(196,181,253,.45);color:#fff;padding:14px 0;border-radius:13px}
body.hp #pricing .plan a.btn-quiet:hover{border-color:#C4B5FD;background:rgba(167,139,250,.10);color:#fff}
body.hp #pricing .plan a.btn-grad{background:linear-gradient(135deg,#6366F1,#8B5CF6);box-shadow:0 12px 28px -10px rgba(124,58,237,.8);padding:15px 0}

body.hp #pricing .cmp{max-width:896px;margin:36px auto 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
body.hp #pricing .cmp-toggle{color:#fff}
body.hp #pricing .cmp-toggle:hover{color:#C4B5FD}
body.hp #pricing .faq-plus::before,body.hp #pricing .faq-plus::after{background:#C4B5FD}
body.hp #pricing .cmp-table{color:rgba(255,255,255,.78)}
body.hp #pricing .cmp-table th,body.hp #pricing .cmp-table td{border-color:rgba(255,255,255,.07)}
body.hp #pricing .cmp-table thead th{color:#fff}
body.hp #pricing .cmp-table tbody th{color:rgba(255,255,255,.78);font-weight:500}
body.hp #pricing .cmp-group th{color:#C4B5FD}
body.hp #pricing .cmp-yes{color:#A78BFA}
body.hp #pricing .cmp-no{color:rgba(255,255,255,.25)}
body.hp #pricing .cmp-val{color:#fff}
@media (max-width:900px){body.hp #pricing{padding:56px 0 60px}body.hp #pricing .sechead h2{font-size:30px}}
body.hp #pricing .plan-head{justify-content:flex-start}
/* The switching strip used to carry straight on from the pale pricing band;
   after the dark one it needs its own top spacing. */
body.hp #pricing + .hp-switch{padding-top:56px}
@media (max-width:900px){body.hp #pricing + .hp-switch{padding-top:40px}}
/* Plus turns to minus while the comparison is open. */
body.hp #pricing .cmp.open .faq-plus::after{transform:rotate(90deg)}
/* About 15% wider than the shared 380px plan columns, desktop only. */
@media (min-width:901px){body.hp #pricing .plans{grid-template-columns:436px 436px;justify-content:center}}
/* Small screens: less padding so the feature list is not squeezed. */
@media (max-width:600px){body.hp #pricing .plan{padding:24px 18px 22px}body.hp #pricing .plan-feats{padding:14px 12px;margin:18px 0 20px}body.hp #pricing .plan-name{font-size:21px}}