#fullpage-overlay.w-hidden { display: none; }

.discord-page {
    --gpm-accent: #5865f2;
    --gpm-accent-light: #a5b0f8;
    --gpm-accent-soft: rgba(88, 101, 242, 0.18);
    --gpm-accent-border: rgba(88, 101, 242, 0.38);
    --gpm-accent-glow: rgba(88, 101, 242, 0.55);
}

.discord-page .gpm-hero-card-thumb {
    align-items: center;
}
.dsc-hero-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--gpm-accent), #4048c4);
    box-shadow: 0 14px 30px -12px var(--gpm-accent-glow);
}
.dsc-hero-mark i {
    font-size: 1.9rem;
    color: #fff;
}

.dsc-hero-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 18px 0 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.dsc-hero-price-prefix {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.86rem;
    font-weight: 500;
}
.dsc-hero-price-value {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}
.dsc-hero-price-period {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

.dsc-hero-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.88rem;
}
.dsc-hero-stars {
    color: var(--gpm-success);
    letter-spacing: 1px;
    white-space: nowrap;
}
.dsc-hero-rating-score {
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
}
.dsc-hero-rating-outof {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-size: 0.85rem;
}
.dsc-hero-rating-link {
    color: var(--gpm-accent-light);
    font-size: 0.86rem;
}
.dsc-hero-quote {
    border-left-color: var(--gpm-accent-border);
}

