/* HELPER Pricing payment window - Applications style V1
   ---------------------------------------------------------------------------
   The purchase window (#helperPaymentModal) lives in base.html, outside
   #pricing-top, so pricing-applications-style-v1.css never reached it and it
   kept the old italic condensed type, cut corners and blue slabs. This sheet
   gives it the same /wiki/applications look as the rest of /pricing:

     card          -> the framed panel of the /pricing hero and /servers overview
     title         -> cold-metal serif
     kicker/labels -> JetBrains Mono, cyan dot
     text          -> Manrope
     fact rows     -> .hp-summary-cell slabs (cyan / red left edge)
     YooKassa card -> .hp-plan.recommended, its button -> .hp-btn.primary
     Boosty row    -> .hp-proof, its button -> .hp-btn

   Scope: linked from base.html for every page, so the home page and /pricing
   open the same window. helper-payment-tier-accent-v1.css loads after it and
   tints the window in the colour of the chosen plan. Out of scope: the overlay,
   geometry and responsive sizes from helper-payment-window-v2.css, and all
   behaviour - ids, the YooKassa request, the Boosty link, the Discord check
   and every script state class stay as they are.

   Specificity: helper-payment-window-v2.css loads after this file with
   #helperPaymentModal .x (1,1,0); every rule here is rooted at
   html body #helperPaymentModal.helper-pay-modal (1,1,2+). None of the
   window's rules use !important, so nothing here does either. */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Oxanium:wght@700;800&family=JetBrains+Mono:wght@500;600;700&display=swap");

/* ----------------------------------------------------------------- card --- */
html body #helperPaymentModal.helper-pay-modal .helper-pay-card {
    border: 1px solid rgba(89, 143, 190, .24);
    border-radius: 20px;
    clip-path: none;
    background:
        radial-gradient(circle at 0 10%, rgba(22, 140, 255, .11), transparent 35rem),
        radial-gradient(circle at 100% 0, rgba(255, 49, 95, .09), transparent 32rem),
        rgba(6, 10, 17, .95);
    box-shadow: 0 42px 120px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .025);
    color: #eef4f7;
    font-family: Manrope, system-ui, sans-serif;
}

/* the two diagonal hairlines of the frame */
html body #helperPaymentModal.helper-pay-modal .helper-pay-card::before {
    inset: 0;
    opacity: .24;
    border-radius: inherit;
    background:
        linear-gradient(132deg, transparent 0 56%, rgba(22, 140, 255, .28) 56.08%, transparent 56.3%),
        linear-gradient(152deg, transparent 0 72%, rgba(255, 41, 69, .24) 72.08%, transparent 72.3%);
    background-size: auto;
}

/* the old bottom colour bar becomes the frame's 1px cyan-to-red ring */
html body #helperPaymentModal.helper-pay-modal .helper-pay-card::after {
    inset: 0;
    width: auto;
    height: auto;
    z-index: 4;
    padding: 1px;
    border-radius: inherit;
    opacity: .14;
    filter: none;
    background: linear-gradient(105deg, transparent 18%, rgba(67, 221, 255, .42), transparent 48%, rgba(255, 49, 95, .34), transparent 82%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ----------------------------------------------------------------- head --- */
html body #helperPaymentModal.helper-pay-modal .helper-pay-head {
    border-bottom-color: rgba(255, 255, 255, .06);
    background: none;
}

/* "БЕЗОПАСНАЯ ПОКУПКА": the red cut tab becomes the cyan status pill of the
   /pricing summary head, sitting beside the close button */
