/* ─── Hero ───────────────────────────────────────────────────────────── */
.asav2-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 .asav2-hero__video crop. */
    background: #10131c url('/wp-content/media/ark-survival-ascended-server-hosting/hero-bg-5.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) {
    .asav2-hero {
        padding-top: 0.5cm;    /* tighter on mobile */
    }
}

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

/* Scrim over the video so the title is readable. Palworld used a flat blue
   wash (rgba(33,78,153,0.64)), which tints the ARK jungle-cave clip's warm
   rock a muddy blue. A dark slate gradient - heaviest behind the title,
   lighter further down - keeps contrast without flattening the footage. */
.asav2-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(9, 16, 32, 0.62)  0%,
        rgba(12, 22, 44, 0.50) 45%,
        rgba(14, 26, 50, 0.38) 100%
    );
    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. */
.asav2-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. */
.asav2-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%). */
.asav2-hero__title {
    font-family: "ARK", "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);
    /* Logo sits to the left of the wordmark; both are flex items, so on
       narrow screens the text drops to its own line under the logo. */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 22px;
}
.asav2-hero__logo {
    width: 150px;                           /* mobile - provisional, sized in CSS not the asset */
    height: auto;
    flex: 0 0 auto;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
}
@media (min-width: 768px) {
    .asav2-hero__logo { width: 210px; }
}
/* Matched to the wordmark's own step-up: .asav2-hero__title goes 1.6cm -> 3cm
   at 1200px, so the logo grows at the same breakpoint. Keep these two in sync
   - if the title breakpoint moves, move this one with it. */
@media (min-width: 1200px) {
    .asav2-hero__logo { width: 310px; }
}
/* Non-mobile: keep the logo pinned to the left of the wordmark. Without
   nowrap + min-width:0 the whole text block drops to its own line once the
   title hits 3cm (tall viewports, >1070px), which reads as a mobile layout
   on a desktop. Letting the span shrink makes the WORDMARK wrap internally
   instead - which is what we want. */
@media (min-width: 768px) {
    .asav2-hero__title { flex-wrap: nowrap; }
    .asav2-hero__title-text { min-width: 0; }
}
/* Mobile: force the wrap so the logo always gets its own line, centered
   above the wordmark, instead of depending on where the text happens to
   break. */
@media (max-width: 767.98px) {
    .asav2-hero__title { flex-direction: column; gap: 6px; }
}
@media (min-width: 768px) {
    .asav2-hero__title { font-size: 1.6cm; }     /* tablet */
}
@media (min-width: 1200px) {
    .asav2-hero__title { font-size: 3cm; }       /* desktop (+50%) */
}
/* "Server Hosting" onto its own line. The ARK face is narrow enough that
   natural wrapping puts "Server" on line 1 and leaves "Hosting" a widow. */
.asav2-hero__title em {
    font-style: normal;
    color: #fff;
    display: block;
}

/* Sub-title: outlined yellow on dark stroke. Mostly the body text font
   except the literal words "ARK: Survival Ascended" which keep the display face. */
.asav2-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);
}
.asav2-hero__subtitle-major .asa-word {
    font-family: "ARK", "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. */
.asav2-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. */
.asav2-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;
}
.asav2-hero__subtitle .product_price_tag {
    font-weight: 600;
    color: #fff;
}

/* Yellow hook line that sits right above the CTAs, ~1 step smaller. */
.asav2-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 */
    .asav2-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. */
.asav2-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;
}
.asav2-plans-trust__line {
    letter-spacing: 0.01em;
}
.asav2-plans-trust .trustpilot-widget {
    display: inline-block;
    min-width: 280px;
    height: 24px;
}

