/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[15].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/[locale]/layout.tsx","import":"Montserrat","arguments":[{"subsets":["latin","latin-ext","cyrillic"],"weight":["400","600","700","800","900"],"display":"swap","variable":"--font-montserrat"}],"variableName":"montserrat"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b1f344208eb4edfe-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/48e2044251ef3125-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/bf24a9759715e608-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/1f173e5e25f3efee-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/904be59b21bd51cb-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/b1f344208eb4edfe-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/48e2044251ef3125-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/bf24a9759715e608-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/1f173e5e25f3efee-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/904be59b21bd51cb-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/b1f344208eb4edfe-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/48e2044251ef3125-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/bf24a9759715e608-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/1f173e5e25f3efee-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/904be59b21bd51cb-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/b1f344208eb4edfe-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/48e2044251ef3125-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/bf24a9759715e608-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/1f173e5e25f3efee-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/904be59b21bd51cb-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/b1f344208eb4edfe-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/48e2044251ef3125-s.p.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/bf24a9759715e608-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/1f173e5e25f3efee-s.p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/904be59b21bd51cb-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Montserrat Fallback';src: local("Arial");ascent-override: 85.79%;descent-override: 22.25%;line-gap-override: 0.00%;size-adjust: 112.83%
}.__className_7b49db {font-family: 'Montserrat', 'Montserrat Fallback';font-style: normal
}.__variable_7b49db {--font-montserrat: 'Montserrat', 'Montserrat Fallback'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/design-tokens.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/*
    ============================================================================
    GENERATED FILE — DO NOT EDIT BY HAND.

    Source:    resources/design-system/tokens.mjs
               (byte-identical copy of pterodactylpanel's own tokens.mjs — the
               panel.playnhost.com and playnhost.com design systems share one
               source of truth. Re-sync by copying that file over this one.)
    Generator: resources/design-system/build.mjs
    Regenerate: node resources/design-system/build.mjs

    Dark theme only — this site has no light mode yet. tokens.mjs still carries
    the light theme values so one is available the moment it's needed.

    Hand edits will be overwritten on the next build, and will bypass the WCAG
    contrast gate that the generator enforces. Change tokens.mjs instead.
    ============================================================================
*/
:root {
    /* surface */
    --surface-canvas: #151823;
    --surface-canvas-rgb: 21 24 35;
    --surface-base: #1f2333;
    --surface-base-rgb: 31 35 51;
    --surface-raised: #2a2f41;
    --surface-raised-rgb: 42 47 65;
    --surface-overlay: #363b4f;
    --surface-overlay-rgb: 54 59 79;
    --surface-hover: #42475c;
    --surface-hover-rgb: 66 71 92;
    --surface-active: #4d536a;
    --surface-active-rgb: 77 83 106;

    /* content */
    --content-strong: #f2f3f8;
    --content-strong-rgb: 242 243 248;
    --content-primary: #e3e5ed;
    --content-primary-rgb: 227 229 237;
    --content-secondary: #aeb2c2;
    --content-secondary-rgb: 174 178 194;
    --content-tertiary: #9b9fb0;
    --content-tertiary-rgb: 155 159 176;
    --content-disabled: #65697b;
    --content-disabled-rgb: 101 105 123;
    --content-accent: #aba9f9;
    --content-accent-rgb: 171 169 249;

    /* border */
    --border-subtle: rgb(255 255 255 / 0.06);
    --border-subtle-rgb: 255 255 255;
    --border-subtle-alpha: 0.06;
    --border-default: rgb(255 255 255 / 0.1);
    --border-default-rgb: 255 255 255;
    --border-default-alpha: 0.1;
    --border-strong: rgb(255 255 255 / 0.16);
    --border-strong-rgb: 255 255 255;
    --border-strong-alpha: 0.16;

    /* accent */
    --accent-50: #f0f0ff;
    --accent-50-rgb: 240 240 255;
    --accent-100: #dddcfe;
    --accent-100-rgb: 221 220 254;
    --accent-200: #c1bffc;
    --accent-200-rgb: 193 191 252;
    --accent-300: #a19ff9;
    --accent-300-rgb: 161 159 249;
    --accent-400: #8784f5;
    --accent-400-rgb: 135 132 245;
    --accent-500: #706ef1;
    --accent-500-rgb: 112 110 241;
    --accent-600: #5754e3;
    --accent-600-rgb: 87 84 227;
    --accent-700: #3b37d2;
    --accent-700-rgb: 59 55 210;
    --accent-800: #312ea8;
    --accent-800-rgb: 49 46 168;
    --accent-900: #2c2a84;
    --accent-900-rgb: 44 42 132;
    --accent-tint: rgb(112 110 241 / 0.14);
    --accent-tint-rgb: 112 110 241;
    --accent-tint-alpha: 0.14;
    --accent-border: rgb(112 110 241 / 0.32);
    --accent-border-rgb: 112 110 241;
    --accent-border-alpha: 0.32;
    --accent-ring: rgb(112 110 241 / 0.55);
    --accent-ring-rgb: 112 110 241;
    --accent-ring-alpha: 0.55;

    /* status */
    --status-success-base: #30b577;
    --status-success-base-rgb: 48 181 119;
    --status-success-text: #62daa2;
    --status-success-text-rgb: 98 218 162;
    --status-success-tint: rgb(48 181 119 / 0.14);
    --status-success-tint-rgb: 48 181 119;
    --status-success-tint-alpha: 0.14;
    --status-warning-base: #f59f0a;
    --status-warning-base-rgb: 245 159 10;
    --status-warning-text: #fab742;
    --status-warning-text-rgb: 250 183 66;
    --status-warning-tint: rgb(245 159 10 / 0.14);
    --status-warning-tint-rgb: 245 159 10;
    --status-warning-tint-alpha: 0.14;
    --status-danger-base: #df3a3a;
    --status-danger-base-rgb: 223 58 58;
    --status-danger-text: #f47676;
    --status-danger-text-rgb: 244 118 118;
    --status-danger-tint: rgb(223 58 58 / 0.14);
    --status-danger-tint-rgb: 223 58 58;
    --status-danger-tint-alpha: 0.14;
    --status-info-base: #2398e7;
    --status-info-base-rgb: 35 152 231;
    --status-info-text: #6fc0f6;
    --status-info-text-rgb: 111 192 246;
    --status-info-tint: rgb(35 152 231 / 0.14);
    --status-info-tint-rgb: 35 152 231;
    --status-info-tint-alpha: 0.14;

    /* pure */
    --pure-white: #ffffff;
    --pure-white-rgb: 255 255 255;
    --pure-black: #000000;
    --pure-black-rgb: 0 0 0;

    /* typography */
    --text-2xs: 0.625rem;
    --leading-2xs: 1.4;
    --text-xs: 0.6875rem;
    --leading-xs: 1.45;
    --text-sm: 0.8125rem;
    --leading-sm: 1.5;
    --text-md: 0.875rem;
    --leading-md: 1.45;
    --text-lg: 1rem;
    --leading-lg: 1.5;
    --text-xl: 1.125rem;
    --leading-xl: 1.45;
    --text-2xl: 1.375rem;
    --leading-2xl: 1.35;
    --text-3xl: 1.75rem;
    --leading-3xl: 1.28;
    --text-4xl: 2.125rem;
    --leading-4xl: 1.22;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* radius */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;
    --radius-full: 9999px;

    /* elevation */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.18);
    --shadow-md: 0 2px 8px -1px rgb(0 0 0 / 0.24);
    --shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 0.32);
    --shadow-xl: 0 20px 48px -8px rgb(0 0 0 / 0.44);
    --shadow-focus: 0 0 0 2px hsl(241.35 82.85% 68.8% / 0.55);

    /* motion */
    --duration-instant: 80ms;
    --duration-fast: 140ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --duration-slower: 480ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1-5: 0.375rem;
    --space-2-5: 0.625rem;

    /* layering */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 20;
    --z-dropdown: 30;
    --z-overlay: 40;
    --z-modal: 50;
    --z-toast: 60;
    --z-tooltip: 70;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 1ms;
        --duration-fast: 1ms;
        --duration-base: 1ms;
        --duration-slow: 1ms;
        --duration-slower: 1ms;
    }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/ui/ui.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
/*
 * PLAYNHOST production UI primitives — styled entirely off the canonical
 * design tokens in src/styles/design-tokens.css (generated from
 * resources/design-system/tokens.mjs, shared with panel.playnhost.com).
 * Imported once, site-wide, via src/styles/bundle.css.
 */

/* ─────────────────────────────────────────────────────────────────────────
   Button
───────────────────────────────────────────────────────────────────────── */

:is(.ui-btn, .btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

:is(.ui-btn, .btn):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

:is(.ui-btn, .btn):active {
  transform: scale(var(--press-scale, 0.97));
}

:is(.ui-btn, .btn):disabled,
:is(.ui-btn, .btn)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

/* Default size. `buttonClasses()` omits the `--md` modifier for the default
   size, so without this a size-less button gets no height at all and collapses
   to its line box -- which is what the homepage's "See more" was doing. The
   modifiers below come later in the file and override it. */
:is(.ui-btn, .btn) {
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-md);
}

:is(.ui-btn--sm, .btn--sm) {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}
:is(.ui-btn--md, .btn--md) {
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-md);
}
:is(.ui-btn--lg, .btn--lg) {
  height: 48px;
  padding: 0 var(--space-6);
  font-size: var(--text-lg);
}

:is(.ui-btn--primary, .btn--primary) {
  background: var(--accent-500);
  color: #fff;
}
:is(.ui-btn--primary, .btn--primary):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--accent-600);
}

:is(.ui-btn--secondary, .btn--secondary) {
  background: var(--surface-overlay);
  color: var(--content-primary);
  background-color: var(--surface-overlay);
}
:is(.ui-btn--secondary, .btn--secondary):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--surface-hover);
}

:is(.ui-btn--ghost, .btn--ghost) {
  background: transparent;
  color: var(--content-primary);
}
:is(.ui-btn--ghost, .btn--ghost):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--surface-overlay);
}

:is(.ui-btn--danger, .btn--danger) {
  background: var(--status-danger-base);
  color: #fff;
}
:is(.ui-btn--danger, .btn--danger):hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(1.1);
}

:is(.ui-btn--loading, .btn--loading) :is(.ui-btn__label, .btn__label) {
  opacity: 0.7;
}
:is(.ui-btn__spinner, .btn__spinner) {
  width: 1em;
  height: 1em;
  border-radius: var(--radius-full);
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: #fff;
  animation: ui-spin var(--duration-slower) linear infinite;
}
:is(.ui-btn--secondary, .btn--secondary) :is(.ui-btn__spinner, .btn__spinner),
:is(.ui-btn--ghost, .btn--ghost) :is(.ui-btn__spinner, .btn__spinner) {
  border-color: rgb(var(--content-primary-rgb) / 0.3);
  border-top-color: var(--content-primary);
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.ui-btn__spinner, .btn__spinner) {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Card
───────────────────────────────────────────────────────────────────────── */

.ui-card {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.ui-card--raised {
  background: var(--surface-raised);
  border: none;
  box-shadow: var(--shadow-md);
}

.ui-card--flat {
  background: transparent;
  border: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Badge
───────────────────────────────────────────────────────────────────────── */

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  line-height: 1;
}

.ui-badge--sm {
  height: 20px;
  padding: 0 var(--space-2);
  font-size: var(--text-2xs);
}
.ui-badge--md {
  height: 24px;
  padding: 0 var(--space-2-5);
  font-size: var(--text-xs);
}
.ui-badge--lg {
  height: 28px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

.ui-badge--neutral {
  background: var(--surface-overlay);
  color: var(--content-secondary);
}
.ui-badge--accent {
  background: var(--accent-tint);
  color: var(--content-accent);
}
.ui-badge--success {
  background: var(--status-success-tint);
  color: var(--status-success-text);
}
.ui-badge--warning {
  background: var(--status-warning-tint);
  color: var(--status-warning-text);
}
.ui-badge--danger {
  background: var(--status-danger-tint);
  color: var(--status-danger-text);
}

/* ─────────────────────────────────────────────────────────────────────────
   Input / Select shared field chrome
───────────────────────────────────────────────────────────────────────── */

.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  width: 100%;
}

.ui-field__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--content-secondary);
}

.ui-field__input {
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-overlay);
  color: var(--content-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.ui-field__input::placeholder {
  color: var(--content-tertiary);
}

.ui-field__input:focus {
  outline: none;
  outline: none;
  box-shadow: var(--shadow-focus);
}

.ui-field--error .ui-field__input {
  box-shadow: 0 0 0 2px var(--status-danger-base);
}

.ui-field__error {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--status-danger-text);
}

/* ─────────────────────────────────────────────────────────────────────────
   Select — custom listbox, generalizes the .om-select pattern already used
   in OrderModal/SubdomainCreator onto the canonical tokens.
───────────────────────────────────────────────────────────────────────── */

.ui-select {
  position: relative;
}

.ui-select__trigger {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-overlay);
  color: var(--content-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.ui-select__trigger:hover {
  background-color: var(--surface-hover);
}
.ui-select__trigger[aria-expanded="true"] {
  background-color: var(--surface-hover);
}

.ui-select__chevron {
  flex-shrink: 0;
  color: var(--content-tertiary);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.ui-select__trigger[aria-expanded="true"] .ui-select__chevron {
  transform: rotate(180deg);
}

.ui-select__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--space-1-5));
  background: var(--surface-overlay);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1-5);
  max-height: 260px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
}

.ui-select__option {
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--content-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.ui-select__option:hover {
  background: var(--surface-hover);
}
.ui-select__option.is-selected {
  background: var(--accent-tint);
  color: var(--content-accent);
  font-weight: var(--font-semibold);
}

/* ─────────────────────────────────────────────────────────────────────────
   Section / Container
───────────────────────────────────────────────────────────────────────── */

.ui-section {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.ui-section--canvas {
  background: var(--surface-canvas);
}

.ui-section--raised {
  background: var(--surface-base);
}

.ui-section__hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  text-align: center;
}

.ui-section__title {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  font-size: var(--text-4xl);
  line-height: 1.15;
  color: var(--content-strong);
  margin: 0 0 var(--space-4);
}

.ui-section__text {
  font-size: var(--text-lg);
  color: var(--content-secondary);
  max-width: 60ch;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .ui-section__title {
    font-size: var(--text-3xl);
  }
  .ui-section__text {
    font-size: var(--text-md);
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/99-global.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/

/* ────────────────────────────────
   Design tokens.

   Canonical color/radius/spacing/type/shadow scale lives in
   design-tokens.css (generated from resources/design-system/tokens.mjs —
   a byte-identical copy of the panel's own token source). This block only
   defines the site's OWN legacy variable names as aliases onto the
   canonical tokens, so the many files under legacy/ that already reference
   --accent, --color-success, etc. keep working while genuinely deriving
   from one shared source instead of redeclaring it.

   --radius-xs/sm/md/lg/xl and --accent-tint are intentionally NOT
   redeclared here — those names are identical to the canonical ones in
   design-tokens.css (loaded first in bundle.css), so simply not overriding
   them lets the canonical values flow straight through.
──────────────────────────────── */
:root {
  /* Montserrat is self-hosted by next/font, which emits a build-hashed family
     name and exposes it as --font-montserrat. The generated token names the
     family literally ('Montserrat'), which now resolves to nothing since no
     CDN stylesheet declares it — so re-point --font-sans here rather than
     hand-editing the generated file. Same fallback chain as the token. */
  --font-sans: var(--font-montserrat), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* DEPRECATED alias. Every homepage/legacy usage now references --radius-full
     directly; this stays only until nothing outside src/styles/legacy relies on
     it. Two names for one shape is how a scale drifts. */
  --radius-pill: var(--radius-full);

  /* Panel layering — same 3-tier surface roles as the panel's card/nested/hover surfaces */
  --panel-bg-1: var(--surface-raised);  /* base card/panel */
  --panel-bg-2: var(--surface-overlay); /* nested/elevated surface */
  --panel-bg-3: var(--surface-hover);   /* hover surface */

  /* Typography weights — site-specific, not part of the shared token set */
  --fw-body: 400;
  --fw-label: 600;    /* buttons, small labels */
  --fw-heading: 900;  /* section titles */

  /* Elevation — soft layered shadows for depth. Deliberately heavier than the
     panel's own --shadow-* scale: the panel keeps shadows restrained (an
     operations tool where the surface ramp does the elevation work), while
     this marketing site uses shadow for hero/card depth. Named
     --shadow-soft-* (not --shadow-sm/md/lg) so it never collides with the
     canonical --shadow-sm/md/lg from design-tokens.css. */
  --shadow-soft-sm: 0 2px 8px rgba(0,0,0,0.14);
  --shadow-soft-md: 0 10px 28px rgba(0,0,0,0.20);
  --shadow-soft-lg: 0 18px 44px rgba(0,0,0,0.30);
  --shadow-elevated: 0 32px 68px rgba(0,0,0,0.3);

  /* Motion + surfaces */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --border-subtle: none;
  --border-hover: 1px solid rgb(var(--accent-500-rgb) / 0.45);
  --accent: var(--accent-500);
  --color-accent: var(--accent-500); /* alias of --accent under the name choose-plan.css uses */
  --accent-hover: var(--accent-600);
  --color-text-muted: var(--content-secondary); /* alias under the name several files use */
  --accent-tint-strong: rgba(112,110,241,0.25); /* selected option/row — no 1:1 canonical equivalent */

  /* Status colors */
  --color-success: var(--status-success-base);
  --color-success-tint: var(--status-success-tint);
  --color-warning: var(--status-warning-base);
  --color-warning-tint: var(--status-warning-tint);
  --color-info: var(--status-info-base);
  --color-info-tint: var(--status-info-tint);
  --color-danger: var(--status-danger-base);
  --color-danger-tint: var(--status-danger-tint);

  /* Button hover motion — matches the panel: opacity fade + press-scale, no lift */
  --hover-opacity: 0.85;
  --press-scale: 0.97;
}

/* ────────────────────────────────
   Generic Page Background (Dynamic)
──────────────────────────────── */

/* Hugo set a --page-bg custom property inline on <body> and painted it here.
   The Next port kept the hook but neutralized the paint, so page backgrounds
   were off site-wide even though every game still carried a backgroundImage.

   Both halves are gone now. Page backgrounds are server-rendered elements at
   z-index -1 instead — .home-hero-backdrop (home-hero.css) and .gp-backdrop
   (gp-hero.css) — because the App Router's <body> belongs to the layout and a
   page cannot style it inline without client-side JS. The rule that used to
   sit here matched body[style*="--page-bg"], which nothing has set since the
   port, so it was dead as well as wrong. */

/* Keeps page content above those z-index -1 backdrops. Load-bearing: without
   it they paint over the page rather than behind it. */
body > * {
  position: relative;
  z-index: 1;
}

/*
 * Full-bleed page-header artwork, for any page whose first section is NOT
 * already 100vw.
 *
 * The .title-section / .t-section family carries its own bleed (width:100vw +
 * margin-left:-50vw), so those take the background directly. Every other page
 * header — .ab-lead, .pol-wrap, .hl-hero, .panel-hero, .mp-hero,
 * .giftcards-hero — sits inside .container at max-width 1280, where a
 * background would stop at the content column and look like a floating band.
 * This paints the artwork on a ::before that escapes to viewport width.
 *
 * Usage: add `page-bg` to the section and set --section-bg on it.
 *   <section className="ab-lead page-bg" style={{ "--section-bg": "url('…')" }}>
 *
 * Same geometry and gradient stops as .gp-backdrop on the single game pages,
 * so every header on the site fades onto the surface token identically.
 */
.page-bg {
  position: relative;
}

.page-bg::before {
  content: "";
  position: absolute;
  /* Up behind the fixed transparent header — matches body's padding-top. */
  top: -110px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      rgb(var(--surface-base-rgb) / 0.55) 0%,
      rgb(var(--surface-base-rgb) / 0.68) 45%,
      rgb(var(--surface-base-rgb) / 0.9) 80%,
      var(--surface-base) 100%
    ),
    var(--section-bg, none) center top / cover no-repeat;
}






/* global reset + no-overflow */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  width: 100%;
  font-family: var(--font-sans);
}
/* The page color lives on html (the canvas). body stays transparent so
   negative-z-index layers (homepage hero backdrop) paint above the canvas
   instead of being covered by an opaque body background. */
html { background: var(--surface-base); }
body { background: transparent; }










img,
picture,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}


.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-4);        /* ← change this to taste */
  /* Undo "body > *" forcing position:relative here -- that turns .container
     into a stacking context, which traps every fixed-position element inside
     it (modals, etc.) so it can only ever compare its z-index as a whole
     against the header, instead of each element comparing individually. */
  position: static;
}







/*────────────────────────────────────────────
  BLOG READING PROGRESS BAR — BELOW HEADER
  `top` is set in JS to the header's live bottom edge so it stays pinned
  under the header on every screen size, scrolled or not. The value below
  is only a no-JS fallback.
────────────────────────────────────────────*/
.reading-progress {
  position: fixed;
  top: 102px;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--accent-500);
  z-index: 9999;
  transition: width 0.15s ease-out;
  pointer-events: none;
}





















/* ==== CookieConsent v3 — custom look ==== */
.show--consent #cc-main .cc--anim .cm{
  font-family: var(--font-sans);
}

.show--preferences #cc-main .cc--anim .pm--box{
  background-color: var(--surface-raised) !important;
}

#cc-main .pm__title{
  color: var(--content-strong) !important;
}

#cc-main .cm--cloud .cm__desc{
  color: var(--content-tertiary) !important;
  line-height: var(--leading-lg) !important;
  font-weight: var(--font-normal) !important; /* was 600px — invalid, so the declaration was dropped */
}

#cc-main .cm{
    background: var(--surface-raised) !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    color: var(--content-strong) !important;

    border: none !important;
}

#cc-main .cm__btn{
    background: var(--accent);
    color: var(--pure-white);
    text-decoration: none;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-lg);
    cursor: pointer;
}


#cc-main .cm__btn:hover{
    background: var(--accent-600);
    color: var(--pure-white);
    text-decoration: none;
}

#cc-main .cm__btn--secondary{
    background: var(--pure-white) !important;
    color: var(--surface-canvas) !important;
}

#cc-main .cm__btn--secondary:hover{
    background:  var(--content-strong);
    color: var(--surface-canvas) !important;
}



#cc-main .cm--cloud .cm__btns{
  border-left: none !important;
}


#cc-main .pm__section--toggle{
  background-color: transparent;
}



#cc-main .pm__section--toggle .pm__section-title {
    background: var(--surface-overlay);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--pure-white);
    text-decoration: none;
    outline: none;
}


#cc-main .pm__section--toggle .pm__section-title:hover {
  border: none !important;
}

#cc-main .pm__section-title-wrapper:hover{
  border: none !important;
}



#cc-main:hover .pm__section--toggle:hover .pm__section-title:hover {
    background: var(--surface-overlay);
    text-decoration: none;
    outline: none;
}




#cc-main .pm__section--toggle .pm__section-desc {
    margin-top: 0;
    padding: 1em;
    color: var(--content-tertiary);
    font-weight: 600;
    /* border-radius: var(--radius-sm); */
}

#cc-main .pm__section--toggle .pm__section-desc-wrapper{
    border: none;
    background: var(--surface-overlay);
}

#cc-main .pm__footer{
  border-top: none;
}




#cc-main .pm__btn{
    background: var(--accent-500);
    color: var(--pure-white);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
}


#cc-main .pm__btn:hover{
    background:var(--accent-600);
    color: var(--pure-white);
    text-decoration: none;
}


.pm__btn--secondary{
    background: var(--pure-white) !important;
    color: var(--surface-canvas) !important;
    text-decoration: none !important;
    border: none !important;
}

.pm__btn--secondary:hover{
    background: var(--content-strong) !important;
    color: var(--surface-canvas) !important;
    text-decoration: none !important;
}




#cc-main .pm__close-btn {
    background: var(--surface-overlay);
    border: none;
}

#cc-main .pm__close-btn:hover {
    background: var(--surface-overlay);
}



.pm__close-btn svg {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(15deg) brightness(103%) contrast(102%);
}



#cc-main .pm__header {
    border-bottom: none;
}


#cc-main .cc--anim .pm, #cc-main .cc--anim .pm-overlay {
    transition: none !important;
}


@media screen and (max-width: 640px) {
    #cc-main .cm__btns{
      border-top: none !important;
    }
  }




/* .cookie-fab removed — the live reopen button is .cc-fab (consent.css), which
   already has a proper focus ring. This rule matched nothing, killed the focus
   outline with !important, and its mobile override set `right` without
   clearing `left`, so it never moved the button anyway. */

/* ────────────────────────────────
   Secure and trusted payments strip (shown under pricing cards)
──────────────────────────────── */
.secure-payments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
  /* The strip is the last child of .choose-plan-section, which has no bottom
     spacing of its own, and the features block that follows is full-bleed with
     no top margin — so without this the logos sat flush against the purple
     band. Mirrors the top margin so the strip is evenly inset between the two. */
  margin-bottom: var(--space-10);
  text-align: center;
}
.secure-payments__text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--content-secondary);
  font-size: var(--text-md);
  font-weight: var(--font-normal);
}
.secure-payments__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--content-tertiary);
}
/* A list of individual brand marks, not one composite image. The old rule
   styled a single <img> of all seven logos baked together, which cannot be
   reordered, cannot drop a provider, and ships every logo at whatever size
   the sprite was exported at. */
.secure-payments__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* White chip behind each mark. Card-scheme logos are drawn for light
   backgrounds and several are near-black, so on the page surface they
   would disappear. */
/* Wide chip, and the mark is scaled past the chip's height so the chip crops
   it rather than framing it.

   The assets are 375x375 SQUARES with a wide brand mark centred inside, so
   their empty bands are part of the file: fitting the whole square inside the
   chip renders the mark at a fraction of the chip's height and floats it in
   white, which is what a square chip was papering over. Oversizing the square
   and clipping the bands is what actually makes the mark fill the rectangle. */
.secure-payments__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 76px;
  block-size: 38px;
  /* As tight as it goes; the visual breathing room is inside the asset. */
  padding: 0;
  overflow: hidden;
  background: var(--pure-white);
  border-radius: var(--radius-sm);
}

.secure-payments__logo img {
  /* 1.5x the chip height: the square asset is cropped top and bottom so the
     mark itself fills the rectangle instead of floating in white. */
  block-size: 57px;
  inline-size: auto;
  max-block-size: none;
  max-inline-size: none;
  display: block;
  flex-shrink: 0;
}

/* The small-raised cents effect is reserved for the plan card's final price
   (.plan-card__new .price-cents / .minecraft-plan-card__new .price-cents) —
   modal breakdown rows, billing-cycle dropdown prices, and barred/original
   prices render at normal size. */
.price-cents-sm {
  font-size: inherit;
  vertical-align: baseline;
}









/* ── Form-control typography reset ───────────────────────────────────────
   Buttons, inputs and selects do not inherit the page font by default: the
   UA gives them its own family at 13.3333px. An audit of the homepage found
   60 elements rendering at that size — every <button> without an explicit
   font-size, including the map pins and the panel tabs.

   The rebuilt system does this in reset.css; legacy never had a form reset,
   so it belongs here until that swap happens. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ── Flags ───────────────────────────────────────────────────────────────
   flag-icons ships `.fi { width: 1.333em; background-size: contain; }`, so the
   box is sized by whatever font surrounds it and the flag is letterboxed inside
   rather than filling. That produced a 21×24 box holding a 21×16 image.

   Pinned to a fixed 4:3 box the image fills, at --radius-xs, matching the
   design system. Two classes so it beats the library's single-class rule
   regardless of stylesheet order. */
.fi.om-flag,
.preferences-btn .fi,
.fi.region__flag,
.hl-location-panel__list .fi {
  inline-size: 1.5rem;
  block-size: 1.125rem;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xs);
  flex: none;
  box-shadow: none;
}


/* ── Anchor reset ────────────────────────────────────────────────────────
   Legacy has no anchor reset, so any link whose component rule does not set a
   colour falls back to the user-agent blue and underline. An audit found 27
   such links — mostly ones wrapping an image, where there was no text to make
   it obvious, plus the mega-menu game cards once `.site-nav a` was correctly
   scoped to direct nav links.

   `:where()` contributes zero specificity, so every component rule still wins;
   this only supplies a floor. The rebuilt system does the same in reset.css. */
:where(a) {
  color: inherit;
  text-decoration: none;
}

/* ── Price typography ─────────────────────────────────────────────────
   The currency symbol and the cents read smaller than the whole-dollar
   figure, so the number people actually compare is the one that carries
   the weight.

   These live here rather than beside one card because three components
   render prices — the game plan cards, the Minecraft plan cards and the
   order modal — and they had drifted onto three different conventions.
   `.price-affix` / `.price-cents` are what components/shared/Price.tsx
   emits. */
.price-affix {
  font-size: 0.55em;
  font-weight: 700;
}
.price-cents {
  font-size: 0.55em;
  font-weight: 700;
  /* Raised against the cap height rather than the baseline, so the cents sit
     with the top of the digits instead of floating above them. */
  vertical-align: 0.55em;
}

/* Struck price, current price and the /month unit are one line that has to
   survive narrow cards. Wrapping is allowed and the whole row stays centred
   rather than overflowing the card. */
.plan-card__prices,
.minecraft-plan-card__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}
.plan-card__old,
.minecraft-plan-card__old,
.plan-card__unit,
.minecraft-plan-card__unit {
  white-space: nowrap;
}

/* ────────────────────────────────
   Skip link

   First focusable thing on the page. Off-screen until focused, then pinned
   to the top-left over the header — the header is a preheader, logo, nav and
   currency switcher deep, and without this reaching page content from the
   keyboard means tabbing through all of it on every route.
──────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: 100000;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--accent-500);
  color: var(--pure-white);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-soft-md);
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-4);
}

.skip-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), var(--shadow-soft-md);
}

/* The target is <main id="main">, which is not focusable by default — without
   this the skip link moves the scroll position but leaves focus behind in the
   header, so the next Tab goes back to the nav. */
#main:focus {
  outline: none;
}

/* The billing term, under a per-month figure.
   An annual price is shown per month so it compares against the monthly one,
   which makes saying the actual term mandatory rather than decorative. */
.plan-card__billed-as {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/home-hero.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────────────────
   HOME HERO — conversion-first, centered
   (replaces the old game-tabs hero)
───────────────────────────────────────────────────────── */

/* ── Full-viewport backdrop (behind the transparent fixed header + hero) ──
   Pinned to the document top; .container and .home-hero stay unpositioned so
   this resolves against the page, not the centered content column. */
.home-hero-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.home-hero-backdrop__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.45s var(--ease, ease);
}
.home-hero-backdrop__img.is-active { opacity: 1; }

/* Image fades out top → bottom, reaching the flat page background around the
   search bar (~60% down) so the lower half of the hero sits on the flat surface token. */
.home-hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(31, 35, 51, 0.55) 0%,
    rgba(31, 35, 51, 0.68) 30%,
    rgba(31, 35, 51, 0.9) 52%,
    var(--surface-base) 62%
  );
}

.home-hero {
  /* One section rhythm, from the space scale. Was a bespoke fluid clamp with a
     different curve from every other section on the page. */
  padding: var(--space-16) var(--space-5);
  text-align: center;
}

.home-hero__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* ── Headline ── */
.home-hero__title {
  margin: 0;
  font-weight: var(--fw-heading, 900);
  font-size: clamp(2rem, 5.5vw + 0.5rem, 3.75rem); /* aligned to --display-1 */
  line-height: 1.08;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
/* Game name always alone on the first line; "GAME SERVER HOSTING" on the next */
.home-hero__title-accent {
  display: block;
  color: var(--accent, var(--accent-500));
}
.home-hero__title-rest   { color: var(--pure-white); }

/* Touch auto-cycle swaps the game name every few seconds; some names wrap to
   two lines. Reserve two lines of height (bottom-aligned so the name stays
   glued to "GAME SERVER HOSTING") so nothing below the title ever shifts. */
.home-hero.is-cycling .home-hero__title-accent {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 2.16em; /* two lines at the title's 1.08 line-height */
}

.home-hero__sub {
  /* Shared section-subtitle spec — identical in every section. The hero keeps
     its own margin and nowrap; only the type is unified. */
  margin: 0;
  font-size: var(--text-lg);
  color: var(--content-secondary);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
  max-inline-size: 60ch;
  white-space: nowrap;
}

/* ── Trust chips ── */
.home-hero__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2-5);
  margin: 0;
  padding: 0;
}

.home-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  color: var(--content-strong);
  font-size: var(--text-sm);
  font-weight: var(--fw-label, 600);
  white-space: nowrap;
}

.home-hero__chip svg {
  width: 16px;
  height: 16px;
  color: var(--content-accent);
  flex-shrink: 0;
}

/* ── Game search (primary action) ── */
.home-hero__search {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-top: var(--space-1-5);
}

.home-hero__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--content-tertiary);
  pointer-events: none;
}

.home-hero__search-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
  /* Control → --radius-md. Was --radius-xs, the 4px checkbox step. */
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-overlay);
  color: var(--pure-white);
  font-size: var(--text-lg);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}
.home-hero__search-input::placeholder { color: var(--content-tertiary); }
.home-hero__search-input:focus { border-color: var(--accent, var(--accent-500)); }

/* Results panel — same family as .om-select__panel */
.home-hero__search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  /* Floating surface: --radius-lg, and a surface token rather than a hex
     fallback. Radius is assigned by role — surfaces 14, the controls inside
     them 10 — so a panel is always rounder than its rows. */
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-1-5);
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: none;
  text-align: left;
  box-shadow: var(--shadow-soft-md);
}
.home-hero__search-panel[hidden] { display: none; }

.home-hero__search-option {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3);
  color: var(--content-secondary);
  font-size: var(--text-md);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.home-hero__search-option:hover,
.home-hero__search-option:focus {
  background: var(--accent-tint, rgba(112,110,241,0.12));
  color: var(--pure-white);
  outline: none;
}

