/* ============================================================
   Revelation Hosting — v2.1.0 Static design system
   Scoped under `.v2-static` so nothing leaks into legacy pages.
   Bootstrap 4 grid/utilities still work inside `.v2-static`.
   ============================================================ */

/* Tell the browser this surface is dark so native UI (scrollbars,
   form controls, autofill backgrounds) render in dark theme instead
   of the light default. Scoped to `body.v2-chrome` which every v2
   page uses — legacy pages without this class keep the light default.

   Also clip horizontal overflow so the v2's absolute-positioned ambient
   decorations (.v2-aurora blurs, .v2-section-mark watermarks, the
   floating reCAPTCHA badge) can't push the body wider than the
   viewport on mobile. Without this, narrow-phone viewports get a
   horizontal scrollbar AND scroll-jank as the user swipes. */
body.v2-chrome {
    color-scheme: dark;
    overflow-x: hidden;
}

/* Design tokens — shared by the page-body wrapper (.v2-static) AND the dark
   chrome wrapper (.v2-chrome) so nav and footer have access to all brand
   colors. Without this, `var(--v2-ink-2)` inside the chrome evaluates to
   unset and the nav links / footer text render as black defaults. */
.v2-static,
.v2-chrome {
    /* ---- brand tokens ---- */
    --v2-ink:           #0A0E1F;   /* near-black indigo for dark surfaces */
    --v2-ink-2:         #111631;   /* elevated dark card */
    --v2-ink-3:         #1A2043;   /* highest dark surface */
    --v2-line:          rgba(255, 255, 255, 0.08);
    --v2-line-2:        rgba(255, 255, 255, 0.14);

    --v2-paper:         #FAFAFC;   /* near-white */
    --v2-paper-2:       #F1F2F7;
    --v2-paper-line:    rgba(10, 14, 31, 0.08);

    --v2-text:          #0A0E1F;
    --v2-text-muted:    #5B6180;
    --v2-text-invert:   #F3F4FA;
    --v2-text-dim:      #B0B6D6;

    /* Exact colors pulled from the brand logo SVGs (logo-color.svg, logo-full-color.svg):
       primary indigo, teal, lavender, steel-blue, and purple.
       These are the official brand palette — do not substitute with approximations. */
    --v2-primary:       #727CF5;   /* wordmark accent — brand primary */
    --v2-primary-600:   #5E68E0;
    --v2-teal:          #6AF2E5;
    --v2-teal-2:        #6EE6E5;
    --v2-lavender:      #8A92E6;
    --v2-lavender-2:    #8B91E6;
    --v2-purple:        #976CE6;
    --v2-neutral:       #6C757D;
    --v2-success:       #31D9A5;
    --v2-warn:          #FFB547;

    /* Aliases for template readability */
    --v2-accent:        var(--v2-teal);
    --v2-accent-2:      var(--v2-lavender);
    --v2-accent-3:      var(--v2-purple);

    /* Stops are offset -2% / 102% so the raw endpoint colors (pure teal and
       pure purple) never render as a 1-px band at the edge of any gradient-
       filled surface. Noticed first on the checkout step icon + billing
       toggle; same issue showed up on every pill/button/chip that paints
       this token on dark chrome. Pushing the endpoints just barely off the
       visible span gives a clean blended edge while preserving the full
       teal→lavender→purple character of the gradient. */
    --v2-grad:          linear-gradient(110deg, #6AF2E5 -2%, #8A92E6 55%, #976CE6 102%);

    /* ---- type ---- */
    --v2-font:          'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --v2-mono:          'JetBrains Mono', 'SF Mono', ui-monospace, 'Courier New', monospace;

    /* ---- shape ---- */
    --v2-radius-sm:     8px;
    --v2-radius:        14px;
    --v2-radius-lg:     22px;
    --v2-radius-xl:     32px;

    /* ---- shadow ---- */
    --v2-shadow:        0 1px 2px rgba(10,14,31,.04), 0 8px 24px rgba(10,14,31,.06);
    --v2-shadow-lg:     0 4px 8px rgba(10,14,31,.05), 0 24px 64px rgba(10,14,31,.10);
}

/* Font and rendering baseline — applied only to the page body wrapper.
   .v2-chrome gets its own background/color set in its dedicated rule. */
.v2-static {
    font-family: var(--v2-font);
    color: var(--v2-text);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--v2-paper);
}

.v2-chrome {
    font-family: var(--v2-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.v2-static *,
.v2-static *::before,
.v2-static *::after {
    box-sizing: border-box;
}

/* ============================================================
   Section chrome
   ============================================================ */

.v2-section {
    position: relative;
    padding: 7rem 0;
    overflow: hidden;
}

.v2-section--tight   { padding: 4rem 0; }

.v2-section--dark {
    background: var(--v2-ink);
    color: var(--v2-text-invert);
}

.v2-section--dark .text-muted { color: var(--v2-text-dim) !important; }

/* Subtle blueprint grid for dark sections */
.v2-section--grid::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--v2-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--v2-line) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    opacity: .7;
    pointer-events: none;
}

/* Aurora glow — used behind hero and final CTA */
.v2-aurora {
    position: absolute;
    inset: auto;
    pointer-events: none;
    filter: blur(80px);
    opacity: .55;
    z-index: 0;
}
.v2-aurora--teal     { width: 560px; height: 560px; background: radial-gradient(circle, #6AF2E5 0%, transparent 60%); }
.v2-aurora--purple   { width: 640px; height: 640px; background: radial-gradient(circle, #976CE6 0%, transparent 60%); }
.v2-aurora--lavender { width: 520px; height: 520px; background: radial-gradient(circle, #8A92E6 0%, transparent 60%); }

.v2-section > .container { position: relative; z-index: 1; }

/* ============================================================
   Typography
   ============================================================ */

.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--v2-mono);
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--v2-primary);
    padding: .35rem .75rem;
    border: 1px solid rgba(114,124,245,.25);
    border-radius: 999px;
    background: rgba(114,124,245,.08);
}
.v2-section--dark .v2-eyebrow {
    color: var(--v2-accent);
    border-color: rgba(106,242,229,.35);
    background: rgba(106,242,229,.08);
}
.v2-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

/* ============================================================
   Reusable badge family — dark-scrim pill with colored border + text.

   Designed to stay readable over variable-brightness backgrounds
   (game-card hero images, gradient panels, photography). The
   translucent glass-morphism approach (low-opacity colored tint)
   fails the moment the underlying content gets bright — the Apple
   Liquid Glass legibility problem. This family solves it by using
   a near-opaque dark scrim + `saturate(140%)` backdrop filter,
   then signaling identity via colored border + colored text.

   Usage:
     <span class="v2-badge v2-badge--success">Free tier</span>
     <span class="v2-badge v2-badge--accent">Featured</span>
     <span class="v2-badge v2-badge--lavender">Mods</span>
     <span class="v2-badge v2-badge--warning">Beta</span>
     <span class="v2-badge v2-badge--danger">Deprecated</span>

   The existing `.v2-game-card__badge--*` classes are kept for backward
   compat and effectively mirror this family; new usages should prefer
   the generic `.v2-badge*` classes.
   ============================================================ */

.v2-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--v2-mono);
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(10, 14, 31, .82);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-invert);
    white-space: nowrap;
    line-height: 1.2;
}
.v2-badge--success {
    border-color: rgba(49, 217, 165, .65);
    color: var(--v2-success);
}
.v2-badge--accent,
.v2-badge--featured {
    border-color: rgba(106, 242, 229, .7);
    color: var(--v2-accent);
}
.v2-badge--lavender {
    border-color: rgba(138, 146, 230, .65);
    color: var(--v2-lavender);
}
.v2-badge--purple {
    border-color: rgba(151, 108, 230, .65);
    color: var(--v2-purple);
}
.v2-badge--warning {
    border-color: rgba(234, 185, 108, .6);
    color: #EAB96C;
}
.v2-badge--danger {
    border-color: rgba(255, 107, 122, .6);
    color: #ff9aa4;
}

.v2-display {
    font-size: clamp(2.4rem, 5.2vw, 4.75rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin: 0 0 1.25rem;
}
.v2-display--sm { font-size: clamp(2rem, 3.6vw, 3.2rem); }

.v2-grad-text {
    background: var(--v2-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.v2-lede {
    font-size: clamp(1.05rem, 1.2vw, 1.25rem);
    line-height: 1.55;
    color: var(--v2-text-muted);
    max-width: 38em;
}
.v2-section--dark .v2-lede { color: var(--v2-text-dim); }

.v2-mono {
    font-family: var(--v2-mono);
    font-feature-settings: "zero";
}

/* ============================================================
   Buttons
   ============================================================ */

.v2-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 48px;
    padding: 0 1.35rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap;
    cursor: pointer;
}
.v2-btn:hover { text-decoration: none; transform: translateY(-1px); }

.v2-btn--primary {
    background: var(--v2-primary);
    color: #fff;
    box-shadow: 0 6px 20px rgba(114,124,245,.35);
}
.v2-btn--primary:hover { background: var(--v2-primary-600); color: #fff; box-shadow: 0 10px 30px rgba(114,124,245,.5); }

.v2-btn--grad {
    background: var(--v2-grad);
    /* `.v2-btn` has `border: 1px solid transparent` so ghost-variant can
       color it without changing the button's height. Default
       `background-clip: border-box` paints the gradient *behind* that
       transparent border, and in that 1-px strip the gradient renders
       with a visible color band on each edge (especially pronounced on
       the teal side since it contrasts with the dark page bg).
       `background-clip: padding-box` keeps the gradient inside the
       padding box so the 1-px border area is truly transparent to the
       page bg and the gradient terminates cleanly at the padding edge. */
    background-clip: padding-box;
    color: #0A0E1F;
    box-shadow: 0 6px 24px rgba(151,108,230,.45);
}
.v2-btn--grad:hover {
    color: #0A0E1F;
    box-shadow: 0 10px 36px rgba(151,108,230,.6);
}

.v2-btn--ghost {
    background: transparent;
    color: var(--v2-text);
    border-color: var(--v2-paper-line);
}
.v2-btn--ghost:hover { border-color: var(--v2-text); color: var(--v2-text); background: rgba(10,14,31,.03); }

.v2-section--dark .v2-btn--ghost,
.v2-hero .v2-btn--ghost,
.v2-mode-dark .v2-btn--ghost {
    color: var(--v2-text-invert);
    border-color: var(--v2-line-2);
}
.v2-section--dark .v2-btn--ghost:hover,
.v2-hero .v2-btn--ghost:hover,
.v2-mode-dark .v2-btn--ghost:hover {
    border-color: var(--v2-accent);
    color: var(--v2-accent);
    background: rgba(106,242,229,.05);
}

.v2-btn--lg { height: 56px; padding: 0 1.75rem; font-size: 1rem; }

.v2-btn .v2-btn-arrow { transition: transform .2s ease; }
.v2-btn:hover .v2-btn-arrow { transform: translateX(3px); }

/* ============================================================
   Hero
   ============================================================ */

.v2-hero {
    position: relative;
    background: var(--v2-ink);
    color: var(--v2-text-invert);
    padding: 8rem 0 7rem;
    overflow: hidden;
    isolation: isolate;
}
.v2-hero::after {
    /* subtle bottom fade so the section below blends */
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
    background: linear-gradient(180deg, transparent 0%, var(--v2-paper) 100%);
    z-index: 2;
    pointer-events: none;
}
.v2-hero__grid::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 20% 30%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 20% 30%, black 30%, transparent 75%);
    z-index: 0;
}

.v2-hero__inner {
    position: relative;
    z-index: 2;
}

/* Top-of-hero chip bar — three evenly-spaced status/platform chips spanning
   the full content width, sitting above the main hero row. Replaces the
   absolute-positioned "eyebrow + float chips" pattern with a single aligned strip. */
.v2-hero__chipbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
}
@media (max-width: 767.98px) {
    .v2-hero__chipbar { justify-content: flex-start; }
    /* On narrow phones the gradient chip ("v2.1 · Apr 2026 · Premier...")
       is wider than the viewport. white-space: nowrap keeps it from
       wrapping internally, so it overflows horizontally and the first
       chip ("4,200+ servers on platform") gets pushed out of sight.
       Let both chips wrap their own text on mobile — the pill shape
       still reads. */
    .v2-float-chip {
        white-space: normal;
        line-height: 1.25;
        text-align: left;
    }
}

.v2-hero__title {
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    line-height: .98;
    letter-spacing: -0.04em;
    font-weight: 700;
    margin: 1.5rem 0 1.5rem;
}

.v2-hero__lede {
    font-size: clamp(1.1rem, 1.3vw, 1.35rem);
    color: var(--v2-text-dim);
    max-width: 36em;
    margin-bottom: 2.25rem;
    line-height: 1.5;
}

.v2-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.v2-hero__trustline {
    margin-top: 2.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    color: var(--v2-text-dim);
    font-size: .85rem;
    font-family: var(--v2-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.v2-hero__trustline .sep { opacity: .35; }

/* ---- Terminal card (right side of hero) ---- */

.v2-terminal {
    position: relative;
    background: linear-gradient(180deg, #151A38 0%, #0E1230 100%);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius-lg);
    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.06);
    padding: 0;
    overflow: hidden;
    min-height: 420px;
}

.v2-terminal__chrome {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--v2-line);
    background: rgba(0,0,0,.2);
}
.v2-terminal__dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: #3a3f5c;
}
.v2-terminal__dot--red    { background: #FF5F57; }
.v2-terminal__dot--yellow { background: #FEBC2E; }
.v2-terminal__dot--green  { background: #28C840; }
.v2-terminal__title {
    margin-left: .75rem;
    font-family: var(--v2-mono);
    font-size: .78rem;
    color: var(--v2-text-dim);
}

.v2-terminal__body {
    padding: 1.5rem;
    font-family: var(--v2-mono);
    font-size: .92rem;
    line-height: 1.75;
    color: var(--v2-text-invert);
}

.v2-terminal__line { display: flex; gap: .6rem; }
.v2-terminal__prompt { color: var(--v2-accent); flex-shrink: 0; }
.v2-terminal__muted  { color: var(--v2-text-dim); }
.v2-terminal__hl     { color: var(--v2-accent-2); }
.v2-terminal__ok     { color: var(--v2-success); }

.v2-terminal__cursor {
    display: inline-block;
    width: .55em;
    height: 1.1em;
    background: var(--v2-accent);
    vertical-align: text-bottom;
    animation: v2-blink 1.05s steps(1) infinite;
    margin-left: .1em;
}
@keyframes v2-blink { 50% { opacity: 0; } }

.v2-terminal__divider {
    height: 1px;
    background: var(--v2-line);
    margin: 1rem 0;
}

.v2-terminal__price-row {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-top: .5rem;
}
.v2-terminal__price {
    font-family: var(--v2-font);
    font-size: 3.4rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #fff;
}
.v2-terminal__price-unit {
    font-family: var(--v2-mono);
    font-size: .85rem;
    color: var(--v2-text-dim);
}

.v2-terminal__cta {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Hero watermark — flame-R mark as monumental brand anchor.
   Positioned to bleed off the right edge, sitting behind the terminal.
   The terminal becomes the "deploy console" inside the glow of the mark. */
.v2-hero__mark {
    position: absolute;
    right: -14%;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    width: 720px;
    max-width: 75vw;
    height: auto;
    opacity: .12;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 60px rgba(138,146,230,.35));
}

/* Small flame-R mark inside terminal chrome — replaces a generic icon
   with a branded one at the product-level detail scale */
.v2-terminal__mark {
    width: 16px;
    height: 16px;
    margin-left: .5rem;
    opacity: .75;
    flex-shrink: 0;
}

/* Subtle gradient R in the corner of the final CTA — mirrors hero */
.v2-cta__mark {
    position: absolute;
    left: -60px;
    bottom: -80px;
    width: 320px;
    height: auto;
    opacity: .09;
    transform: rotate(12deg);
    pointer-events: none;
    z-index: 0;
}

/* Hero status badge — lives inline inside `.v2-terminal__cta` as a sibling of
   the CTA button. Flex alignment centers it vertically with the button. */
.v2-status-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .4rem .7rem;
    border-radius: 999px;
    background: var(--v2-ink-3);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-invert);
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.v2-status-chip__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--v2-success);
    box-shadow: 0 0 10px var(--v2-success);
    animation: v2-pulse 2s ease-in-out infinite;
}
@keyframes v2-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.3); }
}