html body #helperPaymentModal.helper-pay-modal .helper-pay-head::after {
    top: 50%;
    bottom: auto;
    right: 88px;
    padding: 7px 11px;
    border-radius: 999px;
    clip-path: none;
    background: rgba(103, 246, 255, .08);
    color: #67f6ff;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    letter-spacing: .08em;
    transform: translateY(-50%);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-kicker {
    padding: 0;
    border: 0;
    clip-path: none;
    background: none;
    color: #d9fbff;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-kicker::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #67f6ff;
    box-shadow: 0 0 20px #67f6ff;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-title {
    padding-block: .06em;
    background-image: linear-gradient(180deg, #fff 0%, #dce3e8 38%, #929ca5 48%, #f9fbfc 63%, #bac4cc 100%);
    -webkit-text-stroke: 0;
    font-family: "Times New Roman", Times, serif;
    font-style: normal;
    font-weight: 800;
    letter-spacing: -.05em;
    text-transform: uppercase;
    filter: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-close {
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 12px;
    clip-path: none;
    background: rgba(255, 255, 255, .03);
    color: #d5dee6;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-close:hover,
html body #helperPaymentModal.helper-pay-modal .helper-pay-close:focus-visible {
    border-color: rgba(103, 246, 255, .35);
    background: rgba(103, 246, 255, .06);
    color: #eef4f7;
}

/* ------------------------------------------------------------ left side --- */
html body #helperPaymentModal.helper-pay-modal .helper-pay-left {
    border-right-color: rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .012);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-total small,
html body #helperPaymentModal.helper-pay-modal .helper-pay-steps > p,
html body #helperPaymentModal.helper-pay-modal .helper-pay-checkout-kicker,
html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary .helper-pay-method-index {
    color: #67f6ff;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-steps > p {
    color: #697682;
}

/* prices stay in Oxanium, as on the plan cards */
html body #helperPaymentModal.helper-pay-modal .helper-pay-total b {
    background: none;
    color: #eef4f7;
    -webkit-text-fill-color: #eef4f7;
    font-family: Oxanium, "Times New Roman", serif;
    font-weight: 800;
    letter-spacing: -.03em;
    filter: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-facts > div,
html body #helperPaymentModal.helper-pay-modal .helper-pay-facts > div:last-child {
    border-left: 4px solid #67f6ff;
    border-radius: 8px;
    background: #20242b;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-facts > div:nth-child(even) {
    border-left-color: #ff3f62;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-facts dt {
    color: #838d98;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-facts dd {
    color: #eef4f7;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-facts dd.helper-pay-role-value {
    color: #67f6ff;
    text-shadow: none;
}

/* Discord notice: an .hp-proof card; the green of the signed-in state stays
   as a quiet tint so the state still reads */
