/* ─── Hero ───────────────────────────────────────────────────────────── */
.pwv2-hero {
    position: relative;
    width: 100vw;
    min-height: 92vh;
    min-height: 92dvh;        /* dvh respects mobile address bar */
    overflow: hidden;
    /* Still image as backdrop, slightly oversized so any edge mismatch
       with the video first frame is hidden under the .pwv2-hero__video crop. */
    background: #10131c url('/wp-content/media/palworld-server-hosting/hero-bg.poster.webp') center/cover no-repeat;
    color: #fff;
    display: flex;
    align-items: flex-start;   /* top-aligned, not vertically centered */
    justify-content: center;
    padding-top: 1cm;          /* breathing room below the site navbar */
}
@media (max-width: 767.98px) {
    .pwv2-hero {
        padding-top: 0.5cm;    /* tighter on mobile */
    }
}

/* Looping video covering the section. Lays beneath all overlays. */
.pwv2-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}

/* Blue-tinted overlay over the video so the title is readable. */
.pwv2-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(33, 78, 153, 0.64);
    z-index: 1;
    pointer-events: none;
}

/* Bottom gradient fading the video into the page background.
   Endpoint = body bg color rgb(7,0,12) so the seam to the next
   section disappears. Pushed to 55% of the hero height + an earlier
   ramp so the transition feels smooth, not a hard band. */