/* ============================================================
   Live ticker strip
   ============================================================ */

.v2-ticker {
    background: var(--v2-ink-2);
    border-top: 1px solid var(--v2-line);
    border-bottom: 1px solid var(--v2-line);
    color: var(--v2-text-invert);
    padding: 1rem 0;
    overflow: hidden;
    position: relative;
    z-index: 3;
    margin-top: -3rem;   /* overlap hero bottom fade */
}
.v2-ticker__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.v2-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--v2-mono);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-ticker__item strong {
    color: var(--v2-text-invert);
    font-weight: 600;
}
.v2-ticker__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--v2-success);
    box-shadow: 0 0 8px var(--v2-success);
}

/* ============================================================
   Product bento grid
   ============================================================ */

.v2-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
}
.v2-bento__card {
    position: relative;
    grid-column: span 6;
    padding: 2.25rem;
    border-radius: var(--v2-radius-lg);
    background: #fff;
    border: 1px solid var(--v2-paper-line);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.v2-bento__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--v2-shadow-lg);
    border-color: transparent;
    text-decoration: none;
    color: inherit;
}
.v2-bento__card--feature {
    grid-column: span 7;
    min-height: 380px;
    background: var(--v2-ink);
    color: var(--v2-text-invert);
    border-color: transparent;
}
.v2-bento__card--feature-alt {
    grid-column: span 5;
    min-height: 380px;
    background:
        radial-gradient(circle at 20% 10%, rgba(106,242,229,.18), transparent 55%),
        radial-gradient(circle at 90% 90%, rgba(138,146,230,.18), transparent 55%),
        #14193B;
    color: var(--v2-text-invert);
    border-color: transparent;
}
.v2-bento__card--half   { grid-column: span 6; min-height: 240px; }

.v2-bento__card-label {
    font-family: var(--v2-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--v2-primary);
    margin-bottom: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.v2-bento__card--feature .v2-bento__card-label,
.v2-bento__card--feature-alt .v2-bento__card-label { color: var(--v2-accent); }

.v2-bento__card-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 .6rem;
}
.v2-bento__card--feature .v2-bento__card-title,
.v2-bento__card--feature-alt .v2-bento__card-title {
    font-size: 2.1rem;
}

.v2-bento__card-copy {
    color: var(--v2-text-muted);
    font-size: .98rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
    max-width: 38em;
}
.v2-bento__card--feature .v2-bento__card-copy,
.v2-bento__card--feature-alt .v2-bento__card-copy { color: var(--v2-text-dim); }

.v2-bento__card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.v2-bento__link {
    font-family: var(--v2-mono);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--v2-primary);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
}
.v2-bento__card--feature .v2-bento__link,
.v2-bento__card--feature-alt .v2-bento__link { color: var(--v2-accent); }
.v2-bento__link:hover { text-decoration: none; gap: .7rem; }
.v2-bento__card:hover .v2-bento__link { gap: .7rem; }

/* Game logo mini-marquee inside featured GS card */
.v2-bento__logos {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    overflow: hidden;
    padding: .25rem 0;
}
.v2-bento__logos img {
    width: 48px; height: 48px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    opacity: .95;
    border: 1px solid var(--v2-line-2);
}

/* Dedicated Server "spec sheet" inside DS card */
.v2-specsheet {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem 1.5rem;
    font-family: var(--v2-mono);
    font-size: .82rem;
}
.v2-specsheet__row {
    display: flex; justify-content: space-between;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--v2-line);
}
.v2-specsheet__label { color: var(--v2-text-dim); }
.v2-specsheet__value { color: var(--v2-text-invert); font-weight: 500; }

/* ============================================================
   Metrics strip
   ============================================================ */

.v2-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 3rem 2.5rem;
    border-radius: var(--v2-radius-lg);
    background:
        radial-gradient(circle at 0% 0%, rgba(114,124,245,.08), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(106,242,229,.08), transparent 50%),
        #fff;
    border: 1px solid var(--v2-paper-line);
}
.v2-metrics__item { text-align: center; }
.v2-metrics__value {
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    background: var(--v2-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: .35rem;
}
.v2-metrics__label {
    font-family: var(--v2-mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--v2-text-muted);
}

/* ============================================================
   Ad-sitelink alignment: "What brought you here?"
   ============================================================ */

.v2-entries {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.v2-entry {
    position: relative;
    padding: 1.75rem 1.5rem;
    border-radius: var(--v2-radius);
    background: var(--v2-paper-2);
    border: 1px solid var(--v2-paper-line);
    transition: all .2s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.v2-entry:hover {
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-color: var(--v2-primary);
    box-shadow: 0 16px 40px rgba(114,124,245,.15);
    transform: translateY(-3px);
}
.v2-entry__num {
    font-family: var(--v2-mono);
    font-size: .72rem;
    color: var(--v2-text-muted);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .6rem;
}
.v2-entry__title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: .35rem;
}
.v2-entry__copy {
    font-size: .9rem;
    color: var(--v2-text-muted);
    line-height: 1.45;
    margin-bottom: 0;
}
.v2-entry__arrow {
    display: inline-block;
    margin-top: .75rem;
    font-family: var(--v2-mono);
    font-size: .85rem;
    color: var(--v2-primary);
    letter-spacing: .08em;
}

/* ============================================================
   Pricing calculator (modernized shell)
   ============================================================ */

.v2-pricing-shell {
    background: #fff;
    border-radius: var(--v2-radius-xl);
    border: 1px solid var(--v2-paper-line);
    box-shadow: var(--v2-shadow-lg);
    overflow: hidden;
}

.v2-pricing-tabs {
    display: flex;
    gap: .5rem;
    padding: 1rem 1rem 0;
    overflow-x: auto;
    overflow-y: hidden; /* without this, overflow-x: auto also reserves a
                           vertical track when content is ~1px taller than
                           the container (see double-scrollbar report). */
    scrollbar-width: thin;
    border-bottom: 1px solid var(--v2-paper-line);
}
.v2-pricing-tabs__tab {
    flex: 0 0 auto;
    padding: .75rem 1rem;
    border-radius: var(--v2-radius-sm) var(--v2-radius-sm) 0 0;
    cursor: pointer;
    display: flex; align-items: center; gap: .6rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--v2-text-muted);
    transition: color .2s, background .2s;
    border: 1px solid transparent;
    border-bottom: 0;
    background: transparent;
}
.v2-pricing-tabs__tab img {
    width: 30px; height: 30px; border-radius: 6px; object-fit: cover;
}
.v2-pricing-tabs__tab:hover { color: var(--v2-text); background: var(--v2-paper-2); }
.v2-pricing-tabs__tab.is-active {
    color: var(--v2-text);
    background: #fff;
    border-color: var(--v2-paper-line);
    position: relative;
}
.v2-pricing-tabs__tab.is-active::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--v2-grad);
}

.v2-pricing-body {
    padding: 2.5rem;
}

.v2-pricing-slider-card {
    background: var(--v2-paper-2);
    border-radius: var(--v2-radius);
    padding: 2rem;
    text-align: center;
}

/* ============================================================
   Technology rail (marquee)
   ============================================================ */

.v2-marquee {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.v2-marquee__track {
    display: flex;
    gap: 3.5rem;
    width: max-content;
    animation: v2-marquee 40s linear infinite;
    align-items: center;
}
.v2-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--v2-mono);
    font-size: .9rem;
    color: var(--v2-text-dim);
    white-space: nowrap;
}
.v2-marquee__item img { width: 32px; height: 32px; filter: brightness(0) invert(1); opacity: .75; }
.v2-marquee__item .mdi { font-size: 28px; color: var(--v2-text-dim); opacity: .85; }
.v2-marquee:hover .v2-marquee__track { animation-play-state: paused; }
@keyframes v2-marquee { to { transform: translateX(-50%); } }

/* ============================================================
   Pillars (tech value props)
   ============================================================ */

.v2-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}
.v2-pillar {
    padding: 1.75rem 1.5rem;
    border-radius: var(--v2-radius);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--v2-line-2);
}
.v2-pillar__num {
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    color: var(--v2-accent);
    margin-bottom: .75rem;
}
.v2-pillar__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    margin: 0 0 .5rem;
}
.v2-pillar__copy {
    color: var(--v2-text-dim);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   Process timeline
   ============================================================ */

.v2-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}
.v2-timeline::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 36px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--v2-primary) 20%, var(--v2-accent-2) 50%, var(--v2-accent-3) 80%, transparent 100%);
    opacity: .5;
    z-index: 0;
}
.v2-timeline__step {
    text-align: center;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
}
.v2-timeline__node {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--v2-primary);
    font-family: var(--v2-mono);
    font-weight: 600;
    font-size: 1.25rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--v2-primary);
    box-shadow: 0 0 0 8px #fff, 0 10px 30px rgba(114,124,245,.15);
}
.v2-timeline__title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 .4rem;
}
.v2-timeline__copy {
    font-size: .95rem;
    color: var(--v2-text-muted);
    line-height: 1.5;
    margin: 0;
    max-width: 22em;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Competitor table
   ============================================================ */

.v2-compare {
    background: #fff;
    border-radius: var(--v2-radius-xl);
    border: 1px solid var(--v2-paper-line);
    /* Was overflow: hidden — needed to flip to visible so the
       "RECOMMENDED" ribbon below can extend above the cell into the
       table's top border. The rounded corners are now preserved by
       moving the radius + overflow:hidden onto the inner <table>
       (with border-collapse: separate so the radius actually clips). */
    overflow: visible;
    box-shadow: var(--v2-shadow);
}
.v2-compare table {
    width: 100%;
    /* border-collapse: separate so per-corner border-radius on the
       extreme cells (rules below) actually rounds the corner thead/tbody
       backgrounds. We can't use overflow:hidden + border-radius on the
       table itself because that clips the absolutely-positioned
       RECOMMENDED ribbon that needs to extend above the top edge. */
    border-collapse: separate;
    border-spacing: 0;
}
.v2-compare thead tr:first-child > *:first-child {
    border-top-left-radius: var(--v2-radius-xl);
}
.v2-compare thead tr:first-child > *:last-child {
    border-top-right-radius: var(--v2-radius-xl);
}
.v2-compare tbody tr:last-child > *:first-child {
    border-bottom-left-radius: var(--v2-radius-xl);
}
.v2-compare tbody tr:last-child > *:last-child {
    border-bottom-right-radius: var(--v2-radius-xl);
}
.v2-compare th,
.v2-compare td {
    padding: 1.25rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--v2-paper-line);
}
.v2-compare thead th {
    font-family: var(--v2-mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--v2-text-muted);
    background: var(--v2-paper-2);
    font-weight: 500;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.v2-compare tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--v2-text);
    font-size: .98rem;
}
.v2-compare td img { width: 22px; height: 22px; }
.v2-compare .v2-compare__self {
    background: linear-gradient(180deg, rgba(114,124,245,.06) 0%, rgba(106,242,229,.04) 100%);
    position: relative;
}
.v2-compare thead .v2-compare__self {
    /* Extra top padding so the column header text has clearance below
       the now-overhanging RECOMMENDED ribbon below. Without this the
       ribbon would print over the th's mono-cased label. */
    padding-top: 2.25rem;
    position: relative;
}
.v2-compare thead .v2-compare__self::before {
    content: "RECOMMENDED";
    position: absolute;
    /* Negative top pulls the ribbon up so half of it sits above the
       cell, intersecting the table's top border line — matches the
       design intent we drifted away from when overflow:hidden was
       on the outer wrapper. z-index: 5 keeps the ribbon above any
       hover effects on cells. */
    top: -.65rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-family: var(--v2-mono);
    font-size: .62rem;
    letter-spacing: .14em;
    color: var(--v2-primary);
    background: #fff;
    padding: .25rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--v2-paper-line);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.v2-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(49,217,165,.12);
    color: var(--v2-success);
    font-weight: 700;
}
.v2-check::before { content: "✓"; }
.v2-dash {
    display: inline-block;
    width: 14px; height: 2px;
    background: var(--v2-paper-line);
    vertical-align: middle;
}

/* ============================================================
   Final CTA banner
   ============================================================ */

.v2-cta {
    position: relative;
    border-radius: var(--v2-radius-xl);
    background: var(--v2-ink-2);
    padding: 5rem 3rem;
    overflow: hidden;
    color: var(--v2-text-invert);
    text-align: center;
    isolation: isolate;
}
.v2-cta::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 0% 100%, rgba(106,242,229,.25), transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(138,146,230,.25), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(151,108,230,.22), transparent 60%);
    z-index: -1;
}
.v2-cta__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 1rem;
    font-weight: 700;
}
.v2-cta__lede {
    color: var(--v2-text-dim);
    font-size: 1.1rem;
    max-width: 32em;
    margin: 0 auto 2rem;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 991.98px) {
    .v2-section { padding: 5rem 0; }
    .v2-hero { padding: 6rem 0 5rem; }
    .v2-bento__card,
    .v2-bento__card--feature,
    .v2-bento__card--feature-alt,
    .v2-bento__card--half {
        grid-column: 1 / -1;
        min-height: 260px;
    }
    .v2-metrics { grid-template-columns: repeat(2, 1fr); padding: 2rem 1.5rem; }
    .v2-entries { grid-template-columns: repeat(2, 1fr); }
    .v2-pillars  { grid-template-columns: repeat(2, 1fr); }
    .v2-timeline { grid-template-columns: 1fr; gap: 2.5rem; }
    .v2-timeline::before { display: none; }
    .v2-pricing-body { padding: 1.5rem; }
}