.home-hero__search-option img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.home-hero__search-name { flex: 1 1; }

/* "Starting at US$X" on the right of each result */
.home-hero__search-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1-5);
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--content-secondary);
  white-space: nowrap;
}
.home-hero__search-price strong {
  color: var(--pure-white);
  font-size: var(--text-sm);
  font-weight: 800;
}
.home-hero__search-price[hidden] { display: none; }

.home-hero__search-soon {
  background: var(--accent, var(--accent-500));
  color: var(--pure-white);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.home-hero__search-empty {
  padding: var(--space-4) var(--space-3);
  color: var(--content-secondary);
  font-size: var(--text-md);
  font-weight: 600;
}

/* ── Quick-pick favicon tiles — all 8 on a single row ── */
.home-hero__picks {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2-5);
  width: 100%;
}

.home-hero__pick {
  position: relative;
  flex: 1 1;
  min-width: 0;
  max-width: 96px;
  /* Surface → --radius-lg, matching every other tile/card on the page. */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-raised);
  opacity: .9;
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}
/* Ground and opacity, no lift — the last element on the homepage that jumped
   toward the cursor. Eight tiles doing it at once is the effect removed from
   the feature cards, resource tiles and promo banner. */
.home-hero__pick:hover {
  opacity: 1;
  background-color: var(--surface-hover);
}

.home-hero__pick img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-hero__pick-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background: var(--accent, var(--accent-500));
  color: var(--pure-white);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-1-5);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ── Actions row ── */
.home-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1-5);
}

/* Color/radius/motion come from .ui-btn (src/components/ui/ui.css) — this
   just re-adds the gap the hero icon+label layout expects. */
.home-hero__all-btn {
  gap: var(--space-2-5);
  text-decoration: none;
}

.home-hero__all-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.home-hero__from {
  margin: 0;
  font-size: var(--text-md);
  color: var(--content-secondary);
  font-weight: 600;
}
.home-hero__from strong { color: var(--pure-white); font-weight: 800; }
.home-hero__from-cycle { opacity: 0.8; }
.home-hero__from[hidden] { display: none; }

/* ── Mobile: let the 8 tiles wrap onto multiple rows ── */
@media (max-width: 720px) {
  /* Sub text can't fit one line on small screens — allow it to wrap */
  .home-hero__sub { white-space: normal; max-width: 560px; }
}
@media (max-width: 560px) {
  .home-hero__picks { flex-wrap: wrap; gap: var(--space-2-5); }
  .home-hero__pick { flex-grow: 0; flex-shrink: 0; flex-basis: calc(25% - 8px); max-width: calc(25% - 8px); }
  .home-hero__chips { gap: var(--space-2); }
  .home-hero__chip { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/01-header.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/* The header pins itself directly below the announcement bar, so the two have
   to agree on its height. One declaration, consumed by .preheader's `height`
   and .header-container's `top`. They had drifted 4px apart — a hardcoded
   35px against an actual 39px — which showed as a hairline of page between
   the two bars. Declared on :root because .header-container is a *sibling* of
   .preheader, and custom properties inherit down the tree, not sideways. */
:root {
  --preheader-h: 39px;
}

/*────────────────────────────────────────────
  BODY SPACING — keep content below header
────────────────────────────────────────────*/
body {
  padding-top: 110px; /* matches header height (adjust as needed) */
  transition: padding-top 0.3s ease;
}

/*────────────────────────────────────────────
  PREHEADER (visible before scroll)
────────────────────────────────────────────*/
.preheader {
  position: fixed;
  height: var(--preheader-h);
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  color: var(--pure-white);
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-md);
  z-index: 1001;
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* Solid background once scrolled so it never shows page content through it */
body.scrolled .preheader {
  background: var(--surface-base);
}

/* Hide preheader when user scrolls */
body.scrolled.scroll-down .preheader {
  transform: translateY(-100%);
  opacity: 0;
}

.preheader__announcement {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  text-align: left;
}

/* The offer line was one flat block of white, so the sentence competed with
   the hook instead of supporting it. Dim the sentence and keep the <b> white:
   "Save up to 30%" stays the thing the eye lands on.

   Set on the text span alone, not on .preheader__announcement, so the NEW
   badge and the megaphone keep their own colours. #aeb2c2 on the scrolled
   bar's #1f2333 is 7.4:1, past AAA for body text. */
.preheader__text {
  color: var(--content-secondary);
}
.preheader__text :is(b, strong) {
  color: var(--pure-white);
}

.preheader__links {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-shrink: 0;
}

.preheader__link {
  color: var(--content-strong);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.preheader__link:hover {
  color: var(--pure-white);
}

.preheader__sep {
  color: var(--content-tertiary);
}

@media (max-width: 700px) {
  .preheader {
    justify-content: center;
  }
  .preheader__links {
    display: none;
  }
}

/*────────────────────────────────────────────
  HEADER CONTAINER (your version, refined)
────────────────────────────────────────────*/
.header-container {
  position: fixed;
  top: var(--preheader-h); /* sits flush under the announcement bar */
  z-index: 1000;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, top 0.3s ease, opacity 0.2s ease, filter 0.2s ease;
  width: 100%;
  padding: 0 var(--space-4);
  margin-top: 0;
  margin-bottom: 210px; /* spacing for content below */
}

/* Dim the header behind any open modal (order modal, preferences modal).
   Target .site-header, NOT .header-container: the preferences modal overlay
   is a fixed-position child of .header-container, and putting a `filter` on
   .header-container would make it the containing block for that overlay,
   clipping the modal to the header's box. .site-header holds all the visible
   nav content and is a *sibling* of the modal, so dimming it is safe. */
body.has-modal-open .preheader,
body.has-modal-open .site-header {
  opacity: 0.35;
  filter: blur(1.5px);
  pointer-events: none;
}

/* When user scrolls: preheader hides, header moves up */
body.scrolled .header-container {
  background: var(--surface-base);
  margin: 0 auto;
  width: 100%;
}
body.scrolled.scroll-down .header-container {
  top: 0; /* move up to top when the announcement bar hides */
}
body.scrolled:not(.scroll-down) .header-container {
  top: var(--preheader-h); /* leave room for the reappeared announcement bar */
}






.badge {
  background: var(--accent, var(--accent-500));
  color: var(--pure-white);
  padding: var(--space-0-5) var(--space-2-5);
  /* --radius-xs, the same corner as the "% off" badges (.plan-card__discount,
     .billing-toggle__discount) — this sits at the same --text-2xs scale, and
     small labelled badges share one radius across the site. It was a pill to
     match the hero capability chips; those are --radius-md now, so that
     pairing no longer holds. */
  border-radius: var(--radius-xs);
  margin-right: var(--space-2);
  font-weight: var(--font-bold);
  font-size: var(--text-2xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/*────────────────────────────────────────────
  HEADER WRAPPER
────────────────────────────────────────────*/



/*────────────────────────────────────────────
  STICKY HEADER WITH BLACK BACKGROUND ON SCROLL
────────────────────────────────────────────*/
/*────────────────────────────────────────────
  STICKY MAIN HEADER + BLACK BG ON SCROLL
────────────────────────────────────────────*/




/*────────────────────────────────────────────
  SITE HEADER
────────────────────────────────────────────*/
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) 0;
  position: relative;
  z-index: 50;
}
.site-logo img {
  height: 70px;
  margin-right: var(--space-8);
  transition: transform 0.3s ease;
  text-decoration: none;
  
}

/* No hover transform on the logo. It is a link home; the cursor already says
   so, and a 2deg rotate on the brand mark is motion spent on chrome. */


/*────────────────────────────────────────────
  DESKTOP NAV
────────────────────────────────────────────*/
.site-nav {
  margin-right: auto; /* keep nav next to logo, push buttons + prefs to the right */
  /* Full header height, so a nav item's bottom edge IS the header's bottom
     edge. The dropdown panels hang off that edge (top: 100% below); when the
     nav was only as tall as its own text, centred in a taller header, the
     panels started mid-bar and their fill painted over the header. */
  align-self: stretch;
  display: flex;
}
.site-nav > ul {
  display: flex;
  flex-wrap: nowrap;          /* never let items spill to a second line */
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Items span the bar; the links inside stay vertically centred. */
  align-items: stretch;
}
.site-nav > ul > li {
  display: flex;
  align-items: center;
}
/* Scoped to DIRECT nav links. As `.site-nav a` it also matched every anchor
   nested inside the nav — mega-menu game cards, MORE dropdown rows — and at
   specificity (0,1,1) it beat their own single-class rules, stamping the nav's
   4px radius and colour onto them. That bleed is what several !important
   overrides downstream existed to undo. */
.site-nav > ul > li > a,
.site-nav > ul > li > .nav-more-toggle {
  /* White at rest. The ramp has no headroom above white, so hover moves to
     the accent rather than further up the neutral scale — the same accent the
     dropdown icons use, so the whole menu reacts in one colour. */
  color: var(--pure-white);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-md);
  white-space: nowrap;        /* prevent individual link text from wrapping */
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) var(--ease-standard);
}

/* Calm chrome: hover brightens within the content ramp — no accent, no lift.
   Accent on nav hover was removed once already; reserving it for genuinely
   accented things (links in prose, the active route) is what keeps it meaning
   something. */
.site-nav > ul > li > a:hover,
.site-nav > ul > li > .nav-more-toggle:hover {
  color: var(--accent-500);
}

.site-nav > ul > li > a:focus-visible,
.site-nav > ul > li > .nav-more-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.nav-item--games {
  position: relative;
}
.nav-item--more {
  position: relative;        /* for our new wrapper */
}

/*────────────────────────────────────────────
  MORE DROPDOWN (WITH RED TOP PADDING)
────────────────────────────────────────────*/
.dropdown-container {
  display: none;
  position: absolute;
  left: 0;
  /* Flush with the nav item: any offset here is a dead zone the cursor
     crosses with nothing hovered, which drops the menu mid-move. The padding
     below is the bridge instead — same 4px, but INSIDE the container, so it
     still counts as hovering it. --space-1 is exactly .site-header's bottom
     padding, so the visible panel begins at the bar's bottom edge. */
  top: 100%;
  background: transparent;
  padding: var(--space-1) 0 0;
  z-index: 100;
}
/* `.is-open` comes from MoreMenu.tsx and is the keyboard/tap path; the two
   :hover rules are the original mouse behaviour and still stand on their own,
   so the menu works with JS disabled exactly as it did before. */
.nav-item--more:hover > .dropdown-container,
.nav-item--more > .dropdown-container:hover,
.nav-item--more.is-open > .dropdown-container,
.nav-item--more:has(:focus-visible) > .dropdown-container {
  display: block;
}

/* ── Menus attached to a solid header ──────────────────────────────────────
   Only while body.scrolled. Then the header carries --surface-base behind it,
   so a menu can read as coming OUT of that bar: the fill and the corners move
   onto the container, which fills the space-5 hover bridge as well, and the
   top corners square off where the two meet. Rounded only where the panel
   ends.

   Unscrolled the header is transparent over the page/hero artwork, with
   nothing for a panel to attach to — so the rules above stand and both menus
   stay floating panels with four rounded corners.

   Both menus move together: they sit side by side in the same nav and the
   surface under otherwise-identical rows must not change between them. */
body.scrolled .dropdown-container .dropdown,
body.scrolled .mega-menu .games-grid {
  /* Square only where it meets the solid bar. The fill stays on the panel in
     both states — filling the container instead put a blank coloured band
     above the first row, which read as a gap. */
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* The trigger is a <button> now, not an <a href="#">. Strip the UA chrome so
   it still renders as a nav link. */
.nav-more-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.dropdown-container .dropdown {
  /* Panel treatment is identical to .games-grid, the mega-menu panel beside
     it — same fill, corner, padding, gutter and (absence of) shadow — so
     moving between the two menus does not change the surface under
     otherwise-identical rows. Previously it differed on all of padding
     (4px vs 16px), gutter (none vs 6px) and shadow. */
  background: var(--surface-raised);
  box-shadow: none;
  list-style: none;
  margin: 0;
  /* Rounded on all four corners while the header is transparent: the panel
     floats clear of it with the page visible between them, and two hard
     corners on a floating panel just look like a rendering fault. The
     body.scrolled block below squares the top once the header is solid and
     there is something for the panel to come out of. */
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  overflow: hidden;

  /* One column. This was 3 x 3, which reads as a grid of tiles rather than a
     menu — the eye has no single path through it and "Contact Us" ends up
     diagonally opposite "Hardware and Locations" for no reason. Nine items is
     a short list; a list is what it should look like. */
  display: flex;
  flex-direction: column;
  /* Rows sit directly against each other; their own padding is the spacing.
     A gutter here plus the li margin below plus row padding stacked three
     separate gaps between one-line labels. */
  gap: 0;
  min-width: 260px;
}

/* Full-width rows. As a grid these needed equal-height cells so a wrapping
   label did not leave its neighbours short; in a single column each row is
   simply as tall as its own content. */
.dropdown > li { display: flex; }
.dropdown > li > a { flex: 1 1; }
.dropdown-container .dropdown li {
  display: flex;
  align-items: center;
  margin: 0;
}
.dropdown-container .dropdown li + li {
  margin-top: 0;
}
.dropdown-container .dropdown li a {
  display: flex;
  align-items: center;
  /* Column width matches the mega-menu (235px), so the two panels are the
     same width. Row padding does not: these rows carry one line where a
     game card carries two, so borrowing the card's --space-4 box left a
     band of dead space above and below every label. */
  gap: var(--space-3);
  width: 100%;
  /* Vertical trimmed, horizontal kept: one-line labels do not need a
     --space-3 band above and below. */
  padding: var(--space-2) var(--space-3);
  /* Menu item → --radius-md, one step below its panel, exactly like the
     mega-menu game cards. Was 0. */
  border-radius: var(--radius-md);
  color: var(--content-secondary);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
/* Ground shift, not an accent wash — the same hover the mega-menu rows and the
   resource tiles use. Accent stays reserved for genuinely accented things. */
.dropdown-container .dropdown li a:hover {
  background-color: var(--surface-hover);
  color: var(--content-strong);
}
.dropdown-container .dropdown__icon {
  /* Bare glyph at the shared icon size — the same treatment as every other
     icon on the site. A 40px tile here matched .game-card__icon's footprint,
     but a game card's icon is artwork beside two lines of text, while these
     rows are a single label: the tile only added height and squeezed the
     longest label onto two lines. */
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  flex-shrink: 0;
  /* #706ef1 — the button-fill accent, not --content-accent (#aba9f9, the
     lighter accented-TEXT step these used to take). */
  color: var(--accent-500);
  transition: color var(--duration-fast) var(--ease-standard);
}
.dropdown-container .dropdown li a:hover .dropdown__icon {
  color: var(--accent-500);
}

/*────────────────────────────────────────────
  MEGA-MENU (Game Servers)
────────────────────────────────────────────*/
.mega-menu {
  position: absolute;
  left: 0;
  right: auto;
  top: 100%;                       /* flush; see .dropdown-container */
  min-width: 780px;
  background: transparent;
  padding-top: var(--space-1);     /* hover bridge; see .dropdown-container */
  z-index: 100;
  /* smooth fade + slide (can't transition display:none, so use opacity/visibility) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  pointer-events: none;
}
/* :has(:focus-visible), not :focus-within — that is the keyboard path only.
   Plain :focus-within also matches a mouse click, so after clicking a game the
   link kept focus through the client-side navigation and the panel stayed
   open, hanging over the page you had just gone to. :focus-visible is not set
   by pointer clicks, so tabbing still opens the panel and clicking no longer
   pins it. */
.nav-item--games:hover .mega-menu,
.nav-item--games .mega-menu:hover,
.nav-item--games:has(:focus-visible) .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.mega-menu__inner {
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/*────────────────────────────────────────────
  GAMES GRID (3×n)
────────────────────────────────────────────*/
.games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(235px, 1fr));
  gap: var(--space-1-5);
  background-color: var(--surface-raised);
  padding: var(--space-4);
  /* Floating panel → --radius-xl. Was --radius-sm (6px), the same step as the
     rows inside it, so the container read flatter than its contents — the
     inversion the radius table exists to prevent. */
  border-radius: var(--radius-xl);
}
/* Own colour and decoration. These previously inherited both from
   `.site-nav a`; scoping that rule to direct nav links left them on the
   user-agent default link blue. */
.game-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--content-secondary);
  text-decoration: none;
  /* Transparent, not --surface-raised: the panel behind it is already
     --surface-raised, so the card was invisible until hover. */
  background: transparent;
  /* Menu item → --radius-md, a step below its container. */
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-decoration: none;
}
.game-card:hover {
  background: var(--panel-bg-3, var(--surface-hover));
}

/* Disabled "coming soon" card in the mega menu */
.game-card--coming-soon {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.35);
  pointer-events: none;
}
.game-card__soon-label {
  color: var(--content-accent);
  font-weight: 600;
}
.game-card__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}
.game-card__name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--pure-white);
}
.game-card__price {
  font-size: var(--text-sm);
  color: var(--content-tertiary);
  margin-top: var(--space-1);
}

/* icons inside */
.btn-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(98%) sepia(0%) saturate(7%)
          hue-rotate(192deg) brightness(101%) contrast(105%);
}

/*────────────────────────────────────────────
  CURRENCY SWITCHER
────────────────────────────────────────────*/
.currency-switcher {
  position: relative;
  margin-left: var(--space-4);
}
.currency-switcher__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-raised);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  color: var(--pure-white);
}
/* Flags are filled rectangles, not circle crops — same treatment as the
   design system and the .fi rule in 99-global.css. A 50% radius on a square
   img cropped the flag to a disc and squashed its aspect ratio. */
.currency-switcher__flag {
  inline-size: 1.5rem;
  block-size: 1.125rem;
  object-fit: cover;
  border-radius: var(--radius-xs);
}
.currency-switcher__arrow {
  transition: transform 0.2s ease;
}
.currency-switcher__trigger[aria-expanded="true"] .currency-switcher__arrow {
  transform: rotate(180deg);
}
.currency-switcher__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  box-shadow: none;
  display: none;
  z-index: 200;
  min-width: 160px;
}
.currency-switcher__list.open {
  display: block;
}
.currency-switcher__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  color: var(--pure-white);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

/* Hover: background swap only — matches the panel's menu-item hover (no lift) */
.currency-switcher__option:hover {
  background: var(--panel-bg-3, var(--surface-hover));
}

/* Selected: steady highlight */
.currency-switcher__option[aria-selected="true"] {
  background: var(--surface-overlay);
}


/*────────────────────────────────────────────
  MOBILE OVERLAY & BURGER
────────────────────────────────────────────*/
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
}
.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--pure-white);
}

@media (max-width: 1200px) {
  .header-container{
    top: 0;
  }
  .site-nav,
  .currency-switcher {
    display: none !important;
  }
  .mobile-menu-toggle {
    display: flex;
  }
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 66.6667%;
    max-width: 400px;
    background: var(--surface-base);
    transform: translateX(-100%);
    /* Off-screen alone leaves the links focusable — tabbing past the burger
       walked into an invisible menu. visibility:hidden removes them from the
       tab order; it is transitioned (not switched) so the slide-out still
       plays before the drawer goes away. */
    visibility: hidden;
    transition: visibility 0.3s, transform .3s ease;
    z-index: 200;
    overflow-y: auto;
    box-shadow: 24px 0 48px rgba(0,0,0,0.35);
  }
  .mobile-menu.open {
    transform: translateX(0);
    visibility: visible;
  }
  .mobile-menu-close {
    /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
    color: var(--pure-white);
    background: none;
    border: none;
    padding: var(--space-4);
    cursor: pointer;
  }
  .mobile-nav {
    list-style: none;
    padding: var(--space-4);
    margin: 0;
  }
  .mobile-nav li + li {
    margin-top: var(--space-4);
  }
  .mobile-nav > li > a,
  .mobile-nav > li > button {
    display: block;
    color: var(--pure-white);
    text-decoration: none;
    font-size: var(--text-lg);
    padding: var(--space-2) 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
  }
  .has-submenu.open .mobile-submenu {
    display: block;
  }
  .mobile-submenu {
    list-style: none;
    padding-left: var(--space-6);
    margin: var(--space-2-5);
    display: none;
  }
  .mobile-submenu__icon {
    width: 20px;
    height: 20px;
    color: var(--accent-500);
    flex-shrink: 0;
  }
  .mobile-submenu li a {
    display: flex;
    align-items: center;
    color: var(--pure-white);
    text-decoration: none;
    padding: var(--space-2) 0;
  }

  .mobile-submenu > li {
    margin-bottom: -10px;
  }


  .mobile-nav li.has-submenu.open .mobile-submenu > li {
    margin-bottom: -25px !important;
  }



}

@media (min-width: 1200px) {
  .mobile-menu,
  .mobile-menu-toggle {
    display: none !important;
  }
}

/* ── Medium desktop (1200–1700 px): tighten spacing so nothing wraps ── */
@media (min-width: 1200px) and (max-width: 1700px) {
  .site-logo img {
    height: 52px;
    margin-right: var(--space-5);
  }
  .site-nav > ul {
    gap: var(--space-5);
  }
  .site-nav a {
    font-size: var(--text-md);
  }
  .btn-icon {
    width: 17px;
    height: 17px;
  }
  .preferences-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    margin-left: var(--space-2);
  }
}

@media (max-width: 1200px) {
  .preheader {
    display: none;
  }
}

/*────────────────────────────────────────────
  HEADER-PRICE
────────────────────────────────────────────*/
.header-price {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-lg);
}
.header-price__label {
  font-weight: 100;
  margin-right: 0.25em;
  color: var(--content-tertiary);
  font-size: var(--text-lg);
}

/*────────────────────────────────────────────
  SVG chevrons for GAME SERVERS & MORE
────────────────────────────────────────────*/
.nav-item--games > .nav-link::after,
.nav-item--more > .nav-more-toggle::after {
  content: none;
}

.nav-chevron {
  width: 15px;
  height: 15px;
  margin-left: 0.25em;
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: inherit;
}

.nav-item--games:hover .nav-chevron,
.nav-item--games:has(:focus-visible) .nav-chevron,
.nav-item--more:hover .nav-chevron,
.nav-item--more.is-open .nav-chevron,
.nav-item--more:has(:focus-visible) .nav-chevron {
  transform: rotate(180deg);
}

/* dimmed secondary game cards in mega-menu */
.game-card--dim {
  opacity: 0.45;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/*────────────────────────────────────────────
  ICON FILTERS
────────────────────────────────────────────*/
.btn-icon {
  filter: brightness(0) saturate(100%) invert(98%) sepia(0%) saturate(7%) hue-rotate(192deg) brightness(101%) contrast(105%);
}
.stream-ui__filter-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}


















@media (max-width: 1200px) {
  /* Show hamburger, hide others */
  .site-nav {
    display: none !important;
  }
  .mobile-menu-toggle {
    display: flex;
  }

  /* Currency switcher visible beside hamburger */
  .currency-switcher {
    display: flex !important;
    margin-left: auto;
    margin-right: var(--space-4);
  }

  /* Mobile overlay — a 2/3-width drawer, not a full-width takeover, so the
     page (dimmed by the backdrop) stays visible and tappable to close. */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 66.6667%;
    max-width: 400px;
    background: var(--surface-base);
    transform: translateX(-100%);
    /* Off-screen alone leaves the links focusable — tabbing past the burger
       walked into an invisible menu. visibility:hidden removes them from the
       tab order; it is transitioned (not switched) so the slide-out still
       plays before the drawer goes away. */
    visibility: hidden;
    transition: visibility 0.3s, transform 0.3s ease;
    z-index: 9999;
    padding-top: var(--space-20);
    box-shadow: 24px 0 48px rgba(0,0,0,0.35);
  }
  .mobile-menu.open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Dims + hides the remaining 1/3 of the screen; tapping it closes the drawer */
  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 8, 24, 0.6);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
  }
  body.mobile-menu-open .mobile-menu-backdrop {
    opacity: 1;
    visibility: visible;
  }
  body.mobile-menu-open {
    overflow: hidden;
  }

  .mobile-menu-close {
    position: absolute;
    top: 15px;
    right: 20px;
    /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
    color: var(--pure-white);
    background: none;
    border: none;
    cursor: pointer;
  }

  .mobile-nav {
    list-style: none;
    padding: 0 var(--space-6);
  }

  .mobile-nav li {
    margin-bottom: var(--space-4);
    background-color: var(--surface-raised);
    padding: var(--space-2-5);
    border-radius: var(--radius-sm);
    margin-bottom: -8px;

  }

  .mobile-nav a {
    color: var(--pure-white);
    text-decoration: none;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--content-tertiary);

  }

  /* Mobile currency inside menu */
  .mobile-currency {
    margin-top: var(--space-8);
    display: flex;
    justify-content: center;
  }
}



@media (max-width: 1200px) {
  /* More toggle clean design */
  .mobile-more-toggle {
    width: 100%;
    background: none;
    border: none;
    color: var(--pure-white);
    font-size: var(--text-xl);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    padding: var(--space-2-5) 0;
    position: relative;
  }

  /* Chevron arrow (SVG, matches the desktop nav chevron) aligned right */
  .mobile-more-toggle::after { content: none; }
  .mobile-more-chevron {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--content-tertiary);
    transition: transform 0.2s ease, color 0.2s ease;
  }

  /* Rotate arrow when open */
  .has-submenu.open .mobile-more-chevron {
    transform: translateY(-50%) rotate(180deg);
    color: var(--accent-500);
  }

  /* Dropdown submenu styling (matches your screenshot) */
  .mobile-submenu {
    list-style: none;
    padding-left: var(--space-4);
    margin: var(--space-1-5) 0 var(--space-4);
    display: none;
  }
  .has-submenu.open .mobile-submenu {
    display: block;
  }

  .mobile-submenu a {
    display: block;
    color: var(--content-tertiary);
    text-decoration: none;
    font-size: var(--text-lg);
    padding: var(--space-1-5) 0;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .mobile-submenu a:hover {
    color: var(--pure-white);
    transform: translateX(4px);
  }
}


.has-submenu .mobile-submenu {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.has-submenu.open .mobile-submenu {
  opacity: 1;
}







.mobile-menu-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-5) 0;
  margin-bottom: var(--space-5);
}

.mobile-menu-logo {
  height: 40px;
  width: auto;
  max-width: 120px;
}
















@media (max-width: 1200px) {
  /* Main and submenu links: keep icons and text in one line */
  .mobile-nav a,
  .mobile-more-toggle,
  .mobile-submenu a {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    gap: var(--space-2) !important;        /* space between icon and text */
    text-align: left !important;
  }

  /* Icons — same line, same height baseline */
  .mobile-nav a img,
  .mobile-more-toggle img,
  .mobile-submenu a img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px; /* tiny optical tweak */
  }

  /* Submenu: keep indentation but same line layout */
  .mobile-submenu {
    padding-left: var(--space-6);
    margin-top: var(--space-1-5);
    list-style: none;
  }

  .mobile-submenu a {
    gap: var(--space-1-5);
  }
}



/* header preferences button */
.preferences-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: var(--space-2-5) var(--space-5);
  border: none;
  color: var(--pure-white);
  cursor: pointer;
  font-size: var(--text-md);
  margin-left: var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.preferences-btn:hover {
  background-color: var(--surface-hover);
}
.preferences-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.pref-separator {
  opacity: .4;
}

/* mobile: icons only */
@media (max-width: 1200px) {
  .preferences-btn {
    padding: var(--space-1-5) var(--space-3);
    gap: var(--space-1-5);
    margin-left: auto;
    margin-right: var(--space-3);
  }

  /* ❌ hide language name only */
  .pref-lang-name {
    display: none !important;
  }

  /* ✅ show separator on mobile */
  .pref-separator {
    display: inline-flex !important;
    opacity: 0.4;
  }

  /* ✅ show currency code on mobile */
  .pref-currency-code {
    display: inline-flex !important;
    font-weight: 600;
  }
}


/* overlay */
.pref-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(var(--surface-canvas-rgb) / 0.78);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

/* modal box (fixed size, does NOT grow with dropdowns) */
.pref-modal {
  background: var(--surface-raised);
  width: 480px;
  max-width: 90vw;
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-10) var(--space-7);
  box-shadow: var(--shadow-elevated);
}

@media (max-width: 380px) {
  .pref-modal {
    max-width: calc(100vw - 24px);
    padding: var(--space-4) var(--space-4) var(--space-4);
  }
}

/* header */
.pref-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pref-header h2 {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--pure-white);
  margin: 0;
}

.pref-close {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--content-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
/* One step up the ramp from the modal, not the modal's own fill: this was
   --surface-raised, identical to .pref-modal behind it, so hovering the
   close button produced no visible change at all. */
.pref-close:hover {
  background-color: var(--surface-hover);
  color: var(--content-strong);
}
.pref-close:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* body */
.pref-body {
  margin-top: var(--space-5);
}

.pref-field {
  position: relative;          /* anchor dropdown absolutely */
  margin-top: var(--space-6);
}
.pref-field:first-child {
  margin-top: 0;
}

.pref-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--content-tertiary);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pref-required {
  color: var(--status-danger-text);
}

/* select — matches the order-modal's om-select__trigger */
.pref-select {
  margin-top: var(--space-2-5);
  /* Ground, not a stroke: a step up the ramp from the modal. Was a
     transparent box with a 2px outline — the only outlined control left,
     and the treatment the system replaces with surface everywhere else. */
  background-color: var(--surface-overlay);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  color: var(--content-strong);
  font-weight: 700;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.pref-select:hover {
  background-color: var(--surface-hover);
}
.pref-select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* Open state rides the ramp too, rather than lighting an accent outline. */
.pref-select.is-open {
  background-color: var(--surface-hover);
}

.pref-select-main {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: var(--text-lg);
}

.pref-option-symbol {
  font-weight: 800;
}

.pref-option-code-inline {
  color: var(--content-tertiary);
  font-weight: 600;
}

.pref-chevron {
  display: inline-flex;
  color: var(--content-secondary);
  flex-shrink: 0;
  transition: transform .2s;
}
.pref-select.is-open .pref-chevron {
  transform: rotate(180deg);
}

/* dropdown menu — matches om-select__panel (absolute: modal height stays fixed) */
.pref-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--panel-bg-2, var(--surface-overlay));
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: var(--shadow-soft-md);
  display: none;
  z-index: 10;
  scrollbar-width: none;
}
.pref-dropdown::-webkit-scrollbar { display: none; }

.pref-dropdown li {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2-5);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.pref-option-main {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
}

.pref-option-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-shrink: 0;
}

.pref-option-code {
  color: var(--content-tertiary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.pref-check {
  color: var(--accent-500);
  visibility: hidden;
  flex-shrink: 0;
}

.pref-flag-icon {
  display: inline-block;
  width: 22px;
  height: 16px;
  border-radius: var(--radius-xs);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px var(--border-default);
  flex-shrink: 0;
}

.pref-dropdown li span {
  color: var(--content-strong);
  font-size: var(--text-md);
  font-weight: 600;
}

/* Rows ride the surface ramp, same as the header dropdown and the contact
   option cards. These were accent tints with hardcoded rgba fallbacks. */
.pref-dropdown li:hover {
  background-color: var(--surface-hover);
}
.pref-dropdown li:hover span {
  color: var(--pure-white);
}

.pref-dropdown li.is-selected {
  background-color: var(--surface-active);
  color: var(--content-strong);
}
.pref-dropdown li.is-selected .pref-option-name,
.pref-dropdown li.is-selected .pref-option-code {
  color: var(--content-accent);
  font-weight: 700;
}
.pref-dropdown li.is-selected .pref-check {
  visibility: visible;
}

/* footer buttons — matches order-modal's om-btn-next / om-btn-back */
.pref-footer {
  margin-top: var(--space-5);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.pref-btn {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-lg);
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, background-color .15s, color .15s, transform .15s;
}
.pref-btn:active { transform: scale(var(--press-scale, 0.97)); }

/* SAVE — solid purple, matches .om-btn-next */
.pref-save {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--accent-500);
  color: var(--pure-white);
  text-decoration: none;
  border: none;
}
.pref-save:hover {
  opacity: var(--hover-opacity, 0.85);
}

/* CANCEL — ghost by default, filled on hover, matches .om-btn-back */
.pref-cancel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  color: var(--content-secondary);
  text-decoration: none;
  border: none;
}
/* Same fix as .pref-close: --surface-raised matched the modal behind it. */
.pref-cancel:hover {
  background-color: var(--surface-hover);
  color: var(--content-strong);
}




span.pref-lang-name, .pref-currency-code.pref-loaded {
    font-weight: 600;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/05-home-faq.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --faq-purple: var(--accent-500);
  --faq-dark-bg: var(--surface-canvas);
  --faq-panel-bg: var(--surface-raised);
  --faq-text-light: var(--content-strong);
  --faq-text-muted: var(--content-secondary);
  --faq-btn-secondary-bg: var(--surface-raised);
  --faq-font: var(--font-sans);
}

/* Layout */
.faq-section-container {
  display: flex;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-16) var(--space-5);
  max-width: 1400px;
  margin: 0 auto;
}
.faq-section-left {
  flex: 1 1 40%;
}
.faq-section-left h2 {
  /* Casing lives here now, not in the message catalogue. The heading used to
     be stored pre-uppercased and pre-split ("REQUENTLY"); it holds a normal
     phrase now, so the display casing is CSS. Browsers uppercase per <html
     lang>, which is what gets Turkish dotted/dotless i right. */
  text-transform: uppercase;
  /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  margin-bottom: var(--space-5);
  line-height: 1.1;
  font-weight: 900;
}
.faq-highlight { color: var(--faq-purple); }
/* Shared section-subtitle spec. Was 600-weight --content-tertiary on a 29px
   hardcoded line-height: tertiary is the metadata step, and 600 is a heading
   weight — together they made a lede read as bold small print. */
.faq-section-left p {
  color: var(--content-secondary);
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
  max-inline-size: 60ch;
}

/* Button look/color/radius/motion now come from .ui-btn (src/components/ui/ui.css). */
.faq-buttons { display: flex; gap: var(--space-4); }