html body #helperPaymentModal.helper-pay-modal .helper-pay-important {
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 18px;
    clip-path: none;
    background: linear-gradient(180deg, rgba(103, 246, 255, .035), rgba(255, 255, 255, .015));
    box-shadow: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-important.is-auth {
    border-color: rgba(34, 240, 163, .26);
    background: linear-gradient(180deg, rgba(34, 240, 163, .05), rgba(255, 255, 255, .015));
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-important::before {
    display: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-important > i {
    border-radius: 12px;
    clip-path: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-important strong {
    color: #eef4f7;
    font-family: Manrope, system-ui, sans-serif;
    font-style: normal;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-important p {
    color: #9ca8b4;
    font-family: Manrope, system-ui, sans-serif;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-important p b,
html body #helperPaymentModal.helper-pay-modal .helper-pay-important p strong {
    color: #eef4f7;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-important-actions a {
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 12px;
    clip-path: none;
    background: rgba(255, 255, 255, .03);
    box-shadow: none;
    color: #d5dee6;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-important-actions a:hover,
html body #helperPaymentModal.helper-pay-modal .helper-pay-important-actions a:focus-visible {
    border-color: rgba(103, 246, 255, .35);
    color: #eef4f7;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-steps ol::before {
    background: linear-gradient(180deg, rgba(103, 246, 255, .45), rgba(103, 246, 255, .04));
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-steps li {
    color: #9ca8b4;
    font-family: Manrope, system-ui, sans-serif;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-steps li b {
    border-color: rgba(103, 246, 255, .4);
    background: #0a0d12;
    box-shadow: 0 0 12px rgba(103, 246, 255, .16);
    color: #67f6ff;
    font-family: "JetBrains Mono", monospace;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-steps code {
    border-radius: 6px;
    background: rgba(103, 246, 255, .08);
    color: #67f6ff;
    font-family: "JetBrains Mono", monospace;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-note {
    border-top-color: rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .012);
    color: #8a99a7;
    font-family: Manrope, system-ui, sans-serif;
}

/* ------------------------------------------------------------ checkout --- */
html body #helperPaymentModal.helper-pay-modal .helper-pay-checkout-head h3,
html body #helperPaymentModal.helper-pay-modal .helper-pay-method strong {
    color: #eef4f7;
    font-family: "Times New Roman", Times, serif;
    font-style: normal;
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-checkout-note {
    color: #ff758d;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method,
html body #helperPaymentModal.helper-pay-modal .helper-pay-method.yookassa,
html body #helperPaymentModal.helper-pay-modal .helper-pay-method.boosty {
    border: 1px solid rgba(255, 255, 255, .085);
    clip-path: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method small {
    color: #9ca8b4;
    font-family: Manrope, system-ui, sans-serif;
}

/* YooKassa: the recommended plan card */
html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary {
    border-color: rgba(103, 246, 255, .3);
    border-radius: 22px;
    background:
        radial-gradient(circle at 10% 0%, rgba(103, 246, 255, .12), transparent 46%),
        radial-gradient(circle at 92% 100%, rgba(255, 63, 98, .09), transparent 48%),
        rgba(10, 13, 18, .96);
    box-shadow: 0 42px 120px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary:is(:hover, :focus-visible) {
    border-color: rgba(103, 246, 255, .5);
    box-shadow: 0 42px 120px rgba(0, 0, 0, .5), 0 0 0 1px rgba(103, 246, 255, .12);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary .helper-pay-method-badge {
    padding: 8px 12px;
    border: 1px solid #dcffff;
    border-radius: 999px;
    background: linear-gradient(100deg, #fff, #dfffff 32%, #67f6ff 72%, #b5ffea 110%);
    box-shadow: 0 12px 34px rgba(103, 246, 255, .22);
    color: #071114;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: .06em;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary .helper-pay-method-icon {
    clip-path: none;
    background: linear-gradient(145deg, #dfffff, #67f6ff 60%, #3fb8d8);
    box-shadow: 0 12px 30px rgba(103, 246, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .5);
    color: #071114;
    font-family: Manrope, system-ui, sans-serif;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary .helper-pay-method-facts > span::before {
    border-color: rgba(103, 246, 255, .45);
    background: rgba(103, 246, 255, .08);
    box-shadow: 0 0 14px rgba(103, 246, 255, .18);
    color: #67f6ff;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary .helper-pay-method-facts b {
    color: #d5dee6;
    font-family: Manrope, system-ui, sans-serif;
}

/* the card button is .hp-btn.primary; every script state that lights it up
   (is-live, needs-login, plain) gets the same fill */
html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary em {
    border: 1px solid #dcffff;
    border-radius: 12px;
    clip-path: none;
    background: linear-gradient(100deg, #fff, #dfffff 32%, #67f6ff 72%, #b5ffea 110%);
    box-shadow: 0 18px 45px rgba(103, 246, 255, .16);
    color: #071114;
    font-family: Manrope, system-ui, sans-serif;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em;
    text-shadow: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary:hover em {
    box-shadow: 0 20px 52px rgba(103, 246, 255, .26);
}

/* not ready yet or switched off: must not look pressable */
html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary.is-soon em {
    border-color: rgba(255, 255, 255, .085);
    background: rgba(255, 255, 255, .03);
    box-shadow: none;
    color: #697682;
}

/* Boosty: an .hp-proof row with an .hp-btn */
html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-secondary {
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 63, 98, .035), rgba(255, 255, 255, .015));
    box-shadow: none;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-secondary:is(:hover, :focus-visible) {
    border-color: rgba(255, 63, 98, .35);
    background: linear-gradient(180deg, rgba(255, 63, 98, .07), rgba(255, 255, 255, .015));
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-secondary .helper-pay-method-icon {
    border-color: rgba(255, 63, 98, .3);
    clip-path: none;
    background: rgba(255, 63, 98, .1);
    color: #ff758d;
    font-family: Manrope, system-ui, sans-serif;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-secondary strong i {
    border-color: rgba(255, 255, 255, .1);
    border-radius: 999px;
    color: #838d98;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: .06em;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-secondary em {
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 12px;
    clip-path: none;
    background: rgba(255, 255, 255, .03);
    box-shadow: none;
    color: #d5dee6;
    font-family: Manrope, system-ui, sans-serif;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .06em;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-secondary:hover em {
    border-color: rgba(103, 246, 255, .35);
    background: rgba(255, 255, 255, .05);
    color: #eef4f7;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-status {
    font-family: Manrope, system-ui, sans-serif;
}

/* ---------------------------------------------------------------- narrow --- */
@media (max-width: 620px) {
    html body #helperPaymentModal.helper-pay-modal .helper-pay-card {
        border-radius: 14px;
    }
}