@media (max-width: 575.98px) {
    .v2-hero { padding: 4rem 0 3rem; }
    .v2-metrics { grid-template-columns: 1fr; }
    .v2-entries { grid-template-columns: 1fr; }
    .v2-pillars  { grid-template-columns: 1fr; }
    .v2-hero__ctas .v2-btn { flex: 1 1 auto; justify-content: center; }
    .v2-cta { padding: 3rem 1.5rem; }
}

/* =================================================================
   ============================================================
   MODE: BLENDED (v3)
   Light sections get brand-stylized treatment so they feel part of
   the same universe as the dark hero — soft radial gradient washes,
   faint blueprint grid, ghosted brand mark, gradient-edged cards.
   ============================================================
   ================================================================= */

.v2-static.v2-mode-blended {
    background: #F6F7FB;  /* Cool off-white — less sterile than pure white */
}

/* Every light section gets a subtle gradient wash + faint grid overlay */
.v2-mode-blended .v2-section:not(.v2-section--dark):not(.v2-hero) {
    position: relative;
    isolation: isolate;
}
.v2-mode-blended .v2-section:not(.v2-section--dark):not(.v2-hero)::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(114,124,245,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(114,124,245,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 30%, transparent 85%);
    z-index: -1;
    pointer-events: none;
}

/* Each light section also gets a positioned soft brand-color wash */
.v2-mode-blended .v2-section:not(.v2-section--dark):not(.v2-hero)::after {
    content: "";
    position: absolute;
    top: 0; right: -10%;
    width: 50%; height: 100%;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(106,242,229,.10), transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(151,108,230,.08), transparent 55%);
    z-index: -1;
    pointer-events: none;
    filter: blur(30px);
}

/* Alternate the wash side every other section for visual rhythm */
.v2-mode-blended .v2-section:not(.v2-section--dark):not(.v2-hero):nth-of-type(even)::after {
    right: auto;
    left: -10%;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(138,146,230,.10), transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(106,242,229,.08), transparent 55%);
}

/* Bento cards (light variant) — gradient-tinted border on hover */
.v2-mode-blended .v2-bento__card:not(.v2-bento__card--feature):not(.v2-bento__card--feature-alt) {
    background: #FFFFFF;
    border-color: rgba(114,124,245,.12);
    box-shadow: 0 1px 2px rgba(10,14,31,.03), 0 6px 20px rgba(114,124,245,.04);
}
.v2-mode-blended .v2-bento__card:not(.v2-bento__card--feature):not(.v2-bento__card--feature-alt):hover {
    border-color: transparent;
    box-shadow:
        0 0 0 1px rgba(114,124,245,.35),
        0 16px 40px rgba(114,124,245,.12),
        0 8px 20px rgba(106,242,229,.08);
}

/* Metrics band gets a gradient border ring */
.v2-mode-blended .v2-metrics {
    background: #FFFFFF;
    position: relative;
    border: 1px solid transparent;
    background-clip: padding-box;
}
.v2-mode-blended .v2-metrics::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--v2-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: .4;
    pointer-events: none;
}

/* Ad-sitelink entries — soft gradient wash background + gradient hover ring */
.v2-mode-blended .v2-entry {
    background: #FFFFFF;
    border-color: rgba(114,124,245,.12);
    box-shadow: 0 1px 2px rgba(10,14,31,.03);
}
.v2-mode-blended .v2-entry:hover {
    border-color: transparent;
    box-shadow:
        0 0 0 1px rgba(114,124,245,.4),
        0 20px 50px rgba(106,242,229,.15),
        0 10px 30px rgba(151,108,230,.12);
}

/* Pricing calculator — this was the flattest part of v2. Major glow-up:
   gradient-bordered shell, radial wash on the slider card, sticker pop on price */
.v2-mode-blended .v2-pricing-shell {
    position: relative;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow:
        0 1px 2px rgba(10,14,31,.03),
        0 30px 80px rgba(114,124,245,.08),
        0 10px 30px rgba(106,242,229,.06);
}
.v2-mode-blended .v2-pricing-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--v2-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: .55;
    pointer-events: none;
}
.v2-mode-blended .v2-pricing-shell > * { position: relative; z-index: 1; }

.v2-mode-blended .v2-pricing-body {
    background:
        radial-gradient(circle at 10% 0%, rgba(106,242,229,.06), transparent 50%),
        radial-gradient(circle at 90% 100%, rgba(151,108,230,.06), transparent 55%),
        transparent;
}

.v2-mode-blended .v2-pricing-slider-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F7FB 100%);
    border: 1px solid rgba(114,124,245,.15);
    box-shadow:
        0 1px 2px rgba(10,14,31,.04),
        inset 0 1px 0 rgba(255,255,255,1);
    position: relative;
    overflow: hidden;
}
.v2-mode-blended .v2-pricing-slider-card::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: var(--v2-grad);
    opacity: .08;
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
}

/* Timeline nodes — add gradient glow ring on light */
.v2-mode-blended .v2-timeline__node {
    box-shadow:
        0 0 0 8px #F6F7FB,
        0 0 0 9px rgba(114,124,245,.2),
        0 16px 40px rgba(114,124,245,.18),
        0 8px 20px rgba(106,242,229,.1);
}

/* Competitor comparison — elevate the Revelation column */
.v2-mode-blended .v2-compare {
    background: #FFFFFF;
    box-shadow:
        0 1px 2px rgba(10,14,31,.03),
        0 24px 60px rgba(114,124,245,.08);
}
.v2-mode-blended .v2-compare .v2-compare__self {
    background:
        linear-gradient(180deg, rgba(114,124,245,.08) 0%, rgba(106,242,229,.05) 100%);
    box-shadow: inset 0 0 0 1px rgba(114,124,245,.15);
}

/* Ghosted brand mark — float in each major light section at low opacity */
.v2-mode-blended .v2-section:not(.v2-section--dark):not(.v2-hero) .container {
    position: relative;
}
.v2-mode-blended .v2-section-mark {
    position: absolute;
    width: 380px;
    height: auto;
    opacity: .035;
    pointer-events: none;
    z-index: 0;
    filter: saturate(1.2);
}
.v2-mode-blended .v2-section-mark--tr { top: -40px; right: -100px; transform: rotate(-8deg); }
.v2-mode-blended .v2-section-mark--bl { bottom: -60px; left: -120px; transform: rotate(12deg); }

/* =================================================================
   ============================================================
   MODE: DARK (v4)
   Everything dark. Brand becomes the primary visual surface.
   Varying ink tones (#0A0E1F / #111631 / #1A2043) create depth.
   Gradients and glows are the texture.
   ============================================================
   ================================================================= */

.v2-static.v2-mode-dark {
    background: var(--v2-ink);
    color: var(--v2-text-invert);
}

/* theme.css sets `h1-h6 { color: var(--dark) }` at high specificity, which beats
   inheritance from `.v2-hero`, `.v2-section--dark`, and `.v2-mode-dark` wrappers.
   Force bright headings on every dark surface so titles actually read as light text.
   Applies to ALL dark contexts across v2/v3/v4. */
.v2-hero h1,          .v2-hero h2,          .v2-hero h3,
.v2-hero h4,          .v2-hero h5,          .v2-hero h6,
.v2-section--dark h1, .v2-section--dark h2, .v2-section--dark h3,
.v2-section--dark h4, .v2-section--dark h5, .v2-section--dark h6,
.v2-mode-dark h1,     .v2-mode-dark h2,     .v2-mode-dark h3,
.v2-mode-dark h4,     .v2-mode-dark h5,     .v2-mode-dark h6,
.v2-bento__card--feature .v2-bento__card-title,
.v2-bento__card--feature-alt .v2-bento__card-title,
.v2-cta .v2-cta__title {
    color: var(--v2-text-invert);
}

/* Keep gradient-text spans transparent (the -webkit-text-fill-color trick) even
   when they appear inside the force-bright rules above. */
.v2-grad-text { color: transparent; }

/* In v4 the hero bottom shouldn't fade into a white page below — kill the fade. */
.v2-mode-dark .v2-hero::after { display: none; }

/* Every section gets the dark treatment */
.v2-mode-dark .v2-section {
    background: var(--v2-ink);
    color: var(--v2-text-invert);
}

/* Subtle alternating darkness for rhythm — every other section a shade elevated */
.v2-mode-dark .v2-section:nth-of-type(even):not(.v2-hero):not(.v2-section--dark) {
    background: linear-gradient(180deg, var(--v2-ink) 0%, #0E1226 100%);
}

/* Section-wide blueprint grid with aurora washes at the edges */
.v2-mode-dark .v2-section:not(.v2-hero) {
    position: relative;
    isolation: isolate;
}
.v2-mode-dark .v2-section:not(.v2-hero)::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 85% 65% at 50% 50%, black 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 50%, black 30%, transparent 85%);
    z-index: -1;
    pointer-events: none;
}
.v2-mode-dark .v2-section:not(.v2-hero)::after {
    content: "";
    position: absolute;
    top: -10%; right: -10%;
    width: 60%; height: 120%;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(106,242,229,.12), transparent 55%),
        radial-gradient(ellipse at 30% 70%, rgba(151,108,230,.10), transparent 55%);
    z-index: -1;
    pointer-events: none;
    filter: blur(50px);
}
.v2-mode-dark .v2-section:not(.v2-hero):nth-of-type(even)::after {
    right: auto; left: -10%;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(138,146,230,.12), transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(106,242,229,.10), transparent 55%);
}

/* Typography flips: section headings become bright */
.v2-mode-dark .v2-display,
.v2-mode-dark .v2-display--sm { color: var(--v2-text-invert); }
.v2-mode-dark .v2-lede { color: var(--v2-text-dim); }
.v2-mode-dark .text-muted { color: var(--v2-text-dim) !important; }

/* Eyebrows get the dark-section treatment by default */
.v2-mode-dark .v2-eyebrow {
    color: var(--v2-accent);
    border-color: rgba(106,242,229,.35);
    background: rgba(106,242,229,.08);
}

/* Bento: all cards become elevated dark surfaces with gradient rim on hover */
.v2-mode-dark .v2-bento__card {
    background: linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border-color: var(--v2-line-2);
    color: var(--v2-text-invert);
}
.v2-mode-dark .v2-bento__card:hover {
    border-color: transparent;
    box-shadow:
        0 0 0 1px rgba(106,242,229,.4),
        0 24px 60px rgba(10,14,31,.6),
        0 10px 30px rgba(106,242,229,.15);
    color: var(--v2-text-invert);
}
.v2-mode-dark .v2-bento__card-label { color: var(--v2-accent); }
.v2-mode-dark .v2-bento__card-copy { color: var(--v2-text-dim); }
.v2-mode-dark .v2-bento__link { color: var(--v2-accent); }
.v2-mode-dark .v2-specsheet__row { border-bottom-color: var(--v2-line-2); }
.v2-mode-dark .v2-specsheet__label { color: var(--v2-text-dim); }

/* Metrics band — dark with gradient rim ring */
.v2-mode-dark .v2-metrics {
    background: linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border-color: transparent;
    position: relative;
}
.v2-mode-dark .v2-metrics::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--v2-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: .55;
    pointer-events: none;
}
.v2-mode-dark .v2-metrics__label { color: var(--v2-text-dim); }

/* Ad-sitelink entries — dark cards with glowing hover */
.v2-mode-dark .v2-entry {
    background: linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border-color: var(--v2-line-2);
    color: var(--v2-text-invert);
}
.v2-mode-dark .v2-entry:hover {
    border-color: transparent;
    background: linear-gradient(180deg, #1A2043 0%, #151A38 100%);
    color: var(--v2-text-invert);
    box-shadow:
        0 0 0 1px rgba(106,242,229,.5),
        0 24px 60px rgba(106,242,229,.15),
        0 10px 30px rgba(151,108,230,.15);
}
.v2-mode-dark .v2-entry__num { color: var(--v2-text-dim); }
.v2-mode-dark .v2-entry__copy { color: var(--v2-text-dim); }
.v2-mode-dark .v2-entry__arrow { color: var(--v2-accent); }

/* Pricing calculator — full terminal/control-panel vibe */
.v2-mode-dark .v2-pricing-shell {
    background: linear-gradient(180deg, #151A38 0%, #0E1230 100%);
    border-color: var(--v2-line-2);
    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.05);
    position: relative;
}
.v2-mode-dark .v2-pricing-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--v2-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: .35;
    pointer-events: none;
}
.v2-mode-dark .v2-pricing-shell > * { position: relative; z-index: 1; }

.v2-mode-dark .v2-pricing-tabs {
    border-bottom-color: var(--v2-line);
    background: rgba(0,0,0,.15);
}
.v2-mode-dark .v2-pricing-tabs__tab { color: var(--v2-text-dim); }
.v2-mode-dark .v2-pricing-tabs__tab:hover { color: var(--v2-text-invert); background: rgba(255,255,255,.04); }
.v2-mode-dark .v2-pricing-tabs__tab.is-active {
    color: var(--v2-text-invert);
    background: var(--v2-ink-3);
    border-color: var(--v2-line-2);
}