/* Right side (accordion) */
.faq-section-right { flex: 1 1 60%; }
.faq-accordion details {
  background: var(--faq-panel-bg);
  margin-bottom: var(--space-3);
  overflow: hidden;
  /* Surface → --radius-lg. --radius-xl is the modal step, and the fallback
     claimed 16px where the token is 20. */
  border-radius: var(--radius-lg);
  border: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--faq-panel-bg);
  color: var(--content-strong);
  font-weight: var(--font-semibold);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
/* Hover and open are carried by the surface ramp, matching the resource tiles:
   raised at rest → hover on pointer → overlay while open. Ground, not colour,
   and no lift. The row itself is the affordance, so the whole row shifts rather
   than just the summary. */
.faq-accordion summary:hover {
  background-color: var(--surface-hover);
}

.faq-accordion details[open],
.faq-accordion details[open] summary,
.faq-accordion details[open] .faq-content {
  background-color: var(--surface-overlay);
}

/* No hover shift once open. The summary and the answer share one ground
   while expanded, and lifting only the summary on hover split the card into
   two visibly different panels — which is exactly what it looked like.
   Closed rows still respond to the pointer; an open one is already active. */

.faq-accordion summary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--surface-canvas),
    0 0 0 4px var(--accent-500);
}

/* The open question stays --content-strong. It previously turned accent purple,
   which made the one question you had opened the only coloured text in the
   section — the chevron rotation and the answer appearing already say "open",
   so the colour was a third signal doing no extra work. Accent stays reserved
   for things you can act on. */
.faq-accordion details[open] summary {
  color: var(--content-strong);
}
.faq-accordion summary::-webkit-details-marker { display: none; }

.faq-summary-inner {
  display: flex;
  align-items: center;
  /* On the scale, and the answer indent is derived from it. */
  gap: var(--space-3);
}

.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--accent-tint, rgba(112,110,241,0.12));
  color: var(--content-accent);
  transition: background 0.2s var(--ease);
}
.faq-icon svg {
  width: 20px;
  height: 20px;
}
.faq-accordion details[open] .faq-icon,
.game-faq-accordion details[open] .faq-icon,
.faq-page-item[open] .faq-icon {
  background: var(--accent-tint);
}
.faq-accordion summary::after {
  content: '';
  /* flex: none is the fix. The chevron is a flex item in the summary row and
     had no shrink guard, so against a long question it was squeezed to
     0px wide and vanished — which is why game pages, whose questions are
     the longest, showed no icon at all. */
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  /* Masked and tinted from a token rather than a hardcoded #8C52FF recoloured
     by a six-function filter chain. The filter approach could not name the
     accent, so the arrow drifted from every other icon on the page. */
  background-color: var(--content-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.faq-accordion details[open] summary::after {
  transform: rotate(180deg);
}

/* Answer copy: reading text, so --content-secondary at normal weight on the
   type scale. Was 600-weight --content-tertiary at a hardcoded 29px leading.
   The left indent aligns under the question text (icon 40 + gap 12) and
   is derived from those, not a spacing choice. */
.faq-content {
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  line-height: var(--leading-lg);
  /* Symmetric vertical padding. This was `0` on top, leaning on the answer
     <p>'s default 1em margin to open the gap — so the bottom got that margin
     *plus* the padding, leaving 18px above the text and 38px below it. The
     child margins are zeroed just below, so this padding is now the only
     thing setting the box. */
  padding: var(--space-4) var(--space-5) var(--space-4) calc(2.5rem + var(--space-3));
  background: var(--faq-panel-bg);
  color: var(--content-secondary);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}

/* Answers arrive as a <p> (home, discord) or as rendered markdown (game page,
   FAQ page) which may be several blocks. Collapse only the outer edges, so a
   multi-paragraph answer keeps its internal rhythm. */
.faq-content > :first-child,
.game-faq-content > :first-child,
.faq-page-content > :first-child {
  margin-top: 0;
}
.faq-content > :last-child,
.game-faq-content > :last-child,
.faq-page-content > :last-child {
  margin-bottom: 0;
}
.faq-accordion details[open] .faq-content {
  max-height: 500px;
  opacity: 1;
  animation: slideDown 0.35s ease;
}
@keyframes slideDown {
  from { transform: translateY(-10px); }
  to   { transform: translateY(0); }
}




/* Responsive */
@media (max-width: 1050px) {
  .faq-section-container {
    flex-direction: column;
    gap: var(--space-6);
    /* One responsive step for every section: --space-16 → --space-12. */
    padding: var(--space-12) var(--space-4);
  }
  .faq-section-left, .faq-section-right { flex: 1 1 100%; }
  .faq-section-left h2 { /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem); margin-bottom: var(--space-4); }
  .faq-section-left p { margin-bottom: var(--space-6); }
  .faq-buttons { flex-direction: row; gap: var(--space-3); }
  .faq-btn { text-align: center; gap: 0; padding: var(--space-3) var(--space-3);}
  .faq-accordion details { margin-bottom: var(--space-3); }
  .faq-accordion summary { padding: var(--space-3) var(--space-4); }
  .faq-content { padding: 0 var(--space-4) var(--space-4) calc(2.5rem + var(--space-3)); }
}








@media (max-width: 480px) {
  .faq-section-container { padding: var(--space-12) var(--space-4); gap: var(--space-4); }
  .faq-section-left h2 { font-size: var(--text-3xl); }
  
  .faq-accordion summary { padding: var(--space-3) var(--space-4); }
  
  
}

/* utilities */
.faq-word { color: var(--pure-white); }
/* `#mustwhite` was set on two <img> elements in the same component, which is
   invalid — ids must be unique. HomeFaq now uses the class; the id stays until
   DiscordFaq and GameFaq are moved across too. */
#mustwhite,
.faq-btn-icon {
  filter: brightness(0) saturate(100%) invert(100%) sepia(40%) saturate(0%) hue-rotate(133deg) brightness(107%) contrast(101%);
}




/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/game-grid.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
.stream-ui__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: var(--space-5);
  row-gap: var(--space-12);
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

/* Desktop: 6 per row */
.stream-ui__card {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc((100% - 5 * 20px) / 6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;

  /* Animate the whole card */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* No hover treatment on the card itself. The thumbnail is the link and the
   pointer cursor is the affordance; a background wash behind the artwork
   read as a highlight block rather than a state. */

.stream-ui__root {
  background-color: var(--surface-base);
  margin: 0;
  padding: var(--space-5);
  font-family: var(--font-sans);
  color: var(--pure-white);
}

/* Main layout */
.stream-ui__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Controls section */
.stream-ui__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  gap: var(--space-3);
}

/* Filter buttons */
.stream-ui__filter-group {
  display: flex;
  gap: var(--space-3);
}
.stream-ui__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 38px;
  padding: 0 var(--space-4);
  background: var(--surface-raised);
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--content-tertiary);
  border-radius: var(--radius-sm);
  border: none;
}
.stream-ui__filter input { display: none; }
.stream-ui__filter.active { background: var(--accent-500); color:var(--pure-white); }
.stream-ui__filter-text { font-size: var(--text-md); font-weight: 600; color: inherit; }
.stream-ui__filter-icon {
  width: 20px;
  height: 20px;
  color: inherit; /* fill="currentColor" — always matches the label text color */
  flex-shrink: 0;
}
/* Explicit rule: icon color always tracks the label's text color in every state */
.stream-ui__filter:hover .stream-ui__filter-icon,
.stream-ui__filter:hover .stream-ui__filter-text,
.stream-ui__filter.active .stream-ui__filter-icon,
.stream-ui__filter.active .stream-ui__filter-text {
  color: inherit;
}

/* Search bar */
.stream-ui__search-container {
  display: inline-flex;
  align-items: center;
  width: 400px;
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-overlay);
  border-radius: var(--radius-md);
  border: none;
  transition: border-color .2s;
}
.stream-ui__search-container:focus-within { border-color: var(--accent-500) !important; }
.stream-ui__search-icon { width: 16px; height: 16px; fill: var(--content-tertiary); margin-right: var(--space-2); }
.stream-ui__search-input {
  flex: 1 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--pure-white);
  font-size: var(--text-lg);
}
.stream-ui__search-input::placeholder { color: var(--content-tertiary); }

/* Card grid & cards */
.stream-ui__badges {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1-5);
  pointer-events: none;
  z-index: 2;
}

/* Chip step, matching the platform chips and the filter buttons on this
   page. A full pill made the badge the only rounded-end element among a
   grid of 6px chips. */
.stream-ui__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: var(--pure-white);
  /* Neutral ink rather than the old purple glow: the glow was hardcoded
     accent, so it stayed purple under the green and neutral variants. */
  box-shadow: var(--shadow-soft-md);
}

/* Colour carries the meaning. All three variants previously resolved to the
   same accent, so the three states were indistinguishable without reading
   the label. */
.stream-ui__badge--most_popular {
  background: var(--accent, var(--accent-500));
}

.stream-ui__badge--new {
  background: var(--status-success-base);
}

/* Coming soon is the one state that is not purchasable, so it recedes
   instead of competing with the two promotional badges. */
.stream-ui__badge--coming_soon {
  background: rgb(var(--surface-canvas-rgb) / 0.92);
  color: var(--content-secondary);
}
.stream-ui__badge-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* all status tags share one purple identity (differentiated by their label) */

.stream-ui__card-visual {
  position: relative;
  /* The card is a flex column, so without an explicit width this box shrinks
     to its content. That was invisible while every thumbnail was eager and
     therefore had intrinsic dimensions to size from; once the off-screen ones
     became lazy there was nothing to size from, the frame's aspect-ratio had
     no width to resolve against, and 50 of 56 cards collapsed to 0x0 until
     their image happened to load. */
  width: 100%;
  /* Reserves the room the badge needs where it overhangs the artwork's
     top edge. The badge is pinned to the card's top (top: 0), so it cannot
     move up without leaving the card — lifting it off the cover means
     reserving more space above the cover instead. */
  padding-top: var(--space-5);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
}

.stream-ui__card-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 285/380;
  overflow: hidden;
  display: block;
  text-decoration: none;
  border-radius: var(--radius-lg);
}
/* No ring on hover. This was a 3px accent stroke around the thumbnail —
   a perimeter outline, the treatment the system drops everywhere else. */

.stream-ui__card-image {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  display: block;
  border: none;
  /* Static. The hover transform moved to the card — see below. */
}

/*
 * The whole card lifts, with an accent ring — the artwork no longer scales
 * inside its frame.
 *
 * Zooming the image within a fixed frame crops it: the edges of the cover
 * slide out of view, so the thing being pointed at is the thing being
 * partly hidden. Moving the transform to the card keeps every cover whole
 * and makes the hover read as "this tile" rather than "this picture".
 *
 * :has(:focus-visible), not :focus-within — the latter also matches a mouse
 * click, which left a card stuck in its hover state after navigating.
 */
.stream-ui__card:hover,
.stream-ui__card:has(:focus-visible) {
  transform: scale(1.03);
  z-index: 1;
}

/* On the frame, not the card: the card's box is the full tile including the
   title below, and ringing that would trace an outline around the text too. */
.stream-ui__card:hover .stream-ui__card-frame,
.stream-ui__card:has(:focus-visible) .stream-ui__card-frame {
  box-shadow: 0 0 0 2px var(--accent-500);
}

.stream-ui__card-frame {
  transition: box-shadow var(--duration-fast, .15s) var(--ease-standard, ease);
}

@media (prefers-reduced-motion: reduce) {
  .stream-ui__card { transition: none; }
  .stream-ui__card:hover,
  .stream-ui__card:has(:focus-visible) { transform: none; }
}
/* No brightness lift on hover: it fought the surface step and pushed the
   artwork off its own colour. */

.stream-ui__bevel-tl, .stream-ui__bevel-br {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--surface-canvas);
  z-index: 5;
}
.stream-ui__bevel-tl {
  top: 0; left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background-color: var(--surface-base);
}
.stream-ui__bevel-br {
  bottom: 0; right: 0;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  background-color: var(--surface-base);
}

.stream-ui__details {
  margin-top: var(--space-2); 
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Details stay at full strength on hover — dimming the label while
   raising the card sent two contradictory signals. */

.stream-ui__title { 
  font-size: var(--text-lg); 
  font-weight: 600; 
  margin-bottom: var(--space-1); 
  color: var(--pure-white);
}

.stream-ui__price { 
  font-size: var(--text-md); 
  margin-bottom: var(--space-1); 
  color: var(--pure-white);
}

.stream-ui__price-label {
  font-weight: 400;
  color: var(--content-tertiary);
}

.stream-ui__price-value {
  font-weight: 600; 
  color: var(--content-tertiary);
}

.stream-ui__platforms {
  display: flex;
  gap: var(--space-1-5);
  margin-top: var(--space-1-5);
}
.stream-ui__platform {
  width: 27px;
  height: 27px;
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stream-ui__platform::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(73%) sepia(8%) saturate(541%) hue-rotate(202deg) brightness(98%) contrast(94%);
}
.stream-ui__platform[data-platform-icon="pc"]::before {
  background-image: url("/images/icons/pc.svg");
}
.stream-ui__platform[data-platform-icon="mobile"]::before {
  background-image: url("/images/icons/mobile.svg");
}
.stream-ui__platform[data-platform-icon="console"]::before {
  background-image: url("/images/icons/console.svg");
}
.stream-ui__platform[data-platform-icon="all"]::before {
  background-image: url("/images/icons/all_games.svg");
}

.stream-ui__icon svg {
  width: 20px; height: 20px; margin-right: var(--space-1); fill: var(--accent-500); 
}

/* Tablet: 5 per row */
@media (max-width: 1236px) {
  .stream-ui__card {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc((100% - 4 * 20px) / 5);
  }
}

/* Tablet: 4 per row */
@media (max-width: 1090px) {
  .stream-ui__card {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc((100% - 3 * 20px) / 4);
  }
}

/* Tablet: 3 per row */
@media (max-width: 768px) {
  .stream-ui__card {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc((100% - 2 * 20px) / 3);
  }
}

/* Small: 2 per row */
@media (max-width: 576px) {
  .stream-ui__card {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc((100% - 1 * 20px) / 2);
  }
}

/* Tiny: full-width but max 2 per row */
@media (max-width: 480px) {
  .stream-ui__card {
    flex: 0 0 100%;
    max-width: calc((100% - 1 * 20px) / 2);
  }
}

/* Stack search above filters on tablet and below */
@media (max-width: 1042px) {
  .stream-ui__controls {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
  }
  .stream-ui__search-container {
    order: -1;
    width: 100%;
    max-width: 480px;
    align-self: center;
    margin-bottom: var(--space-3);
  }
  .stream-ui__filter-group {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .stream-ui__filter {
    flex: 1 1;
    justify-content: center;
  }
  .stream-ui__filter-text { font-size: var(--text-sm); }
  .stream-ui__filter-icon { width: 20px; height: 20px; }
}

/* On very small screens, tighten up */
@media (max-width: 480px) {
  .stream-ui__search-container {
    max-width: 100%;
    margin-bottom: var(--space-2);
    padding: 0 var(--space-2);
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 24, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: var(--surface-raised);
  padding: var(--space-6) var(--space-7) var(--space-6);
  border-radius: var(--radius-xl);
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: none;
  position: relative;
}

.modal-box h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  color: var(--pure-white);
}

.modal-box p {
  margin: 0 0 var(--space-5);
  color: var(--content-tertiary);
  font-size: var(--text-md);
}

.modal-box button {
  border: none;
  background: var(--accent-500);
  color: var(--pure-white);
  font-size: var(--text-md);
  font-weight: 600;
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.modal-box button:hover {
  filter: brightness(1.05);
}

.modal-box button.modal-box__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--content-tertiary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.modal-box button.modal-box__close:hover {
  background: var(--surface-raised);
  color: var(--pure-white);
  filter: none;
  transform: none;
}

.modal-box button.modal-box__close:active {
  transform: none;
}

.coming-soon-form {
  width: 100%;
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.coming-soon-form input {
  width: 100%;
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-overlay);
  color: var(--content-strong);
  padding: .75rem var(--space-4);
  font-size: var(--text-md);
  transition: border-color 0.2s;
}
.coming-soon-form input:focus {
  outline: none;

  box-shadow: var(--shadow-focus);
  outline: none;
}

.coming-soon-form button {
  border: none;
  background: var(--accent-500);
  color: var(--pure-white);
  font-size: var(--text-md);
  font-weight: 600;
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.coming-soon-form button:hover {
  opacity: var(--hover-opacity, 0.85);
}

.coming-soon-status {
  margin-top: var(--space-2-5);
  color: var(--content-tertiary);
  font-size: var(--text-md);
}

/* Empty state for the search/filter combination. */
.stream-ui__empty {
  margin: var(--space-10) 0 0;
  text-align: center;
  font-size: var(--text-md);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/10-footer.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/* Accented *text* uses --content-accent, not --accent-500: the 500 step is the
   button-fill accent and is too dark to read against a footer surface. No
   underline and no bold — it sits inside a muted metadata block and was the
   only decorated, 700-weight thing in it. */
.mailto {
  color: var(--content-accent);
  font-weight: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.mailto:hover {
  color: var(--content-strong);
  text-decoration: underline;
}

.site-footer {
  background: transparent;
  color: var(--pure-white);
  border-radius: var(--radius-sm);
}

/* ─── footer-top split (logo/info vs. columns) ─── */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-8);
}

.footer-about {
  flex: 1 1 250px;
  max-width: 320px;
}

.footer-about .footer-logo img {
  width: 220px;
}

.company-info {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  color: var(--content-tertiary);
  line-height: var(--leading-lg);
  margin-left: 0;
  font-weight: 500;
}

.company-info strong {
  font-weight: 700;
  color: var(--content-tertiary);
}

/* ─── right columns grid ─── */
.footer-columns {
  flex: 3 1 600px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-8);
}

.footer-col h3 {
  color: var(--pure-white);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: var(--space-3);
}

.footer-col ul li a {
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
  color: var(--content-secondary);
  font-weight: 500;
  font-size: var(--text-md);
  border-radius: var(--radius-xs);
}

.footer-col ul li a:hover {
  color: var(--content-strong);
}

.footer-col ul li a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ─── social icons ─── */
.footer-social-list {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  /* Controls take --radius-md; --radius-sm is 6px, not the 10 the fallback
     implied. */
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: none;
  color: var(--content-secondary);
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.footer-social-icon:hover {
  background: var(--accent-500);
  background-color: var(--surface-hover);
  color: var(--pure-white);
}
.footer-social-icon:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.footer-social-icon img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.footer-social-icon:hover img {
  opacity: 1;
}

.footer-social-icon svg {
  width: 20px;
  height: 20px;
}

/* ─── bottom stripe full-width ─── */
.footer-bottom {
  background: var(--surface-base);
  border-top: 1px solid var(--border-subtle);
  width: 100%;
}

.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-8);
}

.footer-bottom p {
    margin: 0;
    color: var(--content-secondary);
    font-size: var(--text-md);
    font-weight: var(--font-normal);
}

.footer-payments {
  max-height: 32px;
  height: auto;
  width: auto; /* ensure scaling on mobile */
}

/* ─── responsive tweaks ─── */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: inherit;
    gap: 0;
  }
  .footer-columns {
    grid-template-columns: 1fr 1fr;
  }
  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/games-title-section.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.title-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;

  /* One section rhythm, from the space scale. */
  padding: var(--space-16) 0;
  display: flex;
  align-items: center;
}

/* The artwork paints from a ::before that starts ABOVE this section rather
   than on the section box, so it runs up behind the fixed transparent header
   exactly as .gp-backdrop does on the single game pages. On the box it began
   at the section's top edge, which body's padding-top puts *below* the header
   — leaving the header on flat --surface-base instead of on the image. The
   -110px matches that padding-top in 01-header.css, the same constant
   .gp-backdrop and .page-bg already use.

   THREE pages share this class - games, blog and knowledgebase - so the image
   cannot live here; it comes in per page as --section-bg.

   Absolutely positioned, so it is NOT a flex item of the rule above. The
   section is already 100vw, so left/right 0 span the viewport without
   repeating the 50%/translateX trick .page-bg needs on in-column sections. */
.title-section::before {
  content: "";
  position: absolute;
  top: -110px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      rgb(var(--surface-base-rgb) / 0.55) 0%,
      rgb(var(--surface-base-rgb) / 0.68) 45%,
      rgb(var(--surface-base-rgb) / 0.9) 80%,
      var(--surface-base) 100%
    ),
    var(--section-bg, none) center top / cover no-repeat;
}








.title-section__overlay {
  /* not needed—gradient is in the background */
  display: none;
}

.title-section__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--pure-white);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.title-section__title {
  font-family: var(--font-sans);
  font-weight: 900;
  /* Page-title step, identical on every page. */
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}

.title-section__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.4;
  margin: 0 auto;
  max-width: 800px;
  color: var(--content-tertiary);

}

/* Mobile adjustments */
@media (max-width: 600px) {
  .title-section {
    padding: clamp(2rem, 8vw, 4rem) 0;
  }
  .title-section__title {
    /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  }
  .title-section__text {
    font-size: var(--text-lg);
    line-height: 1.3;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/discordbots-title-section.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.discord-title-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;

  /* Only this page uses the class, so the image lives here rather than coming
     in per page like .title-section / .t-section. Gradient stops match the
     other page headers and the single game pages. */
  background:
    linear-gradient(
      rgb(var(--surface-base-rgb) / 0.55) 0%,
      rgb(var(--surface-base-rgb) / 0.68) 45%,
      rgb(var(--surface-base-rgb) / 0.9) 80%,
      var(--surface-base) 100%
    ),
    url("/images/discord-bot-hosting-bg.webp") center top / cover no-repeat;

  /* One section rhythm, from the space scale. */
  padding: var(--space-16) 0;
  display: flex;
  align-items: center;
}








.title-section__overlay {
  /* not needed—gradient is in the background */
  display: none;
}

.title-section__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--pure-white);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.title-section__title {
  font-family: var(--font-sans);
  font-weight: 900;
  /* Page-title step, identical on every page. */
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}

.title-section__text {
  font-family: var(--font-sans);
  font-weight: var(--font-normal);
  font-size: var(--text-lg);
  line-height: 1.4;
  margin: 0 auto;
  max-width: 800px;
  color: var(--content-secondary);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .title-section {
    padding: clamp(2rem, 8vw, 4rem) 0;
  }
  .title-section__title {
    /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  }
  .title-section__text {
    font-size: var(--text-lg);
    line-height: 1.3;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/cta-get-started.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
.cta-get-started {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  background:
    linear-gradient(var(--surface-base), rgb(var(--accent-500-rgb) / 0.76), var(--surface-base)),
    url(/images/cta-hero.webp) 50% / cover no-repeat;
  padding: var(--space-16) 0;
  color: var(--pure-white);
  text-align: center;
}

.cta-get-started__overlay {
  display: none;
}

.cta-get-started__content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.cta-get-started__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.cta-get-started__logo {
  width: 50px;
  height: auto;
}

.cta-get-started__title {
  font-family: var(--font-sans);
  font-weight: 900;
  /* Section-heading step, identical in every section. Was the page-title
     step, which put this banner 8px above every other section heading on
     the page at the same level of hierarchy. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  line-height: 1.1;
  margin: 0;
}

.cta-get-started__text {
  /* Shared section-subtitle spec. Colour is the one deliberate departure:
     this band sits on a 76%-accent gradient, where --content-secondary
     would drop below a readable contrast. */
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--font-medium);
  color: var(--pure-white);
  max-inline-size: 60ch;
  margin: 0;
}

.cta-get-started__buttons {
  display: flex;
  gap: var(--space-4);
}

/* Button look/color/radius/motion now come from .ui-btn (src/components/ui/ui.css)
   — this just sets the CTA-specific min-width and mobile stacking. */
.cta-get-started__buttons .ui-btn {
  min-width: 160px;
  text-decoration: none;
}

/* Rent a Server, CTA only. The standard secondary fill (--surface-overlay,
   #363b4f) is a dark grey that reads as a muddy near-match against this
   band's 76%-accent gradient, so it loses its pairing with the primary
   button beside it. White restores the contrast.

   Deliberately scoped to this section rather than added as a variant:
   src/components/ui/Button.tsx keeps a CLOSED variant set precisely because
   an audit found a stray white-on-dark button copy-pasted from a light-mode
   template. Do not lift this rule into ui.css or reuse it elsewhere without
   revisiting that decision. */
.cta-get-started__buttons :is(.ui-btn--secondary, .btn--secondary) {
  background: var(--pure-white);
  background-color: var(--pure-white);
  /* Dark ink on white: #1f2333 on #ffffff, well clear of AA. Inherited by
     the Tabler icon, which fills with currentColor. */
  color: var(--surface-base);
}
.cta-get-started__buttons
  :is(.ui-btn--secondary, .btn--secondary):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--content-primary);
  background-color: var(--content-primary);
}

/* Mobile stack */
@media (max-width: 768px) {
  .cta-get-started__buttons {
    flex-direction: column;
    gap: var(--space-3);
  }
  .cta-get-started__buttons .ui-btn {
    width: 100%;
  }
}

/* Button icons */
.cta-get-started__btn-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(41%) sepia(62%) saturate(922%)
          hue-rotate(209deg) brightness(99%) contrast(91%);
}

.cta-get-started__btn-icon--white {
  filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(152%)
          hue-rotate(303deg) brightness(117%) contrast(100%);
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/features-grid.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
.features-section {
  padding: var(--space-16) 0;
}

/* ── Layout: editorial two-column — heading sticks, features scroll past ──
   Replaces a 3×3 grid that put the heading in the middle column and left a
   large void beneath it. The heading now leads in the DOM and on the page, and
   the six features read as one list with a single scan order instead of two
   columns flanking dead space. */
.features-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-12);
  align-items: start;
}

.features-center {
  position: sticky;
  inset-block-start: var(--space-16);
  text-align: start;
}

.features-section__heading {
  /* Section-heading step, identical across every section. Matches the design
     system's --display-2 curve; becomes that token at migration. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  margin: 0 0 var(--space-3);
  color: var(--content-strong);
  line-height: 1.2;
  font-weight: var(--fw-heading, 900);
  text-transform: uppercase;
}

.features-section__subtitle {
  margin: 0;
  color: var(--content-secondary);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
  max-inline-size: 42ch;
}

/* ── The list ──
   Rows, not cards. Nothing here is clickable, and a card implies a destination.
   Separation is one divider edge between rows — the single border treatment the
   system still allows — rather than six floating containers. */
.features-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.features-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

/* Built from the RGB triplet, not `var(--border-subtle)`.
   99-global.css redefines --border-subtle as the shorthand value `none` (legacy
   uses it as `border: var(--border-subtle)`), while the design system defines it
   as a colour. On this page the legacy definition wins, so `1px solid
   var(--border-subtle)` computes to `1px solid none` and the whole declaration
   is dropped — which is also why the borders in 10-footer.css and
   01-header.css never render. --border-subtle-rgb is not overridden. */
.features-row + .features-row {
  border-block-start: 1px solid
    rgb(var(--border-subtle-rgb) / var(--border-subtle-alpha, 0.08));
}

/* One icon treatment.
   The six items previously used success / warning / danger / info / accent /
   neutral tints decoratively, which painted "Enterprise-Grade DDoS Defense" in
   the colour reserved for errors and "24/7 Support" in the warning colour.
   Colour was signalling categories that do not exist. */
.features-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  color: var(--content-accent);
  background-color: var(--accent-tint);
}

.features-icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.features-title {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--content-strong);
  margin: 0 0 var(--space-1);
}

.features-text {
  font-size: var(--text-md);
  line-height: var(--leading-lg);
  color: var(--content-secondary);
  margin: 0;
}

/* ── Responsive: heading above the list ── */
@media (max-width: 900px) {
  .features-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .features-center {
    position: static;
  }
}

@media (max-width: 480px) {
  .features-row {
    gap: var(--space-3);
    padding-block: var(--space-4);
  }
  .features-icon {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/discord-bot-hosting.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────────────────
   DISCORD BOT HOSTING — bot picker cards
   Styled to match the site's card family: solid --panel-bg-1
   surface, token radii, lift-on-hover. Each bot keeps a subtle
   brand-coloured left accent (--bot-accent set inline per card).
───────────────────────────────────────────────────────── */

/* ── Search input — same convention as every other input on the site ── */
#searchInput {
  width: 400px;
  max-width: 100%;
  display: block;
  margin: 0 auto 24px;
  padding: var(--space-3) var(--space-4);
  height: 46px;
  font-size: var(--text-md);
  font-family: inherit;
  color: var(--content-strong);
  background: var(--surface-overlay);
  border: none;
  border-radius: var(--radius-xs);
  outline: none;
  transition: border-color 0.2s ease;
}
#searchInput::placeholder { color: var(--content-tertiary); }
#searchInput:focus { border-color: var(--accent, var(--accent-500)); }

/* ── Cards grid ── */
.bots-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem var(--space-5);
}
@media (max-width: 1024px) {
  .bots-cards-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bots-cards-container { grid-template-columns: 1fr; }
}

.bots-card-link {
  text-decoration: none;
  cursor: pointer;
  display: flex;
}

/* ── Card ── */
.bots-card {
  position: relative;
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--content-strong);
  text-decoration: none;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--bot-accent, var(--accent, var(--accent-500)));
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.bots-card:hover {
  background-color: var(--surface-hover);
}
.bots-card:active {
}

/* Icon on the left */
.bots-card-icon {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* Title */
.bots-card-title {
  font-size: var(--text-md);
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--content-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Price bubble — accent pill, sticks to the right */
.bots-price-bubble {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, var(--accent-500));
  color: var(--content-strong);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  border-radius: var(--radius-xs);
}

.discord-monthly {
  font-size: 0.72em;
  font-weight: 400;
  margin-left: var(--space-1);
  opacity: 0.85;
}

/* Grayed-out state (search filter) */
.bots-card.grayed {
  filter: grayscale(100%);
  opacity: 0.4;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/panel-details.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
.panel-details-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-5);
  background-color: transparent;
}

.features-tabs {
  display: flex;
  gap: var(--space-5);
}

/* Sidebar Tabs */
.features-tabs__sidebar {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Ported from the design system's .tabs__tab.
   Selection is carried by the surface ramp, not by a border: the old rule gave
   active and inactive near-identical fills (2E3244 vs 353B58) and distinguished them
   with a 1px accent outline, so the state was doing all its work through the
   one treatment the system removes everywhere else. */
.features-tabs__tab {
  background: transparent;
  color: var(--content-secondary);
  /* Explicit, not omitted: this is a <button>, and the legacy stylesheet has no
     form reset, so dropping the declaration exposes the UA's 2px outset border. */
  border: none;
  padding: var(--space-4);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
  border-radius: var(--radius-md);
  /* Clips the progress bar to the card's curve. The bar cannot round itself:
     border-radius is clamped to half an element's height, so 10px on a 3px bar
     collapses to ~1.5px and its corners jut out past the card. Only clips
     children — the focus ring is a box-shadow on this element and is
     unaffected. */
  overflow: hidden;
}
.features-tabs__tab:hover {
  background-color: var(--surface-hover);
}
.features-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.features-tabs__tab-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.features-tabs__tab-title {
  font-size: var(--text-xl);
  font-weight: 600;
}
.features-tabs__icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  /* One accent for every icon on the page. */
  color: var(--content-accent);
}
.features-tabs__tab-desc {
  display: none;
  margin-top: var(--space-2);
  line-height: 1.4;
  font-size: var(--text-lg);
  color: var(--content-secondary);
  font-weight: var(--font-normal);
}
.features-tabs__tab-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--surface-overlay);
  overflow: hidden;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
/* Was `transition: width linear` with no duration and nothing ever changing
   the width — so the bar existed in the stylesheet and never moved. It is an
   animation now, with the duration supplied by the component so the timing
   lives in one place. */
@keyframes features-tab-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

.features-tabs__tab-progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--accent, var(--accent-500));
  animation-name: features-tab-fill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion: reduce) {
  /* The component also stops auto-advancing here, so the bar has nothing
     left to count down. */
  .features-tabs__tab-progress { display: none; }
}


/* inline tab image (mobile only) */
.features-tabs__tab-img {
  display: none;
  width: 100%;
  margin-top: var(--space-3);
}

/* Active Tab States */
/* One step up the ramp, and the label goes to full strength. No stroke. */
.features-tabs__tab.active {
  background-color: var(--surface-raised);
  color: var(--content-strong);
}
.features-tabs__tab.active .features-tabs__tab-desc {
  display: block;
}

/* Content Pane */
.features-tabs__content {
  flex: 1 1;
  min-width: 0;
}
.features-tabs__pane {
  display: none;
}
.features-tabs__pane.active {
  display: block;
}
.features-tabs__pane img {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* Responsive */
@media (max-width: 768px) {
  .features-tabs {
    flex-direction: column;
  }
  .features-tabs__sidebar {
    width: 100%;
    gap: var(--space-3);
    order: 0;
  }
  .features-tabs__tab {
    width: 100%;
    padding: var(--space-3);
    white-space: normal;
  }
  .features-tabs__tab-desc {
    display: block;
  }
  .features-tabs__tab-progress {
    display: none;
  }
  .features-tabs__content {
    display: none;
  }
  .features-tabs__tab.active .features-tabs__tab-img {
    display: block;
    border-radius: var(--radius-lg);
  }
}





/* Panel Intro (add into your <style> or CSS file) */
.panel-intro {
  text-align: center;
  margin: var(--space-12) 0;
  padding: 0 var(--space-4);
}
.panel-intro__title {
  /* Section-heading step, identical across every section (--display-2 curve). */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  line-height: 1.1;
  font-weight: 900;
  color: var(--content-strong);
  margin-bottom: var(--space-4);
}
.panel-intro__subtitle {
  /* Shared section-subtitle spec — identical in every section. */
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--content-secondary);
  max-inline-size: 60ch;
  margin: 0 auto var(--space-10);
  font-weight: var(--font-medium);
}