.dsc-step2 {
    margin-top: 44px;
    padding: 36px 32px;
    border-radius: 22px;
    background:
        radial-gradient(ellipse at 50% 0%, var(--gpm-accent-soft), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--gpm-accent-border);
    box-shadow: 0 24px 60px -30px var(--gpm-accent-glow);
}
.dsc-step2-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 26px;
}
.dsc-step2-head .gpm-section-title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.dsc-step2-plan {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto 28px;
    padding: 12px 18px;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dsc-step2-checkout {
    max-width: 420px;
    margin: 0 auto 18px;
    padding: 16px 22px;
    border-radius: 16px;
    background: var(--gpm-accent-soft);
    border: 1px solid var(--gpm-accent-border);
}
.dsc-step2-choice {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.84rem;
    line-height: 1.5;
}
.dsc-step2-choice .dsc-sep {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.3);
}
.dsc-step2-total {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.dsc-step2-total-label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.86rem;
}
.dsc-step2-total-was {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration-thickness: 1px;
}
.dsc-step2-total-price {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.dsc-step2-total-cur {
    color: var(--gpm-accent-light);
    font-size: 1.05rem;
    font-weight: 700;
}
.dsc-step2-renew {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}
.dsc-step2-plan-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.86rem;
}
.dsc-step2-plan strong {
    color: #fff;
    font-size: 0.98rem;
}
.dsc-step2-change {
    border: 0;
    background: transparent;
    padding: 2px 6px;
    color: var(--gpm-accent-light);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.dsc-step2-change:hover { color: #fff; }
.dsc-step2-go {
    margin-top: 28px;
    text-align: center;
}
.dsc-plan.is-chosen {
    border-color: var(--gpm-accent);
    box-shadow: 0 0 0 2px var(--gpm-accent-border), 0 18px 44px -22px var(--gpm-accent-glow);
}

.dsc-panel-showcase {
    max-width: 1000px;
    margin: 0 auto;
}
.dsc-panel-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
.dsc-panel-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dsc-panel-tab:hover { color: #fff; border-color: var(--gpm-accent-border); }
.dsc-panel-tab.is-active {
    background: var(--gpm-accent);
    border-color: var(--gpm-accent);
    color: #fff;
}
.dsc-panel-tab:focus-visible {
    outline: 2px solid var(--gpm-accent-light);
    outline-offset: 2px;
}
.dsc-panel-frame {
    border-radius: 16px;
    overflow: hidden;
    background: #0a0d1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--gpm-accent-border);
}
.dsc-panel-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dsc-panel-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.dsc-panel-dot:first-child { background: #ff5f56; }
.dsc-panel-dot:nth-child(2) { background: #ffbd2e; }
.dsc-panel-dot:nth-child(3) { background: #28c941; }
/* 0.45 alpha computes to #7e7f89 on this bar and lands at 4.46:1 - four hundredths
   under AA, and the only audit standing between this page and Accessibility 100.
   0.52 gives 5.56:1 with the same washed-out look. aria-hidden does not excuse it:
   the text is still on screen for sighted readers, so axe rightly still checks it. */
.dsc-panel-url {
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.8rem;
}
.dsc-panel-body img {
    display: block;
    width: 100%;
    height: auto;
}
/* Both feature lists are tiles, not a bare run of ticks. The shared shape lives here
   once and each list only sets its own column count - they sit in different sections
   and reading as the same component is the point. */
.dsc-panel-features,
.dsc-includes-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.dsc-panel-features li,
.dsc-includes-grid li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    line-height: 1.45;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.dsc-panel-features li:hover,
.dsc-includes-grid li:hover {
    transform: translateY(-2px);
    border-color: var(--gpm-accent-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
}
/* The icon gets its own chip so the tiles line up on a single vertical rule no matter
   how wide the glyph is - fa-code-branch and fa-hdd differ by several pixels. */
.dsc-panel-features li i,
.dsc-includes-grid li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--gpm-accent-soft);
    border: 1px solid var(--gpm-accent-border);
    color: var(--gpm-accent-light);
    font-size: 0.88rem;
}
.dsc-panel-features {
    max-width: 1000px;
    margin: 34px auto 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .dsc-panel-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .dsc-panel-features { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .dsc-step2 { padding: 26px 18px; } }

.dsc-runtimes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 1000px;
    margin: 0 auto;
}
@media (max-width: 991px) { .dsc-runtimes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .dsc-runtimes { grid-template-columns: repeat(2, 1fr); } }
.dsc-runtime {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.dsc-runtime i {
    font-size: 1.85rem;
    color: var(--gpm-accent-light);
    transition: color 0.2s ease;
}
.dsc-runtime-name {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
.dsc-runtime-note {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}
.dsc-runtime:hover {
    transform: translateY(-4px);
    border-color: var(--gpm-accent-border);
}
.dsc-runtime.is-active {
    border-color: var(--gpm-accent);
    background:
        radial-gradient(ellipse at 50% 0%, var(--gpm-accent-soft), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow: 0 18px 44px -20px var(--gpm-accent-glow);
}
.dsc-runtime.is-active i {
    color: #fff;
}
.dsc-runtime:focus-visible {
    outline: 2px solid var(--gpm-accent-light);
    outline-offset: 3px;
}

.dsc-support {
    max-width: 1000px;
    margin: 24px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.dsc-support-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.dsc-support-eyebrow {
    color: var(--gpm-accent-light);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.dsc-support-heading {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 600;
}
.dsc-support-info {
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: color 0.2s ease;
}
.dsc-support-info:hover { color: var(--gpm-accent-light); }
.dsc-support-info:focus-visible {
    outline: 2px solid var(--gpm-accent-light);
    outline-offset: 3px;
}
.dsc-support-info-wrap {
    position: relative;
    display: inline-flex;
}
.dsc-pop {
    position: absolute;
    /* Opens UPWARD. Below the icon it covered the plan cards, the total and the order
       button - the part the customer is actually deciding on. Above it there is only
       the runtime row, already chosen by this point. */
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    width: min(430px, calc(100vw - 40px));
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #1b1f35, #14182b);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.95);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    white-space: normal;
}
/* The caret is what makes it read as hanging off the icon rather than floating
   loose. Two stacked triangles so the 1px border shows along its edges. It points
   DOWN at the icon, and takes the gradient's bottom colour because that is the edge
   it grows out of. */
.dsc-pop::before,
.dsc-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
}
.dsc-pop::before { border-top-color: rgba(255, 255, 255, 0.12); }
.dsc-pop::after  { border-top-color: #14182b; margin-top: -1px; }

.dsc-supports {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 640px) { .dsc-supports { grid-template-columns: 1fr; } }
.dsc-support-opt {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 3px;
    padding: 12px 15px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.dsc-support-opt:hover {
    transform: translateY(-3px);
    border-color: var(--gpm-accent-border);
}
.dsc-support-opt.is-active {
    border-color: var(--gpm-accent);
    background:
        radial-gradient(ellipse at 50% 0%, var(--gpm-accent-soft), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow: 0 18px 44px -20px var(--gpm-accent-glow);
}
.dsc-support-opt:focus-visible {
    outline: 2px solid var(--gpm-accent-light);
    outline-offset: 3px;
}
.dsc-support-name {
    color: #fff;
    font-size: 0.94rem;
    font-weight: 700;
}
.dsc-support-price {
    color: var(--gpm-accent-light);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}
.dsc-support-note {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
    .dsc-support-opt { transition: none; }
    .dsc-support-opt:hover { transform: none; }
}

.dsc-billing {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 40px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: fit-content;
    max-width: 100%;
}
.dsc-billing-opt {
    position: relative;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.dsc-billing-opt:hover {
    color: #fff;
}
.dsc-billing-opt.is-active {
    background: var(--gpm-accent);
    color: #fff;
    box-shadow: 0 10px 24px -12px var(--gpm-accent-glow);
}
.dsc-billing-opt:focus-visible {
    outline: 2px solid var(--gpm-accent-light);
    outline-offset: 2px;
}
.dsc-billing-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gpm-success);
    color: #06210f;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
}

/* minmax(0, 1fr), not 1fr. A bare 1fr is minmax(auto, 1fr), so the nowrap heading
   below gave the 512MB card a wider min-content and it took 9px off its neighbours. */
.dsc-plans {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.dsc-plans .gpm-plan {
    padding: 28px 20px;
    gap: 14px;
}
/* Five cards in a 1200px container leave ~175px of content each, and "Discord Bot
   512MB" does not fit that on one line at the shared 1.55rem. Sizing it in ch keeps
   the longest name on one line at every breakpoint instead of one card standing a
   line taller than its neighbours. */
.dsc-plans .gpm-plan h3 {
    font-size: clamp(0.9rem, 1.25vw, 1.08rem);
    white-space: nowrap;
}
/* The period is its own line in every cycle, not only the long ones. Inline, "12
   months" broke after "12"; letting it wrap only sometimes made the whole grid jump
   a line taller when the billing switch moved. */
.dsc-plans .gpm-plan-price {
    flex-wrap: wrap;
    row-gap: 2px;
}
.dsc-plans .gpm-plan-price .amount {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.dsc-plans .gpm-plan-price .period {
    flex: 0 0 100%;
    margin-left: 0;
    white-space: nowrap;
}
.dsc-plans .gpm-plan-specs li {
    font-size: 0.87rem;
}
/* The badge sits on the card's top edge, so it can only be as wide as the card.
   "Most popular" wrapped there and covered the plan name; one word cannot. */
.dsc-plans .gpm-plan-badge {
    white-space: nowrap;
    font-size: 0.68rem;
    padding: 4px 14px;
}
/* Full-width so every card's button is the same size, and nowrap so the label sits on
   one line. .gpm-cta-primary's 26px side padding is what pushed it onto two. */
.dsc-plans .gpm-plan-cta {
    margin-top: auto;
}
.dsc-plans .dsc-order {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 0.92rem;
    white-space: nowrap;
}
.dsc-plans-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    max-width: 720px;
    margin: 22px auto 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.86rem;
    line-height: 1.55;
    text-align: center;
}
.dsc-plans-note i {
    margin-top: 3px;
    color: var(--gpm-accent-light);
    flex-shrink: 0;
}
@media (max-width: 1199px) {
    .dsc-plans { grid-template-columns: repeat(3, 1fr); }
    .dsc-plans .gpm-plan h3 { font-size: 1.3rem; }
}
@media (max-width: 900px) {
    .dsc-plans { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .dsc-plans { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .dsc-billing { border-radius: 18px; }
}

.dsc-includes {
    margin-top: 48px;
}
.dsc-includes-title {
    margin: 0 0 22px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}
.dsc-includes-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1199px) { .dsc-includes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .dsc-includes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .dsc-includes-grid { grid-template-columns: 1fr; } }

.dsc-table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}
.dsc-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    margin: 0;
}
.dsc-table th,
.dsc-table td {
    padding: 15px 18px;
    text-align: left;
    font-size: 0.92rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    vertical-align: middle;
}
.dsc-table thead th {
    color: #fff;
    font-weight: 700;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.03);
}
.dsc-table tbody th[scope="row"] {
    color: #fff;
    font-weight: 600;
}
.dsc-table tbody tr:last-child th,
.dsc-table tbody tr:last-child td {
    border-bottom: 0;
}
.dsc-table-compare .is-free {
    color: rgba(255, 255, 255, 0.5);
}
.dsc-table-compare .is-ours,
.dsc-table-specs .dsc-cell-price {
    color: #fff;
    font-weight: 600;
}
.dsc-table-compare thead .is-ours {
    color: var(--gpm-accent-light);
}
.dsc-table-compare tbody .is-ours {
    background: var(--gpm-accent-soft);
}
/* The wrapper already scrolls horizontally, so nothing has to wrap to fit. The plan
   name and the price are the two cells that did. */
.dsc-table-specs .dsc-cell-plan,
.dsc-table-specs .dsc-cell-price {
    white-space: nowrap;
}

.dsc-footnote {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.84rem;
    text-align: center;
}
.dsc-footnote a {
    color: var(--gpm-accent-light);
}

.dsc-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.dsc-review {
    margin: 0;
    padding: 26px 24px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.dsc-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.dsc-review-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--gpm-accent), #4048c4);
    color: #fff;
    font-weight: 800;
}
.dsc-review-name {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}
.dsc-review-meta {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
}
.dsc-review-stars {
    color: var(--gpm-success);
    font-size: 0.82rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.dsc-review blockquote {
    margin: 0;
}
.dsc-review-title {
    margin: 0 0 6px;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}
.dsc-review-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    line-height: 1.55;
}
@media (max-width: 991px) { .dsc-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dsc-reviews { grid-template-columns: 1fr; } }

/* Reviews and the comparison are consecutive plain sections, so their 90px paddings
   stacked into roughly 200px of empty page. Neither has a background change to justify
   it - the pair reads as one thought and is spaced as one. */
.dsc-reviews-section { padding-bottom: 48px; }
.discord-page #compare { padding-top: 48px; }

.dsc-longform,
.dsc-faq {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.dsc-longform-item,
.dsc-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dsc-longform-item > summary,
.dsc-faq-item > summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 4px;
    cursor: pointer;
    list-style: none;
    color: #fff;
}
.dsc-longform-item > summary::-webkit-details-marker,
.dsc-faq-item > summary::-webkit-details-marker {
    display: none;
}
.dsc-longform-item > summary:hover,
.dsc-faq-item > summary:hover {
    color: var(--gpm-accent-light);
}
.dsc-longform-item > summary:focus-visible,
.dsc-faq-item > summary:focus-visible {
    outline: 2px solid var(--gpm-accent-light);
    outline-offset: 2px;
}
.dsc-longform-item summary h3,
.dsc-faq-item summary h3 {
    margin: 0;
    flex: 1;
    font-size: 1.05rem;
    font-weight: 600;
    color: inherit;
    line-height: 1.4;
}
.dsc-longform-icon {
    color: var(--gpm-accent-light);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.dsc-chevron {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
    transition: transform 0.2s ease, color 0.2s ease;
}
.dsc-longform-item[open] .dsc-chevron,
.dsc-faq-item[open] .dsc-chevron {
    transform: rotate(180deg);
    color: var(--gpm-accent-light);
}
.dsc-longform-body,
.dsc-faq-a {
    padding: 0 4px 22px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: 1.7;
}
.dsc-longform-body p:last-child,
.dsc-faq-a p:last-child {
    margin-bottom: 0;
}
.dsc-longform-body strong {
    color: #fff;
}
.dsc-longform-body code {
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--gpm-accent-light);
    font-size: 0.88em;
}

.dsc-ddos-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 52px;
    align-items: center;
}
.dsc-ddos .gpm-section-title {
    text-align: left;
}
.dsc-ddos-lead {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.95rem;
    line-height: 1.72;
}
.dsc-ddos-steps {
    display: grid;
    gap: 14px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
.dsc-ddos-steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.dsc-ddos-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(89, 245, 140, 0.42);
    background: rgba(89, 245, 140, 0.12);
    color: var(--gpm-success);
    font-size: 0.75rem;
    font-weight: 800;
}
.dsc-ddos-step-body {
    display: block;
    min-width: 0;
}
.dsc-ddos-step-body strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
}
.dsc-ddos-step-body span {
    display: block;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
    line-height: 1.62;
}
.dsc-ddos-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    margin: 28px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    list-style: none;
}
.dsc-ddos-points li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
    line-height: 1.5;
}
.dsc-ddos-points i {
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--gpm-success);
    font-size: 0.72rem;
}
.dsc-ddos-visual {
    text-align: center;
}
.dsc-ddos-shield {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 210px;
}
.dsc-ddos-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    border: 1px solid rgba(89, 245, 140, 0.34);
    border-radius: 50%;
    opacity: 0;
}
.dsc-ddos-core {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 1px solid rgba(89, 245, 140, 0.4);
    background:
        radial-gradient(circle at 50% 34%, rgba(89, 245, 140, 0.26) 0%, rgba(89, 245, 140, 0.05) 70%),
        rgba(255, 255, 255, 0.03);
    color: var(--gpm-success);
    font-size: 1.9rem;
}
.dsc-ddos-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 0;
    color: var(--gpm-success);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.dsc-ddos-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gpm-success);
}
.dsc-ddos-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 26px 0 0;
}
.dsc-ddos-stats > div {
    padding: 16px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}