.v2-mode-dark .v2-pricing-slider-card {
    background: linear-gradient(180deg, var(--v2-ink-3) 0%, #151A38 100%);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-invert);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 8px 24px rgba(0,0,0,.4);
    position: relative;
    overflow: hidden;
}
.v2-mode-dark .v2-pricing-slider-card::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: var(--v2-grad);
    opacity: .18;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

/* ion-rangeslider visual polish for dark mode */
.v2-mode-dark .irs--flat .irs-line,
.v2-mode-dark .irs--flat .irs-bar {
    background-color: var(--v2-line-2);
}
.v2-mode-dark .irs--flat .irs-bar {
    background: var(--v2-grad);
}
.v2-mode-dark .irs--flat .irs-handle > i:first-child {
    background-color: var(--v2-accent);
}
.v2-mode-dark .irs--flat .irs-grid-text {
    color: var(--v2-text-dim);
}

/* Timeline nodes — glowing gradient rim on dark */
.v2-mode-dark .v2-timeline::before {
    background: linear-gradient(90deg, transparent 0%, var(--v2-teal) 20%, var(--v2-lavender) 50%, var(--v2-purple) 80%, transparent 100%);
    opacity: .6;
}
.v2-mode-dark .v2-timeline__node {
    background: var(--v2-ink-3);
    color: var(--v2-accent);
    border-color: var(--v2-accent);
    box-shadow:
        0 0 0 8px var(--v2-ink),
        0 0 0 10px rgba(106,242,229,.25),
        0 10px 40px rgba(106,242,229,.3);
}
.v2-mode-dark .v2-timeline__title { color: var(--v2-text-invert); }
.v2-mode-dark .v2-timeline__copy { color: var(--v2-text-dim); }

/* Competitor comparison — dark with glowing self column */
.v2-mode-dark .v2-compare {
    background: linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border: 1px solid var(--v2-line-2);
    box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.v2-mode-dark .v2-compare th,
.v2-mode-dark .v2-compare td { border-bottom-color: var(--v2-line); }
.v2-mode-dark .v2-compare thead th {
    background: rgba(0,0,0,.2);
    color: var(--v2-text-dim);
}
.v2-mode-dark .v2-compare tbody th { color: var(--v2-text-invert); }
.v2-mode-dark .v2-compare .v2-compare__self {
    background:
        linear-gradient(180deg, rgba(106,242,229,.08) 0%, rgba(151,108,230,.06) 100%);
    box-shadow: inset 0 0 0 1px rgba(106,242,229,.3);
}
.v2-mode-dark .v2-compare thead .v2-compare__self::before {
    background: var(--v2-ink-3);
    color: var(--v2-accent);
    border-color: var(--v2-accent);
}
.v2-mode-dark .v2-check {
    background: rgba(49,217,165,.18);
    color: var(--v2-success);
}
.v2-mode-dark .v2-dash { background: var(--v2-line-2); }

/* Ghost brand mark surfaces — shared with blended mode */
.v2-mode-dark .v2-section:not(.v2-hero) .container {
    position: relative;
}
.v2-mode-dark .v2-section-mark {
    position: absolute;
    width: 420px;
    height: auto;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
    filter: saturate(1.3);
}
.v2-mode-dark .v2-section-mark--tr { top: -40px; right: -120px; transform: rotate(-8deg); }
.v2-mode-dark .v2-section-mark--bl { bottom: -60px; left: -120px; transform: rotate(12deg); }

/* Final CTA: already dark in v2, amplify glow slightly for v4 context */
.v2-mode-dark .v2-cta {
    background: linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

/* Ghost brand mark container fix — ensure section content sits above ::before/::after */
.v2-mode-blended .v2-section > .container,
.v2-mode-dark .v2-section > .container { z-index: 1; }


/* =================================================================
   ============================================================
   MODE: V5 — Full dark cohesion, continuous gradient flow,
   floating content, rebuilt nav + footer.
   Composed on top of .v2-mode-dark: views apply BOTH classes.
   ============================================================
   ================================================================= */

/* Kill per-section auroras that break visual flow at seams. */
.v2-mode-v5 .v2-section::after,
.v2-mode-v5 .v2-section::before { display: none; }
.v2-mode-v5 .v2-section {
    background: transparent !important;
    /* In v5 the page-level wrapper owns the aurora + grid — sections no longer
       need overflow:hidden, and clipping it kills glow/shadow tails from
       elements like the pricing shell as they cross into the next section. */
    overflow: visible !important;
}

/* The whole wrapper gets a single continuous aurora backdrop that spans the
   full scroll length — gradients distributed at different Y bands so the
   color wash drifts organically from top to bottom as you scroll. */
.v2-mode-v5 {
    position: relative;
    isolation: isolate;
    background: var(--v2-ink);
}
.v2-mode-v5::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 30% at 15% 4%,   rgba(151,108,230,.25), transparent 70%),
        radial-gradient(ellipse 50% 25% at 85% 18%,  rgba(106,242,229,.22), transparent 70%),
        radial-gradient(ellipse 55% 22% at 20% 34%,  rgba(138,146,230,.20), transparent 70%),
        radial-gradient(ellipse 45% 20% at 80% 48%,  rgba(151,108,230,.20), transparent 70%),
        radial-gradient(ellipse 60% 25% at 15% 64%,  rgba(106,242,229,.20), transparent 70%),
        radial-gradient(ellipse 50% 22% at 85% 78%,  rgba(138,146,230,.22), transparent 70%),
        radial-gradient(ellipse 65% 28% at 30% 94%,  rgba(151,108,230,.28), transparent 70%);
    z-index: -2;
    pointer-events: none;
    filter: blur(60px);
}

/* Single page-level blueprint grid overlay, fading at the edges.
   Replaces the per-section grids so the structure feels continuous. */
.v2-mode-v5::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
    z-index: -1;
    pointer-events: none;
}

/* Kill the v4 hero grid (we're using a page-level one now) */
.v2-mode-v5 .v2-hero__grid::before { display: none; }
/* Kill the v4 hero fade (already killed in dark mode, belt-and-suspenders) */
.v2-mode-v5 .v2-hero::after { display: none; }

/* Hero stays dark but transparent so the page-level aurora bleeds through */
.v2-mode-v5 .v2-hero { background: transparent; }

/* Ticker strip — less opaque, so the flow behind is hinted */
.v2-mode-v5 .v2-ticker {
    background: rgba(17, 22, 49, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ------------------------------------------------------------
   Floating brand elements — content that drifts in sidebar voids
   ------------------------------------------------------------ */

/* Wrapper for any floating element — absolute-positioned inside its parent */
.v2-float {
    position: absolute;
    z-index: 2;
    pointer-events: auto;
}

/* Floating testimonial card — sits at hero level, partly behind terminal */
.v2-float-quote {
    max-width: 320px;
    padding: 1.25rem 1.5rem;
    background: rgba(20, 25, 59, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
    color: var(--v2-text-invert);
    transition: transform .25s ease, box-shadow .25s ease;
}
.v2-float-quote:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 60px rgba(106, 242, 229, 0.12), 0 16px 50px rgba(0, 0, 0, 0.5);
}
.v2-float-quote__stars {
    color: var(--v2-accent);
    font-size: .8rem;
    letter-spacing: .1em;
    margin-bottom: .5rem;
}
.v2-float-quote__text {
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 .85rem;
    color: var(--v2-text-invert);
    font-style: italic;
}
.v2-float-quote__attr {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-float-quote__avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--v2-grad);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #0A0E1F;
    font-weight: 700;
    font-size: .72rem;
    font-family: var(--v2-font);
}

/* Floating status/stat chip — small pill with pulsing dot */
.v2-float-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-text-invert);
    background: rgba(17, 22, 49, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--v2-line-2);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    white-space: nowrap;
}
.v2-float-chip__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--v2-success);
    box-shadow: 0 0 10px var(--v2-success);
    animation: v2-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.v2-float-chip__dot--teal {
    background: var(--v2-accent);
    box-shadow: 0 0 10px var(--v2-accent);
}
.v2-float-chip__dot--purple {
    background: var(--v2-purple);
    box-shadow: 0 0 10px var(--v2-purple);
}
.v2-float-chip--gradient {
    border-color: transparent;
    background:
        linear-gradient(rgba(17, 22, 49, 0.75), rgba(17, 22, 49, 0.75)) padding-box,
        var(--v2-grad) border-box;
    border: 1px solid transparent;
}

/* Floating larger stat card */
.v2-float-stat {
    padding: 1rem 1.25rem;
    background: rgba(20, 25, 59, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    box-shadow: 0 16px 50px rgba(0,0,0,.5);
    color: var(--v2-text-invert);
    min-width: 180px;
}
.v2-float-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: .35rem;
    background: var(--v2-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.v2-float-stat__label {
    font-family: var(--v2-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}

/* Additional drifting R marks at various positions for depth */
.v2-float-mark {
    position: absolute;
    pointer-events: none;
    opacity: .07;
    filter: saturate(1.3);
    z-index: 0;
}
.v2-float-mark--md { width: 340px; height: auto; opacity: .05; }

/* Hide floating elements on small screens — they'd overlap content awkwardly.
   Exempts `.v2-hero__chipbar .v2-float-chip` (the top-of-hero inline strip)
   because those aren't absolute-positioned and we DO want them visible on
   mobile — they're part of the normal flow hero layout, not overlapping
   floats. The specificity (0,2,0) of the chipbar selector wins over the
   single-class hide rule below, keeping those chips rendered. */
@media (max-width: 991.98px) {
    .v2-float-quote,
    .v2-float-chip,
    .v2-float-stat,
    .v2-float-mark { display: none; }
    /* Inline chipbar chips stay visible AND wrap their own text so the
       gradient chip ("v2.1 · Apr 2026 · ...") doesn't overflow the
       viewport on narrow phones. Specificity (0,2,0) beats the base
       `.v2-float-chip` rules at (0,1,0), which is required because the
       base rules live later in source order and would otherwise win on
       the nowrap/display-inline-flex declarations. */
    .v2-hero__chipbar .v2-float-chip {
        display: inline-flex;
        white-space: normal;
        line-height: 1.25;
        text-align: left;
    }
}

/* ------------------------------------------------------------
   v5 dark chrome: rebuilt nav + footer
   Applied via `_LayoutV2.cshtml` wrapping the body in `.v2-chrome`.
   ------------------------------------------------------------ */

.v2-chrome {
    background: var(--v2-ink);
    min-height: 100vh;
    color: var(--v2-text-invert);
}

/* NAV */
.v2-chrome-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 14, 31, 0.75);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid transparent;
    background-clip: padding-box;
    padding: .85rem 0;
}
.v2-chrome-nav::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(106,242,229,.35) 30%, rgba(151,108,230,.35) 70%, transparent 100%);
    pointer-events: none;
}

.v2-chrome-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.v2-chrome-nav__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}
.v2-chrome-nav__brand:hover { text-decoration: none; }
.v2-chrome-nav__brand-mark {
    width: 32px; height: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(138,146,230,.45));
}
/* Full-logo lockup (mark + "revelation HOSTING" wordmark in one SVG) used
   in the header. Replaces the split layout that used .brand-mark plus the
   .brand-wordmark spans below. Drop-shadow carries the same subtle purple
   glow the mark had on its own. The wordmark classes are retained for
   back-compat with any view that still uses the split layout. */
.v2-chrome-nav__brand-logo {
    height: 36px;
    width: auto;
    max-width: 180px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(138,146,230,.35));
}
@media (max-width: 575.98px) {
    .v2-chrome-nav__brand-logo { height: 30px; max-width: 150px; }
}
.v2-chrome-nav__brand-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.v2-chrome-nav__brand-name {
    font-family: var(--v2-font);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--v2-text-invert);
}
.v2-chrome-nav__brand-suffix {
    font-family: var(--v2-mono);
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--v2-primary);
    margin-top: 2px;
}

.v2-chrome-nav__links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.v2-chrome-nav__links a {
    color: var(--v2-text-dim);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    transition: color .15s ease;
    position: relative;
    padding: .25rem 0;
}
.v2-chrome-nav__links a:hover {
    color: var(--v2-text-invert);
    text-decoration: none;
}
.v2-chrome-nav__links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--v2-grad);
    transition: width .2s ease;
}
.v2-chrome-nav__links a:hover::after { width: 100%; }

/* Dropdown support (for the "Hosting" menu) — dark-styled */
.v2-chrome-nav__dropdown {
    position: relative;
}
.v2-chrome-nav__dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + .8rem);
    /* Hover-bridge. The menu floats .8rem below the li; without a bridge
       element the cursor passes through "dead" space on its way from link
       to menu and the :hover chain breaks mid-traversal. The ::before
       fills that gap with an invisible hover target that's still a DOM
       descendant of the dropdown-menu, so hovering it keeps the parent
       li's :hover active and the menu stays open. */
    left: 0;
    min-width: 240px;
    background: var(--v2-ink-2);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    padding: .5rem;
    z-index: 100;
}
.v2-chrome-nav__dropdown:hover .v2-chrome-nav__dropdown-menu,
.v2-chrome-nav__dropdown:focus-within .v2-chrome-nav__dropdown-menu {
    display: block;
}
.v2-chrome-nav__dropdown-menu::before {
    content: "";
    position: absolute;
    top: -.8rem; /* matches the .8rem gap above */
    left: 0;
    right: 0;
    height: .8rem;
    /* transparent; purely a hover-bridge */
}
.v2-chrome-nav__dropdown-menu a {
    display: block;
    padding: .6rem .85rem;
    border-radius: var(--v2-radius-sm);
    color: var(--v2-text-invert);
    font-size: .92rem;
}
.v2-chrome-nav__dropdown-menu a:hover {
    background: rgba(106,242,229,.08);
    color: var(--v2-accent);
}
.v2-chrome-nav__dropdown-menu a::after { display: none; }

.v2-chrome-nav__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.v2-chrome-nav__signin {
    font-size: .92rem;
    color: var(--v2-text-dim);
    text-decoration: none;
    font-weight: 500;
}
.v2-chrome-nav__signin:hover { color: var(--v2-text-invert); text-decoration: none; }

/* Mobile toggle — simple hamburger */
.v2-chrome-nav__toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--v2-line-2);
    border-radius: 8px;
    padding: .4rem .6rem;
    color: var(--v2-text-invert);
    cursor: pointer;
}
.v2-chrome-nav__toggle:hover {
    border-color: var(--v2-accent);
    color: var(--v2-accent);
}

@media (max-width: 991.98px) {
    .v2-chrome-nav__links,
    .v2-chrome-nav__signin { display: none; }
    .v2-chrome-nav__toggle { display: inline-flex; }

    /* Mobile drawer: when the hamburger toggle adds `.is-open` to the nav,
       the link list slides down as a full-width drawer below the nav bar.
       Absolute-positioned overlay so the page content underneath doesn't
       reflow when the drawer opens — feels like a modern app drawer. */
    .v2-chrome-nav { position: relative; }
    .v2-chrome-nav.is-open .v2-chrome-nav__links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--v2-ink-2);
        border-top: 1px solid var(--v2-line-2);
        padding: .5rem 1.25rem 1.25rem;
        z-index: 100;
        box-shadow: 0 16px 32px rgba(0,0,0,.45);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    .v2-chrome-nav.is-open .v2-chrome-nav__links > li {
        width: 100%;
    }
    .v2-chrome-nav.is-open .v2-chrome-nav__links a {
        display: block;
        padding: .9rem .25rem;
        border-bottom: 1px solid var(--v2-line);
        font-size: 1rem;
    }
    .v2-chrome-nav.is-open .v2-chrome-nav__links a::after { display: none; }
    /* Drawer dropdowns: always-expanded inline list, indented under their
       trigger label. Override the desktop absolute-positioned dropdown
       styles so the menu items flow inline with the rest of the drawer. */
    .v2-chrome-nav.is-open .v2-chrome-nav__dropdown-menu {
        display: block !important;
        position: static !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 0 .25rem 1rem;
        min-width: 0;
    }
    .v2-chrome-nav.is-open .v2-chrome-nav__dropdown-menu::before { display: none; }
    .v2-chrome-nav.is-open .v2-chrome-nav__dropdown-menu a {
        padding: .55rem .25rem;
        font-size: .92rem;
        color: var(--v2-text-dim);
        border-bottom: 0;
    }
    /* Sign-in pulls into the drawer at the bottom for one-thumb access. */
    .v2-chrome-nav.is-open .v2-chrome-nav__signin {
        display: block;
        padding: 1rem .25rem .25rem;
        font-weight: 600;
        color: var(--v2-text-invert);
    }
    /* Body scroll lock while drawer is open prevents the page bouncing
       under the menu on iOS. */
    body.v2-chrome.v2-chrome--menu-open { overflow: hidden; }
}