/* Small tweaks for super-small screens */
@media (max-width: 480px) {
  .panel-intro {
    margin: var(--space-8) 0;
  }
  .panel-intro__title {
    margin-bottom: .75rem;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/gp-hero.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/* Montserrat is self-hosted by next/font in the root layout; reach it through
   --font-sans, never by family name. */

.pw-feature img{
    filter: brightness(0) saturate(100%) invert(41%) sepia(62%) saturate(922%) hue-rotate(209deg) brightness(99%) contrast(91%);
    margin-right: var(--space-1-5);
}


/* ── Per-game page backdrop ────────────────────────────────────────────────
   The game's own backgroundImage, painted behind the hero and faded out into
   the flat surface before the plans begin.

   Deliberately the same shape as .home-hero-backdrop in home-hero.css rather
   than a second mechanism: absolutely positioned against the PAGE, not the
   content column (.container is explicitly position:static for this reason —
   see 99-global.css), so it runs full-bleed and reaches up behind the fixed
   transparent header. z-index -1 puts it above the html canvas and below the
   content, which 99-global.css already pins to z-index 1.

   Sized off .pw-hero, NOT the viewport. 100vh (the homepage's value) is right
   there because that hero IS full-viewport; here it isn't, so the fade point
   drifts away from the hero as the window changes size. Measured on Rust: at
   1280x820 the gradient landed at 508px against a hero ending at 548 — fine
   by luck — while at 375x812 it landed at 503px against a hero ending at 350,
   putting 89px of artwork behind the plan cards. Anchoring to the hero makes
   the fade land on its bottom edge at every breakpoint instead.

   The original Hugo site did this with a --page-bg custom property on <body>.
   That does not port: in the App Router the <body> belongs to the layout, and
   a page cannot set an inline style on it without client-side JS, which would
   flash the flat background on every load. A server-rendered element is the
   same picture with none of that. */
.gp-backdrop {
  position: absolute;
  /* Up behind the fixed transparent header — matches body's padding-top in
     01-header.css, which is what pushes the hero clear of it. */
  top: -110px;
  bottom: 0;
  /* Full-bleed out of the 1280px content column. html/body already carry
     overflow-x: clip (99-global.css), so 100vw cannot add a scrollbar. */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Fades top → bottom onto the flat page background so the plans below sit on
   the surface token rather than on artwork. The stops run later than the
   homepage's (which reaches flat at 62%, where its search bar sits): here
   100% IS the hero's bottom edge, so the image should still be carrying the
   hero at 80% and land exactly as the section ends. */
.gp-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgb(var(--surface-base-rgb) / 0.55) 0%,
    rgb(var(--surface-base-rgb) / 0.68) 45%,
    rgb(var(--surface-base-rgb) / 0.9) 80%,
    var(--surface-base) 100%
  );
}

.pw-hero {
  /* One section rhythm, from the space scale. */
  /* No top padding: body's 110px padding-top (01-header.css) already clears
     the fixed header, so anything here was gap on top of gap. */
  padding: 0 var(--space-4) var(--space-8);
  background: transparent;
  color: var(--pure-white);
  /* Containing block for .gp-backdrop, so the backdrop's height is the hero's.
     z-index stays auto on purpose: this must NOT become a stacking context, or
     the backdrop's z-index -1 would be trapped inside the hero and paint over
     the page background instead of behind the content. */
  position: relative;
}

/* Desktop: image on right, content on left */
.pw-header {
  display: flex;
  flex-direction: row-reverse;   /* <— flip the order */
  max-width: 1200px;
  margin: 0 auto;
  gap: var(--space-8);
  /* Centred, not top-aligned: the artwork is taller than the copy, so
     flex-start left the text hanging from the top of a much bigger block. */
  align-items: center;
  margin-bottom: -40px;


}

/* make sure image sits in its own flex item */
.pw-header-image {
  /* The copy carries the page — heading, description and six feature chips —
     so it gets the wider column. At a straight 1:1 the artwork was as wide as
     the text and taller than it, which read as an illustration with a caption
     rather than a hero. */
  flex: 0 1 40%;
  max-width: 40%;
  order: 0;                      /* reset any ordering */
}
.pw-header-image img {
  width: 100%;
  /* The source is a CMS field, so there are no width/height attributes to
     derive a ratio from — at height:auto alone the hero occupied zero height
     until the file arrived and then shoved the whole page down. A fixed ratio
     reserves the box up front; object-fit keeps art of any shape from
     stretching inside it. */
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.pw-header-content {
  flex: 1 1 60%;
  min-width: 0;
}

.pw-header-content h1 {
  font-size: clamp(2.5rem, 5vw + .5rem, 4rem);
  /* Game name and "SERVER HOSTING" each stay on one line. The clamp shrinks
     them to fit; the <=1004px block below releases this so a long name can
     still wrap on a phone rather than overflow. */
  white-space: nowrap;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.pw-game-name {
  color: var(--accent-500);
}

.pw-header-content p {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  /* Reading copy: --content-secondary at normal weight on the type scale.
     Was 600-weight --content-tertiary — tertiary is the metadata step and 600
     is a heading weight, which together made body text read as bold small
     print. Same fix as the homepage. */
  line-height: var(--leading-lg);
  color: var(--content-secondary);
  font-weight: var(--font-normal);

}

/* features row */
.pw-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
}

/* Scoped to .pw-features on purpose: gp-features.css defines a bare
   .pw-feature for its full-width bar at --text-lg / display:flex. Same
   specificity, later in the bundle, so an unscoped rule here loses every
   time. Do not un-scope this. */
.pw-features .pw-feature {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3);
  /* --radius-md, matching the exclusive-feature pills: radius tracks the
     element's size, and a 4px corner on a chip this tall read as square. */
  border-radius: var(--radius-md);
  /* #2a2f418c — --surface-raised at 55%, so the hero art reads through. */
  background: rgb(var(--surface-raised-rgb) / 0.55);
  /* 13px / 600 / light grey, as specified. --text-sm is exactly 0.8125rem,
     so the size lands on the type scale rather than as a literal. */
  color: var(--content-secondary);
  font-size: var(--text-sm);
  font-weight: var(--fw-label, 600);
  white-space: nowrap;
}

.pw-features .pw-feature svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: var(--accent-500);
}




/* Mobile: stack, image on top */
@media (max-width: 600px) {
  .pw-header {
    flex-direction: column;     /* back to normal stacked */
    align-items: center;
    text-align: center;
  }

  .pw-header-content h1 {
    /* Page-title step, identical on every page. */
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
    /* Narrow enough that forcing one line would overflow the viewport. */
    white-space: normal;
  }
  .pw-header-content p {
    font-size: var(--text-sm);
  }
  .pw-features {
    /* Chips wrap as pills rather than stacking into a single column. */
    flex-direction: row;
    justify-content: center;
    gap: var(--space-2);
  }
  .pw-features .pw-feature {
    justify-content: center;
  }
}







/* Mobile: stack, image on top */
@media (max-width: 1004px) {


  .pw-header-content h1{
    /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
    white-space: normal;
  }

  .pw-header-content p{
    font-size: var(--text-sm);

  }

  .pw-features .pw-feature{
    font-size: var(--text-xs);
  }


  .pw-header-content{
    width: 90%;
  }


  .pw-feature img{
    margin-right: var(--space-1);
    width: 20px;
  }


}




























.gp-hero__heading {
  color: var(--accent-500);
  /* Same curve as the homepage hero. Was a fixed 4rem with no responsive
     override — larger than the homepage hero's own maximum, and at 375px a
     long game name measured 408px, overflowing its box to be clipped by the
     hero rather than wrapping. */
  font-size: clamp(2rem, 5.5vw + 0.5rem, 3.75rem);
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* make the subtitle sit on its own line and never wrap */
.gp-hero__subtitle {
  display: block;       /* force a line‐break before and after */
  white-space: nowrap;
  margin-top: 0.25em;   /* a little breathing room */
  color: var(--pure-white);          /* inherited from your theme, override if needed */
}











/* ── Store badges (availableOn) ── */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5em 1em;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: none;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--content-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.store-badge__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

.store-badge--steam  { border-color: rgba(102,192,244,0.25); }
.store-badge--epic   { border-color: var(--border-strong); }
.store-badge--xbox   { border-color: rgba(16,124,16,0.35); }
.store-badge--ps     { border-color: rgba(0,112,209,0.35); }
.store-badge--mobile { border-color: var(--border-default); }

/* CSS */
.steam-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background-color: var(--surface-raised);      /* dark background */
  color: var(--pure-white);                /* light grey text */
  padding: 0.75em 1.5em;         /* vertical + horizontal padding */
  border-radius: var(--radius-sm);         /* pill shape */
  font-family: "Segoe UI", sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease;
}



.steam-icon {
  width: 1.5em;                  /* match line-height of text */
  height: 1.5em;
  object-fit: contain;
  margin-right: 0.75em;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(41%) sepia(62%) saturate(922%) hue-rotate(209deg) brightness(99%) contrast(91%);
}

.steam-text {
  text-transform: uppercase;
}











@media (max-width: 804px) {
  .pw-features {
    display: none !important;
  }
    .pw-header-image {
    display: none !important;
  }



  .pw-hero{
    padding: 0 var(--space-8) var(--space-4) var(--space-8);
  }
}






/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/gp-features.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/

    /* FULL-WIDTH BAR */

    .pw-feature {
    display: flex;
    align-items: center;
    font-size: var(--text-lg);
    color: var(--content-tertiary);
    }

    .pw-exclusive {
      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      background: var(--accent-500);
      padding: var(--space-6) 0;      /* vertical padding */
      overflow: hidden;       /* clip pseudo-element */
      margin-bottom: var(--space-5);
    }

    /* PSEUDO-ELEMENT: the faint background image */
    .pw-exclusive::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: var(--accent-500);
      opacity: 1;           /* very low opacity */
      z-index: 1;
    }

    /* INNER WRAPPER – on top of the image */
    .pw-exclusive__inner {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--space-4);
      text-align: center;
    }

    /* HEADING */
    .pw-exclusive__title {
      font-family: var(--font-sans);
      font-size: var(--text-3xl);
      font-weight: 800;
      color: var(--pure-white);
      margin: 0 0 var(--space-4);
    }

    /* FEATURE PILLS */
    .pw-feature-list {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-2) var(--space-4);
      padding: 0;
      margin: 0;
      list-style: none;
    }

    /* Pills tinted from the band they sit on, not from the page's dark surface.
       They were --surface-overlay, a dark slate, which read as a strip of the
       page punched through the accent bar rather than as part of it. A white
       wash at low alpha stays on the accent hue at any band colour. */
    .pw-feature-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      height: 2.25rem;
      padding: 0 var(--space-4);
      background: rgb(255 255 255 / 0.16);
      /* Same --radius-md as the hero feature chips, so both chip rows on a
         game page share one corner. */
      border-radius: var(--radius-md);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--pure-white);
      white-space: nowrap;
      transition: background var(--duration-fast) var(--ease-standard);
    }

    .pw-feature-item:hover {
      background: rgb(255 255 255 / 0.24);
    }

    /* Sits on the text baseline rather than being pushed off it by a margin —
       the gap on the flex parent handles the spacing. */
    .pw-feature-item__icon {
      flex: none;
      opacity: 0.9;
    }
  
/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/gp-description.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --highlight-color: var(--accent-500);
    --font: var(--font-sans); /* loaded once via <link> in the root layout <head> */

}

/* full-bleed helper */
.pn-full-width-section {
  font-family: var(--font);
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: var(--surface-base);
}

/* reuse your existing “pn-” styles… */

.pn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-2-5) var(--space-5);
  color: var(--pure-white);
  font-family: var(--font-sans);
}

.pn-flex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: var(--space-10);
}

.pn-video-embed {
  position: relative;
  padding-top: 56.25%;
  border: none !important;
  border-radius: var(--radius-sm);
}
.pn-video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  border-radius: var(--radius-lg);

}

.pn-heading {
  /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.pn-highlight {
  color: var(--highlight-color);
}
.pn-support-text p,
.pn-support-section p {
  font-size: var(--text-lg);
  opacity: 0.85;
  /* Reading copy: --content-secondary at normal weight on the type scale.
     Was 600-weight --content-tertiary — tertiary is the metadata step and 600
     is a heading weight, which together made body text read as bold small
     print. Same fix as the homepage. */
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}

.pn-gallery {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--space-5);
}
.pn-image-container img {
  width: 100%; height: auto;
  object-fit: cover;
  border: none !important;
  border-radius: var(--radius-lg);
}



















/* Carousel mode on narrow screens */
@media (max-width: 768px) {
  .pn-gallery {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  }

  .pn-gallery::-webkit-scrollbar {
    display: none; /* hide scrollbar */
  }

  .pn-gallery .pn-image-container {
    flex: 0 0 80%; /* each image takes ~80% of screen width */
    scroll-snap-align: center;
  }

  .pn-gallery img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    object-fit: cover;
  }


  .pn-flex{
    gap: 0;
  }
}
/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/gp-faq.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --game-faq-purple:    var(--accent-500);
  --game-faq-dark-bg:   var(--surface-canvas);
  --game-faq-panel-bg:  var(--surface-raised);
  --game-faq-text-light:var(--content-strong);
  --game-faq-text-muted:var(--content-secondary);
  --game-faq-font:      var(--font-sans);
}

/* Layout */
.game-faq-section-container {
  display: flex;
  gap: var(--space-10);
  width: 100%;
  /* One section rhythm, from the space scale. */
  padding: var(--space-16) var(--space-5);
  max-width: 1400px;
  margin: 0 auto;
}
.game-faq-section-left {
  flex: 1 1 40%;
}
.game-faq-section-title {
  /* Casing lives here now, not in the message catalogue. The heading used to
     be stored pre-uppercased and pre-split ("REQUENTLY"); it holds a normal
     phrase now, so the display casing is CSS. Browsers uppercase per <html
     lang>, which is what gets Turkish dotted/dotless i right. */
  text-transform: uppercase;
  /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  margin-bottom: var(--space-5);
  line-height: 1.1;
  font-family: var(--game-faq-font);
  color: var(--game-faq-text-light);
  font-weight: 900;
}
.game-faq-highlight { color: var(--game-faq-purple); }
.game-faq-word      { color: var(--game-faq-text-light); }

.game-faq-description {
  color: var(--content-secondary);
  margin-bottom: var(--space-8);
  line-height: var(--leading-lg);
  font-weight: var(--font-medium);
}

.game-faq-buttons {
  display: flex;
  gap: var(--space-4);
}
.game-faq-btn {
  text-decoration: none;
  font-family: var(--game-faq-font);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  border-radius: var(--radius-md);
  transition: opacity 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

/* Primary */
.game-faq-btn-primary {
  background: var(--game-faq-purple);
  color: var(--pure-white);
}
.game-faq-btn-primary:hover {
  opacity: var(--hover-opacity, 0.85);
}
.game-faq-btn-primary:active {
  transform: scale(var(--press-scale, 0.97));
}

/* Secondary */
.game-faq-btn-secondary {
  background: var(--pure-white);
  color: var(--surface-canvas);
}
.game-faq-btn-secondary:hover {
  opacity: var(--hover-opacity, 0.85);
}
.game-faq-btn-secondary:active {
  transform: scale(var(--press-scale, 0.97));
}

.game-faq-icon {
  width: 1em;
  height: 1em;
}
#mustwhite {
  filter: brightness(0) invert(1);
}

.game-faq-section-right {
  flex: 1 1 60%;
}

/* Accordion */
.game-faq-accordion details {
  background: var(--game-faq-panel-bg);
  margin-bottom: var(--space-3);
  overflow: hidden;
  /* Surface → --radius-lg; --radius-xl is the modal step. */
  border-radius: var(--radius-lg);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.game-faq-accordion summary {
  list-style: none;
  cursor: pointer;
  /* 10px all round (--space-2-5), down from 16px vertical / 20px horizontal. */
  padding: var(--space-2-5);
  font-size: var(--text-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  background: var(--game-faq-panel-bg);
  color: var(--content-strong);
  font-weight: var(--font-semibold);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

/* Hover and open ride the surface ramp, matching the homepage FAQ: raised at
   rest → hover on pointer → overlay while open. Ground, not colour, and no
   lift. This block previously had no hover or open state at all — the only
   feedback was the chevron rotating. */
.game-faq-accordion summary:hover {
  background-color: var(--surface-hover);
}

.game-faq-accordion details[open],
.game-faq-accordion details[open] summary,
.game-faq-accordion details[open] .game-faq-content {
  background-color: var(--surface-overlay);
}

.game-faq-accordion details[open] summary:hover {
  background-color: var(--surface-hover);
}

.game-faq-accordion summary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--surface-canvas),
    0 0 0 4px var(--accent-500);
}
.game-faq-accordion summary::-webkit-details-marker {
  display: none;
}
.game-faq-accordion summary::after {
  content: '';
  /* flex: none is the fix. The chevron is a flex item in the summary row and
     had no shrink guard, so against a long question it was squeezed to
     0px wide and vanished — which is why game pages, whose questions are
     the longest, showed no icon at all. */
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  /* Masked and tinted from a token rather than a hardcoded #8C52FF recoloured
     by a six-function filter chain. The filter approach could not name the
     accent, so the arrow drifted from every other icon on the page. */
  background-color: var(--content-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.game-faq-accordion details[open] summary::after {
  transform: rotate(180deg);
}

.game-faq-content {
  /* Matches .faq-content. Here the answer is a bare string with no <p>, so the
     `0` top padding welded the text to the question rather than merely
     unbalancing the box — same rule, opposite symptom. */
  /* Roomier than the 10px question row: this is a block of reading copy, not
     a single-line label, so it needs the breathing room the row does not. */
  padding: var(--space-4);
  background: var(--game-faq-panel-bg);
  /* Answer copy is reading text, not a heading. */
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  line-height: var(--leading-lg);
  color: var(--content-secondary);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .35s ease;
}
.game-faq-accordion details[open] .game-faq-content {
  max-height: 500px;
  opacity: 1;
  animation: slideDown .35s ease;
}

@keyframes slideDown {
  from { transform: translateY(-10px); }
  to   { transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1050px) {
  
  .game-faq-section-container {
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-10) var(--space-4);
  }
  .game-faq-section-left,
  .game-faq-section-right {
    flex: 1 1 100%;
  }
  .game-faq-section-title {
    /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
    margin-bottom: var(--space-4);
  }
  .game-faq-description {
    font-size: var(--text-md);
    margin-bottom: var(--space-6);
  }
  .game-faq-buttons {
    flex-direction: row;
    gap: var(--space-3);
  }
  .game-faq-btn {
    text-align: center;
    gap:var(--space-2-5);
    padding: var(--space-3) var(--space-3);
  }
  .game-faq-accordion details {
    margin-bottom: var(--space-3);
  }
  .game-faq-accordion summary {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-lg);
    font-weight: 600;
  }
  .game-faq-content {
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
    font-size: var(--text-md);
  }
}




@media (max-width: 480px) {
  .game-faq-section-container {
    padding: var(--space-8) var(--space-3);
    gap: var(--space-4);
  }
  .game-faq-section-title {
    font-size: var(--text-3xl);
  }
  .game-faq-description,
  .game-faq-content {
    font-size: var(--text-md);
  }
  .game-faq-accordion summary {
    padding: var(--space-2-5) var(--space-4);
  }
  .game-faq-content {
    padding-left: var(--space-10);
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/choose-plan.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────────────────
   CHOOSE-PLANS PARTIAL
───────────────────────────────────────────────────────── */

/* ── Notify Me (coming soon game page CTA) ── */
.notify-me-section {
  text-align: center;
  /* One section rhythm, from the space scale. */
  padding: var(--space-16) var(--space-4);
}

.notify-me-section h2 {
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  font-weight: 800;
  color: var(--color-accent, var(--accent-500));
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notify-me-section__text {
  font-size: var(--text-lg);
  color: var(--content-secondary);
  max-width: 480px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.notify-me-section__row {
  display: flex;
  gap: var(--space-2-5);
  max-width: 460px;
  margin: 0 auto;
  justify-content: center;
}

.notify-me-section__input {
  flex: 1 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-overlay);
  color: var(--content-primary);
  font-size: var(--text-md);
  outline: none;
  transition: border-color 0.15s;
}
.notify-me-section__input:focus {
  outline: none;

  box-shadow: var(--shadow-focus);
}
.notify-me-section__input::placeholder {
  color: rgba(148, 150, 168, 0.6);
}

/* Color/radius/motion now come from .ui-btn (src/components/ui/ui.css) — this
   just re-adds the gap the icon+label layout expects. */
.notify-me-section__btn {
  gap: var(--space-2);
  white-space: nowrap;
}

.notify-me-section__status {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  min-height: 20px;
}

/* "Coming Soon" label in the game grid price slot */
.stream-ui__price-label--soon {
  color: var(--color-accent, var(--accent-500));
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 480px) {
  .notify-me-section__row { flex-direction: column; }
  .notify-me-section__btn { justify-content: center; }
}

.plan-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.plan-card__icon {
  width: 30px;
  height: 30px;
}

.choose-plans {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0 0 var(--space-8) 0;
  justify-content: center;
}

.plan-card {
  position: relative;
  /* On the base card, not just --featured. The ribbon is only rendered on a
     featured card, but relying on that coupling is what let it escape and
     paint over the neighbouring card whenever the two got out of step. */
  overflow: hidden;
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  max-width: 400px;
  border: none !important;
  box-shadow: none;

  /* animation */
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* The card does not react to the pointer — the Buy Now button inside it is
   the thing you click, and having the whole card light up as well competed
   with it and made the card look clickable when it is not. */
.plan-card:hover {
  box-shadow: none;
}

/* Highlighted "Most Popular" plan. Size and elevation only — no background
   change.
   It used to sit on --surface-overlay, which is the same kind of lift the
   hover state uses, so the middle card looked permanently hovered. Worse,
   this rule and .plan-card:hover have equal specificity and this one comes
   later, so hovering the featured card did nothing at all: the one card the
   layout points at was the one that did not respond to the pointer. Scale
   marks it out; hover stays the pointer's job on every card alike. */
.plan-card.plan-card--featured {
  border: none;
  overflow: hidden;
  /* No scale: the featured card is the same size as every other card. The
     corner ribbon is what marks it out, and scaling it up made it break the
     row's shared height and baseline. z-index stays so the ribbon can hang
     over the neighbouring card rather than being clipped behind it. */
  z-index: 1;
}

.plan-card__ribbon-wrap {
  display: contents;
}
/*
 * Corner ribbon: a band hung past the card's right edge and rotated 45°, with
 * the card's overflow:hidden cutting it into a triangle.
 *
 * Two lines, not one. Fitting "MOST POPULAR" on a single diagonal line means
 * the band has to be long enough for the whole phrase *and* short enough that
 * the clipped end does not eat a letter — a balance that held for English and
 * broke for every longer translation ("Le plus populaire", "Am beliebtesten").
 * Wrapping removes the constraint: the horizontal padding keeps the text box
 * narrow so the label always breaks, and text-wrap: balance splits it evenly
 * instead of leaving one word stranded.
 */
.plan-card__ribbon,
.minecraft-plan-card__ribbon {
  position: absolute;
  top: 26px;
  right: -58px;
  width: 200px;
  padding: var(--space-1-5) var(--space-12);
  background: var(--accent, var(--accent-500));
  color: var(--pure-white);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  line-height: 1.15;
  transform: rotate(45deg);
  z-index: 2;
  pointer-events: none;
}


.plan-card__corner-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(44%) sepia(94%) saturate(2368%) hue-rotate(220deg) brightness(97%) contrast(95%);
}

.plan-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.plan-card__name {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--pure-white);
  margin: 0;
}

/* One line — see .minecraft-plan-card__meta. The spec line breaking after
   the pipe left cards in a row at different heights. */
.plan-card__meta {
  font-weight: 700;
  color: var(--pure-white);
  white-space: nowrap;
  font-size: clamp(0.8125rem, 1.6vw, 1rem);
}

.plan-card__discount,
.minecraft-plan-card__discount {
  display: inline-block;
  background: var(--status-danger-base);
  color: var(--pure-white);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  /* Same corner as .billing-toggle__discount, so both "% off" chips read as
     one component rather than a pill and a rounded rectangle. */
  border-radius: var(--radius-xs);
  font-weight: 600;
}

/* Old price, new price and "/month" stay on one line — see
   .minecraft-plan-card__prices. */
.plan-card__prices {
  margin-top: auto;
  font-size: var(--text-lg);
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.plan-card__old {
  text-decoration: line-through;
  color: var(--content-tertiary);
  /* Spacing comes from the price row's flex gap (99-global.css). Keeping a
     margin here as well double-spaced it. */
}

.plan-card__new {
  font-weight: 800;
  color: var(--pure-white);
  font-size: var(--text-3xl);
}

/* Price typography (.price-affix / .price-cents) is shared — see 99-global.css.
   Scoped copies lived here AND in minecraft-plans.css and had already drifted:
   this one raised the cents with `super`, the other with a length, so the two
   card types set them at different heights. */

.monthly {
  font-weight: 400 !important;
  color: rgb(157, 157, 157);
}

.plan-card__action {
  margin-top: var(--space-4);
  width: 100%;
}

/* Color/radius/motion now come from .ui-btn (src/components/ui/ui.css) — this
   just makes the button full-width inside the plan card. */
.plan-card__button {
  width: 100%;
}

.plan-card__button-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(58deg) brightness(106%) contrast(101%);
}

.choose-plan-section {
  text-align: center;
  margin-top: var(--space-16);
}

/* Compact header row: heading on the left, billing toggle on the right */
.choose-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.choose-plan-section h2 {
  font-size: var(--text-2xl);
  margin: 0;
  color: var(--pure-white);
  line-height: 1.2;
  text-align: left;
  font-weight: 800;
}

/* ────────────────────────────────────────────────
   BILLING TOGGLE — compact segmented control
───────────────────────────────────────────────── */

.billing-toggle-wrapper {
  display: flex;
  justify-content: flex-end;
  /* Room for the discount chips, which now hang half above the toggle. */
  margin: var(--space-3) 0 0;
}

.billing-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: var(--space-0-5);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-1-5);
  overflow: visible;
  width: auto;
}

/* Option buttons */
/* A row, so every option is one line tall whether or not it carries a chip.
   Stacked, the chip forced each option to the height of chip + label, which
   made the selected pill a tall block beside two short ones and pushed the
   chips into the container's top edge.
   The chip stays IN FLOW rather than absolutely positioned: positioned, it
   contributed nothing to its option's width — sized for "SAVE 10%" and handed
   "ÉCONOMISEZ 10%", it grew past the tab and collided with the one beside it.
   In flow, the tab is always at least as wide as its own contents, in any
   language. */
.billing-toggle__option {
  appearance: none;
  outline: none;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--content-strong);
  text-align: center;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  border-radius: var(--radius-sm);
}
.billing-toggle__option:hover {
  color: var(--pure-white);
}

/* Active pill */
.billing-toggle__option.active {
  background: var(--accent, var(--accent-500));
  color: var(--pure-white);
  margin: 0;
  z-index: 2;
}

/* Discount chips, inline after the label.
   Sale-red rather than accent: the chip sits on top of the selected option,
   which is itself accent-filled, so an accent chip disappeared into it
   exactly when the discount was most relevant. Matches the chip the
   Minecraft plan cards already use for the same "% off" meaning. */
.billing-toggle__discount {
  /* Straddles the OUTER .billing-toggle edge, not the tab's own. The options
     are stretched inside the container's var(--space-1-5) padding, so lifting
     the chip by that padding puts it level with the container's top border;
     translateY(-50%) then centres it ON that border, half outside and half
     inside. left:50% + translateX keeps it centred on its own tab. The
     container is overflow:visible and the wrapper reserves room above. */
  position: absolute;
  top: calc(var(--space-1-5) * -1);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: var(--status-danger-base);
  color: var(--pure-white);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: var(--space-1) var(--space-1-5);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

/* optional small label below text */
.price-cycle {
  display: block;
  font-size: 0.85em;
  font-weight: 400;
  opacity: 0.8;
  margin-top: var(--space-0-5);
}




/* Tablet & below: stack heading above the centered toggle */
@media (max-width: 860px) {
  .choose-plan-header {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }
  .choose-plan-section h2 { text-align: center; }
  .billing-toggle-wrapper { justify-content: center; width: 100%; }
}







/* Small phones: wrap the options into a 2-column grid */
@media (max-width: 520px) {
  .billing-toggle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Was a space-5 row gap to clear the chips when they sat above the label.
       They are inline now, so the options only need normal spacing. */
    gap: var(--space-2);
    width: 100%;
    max-width: 340px;
    padding: var(--space-2);
  }
  .billing-toggle__option {
    width: 100%;
    /* Two columns of a 340px grid is not always enough for a translated label
       plus its chip on one line, so let the chip drop under the label rather
       than overflow the tab. */
    flex-wrap: wrap;
    row-gap: var(--space-1);
    padding-inline: var(--space-2);
  }
}
  














/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/modpack-list.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/

/* 2) Container */
.ef-container {
  background-color: var(--surface-canvas);
  color: var(--pure-white);
  padding: var(--space-5);
}

/* 3) Search bar */
#ef-globalSearch {
  display: block;
  margin: 0 auto 30px;
  padding: var(--space-2-5);
  width: 80%;
  max-width: 300px;
  font-size: var(--text-md);
  background: var(--surface-overlay);
  color: var(--pure-white);
  border: none;
  border-radius: var(--radius-md);
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}
#ef-globalSearch:focus {
  outline: none;

  box-shadow: var(--shadow-focus);
}
#ef-globalSearch::placeholder {
  color: var(--content-tertiary);
}

/* 4) Section wrapper */
.ef-section {
  text-align: center;
  margin-bottom: var(--space-10);
}

/* 5) Logos */
.ef-logo {
  display: block;
  margin: 0 auto 15px;
  max-width: 150px;
}

/* 6) Tooltip */
.ef-tooltip {
  position: relative;
  display: inline-block;
}
.ef-tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pure-white);
  color: var(--surface-canvas);
  padding: var(--space-1-5) var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: opacity 0.2s;
  z-index: 10;
}
.ef-tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: var(--pure-white) transparent transparent transparent;
  transform: translateX(-50%);
}
.ef-tooltip:hover .ef-tooltip-content {
  visibility: visible;
  opacity: 1;
}

/* 7) Flex list */
ul.ef-modpack-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  justify-content: center;
  max-width: 1200px;
}
ul.ef-modpack-list li {
  background: var(--surface-raised);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}
ul.ef-modpack-list li:hover {
  background: var(--surface-overlay);
}
ul.ef-modpack-list li a {
  color: var(--pure-white);
  text-decoration: none;
  /* Was 7px — below the scale and not legible. --text-xs keeps this a step
     under the >=768px size the media query below already sets. */
  font-size: var(--text-xs);
}
@media (min-width: 768px) {
  ul.ef-modpack-list li a {
    font-size: var(--text-sm);
  }
}




/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/about-sections.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
/* ── /about-us ────────────────────────────────────────────────────────
   Rebuilt from the alternating text/image strip it used to be. Each
   section now takes the layout its content actually wants: a narrative
   lead, card grids where the body is a list of labelled items, a split
   for the panel walkthrough, and a measured prose band for the support
   copy. Section rhythm, type steps, radius roles, surface ramp and icon
   treatment are all the shared site values — nothing bespoke.
   ──────────────────────────────────────────────────────────────────── */

.ab-page {
  display: flex;
  flex-direction: column;
}

/* One section rhythm, from the space scale. */
.ab-section,
.ab-lead {
  padding: var(--space-16) 0;
}

/* ── Shared section head ── */
.ab-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  margin-bottom: var(--space-10);
}

/* Section-heading step, identical in every section site-wide. */
.ab-head__title {
  margin: 0;
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  line-height: 1.1;
  font-weight: 900;
  color: var(--content-strong);
  text-wrap: balance;
}

/* Shared section-subtitle spec. */
.ab-head__sub {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--font-medium);
  color: var(--content-secondary);
  max-inline-size: 60ch;
}

.ab-head__title--left,
.ab-head__sub--left { text-align: left; }

/* ── Lead / hero ── */
.ab-lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.ab-lead__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.ab-eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--content-accent);
}

/* Page-title step, identical on every page. */
.ab-lead__title {
  margin: 0;
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--content-strong);
  text-wrap: balance;
}

/* The opening statement is the one piece of copy that earns a size above
   the body step — it is the page's thesis. */
.ab-lead__text {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
  max-inline-size: 68ch;
  text-wrap: pretty;
}

.ab-lead__media img {
  display: block;
  width: 100%;
  /* Surface radius; the media is the widest element on the page so it takes
     the modal step, staying rounder than the cards inside the page. */
  border-radius: var(--radius-xl);
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* ── Card grid ── */
.ab-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-4);
}

/* Cards separate by ground, not by a stroke — the site has no perimeter
   outlines. No hover lift either: these are not interactive. */
.ab-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

/* Control-step radius inside a surface-step card, so the container stays
   rounder than its contents. */
.ab-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  color: var(--content-accent);
}

.ab-card__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--content-strong);
}

/* Reading copy: normal weight on the secondary step. */
.ab-card__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}

.ab-section__outro {
  margin: var(--space-8) auto 0;
  max-inline-size: 60ch;
  text-align: center;
  font-size: var(--text-md);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}

/* ── Split ── */
.ab-split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.ab-split__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ab-split__media img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ab-checks {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ab-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-md);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}

.ab-checks__mark {
  display: inline-flex;
  flex: none;
  /* Optically centre the glyph on the first line of text. */
  margin-top: calc((1lh - 1rem) / 2);
  color: var(--content-accent);
}

.ab-checks strong {
  color: var(--content-strong);
  font-weight: var(--font-semibold);
}

/* ── Prose band ── */
.ab-prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-inline-size: 68ch;
  margin: 0 auto;
}

.ab-prose p {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}