.dsc-ddos-stats dt {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
}
.dsc-ddos-stats dd {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
    .dsc-ddos-ring {
        animation: dsc-ddos-pulse 3.6s ease-out infinite;
    }
    .dsc-ddos-ring:nth-child(2) { animation-delay: 1.2s; }
    .dsc-ddos-ring:nth-child(3) { animation-delay: 2.4s; }
}
@keyframes dsc-ddos-pulse {
    0%   { transform: scale(1);   opacity: 0.75; }
    100% { transform: scale(2.1); opacity: 0; }
}
@media (max-width: 900px) {
    .dsc-ddos-grid { grid-template-columns: 1fr; gap: 34px; }
    .dsc-ddos-shield { height: 170px; }
}
@media (max-width: 480px) {
    .dsc-ddos-points { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-runtime,
    .dsc-chevron,
    .dsc-billing-opt,
    .dsc-panel-tab,
    .dsc-panel-features li,
    .dsc-includes-grid li {
        transition: none;
    }
    .dsc-runtime:hover,
    .dsc-panel-features li:hover,
    .dsc-includes-grid li:hover {
        transform: none;
    }
}

.dsc-promo {
    margin-top: 26px;
    text-align: center;
}
.dsc-promo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 6px 10px;
    color: var(--gpm-accent-light);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.dsc-promo-toggle:hover { color: #fff; }
.dsc-promo-toggle:focus-visible {
    outline: 2px solid var(--gpm-accent-light);
    outline-offset: 2px;
    border-radius: 8px;
}
.dsc-promo-body {
    margin-top: 12px;
}
.dsc-promo-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dsc-promo-input {
    width: 220px;
    max-width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.92rem;
    text-transform: uppercase;
}
.dsc-promo-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    text-transform: none;
}
.dsc-promo-input:focus {
    outline: none;
    border-color: var(--gpm-accent);
    box-shadow: 0 0 0 3px var(--gpm-accent-soft);
}
.dsc-promo-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.dsc-promo-apply {
    padding: 11px 22px;
    border-radius: 12px;
    border: 1px solid var(--gpm-accent-border);
    background: rgba(88, 101, 242, 0.18);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}
.dsc-promo-apply:hover { background: var(--gpm-accent); }
.dsc-promo-apply.is-remove {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
}
.mc-promo-msg {
    margin-top: 10px;
    font-size: 0.86rem;
    min-height: 1.2em;
    color: rgba(255, 255, 255, 0.6);
}
.mc-promo-msg.is-ok { color: var(--gpm-success); }
.mc-promo-msg.is-error { color: #ff8a8a; }
.mc-promo-msg.is-checking { color: rgba(255, 255, 255, 0.55); }

.dsc-step2-assurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}
.dsc-secure i { color: var(--gpm-success); margin-right: 6px; }
.dsc-pay-icons {
    display: inline-flex;
    gap: 10px;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.35);
}
.dsc-bots{margin-top:28px}
.dsc-bots-head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.dsc-bots-eyebrow{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gpm-accent-light);font-weight:700}
.dsc-bots-heading{font-size:1.05rem;font-weight:700;color:#fff}
.dsc-bots-opts{display:flex;flex-wrap:wrap;gap:10px}
.dsc-bots-opt{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:76px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#cfd4e4;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.dsc-bots-opt:hover{border-color:var(--gpm-accent-border);background:rgba(255,255,255,.07)}
.dsc-bots-opt:focus-visible{outline:2px solid var(--gpm-accent);outline-offset:2px}
.dsc-bots-opt.is-active{border-color:var(--gpm-accent);background:var(--gpm-accent-soft);color:#fff}
.dsc-bots-n{font-size:1.25rem;font-weight:800;line-height:1.1}
.dsc-bots-lbl{font-size:.74rem;opacity:.8}
.dsc-bots-each{font-size:.7rem;color:var(--gpm-accent-light);font-weight:600}
.dsc-bots-note{margin:12px 0 0;font-size:.82rem;color:#9aa3b8;display:flex;align-items:flex-start;gap:7px}
.dsc-bots-note i{margin-top:2px;color:var(--gpm-accent-light)}
.dsc-bots-more-wrap{margin-top:10px}
.dsc-bots-more{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;border:1px dashed rgba(255,255,255,.22);background:transparent;color:#cfd4e4;font-size:.82rem;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.dsc-bots-more:hover{border-color:var(--gpm-accent-border);color:#fff;background:rgba(255,255,255,.04)}
.dsc-bots-more:focus-visible{outline:2px solid var(--gpm-accent);outline-offset:2px}
.dsc-bots-more i{font-size:.72rem;opacity:.75}
.dsc-step2-choice{margin:0 0 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 18px}
.dsc-sum-row{display:flex;flex-direction:column;gap:1px;min-width:0}
.dsc-sum-row dt{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:#8b93a8;font-weight:700}
.dsc-sum-row dd{margin:0;font-size:.92rem;font-weight:600;color:#e8ebf3;overflow-wrap:anywhere}