/* FOOTER */
.v2-chrome-footer {
    position: relative;
    margin-top: 6rem;
    padding: 5rem 0 2rem;
    background: var(--v2-ink-2);
    color: var(--v2-text-invert);
    overflow: hidden;
    isolation: isolate;
}
.v2-chrome-footer::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 15% 100%, rgba(106,242,229,.10), transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 0%,   rgba(151,108,230,.10), transparent 60%);
    z-index: -1;
    pointer-events: none;
}
.v2-chrome-footer::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(106,242,229,.35) 30%, rgba(151,108,230,.35) 70%, transparent 100%);
    pointer-events: none;
}

.v2-chrome-footer__mark {
    position: absolute;
    right: -60px; top: -40px;
    width: 360px;
    height: auto;
    opacity: .05;
    pointer-events: none;
    transform: rotate(-8deg);
    filter: saturate(1.3);
}

.v2-chrome-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, 1fr);
    gap: 2.5rem;
    margin-bottom: 3rem;
}
@media (max-width: 991.98px) {
    .v2-chrome-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .v2-chrome-footer__grid { grid-template-columns: 1fr; }
}

.v2-chrome-footer__brand {
    max-width: 22em;
}
.v2-chrome-footer__brand-line {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}
.v2-chrome-footer__brand-line img {
    width: 44px; height: 44px;
    filter: drop-shadow(0 0 10px rgba(138,146,230,.4));
}
/* Full-logo lockup in the footer — overrides the brand-line img defaults
   above when the single-SVG lockup is used instead of mark + CSS wordmark.
   Higher specificity via chained class ensures the aspect-preserving auto
   width wins over the 44x44 default. */
.v2-chrome-footer__brand-line img.v2-chrome-footer__brand-logo {
    width: auto;
    height: 44px;
    max-width: 220px;
    filter: drop-shadow(0 0 10px rgba(138,146,230,.35));
}
.v2-chrome-footer__brand-name {
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--v2-text-invert);
    line-height: 1;
}
.v2-chrome-footer__brand-suffix {
    font-family: var(--v2-mono);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--v2-primary);
    margin-top: 4px;
    line-height: 1;
}
.v2-chrome-footer__brand-tagline {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--v2-text-dim);
    margin-bottom: 1.25rem;
}
.v2-chrome-footer__brand-social {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.v2-chrome-footer__brand-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-dim);
    transition: all .2s ease;
    text-decoration: none;
}
.v2-chrome-footer__brand-social a:hover {
    background: rgba(106,242,229,.08);
    border-color: var(--v2-accent);
    color: var(--v2-accent);
    transform: translateY(-2px);
}
.v2-chrome-footer__brand-social i { font-size: 18px; }

.v2-chrome-footer__col h6 {
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-accent);
    margin-bottom: 1.25rem;
    font-weight: 500;
}
.v2-chrome-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.v2-chrome-footer__col li { margin-bottom: .65rem; }
.v2-chrome-footer__col a {
    color: var(--v2-text-dim);
    text-decoration: none;
    font-size: .92rem;
    transition: color .15s ease;
}
.v2-chrome-footer__col a:hover { color: var(--v2-text-invert); text-decoration: none; }

.v2-chrome-footer__base {
    position: relative;
    padding-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--v2-text-dim);
    font-family: var(--v2-mono);
    letter-spacing: .06em;
}
.v2-chrome-footer__base::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--v2-line-2) 20%, var(--v2-line-2) 80%, transparent 100%);
}
.v2-chrome-footer__base a {
    color: var(--v2-text-dim);
    text-decoration: none;
}
.v2-chrome-footer__base a:hover {
    color: var(--v2-accent);
    text-decoration: none;
}


/* =================================================================
   ============================================================
   CATALOG — shared building blocks for the Games catalog page
   variants (v2 Dense / v3 Featured / v4 Genre / v5 Discover).
   All four run under .v2-mode-dark.v2-mode-v5 so they inherit
   the full-dark aurora + chrome from the Home page.
   ============================================================
   ================================================================= */

/* ---- Catalog page hero (title + subtitle + stats row) ---- */
.v2-catalog-hero {
    padding: 5rem 0 3rem;
    text-align: center;
}
.v2-catalog-hero .v2-display--sm { margin-top: 1rem; }
.v2-catalog-hero .v2-lede { margin: 1.25rem auto 0; }
.v2-catalog-hero__stats {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    font-family: var(--v2-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-catalog-hero__stats strong {
    color: var(--v2-text-invert);
    font-weight: 600;
    margin-right: .35rem;
}
.v2-catalog-hero__stats .sep { opacity: .35; }

/* ---- Game card (base — used by every variant) ---- */
.v2-game-card {
    position: relative;
    background: linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.v2-game-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow:
        0 0 0 1px rgba(106,242,229,.4),
        0 24px 60px rgba(10,14,31,.6),
        0 10px 30px rgba(106,242,229,.12);
    color: inherit;
    text-decoration: none;
}
.v2-game-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0A0E1F;
}
.v2-game-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.v2-game-card:hover .v2-game-card__image img {
    transform: scale(1.06);
}
.v2-game-card__image::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10,14,31,.75) 100%);
    pointer-events: none;
}
.v2-game-card__badges {
    position: absolute;
    top: .75rem;
    left: .75rem;
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    z-index: 2;
}
.v2-game-card__badge {
    font-family: var(--v2-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .25rem .55rem;
    border-radius: 999px;
    /* Near-opaque dark scrim so the badge text stays legible over every
       game-card image — the Apple Liquid Glass problem in miniature.
       Variants below keep this dark panel and use colored border + colored
       text for identity instead of a colored tint. */
    background: rgba(10, 14, 31, .82);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-invert);
    font-weight: 600;
}
.v2-game-card__badge--free {
    /* dark panel inherited from base — colored dot-on-dark identity */
    border-color: rgba(49, 217, 165, .65);
    color: var(--v2-success);
}
.v2-game-card__badge--mod {
    border-color: rgba(138, 146, 230, .65);
    color: var(--v2-lavender);
}
.v2-game-card__badge--featured {
    border-color: rgba(106, 242, 229, .7);
    color: var(--v2-accent);
}
.v2-game-card__price {
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    font-family: var(--v2-mono);
    font-size: .82rem;
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: 6px;
    background: rgba(10, 14, 31, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-invert);
    z-index: 2;
}
.v2-game-card__price--free { color: var(--v2-success); border-color: rgba(49,217,165,.5); }
.v2-game-card__body {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .4rem;
}
.v2-game-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--v2-text-invert);
}
.v2-game-card__desc {
    font-size: .85rem;
    line-height: 1.45;
    color: var(--v2-text-dim);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v2-game-card__meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .65rem;
    font-family: var(--v2-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-game-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.v2-game-card__cta {
    font-family: var(--v2-mono);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v2-accent);
    transition: gap .2s ease;
    display: inline-flex;
    gap: .3rem;
    align-items: center;
}
.v2-game-card:hover .v2-game-card__cta { gap: .55rem; }

/* ---- Grid: Dense (v2 variant) ---- */
.v2-catalog-grid-dense {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
@media (min-width: 1400px) {
    .v2-catalog-grid-dense { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 575.98px) {
    .v2-catalog-grid-dense { grid-template-columns: 1fr 1fr; gap: .75rem; }
}

/* ---- Quick-filter pill bar (used across variants) ---- */
.v2-catalog-filters {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.v2-catalog-filter {
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(17, 22, 49, .6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-dim);
    cursor: pointer;
    transition: all .15s ease;
}
.v2-catalog-filter:hover {
    color: var(--v2-text-invert);
    border-color: rgba(106,242,229,.5);
}
.v2-catalog-filter.is-active {
    color: #0A0E1F;
    background: var(--v2-grad);
    background-clip: padding-box;
    border-color: transparent;
    font-weight: 600;
}

/* ---- Featured hero card (v3 variant — large feature surface) ---- */
.v2-catalog-featured {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
    min-height: 360px;
}
@media (max-width: 991.98px) {
    .v2-catalog-featured { grid-template-columns: 1fr; min-height: auto; }
}
.v2-catalog-featured-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--v2-radius-lg);
    border: 1px solid var(--v2-line-2);
    background: var(--v2-ink-2);
    text-decoration: none;
    color: inherit;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
}
.v2-catalog-featured-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    text-decoration: none;
    color: inherit;
    box-shadow:
        0 0 0 1px rgba(106,242,229,.5),
        0 30px 70px rgba(10,14,31,.6),
        0 12px 32px rgba(106,242,229,.18);
}
.v2-catalog-featured-card--primary {
    grid-row: span 2;
    min-height: 360px;
}
.v2-catalog-featured-card__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .55;
    transition: opacity .25s, transform .4s ease;
}
.v2-catalog-featured-card:hover .v2-catalog-featured-card__bg {
    opacity: .65;
    transform: scale(1.04);
}
.v2-catalog-featured-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,14,31,.2) 0%, rgba(10,14,31,.92) 100%);
}
.v2-catalog-featured-card__content {
    position: relative;
    z-index: 2;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.v2-catalog-featured-card__label {
    font-family: var(--v2-mono);
    font-size: .68rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--v2-accent);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.v2-catalog-featured-card__label::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.v2-catalog-featured-card__title {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--v2-text-invert);
    margin: 0;
}
.v2-catalog-featured-card--primary .v2-catalog-featured-card__title { font-size: 2.4rem; }
.v2-catalog-featured-card__desc {
    color: var(--v2-text-dim);
    font-size: .95rem;
    line-height: 1.5;
    margin: 0;
    max-width: 30em;
}
.v2-catalog-featured-card__meta {
    display: flex;
    gap: 1.5rem;
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
    padding-top: .25rem;
}
.v2-catalog-featured-card__meta strong {
    color: var(--v2-text-invert);
    font-weight: 600;
}