/* ── Wider viewports ── */
@media (min-width: 768px) {
  .ab-split {
    grid-template-columns: 1fr 1fr;
  }
  /* Panel walkthrough reads better with the screenshot leading on the right,
     matching the reading direction of the checklist beside it. */
  .ab-split__media {
    order: 1;
  }
}

@media (max-width: 767px) {
  .ab-lead__media img {
    aspect-ratio: 16 / 10;
  }
  .ab-head__title--left,
  .ab-head__sub--left {
    text-align: center;
  }
  .ab-split__text {
    align-items: center;
  }
  .ab-checks {
    align-self: stretch;
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/about_us-title-section.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
.about-us-title-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  
  /* One section rhythm, from the space scale. */
  padding: var(--space-16) 0;
  display: flex;
  align-items: center;
}








.title-section__overlay {
  /* not needed—gradient is in the background */
  display: none;
}

.title-section__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--content-strong);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.title-section__title {
  font-family: var(--font-sans);
  font-weight: 900;
  /* Page-title step, identical on every page. */
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}

.title-section__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.4;
  margin: 0 auto;
  max-width: 800px;
  color: var(--content-tertiary);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .title-section {
    padding: clamp(2rem, 8vw, 4rem) 0;
  }
  .title-section__title {
    /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  }
  .title-section__text {
    font-size: var(--text-lg);
    line-height: 1.3;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/faq.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
:root {
  --faq-page-purple: var(--accent-500);
  --faq-page-green:  var(--status-success-base);
  --faq-page-red:    var(--status-danger-base);
  --faq-page-bg:     var(--surface-raised);
}

.section-margin-top {
  height: 40px;
}

.faq-section-left h2 {
  font-weight: 900;
}

.faq-page-title {
  margin: 0;
  /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  line-height: 1.1;
  color: var(--content-strong);
  font-weight: 900;
}

/* container now splits into two real columns */
.faq-page-accordion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 768px) {
  .faq-page-accordion { grid-template-columns: 1fr; }
}

/* each column just stacks its questions */
.faq-page-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Stack each FAQ category vertically */
.faq-page-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-16);
  padding: 0 var(--space-5);
}

/* Icon + title inline */
.faq-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.faq-page-icon { width: 24px; height: 24px; }
.faq-page-title {
  margin: 0;
  /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  line-height: 1.1;
}
.faq-page-description { 
  color: var(--content-secondary); 
  font-weight: var(--font-normal);
}

/* Card + left stripe */
.faq-page-item {
  background: var(--faq-page-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: none;
}

/* FAQ button-like summary */
.faq-page-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-6);
  position: relative;
  border-left: 4px solid currentColor;
  color: var(--content-strong) !important;
  font-weight: 600;
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease;
  text-decoration: none;
}


/* Hide default marker */
.faq-page-summary::-webkit-details-marker { display: none; }

/* Expand/collapse arrow */
.faq-page-summary::after {
  content: '';
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  width: 1em; height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform .25s ease;
  filter: brightness(0) saturate(100%) invert(47%) sepia(11%) saturate(4724%) hue-rotate(210deg) brightness(96%) contrast(97%);
  background-image:
    url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="%238C52FF" stroke="%238C52FF" stroke-width="102.4">\
<path d="M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z"/>\
</svg>');
}
.faq-page-item[open] .faq-page-summary::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Content animation */
.faq-page-content {
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-6);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .35s ease;
  font-size: var(--text-lg);
  line-height: 1.6;
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}
.faq-page-item[open] .faq-page-content {
  max-height: 500px;
  opacity: 1;
  animation: slideDown .35s ease;
  color: var(--content-tertiary);
}
@keyframes slideDown {
  from { transform: translateY(-10px); }
  to   { transform: translateY(0); }
}

/* Stripe color per section */
.faq-page-summary { border-left: 4px solid transparent; }
.faq-page-geneal  .faq-page-summary { border-left-color: rgb(136, 255, 0); }
.faq-page-getting-started  .faq-page-summary { border-left-color: red;  }
.faq-page-hardware .faq-page-summary { border-left-color: yellow;    }













/* ── Shared FAQ treatment ─────────────────────────────────────────────
   The /faq page had no hover or open feedback at all — the chevron
   rotating was the only signal. It now rides the same surface ramp as the
   homepage and game-page accordions: raised at rest, hover on pointer,
   overlay while open, with the shared focus ring. */
.faq-page-summary {
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.faq-page-summary:hover {
  background-color: var(--surface-hover);
}
.faq-page-item[open],
.faq-page-item[open] .faq-page-summary,
.faq-page-item[open] .faq-page-content {
  background-color: var(--surface-overlay);
}
.faq-page-item[open] .faq-page-summary:hover {
  background-color: var(--surface-hover);
}
.faq-page-summary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--surface-canvas),
    0 0 0 4px var(--accent-500);
}
/* The absolutely-positioned chevron sits at the row's right edge, so the
   label needs room for both it and the leading icon tile. */
.faq-page-summary .faq-summary-inner {
  padding-right: var(--space-8);
}

/* ── FAQ search ───────────────────────────────────────────────────────
   Same field treatment as the games grid and knowledgebase searches:
   surface-overlay ground, control-step radius, no perimeter stroke, icon
   on the metadata step. */
.faq-page-search-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0 auto var(--space-10);
  padding: 0 var(--space-5);
  max-inline-size: 34rem;
}

.faq-page-search {
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12);
  border-radius: var(--radius-md);
  background-color: var(--surface-overlay);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.faq-page-search:focus-within { outline: none; box-shadow: var(--shadow-focus); }

.faq-page-search__icon {
  position: absolute;
  left: var(--space-4);
  display: flex;
  align-items: center;
  color: var(--content-tertiary);
}

.faq-page-search input {
  inline-size: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--pure-white);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
}
.faq-page-search input::placeholder { color: var(--content-tertiary); }

.faq-page-search__count {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/t-section.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/* 1) Full-width, gradient + image background */
.t-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;


  /* One section rhythm, from the space scale. */
  padding: var(--space-16) 0;
  display: flex;
  align-items: center;
}

/* The artwork paints from a ::before that starts ABOVE this section rather
   than on the section box, so it runs up behind the fixed transparent header
   exactly as .gp-backdrop does on the single game pages. On the box it began
   at the section's top edge, which body's padding-top puts *below* the header
   — leaving the header on flat --surface-base instead of on the image. The
   -110px matches that padding-top in 01-header.css, the same constant
   .gp-backdrop and .page-bg already use.

   The image still arrives per page as --section-bg; unset stays gradient-only
   rather than a broken url().

   Absolutely positioned, so it is NOT a flex item of the rule above. The
   section is already 100vw, so left/right 0 span the viewport without
   repeating the 50%/translateX trick .page-bg needs on in-column sections. */
.t-section::before {
  content: "";
  position: absolute;
  top: -110px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      rgb(var(--surface-base-rgb) / 0.55) 0%,
      rgb(var(--surface-base-rgb) / 0.68) 45%,
      rgb(var(--surface-base-rgb) / 0.9) 80%,
      var(--surface-base) 100%
    ),
    var(--section-bg, none) center top / cover no-repeat;
}

/* 2) We don’t need the overlay div—gradient is baked into the background */
.t-section__overlay {
  display: none;
}

/* 3) Centered, constrained text block */
.t-section__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--pure-white);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* 4) Main heading */
.t-section__maintitle {
  font-family: var(--font-sans);
  font-weight: 900;
  /* Page-title step, identical on every page. */
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  color: var(--pure-white);
}

/* 5) Sub-text */
.t-section__text {
  font-family: var(--font-sans);
  font-weight: var(--font-normal);
  font-size: var(--text-lg);
  line-height: 1.4;
  margin: 0 auto;
  max-width: 800px;
  color: var(--content-secondary);
}

/* 6) Mobile tweaks */
@media (max-width: 600px) {
  .t-section {
    padding: clamp(2rem, 8vw, 4rem) 0;
  }
  .t-section__maintitle {
    /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  }
  .t-section__text {
    font-size: var(--text-lg);
    line-height: 1.3;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/minecraft-plans.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
/* The ribbon and discount chip are declared once, together with their
   .plan-card counterparts, in choose-plan.css — the rules here were
   byte-identical duplicates, which is how a fix could land on one card type
   and silently miss the other. Layout stays separate: these cards are 100%
   wide in a carousel, the game plan cards are flex items in a row. */
.minecraft-block {
  background-image: none;
  background-color: var(--surface-base);
  padding: var(--space-16) var(--space-8);
  position: relative;
  overflow: hidden;
}

/* ensure text & cards sit above overlay */
.minecraft-block__header,
.minecraft-plans {
  position: relative;
  z-index: 2;
}

.minecraft-block::before {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.minecraft-block__header,
.minecraft-plans {
  position: relative;
  z-index: 2;
}

/* ────────────────────────────────────────────────────────
   Minecraft Blocks & Plans
─────────────────────────────────────────────────────────*/

.minecraft-block__header {
  border-bottom: 2px solid var(--theme);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-8);
}
.minecraft-block__title {
  /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  margin: 0;
  font-weight: 900;
}
.minecraft-block__subtitle {
  margin: var(--space-2) 0 0;
  /* Shared section-subtitle spec — identical in every section. */
  font-size: var(--text-lg);
  color: var(--content-secondary);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
  max-inline-size: 60ch;
}

/* Plans grid */
.minecraft-plans {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
}
.minecraft-plans--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  justify-items: center;
}
@media (max-width: 1200px) {
  .minecraft-plans--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .minecraft-plans--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .minecraft-plans--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .minecraft-plans--grid {
    grid-template-columns: 1fr;
  }
}

/* Single plan card */
.minecraft-plan-card {
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  padding: 0 var(--space-8) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* The corner ribbon is a 150px band rotated 45° and hung off `right: -42px`,
     which only reads as a corner ribbon if the card clips it. Without this it
     spilled past the rounded corner as a floating diagonal stripe with its
     first letter cut off. .plan-card--featured already had it; this card was
     missing it. */
  overflow: hidden;
  width: 100%;
  border: none !important;
  box-shadow: none;

  /* animation */
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* See .plan-card:hover — the button is the affordance, not the card. */
.minecraft-plan-card:hover {
  box-shadow: none;
}

/* Highlighted "Most Popular" plan. Size and elevation only — see the matching
   note on .plan-card--featured: the --surface-overlay ground read as a stuck
   hover state, and being a later rule of equal specificity it also cancelled
   :hover on this card entirely. */
.minecraft-plan-card.minecraft-plan-card--featured {
  border: none;
  /* No scale: this card is the same size as every other plan card. The corner
     ribbon marks it out on its own, and scaling it up made it wider and taller
     than the row it sits in. Mirrors .plan-card--featured in choose-plan.css. */
  z-index: 1;
  overflow: hidden;
}

.minecraft-plan-card__corner-icon {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 24px; height: 24px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(58deg) brightness(106%) contrast(101%);
}
.minecraft-plan-card__ribbon-wrap {
  display: contents;
}

.minecraft-plan-card__name {
  font-size: var(--text-xl);
  margin: var(--space-5) 0 var(--space-2);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
}
.minecraft-plan-card__name-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
/* One line, always. "60+ Players | 24GB RAM" wrapped after the pipe on the
   wider tiers, so cards in the same row ended up different heights with
   their prices and buttons no longer aligned. The size steps down rather
   than the text breaking: clamp keeps it on one line down to the narrowest
   card without ever overflowing it. */
.minecraft-plan-card__meta {
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--pure-white);
  white-space: nowrap;
  font-size: clamp(0.8125rem, 1.6vw, 1rem);
}

/* The old price, the new price and "/month" are one unit — they were
   inline text in a centred block, so "/month" wrapped onto its own line
   whenever the figures got long enough. A nowrap flex row keeps them
   together and on a shared baseline. */
.minecraft-plan-card__prices {
  margin-top: auto;
  text-align: center;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.minecraft-plan-card__old {
  text-decoration: line-through;
  color: var(--content-tertiary);
}
.minecraft-plan-card__new {
  font-size: var(--text-3xl);
  font-weight: 800;
}

/* Price typography (.price-affix / .price-cents) is shared — see 99-global.css.
   It used to be scoped here, which is why the game plan cards never got it. */
.minecraft-plan-card__unit {
  color: var(--content-tertiary);
  font-size: var(--text-md);
  /* Spacing comes from the row's gap now. */
}
.minecraft-plan-card__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--accent-500);
  color: var(--pure-white);
  text-decoration: none;
  font-weight: 600;
  padding: .75rem var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  outline: none;
  margin-top: var(--space-4);
  /* A <button> gets the browser's arrow by default, not a hand. The other
     games' cards go through the shared Button component, which sets this; this
     card is bespoke and was missing it. */
  cursor: pointer;

  /* animation */
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.minecraft-plan-card__btn:hover {
  opacity: var(--hover-opacity, 0.85);
}
.minecraft-plan-card__btn:active {
  transform: scale(var(--press-scale, 0.97));
}
.minecraft-plan-card__btn-icon {
  width: 20px; height: 20px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(58deg) brightness(106%) contrast(101%);
}

/* Responsive */
@media (max-width: 768px) {
  .minecraft-plans {
    flex-direction: column;
    align-items: center;
  }
}

.minecraft-plans-merged-wrap {
  position: relative;
}
.minecraft-plans-merged {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  padding-top: var(--space-3);
  margin-top: -12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.minecraft-plans-merged::-webkit-scrollbar {
  display: none;
}
.minecraft-plans-merged .minecraft-plan-card {
  flex: 0 0 260px;
  width: 260px;
}

.minecraft-plans-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--surface-raised);
  color: var(--pure-white);
  cursor: pointer;
  z-index: 3;
  box-shadow: var(--shadow-soft-sm);
  transition: background 0.2s ease, opacity 0.2s ease;
}
.minecraft-plans-nav--prev {
  left: 10px;
}
.minecraft-plans-nav--next {
  right: 10px;
}
.minecraft-plans-nav:hover {
  background: var(--accent, var(--accent-500));
}
.minecraft-plans-nav[hidden] {
  display: none;
}

@media (max-width: 380px) {
  .minecraft-plan-card {
    padding: 0 var(--space-4) var(--space-4);
  }
  .minecraft-plan-card__corner-icon {
    display: none;
  }
}





































/* Universal Minecraft block styling */
.minecraft-block {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-8) 2rem;
  margin-bottom: var(--space-12);
  color: var(--pure-white);
  border: none;
  overflow: hidden;
}

/* Flat background — no per-block hero images */
.minecraft-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: none;
  z-index: 1;
}

/* Ensure content appears above overlay */
.minecraft-block__header,
.minecraft-plans,
.minecraft-plans-merged {
  position: relative;
  z-index: 2;
}

/* No more duplicated background code */





/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/contact_us-title-section.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.contact-us-title-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;

  /* One section rhythm, from the space scale. */
  padding: var(--space-16) 0;
  display: flex;
  align-items: center;
}








.title-section__overlay {
  /* not needed—gradient is in the background */
  display: none;
}

.title-section__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--pure-white);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.title-section__title {
  font-family: var(--font-sans);
  font-weight: 900;
  /* Page-title step, identical on every page. */
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}

.title-section__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.4;
  margin: 0 auto;
  max-width: 800px;
  color: var(--content-tertiary);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .title-section {
    padding: clamp(2rem, 8vw, 4rem) 0;
  }
  .title-section__title {
    /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  }
  .title-section__text {
    font-size: var(--text-lg);
    line-height: 1.3;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/contact-options.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
/* ── Contact Us form section ─────────────────────────────────────── */

.cf-section { /* One section rhythm, from the space scale. */
  padding: var(--space-16) 0; }

.cf-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: var(--space-6);
  align-items: start;
}

/* ===== Sidebar option cards ===== */
.cf-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }

.cf-option {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  text-align: left;
  background: var(--surface-raised);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  color: var(--content-strong);
  font-family: inherit;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.cf-option:hover { background-color: var(--surface-hover); }

.cf-option:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Selection rides the surface ramp, like every other selected state on the
   site. Was an accent perimeter stroke over an accent tint — the only
   outlined element on the page, and the treatment the system drops
   everywhere else in favour of ground. */
.cf-option.is-active {
  background-color: var(--surface-overlay);
}

/* Two columns of the grid's left side: the reason tablist, then the
   channels panel beneath it. */
.cf-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* One icon treatment for the whole site: accent colour, sized in rem so it
   tracks the type scale. Was an emoji at --text-2xl, which rendered in the
   OS colour font and matched nothing else on the page. */
.cf-option-icon {
  display: inline-flex;
  flex: none;
  margin-top: var(--space-0-5);
  color: var(--content-accent);
}
.cf-option-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }

.cf-option-body { display: flex; flex-direction: column; gap: var(--space-1); }

.cf-option-title { font-size: var(--text-lg); font-weight: var(--fw-label); }

.cf-option-text { font-size: var(--text-sm); line-height: 1.5; color: var(--content-secondary); }

/* ===== Form panel ===== */
.cf-panel {
  background: var(--panel-bg-1);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.cf-form { display: flex; flex-direction: column; gap: var(--space-5); }

.cf-row { display: grid; gap: var(--space-4); }
.cf-row--2 { grid-template-columns: 1fr 1fr; }

.cf-field { display: flex; flex-direction: column; gap: var(--space-2); }

.cf-field label,
.cf-group-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--content-strong);
}

.cf-req { color: var(--status-danger-base); margin-left: var(--space-0-5); }

.cf-field input[type="text"],
.cf-field input[type="email"],
.cf-field textarea,
.cf-select select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xs);
  border: none;
  background: var(--surface-overlay);
  color: var(--content-strong);
  font-size: var(--text-md);
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease;
}

/* Dropdown triggers use the wider dropdown-trigger radius, not the text-input radius */
.cf-select select {
  border-radius: var(--radius-sm);
}

.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--content-tertiary); }

.cf-field input:focus,
.cf-field textarea:focus,
.cf-select select:focus { border-color: var(--accent); }

.cf-select { position: relative; }
.cf-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-10);
  cursor: pointer;
}
.cf-select__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--content-tertiary);
  pointer-events: none;
}

/* ===== Socials grid ===== */
.cf-socials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.cf-social-input {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: 0 var(--space-4);
  border-radius: var(--radius-xs);
  border: none;
  background: var(--surface-overlay);
  transition: border-color 0.2s ease;
}

.cf-social-input:focus-within { border-color: var(--accent); }

.cf-social-input img,
.cf-social-input svg {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.8;
  color: var(--content-strong);
}

/* Brand SVGs are solid-black source files — img can't take `color`,
   so recolor to white the same way the footer social icons do. */
.cf-social-input img {
  filter: brightness(0) invert(1);
}

.cf-field .cf-social-input input {
  flex: 1 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--content-strong);
  font-size: var(--text-md);
  font-family: inherit;
  padding: var(--space-3) 0;
  outline: none;
}

.cf-field .cf-social-input input::placeholder { color: var(--content-tertiary); }

.cf-social-input--full { grid-column: 1 / -1; }

/* ===== Checkbox grid (partner interests) ===== */
.cf-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
}

.cf-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: var(--text-md);
  color: var(--content-strong);
  cursor: pointer;
}

.cf-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  pointer-events: none;
}

.cf-checkbox__box {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--radius-xs);
  border: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cf-checkbox__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--pure-white);
  border-bottom: 2px solid var(--pure-white);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.1s ease;
}

.cf-checkbox input[type="checkbox"]:checked + .cf-checkbox__box {
  background: var(--accent);
}

.cf-checkbox input[type="checkbox"]:checked + .cf-checkbox__box::after { opacity: 1; }

.cf-checkbox__label { font-size: var(--text-md); }

/* ===== Submit ===== */
.cf-submit-row { display: flex; justify-content: flex-end; }

/* Color/radius/motion now come from .ui-btn (src/components/ui/ui.css). */

.cf-status { font-size: var(--text-sm); text-align: right; min-height: 18px; }

/* ===== Existing customer strip ===== */
.cf-existing {
  text-align: center;
  padding: var(--space-12) 0 0;
}

.cf-existing__title {
  font-size: var(--text-2xl);
  font-weight: var(--fw-heading);
  color: var(--content-strong);
  margin: 0 0 var(--space-2);
}

.cf-existing__text {
  font-size: var(--text-md);
  color: var(--content-secondary);
  margin: 0 0 var(--space-5);
}

.cf-existing__btn svg { width: 16px; height: 16px; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .cf-grid { grid-template-columns: 1fr; }
  .cf-panel { padding: var(--space-6); }
}

@media (max-width: 560px) {
  .cf-row--2,
  .cf-socials-grid,
  .cf-checkbox-grid { grid-template-columns: 1fr; }
  .cf-submit-row { justify-content: stretch; }
  .cf-submit-btn { width: 100%; }
  .cf-status { text-align: center; }
}

/* ── Support channels sidebar ────────────────────────────────────────
   Sits beside the contact form. Cards ride the surface ramp exactly like
   .cf-option: raised at rest, one step up on hover, no perimeter stroke
   and no lift. Radius by role — the card is a surface (lg), the icon box
   a control (md), so the container stays rounder than its contents. */
.sc-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sc-channels__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--content-strong);
}

.sc-channels__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sc-channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.sc-channel:hover { background-color: var(--surface-hover); }
.sc-channel:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.sc-channel__head {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}

/* One icon treatment site-wide: accent glyph, sized in rem. */
.sc-channel__icon {
  display: inline-flex;
  flex: none;
  color: var(--content-accent);
}

.sc-channel__title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--content-strong);
}

/* Reading copy: normal weight on the secondary step. */
.sc-channel__text {
  font-size: var(--text-sm);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}

/* The live-chat card is a <button>, so it needs the UA control reset that
   the anchors do not — the legacy sheet has no global form reset. */
button.sc-channel {
  width: 100%;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ── Honeypot + captcha ───────────────────────────────────────────
   The honeypot is positioned off-screen rather than display:none —
   some bots skip hidden inputs but fill positioned ones, and this
   way it stays out of the tab order without being obviously fake. */
.cf-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-captcha-row {
  margin-top: var(--space-4);
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 560px) {
  .cf-captcha-row { justify-content: center; }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/help_kb-title-section.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.help-kb-title {
  position: relative;
  padding: var(--space-20) 0 var(--space-16);
  overflow: hidden;
}
.help-kb-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-base);
  z-index: 0;
}
.help-kb-title__content {
  position: relative;
  z-index: 1;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.help-kb-title__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--text-sm);
  color: var(--content-strong);
  font-weight: 600;
}
.help-kb-title__title {
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  font-weight: 800;
  color: var(--pure-white);
  margin: 0;
}
.help-kb-title__text {
  color: var(--content-strong);
  font-size: var(--text-xl);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 768px) {
  .help-kb-title {
    padding: var(--space-16) 0 var(--space-12);
  }
  .help-kb-title__content {
    gap: var(--space-3);
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/help-knowledgebase.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.help-knowledge {
  padding: var(--space-12) 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.help-knowledge__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.kb-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
  /* One section rhythm, from the space scale. */
  padding: var(--space-16) 0;
  background: var(--surface-canvas);
}
.kb-hero--simple {
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
  /* One section rhythm, from the space scale. */
  padding: var(--space-12) 0;
}
.kb-hero--simple .kb-hero__content {
  padding: 0;
}
.kb-hero__bg {
  position: absolute;
  inset: 0;
  background-image: none;
  background-color: var(--surface-base);
}
.kb-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}
.kb-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--content-accent);
  font-size: var(--text-sm);
  font-weight: 600;
}
.kb-hero__content h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  color: var(--pure-white);
  line-height: 1.1;
}
.kb-hero__content p {
  margin: 0;
  max-width: 40rem;
  color: var(--content-strong);
  font-size: var(--text-xl);
}
.kb-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.kb-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: none;
  background: var(--surface-raised);
  color: var(--pure-white);
  text-decoration: none;
  font-weight: 600;
}
.kb-hero__badge img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: var(--radius-full);
}
.kb-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--content-accent);
  font-size: var(--text-md);
  flex-wrap: wrap;
}
.kb-hero__chip {
  background: var(--surface-raised);
  background-color: var(--surface-overlay);
  padding: var(--space-1-5) var(--space-4);
  font-weight: 600;
}
.kb-hero__meta-text {
  color: var(--content-strong);
}
.kb-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}
.kb-hero__meta-item svg {
  width: 1.35rem;
  height: 1.35rem;
}
.kb-hero__meta-divider {
  width: 1px;
  height: 26px;
  background: var(--surface-overlay);
}
.help-knowledge__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.help-knowledge__heading h2 {
  /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  font-weight: 700;
  color: var(--pure-white);
  margin: 0;
}
.help-knowledge__heading p {
  color: var(--content-tertiary);
  margin: 0;
  font-size: var(--text-lg);
}
.help-knowledge__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.help-knowledge__grid--tiles {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.help-knowledge__grid--categories {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.help-knowledge__card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: none;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.help-knowledge__card:hover {
  
  background: var(--surface-overlay);
}
.help-knowledge__icon {
  width: clamp(33px, 4.5vw, 48px);
  height: clamp(33px, 4.5vw, 48px);
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
}
.help-knowledge__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.help-knowledge__icon--flat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(112,110,241,0.18);
  border: none;
}
.help-knowledge__icon--flat img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(0.92);
}
.help-knowledge__info strong {
  color: var(--pure-white);
  font-size: var(--text-lg);
}
.help-knowledge__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.help-knowledge__info span {
  color: var(--content-tertiary);
  font-size: var(--text-md);
}
.help-knowledge__card--compact {
  padding: var(--space-4) var(--space-4);
}
.help-knowledge__card--category {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.help-knowledge--category {
  padding-bottom: var(--space-12);
}
.help-knowledge__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: var(--space-3);
}
.help-knowledge__card-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.help-knowledge__category-link {
  font-size: var(--text-lg);
  color: var(--pure-white);
  font-weight: 600;
  text-decoration: none;
}
.help-knowledge__category-link:hover {
  color: var(--accent-500);
}
.help-knowledge__meta {
  font-size: var(--text-sm);
  color: var(--content-tertiary);
}
.help-knowledge__cta {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--accent-500);
  color: var(--pure-white);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.help-knowledge__cta:hover {
  opacity: var(--hover-opacity, 0.85);
}
.help-knowledge__cta:active {
  transform: scale(var(--press-scale, 0.97));
}
.help-knowledge__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.help-knowledge__list li a {
  color: var(--content-tertiary);
  font-size: var(--text-md);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}
.help-knowledge__list li a::before {
  content: "↗";
  font-size: var(--text-xs);
  opacity: 0.4;
}
.help-knowledge__list li a:hover {
  color: var(--pure-white);
}
.help-knowledge__articles {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.help-knowledge__article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: none;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.help-knowledge__article:hover {
  
  background: var(--surface-overlay);
}
.help-knowledge__article-title {
  color: var(--pure-white);
  font-weight: 600;
  flex: 1 1;
}
.help-knowledge__article-icon {
  color: var(--content-tertiary);
  font-size: var(--text-lg);
}
.help-knowledge__empty {
  color: var(--content-tertiary);
  font-size: var(--text-md);
  margin-top: var(--space-4);
}
.help-knowledge__card.is-hidden {
  display: none;
}
.help-knowledge__toggle.is-hidden {
  display: none;
}
.help-knowledge__actions {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}
.help-knowledge__toggle {
  padding: var(--space-2-5) var(--space-6);
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-raised);
  color: var(--pure-white);
  font-weight: 600;
  font-size: var(--text-md);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.help-knowledge__toggle:hover {
  opacity: var(--hover-opacity, 0.85);
}
.help-knowledge__toggle:active {
  transform: scale(var(--press-scale, 0.97));
}

.kb-category {
  padding: var(--space-16) 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.kb-category__breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-md);
  color: var(--content-tertiary);
}

.kb-category__hero {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  overflow: hidden;
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  min-height: 220px;
  background: var(--surface-raised);
}
.kb-category__hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.kb-category__hero-icon {
  position: relative;
  width: clamp(52px, 6vw, 72px);
  height: clamp(52px, 6vw, 72px);
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  overflow: hidden;
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
  flex-shrink: 0;
}
.kb-category__hero-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.kb-category__hero-icon--flat {
  background: rgba(112,110,241,0.18);
  align-items: center;
  justify-content: center;
}
.kb-category__hero-icon--flat img {
  width: clamp(24px, 3vw, 34px);
  height: clamp(24px, 3vw, 34px);
  object-fit: contain;
  filter: brightness(0) invert(0.98);
}
.kb-category__hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--content-strong);
}
.kb-category__hero-heading {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.kb-category__hero-heading h1 {
  margin: 0;
  color: var(--pure-white);
  /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
}
.kb-category__badge {
  background: rgba(112,110,241,0.15);
  color: var(--content-accent);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
}
.kb-category__layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: var(--space-8);
}
.kb-category__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-self: start;
  position: sticky;
  top: 6rem;
}
.kb-category__search {
  position: relative;
  display: flex;
  align-items: center;
  border: none;
  border-radius: var(--radius-md);
  /* Same box as the games grid search: --space-3/--space-4, with the left
     inset reserving room for the icon. This was 6px/12px, so the field sat
     noticeably shorter and denser than every other search on the site. */
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12);
  background: var(--surface-overlay);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.kb-category__search:focus-within {
  outline: none;

  box-shadow: var(--shadow-focus);
}
.kb-category__controls .kb-category__search {
  min-width: 260px;
  max-width: 420px;
  flex: 1 1;
}
/* Icon colour comes from the content ramp rather than an opacity fade, so it
   matches every other field icon instead of being a washed-out white. */
.kb-category__search-icon {
  position: absolute;
  left: var(--space-4);
  display: flex;
  align-items: center;
  color: var(--content-tertiary);
}
.kb-category__search-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--content-tertiary);
}
.kb-category__search input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--pure-white);
  /* Matches .stream-ui__search-input. Was --text-md at 600 — smaller and
     bolder than the other search fields, which made typed text look like a
     label rather than input. */
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  font-family: inherit;
  outline: none;
}

.kb-category__search input::placeholder {
  color: var(--content-tertiary);
  font-weight: var(--font-normal);
}
.kb-category__nav-card,
.kb-category__support-card {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: none;
}
.kb-category__nav-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--pure-white);
  margin: 0 0 var(--space-3);
}
.kb-category__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kb-category__nav-list a {
  color: var(--content-tertiary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-md);
}
.kb-category__nav-list a:hover {
  color: var(--pure-white);
}
.kb-category__tag-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.kb-category__tag {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: var(--content-tertiary);
  background: var(--surface-raised);
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-sm);
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.kb-category__tag small {
  font-size: var(--text-sm);
  color: var(--accent-500);
}
.kb-category__tag:hover,
.kb-category__tag.is-active {
  color: var(--pure-white);
  background: rgba(112,110,241,0.25);
}
.kb-category__support-eyebrow {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-500);
  margin: 0;
}
.kb-category__support-text {
  margin: var(--space-1-5) 0 var(--space-4);
  color: var(--content-tertiary);
  line-height: 1.5;
}
.kb-category__support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-500);
  color: var(--pure-white);
  font-weight: 700;
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-5);
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.kb-category__support-btn:hover {
  opacity: var(--hover-opacity, 0.85);
}
.kb-category__support-btn:active {
  transform: scale(var(--press-scale, 0.97));
}
.kb-category__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.kb-category__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.kb-category__tabs {
  display: flex;
  gap: var(--space-3);
  border-bottom: 2px solid var(--border-default);
  padding-bottom: var(--space-2);
}
.kb-category__tabs button {
  border: none;
  background: transparent;
  color: var(--content-tertiary);
  font-weight: 600;
  font-size: var(--text-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
}
.kb-category__tabs button span {
  display: inline-flex;
  background: var(--surface-raised);
  color: var(--pure-white);
  border-radius: var(--radius-full);
  padding: var(--space-0-5) var(--space-2-5);
  font-size: var(--text-sm);
}
.kb-category__tabs button.is-active {
  color: var(--pure-white);
}
.kb-category__tabs button.is-active span {
  background: var(--accent-500);
}
.kb-category__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.kb-category__card {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: none;
  text-decoration: none;
  transition: transform 0.2s ease, border 0.2s ease, background 0.2s ease;
}
.kb-category__card:hover {
  background: var(--surface-overlay);
  
}
.kb-category__card-body h3 {
  margin: 0 0 var(--space-1-5);
  color: var(--pure-white);
  font-size: var(--text-xl);
}
.kb-category__card-body p {
  margin: 0;
  color: var(--content-tertiary);
  font-size: var(--text-md);
}
.kb-category__card-icon {
  color: var(--content-accent);
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.kb-category__card-icon svg {
  width: 18px;
  height: 18px;
}
.kb-category__card.is-hidden {
  display: none;
}
.kb-category__empty {
  color: var(--content-tertiary);
  margin: var(--space-4) 0;
}

@media (max-width: 1024px) {
  .kb-category__layout {
    grid-template-columns: 1fr;
  }
  .kb-category__controls {
    flex-direction: column;
    align-items: stretch;
  }
  .kb-category__controls .kb-category__tabs {
    width: 100%;
  }
  .kb-category__controls .kb-category__search {
    max-width: 100%;
  }
  .kb-category__hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .kb-category__hero-icon {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 640px) {
  .help-knowledge__heading {
    flex-direction: column;
    align-items: flex-start;
  }
  .help-knowledge__card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .kb-category {
    padding-top: var(--space-10);
  }
  .kb-category__hero {
    padding: var(--space-6);
  }
  .kb-category__hero-heading h1 {
    font-size: var(--text-3xl);
  }
  .kb-category__card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── KB sidebar overrides — align with main site design language ── */
.kb-category__sidebar .spc-btn {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-md);
}
.kb-category__sidebar .sb-card {
  border-radius: var(--radius-lg);
  border: none;
  background: var(--surface-raised);
}

/* ===================== KB ARTICLE (blog-style redesign) ===================== */

/* ── KB article title meta — chip + separators in blog-meta row ── */
.kb-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(112, 110, 241, 0.18);
  border: none;
  color: var(--content-accent);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s;
}
.kb-meta-chip:hover {
  background: rgba(112, 110, 241, 0.35);
  color: var(--pure-white);
}
.kb-meta-sep {
  color: var(--content-tertiary);
  font-size: var(--text-lg);
  line-height: 1;
  -webkit-user-select: none;
          user-select: none;
}

/* Outer wrapper spacing */
.kb-article-wrap {
  padding-top: var(--space-4);
  padding-bottom: var(--space-16);
}

/* Breadcrumb trail */
.kb-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  color: var(--content-tertiary);
  margin-bottom: var(--space-7);
}
/* Scoped with .blog-content to override the blue article-body link style
   (.blog-content a) that the breadcrumb nav would otherwise inherit. */

/* Article body — same font family, size and line-height as blog-content. */
[data-help-article-content] {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: 1.8;
  color: var(--content-strong);
}
[data-help-article-content] p {
  color: var(--content-tertiary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}
[data-help-article-content] li {
  color: var(--content-tertiary);
  font-size: var(--text-lg);
}
[data-help-article-content] tr {
  color: var(--content-tertiary);
  font-size: var(--text-lg);
}
[data-help-article-content] h2 {
  font-weight: 800;
  color: var(--pure-white);
  margin-top: var(--space-8);
  margin-bottom: var(--space-2-5);
}
[data-help-article-content] h3 {
  font-weight: 700;
  color: var(--content-accent);
  margin-top: var(--space-8);
  margin-bottom: var(--space-2-5);
}
[data-help-article-content] h4 {
  color: var(--pure-white);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
[data-help-article-content] a {
  color: var(--status-info-text);
  text-decoration: underline;
  transition: color 0.2s ease;
}
[data-help-article-content] a:hover {
  color: var(--status-info-base);
}
[data-help-article-content] img,
[data-help-article-content] video {
  border-radius: var(--radius-md);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.25rem auto;
}
[data-help-article-content] pre {
  background: var(--surface-raised) !important;
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  overflow-x: auto;
}
[data-help-article-content] code {
  font-family: "JetBrains Mono", "Menlo", monospace;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: var(--space-0-5) var(--space-1-5);
  font-size: 0.9em;
}
[data-help-article-content] pre code {
  background: transparent !important;
  padding: 0;
}
[data-help-article-content] blockquote {
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--content-accent);
  background: var(--surface-raised);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--content-secondary);
}
[data-help-article-content] table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-base);
}
[data-help-article-content] th { background: var(--surface-raised); color: var(--pure-white); }
[data-help-article-content] th,
[data-help-article-content] td {
  /* Row divider only — a full cell outline is a perimeter stroke. */
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-2-5) var(--space-4);
}
[data-help-article-content] hr {
  border: none;
  border-bottom: 1px solid var(--border-default);
  margin: var(--space-8) 0;
}