/* ─── Plan cards (S/M/L) ─────────────────────────────────────────────── */
.asav2-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    max-width: 980px;
    /* Headroom for the dinos hanging off the top of each card, so they don't
       crash into the discount picker above (same job as Palworld's 5.5cm and
       Valheim's 4.5cm). */
    margin: 4.2cm auto 0;
    padding: 0 6px;
}
@media (max-width: 1199.98px) {
    .asav2-plans { margin-top: 3.4cm; }
}
@media (max-width: 767.98px) {
    /* Stacked: each dino is centered above its own card, so the row gap has
       to clear a dino rather than just separate two cards. */
    .asav2-plans { grid-template-columns: 1fr; max-width: 380px; gap: 150px; margin-top: 2.6cm; }
}

/* Compact-hero squeeze for height-limited monitors (1920x1080 class).
   Placed AFTER the .asav2-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) {
    .asav2-hero { padding-top: 0.5cm; }
    .asav2-hero__title { font-size: 2cm; margin-bottom: 0; }
    .asav2-hero__subtitle-major { margin: 0 0 8px; }
    .asav2-hero__subtitle { margin-bottom: 7px; }
    .asav2-hero__sep { width: 30px; height: 30px; margin: 2px auto 7px; }
    /* Still has to clear the dinos - this is the squeeze breakpoint, not a
       no-art one. Anything under ~3.4cm tucks the Rex's head behind the
       discount card. */
    .asav2-plans { margin-top: 3.6cm; }
}