.pwv2-hero__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(
        to bottom,
        rgba(16, 19, 28, 0)    0%,
        rgba(16, 19, 28, 0.30) 25%,
        rgba(16, 19, 28, 0.65) 55%,
        rgba(16, 19, 28, 0.92) 80%,
        rgba(16, 19, 28, 1)    100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Content sits on top of all overlays. */
.pwv2-hero__content {
    position: relative;
    z-index: 3;
    max-width: 1100px;
    padding: 0 24px;
    text-align: center;
}

/* Main title: ~2cm desktop / 1.6cm tablet / 1.33cm mobile (scaled up from
   the previous 1.5/1.2/1.0 by ~33%). */
.pwv2-hero__title {
    font-family: "Palworld", "Bebas Neue", "Inter", system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.05;
    font-size: 1.33cm;                      /* mobile */
    margin: 0 0 12px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
@media (min-width: 768px) {
    .pwv2-hero__title { font-size: 1.6cm; }     /* tablet */
}
@media (min-width: 1200px) {
    .pwv2-hero__title { font-size: 3cm; }       /* desktop (+50%) */
}
.pwv2-hero__title em {
    font-style: normal;
    color: #fff;
}

/* Sub-title: outlined yellow on dark stroke. Mostly the body text font
   except the literal word "Palworld" which keeps the display face. */
.pwv2-hero__subtitle-major {
    font-family: inherit;                       /* regular site body font */
    color: #f8dd26;                             /* fill */
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: clamp(1.1rem, 2.8vw, 1.8rem);
    margin: 0 0 18px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.pwv2-hero__subtitle-major .pw-word {
    font-family: "Palworld", "Bebas Neue", "Inter", system-ui, sans-serif;
    font-weight: 400;
    font-size: 1.55em;             /* compensate for the smaller x-height */
    line-height: 0.8;              /* keep baseline aligned with surrounding text */
    vertical-align: -0.08em;
    letter-spacing: 0;
}

/* Decorative sphere separator between sub-title and body copy. */
.pwv2-hero__sep {
    display: block;
    width: 60px;
    height: 60px;
    margin: 4px auto 14px;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.45));
}

/* Descriptive paragraph below sub-title. */
.pwv2-hero__subtitle {
    font-family: inherit;
    font-size: clamp(0.8rem, 1.6vw, 1.1rem);
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto 28px;
    max-width: 900px;
    line-height: 1.2;
}
.pwv2-hero__subtitle .product_price_tag {
    font-weight: 600;
    color: #fff;
}

/* Yellow hook line that sits right above the CTAs, ~1 step smaller. */
.pwv2-hero__precta {
    font-family: inherit;
    color: #f8dd26;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.35rem);
    letter-spacing: 0.01em;
    margin: 4px 0 18px;
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
@media (max-width: 767.98px) {
    /* Stacked-plans view - extra room so the Lamball doesn't crowd the pre-CTA */
    .pwv2-hero__precta { margin-bottom: 33px; }
}

/* Compact-hero squeeze for height-limited monitors (1920x1080 class).
   Trigger: ≥992px wide (skip phones in landscape) AND ≤1000px tall.
   A 1920x1080 monitor with browser chrome lands around 1920x937,
   which matches this rule and gets the compact layout regardless
   of the width-based desktop/tablet bracket. */
/* Trust strip embedded inside the discount card (stat text + Trustpilot inline).
   Fixed height prevents layout shift when the Trustpilot iframe loads async. */
.pwv2-plans-trust {
    margin: 0;
    padding: 0 13px;
    min-height: 32px;
    text-align: center;
    color: rgba(26, 31, 36, 0.78);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    border-top: 1px solid #e3e6ea;
    background: #f9fafb;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 14px;
}
.pwv2-plans-trust__line {
    letter-spacing: 0.01em;
}
.pwv2-plans-trust .trustpilot-widget {
    display: inline-block;
    min-width: 280px;
    height: 24px;
}

/* ─── Plan cards (S/M/L) ─────────────────────────────────────────────── */
.pwv2-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    max-width: 980px;
    margin: 5.5cm auto 0;     /* clear the pre-CTA + body paragraph + Nitewing perched on M */
    padding: 0 6px;
}
@media (max-width: 1199.98px) {
    .pwv2-plans { margin-top: 4cm; }
}
@media (max-width: 767.98px) {
    .pwv2-plans { grid-template-columns: 1fr; max-width: 380px; gap: 160px; margin-top: 3cm; }
}

/* Compact-hero squeeze for height-limited monitors (1920x1080 class).
   Placed AFTER the .pwv2-plans base + tablet/mobile overrides so source
   order favors it at equal specificity when both queries match. */
@media (min-width: 992px) and (max-height: 1070px) {
    .pwv2-hero { padding-top: 0.5cm; }
    .pwv2-hero__title { font-size: 2cm; margin-bottom: 0; }
    .pwv2-hero__subtitle-major { margin: 0 0 8px; }
    .pwv2-hero__subtitle { margin-bottom: 7px; }
    .pwv2-hero__sep { width: 30px; height: 30px; margin: 2px auto 7px; }
    .pwv2-plans { margin-top: 4cm; }
}

.pwv2-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #1a1f24;
    border-radius: 10px;
    /* No overflow:hidden - lets Pal cutouts stick out past the card */
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    text-align: center;
}
.pwv2-plan__header {
    position: relative;
    overflow: hidden;
    padding: 7px 12px 2px;
    font-family: "Palworld", "Bebas Neue", "Inter", system-ui, sans-serif;
    font-size: 3.8rem;
    line-height: 1;
    color: #fff;
    letter-spacing: 0.06em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.45);
    border-radius: 10px 10px 0 0;
}

/* Pal cutout peeking out of the top-left corner of each card. Bottom-right
   35% horizontal / 39% vertical sits behind the card, rest hangs above + left. */
.pwv2-plan__pal {
    position: absolute;
    width: 140px;
    height: auto;
    top: -90px;        /* card_top - (img_h * 0.61) where img is 148px tall  → 39% hidden vertically */
    left: -91px;       /* card_left - (img_w * 0.65) where img is 140px wide → 35% hidden horizontally */
    z-index: -1;       /* sits behind the card body so the overlap is masked by the white card */
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45));
}
@media (max-width: 991.98px) {
    .pwv2-plan__pal { width: 110px; top: -71px; left: -72px; }
}
/* Mobile (<768) override lives in the consolidated mobile block at the
   top of the file - Lamball is centered above the S card there. */

/* Pal perched on top of a card (claws gripping the top edge). Z-index
   above card body so the bird overlaps the colored header. The image's
   bottom edge sits 25px BELOW the card's top edge (25px overlap into card).
   Rendered at native 375x233 on desktop; scaled down on smaller viewports.
   Image aspect: 375x233 → height = width * 0.6213 */