/* ===================== ARTICLE LAYOUT (legacy — keep for old pages) ===================== */
.help-article {
  padding: var(--space-12) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.help-article__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--content-tertiary);
  font-size: var(--text-md);
}

.help-article__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (min-width: 992px) {
  .help-article__grid {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
  }
}
.help-article__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: static;
}
@media (max-width: 991px) {
  .help-article__sidebar {
    position: static;
  }
}
.help-article__toc-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  align-self: flex-start;
  position: static;
}
.help-article__toc-wrapper.is-fixed {
  position: fixed;
  top: 1.5rem;
  z-index: 2;
  width: var(--toc-wrapper-width, 280px);
}
@media (max-width: 991px) {
  .help-article__toc-wrapper.is-fixed {
    position: static;
    top: auto;
    width: 100%;
  }
}
.help-article__toc-card,
.help-article__support-card {
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  border: none !important;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  box-sizing: border-box;
}
.help-article__toc-card {
  align-self: flex-start;
}
.help-article__support-card {
  margin-top: auto;
}
.help-article__toc-title {
  margin: 0;
  color: var(--pure-white);
  font-weight: 700;
  font-size: var(--text-lg);
}
.help-article__toc-nav,
.help-article__toc-list,
.help-article__toc-list ul,
.help-article__toc-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.help-article__toc-nav {
  padding: var(--space-1) 0;
}
.help-article__toc-item {
  font-size: var(--text-md);
  border-radius: var(--radius-md);
}
.help-article__toc-item a {
  display: block;
  padding: var(--space-1-5) var(--space-3);
  margin: 1px 0;
  border-radius: var(--radius-md);
  color: var(--content-tertiary);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
}
.help-article__toc-item a:hover {
  color: var(--pure-white);
}
.help-article__toc-list ul,
.help-article__toc-list ol {
  margin-left: var(--space-2-5);
  padding-left: var(--space-2-5);
  border-left: 1px dashed var(--border-default);
}
.help-article__toc-item.active > a {
  background: var(--surface-overlay);
  color: var(--pure-white);
}
.help-article__toc-empty {
  margin: 0;
  color: var(--content-tertiary);
  font-size: var(--text-sm);
}
.help-article__support-eyebrow {
  margin: 0;
  color: var(--accent-500);
  font-weight: 700;
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.help-article__support-text {
  margin: var(--space-1) 0 0;
  color: var(--content-tertiary);
  font-size: var(--text-md);
  line-height: 1.5;
}
.help-article__support-btn {
  margin-top: var(--space-2);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--accent-500);
  color: var(--pure-white);
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.help-article__support-btn:hover {
  opacity: var(--hover-opacity, 0.85);
}
.help-article__support-btn:active {
  transform: scale(var(--press-scale, 0.97));
}
.help-article__main {
  background: rgba(20, 25, 55, 0.85);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  box-shadow: none;
}
@media (max-width: 640px) {
  .help-article__main {
    padding: var(--space-5);
  }
}
.help-article__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.help-article__hero h1 {
  margin: 0;
  color: var(--pure-white);
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  line-height: 1.2;
}
.help-article__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.help-article__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  color: var(--pure-white);
  font-weight: 600;
  font-size: var(--text-md);
  text-decoration: none;
}
.help-article__chip:hover {
  background: var(--surface-overlay);
}
.help-article__meta {
  color: var(--content-tertiary);
  font-size: var(--text-md);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}
.help-article__meta::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: var(--radius-full);
  display: inline-block;
  background: var(--content-accent);
}
.help-article__meta--date::before {
  background: var(--status-warning-text);
}
.help-article__body {
  margin-top: var(--space-7);
  color: var(--content-strong);
  font-size: var(--text-lg);
  line-height: 1.7;
}
.help-article__body > * + * {
  margin-top: var(--space-4);
}
.help-article__body h2,
.help-article__body h3,
.help-article__body h4 {
  color: var(--pure-white);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
  position: relative;
}
.help-article__body h2::before,
.help-article__body h3::before,
.help-article__body h4::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.4rem;
  width: 4px;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--status-warning-text), var(--content-accent));
  opacity: 0.6;
}
@media (max-width: 640px) {
  .help-article__body h2::before,
  .help-article__body h3::before,
  .help-article__body h4::before {
    display: none;
  }
}
.help-article__body ul,
.help-article__body ol {
  padding-left: var(--space-6);
  margin: var(--space-1) 0 var(--space-5);
}
.help-article__body li {
  margin-bottom: var(--space-1-5);
}
.help-article__body img,
.help-article__body video,
.help-article__body iframe {
  border-radius: var(--radius-lg);
  border: none;
  max-width: 100%;
}
.help-article__body hr {
  border: none;
  border-bottom: 1px solid var(--border-default);
  margin: var(--space-8) 0;
}
.help-article__body pre,
.help-article__body code {
  font-family: "JetBrains Mono", "Menlo", monospace;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}
.help-article__body pre {
  padding: var(--space-4);
  overflow-x: auto;
}
.help-article__body blockquote {
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--content-accent);
  background: var(--surface-raised);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.help-article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}
.help-article__body table th,
.help-article__body table td {
  /* Row divider only — a full cell outline is a perimeter stroke. */
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
}
.help-article__body table th {
  background: var(--surface-raised);
}
.help-article__body a {
  color: var(--content-accent);
  text-decoration: underline;
}
.is-hidden {
  display: none !important;
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────
   One treatment for all three breadcrumb trails. They had drifted apart:
   the category trail used white links going accent on hover, the article
   trail did the same, and the KB trail was the exact inverse — accent links
   going white — so the same navigation read as a different component
   depending on which page you were on.

   Breadcrumbs are orientation, not a call to action, so they sit on the
   content ramp rather than the accent: secondary at rest, strong on hover,
   and the current page strong and unlinked. Separators are the metadata
   step so the trail reads as one item, one chevron, one item. */
.kb-breadcrumbs,
.kb-category__breadcrumbs,
.help-article__breadcrumbs {
  color: var(--content-tertiary);
}

.kb-breadcrumbs a,
.blog-content .kb-breadcrumbs a,
.kb-category__breadcrumbs a,
.help-article__breadcrumbs a {
  color: var(--content-secondary);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.kb-breadcrumbs a:hover,
.blog-content .kb-breadcrumbs a:hover,
.kb-category__breadcrumbs a:hover,
.help-article__breadcrumbs a:hover {
  color: var(--content-strong);
  text-decoration: none;
}

.kb-breadcrumbs a:focus-visible,
.kb-category__breadcrumbs a:focus-visible,
.help-article__breadcrumbs a:focus-visible {
  outline: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-focus);
}

.kb-breadcrumbs__current,
.help-article__breadcrumbs-current {
  color: var(--content-strong);
  font-weight: var(--font-semibold);
}

/* The card sets its own `display`, which beats the UA stylesheet's rule for
   the `hidden` attribute — so hidden tiles stayed visible. An author-level
   rule at higher specificity is needed to actually take them out of flow. */
.help-knowledge__card[hidden] {
  display: none;
}

/* ── Load more (game tiles) ────────────────────────────────────────── */
.help-knowledge__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* Control step on the surface ramp, like every other button on the site —
   ground for hover, no perimeter stroke. */
.help-knowledge__more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--surface-raised);
  color: var(--content-strong);
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.help-knowledge__more-btn:hover { background-color: var(--surface-hover); }
.help-knowledge__more-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* .help-knowledge__more-count removed with the "20 / 36" counter it styled. */

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/policy.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* tokens (only for this component) */
.pol-wrap {
  --pol-panel: var(--surface-base);
  --pol-panel-soft: var(--surface-canvas);
  --pol-text: var(--content-strong);
  --pol-muted: var(--content-tertiary);
  --pol-border: var(--surface-base);
  --pol-brand: var(--status-info-text);
  --pol-brand-strong: var(--status-info-base);
  --pol-shadow: var(--shadow-soft-lg);
  color: var(--pol-text);
}

/* header */
.pol-header {
  padding: var(--space-16) 0 var(--space-7);
}

.pol-title {
  margin: 0;
  text-align: center;
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.pol-updated {
  margin: var(--space-2-5) 0 0;
  text-align: center;
  color: var(--pol-muted);
}

.pol-updated-time {
  color: var(--content-strong);
  font-weight: 700;
}

/* layout grid (let outer theme handle width) */
.pol-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-8);
  /* One section rhythm, from the space scale. */
  padding: var(--space-16) 0;
}

/* sidebar */
.pol-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  display: grid;
  gap: var(--space-4);
}

.pol-card {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 320px;
  border: none !important;
}

.pol-card-head {
  padding: var(--space-4) var(--space-4);
  font-weight: 700;
  color: var(--pure-white);
}

/* TOC */
.pol-toc nav,
.pol-toc ul,
.pol-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pol-toc nav {
  padding: var(--space-1-5);
}

.pol-toc li {
  border-radius: var(--radius-sm);
}

.pol-toc a {
  display: block;
  padding: var(--space-2-5) var(--space-4);
  margin: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--content-tertiary);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background .18s,
    border-color .18s,
    color .18s;
}



.pol-toc ul ul,
.pol-toc ol ol {
  margin-left: var(--space-2-5);
  padding-left: var(--space-2-5);
  border-left: 1px dashed var(--border-default);
}

.pol-toc .pol-active > a {
  background: var(--surface-overlay);
  color: var(--pure-white);
}

/* See Also */
.pol-card--seealso {
  padding: var(--space-2) var(--space-2-5) var(--space-3);
}

.pol-see-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pol-see-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-2);
  border-radius: var(--radius-md);
}

.pol-see-item + .pol-see-item {
  margin-top: var(--space-1-5);
}


.pol-see-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
  color: var(--content-secondary);
  background: var(--pol-panel-soft);
  border: none;
  border-radius: var(--radius-md);
}

.pol-see-link {
  color: var(--pol-text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
}



/* content */
.pol-content {
  padding-left: var(--space-7);
}

.pol-content h2 {
  margin: var(--space-6) 0 var(--space-2-5);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: .3px;
}

.pol-content h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
}

.pol-content p {
  margin: var(--space-2-5) 0 var(--space-4);
}

.pol-content ul {
  margin: var(--space-2) 0 var(--space-4) 1.1rem;
}

.pol-content li {
  margin: var(--space-1-5) 0;
}

.pol-content :is(h2, h3, h4)[id] {
  scroll-margin-top: 96px;
}

/* responsive */
@media (max-width: 980px) {
  .pol-grid {
    grid-template-columns: 1fr;
  }

  .pol-sidebar {
    position: relative;
    top: 0;
  }
}


/* ---- readability tweaks ---- */
.pol-content {
  /* global line-height for body text in the policy */
  --pol-lh: 1.75;
}

/* bigger line spacing for paragraphs and list items */
.pol-content p,
.pol-content li {
  line-height: var(--pol-lh);
}

/* a bit more vertical space between bullets */
.pol-content li {
  margin: var(--space-2-5) 0;
}

/* slightly larger block spacing for lists */
.pol-content ul,
.pol-content ol {
  margin: var(--space-2-5) 0 var(--space-4) 1.1rem;
}

/* link color in the content area */
.pol-content a {
  color: var(--accent-500);
  text-decoration: none;
  text-underline-offset: 2px;
}

.pol-content a:focus {
  color: var(--accent-500);         /* keep same color, just underline on hover/focus */
  text-decoration: underline;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/minecraft-modpacks.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* ===================== mdpk: variables ===================== */
:root {
  --mdpk-link: var(--accent-500);
  --mdpk-text: var(--content-strong);
  --mdpk-muted: var(--content-tertiary);

  /* viewport + card sizing */
  --mdpk-section-h: 320px;   /* columns crop height */
  --mdpk-card-h: 80px;       /* card height (no inner padding) */
  --mdpk-gap-y: 20px;        /* space between cards */
  --mdpk-radius: 18px;

  /* full-bleed images (no padding/border) */
  --mdpk-pad-y: 0;
  --mdpk-card-bg: transparent;

  /* loop speed (increase to slow down) */
  --mdpk-speed: 40s;
}

/* ===================== layout + copy ===================== */
/* The section itself carried no vertical padding, so it butted straight up
   against whatever preceded it — visible once the modpack block moved above
   the CTA and landed directly under GameFeatures' filled accent band. One
   section rhythm, the same --space-16 every other section uses. */
.mdpk-support-train {
  padding: var(--space-16) 0;
}

.mdpk-inner {
  max-width: 1180px;
  margin: auto;
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: 1fr 1.15fr;
  align-items: start;
  padding: 0 var(--space-8);
}

@media (max-width: 900px) {
  .mdpk-inner {
    grid-template-columns: 1fr;
    padding: 0 var(--space-5);
  }
}

.mdpk-copy {
  color: var(--mdpk-text);
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.mdpk-copy h2 {
  margin: 0 0 var(--space-2-5);
  line-height: 1.1;
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  word-wrap: break-word;
}

.mdpk-copy p {
  color: var(--mdpk-muted);
  margin: 0 0 var(--space-4);
  line-height: 1.9;
  max-width: 64ch;
  word-wrap: break-word;
}

.mdpk-copy a {
  color: var(--mdpk-link);
  font-weight: 800;
  text-decoration: none;
}

.mdpk-copy a:hover {
  text-decoration: underline;
}

/* mobile text adjustments */
@media (max-width: 900px) {
  .mdpk-copy {
    text-align: center;
    margin: 0 auto;
    max-width: 85%;
  }
  .mdpk-copy p {
    font-size: var(--text-md);
    line-height: 1.7;
  }
}
@media (max-width: 500px) {
  .mdpk-copy {
    text-align: left;
    max-width: 100%;
  }
}

/* ===================== columns ===================== */
.mdpk-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .mdpk-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .mdpk-columns {
    grid-template-columns: 1fr;
  }
}

.mdpk-column {
  height: var(--mdpk-section-h);
  position: relative;
  overflow: hidden;

  /* soft fade at edges to hide the seam */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* ===================== moving tracks ===================== */
.mdpk-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.mdpk-track--up {
  animation: mdpk-loop-up var(--mdpk-speed) linear infinite both;
}

.mdpk-track--down {
  animation: mdpk-loop-down var(--mdpk-speed) linear infinite both;
}

/* phase offsets so columns never align */
.mdpk-track--delay0 { animation-delay: 0s; }
.mdpk-track--delay1 { animation-delay: calc(var(--mdpk-speed) * -0.33); }
.mdpk-track--delay2 { animation-delay: calc(var(--mdpk-speed) * -0.66); }

/* ===================== stacks (cards) ===================== */
.mdpk-wagons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mdpk-gap-y);
}

.mdpk-wagon {
  display: grid;
  place-items: center;
  height: var(--mdpk-card-h);
  padding: var(--mdpk-pad-y) 0;
  border-radius: var(--mdpk-radius);
  background: var(--mdpk-card-bg);
  overflow: hidden;
  opacity: .68;
  transition: opacity .2s ease;
}

.mdpk-wagon:hover {
  opacity: 1;
}

/* full-bleed image */
.mdpk-logo {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--surface-raised);
}

.mdpk-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===================== seamless loop (no playback) ===================== */
@keyframes mdpk-loop-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@keyframes mdpk-loop-down {
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.mdpk-track .mdpk-wagons + .mdpk-wagons {
  margin-top: var(--mdpk-gap-y);
}
.mdpk-track::after {
  content: "";
  display: block;
  height: var(--mdpk-gap-y);
}

/* ===================== a11y ===================== */
@media (prefers-reduced-motion: reduce) {
  .mdpk-track { animation: none; }
}

/* ===================== horizontal mode under 900px ===================== */
@media (max-width: 900px) {
  /* show one horizontal sliding row */
  .mdpk-columns {
    display: block;
  }

  .mdpk-column {
    height: auto;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
    margin-bottom: var(--space-4);
  }

  /* only first column used */
  .mdpk-columns > .mdpk-column:not(:first-child) {
    display: none;
  }

  .mdpk-track {
    position: relative;
    display: flex;
    animation: mdpk-loop-left var(--mdpk-speed) linear infinite both;
  }

  .mdpk-wagons {
    flex-direction: row;
    gap: var(--space-4);
  }

  .mdpk-wagon {
    width: 140px;
    height: 80px;
    flex-shrink: 0;
  }

  .mdpk-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  @keyframes mdpk-loop-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}




/* ===================== horizontal mode under 900px ===================== */
@media (max-width: 900px) {
  /* remove inner padding so logos hit full width */
  .mdpk-inner {
    padding: 0;
  }

  .mdpk-columns {
    display: block;
    overflow: hidden;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw; /* full-bleed hack to go edge to edge */
    margin-right: -50vw;
  }

  .mdpk-column {
    height: auto;
    overflow: hidden;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* only one unified track */
  .mdpk-columns > .mdpk-column:not(:first-child) {
    display: none;
  }

  /* horizontal scrolling */
  .mdpk-track {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-4);
    animation: mdpk-loop-left 25s linear infinite; /* faster loop */
  }

  .mdpk-wagons {
    display: flex;
    flex-direction: row;
    gap: var(--space-4);
  }

  .mdpk-track .mdpk-wagons + .mdpk-wagons {
    margin-top: 0; /* ensure no vertical gap */
  }

  .mdpk-wagon {
    width: 180px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mdpk-radius);
    background: var(--surface-raised);
  }

  .mdpk-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* edge-to-edge seamless loop */
  @keyframes mdpk-loop-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/blog_header.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
.blog-header {
  margin: var(--space-8) 0 var(--space-12) 0;
  text-align: left;
}

.blog-title {
  /* Page-title step, identical on every page. */
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  font-weight: 900;
  color: var(--pure-white);
  margin-bottom: var(--space-2-5);
  line-height: 1.2;
}

.blog-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  font-size: var(--text-lg);
  color: var(--content-secondary);
}

.meta-date strong {
  color: var(--pure-white);
  font-weight: 600;
}

.meta-separator {
  color: var(--content-secondary);
  margin: 0 var(--space-1);
}

.meta-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: none;
  object-fit: cover;
  margin: 0 var(--space-1-5);
  box-shadow: 0 0 8px rgba(107, 110, 255, 0.5);
}

.meta-author {
  color: var(--pure-white);
  font-weight: 500;
}


.blog-header h1{
    color: var(--pure-white);
    font-weight: 900;
font-size: clamp(2rem, 4vw + .5rem, 3rem);

}



/* Title */
.blog-header h1,
.blog-title {
  color:var(--pure-white);
  font-weight:900;
  line-height:1.15;
}

/* Meta row */
.blog-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
  color:var(--pure-white);                 /* force white text */
  opacity:.92;
  font-size: var(--text-lg);
  text-shadow:0 1px 2px rgba(0,0,0,.35); /* readability on image bg */
}

/* Treat each bit (date, author, categories) as inline-flex for clean baseline */
.blog-meta span {
  display:inline-flex;
  align-items:center;
}

/* If you use a bullet character “•”, make it lighter */
.blog-meta .separator { color:var(--content-tertiary); }

/* Avatar (if/when present) */
.meta-avatar,
.blog-meta img.author-avatar {
  width:32px;
  height:32px;
  border-radius:var(--radius-full);
  object-fit:cover;
  border: none;
  box-shadow:0 0 8px rgba(107,110,255,.45);
  margin:0 var(--space-1-5);
}

/* Optional: align the whole row left instead of centered */
/* .blog-meta { justify-content:flex-start; } */


.blog-header {
  text-align: center;
  color: var(--pure-white);
  padding: var(--space-12) var(--space-4) var(--space-8);
}

.blog-title {
  /* Page-title step, identical on every page. */
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  font-weight: 900;
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.blog-meta {
  font-size: var(--text-lg);
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.blog-date {
  color: var(--content-secondary);
}

.blog-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: none;
}

.author-name {
  font-weight: 600;
  color: var(--pure-white);
}







/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/blog_content.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.blog-content {
  font-size: var(--text-xl);
  line-height: 1.8;
  color: var(--content-strong);
}

.blog-content p {
  margin-bottom: var(--space-6);
  color: var(--content-tertiary);
  font-size: var(--text-lg);

}


.blog-content li {
  color: var(--content-tertiary);
  font-size: var(--text-lg);

}

.blog-content tr {
  color: var(--content-tertiary);
  font-size: var(--text-lg);
}

.blog-content h2 {
  font-weight: 800;
  color: var(--pure-white);
}



.blog-content h3 {
  font-weight: 700;
  color: var(--content-accent);
}

.blog-content a {
  color: var(--status-info-text);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.blog-content a:hover {
  color: var(--status-info-base);
}



/* === CODE SNIPPET STYLING === */

/* Main code block container */
pre code {
  background-color: var(--surface-raised) !important; /* ← Your preferred dark-blue tone */
  font-family: "Fira Code", "JetBrains Mono", monospace;
  font-size: var(--text-lg); /* 👈 change this to adjust globally */
  display: block;
  overflow-x: auto;
      padding: var(--space-2-5);
      border-radius: var(--radius-sm);
}

pre  {
  background-color: transparent !important; /* ← Your preferred dark-blue tone */

}

/* Ensure inline code (like `code` inside text) still looks tidy */
p code, li code {
  background: rgba(27, 31, 68, 0.6);
  padding: var(--space-1) var(--space-1-5);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  color: var(--content-secondary);
}




code[class*="language-"] {
  background-color: var(--surface-raised) !important;
  font-size: inherit;
    font-size: var(--text-lg); /* 👈 adjust font size here too if using language blocks */
    padding: var(--space-2-5);
          border-radius: var(--radius-sm);


}





/* === Blog images styling === */

.blog-content img,
.blog-main img,
figure img {
  border-radius: var(--radius-sm);          /* 👈 your requested radius */
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  box-shadow: var(--shadow-soft-md); /* optional depth */
}

/* Optional: if using Hugo’s figure shortcode */
figure {
  margin: var(--space-6) 0;
  text-align: center;
}

figure figcaption {
  color: var(--content-tertiary);
  font-size: var(--text-md);
  margin-top: var(--space-2);
}





/* === YOUTUBE / IFRAME EMBEDS === */

.blog-content iframe,
.blog-main iframe,
figure iframe {
  width: 100%;
  aspect-ratio: 16 / 9;     /* keeps perfect video ratio */
  border-radius: var(--radius-sm);      /* 👈 same smooth corners */
  overflow: hidden;
  display: block;
  border: none;
  box-shadow: var(--shadow-soft-md); /* subtle depth */
}

/* Optional wrapper if you prefer precise control */
.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}




.callout {
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  border: none;
  background: var(--surface-raised);
}
.callout.info { border-left: 6px solid var(--accent-500); }
.callout.warning { border-left: 6px solid var(--status-warning-base); }
.callout.success { border-left: 6px solid var(--status-success-base); }
.callout h4 { margin: 0 0 .5rem; color: var(--pure-white); }




/* Ensure the content column can actually shrink inside grid/flex layouts */
.blog-main { min-width: 0; }

/* If the page uses a grid and the content pushes the sidebar off-screen,
   force a sane two-column layout (adjust width as you like) */
.blog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px; /* content | sidebar */
  gap: var(--space-8);
}

/* Contain embeds even when the shortcode sets fixed width/height */
.blog-main iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  display: block;
}

/* Prevent wide tables/code from blowing out the column */
.blog-main table { 
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--surface-base);
}
.blog-main thead th { background: var(--surface-raised); color: var(--pure-white); }
.blog-main th, .blog-main td {
   padding: var(--space-3) var(--space-4); 
   font-weight: 600;
  }

@media (max-width: 900px){
  .blog-main table { display: block; overflow-x: auto; white-space: nowrap; }
}

.blog-main pre { overflow-x: auto; max-width: 100%; }








/* Make the PRE the scroll container & give it the dark bg */
.blog-content pre {
  background: var(--surface-raised) !important;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: var(--space-2-5) var(--space-3);
  overflow-x: auto;         /* <- scroll belongs here */
  white-space: pre;         /* no wrapping */
}

/* The CODE inside inherits bg and doesn't create a second box */
.blog-content pre code {
  background: transparent !important;
  display: block;
  padding: 0;
  border-radius: 0;
  overflow: visible;        /* <- remove extra scrollbar */
}

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/blog_sidebar.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════
   Blog Sidebar  — Shockbyte-style redesign
   ═══════════════════════════════════════════════════════════ */

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Base card ─────────────────────────────────────────────── */
.sb-card {
  background: var(--surface-raised);
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ── Table of Contents ─────────────────────────────────────── */
.toc-box {
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.toc-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--pure-white);
  letter-spacing: 0.01em;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-1-5);
  border-bottom: 1px solid var(--border-default);
}

.toc-nav {
  display: flex;
  flex-direction: column;
  max-height: 370px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(112,110,241,0.3) transparent;
}
.toc-nav::-webkit-scrollbar { width: 3px; }
.toc-nav::-webkit-scrollbar-thumb { background: rgba(112,110,241,0.35); border-radius: var(--radius-sm); }

.toc-link {
  display: block;
  flex-shrink: 0;
  padding: var(--space-1-5) var(--space-2) var(--space-1-5) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--content-tertiary);
  text-decoration: none !important;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc-link.toc-h3 {
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  color: var(--content-tertiary);
}

.toc-link:hover {
  color: var(--content-secondary);
  text-decoration: none !important;
}

.toc-link.toc-active {
  color: var(--pure-white) !important;
  font-weight: 600;
  border-left-color: var(--accent-500);
}

/* ── Plan card ─────────────────────────────────────────────── */
.spc-box {
  padding: var(--space-4);
  position: relative;
  overflow: hidden;   /* clips the diagonal ribbon to the card border-radius */
}

/* Triangle helper no longer needed — ribbon handles everything */
.spc-corner { display: none; }

/* Diagonal "MOST POPULAR" ribbon across the top-right corner.
   Two lines, matching the plan cards — see .plan-card__ribbon. A 120px band
   with 0.1em tracking could not hold the English label, let alone "Le plus
   populaire", so the text ran into the clipped end and lost letters. Wrapping
   removes the constraint: the horizontal padding keeps the text box narrow so
   the label always breaks, and text-wrap: balance splits it evenly. */
.spc-corner-label {
  position: absolute;
  top: 22px;
  right: -46px;
  width: 160px;
  background: var(--status-success-base);
  color: var(--pure-white);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-1-5) var(--space-10);
  transform: rotate(45deg);
  white-space: normal;
  text-wrap: balance;
  line-height: 1.15;
  pointer-events: none;
  box-shadow: var(--shadow-soft-sm);
}

.spc-header {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  margin-bottom: var(--space-2-5);
  padding-right: var(--space-12);
}

.spc-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.spc-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--pure-white);
  line-height: 1.2;
}

.spc-game {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

.spc-tags {
  display: flex;
  gap: var(--space-1-5);
  margin-bottom: var(--space-3);
}

.spc-tag {
  background: var(--surface-raised);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--content-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.spc-price {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--pure-white);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  line-height: 1;
}

.spc-price-period {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--content-tertiary);
  margin-left: var(--space-1);
}

.spc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2-5) var(--space-4);
  background: var(--accent-500);
  color: var(--pure-white) !important;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.spc-btn:hover {
  opacity: var(--hover-opacity, 0.85);
  text-decoration: none !important;
}

/* ── Newsletter ─────────────────────────────────────────────── */
.nl-box {
  padding: var(--space-4);
}

.nl-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  margin-bottom: var(--space-3);
}

.nl-icon {
  /* Colour lives on the tile so the glyph inherits it. Without this the
     filled icon paints with currentColor, which resolved to black. */
  color: var(--content-accent);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--accent-tint);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* The icon set is filled, not stroked — these glyphs paint with
   fill="currentColor" and carry no stroke at all, so colouring `stroke` had
   no effect and left the fill on its inherited black. */
.nl-icon svg {
  width: 18px;
  height: 18px;
}

.nl-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--pure-white);
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

.nl-subtitle {
  font-size: var(--text-xs);
  color: var(--content-tertiary);
  font-weight: 500;
  line-height: 1.4;
}

.nl-form {
  display: flex;
  gap: var(--space-1-5);
}

.nl-input {
  flex: 1 1;
  min-width: 0;
  background: var(--surface-overlay);
  border: none;
  border-radius: var(--radius-md);
  color: var(--content-strong);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  outline: none;
  transition: border-color 0.2s;
}

.nl-input:focus {
  outline: none;

  box-shadow: var(--shadow-focus);
}

.nl-input::placeholder {
  color: var(--surface-active);
}