/* ---- Genre section (v4 variant — horizontal rows grouped by genre) ---- */
.v2-catalog-genre {
    margin-bottom: 3rem;
}
.v2-catalog-genre__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.v2-catalog-genre__title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--v2-text-invert);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.v2-catalog-genre__count {
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(17, 22, 49, .7);
    border: 1px solid var(--v2-line-2);
}
.v2-catalog-genre__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
@media (min-width: 1200px) {
    .v2-catalog-genre__row { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Discover / search-forward (v5 variant) ---- */
.v2-catalog-discover__chrome {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
    .v2-catalog-discover__chrome { grid-template-columns: 1fr; }
}
.v2-catalog-search {
    position: relative;
    width: 100%;
}
.v2-catalog-search input[type="search"] {
    width: 100%;
    height: 52px;
    padding: 0 1.25rem 0 3rem;
    border-radius: 12px;
    background: rgba(17, 22, 49, .7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-invert);
    font-size: 1rem;
    font-family: var(--v2-font);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.v2-catalog-search input[type="search"]:focus {
    border-color: var(--v2-accent);
    box-shadow: 0 0 0 4px rgba(106,242,229,.12);
}
.v2-catalog-search input[type="search"]::placeholder { color: var(--v2-text-dim); }
.v2-catalog-search .mdi {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--v2-text-dim);
    pointer-events: none;
}
.v2-catalog-sort {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 52px;
    padding: 0 1rem;
    border-radius: 12px;
    background: rgba(17, 22, 49, .7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-invert);
    font-family: var(--v2-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}
.v2-catalog-sort:hover { border-color: var(--v2-accent); }
.v2-catalog-sort select {
    background: transparent;
    border: none;
    color: var(--v2-text-invert);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    outline: none;
    appearance: none;
    padding-right: 1.5rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' stroke='%23B0B6D6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
}
.v2-catalog-sort select option { background: var(--v2-ink-2); color: var(--v2-text-invert); }

/* Discover variant uses a slightly richer card with extra metadata row */
.v2-catalog-discover .v2-game-card__body {
    padding-bottom: 1.5rem;
}
.v2-catalog-discover .v2-game-card__desc {
    -webkit-line-clamp: 3;
}
/* =================================================================
   ============================================================
   GAME DETAIL — components for individual game pages.
   Shared vocabulary across past variants; unified surface lives
   in Views/Games/GameDetail.cshtml post-v2.1-cutover.
   ============================================================
   ================================================================= */

/* ---- Game detail hero ---- */
.v2-detail-hero {
    position: relative;
    overflow: hidden;
    padding: 6rem 0 4rem;
    isolation: isolate;
}
.v2-detail-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .28;
    z-index: -2;
    filter: blur(2px) saturate(1.1);
}
.v2-detail-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10,14,31,.55) 0%, rgba(10,14,31,.88) 70%, rgba(10,14,31,1) 100%),
        radial-gradient(ellipse 70% 50% at 30% 30%, rgba(106,242,229,.15), transparent 55%),
        radial-gradient(ellipse 70% 50% at 80% 70%, rgba(151,108,230,.18), transparent 55%);
    z-index: -1;
}
.v2-detail-hero__row {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3rem;
    align-items: center;
}
@media (max-width: 991.98px) {
    .v2-detail-hero__row { grid-template-columns: 1fr; gap: 2rem; }
}
.v2-detail-hero__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
    margin-bottom: 1.25rem;
    text-decoration: none;
}
.v2-detail-hero__breadcrumb a {
    color: var(--v2-text-dim);
    text-decoration: none;
    transition: color .15s;
}
.v2-detail-hero__breadcrumb a:hover { color: var(--v2-accent); }
.v2-detail-hero__title {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 .75rem;
    color: var(--v2-text-invert);
}
.v2-detail-hero__tagline {
    font-size: clamp(1.1rem, 1.3vw, 1.3rem);
    line-height: 1.5;
    color: var(--v2-text-dim);
    max-width: 38em;
    margin: 0 0 2rem;
}
.v2-detail-hero__ctas {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.v2-detail-hero__quickspec {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--v2-line);
    font-family: var(--v2-mono);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-detail-hero__quickspec strong {
    color: var(--v2-text-invert);
    font-weight: 600;
}
.v2-detail-hero__quickspec .sep { opacity: .35; }

/* ---- Price card floating in the hero's right column ---- */
.v2-detail-price-card {
    background: linear-gradient(180deg, #151A38 0%, #0E1230 100%);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius-lg);
    padding: 1.75rem;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    position: relative;
    overflow: hidden;
}
.v2-detail-price-card::before {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: var(--v2-grad);
    opacity: .15;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}
.v2-detail-price-card__label {
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
    margin-bottom: .4rem;
    position: relative;
}
.v2-detail-price-card__value {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--v2-text-invert);
    margin-bottom: .5rem;
    position: relative;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.v2-detail-price-card__value .unit {
    font-family: var(--v2-mono);
    font-size: .85rem;
    font-weight: 400;
    color: var(--v2-text-dim);
}
.v2-detail-price-card__note {
    font-family: var(--v2-mono);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
    margin-bottom: 1.25rem;
    position: relative;
}
.v2-detail-price-card__cta { position: relative; }

/* ---- Section heading standard ---- */
.v2-detail-section {
    padding: 5rem 0;
}
.v2-detail-section__head {
    margin-bottom: 3rem;
}
.v2-detail-section__head--center { text-align: center; }

/* ---- Pricing tier cards (shared across variants) ---- */
.v2-detail-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.v2-detail-tier {
    position: relative;
    padding: 1.75rem 1.5rem;
    border-radius: var(--v2-radius);
    background: linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border: 1px solid var(--v2-line-2);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.v2-detail-tier:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow:
        0 0 0 1px rgba(106,242,229,.4),
        0 20px 40px rgba(0,0,0,.5);
    color: inherit;
    text-decoration: none;
}
.v2-detail-tier--highlight {
    background: linear-gradient(rgba(17, 22, 49, .95), rgba(17, 22, 49, .95)) padding-box,
                var(--v2-grad) border-box;
    border: 1px solid transparent;
}
.v2-detail-tier--highlight::before {
    content: "RECOMMENDED";
    position: absolute;
    top: -.7rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--v2-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--v2-grad);
    color: #0A0E1F;
    font-weight: 700;
}
.v2-detail-tier__name {
    font-family: var(--v2-mono);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-accent);
}
.v2-detail-tier__price {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--v2-text-invert);
}
.v2-detail-tier__price--free {
    background: var(--v2-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.v2-detail-tier__unit {
    font-family: var(--v2-mono);
    font-size: .72rem;
    color: var(--v2-text-dim);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.v2-detail-tier__specs {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .85rem;
    color: var(--v2-text-dim);
}
.v2-detail-tier__specs li {
    display: flex;
    justify-content: space-between;
    font-family: var(--v2-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .72rem;
}
.v2-detail-tier__specs li strong {
    color: var(--v2-text-invert);
    font-weight: 600;
}
.v2-detail-tier__cta {
    margin-top: auto;
    padding-top: .75rem;
}

/* ---- Tier-group container (Standard vs Premium SSD) ---- */
.v2-detail-tier-group + .v2-detail-tier-group { margin-top: 2.75rem; }
.v2-detail-tier-group__head {
    margin-bottom: 1.5rem;
}
.v2-detail-tier-group__title {
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v2-text-invert);
    margin: .5rem 0 .35rem;
}
.v2-detail-tier-group__lede {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--v2-text-dim);
    margin: 0;
    max-width: 52em;
}
.v2-detail-tier-group--premium {
    position: relative;
    padding: 2rem 1.75rem 2.25rem;
    border-radius: var(--v2-radius-lg);
    background:
        radial-gradient(ellipse 80% 60% at 15% 0%, rgba(151,108,230,.14), transparent 60%),
        radial-gradient(ellipse 80% 60% at 85% 100%, rgba(106,242,229,.12), transparent 60%),
        linear-gradient(180deg, rgba(17, 22, 49, .8) 0%, rgba(10,14,31, .85) 100%);
    border: 1px solid transparent;
    background-clip: padding-box;
    overflow: hidden;
    isolation: isolate;
}
.v2-detail-tier-group--premium::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--v2-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .5;
}

/* ---- Premium-variant eyebrow (lavender pill, solid color so the ::before
       dot's currentColor stays visible — gradient-text clipping would need
       a separate override on the dot pseudo-element, not worth the lines) ---- */
.v2-eyebrow--premium {
    color: var(--v2-lavender);
    border-color: rgba(151,108,230,.4);
    background: rgba(151,108,230,.08);
}

/* ---- Tier card — premium variant ---- */
.v2-detail-tier--premium {
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(151,108,230,.12), transparent 60%),
        linear-gradient(180deg, #151A38 0%, #0E1230 100%);
    border-color: rgba(151,108,230,.35);
}
.v2-detail-tier--premium:hover {
    box-shadow:
        0 0 0 1px rgba(151,108,230,.5),
        0 24px 50px rgba(0,0,0,.55);
}
.v2-detail-tier--premium .v2-detail-tier__name {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--v2-accent-2);
}
.v2-detail-tier__chip {
    font-family: var(--v2-mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: var(--v2-grad);
    color: #0A0E1F;
    font-weight: 700;
}

/* ---- No-player-limits callout (inside the pricing section) ---- */
.v2-detail-no-limits {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    margin: 0 0 2.5rem;
    border-radius: var(--v2-radius);
    background: rgba(49,217,165,.07);
    border: 1px solid rgba(49,217,165,.35);
}
.v2-detail-no-limits__badge {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(49,217,165,.15);
    color: var(--v2-success);
    border: 1px solid rgba(49,217,165,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
}
.v2-detail-no-limits__body {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--v2-text-dim);
}
.v2-detail-no-limits__body strong {
    color: var(--v2-text-invert);
    font-weight: 600;
    margin-right: .35rem;
}

/* ---- Feature grid ---- */
.v2-detail-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.v2-detail-feature {
    padding: 1.5rem 1.5rem 1.75rem;
    border-radius: var(--v2-radius);
    background: rgba(17, 22, 49, .5);
    border: 1px solid var(--v2-line-2);
}
.v2-detail-feature__icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(106,242,229,.1);
    border: 1px solid rgba(106,242,229,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.v2-detail-feature__icon img {
    width: 22px; height: 22px;
    filter: brightness(0) invert(1);
    opacity: .9;
}
.v2-detail-feature__icon .mdi {
    font-size: 22px;
    color: var(--v2-accent);
}
.v2-detail-feature__title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v2-text-invert);
    margin: 0 0 .4rem;
}
.v2-detail-feature__desc {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--v2-text-dim);
    margin: 0;
}

/* ---- Mod-support deep-dive box ---- */
.v2-detail-modbox {
    position: relative;
    padding: 2.5rem;
    border-radius: var(--v2-radius-lg);
    background: linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
}
.v2-detail-modbox::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(138,146,230,.2), transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(106,242,229,.18), transparent 55%);
    z-index: -1;
    pointer-events: none;
}
.v2-detail-modbox__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (max-width: 767.98px) {
    .v2-detail-modbox__row { grid-template-columns: 1fr; }
    .v2-detail-modbox { padding: 1.75rem; }
}

/* ---- Spec sheet (hardware details) ---- */
.v2-detail-specsheet {
    background: rgba(17, 22, 49, .65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    padding: 2rem 2.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem 2.5rem;
}
/* Row: two-column grid (label auto / value 1fr) instead of flex-space-between.
   Flex + space-between made wrapped values left-justify inside their flex
   item while single-line values sat flush right, causing an ugly jitter
   between rows whose value text wrapped and rows whose didn't. Grid +
   text-align: right pins every value (wrapped or not) to the right edge. */
.v2-detail-specsheet__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: baseline;
    padding-bottom: .6rem;
    border-bottom: 1px dashed var(--v2-line-2);
    font-family: var(--v2-mono);
    font-size: .82rem;
    letter-spacing: .04em;
}
.v2-detail-specsheet__label {
    color: var(--v2-text-dim);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
}
.v2-detail-specsheet__value {
    color: var(--v2-text-invert);
    font-weight: 600;
    text-align: right;
}

/* ---- Numbered walkthrough (setup steps) ---- */
.v2-detail-walkthrough {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    position: relative;
}
@media (max-width: 991.98px) {
    .v2-detail-walkthrough { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .v2-detail-walkthrough { grid-template-columns: 1fr; }
}
.v2-detail-walkthrough__step {
    padding: 1.75rem 1.5rem;
    border-radius: var(--v2-radius);
    background: rgba(17, 22, 49, .5);
    border: 1px solid var(--v2-line-2);
    position: relative;
}
.v2-detail-walkthrough__num {
    font-family: var(--v2-mono);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    background: var(--v2-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.v2-detail-walkthrough__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    margin: 0 0 .4rem;
}
.v2-detail-walkthrough__copy {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--v2-text-dim);
    margin: 0;
}

/* ---- Pull-quote / testimonial ---- */
.v2-detail-quote {
    position: relative;
    padding: 3rem 2.5rem;
    border-radius: var(--v2-radius-lg);
    background:
        radial-gradient(ellipse 60% 50% at 30% 30%, rgba(106,242,229,.12), transparent 55%),
        radial-gradient(ellipse 60% 50% at 70% 70%, rgba(151,108,230,.12), transparent 55%),
        var(--v2-ink-2);
    border: 1px solid var(--v2-line-2);
    text-align: center;
}
.v2-detail-quote__stars {
    color: var(--v2-accent);
    font-size: 1rem;
    letter-spacing: .2em;
    margin-bottom: 1rem;
}
.v2-detail-quote__text {
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    line-height: 1.5;
    color: var(--v2-text-invert);
    font-style: italic;
    margin: 0 0 1.25rem;
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
}
.v2-detail-quote__attr {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--v2-mono);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-detail-quote__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--v2-grad);
    display: flex; align-items: center; justify-content: center;
    color: #0A0E1F; font-weight: 700; font-size: .82rem;
    font-family: var(--v2-font);
}

/* ---- FAQ accordion ---- */
.v2-detail-faq {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 900px;
    margin: 0 auto;
}
.v2-detail-faq__item {
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    background: rgba(17, 22, 49, .5);
    overflow: hidden;
    transition: border-color .2s, background .2s;
}
.v2-detail-faq__item[open] {
    border-color: rgba(106,242,229,.4);
    background: rgba(17, 22, 49, .75);
}
.v2-detail-faq__q {
    padding: 1.25rem 1.75rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    list-style: none;
    position: relative;
    padding-right: 3rem;
}
.v2-detail-faq__q::-webkit-details-marker { display: none; }
.v2-detail-faq__q::after {
    content: "+";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(106,242,229,.12);
    color: var(--v2-accent);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, background .2s;
}
.v2-detail-faq__item[open] .v2-detail-faq__q::after {
    transform: translateY(-50%) rotate(45deg);
    background: rgba(106,242,229,.24);
}
.v2-detail-faq__a {
    padding: 0 1.75rem 1.5rem;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--v2-text-dim);
}

/* ---- Related games rail ---- */
.v2-detail-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* ---- Mod-loader picker (v5) ---- */
.v2-detail-modpicker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.v2-detail-modpicker__card {
    padding: 1.5rem;
    border-radius: var(--v2-radius);
    background: rgba(17, 22, 49, .55);
    border: 1px solid var(--v2-line-2);
    transition: border-color .2s, background .2s;
    cursor: pointer;
}
.v2-detail-modpicker__card:hover {
    border-color: rgba(106,242,229,.4);
    background: rgba(17, 22, 49, .75);
}
.v2-detail-modpicker__card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    margin: 0 0 .4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.v2-detail-modpicker__card-tag {
    font-family: var(--v2-mono);
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(49,217,165,.15);
    color: var(--v2-success);
    border: 1px solid rgba(49,217,165,.4);
    font-weight: 500;
}
.v2-detail-modpicker__card-desc {
    font-size: .88rem;
    line-height: 1.5;
    color: var(--v2-text-dim);
    margin: 0;
}

/* ---- Launch checklist (v5) ---- */
.v2-detail-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
.v2-detail-checklist__item {
    padding: 1.25rem 1.5rem;
    border-radius: var(--v2-radius);
    background: rgba(17, 22, 49, .5);
    border: 1px solid var(--v2-line-2);
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}
.v2-detail-checklist__check {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(49,217,165,.15);
    color: var(--v2-success);
    border: 1px solid rgba(49,217,165,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-top: 2px;
}
.v2-detail-checklist__check::before { content: "✓"; }
.v2-detail-checklist__body h4 {
    font-size: .98rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    margin: 0 0 .25rem;
}
.v2-detail-checklist__body p {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--v2-text-dim);
    margin: 0;
}

/* ---- Use-case cards (v5) ---- */
.v2-detail-usecases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.v2-detail-usecase {
    padding: 1.75rem;
    border-radius: var(--v2-radius);
    background: linear-gradient(180deg, rgba(17, 22, 49, .75), rgba(10,14,31, .75));
    border: 1px solid var(--v2-line-2);
    position: relative;
    overflow: hidden;
}
.v2-detail-usecase__pill {
    font-family: var(--v2-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--v2-grad);
    color: #0A0E1F;
    font-weight: 700;
    display: inline-flex;
    margin-bottom: 1rem;
}
.v2-detail-usecase__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    margin: 0 0 .4rem;
}
.v2-detail-usecase__copy {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--v2-text-dim);
    margin: 0 0 1rem;
}
.v2-detail-usecase__tier {
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-accent);
}


/* =================================================================
   ============================================================
   PRICING PAGE — Game Servers v2/v3/v4/v5 mockups
   (/Pricing/GameServers/v2-v5). Builds on the detail-page token
   set so the pricing surface is recognizable-family, not a
   different design system.
   ============================================================
   ================================================================= */

/* ---- Per-tier "included add-ons" bullets inside a tier card.
       Sits between the specs and the CTA so shoppers see what
       ships with the tier without flipping to the add-ons section. */
.v2-detail-tier__includes {
    list-style: none;
    padding: .6rem 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .78rem;
    color: var(--v2-text-dim);
    border-top: 1px dashed var(--v2-line-2);
}
.v2-detail-tier__includes li {
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 1.3;
}
.v2-detail-tier__includes li i {
    color: var(--v2-accent);
    font-size: 1rem;
    flex-shrink: 0;
}
.v2-detail-tier--premium .v2-detail-tier__includes li i {
    color: var(--v2-accent-2);
}

/* Textual "Recommended" badge anchored to the top edge of the
   highlighted tier card. Sits on the gradient border so it
   reinforces the color signal with a label (colorblind support). */
.v2-detail-tier__badge {
    position: absolute;
    top: -.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--v2-grad);
    background-clip: padding-box;
    color: #0A0E1F;
    font-family: var(--v2-mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: .25rem .75rem;
    border-radius: 999px;
    white-space: nowrap;
    z-index: 2;
}

/* Optional add-ons block — same row layout as __includes but with a
   subtle "add-on" tag so the customer sees it's not bundled. Distinct
   list keeps the price-card honest about what's in the price vs. what
   they can flip on at checkout. */
.v2-detail-tier__optionals {
    list-style: none;
    padding: .5rem 0 0;
    margin: .25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .76rem;
    color: var(--v2-text-dim);
}
.v2-detail-tier__optionals li {
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 1.3;
}
.v2-detail-tier__optionals li i {
    color: var(--v2-text-muted);
    font-size: 1rem;
    flex-shrink: 0;
}
.v2-detail-tier__optional-tag {
    margin-left: auto;
    font-family: var(--v2-mono);
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-text-muted);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--v2-line-2);
    border-radius: 4px;
    padding: .1rem .4rem;
    flex-shrink: 0;
}