.pwv2-plan__pal-top {
    position: absolute;
    width: 375px;
    height: auto;
    top: -145px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}
@media (max-width: 1199.98px) {
    .pwv2-plan__pal-top { width: 280px; top: -130px; }   /* keep bird up at tablet bp */
}
@media (max-width: 767.98px) {
    .pwv2-plan__pal-top { width: 220px; top: -117px; }   /* mobile centered claws-in */
}

/* Pal cutout peeking out of the top-right corner of a card.
   Image aspect: 448x445 → near-square. */
.pwv2-plan__pal-right {
    position: absolute;
    width: 280px;
    height: auto;
    top: -86px;
    right: -122px;
    z-index: -1;
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}
@media (max-width: 1199.98px) {
    .pwv2-plan__pal-right { width: 220px; top: -68px; right: -96px; }
}

/* ─── Mobile (<768) Pal layout: all three centered above their card ──── */
@media (max-width: 767.98px) {
    /* Lamball - behind card, centered, lowered into card top */
    .pwv2-plan__pal {
        width: 150px;
        top: -120px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    /* Blazamut - behind card, centered, lowered into card top */
    .pwv2-plan__pal-right {
        width: 200px;
        top: -110px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    /* Nitewing already centered via its base styles - keep as-is */
}
/* Solid header bgs matching each tier's hover button color. */
.pwv2-plan--s .pwv2-plan__header { background: #155374; }
.pwv2-plan--m .pwv2-plan__header { background: #a08410; }
.pwv2-plan--l .pwv2-plan__header { background: #a3187a; }

.pwv2-plan__badge {
    position: absolute;
    top: 30px;
    right: -33px;
    background: #e84e1b;
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;     /* don't inherit the header's Palworld face */
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: none;
    padding: 3px 40px;
    line-height: 1;
    transform: rotate(35deg);
    transform-origin: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 1;
}
.pwv2-plan__price {
    padding: 12px 12px 3px;
    font-weight: 800;
    font-size: 1.9rem;
    color: #1a1f24;
    line-height: 1.1;
}
.pwv2-plan__price .product_price_tag {
    display: inline-block;
    font-weight: 800;
    color: inherit;
}
.pwv2-plan__price .period {
    font-weight: 500;
    font-size: 0.95rem;
    color: rgba(26,31,36,0.65);
    margin-left: 2px;
}
.pwv2-plan__savings {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a525c;
    padding: 0 12px 3px;
    line-height: 1.2;
}
.pwv2-plan__savings .plan_savings_tag { font-weight: 800; }
.pwv2-plan__savings sup { font-size: 0.7em; }
.pwv2-plan__specs {
    list-style: none;
    margin: 3px 0 9px;
    padding: 0 20px;
    font-size: 0.95rem;
    color: #2c333b;
}
.pwv2-plan__specs li {
    padding: 3px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.pwv2-plan__specs li:last-child { border-bottom: 0; }
.pwv2-plan__specs b {
    font-weight: 700;
    color: #1a1f24;
}
.pwv2-plan__specs .yes { color: #2c8a3a; }
.pwv2-plan__specs .no  { color: #b03838; }
.pwv2-plan__cta {
    margin: 5px 18px 12px;
    padding: 6px 16px;
    border: 1.5px solid #e84e1b;
    border-radius: 6px;
    color: #e84e1b;
    background: transparent;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
    align-self: stretch;
    text-align: center;
    display: block;
}
.pwv2-plan__cta:hover {
    background: #e84e1b;
    color: #fff;
}
/* Per-tier outline + text in the default (un-hover) state - matches header.
   On hover the same color fills the button and the label flips white. */
.pwv2-plan--s .pwv2-plan__cta             { border-color: #155374; color: #155374; }
.pwv2-plan--s .pwv2-plan__cta:hover       { background: #155374; border-color: #155374; color: #fff; }
.pwv2-plan--m .pwv2-plan__cta             { border-color: #a08410; color: #5d4d08; background: rgba(248,221,38,0.18); }
.pwv2-plan--m .pwv2-plan__cta:hover       { background: #a08410; border-color: #a08410; color: #fff; }
.pwv2-plan--l .pwv2-plan__cta             { border-color: #a3187a; color: #a3187a; }
.pwv2-plan--l .pwv2-plan__cta:hover       { background: #a3187a; border-color: #a3187a; color: #fff; }

/* Sphere icon inside the CTA button - small tier marker before the label. */
.pwv2-plan__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.pwv2-plan__sphere {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}

/* Tall screens (>1070px height): reverse ~20% of the compact squeeze so
   paddings/margins inside plan cards breathe. Mirrors the 1070px breakpoint
   used for the compact-hero block above. Also tightens hero text spacing
   so plan boxes (incl. CTAs) fit in viewport on this resolution. */
@media (min-width: 992px) and (min-height: 1071px) {
    .pwv2-hero               { padding-top: 0.8cm; }
    .pwv2-hero__title        { margin-bottom: 8px; }
    .pwv2-hero__subtitle-major { margin-bottom: 12px; }
    .pwv2-hero__subtitle     { margin-bottom: 18px; }
    .pwv2-hero__precta       { margin: 2px 0 12px; }

    .pwv2-plan__header       { padding: 8px 12px 3px; }
    .pwv2-plan__badge        { padding: 3px 56px; }
    .pwv2-plan__price        { padding: 14px 12px 4px; }
    .pwv2-plan__savings      { padding: 0 12px 4px; }
    .pwv2-plan__specs        { margin: 4px 0 11px; }
    .pwv2-plan__specs li     { padding: 4px 0; }
    .pwv2-plan__cta          { margin: 6px 18px 14px; padding: 7px 16px; }
}

/* ─── Discount picker (above the plans grid) ─────────────────────────── */
.pwv2-discount {
    max-width: 640px;
    margin: 0 auto 28px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    color: #1a1f24;
    overflow: hidden;
}
.pwv2-discount__header {
    background: #4a525c;
    color: #fff;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 8px 12px;
    font-size: 1rem;
    text-transform: uppercase;
}
.pwv2-discount__body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    padding: 13px;
}
@media (max-width: 575.98px) {
    .pwv2-discount__body { grid-template-columns: repeat(2, 1fr); }
}
.pwv2-discount__pill {
    appearance: none;
    background: #f4f5f7;
    border: 2px solid #e3e6ea;
    border-radius: 999px;
    padding: 2px 12px;
    cursor: pointer;
    color: #2a3038;
    line-height: 1.15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font: inherit;
}
.pwv2-discount__pill:hover { background: #ebedf0; border-color: #c9cdd3; }
.pwv2-discount__pill-label { font-weight: 700; font-size: 0.95rem; }
.pwv2-discount__pill-note  { font-size: 0.78rem; opacity: 0.7; }
.pwv2-discount__pill.is-active {
    background: #a08410;
    border-color: #a08410;
    color: #fff;
}
.pwv2-discount__pill.is-active .pwv2-discount__pill-note { opacity: 0.9; }

/* Term visibility: hide all .pwv2-term--N descendants of #plans except the
   one matching the parent's .is-term-N class. JS toggles the parent class. */
.pwv2-plans:not(.is-term-1)  .pwv2-term--1,
.pwv2-plans:not(.is-term-3)  .pwv2-term--3,
.pwv2-plans:not(.is-term-6)  .pwv2-term--6,
.pwv2-plans:not(.is-term-12) .pwv2-term--12 { display: none !important; }

/* ─── Safety & features section (dark slate band, glass cards) ──────── */
.pwv2-safety {
    background: #10131c;
    padding: 48px 20px 64px;
    position: relative;
    z-index: 4;
}
.pwv2-safety__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 767.98px) {
    .pwv2-safety__inner { grid-template-columns: 1fr; }
}

/* Wrapper around legacy fragments so they sit on the V2 page bg and
   have consistent vertical rhythm. Fragments bring their own internal
   styling (steps, benefits cards, world-map SVG). */
.pwv2-standard {
    background: #10131c;
    color: #fff;
    /* 0.75rem horizontal padding absorbs the .row negative margin
       (.row uses calc(-1 * var(--si-gutter-x) * 0.5) on its sides).
       Without this, fragments that have a bare .row (not wrapped in
       .container) push the section past the viewport and cause a
       horizontal scrollbar. */
    padding: 64px 0.75rem;
}
.pwv2-standard + .pwv2-standard {
    padding-top: 0;            /* avoid double padding between stacked sections */
}

/* Back-to-plans CTA section (sits below FAQ) */
.pwv2-back-cta {
    background: #10131c;
    text-align: center;
    padding: 56px 20px 64px;
}
.pwv2-back-cta__title {
    color: #f8dd26;
    -webkit-text-stroke: 1px #122333;
    text-stroke: 1px #122333;
    paint-order: stroke fill;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    margin: 0 0 22px;
    letter-spacing: 0.01em;
}
.pwv2-back-cta__row {
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.pwv2-back-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pwv2-back-cta__btn--primary {
    background: #e84e1b;
    color: #fff;
    border: 2px solid #e84e1b;
}
.pwv2-back-cta__btn--primary:hover {
    background: #ff6234;
    border-color: #ff6234;
    transform: translateY(-1px);
}
.pwv2-back-cta__btn--ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.35);
}
.pwv2-back-cta__btn--ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.7);
}
.pwv2-back-cta__pal {
    display: block;
    width: 160px;
    height: auto;
    margin: 4px auto 22px;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 575px) {
    .pwv2-back-cta__pal { width: 120px; margin: 2px auto 18px; }
}

/* FAQ accordion - V2 dark-glass styling so it blends with the page */
.pwv2-faq .accordion-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
}
.pwv2-faq .accordion-button {
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    box-shadow: none;
}
.pwv2-faq .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.06);
    color: #f8dd26;
}
.pwv2-faq .accordion-button::after {
    filter: invert(1) brightness(1.5);
}
.pwv2-faq .accordion-body {
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
}
.pwv2-faq .accordion-body a {
    color: #f8dd26;
}

/* ─── Compare plans accordion (sits between hero and safety) ──────────── */
.pwv2-compare {
    background: #10131c;
    padding: 20px 16px 0;   /* ≥20px breathing room between plan cards and the Compare bar */
}
/* On large screens trim the hero so the Compare bar pokes above the fold,
   suggesting more content below. Hero baseline is 92vh; here we force the
   hero+bar combo to fit one screen with a ~48px peek of the bar. */
@media (min-width: 992px) {
    .pwv2-hero { min-height: calc(100vh - 116px); min-height: calc(100dvh - 116px); }
}
.pwv2-compare__acc { max-width: 1200px; margin: 0 auto; }
/* Bootstrap's accordion-flush strips radius/border on items - override so the
   collapsed bar reads as a self-contained rounded pill. */
.pwv2-compare .accordion-item,
.pwv2-compare__item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.pwv2-compare .accordion-header,
.pwv2-compare .accordion-header .accordion-button {
    border-radius: 12px !important;
}
.pwv2-compare .accordion-button:not(.collapsed) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.pwv2-compare__toggle {
    background: transparent !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    box-shadow: none !important;
    padding: 14px 22px;
    justify-content: center;
    text-align: center;
}
/* Override Bootstrap's dark default chevron with a white inline SVG. */
.pwv2-compare__toggle::after {
    margin-left: 10px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    filter: none !important;
}
.pwv2-compare__toggle:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f8dd26'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.pwv2-compare__toggle:not(.collapsed) { color: #f8dd26 !important; background: rgba(255,255,255,0.06) !important; }

.pwv2-compare__body { padding: 28px 22px 36px; color: rgba(255,255,255,0.88); }
.pwv2-compare__subtitle {
    text-align: center;
    color: #f8dd26;
    font-weight: 700;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    margin: 0 0 24px;
}

.pwv2-compare__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 36px;
}
@media (max-width: 767.98px) { .pwv2-compare__cards { grid-template-columns: 1fr; } }
.pwv2-compare__card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 16px 18px 18px;
}
.pwv2-compare__card h4 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pwv2-compare__card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: rgba(255,255,255,0.82); }
.pwv2-compare__card--s h4 { color: #6cb6dc; }
.pwv2-compare__card--m h4 { color: #f8dd26; }
.pwv2-compare__card--l h4 { color: #e08acc; }

.pwv2-compare__table-wrap { overflow-x: auto; }
.pwv2-compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    min-width: 560px;
}
.pwv2-compare__table th,
.pwv2-compare__table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    vertical-align: middle;
}
.pwv2-compare__table thead th {
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,0.06);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.82rem;
}
.pwv2-compare__table tbody td:first-child,
.pwv2-compare__table thead th:first-child { text-align: left; }
.pwv2-compare__table .yes { color: #6fd58a; font-weight: 600; }
.pwv2-compare__table .no  { color: rgba(255,255,255,0.45); }
.pwv2-compare__table .pwv2-compare__cta-row td { padding-top: 18px; border-bottom: none; }
.pwv2-compare__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    color: #fff;
    border: 2px solid;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
/* Tier-filled default state - same colors as the plan headers / hover bg */
.pwv2-compare__cta--s { background: #155374; border-color: #155374; }
.pwv2-compare__cta--m { background: #a08410; border-color: #a08410; }
.pwv2-compare__cta--l { background: #a3187a; border-color: #a3187a; }
/* Hover - delicate highlight (subtle brightness + soft outer ring) */
.pwv2-compare__cta:hover {
    color: #fff;
    filter: brightness(1.15);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}
.pwv2-compare__cta-sphere {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* ─── Features section (photo bg + 3 glass cards) ────────────────────── */
.pwv2-features {
    position: relative;
    background:
        linear-gradient(rgba(16, 19, 28, 0.78), rgba(16, 19, 28, 0.78)),
        url('/wp-content/media/palworld-server-hosting/palword-background-2.webp') center / cover no-repeat;
    padding: clamp(80px, 10vw, 140px) 20px;
    overflow: hidden;
    color: #fff;
}
.pwv2-features::before,
.pwv2-features::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 35%;
    pointer-events: none;
    z-index: 1;
}
.pwv2-features::before {
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(16, 19, 28, 1)    0%,
        rgba(16, 19, 28, 0.85) 30%,
        rgba(16, 19, 28, 0.45) 65%,
        rgba(16, 19, 28, 0)    100%
    );
}
.pwv2-features::after {
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(16, 19, 28, 1)    0%,
        rgba(16, 19, 28, 0.85) 30%,
        rgba(16, 19, 28, 0.45) 65%,
        rgba(16, 19, 28, 0)    100%
    );
}
.pwv2-features__inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}
.pwv2-features__title {
    text-align: center;
    font-family: inherit;
    font-weight: 800;
    color: #f8dd26;
    -webkit-text-stroke: 1.5px #122333;
    text-stroke: 1.5px #122333;
    paint-order: stroke fill;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    margin: 0 0 36px;
    letter-spacing: 0.01em;
}
.pwv2-features__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 991.98px) {
    .pwv2-features__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
.pwv2-features__trustpilot {
    margin-bottom: 26px;
    text-align: center;
}
/* Sphere stamp inside each feature card, centered between title and copy. */
.pwv2-glass-card .pwv2-card__sphere {
    display: block;
    width: 64px;
    height: 64px;
    margin: 4px auto 14px;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}

/* Glassmorphic content cards over the photo background. */
.pwv2-glass-card {
    background: rgba(13, 17, 23, 0.55);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 24px 26px;
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.pwv2-glass-card h3 {
    margin: 0 0 12px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}
.pwv2-glass-card p {
    margin: 0 0 12px;
    line-height: 1.55;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
}
.pwv2-glass-card p:last-child { margin-bottom: 0; }
.pwv2-payments {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
    font-size: 1.8rem;
    color: #fff;
}

/* Reduced-motion users: replace the video with the still poster. */
@media (prefers-reduced-motion: reduce) {
    .pwv2-hero__video {
        display: none;
    }
    .pwv2-hero {
        background-image: url('/wp-content/media/palworld-server-hosting/hero-bg.still.webp');
        background-size: cover;
        background-position: center;
    }
}