.nl-submit {
  flex-shrink: 0;
  background: var(--accent-500);
  color: var(--pure-white);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.nl-submit:hover {
  opacity: var(--hover-opacity, 0.85);
}

.nl-status {
  font-size: var(--text-xs);
  color: var(--content-tertiary);
  margin-top: var(--space-1-5);
  min-height: 0;
}

/* ── Related posts ─────────────────────────────────────────── */
.related-posts {
  background: var(--surface-raised);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.related-posts h3 {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--pure-white);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

.related-posts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.related-posts li {
  border-bottom: 1px solid var(--border-default);
}

.related-posts li:last-child {
  border-bottom: none;
}

.related-posts a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--content-tertiary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.related-posts a:hover {
  color: var(--content-secondary);
}

/* ── Modal ──────────────────────────────────────────────────── */
.newsletter-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 24, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.newsletter-modal-overlay.active {
  display: flex;
}

.newsletter-modal {
  background: var(--surface-raised);
  padding: var(--space-6) var(--space-7) var(--space-6);
  border-radius: var(--radius-xl);
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: none;
}

.newsletter-modal h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  color: var(--pure-white);
}

.newsletter-modal p {
  margin: 0 0 var(--space-5);
  color: var(--content-tertiary);
  font-size: var(--text-md);
}

.newsletter-modal button {
  border: none;
  background: var(--accent-500);
  color: var(--pure-white);
  font-size: var(--text-md);
  font-weight: 600;
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.newsletter-modal button:hover {
  opacity: var(--hover-opacity, 0.85);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/blog_layout.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* ===== Blog Layout ===== */
.blog-container {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  max-width: 1200px;
  margin: 0 auto;
}

/* Blog top section (title + meta) */
.blog-top {
  margin-bottom: var(--space-12);
}

/* Grid for content + sidebar */
.blog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: var(--space-8);
  align-items: start;
}

/* Responsive stack */
@media (max-width: 1024px) {
  .blog-body {
    grid-template-columns: 1fr;
  }
}

/* Sticky sidebar behavior */
.blog-sidebar-wrapper {
  position: sticky;
  top: 120px;       /* safely below header on all screen sizes */
  align-self: start;
  /* No internal scroll — sidebar sticks at top, no overflow */
}





/* ────────────────────────────────
   BLOG RESPONSIVE LAYOUT
   Make content full-width on mobile
──────────────────────────────── */
@media (max-width: 1024px) {
  .blog-body.container {
    display: block;
    padding: 0 var(--space-4);
  }

  .blog-main {
    width: 100%;
  }

  .blog-sidebar-wrapper,
  .blog-sidebar {
    display: none !important;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/protable.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
/* === PH-TABLE GLOBAL STYLING === */

.ph-table-wrapper {
  overflow-x: auto;
}

/* Table container */
.ph-table {
  width: 100%;
  border-collapse: separate; /* required for rounded corners */
  border-spacing: 0; /* no gaps between cells */
  border: none;
  border-radius: var(--radius-md); /* round all corners */
  overflow: hidden;
  background-color: var(--surface-canvas);
  font-family: "Inter", sans-serif;
  color: var(--content-strong);
}

/* Header row */
.ph-table thead th {
  background-color: var(--surface-overlay);
  color: var(--pure-white);
  font-weight: 700;
  text-align: left;

}

/* round top corners of the first and last header cells */
.ph-table thead th:first-child {
  border-top-left-radius: 9px;
}
.ph-table thead th:last-child {
  border-top-right-radius: 9px;
}



/* Alternate rows */
.ph-table tr:nth-child(even) td {
  background-color: var(--surface-base);
}



/* Caption (table title) */
.ph-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: var(--content-tertiary);
  padding-bottom: var(--space-3);
  font-size: var(--text-md);
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/blog-list.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/* Container + grid */
.blog-container .blog-list{
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .blog-container .blog-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px){
  .blog-container .blog-list{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Card */
.blog-container .blog-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--surface-raised);
  border: none;
  /* 18px, matching the "latest blogs" cards on the homepage so the two
     surfaces read as the same component. Deliberately between --radius-lg
     (14px) and --radius-xl (20px); see latest-post.css. */
  border-radius: 18px;
  padding: var(--space-5);
  color: var(--pure-white);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: none;
}
.blog-container .blog-card:hover{
  background-color: var(--surface-hover);
  box-shadow: none;
  background-color: var(--surface-hover);
}
.blog-container .blog-card:focus{
  outline: 2px solid rgba(99,102,241,.8);
  outline-offset: 2px;
  border-color: transparent;
}

/* Thumbnail */
.blog-container .blog-card__thumb{
  width: 100%;
  aspect-ratio: 16/9;
  /* Same step up the radius scale the homepage cards use. */
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.blog-container .blog-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .25s ease;
}
.blog-container .blog-card:hover .blog-card__thumb img{ transform: scale(1.03); }

/* Category pill */
.blog-container .blog-card__cat{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4ch;
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--accent-500);
  color: var(--pure-white);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--space-3);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}

/* Title & excerpt */
.blog-container .blog-card__title{
  margin: 0 0 var(--space-1-5) 0;
  /* Card title, not a display heading: --text-xl at semibold. Was 1.25rem at
     weight 800 — a display weight on a 3-up grid, which is why the titles
     dominated the cards and left the excerpt with nowhere to sit. */
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--font-semibold);
  color: var(--content-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-container .blog-card__excerpt{
  margin: 0 0 var(--space-2-5) 0;
  color: var(--content-secondary);
  /* One step below the title so the hierarchy is legible; they were 20px vs
     16px, too close to read as different levels. */
  font-size: var(--text-md);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bottom row */
.blog-container .blog-card__row{
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  margin-top: var(--space-1-5);
  color: var(--content-secondary);
  font-size: var(--text-md);
}
.blog-container .blog-card__avatar{
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--pure-white);
  object-fit: cover;
  flex: 0 0 32px;
}
.blog-container .blog-card__author{
  color: var(--pure-white);
  font-weight: 700;
  white-space: nowrap;
}
/* Date on right + calendar icon */
.blog-container .blog-card__meta{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--content-secondary);
  white-space: nowrap;
  position: relative;
  padding-left: var(--space-6);
}
.blog-container .blog-card__meta::before{
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: no-repeat center / 16px 16px url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b8bdd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
  <rect x='3' y='4' width='18' height='18' rx='2' ry='2'/>\
  <line x1='16' y1='2' x2='16' y2='6'/>\
  <line x1='8' y1='2' x2='8' y2='6'/>\
  <line x1='3' y1='10' x2='21' y2='10'/>\
  </svg>");
}

/* Empty state */
.blog-container .blog-empty{
  color: var(--content-secondary);
  padding: var(--space-2) 0 var(--space-4);
}

/* Pagination */
.blog-container .blog-pagination{
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: center;
  margin: var(--space-7) 0 var(--space-2);
  color: var(--content-secondary);
}
.blog-container .blog-pagination a{
    background-color: var(--surface-overlay);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--content-tertiary);
    transition: background .15s ease, border-color .15s ease;
    font-weight: 700;
}

.blog-pagination__num.is-active{
    background-color: var(--accent-500);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border: none;
  background-color: var(--accent-500);
  color: var(--pure-white);
    border-radius: var(--radius-sm);
    color: var(--pure-white);
    transition: background .15s ease, border-color .15s ease;
    font-weight: 700;
}


/* Mobile tweaks */
@media (max-width: 480px){
  .blog-container .blog-card__title{ font-size: var(--text-lg); }
  .blog-container .blog-card__excerpt{ -webkit-line-clamp: 3; }
}

/* Newer / Older steps: the arrows used to be literal characters inside the
   translation strings — a long ⟵ paired with a heavy ➜, two different
   weights. They are shared Icon glyphs now, so they match every other arrow
   on the site and the strings hold only words. */
.blog-pagination__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/latest-post.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* Latest Blogs heading */
.latest-heading {
  text-align: center;
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);  font-weight: 900; /* bolder look */
  color: var(--content-strong);
  margin-bottom: var(--space-8);
}

/* ──────────────────────────────────────────────────────────────
   Clean "latest blogs" cards — image → title → excerpt only.
   Naked by default, subtle panel + lift on hover. Scoped to
   .latest-section so the /blog list page keeps its full cards.
────────────────────────────────────────────────────────────── */
.blog-container.latest-section .blog-card {
  /* Solid raised panel rather than naked-on-hover: the cards sit on the flat
     page surface, and without a fill they read as loose text columns instead
     of cards. #2a2f41 is --surface-raised exactly. 18px is intentionally
     between --radius-lg (14px) and --radius-xl (20px). */
  background: var(--surface-raised);
  border-color: transparent;
  box-shadow: none;
  border-radius: 18px;
}
.blog-container.latest-section .blog-card:hover {
  background: var(--surface-raised);
  background-color: var(--surface-hover);
  box-shadow: none;
}
/* Hide category pill + author/avatar/date row for the clean look */
.blog-container.latest-section .blog-card__cat,
.blog-container.latest-section .blog-card__row {
  display: none;
}
/* Slightly more rounded image + a touch more breathing room */
.blog-container.latest-section .blog-card__thumb {
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.blog-container.latest-section .blog-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.blog-container.latest-section .blog-card__excerpt {
  margin-bottom: 0;
}

/* Button container + style */
.latest-button-container {
  text-align: center;
  margin-top: var(--space-8);
}

/* Color/radius/motion come from .ui-btn (src/components/ui/ui.css). */
.latest-more-btn svg {
  stroke-width: 2.5;
  width: 18px;
  height: 18px;
}
















/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/order-modal.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* ================================================================
   ORDER MODAL  — 4-step: Location → Billing → Add-ons → Review
   ================================================================ */

/* ── Overlay ── */
.order-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.order-modal.is-open { display: flex; }

.order-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 24, 0.85);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

/* ── Container ── */
.order-modal__container {
  position: relative;
  background: var(--surface-raised);
  border: none;
  border-radius: var(--radius-xl);
  width: 100%;
  /* Wider so a step fits without scrolling: the config step carries four
     option groups, and at 460px the three-across rows had to stack. */
  max-width: 640px;
  max-height: 90vh;
  /* The header and footer stay put; only the step body scrolls. Scrolling the
     whole container pushed the step title and the Next button off-screen on
     short viewports. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  animation: omSlideIn .22s ease;

  /* position:fixed does not stop text-align being inherited, and the modal is
     mounted inside whichever plan section opened it — several of which centre
     their text. That is why the plan name sat off to the right of its own
     badges and the region headings drifted to the middle. Anchor it here so
     the modal's alignment never depends on where it was opened from. */
  text-align: left;
}

@keyframes omSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
/* flex: none alongside the scrolling panel, or a long plan name lets the
   header absorb space the list needs. */
.order-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  flex: none;
  gap: var(--space-3);
}

.order-modal__plan-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.order-modal__plan-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  object-fit: contain;
  flex-shrink: 0;
}

/* align-items: flex-start keeps the name hard against the icon. As a plain
   column its children stretched full width, so any inherited centring pushed
   the name away from the badges beneath it. */
.order-modal__plan-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.order-modal__plan-name {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--pure-white);
}

.order-modal__plan-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Pills, one step above the header they sit on. These were --surface-raised,
   the header's own colour, so "16 PLAYERS" and "3GB RAM" rendered as two loose
   runs of text with a gap between them instead of tags. */
.order-modal__plan-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--content-secondary);
  background: var(--surface-overlay);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.order-modal__close {
  background: none;
  border: none;
  color: var(--content-secondary);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  font-size: var(--text-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.order-modal__close:hover {
  background: var(--surface-overlay);
  color: var(--pure-white);
}
.order-modal__close:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ── Step title + counter ── */
.order-modal__step-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6) 0;
  gap: var(--space-3);
}

.order-modal__step-title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--pure-white);
  margin: 0;
}

.order-modal__step-count {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--content-tertiary);
  white-space: nowrap;
}

/* ── Segmented progress bar ── */
.order-modal__progress {
  display: flex;
  gap: var(--space-1-5);
  padding: var(--space-3) var(--space-6) var(--space-4);
}

/* A <button>, not a <span> — jumping back to an already-answered step has to
   work from the keyboard too. UA button chrome is reset away so the row still
   reads as one progress bar rather than four tiny buttons. */
.order-modal__progress-seg {
  flex: 1 1;
  height: 5px;
  padding: 0;
  border: 0;
  appearance: none;
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  transition: background .2s;
  cursor: pointer;
}
.order-modal__progress-seg:disabled {
  cursor: default;
}
.order-modal__progress-seg:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.order-modal__progress-seg.is-filled {
  background: var(--accent-500);
}

/* ── Panel body ── */
.order-modal__panel {
  padding: var(--space-6);
  /* The one scrolling region. `flex: 1` alone let the panel grow past the
     container and the content simply ran under the footer with no way to
     reach it — the location list was cut off mid-list at "Asia". min-height:0
     is what actually allows a flex child to shrink and scroll. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Visible, quiet scrollbar. It was hidden on every scrolling surface in this
   modal, so a list that scrolled looked identical to one that was simply
   truncated. */
.order-modal__panel::-webkit-scrollbar,
.om-option-list--scroll::-webkit-scrollbar {
  width: 8px;
}
.order-modal__panel::-webkit-scrollbar-thumb,
.om-option-list--scroll::-webkit-scrollbar-thumb {
  background: var(--surface-hover);
  border-radius: var(--radius-full);
}
.order-modal__panel::-webkit-scrollbar-thumb:hover,
.om-option-list--scroll::-webkit-scrollbar-thumb:hover {
  background: var(--surface-active);
}
.order-modal__panel,
.om-option-list--scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-hover) transparent;
}
.order-modal__panel[hidden] { display: none; }

.order-modal__panel h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--content-secondary);
  margin: 0 0 var(--space-4);
}

/* ── Option list (radio rows) — used for Location + Billing Cycle ── */
.om-option-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/*
 * Rows sit one surface step above the modal.
 *
 * They were --surface-raised — the exact colour of .order-modal__container —
 * so an unselected row had no visible box at all. Only the selected one showed
 * a tint, which made the list look like loose text with a single highlighted
 * item rather than a set of choices. Hover was set to the same colour again,
 * so pointing at a row did nothing either.
 */
.om-option-row {
  background: var(--surface-overlay);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  transition: border-color .2s, background .2s;
}
.om-option-row:hover {
  background: var(--surface-hover);
}
.om-option-row:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* Accent tint over the row's own ground, plus a border, so "selected" is
   legible without relying on colour alone. */
.om-option-row.is-selected {
  background: var(--accent-tint);
  border-color: var(--accent-500);
}

/* 0.45 on already-secondary text fell below readable contrast — "Coming Soon"
   was barely there. Dim the row, not into invisibility. */
.om-option-row.is-disabled,
.om-option-row:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  background: var(--surface-base);
}
.om-option-row.is-disabled:hover,
.om-option-row:disabled:hover {
  background: var(--surface-base);
}

.om-option-row__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.om-option-row__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Billing-cycle rows only: price on top, what it saves beneath it, both
   flush right. The add-on rows keep the single-line version above — they
   carry one figure, so there is nothing to stack. */
.om-option-row__right--stacked {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-0-5);
}
.om-option-row__right--stacked .om-price-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* border: none left the unselected state with no mark at all — a blank gap
   where the control should be, so a row read as plain text until you picked
   it. The ring is the control at rest; selected fills it. */
.om-radio {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-strong);
  background: rgb(0 0 0 / 0.15);
  flex-shrink: 0;
  position: relative;
  transition: border-color .2s, background .2s;
}
.om-option-row.is-selected .om-radio {
  background: var(--accent-500);
}
.om-option-row.is-selected .om-radio::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: var(--radius-full);
  background: var(--pure-white);
}

.om-flag {
  display: block;
  width: 32px;
  height: 24px;
  border-radius: var(--radius-xs);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px var(--border-default);
  flex-shrink: 0;
}

.om-option-row__label {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--pure-white);
}
.om-option-row__price {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--content-secondary);
  white-space: nowrap;
}
.om-option-row.is-selected .om-option-row__price {
  color: var(--content-strong);
}

.om-price-original {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--content-tertiary);
  text-decoration: line-through;
}
.om-price {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--pure-white);
}

/* Brief pulse shown when prices update live (e.g. currency switched) */
@keyframes omPriceFlash {
  0%   { opacity: 0.35; transform: scale(0.94); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.om-price-flash {
  display: inline-block;
  animation: omPriceFlash 0.35s ease;
}

.om-badge {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(112,110,241,0.2);
  color: var(--content-accent);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.om-badge--green {
  background: rgb(var(--status-success-base-rgb) / 0.15);
  color: var(--status-success-base);
}
/* One step up from the row, which is --surface-overlay. Was the modal's own
   colour, so this pill had no shape. */
.om-badge--muted {
  background: var(--surface-hover);
  color: var(--content-tertiary);
}

/* ── Server Location (Step 1): one row per region, no group headings ── */
/* No inner scroller. The panel above is the scrolling region now; a second
   340px-capped one nested inside it produced two scrollbars for one list, and
   the outer one hid the fact that the inner had more to show. */
.om-option-list--scroll {
  padding-right: var(--space-1-5);
}

/* The region headings each labelled a single row that already carried the
   same name, so the step was twice as tall as it needed to be and had to
   scroll. Rows now space themselves evenly instead. */
.om-option-list--scroll .om-option-row + .om-option-row {
  margin-top: var(--space-2-5);
}

/* Savings chip on the billing-cycle rows. Success-green, matching
   .om-badge--green, because it is a gain rather than a discount taken off a
   price — the struck-through original beside it already carries that. */
.om-save {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  background: rgb(var(--status-success-base-rgb) / 0.15);
  color: var(--status-success-base);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.om-ping {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-shrink: 0;
  color: var(--content-tertiary);
}
.om-ping__value {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Add-ons (Step 3) ── */
.om-addon-group {
  margin-bottom: var(--space-5);
}
.om-addon-group:last-child { margin-bottom: 0; }

.om-addon-label {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--content-secondary);
  margin-bottom: var(--space-2);
}

.om-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--content-tertiary);
  cursor: help;
  transition: color .15s;
}
.om-info:hover,
.om-info:focus-visible {
  color: var(--content-accent);
  outline: none;
}

.om-tooltip {
  position: fixed;
  z-index: 1000000;
  max-width: 260px;
  /* Floats above rows that are themselves --surface-overlay, so it needs to
     clear both them and the modal ground. */
  background: var(--surface-active);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2-5) var(--space-3);
  color: var(--content-strong);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: var(--shadow-soft-lg);
  pointer-events: none;
}
.om-tooltip[hidden] { display: none; }

.om-addon-group .om-option-list {
  gap: var(--space-2);
}

/* Options that share a row instead of stacking (CPU Priority, Dedicated IP).
   Rows keep the same padding/radio size as every other option-row in the
   modal (Location, Billing, Backup trigger) so heights stay consistent. */
.om-option-list--row {
  flex-direction: row;
}
.om-option-list--row .om-option-row {
  flex: 1 1;
  justify-content: space-between;
}

/* Backup Tier — one tile per size, all on a single line.
 *
 * Replaces a dropdown: eight tiers behind a closed control meant the price of
 * each was invisible until opened one at a time, and the panel needed
 * viewport-flipping logic to stay on screen. Laid out flat, every tier and its
 * cost is readable at a glance and there is nothing to position.
 */
.om-tiles {
  /* Four per row, so the eight tiers read as two even lines. A single row of
     eight squeezed each tile below the width its price needs. Grid rather
     than wrapped flex: the last row keeps the same column widths as the
     first instead of stretching to fill. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.om-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-0-5);
  /* Fixed floor rather than a reserved empty price line: a tier with no price
     then centres its label in the box instead of sitting above a blank gap,
     and every tile still matches its neighbours' height. */
  min-height: 3.25rem;
  padding: var(--space-2-5) var(--space-1);
  background: var(--surface-overlay);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.om-tile:hover { background: var(--surface-hover); }
.om-tile:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Selected reads the same as .om-option-row.is-selected — accent border over a
   tinted ground — so a tile and a radio row agree on what "chosen" looks like. */
.om-tile.is-selected {
  background: var(--accent-tint);
  border-color: var(--accent-500);
}

.om-tile__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--content-strong);
  white-space: nowrap;
}

.om-tile__price {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--content-secondary);
  white-space: nowrap;
}

/* Backup Tier — custom dropdown matching the site's panel styling */
.om-select {
  position: relative;
}
.om-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
  background: var(--surface-overlay);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--content-strong);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s;
  font-family: inherit;
}
.om-select__trigger[aria-expanded="true"] {
  background-color: var(--surface-hover);
}
/* Keep the selected value on a single row — long values (e.g. a CPU name on
   the Hardware & Locations filters) truncate with an ellipsis instead of
   wrapping the trigger to two lines. */
.om-select__value {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  overflow: hidden;
  white-space: nowrap;
}

/* The add-on cost beside a backup tier. Muted against the label, which is the
   thing being chosen; matches .om-option-row__price. */
.om-select__price {
  flex-shrink: 0;
  color: var(--content-secondary);
  font-weight: 600;
}
.om-select__chevron {
  flex-shrink: 0;
  color: var(--content-tertiary);
  transition: transform .2s;
}
.om-select__trigger[aria-expanded="true"] .om-select__chevron {
  transform: rotate(180deg);
}

.om-select__panel {
  position: fixed;
  z-index: 1000000;
  /* One shade above the modal/card surface (--panel-bg-1) so the open panel
     never blends into what it floats over; shadow does the rest of the lift. */
  background: var(--panel-bg-2, var(--surface-overlay));
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-1-5);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: var(--shadow-soft-md);
  scrollbar-width: none;
}
.om-select__panel[hidden] { display: none; }
.om-select__panel::-webkit-scrollbar {
  display: none;
}

.om-select__option {
  /* Label left, price right — same reading order as the .om-option-row
     add-ons above, so a tier's cost sits where the eye already expects it. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3);
  color: var(--content-strong);
  font-size: var(--text-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.om-select__option:hover {
  background: var(--accent-tint, rgba(112,110,241,0.12));
  color: var(--pure-white);
}
.om-select__option.is-selected {
  background: var(--accent-tint-strong, rgba(112,110,241,0.25));
  color: var(--pure-white);
}

/* ── Review (Step 4) ── */
/* Matches .om-option-row: a step above the modal, or it is not a card. */
.om-review-card {
  /* Two columns: six rows stacked ran the review past the fold on a laptop,
     and every row is a short label/value pair with room to spare. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-overlay);
  border: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  overflow: hidden;
}

.om-review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-4);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .15s;
}
/* Column divider on the left-hand cell, row rule under everything but the
   last row. There are exactly six items and none are conditional, so the last
   row is always the final two — revisit this if an item is ever added or made
   optional. */
.om-review-item:nth-child(odd) { border-right: 1px solid var(--border-default); }
.om-review-item:nth-last-child(-n + 2) { border-bottom: none; }

@media (max-width: 560px) {
  /* One column again: two label/value pairs side by side do not fit. */
  .om-review-card { grid-template-columns: 1fr; }
  .om-review-item:nth-child(odd) { border-right: none; }
  .om-review-item:nth-last-child(-n + 2) { border-bottom: 1px solid var(--border-default); }
  .om-review-item:last-child { border-bottom: none; }
}
.om-review-item:hover { background: var(--surface-hover); }

.om-review-item__left {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  color: var(--content-secondary);
}
.om-review-item__icon { flex-shrink: 0; }
.om-review-item__label {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--content-secondary);
}

.om-review-item__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The pencil had no colour of its own, so inside the row's <button> it fell
   back to the UA's buttontext and rendered black on a dark panel. Metadata
   step at rest, up to accent on hover so the row reads as editable. */
.om-review-item__edit {
  flex-shrink: 0;
  color: var(--content-tertiary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.om-review-item:hover .om-review-item__edit,
.om-review-item:focus-visible .om-review-item__edit {
  color: var(--content-accent);
}
.om-review-item__value {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--pure-white);
}
.om-review-item__edit {
  color: var(--content-tertiary);
  flex-shrink: 0;
}

.om-review-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-default);
  margin-top: var(--space-2);
}
.om-review-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2-5) var(--space-4);
  font-size: var(--text-sm);
  color: var(--content-secondary);
  border-bottom: 1px solid var(--border-default);
}
.om-review-breakdown-row > span:last-child {
  font-weight: 600;
  color: var(--content-secondary);
}
/* Direct child only — otherwise this also greys the nested .price-cents-sm
   cents span, so an active green discount showed "-US$2." green but ".50" grey. */
.om-review-breakdown-row--discount > span:last-child {
  color: var(--content-tertiary);
}
/* The sum of the line items above it, so it reads as a step up from them
   rather than as another item in the list. */
.om-review-breakdown-row--subtotal > span {
  color: var(--content-strong);
  font-weight: 700;
}
.om-review-breakdown-row--subtotal {
  border-top: 1px solid var(--border-default);
}

.om-review-discount--active {
  color: var(--status-success-text) !important;
}
/* The amount too, not just the label. The rule above colours the row, but
   .om-review-breakdown-row--discount > span:last-child sets the figure to
   --content-tertiary at equal specificity, so the inherited green never
   reached it. Declared after that rule so it wins on order. */
.om-review-discount--active > span:last-child {
  color: var(--status-success-text);
}
.om-review-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-default);
  margin-top: 0;
}
.om-review-total-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--content-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.om-review-total-price {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--pure-white);
}

/* ── Footer (nav buttons) ── */
/* Pinned: the panel scrolls, this does not, so Next is always reachable
   without scrolling to the end of a long list first. */
.order-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: 1px solid var(--border-default);
  gap: var(--space-5);
  flex: none;
}

.om-btn-back {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--content-secondary);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-lg);
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .2s, color .2s;
  font-family: inherit;
}
.om-btn-back:hover {
  background: var(--surface-overlay);
  color: var(--pure-white);
}
.om-btn-back[hidden] { display: none; }

.om-btn-next {
  background: var(--accent-500);
  border: none;
  color: var(--pure-white);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-lg);
  box-sizing: border-box;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
  font-family: inherit;
}
.om-btn-next:hover { opacity: var(--hover-opacity, 0.85); }
.om-btn-next:active { transform: scale(var(--press-scale, 0.97)); }
.om-btn-next[hidden] { display: none; }

.om-btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2-5);
  width: 100%;
  background: var(--accent-500);
  color: var(--pure-white) !important;
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-lg);
  box-sizing: border-box;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
}
.om-btn-checkout:hover { opacity: var(--hover-opacity, 0.85); }
.om-btn-checkout:active { transform: scale(var(--press-scale, 0.97)); }
.om-btn-checkout[hidden] { display: none; }

.om-review-legal {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--content-tertiary);
}
.om-review-legal a {
  color: var(--content-accent);
  text-decoration: none;
}
.om-review-legal a:hover { text-decoration: underline; }

/* ── Mobile ── */

/* On phones the location row (radio + flag + name + RECOMMENDED badge) plus
   the ping indicator overflows the card and clips the ping. The ping is a
   placeholder ("-- ms") with decorative signal bars, so drop it here and let
   the name + badge use the full width. */
/* Mobile: swap every step-3 chooser for a native picker.
 *
 * Scoped to .om-addon-group on purpose — .om-option-list is also the location
 * list in step 1 and the billing-cycle list in step 2, and those must keep
 * their rows on every width.
 */
.om-native-select {
  display: none;
}

@media (max-width: 560px) {
  .om-addon-group .om-tiles,
  .om-addon-group .om-option-list {
    display: none;
  }
  .om-addon-group .om-native-select {
    /* Just a wrapper now — .om-select inside carries the styling, which is the
       site's own rather than the OS picker's. */
    display: block;
  }
}

@media (max-width: 480px) {
  .om-option-row .om-ping { display: none; }
  .om-option-row__label { min-width: 0; }
}

@media (max-width: 380px) {
  .order-modal { padding: var(--space-2); }
  .order-modal__header { padding: var(--space-4) var(--space-4) var(--space-3); }
  .order-modal__step-row { padding: var(--space-4) var(--space-4) 0; }
  .order-modal__progress { padding: var(--space-2-5) var(--space-4) var(--space-3); }
  .order-modal__panel { padding: var(--space-4); }
  .order-modal__footer { padding: var(--space-3) var(--space-4) var(--space-4); }
  .om-btn-back, .om-btn-next, .om-btn-checkout {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
}

/* ── Customize step: RAM and slot sliders ───────────────────────────────────
   A native range input styled to the modal rather than a bespoke control, so
   it keeps keyboard support, touch targets and the OS's own drag behaviour.
   The default UA slider was a white track and a blue thumb, which read as an
   unstyled browser widget dropped into a dark purple dialog. */
.om-slider-group {
  padding: var(--space-4) 0;
}
.om-slider-group + .om-slider-group {
  border-top: 1px solid var(--border-subtle);
}

.om-slider-group__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.om-slider-group__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--content-secondary);
}

/* The number being chosen — the largest thing in the row, because it is what
   the drag is actually setting. */
.om-slider-group__value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--content-primary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.om-slider-group__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.om-slider-group__bound {
  font-size: var(--text-xs);
  color: var(--content-tertiary, var(--content-secondary));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Sits under the amount, right-aligned with it, so the two read as one
   figure: how much was chosen and what it costs. */
.om-slider-group__amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.om-slider-group__cost {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent-500);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.om-slider__input {
  --om-slider-fill: 0%;
  appearance: none;
  display: block;
  inline-size: 100%;
  block-size: 6px;
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
  /* Filled portion up to the thumb, unfilled track after it. A gradient rather
     than a second element keeps the whole control one focusable input. */
  background: linear-gradient(
    to right,
    var(--accent-500) 0 var(--om-slider-fill),
    var(--border-strong) var(--om-slider-fill) 100%
  );
}

.om-slider__input::-webkit-slider-thumb {
  appearance: none;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--pure-white, #fff);
  border: 4px solid var(--accent-500);
  box-shadow: 0 1px 4px rgb(0 0 0 / .4);
  cursor: grab;
}
.om-slider__input::-moz-range-thumb {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--pure-white, #fff);
  border: 4px solid var(--accent-500);
  box-shadow: 0 1px 4px rgb(0 0 0 / .4);
  cursor: grab;
}
/* Firefox paints its own track under the gradient unless this is cleared. */
.om-slider__input::-moz-range-track {
  background: transparent;
}

.om-slider__input:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 4px;
}
.om-slider__input:active::-webkit-slider-thumb { cursor: grabbing; }
.om-slider__input:active::-moz-range-thumb { cursor: grabbing; }

@media (prefers-reduced-motion: no-preference) {
  .om-slider__input::-webkit-slider-thumb { -webkit-transition: transform .1s ease; transition: transform .1s ease; }
  .om-slider__input:active::-webkit-slider-thumb { transform: scale(1.15); }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/modpack-showcase.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
.modpack-showcase {
  padding: var(--space-16) 0;
  overflow: hidden;
}

.modpack-showcase__heading {
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--pure-white);
  text-align: center;
  line-height: 1.2;
  margin: 0 0 var(--space-5);
}

.modpack-showcase__subtitle {
  /* Shared section-subtitle spec — identical in every section. */
  max-inline-size: 60ch;
  margin: 0 auto var(--space-10);
  color: var(--content-secondary);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
  text-align: center;
}

/* No full-bleed trick here any more: the wall is viewport-wide, so a row
   just fills it. Doing it in both places double-shifted the rows.

   No horizontal fade either. It used to taper the outer 5% of each row to
   transparent, which reads as a wide empty margin rather than a soft edge —
   about 100px of dead space per side on a 2000px screen. The tiles run to
   both edges instead, which is what a wall of them is for. The rows still
   overflow: hidden, so the scrolling track is clipped at the viewport rather
   than spilling out. */
.modpack-showcase__row {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* The wall owns the row rhythm. A tight gap is deliberate: the rows should
   read as one dense field of packs, not five separate carousels.

   Full-bleed HERE, not on the rows. A mask clips to its own border box, so
   with the fade on a container-width wall the 100vw rows inside were being
   cut back to 1248px — the wall stopped well short of both page edges. The
   wall spans the viewport now and the rows simply fill it. */
.modpack-showcase__wall {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Fades the block into the page top and bottom, so it looks like a window
     onto something larger rather than a band with two hard edges. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.modpack-showcase__track {
  display: flex;
  /* Not the default `stretch`: stretching sets an explicit cross-size on each
     tile, which overrides its aspect-ratio and squashes the squares. */
  align-items: center;
  /* Matches the wall's row gap. A 20px gutter between 84px tiles was
     mostly background — the grid has to read as packed. */
  gap: var(--space-2);
  width: max-content;
  animation: modpack-scroll 42s linear infinite;
}
.modpack-showcase__row--b .modpack-showcase__track {
  animation-direction: reverse;
}

/* Five durations on a cycle rather than one rule per row. At a single speed
   the whole wall slides as a slab and reads as one wide element; staggered,
   and with the cycle length (5) coprime to nothing in particular, adjacent
   rows drift apart instead of marching. Works for any row count. */
.modpack-showcase__row:nth-child(5n+1) .modpack-showcase__track { animation-duration: 92s; }
.modpack-showcase__row:nth-child(5n+2) .modpack-showcase__track { animation-duration: 74s; }
.modpack-showcase__row:nth-child(5n+3) .modpack-showcase__track { animation-duration: 108s; }
.modpack-showcase__row:nth-child(5n+4) .modpack-showcase__track { animation-duration: 66s; }
.modpack-showcase__row:nth-child(5n+5) .modpack-showcase__track { animation-duration: 85s; }

@keyframes modpack-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Square. Modpack key art is square everywhere it comes from (CurseForge, FTB,
   Modrinth all serve 1:1), so a 280×170 tile would letterbox real thumbnails
   the moment these stop being flat colour. */
/* 84px. The section exists to make a five-figure catalogue look like one, and
   that is purely a function of how many tiles are on screen at once. */
.modpack-tile {
  flex: 0 0 auto;
  inline-size: 84px;
  aspect-ratio: 1 / 1;
  /* One surface for every tile — the six inline tints are gone. */
  background-color: var(--surface-raised);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Real key art, downloaded to our own origin by scripts/sync-modpacks.mjs.
   The tile carries no label: pack names run from "RLCraft" to "DeceasedCraft -
   Urban Zombie Apocalypse", and at 84px a label truncates mid-word — which is
   what produced "BETTER INECRAFT" and "PROMINENC". The name is the img's alt
   and the tile's title instead, so it is readable to a screen reader and on
   hover, and can never be clipped. */
.modpack-tile__logo {
  /* Fills the tile. Every source serves a square logo, so cover crops nothing
     in practice and guarantees a uniform grid even if one is slightly off. */
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .modpack-showcase__track {
    animation: none;
  }
}

@media (max-width: 768px) {
  .modpack-showcase {
    /* One responsive step for every section: --space-16 → --space-12. */
    padding: var(--space-12) 0;
  }
  .modpack-tile {
    /* Width only — an explicit height here would override aspect-ratio and
       un-square the tile. */
    inline-size: 60px;
  }

}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/hardware-locations.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────
   HARDWARE & LOCATIONS PAGE
──────────────────────────────────────────── */

.hl-section-title {
  /* Section-heading step, identical across every section (--display-2 curve). */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--content-strong);
  text-align: center;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}
.hl-section-subtitle {
  /* Shared section-subtitle spec — identical in every section. */
  max-inline-size: 60ch;
  margin: 0 auto var(--space-10);
  color: var(--content-secondary);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
  text-align: center;
}
.hl-section-title--left,
.hl-section-subtitle--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* ── Hero ── */
.hl-hero {
  /* One section rhythm, from the space scale. */
  padding: var(--space-16) 0;
}
.hl-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.hl-hero__text {
  flex: 1 1 420px;
}
.hl-hero__text h1 {
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--content-strong);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}
.hl-hero__subtitle {
  /* Shared section-subtitle spec — identical in every section. */
  font-size: var(--text-lg);
  color: var(--content-secondary);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
  max-inline-size: 60ch;
  margin: 0 0 var(--space-7);
}
.hl-hero__buttons {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
/* Color/radius/motion now come from .ui-btn (src/components/ui/ui.css). */

.hl-hero__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.hl-hero__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.hl-hero__feature-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--accent-500);
}
.hl-hero__feature-icon svg {
  width: 100%;
  height: 100%;
}
.hl-hero__features strong {
  display: block;
  color: var(--content-strong);
  font-size: var(--text-lg);
  font-weight: 700;
}
.hl-hero__feature-text {
  display: block;
  color: var(--content-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: 1.5;
}

.hl-hero__graphic {
  flex: 1 1 320px;
  max-width: 380px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.hl-hero__icon-tile {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-500);
}
.hl-hero__icon-tile:nth-child(4n+1) { color: var(--status-success-base); }
.hl-hero__icon-tile:nth-child(4n+2) { color: var(--status-warning-base); }
.hl-hero__icon-tile:nth-child(4n+3) { color: var(--accent-500); }
.hl-hero__icon-tile svg {
  width: 40%;
  height: 40%;
}

/* ── Worldwide map ── */
.hl-worldwide {
  padding: var(--space-16) 0;
}
.hl-worldwide__body {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  flex-wrap: wrap;
}
.hl-worldwide__map {
  flex: 2 1 500px;
  position: relative;
}
/* map-only variant (homepage): full-width map, centred, no side panel */
.hl-worldwide--full .hl-worldwide__map {
  flex: 1 1 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* ── Pin clusters (map-only mode, crowded regions on small maps) ── */
.hl-map-pin.is-clustered {
  display: none;
}
.hl-map-pin__dot.hl-map-cluster__dot {
  /* count badge: larger circle with the number of merged locations */
  inset: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--content-strong);
  line-height: 1;
}
.hl-region-col.is-flash {
  animation: hlColFlash 1.6s ease;
}
@keyframes hlColFlash {
  0%, 35% { box-shadow: 0 0 0 2px var(--status-success-base); }
  100%    { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0); }
}