/* ---- Game-selector pill row ---- */
.v2-pricing-gamepills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0 auto;
    max-width: 900px;
}
.v2-pricing-gamepill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .9rem .45rem .55rem;
    background: rgba(17, 22, 49, .55);
    border: 1px solid var(--v2-line-2);
    border-radius: 999px;
    color: var(--v2-text-dim);
    font-family: var(--v2-font);
    font-size: .88rem;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.v2-pricing-gamepill img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.v2-pricing-gamepill:hover {
    border-color: rgba(106,242,229,.4);
    color: var(--v2-text-invert);
}
.v2-pricing-gamepill.is-active {
    background: linear-gradient(rgba(17, 22, 49, .95), rgba(17, 22, 49, .95)) padding-box,
                var(--v2-grad) border-box;
    border-color: transparent;
    color: var(--v2-text-invert);
}

/* ---- Monthly / quarterly / annual billing toggle ---- */
.v2-pricing-cycle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.v2-pricing-cycle__label {
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-pricing-cycle__options {
    display: inline-flex;
    padding: 4px;
    background: rgba(17, 22, 49, .65);
    border: 1px solid var(--v2-line-2);
    border-radius: 999px;
}
.v2-pricing-cycle__option {
    background: transparent;
    border: 0;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    color: var(--v2-text-dim);
    font-family: var(--v2-font);
    font-size: .88rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.v2-pricing-cycle__option:hover { color: var(--v2-text-invert); }
.v2-pricing-cycle__option.is-active {
    background: var(--v2-grad);
    color: #0A0E1F;
    font-weight: 600;
}
.v2-pricing-cycle__save {
    font-family: var(--v2-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(49,217,165,.18);
    color: var(--v2-success);
    border: 1px solid rgba(49,217,165,.4);
}
.v2-pricing-cycle__option.is-active .v2-pricing-cycle__save {
    background: rgba(10,14,31,.18);
    color: #0A0E1F;
    border-color: rgba(10,14,31,.2);
}

/* ---- Refund / no-contract / prorated / DDoS ribbon ---- */
.v2-pricing-ribbon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--v2-radius);
    background: rgba(17, 22, 49, .5);
    border: 1px solid var(--v2-line-2);
}
.v2-pricing-ribbon__item {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: var(--v2-text-dim);
}
.v2-pricing-ribbon__item i {
    font-size: 1.5rem;
    color: var(--v2-accent);
    flex-shrink: 0;
}
.v2-pricing-ribbon__item > div {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.v2-pricing-ribbon__item strong {
    color: var(--v2-text-invert);
    font-weight: 600;
    font-size: .95rem;
}
.v2-pricing-ribbon__item span {
    font-size: .78rem;
    color: var(--v2-text-dim);
}

/* ---- Interactive price estimator (v5 only) ---- */
.v2-pricing-estimator {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: var(--v2-radius-lg);
    background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(106,242,229,.1), transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(151,108,230,.1), transparent 55%),
        linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border: 1px solid var(--v2-line-2);
}
@media (max-width: 991.98px) {
    .v2-pricing-estimator { grid-template-columns: 1fr; }
}
.v2-pricing-estimator__controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    align-content: start;
}
.v2-pricing-estimator__field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.v2-pricing-estimator__field label {
    font-family: var(--v2-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
    margin: 0;
}
.v2-pricing-estimator__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: .65rem 2rem .65rem .85rem;
    background: rgba(10,14,31,.6);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%236AF2E5' d='M1.5 4.5 L6 9 L10.5 4.5 Z'/></svg>");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 10px;
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius-sm);
    color: var(--v2-text-invert);
    font-family: var(--v2-font);
    font-size: .92rem;
    cursor: pointer;
    transition: border-color .15s;
}
.v2-pricing-estimator__select:hover,
.v2-pricing-estimator__select:focus {
    border-color: rgba(106,242,229,.55);
    outline: none;
}
.v2-pricing-estimator__total {
    padding: 1.5rem;
    border-radius: var(--v2-radius);
    background: rgba(10,14,31,.65);
    border: 1px solid var(--v2-line-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
    text-align: center;
}
.v2-pricing-estimator__total-label {
    font-family: var(--v2-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-pricing-estimator__total-value {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
}
.v2-pricing-estimator__total-unit {
    font-family: var(--v2-mono);
    font-size: .95rem;
    font-weight: 400;
    color: var(--v2-text-dim);
}
.v2-pricing-estimator__total-note {
    font-family: var(--v2-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}

/* ---- Add-on plan comparison matrix (v5) ---- */
.v2-pricing-matrix {
    border-radius: var(--v2-radius);
    background: rgba(17, 22, 49, .5);
    border: 1px solid var(--v2-line-2);
    overflow-x: auto;
}
.v2-pricing-matrix table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--v2-text-dim);
    font-size: .9rem;
}
.v2-pricing-matrix th,
.v2-pricing-matrix td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--v2-line-2);
    vertical-align: top;
}
.v2-pricing-matrix thead th {
    background: rgba(10,14,31,.45);
    color: var(--v2-text-invert);
    font-weight: 600;
    border-bottom: 1px solid var(--v2-line);
}
.v2-pricing-matrix tbody th {
    font-weight: 500;
    color: var(--v2-text-dim);
    font-family: var(--v2-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(10,14,31,.25);
    white-space: nowrap;
    width: 18%;
}
.v2-pricing-matrix tbody tr:last-child th,
.v2-pricing-matrix tbody tr:last-child td { border-bottom: 0; }
.v2-pricing-matrix__plan-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--v2-text-invert);
}
.v2-pricing-matrix__plan-price {
    display: block;
    font-family: var(--v2-mono);
    font-size: .82rem;
    letter-spacing: .06em;
    color: var(--v2-text-dim);
    margin-top: .2rem;
}
.v2-pricing-matrix__plan-price .v2-grad-text {
    background: var(--v2-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}
.v2-pricing-matrix__plan-unit {
    opacity: .7;
    margin-left: .2rem;
}
.v2-pricing-matrix__note-row td,
.v2-pricing-matrix__note-row th { background: rgba(10,14,31,.15); }
.v2-pricing-matrix__note {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--v2-text-dim);
}

/* ============================================================
   REGIONS PAGE (v2-v4 mockups — /Regions/v*)
   ------------------------------------------------------------
   Two-column responsive grid of region cards. Each card has a
   header (short name, full name, status pill) and a body of host
   capabilities + geographic fit lists (v4 adds the geo list).
   ============================================================ */

.v2-regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
}

.v2-region-card {
    padding: 1.75rem;
    border-radius: var(--v2-radius-lg);
    background: linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border: 1px solid var(--v2-line-2);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: border-color .2s, box-shadow .2s;
}
.v2-region-card:hover {
    border-color: rgba(106,242,229,.35);
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

.v2-region-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--v2-line-2);
}
.v2-region-card__shortname {
    display: inline-block;
    font-family: var(--v2-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-accent);
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(106,242,229,.1);
    border: 1px solid rgba(106,242,229,.3);
    margin-bottom: .6rem;
}
.v2-region-card__name {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--v2-text-invert);
    margin: 0 0 .25rem;
}
.v2-region-card__tagline {
    font-size: .85rem;
    color: var(--v2-text-dim);
    margin: 0;
}
.v2-region-card__status {
    flex-shrink: 0;
    font-family: var(--v2-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(49,217,165,.15);
    color: var(--v2-success);
    border: 1px solid rgba(49,217,165,.4);
    font-weight: 600;
    white-space: nowrap;
}

/* Right-side chip cluster on the region card header. Holds the latency
   readout, an optional "Closest" tag, and the LIVE pill — flex-wrap so
   three chips on the closest card spill onto a second line on narrow
   columns rather than crowd the heading. */
.v2-region-card__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: .35rem;
    flex-shrink: 0;
    max-width: 55%;
}

/* Live latency readout — measured client-side via the shared
   RevelationLatency module (`/api/Diagnostics/Ping`, 10 samples,
   best 3 averaged). Thresholds (80 / 160 ms) match the ordering-flow
   `.region-latency` chip so the colors read consistently across the
   site. Loading state is rendered server-side; JS swaps the modifier
   class once the measurement settles. */
.v2-region-card__latency {
    flex-shrink: 0;
    font-family: var(--v2-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    padding: .3rem .65rem;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 500;
}
.v2-region-card__latency--loading {
    background: rgba(255, 255, 255, .05);
    color: var(--v2-text-dim);
    border: 1px solid var(--v2-line-2);
}
.v2-region-card__latency--good {
    background: rgba(49, 217, 165, .12);
    color: var(--v2-success);
    border: 1px solid rgba(49, 217, 165, .35);
}
.v2-region-card__latency--moderate {
    background: rgba(255, 181, 71, .12);
    color: var(--v2-warn);
    border: 1px solid rgba(255, 181, 71, .35);
}
.v2-region-card__latency--poor {
    background: rgba(255, 107, 122, .1);
    color: #ff6b7a;
    border: 1px solid rgba(255, 107, 122, .35);
}

/* "Closest to you" indicator — applied by JS to whichever card wins
   the latency race. Brand-primary indigo border + a soft ringed
   glow so the cue reads at a glance on the dark surface. The
   `__closest-tag` pill is injected into the chip cluster ahead of
   the latency readout. */
.v2-region-card--closest {
    border-color: var(--v2-primary);
    box-shadow: 0 0 0 1px rgba(114,124,245,.5), 0 20px 50px rgba(114,124,245,.18);
}
.v2-region-card--closest:hover {
    border-color: var(--v2-primary);
    box-shadow: 0 0 0 1px rgba(114,124,245,.7), 0 20px 50px rgba(114,124,245,.28);
}
.v2-region-card__closest-tag {
    flex-shrink: 0;
    font-family: var(--v2-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(114,124,245,.15);
    color: var(--v2-primary);
    border: 1px solid rgba(114,124,245,.45);
    font-weight: 600;
    white-space: nowrap;
}

.v2-region-card__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.v2-region-card__section {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.v2-region-card__section-label,
.v2-region-card__hosts-label {
    font-family: var(--v2-mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-region-card__hosts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .9rem;
    color: var(--v2-text-dim);
}
.v2-region-card__hosts li {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.v2-region-card__hosts li i {
    color: var(--v2-success);
    font-size: 1rem;
    flex-shrink: 0;
}
.v2-region-card__bestfor {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem .85rem;
    font-size: .82rem;
    color: var(--v2-text-dim);
}
.v2-region-card__bestfor li {
    padding-left: .9rem;
    position: relative;
}
.v2-region-card__bestfor li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--v2-accent);
}


/* ---- Early Access banner (Storage Accounts; any product still building
       toward full customer self-serve). Amber tint so it reads as a
       friendly heads-up, not an error; hugs the container width just
       below the hero section. ---- */
.v2-pricing-notice {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    margin: 0 auto;
    max-width: 900px;
    border-radius: var(--v2-radius);
    background: rgba(234,185,108,.06);
    border: 1px solid rgba(234,185,108,.35);
}
.v2-pricing-notice__badge {
    flex-shrink: 0;
    font-family: var(--v2-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(234,185,108,.15);
    color: #EAB96C;
    border: 1px solid rgba(234,185,108,.45);
    font-weight: 600;
    white-space: nowrap;
}
.v2-pricing-notice__body {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--v2-text-dim);
}
.v2-pricing-notice__body strong {
    color: var(--v2-text-invert);
    font-weight: 600;
}
@media (max-width: 575.98px) {
    .v2-pricing-notice {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }
}


/* ============================================================
   BUILD-OUT PLANNER (DS v5 — /Pricing/DedicatedServers/v5)
   ------------------------------------------------------------
   Customer enters game servers they plan to run; JS at the bottom
   of the view recommends the smallest DS tier that fits. Layout is
   2-column: left is the row editor + resource summary; right is the
   recommendation card + add-on selects + total price.
   ============================================================ */

.v2-pricing-planner {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: var(--v2-radius-lg);
    background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(106,242,229,.1), transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(151,108,230,.1), transparent 55%),
        linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border: 1px solid var(--v2-line-2);
}
@media (max-width: 991.98px) {
    .v2-pricing-planner { grid-template-columns: 1fr; padding: 1.25rem; }
}

.v2-pricing-planner__left {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0; /* prevent grid blowout from long game names */
}

.v2-pricing-planner__rows {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Row layout. Items align at end (input baselines) so the modded toggle
   and remove button sit flush with the bottom of the labeled inputs
   instead of floating mid-tile. */
.v2-planner-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto auto;
    gap: .75rem;
    align-items: end;
    padding: .6rem .75rem;
    background: rgba(10,14,31,.55);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius-sm);
}
@media (max-width: 575.98px) {
    .v2-planner-row {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }
    .v2-planner-row__field--game { grid-column: 1 / -1; }
    .v2-planner-row__remove { grid-column: 2; justify-self: end; }
}

/* Field group = label stacked over input. Replaces the old top-of-rows
   column header strip so the labels stay glued to their inputs even
   when the user scrolls or the layout collapses to a narrow viewport. */
.v2-planner-row__field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    margin: 0; /* override default <label> margin */
    cursor: pointer;
}

.v2-planner-row__label {
    font-family: var(--v2-mono);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}

.v2-planner-row select,
.v2-planner-row input[type="number"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(10,14,31,.65);
    background-image: none;
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius-sm);
    color: var(--v2-text-invert);
    padding: .5rem .65rem;
    font-size: .88rem;
    font-family: var(--v2-font);
    min-width: 0;
    width: 100%;
}
.v2-planner-row select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%236AF2E5' d='M1.5 4.5 L6 9 L10.5 4.5 Z'/></svg>");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 10px;
    padding-right: 1.75rem;
}
.v2-planner-row select:hover,
.v2-planner-row select:focus,
.v2-planner-row input[type="number"]:hover,
.v2-planner-row input[type="number"]:focus {
    border-color: rgba(106,242,229,.55);
    outline: none;
}

.v2-planner-row__toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--v2-text-dim);
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
    user-select: none;
}
.v2-planner-row__toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border: 1px solid var(--v2-line-2);
    border-radius: 4px;
    background: rgba(10,14,31,.65);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}
.v2-planner-row__toggle input[type="checkbox"]::before {
    content: "✓";
    color: #0A0E1F;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
}
.v2-planner-row__toggle input[type="checkbox"]:checked {
    background: var(--v2-grad);
    background-clip: padding-box;
    border-color: transparent;
}
.v2-planner-row__toggle input[type="checkbox"]:checked::before {
    opacity: 1;
}

.v2-planner-row__remove {
    background: transparent;
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text-dim);
    padding: .3rem .55rem;
    border-radius: var(--v2-radius-sm);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: color .15s, border-color .15s;
    min-width: 0;
}
.v2-planner-row__remove:hover {
    color: #ff6b7a;
    border-color: rgba(255,107,122,.5);
}