.asav2-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;
}
.asav2-plan__header {
    position: relative;
    overflow: hidden;
    padding: 7px 12px 2px;
    font-family: "ARK", "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. */
.asav2-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) {
    .asav2-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 */
.asav2-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) {
    .asav2-plan__pal-top { width: 280px; top: -130px; }   /* keep bird up at tablet bp */
}
@media (max-width: 767.98px) {
    .asav2-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. */
.asav2-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) {
    .asav2-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 */
    .asav2-plan__pal {
        width: 150px;
        top: -120px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    /* Blazamut - behind card, centered, lowered into card top */
    .asav2-plan__pal-right {
        width: 200px;
        top: -110px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    /* Nitewing already centered via its base styles - keep as-is */
}
/* ─── Dinos hanging off the plan cards ───────────────────────────────────
   Same technique Valheim uses for its bosses: one dedicated class per image
   so each can be nudged independently, absolutely positioned against the
   card (.asav2-plan is position:relative), pulled up and outward with
   negative offsets, and sat behind the card with z-index:-1 so the white
   card body masks the overlap.

   `max-width: none` is required - Bootstrap's global `img { max-width:100% }`
   would otherwise clamp them to the card width.

   Parasaur and Giga hang off the outer edges, so both are turned to face
   INTO the layout; the Rex is centered over M and keeps its native facing. */
.asav2-plan__parasaur,
.asav2-plan__rex,
.asav2-plan__giga {
    position: absolute;
    height: auto;
    max-width: none;
    z-index: -1;
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}
/* S - Parasaur, top-left, mirrored to face right (into the page). */
.asav2-plan__parasaur {
    width: 510px;
    top: -240px;
    left: -218px;
    transform: scaleX(-1);
}
/* M - Rex, centered over the card. */
.asav2-plan__rex {
    width: 330px;
    top: -154px;      /* any higher and its head tucks behind the discount card */
    left: 50%;
    transform: translateX(-50%);
}
/* L - Giga, top-right; already faces left, so no mirror. */
.asav2-plan__giga {
    width: 380px;
    top: -142px;
    right: -132px;
}
/* Tablet: the grid still spans nearly the full viewport, so the outer two
   have to hang inward - at -92/-104 they ran past the hero's overflow:hidden
   edge and lost the Parasaur's tail / half the Giga's head. */
@media (max-width: 1199.98px) {
    .asav2-plan__parasaur { width: 250px; top: -112px; left: -48px; }
    .asav2-plan__rex      { width: 255px; top: -124px; }
    .asav2-plan__giga     { width: 280px; top: -104px; right: -46px; }
}
/* Mobile: cards are stacked full-width, so center every dino above its own
   card instead of hanging it off an edge that no longer exists. */
@media (max-width: 767.98px) {
    .asav2-plan__parasaur,
    .asav2-plan__giga {
        left: 50%;
        right: auto;
    }
    .asav2-plan__parasaur { width: 250px; top: -128px; transform: translateX(-50%) scaleX(-1); }
    .asav2-plan__rex      { width: 240px; top: -126px; }
    .asav2-plan__giga     { width: 280px; top: -118px; transform: translateX(-50%); }
}

/* Solid header bgs matching each tier's hover button color. */
/* Solid tier colours stay as the base layer: they show through if a texture
   fails to load, and they still drive the CTA borders further down. */
.asav2-plan--s .asav2-plan__header { background: #155374; }
.asav2-plan--m .asav2-plan__header { background: #a08410; }
.asav2-plan--l .asav2-plan__header { background: #a3187a; }

/* ─── Textured plan headers ──────────────────────────────────────────────
   The hex-scale texture goes on a ::before layer rather than the element's
   own background, so blur()/saturate() hit the texture only - putting the
   filter on .asav2-plan__header itself would smear the S/M/L letter and the
   "Most popular" badge too.

   isolation:isolate makes the header a stacking context so the z-index:-1
   layer is contained: it paints above the header's background-colour but
   below the text, and can't slip behind the white card body.

   The source PNGs are 196x124 and get stretched to roughly 300x77, so the
   blur doubles as cover for the upscale. */
.asav2-plan__header { isolation: isolate; }
.asav2-plan__header::before {
    content: "";
    position: absolute;
    /* Overscan - blur() samples past the element edge and would otherwise
       leave the corners washed out. Clipped by the header's overflow:hidden. */
    inset: -12px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;          /* stretch to fill; aspect ignored */
    filter: blur(1.5px) saturate(0.95) brightness(0.92);
    z-index: -1;
}
.asav2-plan--s .asav2-plan__header::before {
    background-image: url('/wp-content/media/ark-survival-ascended-server-hosting/q1.webp');
}
.asav2-plan--m .asav2-plan__header::before {
    background-image: url('/wp-content/media/ark-survival-ascended-server-hosting/q2.webp');
}
.asav2-plan--l .asav2-plan__header::before {
    background-image: url('/wp-content/media/ark-survival-ascended-server-hosting/q3.webp');
}

.asav2-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 display 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;
}
.asav2-plan__price {
    padding: 12px 12px 3px;
    font-weight: 800;
    font-size: 1.9rem;
    color: #1a1f24;
    line-height: 1.1;
}
.asav2-plan__price .product_price_tag {
    display: inline-block;
    font-weight: 800;
    color: inherit;
}
.asav2-plan__price .period {
    font-weight: 500;
    font-size: 0.95rem;
    color: rgba(26,31,36,0.65);
    margin-left: 2px;
}
.asav2-plan__savings {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a525c;
    padding: 0 12px 3px;
    line-height: 1.2;
}
.asav2-plan__savings .plan_savings_tag { font-weight: 800; }
.asav2-plan__savings sup { font-size: 0.7em; }
.asav2-plan__specs {
    list-style: none;
    margin: 3px 0 9px;
    padding: 0 20px;
    font-size: 0.95rem;
    color: #2c333b;
}
.asav2-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;
}
.asav2-plan__specs li:last-child { border-bottom: 0; }
.asav2-plan__specs b {
    font-weight: 700;
    color: #1a1f24;
}
.asav2-plan__specs .yes { color: #2c8a3a; }
.asav2-plan__specs .no  { color: #b03838; }
.asav2-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;
}
.asav2-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. */
/* CTA colours derived from the mean colour of each header texture, measured
   AFTER the header's saturate(.95) brightness(.92) - both are linear ops, so
   filtering the mean gives exactly what renders on screen:
       q1 -> #5d44bd   q2 -> #b99c1d   q3 -> #17acb1
   The mean is the frame colour (the visual tie to the header). S is dark
   enough to double as the label and hover fill (6.9:1 on white). M and L are
   not - at 2.7:1 the label would be unreadable on the white card and white
   would be unreadable on the hover fill - so those two use a darkened cut of
   the same hue (x0.75) for the label + hover fill, landing at 4.5:1. */
.asav2-plan--s .asav2-plan__cta             { border-color: #5d44bd; color: #5d44bd; }
.asav2-plan--s .asav2-plan__cta:hover       { background: #5d44bd; border-color: #5d44bd; color: #fff; }
.asav2-plan--m .asav2-plan__cta             { border-color: #b99c1d; color: #8b7516; background: #f4efdb; }
.asav2-plan--m .asav2-plan__cta:hover       { background: #8b7516; border-color: #8b7516; color: #fff; }
.asav2-plan--l .asav2-plan__cta             { border-color: #17acb1; color: #118387; }
.asav2-plan--l .asav2-plan__cta:hover       { background: #118387; border-color: #118387; color: #fff; }

/* Sphere icon inside the CTA button - small tier marker before the label. */
.asav2-plan__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.asav2-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) {
    .asav2-hero               { padding-top: 0.8cm; }
    .asav2-hero__title        { margin-bottom: 8px; }
    .asav2-hero__subtitle-major { margin-bottom: 12px; }
    .asav2-hero__subtitle     { margin-bottom: 18px; }
    .asav2-hero__precta       { margin: 2px 0 12px; }

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

/* ─── Discount picker (above the plans grid) ─────────────────────────── */
.asav2-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;
}
.asav2-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;
}
.asav2-discount__body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    padding: 13px;
}
@media (max-width: 575.98px) {
    .asav2-discount__body { grid-template-columns: repeat(2, 1fr); }
}
.asav2-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;
}
.asav2-discount__pill:hover { background: #ebedf0; border-color: #c9cdd3; }
.asav2-discount__pill-label { font-weight: 700; font-size: 0.95rem; }
.asav2-discount__pill-note  { font-size: 0.78rem; opacity: 0.7; }
.asav2-discount__pill.is-active {
    background: #a08410;
    border-color: #a08410;
    color: #fff;
}
.asav2-discount__pill.is-active .asav2-discount__pill-note { opacity: 0.9; }

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

/* ─── Safety & features section (dark slate band, glass cards) ──────── */
.asav2-safety {
    background: #10131c;
    padding: 48px 20px 64px;
    position: relative;
    z-index: 4;
}
.asav2-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) {
    .asav2-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). */
.asav2-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;
}
.asav2-standard + .asav2-standard {
    padding-top: 0;            /* avoid double padding between stacked sections */
}

/* Back-to-plans CTA section (sits below FAQ) */
.asav2-back-cta {
    background: #10131c;
    text-align: center;
    padding: 56px 20px 64px;
}
.asav2-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;
}
.asav2-back-cta__row {
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.asav2-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;
}
.asav2-back-cta__btn--primary {
    background: #e84e1b;
    color: #fff;
    border: 2px solid #e84e1b;
}
.asav2-back-cta__btn--primary:hover {
    background: #ff6234;
    border-color: #ff6234;
    transform: translateY(-1px);
}
.asav2-back-cta__btn--ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.35);
}
.asav2-back-cta__btn--ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.7);
}
.asav2-back-cta__pal {
    display: block;
    width: 160px;
    height: auto;
    margin: 4px auto 22px;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 575px) {
    .asav2-back-cta__pal { width: 120px; margin: 2px auto 18px; }
}