/* map-only variant: all regions at once below the map, one column per region */
/* auto-fit with a real minimum, not `repeat(4, minmax(0, 1fr))`.
   A 0 minimum lets each column shrink below its content, so at narrow widths
   the four regions squeezed down until only the flag fitted and the city name
   and ping were pushed out. Columns now wrap instead of collapsing, which also
   makes the two breakpoints below unnecessary. */
.hl-region-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
  align-items: start;
}
.hl-region-columns .hl-location-panel {
  flex: none;
}
/* No breakpoints needed — auto-fit above handles every width. */

/* ── Map viewport: clips the zoomed map ── */
.hl-map-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.hl-map-scale {
  --map-zoom: 1;
  position: relative;
  transform-origin: 0 0;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hl-map-scale { transition: none; }
}
.hl-map-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--accent-500);
  opacity: 0.9;
}

/* ── Map pins ── */
.hl-map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hl-map-pin {
  /* positioning shell — counter-scaled so dots keep their size while the map zooms */
  position: absolute;
  transform: translate(-50%, -50%) scale(calc(1 / var(--map-zoom, 1)));
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .hl-map-pin { transition: opacity 0.5s ease; }
}
.hl-map-pin.is-dimmed {
  opacity: 0.35;
}
.hl-map-pin__dot {
  position: absolute;
  inset: 7px;
  border-radius: var(--radius-full);
  background: var(--status-success-base);
  box-shadow: 0 0 0 4px rgb(var(--status-success-base-rgb) / 0.25), 0 0 10px rgb(var(--status-success-base-rgb) / 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hl-map-pin__dot::after {
  /* soft pulsing halo */
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-full);
  background: rgb(var(--status-success-base-rgb) / 0.35);
  animation: hlPinPulse 2s ease-out infinite;
}
@keyframes hlPinPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .hl-map-pin__dot::after { animation: none; }
}
.hl-map-pin:hover .hl-map-pin__dot,
.hl-map-pin.is-active .hl-map-pin__dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 5px rgb(var(--status-success-base-rgb) / 0.3), 0 0 14px rgb(var(--status-success-base-rgb) / 0.8);
}

/* ── Location popup on a pin click ── */
.hl-map-popup {
  position: absolute;
  transform: translate(-50%, calc(-100% - 16px));
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-4);
  box-shadow: var(--shadow-soft-lg);
  white-space: nowrap;
  z-index: 5;
  pointer-events: auto;
}
.hl-map-popup[hidden] {
  display: none;
}
.hl-map-popup::after {
  /* little pointer triangle toward the pin (offset keeps aim when clamped) */
  content: "";
  position: absolute;
  left: calc(50% + var(--hl-arrow-dx, 0px));
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--surface-raised);
}
/* flipped variant: popup sits below the pin when it would clip the top edge */
.hl-map-popup--below {
  transform: translate(-50%, 16px);
}
.hl-map-popup--below::after {
  bottom: auto;
  top: -6px;
}
.hl-map-popup__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.hl-map-popup__city {
  color: var(--content-strong);
  font-size: var(--text-md);
  font-weight: 700;
}
.hl-map-popup__region {
  color: var(--content-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
}
.hl-map-popup__ping {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--status-success-base);
  font-size: var(--text-sm);
  font-weight: 700;
  padding-left: var(--space-3);
  margin-left: var(--space-0-5);
  border-left: 1px solid var(--border-default);
}

/* Ported from the design system's .region. */
.hl-location-panel {
  flex: 1 1 340px;
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.hl-location-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-3);
}
/* 40x40 like every other icon box on the page (was 36). */
.hl-location-panel__globe {
  flex-shrink: 0;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--content-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hl-location-panel__globe svg {
  width: 20px;
  height: 20px;
}
.hl-location-panel__heading {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}
.hl-location-panel__name {
  color: var(--content-strong);
  font-weight: 700;
  font-size: var(--text-xl);
}
.hl-location-panel__count {
  color: var(--content-tertiary);
  font-weight: 600;
  font-size: var(--text-sm);
}
.hl-location-panel__nav {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.hl-location-panel__pad {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--surface-raised);
  color: var(--content-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hl-location-panel__pad:hover {
  background: var(--surface-overlay);
}
.hl-location-panel__pad svg {
  width: 16px;
  height: 16px;
}

.hl-location-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hl-location-panel__list[hidden] {
  display: none;
}
/* Ported from the design system's .region__row. The 2px transparent border was
   only reserving space for the accent outline on the recommended row; with that
   gone it is dead weight. Fill comes from the surface ramp rather than a
   3%-white wash. */
.hl-location-panel__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--surface-raised);
}
/* Ported from .region__row--recommended: one step up the surface ramp, and the
   "Recommended" label carries the meaning. Was an accent outline forced with
   two !importants — a perimeter stroke, and the only outlined element on the
   page. */
/* Specificity matched to `.hl-location-panel__list li` deliberately. The
   original beat that selector with !important; raising the selector instead is
   what the layered system does for free once legacy is retired. */
.hl-location-panel__list li.hl-location-row--recommended {
  background-color: var(--surface-overlay);
}
.hl-location-row__text {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}
.hl-location-row__badge {
  color: var(--content-accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-0-5);
}
.hl-location-row__city {
  color: var(--content-strong);
  font-size: var(--text-lg);
  font-weight: 700;
}
.hl-location-panel__ping {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--status-success-text);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  flex-shrink: 0;
}
.hl-location-panel__signal {
  color: var(--status-success-base);
}
.hl-location-panel__refresh {
  flex-shrink: 0;
  color: var(--content-tertiary);
}
.hl-location-panel__refresh svg {
  width: 16px;
  height: 16px;
}

/* ── Hardware grid ── */
.hl-hardware {
  padding: var(--space-16) 0;
}
.hl-hardware__filters {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
.hl-filter {
  flex: 1 1 200px;
  max-width: 260px;
}
.hl-hardware__empty {
  color: var(--content-secondary);
  font-weight: var(--font-normal);
  text-align: center;
  padding: var(--space-8) 0;
}
.hl-hardware__cards {
  display: grid;
  /* auto-fill (not auto-fit): keep empty tracks so a single matching card
     stays at its column width instead of stretching across the whole row. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}
.hl-hw-card {
  position: relative;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5);
  border: 2px solid transparent;
}
.hl-hw-card--recommended {
  background-color: var(--surface-overlay);
}
.hl-hw-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-500);
  color: var(--content-strong);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.hl-hw-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  margin-bottom: var(--space-2-5);
}
.hl-hw-card__title {
  flex: 1 1;
  color: var(--content-strong);
  font-weight: 700;
  font-size: var(--text-lg);
}
.hl-hw-card__ping {
  color: var(--status-success-base);
  font-size: var(--text-sm);
  font-weight: 700;
}
.hl-hw-card__perks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-bottom: var(--space-4);
}
.hl-hw-card__perk {
  background: rgba(112,110,241,0.15);
  color: var(--content-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
}
.hl-hw-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2-5) var(--space-4);
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-3);
}
.hl-hw-card__specs div {
  color: var(--content-strong);
  font-size: var(--text-sm);
  font-weight: 600;
}
.hl-hw-card__label {
  display: block;
  color: var(--content-tertiary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-0-5);
}

/* ── Comparison ── */
.hl-comparison {
  padding: var(--space-16) 0;
  background: var(--surface-raised);
}
.hl-comparison__inner {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  flex-wrap: wrap;
}
.hl-comparison__text {
  flex: 1 1 360px;
}
.hl-comparison__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hl-comparison__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  color: var(--content-secondary);
  font-size: var(--text-md);
  font-weight: var(--font-normal);
}
.hl-comparison__points svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--accent-500);
  margin-top: 1px;
}

.hl-comparison__chart {
  flex: 1 1 360px;
  background: var(--surface-base);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6);
}
.hl-chart-legend {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.hl-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--content-tertiary);
  font-size: var(--text-sm);
  font-weight: 600;
}
.hl-chart-swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  display: inline-block;
}
.hl-chart-swatch--ours { background: var(--accent-500); }
.hl-chart-swatch--avg { background: var(--content-tertiary); }

.hl-chart-row {
  margin-bottom: var(--space-5);
}
.hl-chart-row__label {
  display: block;
  color: var(--content-strong);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.hl-chart-bar {
  height: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  margin-bottom: var(--space-1-5);
  overflow: hidden;
}
.hl-chart-bar__fill {
  height: 100%;
  border-radius: var(--radius-sm);
}
.hl-chart-bar__fill--ours { background: var(--accent-500); }
.hl-chart-bar__fill--avg { background: var(--content-tertiary); }

/* ── Reviews ── */
.hl-reviews {
  padding: var(--space-16) 0;
}
.hl-reviews__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.hl-review-card {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.hl-review-card__stars {
  color: var(--status-warning-base);
  font-size: var(--text-lg);
  letter-spacing: 2px;
  margin-bottom: var(--space-2-5);
}
.hl-review-card__quote {
  color: var(--content-secondary);
  font-size: var(--text-md);
  font-weight: var(--font-normal);
  line-height: var(--leading-lg);
  margin: 0 0 var(--space-3);
}
.hl-review-card__name {
  color: var(--content-tertiary);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hl-hero__inner,
  .hl-comparison__inner {
    flex-direction: column;
  }
  .hl-hero__graphic {
    max-width: 100%;
  }
  .hl-worldwide {
    /* One responsive step for every section: --space-16 → --space-12. */
    padding: var(--space-12) 0;
  }
  .hl-worldwide__body {
    flex-direction: column;
    gap: var(--space-5);
  }
  .hl-worldwide__map,
  .hl-location-panel {
    flex: 1 1 auto;
    width: 100%;
  }
  /* smaller, softer pins on small maps — 12px dots with big glows merge into
     blobs at phone size; keep a 28px touch target around an 8px dot */
  .hl-map-pin {
    width: 28px;
    height: 28px;
  }
  .hl-map-pin__dot {
    inset: 10px;
    box-shadow: 0 0 0 2px rgb(var(--status-success-base-rgb) / 0.2), 0 0 5px rgb(var(--status-success-base-rgb) / 0.45);
  }
  .hl-map-pin__dot::after {
    inset: -3px;
    background: rgb(var(--status-success-base-rgb) / 0.25);
  }
  .hl-map-pin:hover .hl-map-pin__dot,
  .hl-map-pin.is-active .hl-map-pin__dot {
    box-shadow: 0 0 0 3px rgb(var(--status-success-base-rgb) / 0.25), 0 0 8px rgb(var(--status-success-base-rgb) / 0.6);
  }
  .hl-map-popup {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .hl-map-popup__city { font-size: var(--text-sm); }
  .hl-map-popup__ping { font-size: var(--text-sm); padding-left: var(--space-2); }
}

@media (max-width: 560px) {
  /* homepage map-only variant: bleed edge-to-edge for extra map size */
  .hl-worldwide--full .hl-worldwide__map {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    flex-basis: auto;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/subdomain-creator.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────
   SUBDOMAIN CREATOR PAGE
──────────────────────────────────────────── */

.sc-hero {
  /* One section rhythm, from the space scale. */
  padding: var(--space-16) 0;
  text-align: center;
}
.sc-hero__title {
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--content-strong);
  margin: 0 0 var(--space-4);
}
.sc-hero__subtitle {
  margin: 0 auto;
  /* Shared section-subtitle spec — identical in every section. */
  font-size: var(--text-lg);
  color: var(--content-secondary);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
  max-inline-size: 60ch;
}

.sc-tool {
  padding: var(--space-5) 0 var(--space-16);
}
.sc-tool__grid {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  flex-wrap: wrap;
}

.sc-form {
  flex: 2 1 480px;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.sc-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sc-field-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.sc-field label {
  color: var(--content-strong);
  font-size: var(--text-sm);
  font-weight: 700;
}
.sc-required {
  color: var(--status-danger-base);
  margin-left: var(--space-0-5);
}

.sc-field input {
  background: var(--surface-overlay);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--content-strong);
  font-size: var(--text-md);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}
.sc-field input::placeholder {
  color: var(--content-tertiary);
}
.sc-field input:focus {
  outline: none;

  box-shadow: var(--shadow-focus);
}

.sc-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  color: var(--content-tertiary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: not-allowed;
}
.sc-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sc-checkbox__box {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  border: none;
  flex-shrink: 0;
}

.sc-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--accent-500);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.sc-preview__label {
  display: block;
  color: var(--content-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}
.sc-preview__value {
  display: block;
  color: var(--content-strong);
  font-size: var(--text-xl);
  font-weight: 900;
  word-break: break-all;
}
/* Color/radius/motion now come from .ui-btn (src/components/ui/ui.css) —
   this just keeps it from shrinking in the flex row. */
.sc-btn-create {
  flex-shrink: 0;
}

.sc-status {
  margin: 0;
  text-align: center;
  color: var(--content-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.sc-benefits {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sc-benefit-card {
  display: flex;
  gap: var(--space-4);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.sc-benefit-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(112,110,241,0.15);
  color: var(--content-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-benefit-card__icon svg {
  width: 20px;
  height: 20px;
}
.sc-benefit-card__title {
  color: var(--content-strong);
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.sc-benefit-card__text {
  color: var(--content-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .sc-preview {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .sc-btn-create {
    width: 100%;
  }
}

/* ── Select panel ─────────────────────────────────────────────────
   .om-select__panel is position:fixed with no top/left — the order modal
   computes those in JS so the list can flip above the trigger near the
   viewport edge. This tool reuses the class without that JS, so the panel
   fell back to its static position and opened over the Create button
   instead of under its own select. Anchored to the wrapper here, which is
   already position:relative. */
.sc-select .om-select__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto;
}

.sc-captcha-row {
  margin-top: var(--space-2);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/gift-cards.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
/* ── Gift Cards page ─────────────────────────────────────────────── */

.giftcards-hero { padding: var(--space-16) 0; }
.giftcards-hero__inner {
  max-width: 1400px; margin: 0 auto; padding: 0 var(--space-6);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center;
}
.giftcards-badge {
  display: inline-block; padding: var(--space-1-5) var(--space-4); border-radius: var(--radius-full);
  background: var(--accent-tint); color: var(--accent); font-size: var(--text-xs); font-weight: var(--fw-label);
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-4);
}
.giftcards-hero__title {
  /* Page-title step, identical on every page. */
  font-size: clamp(2rem, 4vw + .5rem, 3rem); font-weight: var(--fw-heading); line-height: 1.1; color: var(--content-strong); margin: 0 0 var(--space-4);
}
.giftcards-hero__text { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--font-medium); color: var(--content-secondary); max-width: 480px; margin: 0 0 var(--space-7); }
.giftcards-hero__buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Color/radius/motion now come from .ui-btn (src/components/ui/ui.css) — this
   just sets the gift-cards-specific min-width and mobile stacking. */
.giftcards-hero__buttons .ui-btn,
.giftcards-notify-btn {
  min-width: 160px;
}
@media (max-width: 560px) {
  .giftcards-hero__buttons { flex-direction: column; }
  .giftcards-hero__buttons .ui-btn { width: 100%; }
}

.giftcards-hero__art { position: relative; height: 280px; }
.giftcard-visual {
  position: absolute; width: 300px; height: 180px; border-radius: var(--radius-xl);
  padding: var(--space-5); display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-elevated); color: var(--content-strong);
}
.giftcard-visual--blue {
  background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
  top: 0; right: 0; transform: rotate(4deg); z-index: 2;
}
.giftcard-visual--pink {
  background: linear-gradient(135deg, var(--status-danger-base) 0%, var(--status-danger-base) 100%);
  top: 60px; right: 140px; transform: rotate(-8deg); z-index: 1;
}
.giftcard-visual__brand { font-size: var(--text-md); font-weight: var(--fw-label); opacity: 0.9; }
.giftcard-visual__amount { font-size: var(--text-3xl); font-weight: var(--fw-heading); }

.giftcards-section-title {
  /* Section-heading step, identical in every section. Was --text-3xl, a
     fixed step that rendered 12px smaller than every other section head. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  line-height: 1.1;
  font-weight: var(--fw-heading); color: var(--content-strong); text-align: center; margin: 0 0 var(--space-2);
}
.giftcards-section-title--left { text-align: left; }
/* Shared section-subtitle spec — identical in every section. */
.giftcards-section-sub {
  text-align: center; color: var(--content-secondary);
  font-size: var(--text-lg); line-height: var(--leading-lg);
  font-weight: var(--font-medium); max-inline-size: 60ch;
  margin: 0 auto var(--space-10);
}

.giftcards-steps { padding: var(--space-16) 0; }
.giftcards-steps__grid {
  max-width: 1400px; margin: 0 auto; padding: 0 var(--space-6);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
}
.giftcards-step {
  background: var(--panel-bg-1); border: var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5); text-align: center;
}
.giftcards-step__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-tint);
  color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.giftcards-step h3 { font-size: var(--text-lg); font-weight: var(--fw-label); color: var(--content-strong); margin: 0 0 var(--space-1-5); }
.giftcards-step p { font-size: var(--text-sm); color: var(--content-secondary); line-height: 1.5; margin: 0; }

.giftcards-customize { padding: var(--space-16) 0; }
.giftcards-customize__grid {
  max-width: 1400px; margin: 0 auto; padding: 0 var(--space-6);
  display: grid; grid-template-columns: 1fr 0.8fr; gap: var(--space-10); align-items: start;
}
.giftcards-customize__form {
  background: var(--panel-bg-1); border: var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-8);
}
.giftcards-customize__label {
  display: block; font-size: var(--text-xs); font-weight: var(--fw-label); color: var(--content-tertiary);
  text-transform: uppercase; letter-spacing: 0.04em; margin: var(--space-5) 0 var(--space-2-5);
}
.giftcards-customize__label:first-child { margin-top: 0; }
.giftcards-amounts { display: flex; gap: var(--space-2-5); flex-wrap: wrap; }
.giftcards-amount {
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: var(--border-subtle);
  background: var(--panel-bg-2); color: var(--content-strong); font-size: var(--text-lg); font-weight: var(--fw-label);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.giftcards-amount:hover { background: var(--panel-bg-3); }
.giftcards-amount.is-active { background: var(--accent); border-color: var(--accent); }

.giftcards-textarea, .giftcards-input {
  width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: none; background: var(--panel-bg-2); color: var(--content-strong); font-size: var(--text-md);
  font-family: inherit; resize: vertical; outline: none;
}
.giftcards-textarea:focus, .giftcards-input:focus { border: var(--border-hover); }
.giftcards-notify-btn { width: 100%; margin-top: var(--space-6); justify-content: center; }
.giftcards-status { font-size: var(--text-sm); margin-top: var(--space-2-5); min-height: 18px; }

.giftcards-preview {
  position: sticky; top: 100px; display: flex; align-items: center; justify-content: center;
}
.giftcards-preview__card {
  width: 100%; max-width: 320px; aspect-ratio: 1.6; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
  box-shadow: var(--shadow-elevated); padding: var(--space-6); color: var(--content-strong);
  display: flex; flex-direction: column; justify-content: space-between;
}
.giftcards-preview__brand { display: flex; align-items: center; }
.giftcards-preview__logo { height: 22px; width: auto; }
.giftcards-preview__amount { /* Section-heading step, identical in every section. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem); font-weight: var(--fw-heading); }
.giftcards-preview__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }

.giftcards-perfect { padding: var(--space-16) 0; }
.giftcards-perfect__grid {
  max-width: 1400px; margin: 0 auto; padding: 0 var(--space-6);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center;
}
.giftcards-perfect__images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.giftcards-perfect__img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg);
  border: none;
}
.giftcards-perfect__copy p { font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--content-secondary); margin: var(--space-4) 0 var(--space-7); }

@media (max-width: 1050px) {
  .giftcards-hero__inner, .giftcards-customize__grid, .giftcards-perfect__grid { grid-template-columns: 1fr; }
  .giftcards-steps__grid { grid-template-columns: repeat(2, 1fr); }
  .giftcards-hero__art { height: 220px; margin-top: var(--space-5); }
  .giftcard-visual { width: 240px; height: 150px; }
  .giftcard-visual--pink { right: 60px; top: 40px; }
  .giftcards-preview { position: static; }
  .giftcards-section-title--left { text-align: center; }
  .giftcards-perfect__copy { text-align: center; }
}

@media (max-width: 560px) {
  .giftcards-hero { padding: var(--space-12) 0; }
  /* No override needed — the title clamps. */
  .giftcards-steps__grid { grid-template-columns: 1fr; }
  .giftcards-perfect__images { grid-template-columns: 1fr 1fr; }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/modpack-server-hosting.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────────────────
   MODPACK SERVER HOSTING PAGE
───────────────────────────────────────────────────────── */

.mp-hero {
  text-align: center;
  /* One section rhythm, from the space scale. */
  padding: var(--space-16) var(--space-4);
}

.mp-hero__title {
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  font-weight: var(--fw-heading, 900);
  color: var(--content-strong);
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mp-hero__subtitle {
  /* Shared section-subtitle spec — identical in every section. */
  font-size: var(--text-lg);
  color: var(--content-secondary);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
  max-inline-size: 60ch;
  margin: 0 auto;
}

.mp-grid-section {
  /* One section rhythm, from the space scale. Was a bespoke fluid clamp
     with a different curve from every other section. */
  padding: 0 var(--space-4) var(--space-16);
}

.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}

.mp-card {
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.mp-card:hover {
  background-color: var(--surface-hover);
}

.mp-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--panel-bg-2, var(--surface-overlay));
}

.mp-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-card__platform {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: var(--pure-white);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
}

.mp-card__body {
  padding: var(--space-5) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  flex: 1 1;
}

.mp-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--content-strong);
  margin: 0;
}

.mp-card__author {
  font-size: var(--text-xs);
  color: var(--content-secondary);
  margin: 0 0 var(--space-1);
}

.mp-card__desc {
  font-size: var(--text-sm);
  color: var(--content-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
  flex: 1 1;
}

/* Color/radius/motion now come from .ui-btn (src/components/ui/ui.css) — this
   just re-adds the gap the icon+label layout expects. */
.mp-card__btn {
  gap: var(--space-1-5);
}

@media (max-width: 480px) {
  .mp-grid { grid-template-columns: 1fr; }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/panel-page.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────────────────
   /panel PAGE — hero + highlights
   (panel-details.css already styles the feature tabs section,
   reused as-is on this page for a single source of truth)
───────────────────────────────────────────────────────── */

.panel-hero {
  /* One section rhythm, from the space scale. */
  padding: var(--space-16) var(--space-4) 0;
  text-align: center;
}

.panel-hero__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.panel-hero__badge {
  display: inline-flex;
  align-items: center;
  background: var(--accent-tint, rgba(112,110,241,0.12));
  color: var(--accent, var(--accent-500));
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-1-5) var(--space-4);
  border-radius: var(--radius-full);
}

.panel-hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-weight: var(--fw-heading, 900);
  font-size: clamp(2rem, 4vw + .5rem, 3rem);
  line-height: 1.15;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--content-strong);
}
.panel-hero__title-accent { color: var(--accent, var(--accent-500)); }

.panel-hero__subtitle {
  margin: 0;
  /* Shared section-subtitle spec — identical in every section. */
  font-size: var(--text-lg);
  color: var(--content-secondary);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
  max-inline-size: 60ch;
}

.panel-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-1-5);
}

/* Color/radius/motion now come from .ui-btn (src/components/ui/ui.css). */

.panel-hero__visual {
  width: 100%;
  max-width: 1100px;
  margin-top: var(--space-6);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}
.panel-hero__visual img {
  width: 100%;
  /* CMS-supplied source with no width/height attributes — reserve the box so
     the hero does not collapse to nothing and then shove the page down when
     the screenshot lands. */
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ── Highlights row ── */
.panel-highlights {
  /* One section rhythm, from the space scale. */
  padding: var(--space-16) var(--space-4);
}

.panel-highlights__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.panel-highlight {
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: left;
}

.panel-highlight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-tint, rgba(112,110,241,0.12));
  color: var(--accent, var(--accent-500));
  margin-bottom: var(--space-4);
}
.panel-highlight__icon svg { width: 20px; height: 20px; }

.panel-highlight__title {
  margin: 0 0 var(--space-1-5);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--content-strong);
}

.panel-highlight__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--content-secondary);
  line-height: 1.55;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/home-resources.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
/* ────────────────────────────────────────────────────────
   HOME RESOURCES — cross-link tiles + panel promo banner
───────────────────────────────────────────────────────── */

.home-resources {
  padding: var(--space-16) var(--space-5);
  text-align: center;
}

.home-resources__heading {
  margin: 0 0 var(--space-2-5);
  /* Section-heading step, identical across every section. Matches the design
     system's --display-2 curve; becomes that token at migration. */
  font-size: clamp(1.75rem, 5vw + .5rem, 2.5rem);
  font-weight: var(--fw-heading, 900);
  color: var(--content-strong);
  text-transform: uppercase;
}

.home-resources__subtitle {
  /* Shared section-subtitle spec — identical in every section. */
  margin: 0 auto var(--space-10);
  max-inline-size: 60ch;
  color: var(--content-secondary);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-lg);
}

/*
 * Three explicit columns, not auto-fit.
 *
 * The promo panel is a child of this same grid spanning `1 / -1`, and that is
 * what broke auto-fit: auto-fit only collapses tracks that are *empty*, and the
 * promo occupies every track. At container width the grid resolved to four
 * columns, so the three tiles filled three of them and stopped short while the
 * promo below ran the full width — the mismatch this rule exists to fix.
 *
 * The count is fixed because the tiles are (knowledgebase, FAQ, subdomain
 * creator). Add a fourth and this needs updating; auto-fit cannot do it while
 * the promo shares the grid.
 */
.home-resources__grid {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: left;
}

@media (max-width: 900px) {
  .home-resources__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .home-resources__grid { grid-template-columns: 1fr; }
}

/* Horizontal rows, not squat centred tiles. A row reads left-to-right like the
   link it is, fits the label without wrapping, and leaves no dead space above
   and below a centred icon. */
.home-resources__tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--surface-raised);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
/* Ground shift, no lift. Chrome reacting to a cursor by jumping toward it is
   motion spent on the wrong thing — and three tiles doing it at once is the
   effect the audit flagged. */
.home-resources__tile:hover {
  background-color: var(--surface-hover);
}
.home-resources__tile:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--surface-canvas),
    0 0 0 4px var(--accent-500);
}

/* One icon treatment. The four tiles previously used danger / accent / warning
   / success as decoration, so "Knowledgebase" was painted error-red. */
.home-resources__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  border-radius: var(--radius-md);
  color: var(--content-accent);
  background-color: var(--accent-tint);
}
.home-resources__tile-icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.home-resources__tile-text {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  color: var(--content-strong);
}

.home-resources__tile-arrow {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  margin-inline-start: auto;
  color: var(--content-tertiary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.home-resources__tile:hover .home-resources__tile-arrow {
  color: var(--content-accent);
}

/* Promo banner spans the full width under the 4 tiles */
.home-resources__promo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  /* Flat accent. The gradient added a second colour to the section for no
     informational reason, and its darker end sat behind the body copy. */
  background-color: var(--accent-500);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-decoration: none;
  overflow: hidden;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
/* Same fill and hover as .btn--primary: --accent-500 → --accent-600. The banner
   is a link, so it should darken exactly like every other primary action rather
   than inventing its own brightness filter. No lift — translating the widest
   element in the section pulls the eye off the copy inside it. */
.home-resources__promo:hover { background-color: var(--accent-600); }
.home-resources__promo:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.home-resources__promo-copy { max-width: 480px; }

.home-resources__promo-brand {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--content-strong);
  margin-bottom: var(--space-2);
}

.home-resources__promo-copy h3 {
  margin: 0 0 var(--space-2-5);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--pure-white);
  line-height: 1.25;
}

.home-resources__promo-copy p {
  margin: 0;
  font-size: var(--text-md);
  color: var(--content-secondary);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
}

.home-resources__promo-visual {
  flex: 0 0 auto;
  width: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  display: none;
}
.home-resources__promo-visual img {
  width: 100%;
  /* Reserve the box before the screenshot loads — see the note on
     .panel-hero__visual img. */
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  display: block;
}

@media (min-width: 720px) {
  .home-resources__promo-visual { display: block; }
}

/* The tile grid's own breakpoints live with its rule above, now that the
   column count is explicit rather than auto-fit. */

@media (max-width: 560px) {
  .home-resources__promo {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .home-resources__promo-copy { max-width: none; }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/legacy/consent.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/* ── Cookie consent ───────────────────────────────────────────────────
   Replaces Cookiebot's own banner CSS. Every value is a shared token: the
   surface ramp for ground, radius by role (modal xl > card lg > control md),
   the type scale, and the standard focus ring. No perimeter strokes.
   ──────────────────────────────────────────────────────────────────── */

.cc-banner {
  position: fixed;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: min(28rem, calc(100vw - var(--space-8)));
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-elevated);
}

.cc-banner--bottom-left  { inset-block-end: var(--space-5); inset-inline-start: var(--space-5); }
.cc-banner--bottom-right { inset-block-end: var(--space-5); inset-inline-end: var(--space-5); }
.cc-banner--bottom {
  inset-block-end: var(--space-5);
  inset-inline-start: 50%;
  transform: translateX(-50%);
}
.cc-banner--center {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.cc-banner__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--content-strong);
}

/* Reading copy: normal weight on the secondary step. */
.cc-banner__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}

.cc-link {
  color: var(--content-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc-banner__actions,
.cc-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cc-banner__actions { justify-content: flex-end; }
.cc-modal__actions  { justify-content: flex-end; margin-top: var(--space-5); }

/* ── Buttons ── */
.cc-btn {
  flex: 0 0 auto;
  padding: var(--space-2-5) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.cc-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.cc-btn--primary   { background: var(--accent-500); color: var(--pure-white); }
.cc-btn--primary:hover { background: var(--accent-600, var(--accent-500)); }

.cc-btn--secondary { background: var(--surface-overlay); color: var(--content-strong); }
.cc-btn--secondary:hover { background-color: var(--surface-hover); }

.cc-btn--ghost     { background: transparent; color: var(--content-secondary); }
.cc-btn--ghost:hover { background-color: var(--surface-hover); color: var(--content-strong); }

/* ── Preferences modal ── */
.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 5001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgb(var(--surface-canvas-rgb) / 0.78);
}

.cc-modal {
  inline-size: min(34rem, 100%);
  max-block-size: 85vh;
  overflow-y: auto;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-elevated);
}

.cc-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.cc-modal__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--content-strong);
}

.cc-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--content-tertiary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.cc-close:hover { background-color: var(--surface-hover); color: var(--content-strong); }
.cc-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── Categories ── */
.cc-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cc-cat {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-overlay);
}

.cc-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.cc-cat__name {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--content-strong);
}

.cc-cat__locked {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--content-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cc-cat__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-lg);
  font-weight: var(--font-normal);
  color: var(--content-secondary);
}

/* ── Toggle ── */
.cc-switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.cc-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.cc-switch__track {
  inline-size: 2.75rem;
  block-size: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-active);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.cc-switch__track::after {
  content: "";
  display: block;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0.1875rem;
  border-radius: var(--radius-full);
  background: var(--pure-white);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.cc-switch input:checked + .cc-switch__track { background: var(--accent-500); }
.cc-switch input:checked + .cc-switch__track::after { transform: translateX(1.25rem); }
.cc-switch input:focus-visible + .cc-switch__track { box-shadow: var(--shadow-focus); }

/* ── Reopen control ── */
.cc-fab {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-start: var(--space-5);
  z-index: 4999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  color: var(--content-tertiary);
  box-shadow: var(--shadow-soft-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.cc-fab:hover { background-color: var(--surface-hover); color: var(--content-strong); }
.cc-fab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.cc-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The banner sits bottom-left; keep it clear of the reopen control and of
   the live-chat launcher in the opposite corner. */
@media (max-width: 560px) {
  .cc-banner {
    inset-inline: var(--space-4);
    inline-size: auto;
    transform: none;
  }
  .cc-banner__actions { justify-content: stretch; }
  .cc-banner__actions .cc-btn { flex: 1 1 auto; }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/styles/bundle.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
/*
 * Ported 1:1 from layouts/_default/baseof.html's `$styles := slice ...`
 * concat order in the Hugo repo. Order matters: these are global,
 * un-namespaced selectors relying on cascade order, not specificity.
 * Do not reorder without checking baseof.html first.
 *
 * ── Breakpoints ────────────────────────────────────────────────────────────
 * There is no breakpoint token, because CSS custom properties cannot be used
 * inside a media query — `@media (max-width: var(--bp-md))` silently does
 * nothing. The ladder is therefore a convention, enforced by reading, and
 * these are the eight values it is built from:
 *
 *     480   560   600   640   768   900   1024   1200
 *
 * Use one of those for new work. The files below also contain about nineteen
 * one-off widths (420, 500, 520, 576, 700, 720, 767, 804, 860, 980, 991, 992,
 * 1004, 1042, 1050, 1090, 1100, 1236, 1700) inherited from the Hugo port —
 * several of them are deliberately paired for non-overlap (767/768, 991/992),
 * so they cannot be rounded onto the ladder without checking each pair.
 * Migrate them opportunistically, with the page in front of you.
 */