.v2-planner-add {
    background: transparent;
    border: 1px dashed var(--v2-line-2);
    color: var(--v2-accent);
    padding: .75rem;
    border-radius: var(--v2-radius-sm);
    font-size: .88rem;
    font-family: var(--v2-font);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    width: 100%;
}
.v2-planner-add:hover {
    border-color: var(--v2-accent);
    background: rgba(106,242,229,.06);
}

.v2-pricing-planner__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(10,14,31,.45);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius-sm);
    margin-top: .25rem;
}
.v2-pricing-planner__metric {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.v2-pricing-planner__metric-label {
    font-family: var(--v2-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-pricing-planner__metric-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    font-family: var(--v2-mono);
    letter-spacing: -.01em;
}
.v2-pricing-planner__metric-value--dim {
    color: var(--v2-accent);
    font-size: .88rem;
    font-weight: 500;
}

/* ---- Right column: recommendation + add-ons + total ---- */
.v2-pricing-planner__right {
    padding: 1.5rem;
    background: rgba(10,14,31,.7);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-self: start;
    position: sticky;
    top: 1rem;
}
@media (max-width: 991.98px) {
    .v2-pricing-planner__right { position: static; }
}
.v2-pricing-planner__right-label {
    font-family: var(--v2-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-pricing-planner__tier-name {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
    margin-top: .15rem;
}
.v2-pricing-planner__tier-price {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    letter-spacing: -.02em;
    line-height: 1;
    margin-top: .35rem;
}
.v2-pricing-planner__tier-unit {
    font-family: var(--v2-mono);
    font-size: .78rem;
    font-weight: 400;
    color: var(--v2-text-dim);
    margin-left: .25rem;
}
.v2-pricing-planner__tier-specs {
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--v2-text-dim);
    margin-top: .15rem;
}
.v2-pricing-planner__tier-reason {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--v2-text-dim);
    margin: .75rem 0 0;
    padding-top: .75rem;
    border-top: 1px dashed var(--v2-line-2);
}
.v2-pricing-planner__addons {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding-top: .75rem;
    margin-top: .25rem;
    border-top: 1px dashed var(--v2-line-2);
}
.v2-pricing-planner__total {
    padding: .75rem 0 .85rem;
    border-top: 1px dashed var(--v2-line-2);
    margin-top: .25rem;
    text-align: center;
}
.v2-pricing-planner__total-label {
    font-family: var(--v2-mono);
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-pricing-planner__total-value {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--v2-text-invert);
    letter-spacing: -.025em;
    line-height: 1;
    margin-top: .3rem;
}
.v2-pricing-planner__total-unit {
    font-family: var(--v2-mono);
    font-size: .8rem;
    font-weight: 400;
    color: var(--v2-text-dim);
    margin-left: .25rem;
}


/* ============================================================
   TECHNOLOGY PAGE (v2/v5 — /Technology/v*)
   ------------------------------------------------------------
   Platform milestones: a vertical list of delivered / shipping /
   planned items with color-coded status pills.
   ============================================================ */

.v2-tech-milestones {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}
.v2-tech-milestone {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--v2-radius);
    background: rgba(17, 22, 49, .5);
    border: 1px solid var(--v2-line-2);
    border-left: 3px solid var(--v2-line-2);
}
.v2-tech-milestone--delivered { border-left-color: var(--v2-success); }
.v2-tech-milestone--shipping  { border-left-color: var(--v2-accent); }
.v2-tech-milestone--planned   { border-left-color: #EAB96C; }

.v2-tech-milestone__icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: rgba(10,14,31,.65);
    border: 1px solid var(--v2-line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-text-dim);
    font-size: 1.5rem;
}
.v2-tech-milestone--delivered .v2-tech-milestone__icon { color: var(--v2-success); border-color: rgba(49,217,165,.35); }
.v2-tech-milestone--shipping  .v2-tech-milestone__icon { color: var(--v2-accent);  border-color: rgba(106,242,229,.35); }
.v2-tech-milestone--planned   .v2-tech-milestone__icon { color: #EAB96C;           border-color: rgba(234,185,108,.4); }

.v2-tech-milestone__body { min-width: 0; }
.v2-tech-milestone__meta {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .35rem;
}
.v2-tech-milestone__status {
    font-family: var(--v2-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    font-weight: 600;
    padding: .18rem .55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    color: var(--v2-text-dim);
}
.v2-tech-milestone--delivered .v2-tech-milestone__status { background: rgba(49,217,165,.14); color: var(--v2-success); }
.v2-tech-milestone--shipping  .v2-tech-milestone__status { background: rgba(106,242,229,.14); color: var(--v2-accent); }
.v2-tech-milestone--planned   .v2-tech-milestone__status { background: rgba(234,185,108,.14); color: #EAB96C; }

.v2-tech-milestone__when {
    font-family: var(--v2-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    color: var(--v2-text-dim);
}
.v2-tech-milestone__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    margin: 0 0 .35rem;
    letter-spacing: -.01em;
}
.v2-tech-milestone__copy {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--v2-text-dim);
    margin: 0;
}


/* ============================================================
   COMPANY PAGE (v2/v5 — /Company/v*)
   ------------------------------------------------------------
   Founder card (centered portrait + badge), at-a-glance stats
   grid, vertical history timeline.
   ============================================================ */

.v2-company-founder-card {
    position: relative;
    padding: 2rem 1.5rem 1.5rem;
    border-radius: var(--v2-radius);
    background: rgba(10,14,31,.55);
    border: 1px solid var(--v2-line-2);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}
.v2-company-founder-card__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(106,242,229,.35);
    margin-bottom: 1rem;
}
.v2-company-founder-card__badge {
    position: absolute;
    top: -.7rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--v2-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .22rem .65rem;
    border-radius: 999px;
    background: var(--v2-grad);
    color: #0A0E1F;
    font-weight: 700;
}
.v2-company-founder-card__name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    margin: 0;
}
.v2-company-founder-card__role {
    font-family: var(--v2-mono);
    font-size: .75rem;
    letter-spacing: .08em;
    color: var(--v2-text-dim);
}

.v2-company-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}
.v2-company-stat {
    padding: 1.5rem;
    border-radius: var(--v2-radius);
    background: rgba(17, 22, 49, .5);
    border: 1px solid var(--v2-line-2);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    text-align: center;
}
.v2-company-stat__value {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    background: var(--v2-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.v2-company-stat__label {
    font-family: var(--v2-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}

.v2-company-timeline {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding-left: 2rem;
}
.v2-company-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: .4rem;
    bottom: .4rem;
    width: 1px;
    background: linear-gradient(180deg, var(--v2-accent) 0%, rgba(138,146,230,.5) 50%, rgba(151,108,230,.3) 100%);
}
.v2-company-timeline__item {
    position: relative;
    padding: .75rem 0;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}
.v2-company-timeline__dot {
    position: absolute;
    left: -2rem;
    top: 1.2rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--v2-ink-2);
    border: 2px solid var(--v2-accent);
    z-index: 1;
}
.v2-company-timeline__item--release .v2-company-timeline__dot {
    border-color: var(--v2-accent-2);
    background: var(--v2-grad);
    background-clip: padding-box;
}
.v2-company-timeline__content {
    flex: 1;
    min-width: 0;
}
.v2-company-timeline__date {
    display: inline-block;
    font-family: var(--v2-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
    margin-bottom: .2rem;
}
.v2-company-timeline__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    margin: 0;
    letter-spacing: -.01em;
}


/* ============================================================
   CONTACT PAGE (v2/v5 — /Contact/v*)
   ------------------------------------------------------------
   4-channel grid; each card is clickable (email link, Discord
   invite, ticketing URL). Hover lifts border to accent.
   ============================================================ */

.v2-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.v2-contact-card {
    padding: 1.75rem;
    border-radius: var(--v2-radius);
    background: rgba(17, 22, 49, .5);
    border: 1px solid var(--v2-line-2);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
.v2-contact-card:hover {
    transform: translateY(-3px);
    border-color: rgba(106,242,229,.45);
    box-shadow: 0 20px 40px rgba(0,0,0,.45);
    color: inherit;
    text-decoration: none;
}
.v2-contact-card__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(106,242,229,.1);
    border: 1px solid rgba(106,242,229,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-accent);
    font-size: 1.35rem;
    margin-bottom: .5rem;
}
.v2-contact-card__name {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    margin: 0;
    letter-spacing: -.01em;
}
.v2-contact-card__target {
    font-family: var(--v2-mono);
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--v2-accent);
    word-break: break-all;
}
.v2-contact-card__desc {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--v2-text-dim);
    margin: .4rem 0 0;
}
.v2-contact-card__best-for {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--v2-line-2);
    font-family: var(--v2-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}


/* ============================================================
   WHITE GLOVE ONBOARDING intake form (v2/v5 — /WhiteGloveOnboarding/v*)
   ------------------------------------------------------------
   Styled form sitting in a card container, centered on the page.
   Uses the v5 color tokens throughout; inputs match the pricing
   estimator selects so the visual language stays tight.
   ============================================================ */

.v2-wgo-form {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
    border-radius: var(--v2-radius-lg);
    background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(106,242,229,.08), transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(151,108,230,.08), transparent 55%),
        linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border: 1px solid var(--v2-line-2);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (max-width: 575.98px) {
    .v2-wgo-form { padding: 1.25rem; }
}
.v2-wgo-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 575.98px) {
    .v2-wgo-form__row { grid-template-columns: 1fr; }
}
.v2-wgo-form__field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}
.v2-wgo-form__label {
    font-family: var(--v2-mono);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}
.v2-wgo-form input[type="text"],
.v2-wgo-form input[type="email"],
.v2-wgo-form textarea,
.v2-wgo-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(10,14,31,.65);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius-sm);
    color: var(--v2-text-invert);
    padding: .7rem .85rem;
    font-size: .95rem;
    font-family: var(--v2-font);
    width: 100%;
    transition: border-color .15s;
}
.v2-wgo-form textarea {
    resize: vertical;
    min-height: 5rem;
    font-family: var(--v2-font);
    line-height: 1.5;
}
.v2-wgo-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%236AF2E5' d='M1.5 4.5 L6 9 L10.5 4.5 Z'/></svg>");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 10px;
    padding-right: 2rem;
    cursor: pointer;
}
.v2-wgo-form input:hover,
.v2-wgo-form input:focus,
.v2-wgo-form textarea:hover,
.v2-wgo-form textarea:focus,
.v2-wgo-form select:hover,
.v2-wgo-form select:focus {
    border-color: rgba(106,242,229,.55);
    outline: none;
}
.v2-wgo-form input::placeholder,
.v2-wgo-form textarea::placeholder {
    color: var(--v2-text-dim);
    opacity: .6;
}
.v2-wgo-form__note {
    font-family: var(--v2-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    color: var(--v2-text-dim);
    text-align: center;
    margin: 0;
}

/* ---- Success state (after POST) ---- */
.v2-wgo-success {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    border-radius: var(--v2-radius-lg);
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(49,217,165,.15), transparent 55%),
        linear-gradient(180deg, var(--v2-ink-2) 0%, #0E1226 100%);
    border: 1px solid rgba(49,217,165,.35);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.v2-wgo-success__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(49,217,165,.15);
    border: 2px solid var(--v2-success);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-success);
    font-size: 2rem;
    line-height: 1;
}
.v2-wgo-success__title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--v2-text-invert);
    margin: 0;
}
.v2-wgo-success__body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--v2-text-dim);
    max-width: 50em;
    margin: 0;
}


/* ============================================================
   LEGAL DOCUMENT LAYOUT (v5 — Privacy, ToS, Free Server Terms)
   ------------------------------------------------------------
   Readable single-column body with a sticky-on-desktop table of
   contents rail. Typography tuned for long-form reading; anchor
   links so sections can be linked to directly.
   ============================================================ */

.v2-legal-doc {
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    border-radius: var(--v2-radius-lg);
    background: rgba(17, 22, 49, .5);
    border: 1px solid var(--v2-line-2);
}
@media (max-width: 575.98px) {
    .v2-legal-doc { padding: 1.5rem 1.25rem; }
}

.v2-legal-doc__updated {
    display: inline-block;
    font-family: var(--v2-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-accent);
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(106,242,229,.08);
    border: 1px solid rgba(106,242,229,.3);
    margin-bottom: 2rem;
}

.v2-legal-doc__toc {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    background: rgba(10,14,31,.5);
    border: 1px solid var(--v2-line-2);
    border-radius: var(--v2-radius-sm);
}
.v2-legal-doc__toc-label {
    font-family: var(--v2-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
    display: block;
    margin-bottom: .75rem;
}
.v2-legal-doc__toc ol {
    list-style: decimal;
    padding-left: 1.25rem;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .35rem 1.5rem;
    font-size: .88rem;
    color: var(--v2-text-dim);
}
.v2-legal-doc__toc ol li::marker { color: var(--v2-accent); }
.v2-legal-doc__toc a {
    color: var(--v2-text-dim);
    text-decoration: none;
    transition: color .15s;
}
.v2-legal-doc__toc a:hover { color: var(--v2-accent); }

.v2-legal-doc h2.v2-legal-doc__h {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--v2-text-invert);
    margin: 2.5rem 0 .75rem;
    padding-top: 1.75rem;
    border-top: 1px dashed var(--v2-line-2);
    scroll-margin-top: 2rem;
}
.v2-legal-doc h2.v2-legal-doc__h:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.v2-legal-doc h3.v2-legal-doc__subh {
    font-size: 1rem;
    font-weight: 600;
    color: var(--v2-text-invert);
    margin: 1.25rem 0 .5rem;
}
.v2-legal-doc p,
.v2-legal-doc li {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--v2-text-dim);
}
.v2-legal-doc p { margin: 0 0 1rem; }
.v2-legal-doc ul,
.v2-legal-doc ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}
.v2-legal-doc ul li,
.v2-legal-doc ol li {
    margin-bottom: .4rem;
}
.v2-legal-doc ul li::marker { color: var(--v2-accent); }
.v2-legal-doc strong {
    color: var(--v2-text-invert);
    font-weight: 600;
}
.v2-legal-doc a {
    color: var(--v2-accent);
    text-decoration: none;
    border-bottom: 1px dotted rgba(106,242,229,.35);
    transition: color .15s, border-color .15s;
}
.v2-legal-doc a:hover {
    color: var(--v2-text-invert);
    border-bottom-color: var(--v2-text-invert);
}

.v2-legal-doc__contact {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--v2-radius-sm);
    background: rgba(106,242,229,.05);
    border: 1px solid rgba(106,242,229,.25);
}
.v2-legal-doc__contact p:last-child { margin-bottom: 0; }
.v2-legal-doc__contact ul { margin: .5rem 0 0; padding-left: 0; list-style: none; }
.v2-legal-doc__contact ul li { padding-left: 0; }