/* FAQ accordion - V2 dark-glass styling so it blends with the page */
.asav2-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;
}
.asav2-faq .accordion-button {
    background: transparent;
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    box-shadow: none;
}
.asav2-faq .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.06);
    color: #f8dd26;
}
.asav2-faq .accordion-button::after {
    filter: invert(1) brightness(1.5);
}
.asav2-faq .accordion-body {
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
}
.asav2-faq .accordion-body a {
    color: #f8dd26;
}

/* ─── Compare plans accordion (sits between hero and safety) ──────────── */
.asav2-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) {
    .asav2-hero { min-height: calc(100vh - 116px); min-height: calc(100dvh - 116px); }
}
.asav2-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. */
.asav2-compare .accordion-item,
.asav2-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;
}
.asav2-compare .accordion-header,
.asav2-compare .accordion-header .accordion-button {
    border-radius: 12px !important;
}
.asav2-compare .accordion-button:not(.collapsed) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.asav2-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. */
.asav2-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;
}
.asav2-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;
}
.asav2-compare__toggle:not(.collapsed) { color: #f8dd26 !important; background: rgba(255,255,255,0.06) !important; }

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

.asav2-compare__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 36px;
}
@media (max-width: 767.98px) { .asav2-compare__cards { grid-template-columns: 1fr; } }
.asav2-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;
}
.asav2-compare__card h4 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.asav2-compare__card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: rgba(255,255,255,0.82); }
/* Headings pull the same accents as the plan-card CTAs (the header-texture
   means). M and L clear 6:1 against this dark panel as-is, so they're used
   straight; S's violet is only 2.6:1 there, so it's mixed 42% toward white
   to land at 6.0:1 - parity with the other two rather than just passing. */
.asav2-compare__card--s h4 { color: #a193d9; }   /* #5d44bd lifted */
.asav2-compare__card--m h4 { color: #b99c1d; }
.asav2-compare__card--l h4 { color: #17acb1; }

.asav2-compare__table-wrap { overflow-x: auto; }
.asav2-compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    min-width: 560px;
}
.asav2-compare__table th,
.asav2-compare__table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    vertical-align: middle;
}
.asav2-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;
}
.asav2-compare__table tbody td:first-child,
.asav2-compare__table thead th:first-child { text-align: left; }
.asav2-compare__table .yes { color: #6fd58a; font-weight: 600; }
.asav2-compare__table .no  { color: rgba(255,255,255,0.45); }
.asav2-compare__table .asav2-compare__cta-row td { padding-top: 18px; border-bottom: none; }
.asav2-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 */
.asav2-compare__cta--s { background: #155374; border-color: #155374; }
.asav2-compare__cta--m { background: #a08410; border-color: #a08410; }
.asav2-compare__cta--l { background: #a3187a; border-color: #a3187a; }
/* Hover - delicate highlight (subtle brightness + soft outer ring) */
.asav2-compare__cta:hover {
    color: #fff;
    filter: brightness(1.15);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}
.asav2-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) ────────────────────── */
.asav2-features {
    position: relative;
    background:
        linear-gradient(rgba(16, 19, 28, 0.78), rgba(16, 19, 28, 0.78)),
        url('/wp-content/media/ark-survival-ascended-server-hosting/features-bg.webp') center / cover no-repeat;
    padding: clamp(80px, 10vw, 140px) 20px;
    overflow: hidden;
    color: #fff;
}
.asav2-features::before,
.asav2-features::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 35%;
    pointer-events: none;
    z-index: 1;
}
.asav2-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%
    );
}
.asav2-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%
    );
}
.asav2-features__inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}
.asav2-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;
}
.asav2-features__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 991.98px) {
    .asav2-features__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
.asav2-features__trustpilot {
    margin-bottom: 26px;
    text-align: center;
}
/* Sphere stamp inside each feature card, centered between title and copy. */
.asav2-glass-card .asav2-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. */
.asav2-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);
}
.asav2-glass-card h3 {
    margin: 0 0 12px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}
.asav2-glass-card p {
    margin: 0 0 12px;
    line-height: 1.55;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
}
.asav2-glass-card p:last-child { margin-bottom: 0; }
.asav2-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) {
    .asav2-hero__video {
        display: none;
    }
    .asav2-hero {
        background-image: url('/wp-content/media/ark-survival-ascended-server-hosting/hero-bg-5.poster.webp');
        background-size: cover;
        background-position: center;
    }
}