*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #080d14;
    --bg2: #0d1520;
    --bg3: #111e2e;
    --border: rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.12);
    --accent: #3b9eff;
    --accent2: #00d4ff;
    --accent-solid: #0066cc;
    --text: #e8f0f8;
    --muted: #7a90a8;
    --card: #0f1c2c;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh;
  }

  .nav-links a.nav-active,
  .nav-links .nav-dropdown-toggle.nav-active {
    color: var(--text) !important;
  }

  .nav-links a.nav-active::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    margin-top: 2px;
  }

  /* .nav-dropdown-toggle is a flex item inside .nav-dropdown (see below), and
     a flex CONTAINER's own ::after is laid out as another flex item next to
     its content instead of a block-level line underneath — the plain
     display:block version above silently never rendered as an underline
     here. Positioning it absolutely, anchored to the toggle's own box
     (needs position:relative on .nav-dropdown-toggle itself, not just the
     parent .nav-dropdown, so it's sized to the label's width, not the whole
     dropdown row that now also includes Games' separate chevron button). */
  .nav-links .nav-dropdown-toggle.nav-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
  }

  section {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  section.visible {
    opacity: 1;
    transform: translateY(0);
  }

  section.hero {
    opacity: 1;
    transform: none;
  }

  /* On the 6 standalone product pages, this section IS the page's main
     content (no separate .hero above it to exempt) — without this, the
     whole page stays invisible until a scroll crosses the fade-in
     IntersectionObserver's 10% threshold, which on short mobile viewports
     can mean only the banner is visible until the user scrolls. Home's
     #why-us/#faq/#contact equivalents keep the scroll-reveal fade since
     they're genuinely below-the-fold there. */
  section#vps, section#vps-ssd, section#vps-nvme, section#minecraft, section#fivem, section#games,
  section#guides, section#help, section#wordpress, section#email,
  section#managed, section#faq,
  section#guide-vps, section#guide-minecraft, section#guide-fivem,
  section#guide-wordpress, section#guide-email, section#guide-managed {
    opacity: 1;
    transform: none;
    /* Real margin (not padding) — this section's own background-color
       starts at its top border-edge regardless of padding, so only a
       true margin actually clears the promo banner's box-shadow above it
       (nav.js-inserted pages only; a subtle sliver of the section's
       background was bleeding into the banner's shadow without this). */
    margin-top: 0.5rem;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
  }

  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 1.2rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(8, 13, 20, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
  }

  .logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .logo span { color: var(--accent); }

  .nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
  }

  .nav-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
  }

  .nav-links a:hover { color: var(--text); }

  /* display:flex lays out Games' <a> + its separate chevron <button> side by
     side (Help's single <button> trigger is unaffected — one flex item is a
     no-op layout-wise). Needed because a flex container turns its own ::after
     into a flex item instead of a block-level underline — see the dedicated
     .nav-dropdown-toggle.nav-active::after override further down. */
  .nav-dropdown { position: relative; display: flex; align-items: center; gap: 0.3rem; }

  .nav-dropdown-toggle {
    position: relative;
    background: none;
    border: none;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
  }

  .nav-dropdown-toggle:hover { color: var(--text); }

  /* Games-only: :hover alone is unreachable on touch and by keyboard, so its
     chevron is a separate focusable/tappable button next to the "Games" link
     rather than nested inside it (Help has no page of its own, so its whole
     trigger is already a button — no separate chevron needed there). */
  .nav-dropdown-chevron {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem;
    margin: -0.25rem;
    transition: color 0.2s;
  }

  .nav-dropdown-chevron:hover { color: var(--text); }

  .chevron {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    transition: transform 0.2s;
  }

  .nav-dropdown:hover .chevron,
  .nav-dropdown.open .chevron {
    transform: rotate(180deg);
  }

  .nav-dropdown-menu {
    display: none;
    position: absolute;
    /* top:100% with NO margin — the menu's box must touch the trigger's
       bottom edge with zero gap. A visible margin here used to leave a strip
       of dead space between the link and the menu that belongs to neither
       element's hover box; moving the mouse straight down through it broke
       :hover on .nav-dropdown and closed the menu before a click could ever
       land on an item inside it (2026-07-27 — Games' hover-only dropdown was
       effectively unusable because of this). Padding-top on the menu itself
       gives the same visual breathing room without creating that gap. */
    top: 100%;
    left: -0.75rem;
    padding-top: 0.85rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    min-width: 170px;
    list-style: none;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    z-index: 101;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
  }

  .nav-dropdown-menu a:hover { background: rgba(59,158,255,0.1); color: var(--text); }

  /* Submenu items are also display:flex (see .nav-dropdown-menu a above), so
     the shared .nav-links a.nav-active::after underline hits the same
     flex-turns-::after-into-a-flex-item bug already fixed for the dropdown
     toggle — rather than replicate that absolute-position hack inside a
     padded list item, use a persistent background tint instead (matches
     .page-sidebar-link.active's identical treatment elsewhere on these same
     grouped pages). */
  .nav-dropdown-menu a.nav-active { background: rgba(59,158,255,0.1); }

  .nav-item-icon {
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
  }

  .nav-cta {
    background: var(--accent-solid);
    color: #fff !important;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 500 !important;
    transition: opacity 0.2s !important;
  }

  .nav-cta:hover { opacity: 0.85; }

  .lang-toggle {
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--muted);
    font-family: 'Syne', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 0.5rem;
  }

  .lang-toggle:hover { border-color: var(--accent); color: var(--accent); }

  .nav-portal-btn {
    text-decoration: none;
    margin-right: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(59,158,255,0.1);
    border: 1px solid rgba(59,158,255,0.25);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    transition: all 0.2s;
  }
  .nav-portal-btn:hover {
    background: rgba(59,158,255,0.2);
    border-color: var(--accent);
  }

  .nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
  }

  .nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.3s;
  }

  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* HERO — content-driven height, top-aligned under the fixed nav (not
     vertically centered in a forced min-height:100vh box) so its height
     tracks its actual content instead of always filling the viewport and
     leaving growing empty space above/below whenever content changes. */
  .hero {
    background: var(--bg2);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding: 8rem 2rem 4rem;
    position: relative;
    overflow: hidden;
  }

  .promo-banner-page + .hero {
    margin-top: 0.5rem;
  }

  .hero-glow {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(59,158,255,0.12) 0%, transparent 70%);
    pointer-events: none;
  }

  .hero-glow2 {
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(0,212,255,0.06) 0%, transparent 70%);
    pointer-events: none;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(59,158,255,0.1);
    border: 1px solid rgba(59,158,255,0.25);
    color: var(--accent);
    padding: 0.35rem 0.9rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
  }

  .badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent2);
    box-shadow: 0 0 8px var(--accent2);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    color: #fff;
  }

  h1 .h1-line2 {
    display: block;
  }

  h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero p {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 2.5rem;
    font-weight: 300;
    line-height: 1.7;
  }

  .hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Shared button-shine hover animation: .btn-primary/.btn-ghost/.btn-plan (+.btn-plan.primary)
     all get the same diagonal white light sweep + bounce-lift on hover. Primary/popular blue
     buttons stay blue on hover (lighten to --accent rather than flipping to white) specifically
     so this white sweep stays visible against them — flipping to a white hover background made
     the sweep unreadable and needed a separate (weaker) tint, tried and reverted 2026-07-11. */
  .btn-primary, .btn-ghost, .btn-plan {
    position: relative;
    overflow: hidden;
  }
  .btn-primary::before, .btn-ghost::before, .btn-plan::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    pointer-events: none;
  }
  .btn-primary:hover::before, .btn-ghost:hover::before, .btn-plan:hover::before { left: 125%; }

  .btn-primary {
    background: var(--accent-solid);
    color: #fff;
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid var(--accent-solid);
    transition: background 0.25s, color 0.25s, transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;
    display: inline-block;
  }

  .btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 25px rgba(0,102,204,0.4); }

  .btn-ghost {
    background: transparent;
    color: var(--text);
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid var(--border2);
    transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;
    display: inline-block;
  }

  .btn-ghost:hover { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 25px rgba(0,102,204,0.4); }

  .hero-stats {
    display: flex;
    gap: 3rem;
    justify-content: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
  }

  .stat-item { text-align: center; }
  .stat-num {
    font-family: 'Syne', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    display: block;
  }
  .stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }

  .payment-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2.5rem;
  }
  .payment-strip-label { font-size: 0.95rem; color: var(--muted); }
  .payment-strip-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
  .payment-strip-group { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
  .payment-strip-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; }
  .payment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border2);
    color: var(--muted);
    padding: 0.3rem 0.8rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 500;
  }
  .payment-chip img { height: 16px; width: auto; display: block; }
  .payment-chip img.icon-interac { height: 18px; border-radius: 4px; }


  section { padding: 5rem 2rem; position: relative; }
  .container { max-width: 1100px; margin: 0 auto; }

  /* Guide pages get a wider column than the site default — some guides have
     6-8 TOC pills, which wrap onto multiple lines at 1100px. Widening just
     these 9 pages (not .container sitewide) gives the sidebar room without
     touching every other page's layout. Includes the 3 Help-group hub pages
     (#help, #faq, #guides) too, not just the 6 individual guides — they
     share the exact same .page-sidebar component (Guides/FAQ/Status +
     the 6-topic sublist added 2026-07-27), so leaving them at the narrower
     1100px default made the identical sidebar wrap to 2 lines on 3 of the
     9 pages while staying 1 line on the other 6 (found via review). */
  #guide-vps .container, #guide-minecraft .container, #guide-fivem .container,
  #guide-wordpress .container, #guide-email .container, #guide-managed .container,
  #help .container, #faq .container, #guides .container {
    max-width: 1500px;
  }

  /* #help and #faq's own content (.game-hub-grid maxes at 900px, .faq-list at
     820px) is much narrower than the 1500px container widened above — with no
     centering, the hero text and cards both just sit flush against .page-
     main's left edge, leaving a huge dead gap on the right (reported "weird"
     2026-07-28). #guides doesn't need this: its .mc-portal-grid has no
     max-width and already fills the full .page-main width. Capping .page-main
     itself to match each page's own content width and centering it puts the
     label/title/sub text and the cards in the same box, so the text's left
     edge lines up with the first card's left edge, and the whole block sits
     centered in the extra room the widened container created.

     #vps and #games hit the same issue even though their .container stays at
     the narrower 1100px default (not widened above) — their .game-hub-grid is
     still only 900px with no margin:auto, so the same flush-left dead-gap
     problem shows up at a smaller scale. Same fix, same 900px (both hubs use
     .game-hub-grid, not .faq-list, so there's only the one width to match). */
  #help .page-main { max-width: 900px; margin: 0 auto; }
  #faq .page-main { max-width: 820px; margin: 0 auto; }
  #vps .page-main { max-width: 900px; margin: 0 auto; }
  #games .page-main { max-width: 900px; margin: 0 auto; }

  /* Sidebar nav for grouped standalone pages (games/minecraft + games/fivem,
     faq + guides) — lets you jump to a sibling page in the same group
     without reopening the top nav dropdown.

     .container maxes out at 1100px and is centered, so on any viewport up to
     ~1500px there is NOT enough side margin to fit a sidebar next to it
     without shrinking .page-main. Default (mobile-first, covers essentially
     every normal laptop/desktop width) is therefore a horizontal row of tabs
     ABOVE the content, taking its own full-width strip in normal flow — the
     cards below it always keep the full container width, never squeezed.
     Only past 1500px, where the container's natural side margins are wide
     enough to hold it without overlapping, does a min-width override turn it
     into a column positioned in that margin, outside the container's own
     width budget entirely (found the hard way 2026-07-27: an earlier
     flex-row version put the sidebar *inside* .page-layout next to
     .page-main, which took its width out of the same 1100px budget and
     visibly shrank every pricing/FAQ card).

     It's `position: absolute` anchored to .page-layout itself (NOT `fixed`
     pinned near the top of the viewport, which was tried first and looked
     disconnected — floating up by the nav/promo-banner while the actual
     cards started much further down the page). .page-layout already sits
     exactly where the page's real content begins (after the hero title),
     so top:0 here lines the sidebar up with the cards, and it scrolls away
     with the page normally instead of staying pinned. */
  .page-layout { position: relative; margin-top: 2rem; }

  .page-sidebar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .page-sidebar-title { display: none; }

  .page-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
  }

  .page-sidebar-link:hover { background: rgba(59,158,255,0.08); color: var(--text); }

  .page-sidebar-link.active {
    background: rgba(59,158,255,0.1);
    color: var(--text);
    border: 1px solid rgba(59,158,255,0.25);
  }

  /* Nested under the "Guides" link itself (not a separate flush-left
     section) so it's visually clear these 6 are children of Guides, not
     siblings of Help/FAQ/Status. display:contents makes the wrapper div
     itself invisible to layout — its <a> children become direct flex items
     of .page-sidebar, so they correctly follow whichever layout .page-
     sidebar is currently using (horizontal wrapping row by default, vertical
     column at the wide-screen breakpoint) instead of getting trapped inside
     a nested box that would break the horizontal row. Indentation comes
     purely from the sublink's own left padding, which works in both cases. */
  .page-sidebar-sublist { display: contents; }
  /* padding-left alone doesn't read as "nested under Guides" in the default
     row layout (.page-sidebar is flex-wrap:wrap below the 2300px column
     breakpoint — see below), it just makes 6 of the 9 pills look lopsided
     (found via review, 2026-07-27). A left accent border works as a
     "belongs to this group" cue in BOTH layouts; a deeper padding-left is
     layered on top only inside the 2300px column-mode override further
     down, where indentation actually communicates hierarchy. */
  .page-sidebar-sublink {
    font-size: 0.85rem;
    border-left: 2px solid rgba(59,158,255,0.3);
    padding-left: 0.65rem;
  }

  /* Width math: .page-layout's left edge matches .container's, which sits at
     calc(50% - containerHalfWidth) on any viewport wider than the container.
     Sidebar is 150px wide, offset 300px to the left of that edge (a
     deliberately big gap so it reads as an independent left-rail, not a tab
     attached to the cards), so it needs at least 300px of margin on that
     side. .container is 1100px on most grouped pages but 1500px on the 6
     guide pages (widened separately, see above, so their multi-item TOC
     doesn't wrap) — 2300px gives a real ~150px cushion for the WIDER 1500px
     case: (2300-1500)/2 = 400px, i.e. 100px above the bare 300px minimum.
     That extra cushion matters because this @media query matches
     window.innerWidth while `body{overflow-y:scroll}` forces a permanent
     scrollbar that eats ~15-20px of the actual (narrower) layout viewport on
     non-overlay-scrollbar platforms — a threshold with only ~25px of margin
     was found clipping the sidebar slightly negative in an earlier version
     of this rule (2026-07-27). The narrower 1100px pages get proportionally
     more buffer at this same threshold — harmless, just a slightly later
     activation than their minimum. */
  @media (min-width: 2300px) {
    .page-layout { margin-top: 2.5rem; }
    .page-sidebar {
      position: absolute;
      top: 0;
      left: -300px;
      width: 150px;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 0.25rem;
      margin-bottom: 0;
    }
    .page-sidebar-title {
      display: block;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 0.5rem;
      padding: 0 0.85rem;
    }
    /* Real indentation, layered on top of the always-on border-left accent
       above — this is the one layout where a deeper padding-left actually
       reads as "nested under Guides" instead of just lopsided pills. */
    .page-sidebar-sublink { padding-left: 1.5rem; }
  }

  /* Below the site's real mobile threshold (768px, matches the hamburger-menu
     breakpoint), even a tidy single-column list is still 9 full-height rows
     (help/*: Guides + 6 nested topics + FAQ + Status; games/* only has 2) of
     in-flow content sitting above the page's actual content — on a phone
     that's most of the first screen before you reach anything the visitor
     came for (reported "on top of all pages, takes a lot of space",
     2026-07-27, after an earlier attempt that just switched row->column
     without addressing the height). Collapsed-by-default disclosure instead:
     .page-sidebar-title becomes a tappable header (JS in nav.js toggles
     `.open` on .page-sidebar, same aria-expanded pattern as the top nav's
     dropdown chevrons) and every .page-sidebar-link is hidden until
     expanded. Chevron is a background-image data-URI SVG on ::after rather
     than a live inline <svg> so this needs zero markup changes across the
     12 pages that share this component — same "real SVG, never a unicode
     glyph" rule as the nav dropdown chevrons, just delivered a different
     way since editing 12 files for one glyph isn't worth it here. */
  @media (max-width: 768px) {
    .page-sidebar {
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 0.3rem;
    }
    .page-sidebar-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: normal;
      text-transform: none;
      cursor: pointer;
      padding: 0.7rem 0.85rem;
      margin-bottom: 0;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .page-sidebar-title::after {
      content: '';
      width: 10px;
      height: 10px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a90a8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .page-sidebar.open .page-sidebar-title::after { transform: rotate(180deg); }
    .page-sidebar-link { display: none; }
    .page-sidebar.open .page-sidebar-link { display: flex; }
    .page-sidebar-sublink { padding-left: 1.5rem; }
  }

  .section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 0.75rem;
  }

  .section-label::before {
    content: '> ';
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .section-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 1rem;
  }

  .section-sub {
    color: var(--muted);
    font-size: 1rem;
    max-width: 1100px;
    font-weight: 300;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
  }

  @media (max-width: 1100px) {
    .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  }

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

  @media (max-width: 480px) {
    .pricing-grid { grid-template-columns: 1fr; }
  }

  .pricing-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    transition: border-color 0.2s, transform 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .pricing-card .btn-plan { margin-top: auto; }
  .pricing-card:hover { border-color: var(--border2); transform: translateY(-3px); }

  .pricing-card.popular {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(59,158,255,0.06) 0%, var(--card) 60%);
  }

  .custom-vps-banner {
    display: flex;
    justify-content: center;
    margin: 2.5rem 0;
  }

  .pricing-card.custom-vps {
    max-width: 420px;
    width: 100%;
    text-align: center;
    border: 1px dashed var(--border2);
    background: linear-gradient(135deg, rgba(59,158,255,0.05) 0%, var(--card) 70%);
  }

  .pricing-card.custom-vps .plan-name { font-size: 1.15rem; }
  .pricing-card.custom-vps .custom-vps-desc { color: var(--muted); font-size: 0.85rem; line-height: 1.6; margin-bottom: 1rem; }
  .pricing-card.custom-vps .custom-vps-pricenote { color: var(--accent); font-size: 0.8rem; margin-bottom: 1.25rem; }

  .popular-badge {
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--accent-solid);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.9rem;
    border-radius: 100px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .plan-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.75rem;
  }

  .plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
  }

  .price-amount {
    font-family: 'Syne', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
  }

  .price-period { font-size: 0.85rem; color: var(--muted); }
  .plan-storage-note { font-size: 0.75rem; color: var(--accent); margin-bottom: 1.5rem; font-weight: 500; }
  .plan-storage-note.nvme { color: var(--accent2); }

  .plan-specs {
    list-style: none;
    margin-bottom: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .plan-specs li {
    font-size: 0.875rem;
    color: var(--muted);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.4;
  }

  .plan-specs li::before {
    content: '>';
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 0.9em;
    color: var(--accent);
    flex-shrink: 0;
  }

  .plan-specs li strong { color: var(--text); font-weight: 500; }

  .btn-plan {
    display: block;
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;
    border: 1px solid var(--border2);
    color: var(--text);
    background: transparent;
    cursor: pointer;
    width: 100%;
    font-family: 'DM Sans', sans-serif;
  }

  .btn-plan:hover { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 25px rgba(0,102,204,0.4); }
  .btn-plan.primary { background: var(--accent-solid); border-color: var(--accent); color: #fff; }
  .btn-plan.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 25px rgba(0,102,204,0.4); }

  .minecraft-section { background: var(--bg2); }

  .minecraft-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
  }

  @media (max-width: 1100px) {
    .minecraft-grid { grid-template-columns: repeat(3, 1fr); }
  }

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

  @media (max-width: 480px) {
    .minecraft-grid { grid-template-columns: 1fr; }
  }

  .mc-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.75rem;
    transition: border-color 0.2s, transform 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .mc-card:hover { border-color: rgba(0,212,255,0.3); transform: translateY(-2px); }
  .mc-card .btn-plan { margin-top: auto; }

  .mc-card.popular {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(59,158,255,0.06) 0%, var(--card) 60%);
  }

  .mc-portal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
  }
  @media (max-width: 560px) { .mc-portal-grid { grid-template-columns: 1fr; } }
  .mc-portal-grid > .mc-portal-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.625rem);
    margin: 0 auto;
  }
  @media (max-width: 560px) { .mc-portal-grid > .mc-portal-card:last-child:nth-child(odd) { max-width: none; } }
  .mc-portal-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s;
  }
  .mc-portal-card:hover { border-color: rgba(0,212,255,0.3); transform: translateY(-2px); }
  .mc-portal-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    background: rgba(59,158,255,0.1);
    border: 1px solid rgba(59,158,255,0.2);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
  }
  .mc-portal-card-title {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 0.3rem;
  }
  .mc-portal-card-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.55; }

  .game-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
    max-width: 900px;
  }
  @media (max-width: 700px) { .game-hub-grid { grid-template-columns: 1fr; } }
  /* /help/'s 3 cards (Guides/FAQ/Status) leave an odd one out in this
     2-column grid — same fix as .mc-portal-grid's orphan rule above, so the
     3rd card centers under the first row instead of sitting alone at half
     width in the left column. /games/ has exactly 2 cards so this never
     matches there. */
  .game-hub-grid > .game-hub-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.75rem);
    margin: 0 auto;
  }
  @media (max-width: 700px) { .game-hub-grid > .game-hub-card:last-child:nth-child(odd) { max-width: none; } }

  .game-hub-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s, transform 0.2s;
  }
  .game-hub-card:hover { border-color: rgba(0,212,255,0.3); transform: translateY(-3px); }

  .game-hub-icon { font-size: 3rem; margin-bottom: 1.25rem; }

  .game-hub-title {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
  }

  .game-hub-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.55; margin-bottom: 1.5rem; }

  .game-hub-price { font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-bottom: 1.25rem; }

  .game-hub-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid var(--border2);
    color: var(--text);
    background: transparent;
    transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s;
    font-family: 'DM Sans', sans-serif;
  }
  .game-hub-card:hover .game-hub-cta { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 25px rgba(0,102,204,0.4); }

  .mc-icon { font-size: 2rem; margin-bottom: 1rem; display: block; }

  .mc-name {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
  }

  .mc-price {
    font-family: 'Syne', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent2);
    margin-bottom: 0.75rem;
  }

  .mc-price span { font-size: 0.8rem; color: var(--muted); font-weight: 400; font-family: 'DM Sans', sans-serif; }

  .mc-specs { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.5rem; }
  .mc-specs li { font-size: 0.8rem; color: var(--muted); display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.4; }
  .mc-specs li::before { content: '>'; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: 0.9em; color: var(--accent2); flex-shrink: 0; }
  .mc-specs li strong { color: var(--text); font-weight: 500; }

  .canada-section {
    background: linear-gradient(135deg, rgba(59,158,255,0.05) 0%, transparent 60%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .canada-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .canada-points { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }

  .canada-points li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--muted);
  }

  .canada-points li .point-icon {
    width: 32px; height: 32px;
    background: rgba(59,158,255,0.1);
    border: 1px solid rgba(59,158,255,0.2);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .canada-points li strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 0.2rem; font-size: 0.95rem; }

  .big-stat-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
  }

  .big-stat-box .big-label { color: var(--muted); font-size: 0.9rem; }

  .uptime-ring {
    width: 140px; height: 140px;
    margin: 0 auto 1.5rem;
    position: relative;
  }

  .uptime-ring svg { transform: rotate(-90deg); }
  .uptime-ring .ring-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 8; }
  .uptime-ring .ring-fill { fill: none; stroke: var(--accent2); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 377; stroke-dashoffset: 4; }

  .uptime-center {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
  }

  /* FAQ TEASER (homepage only — full FAQ lives on faq.php) */
  #faq-teaser { text-align: center; }
  .faq-teaser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 3rem;
    text-align: left;
  }
  .faq-teaser-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
  }
  .faq-teaser-q {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.6rem;
  }
  .faq-teaser-a { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
  .faq-teaser-link {
    display: inline-block;
    margin-top: 2rem;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
  }
  .faq-teaser-link:hover { text-decoration: underline; }

  /* CONTACT */
  .contact-section { text-align: center; }

  .contact-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3.5rem 2rem;
    max-width: 640px;
    margin: 3rem auto 0;
  }

  .contact-card > p { color: var(--muted); margin-bottom: 2rem; font-size: 0.95rem; }

  .contact-email {
    font-family: 'Syne', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    display: block;
    margin-bottom: 1rem;
    transition: color 0.2s;
  }

  .contact-email:hover { color: var(--accent2); }

  /* Contact Form */
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  @media (max-width: 560px) {
    .form-row { grid-template-columns: 1fr; }
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    width: 100%;
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder { color: var(--muted); opacity: 0.6; }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59,158,255,0.12);
  }

  .form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a90a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
  }

  .form-group select option { background: var(--bg2); color: var(--text); }

  .form-group textarea { resize: vertical; min-height: 120px; }

  .form-submit {
    background: var(--accent-solid);
    color: #fff;
    border: none;
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    width: 100%;
    margin-top: 0.5rem;
  }

  .form-submit:hover { opacity: 0.88; transform: translateY(-1px); }
  .form-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

  .form-success {
    display: none;
    background: rgba(46,204,113,0.1);
    border: 1px solid rgba(46,204,113,0.3);
    border-radius: 10px;
    padding: 1.25rem;
    color: #2ecc71;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 1rem;
  }

  .form-error {
    display: none;
    background: rgba(231,76,60,0.1);
    border: 1px solid rgba(231,76,60,0.3);
    border-radius: 10px;
    padding: 1.25rem;
    color: #e74c3c;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 1rem;
  }

  /* MODAL shared */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }

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

  .modal {
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalIn 0.2s ease;
  }

  @keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .modal-close {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--muted);
    width: 32px; height: 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    line-height: 1;
  }

  .modal-close:hover { border-color: var(--accent); color: var(--accent); }

  .modal-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.4rem;
  }

  .cfg-vps-os-icons {
    display: none;
    align-items: center;
    gap: clamp(0.35rem, 1.5vw, 0.65rem);
    opacity: 0.7;
    flex-shrink: 1;
    min-width: 0;
  }
  .cfg-vps-os-icons img { height: clamp(16px, 6vw, 32px); width: auto; flex-shrink: 0; }

  .modal-sub {
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
  }

  /* ── STATUS MODAL ────────────────────────────────────────────── */
  #statusModal .modal { max-width: 520px; }

  .status-overall {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
  }

  .status-overall-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .status-overall-label {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
  }

  .status-overall-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.1rem;
  }

  .status-updated {
    font-size: 0.72rem;
    color: var(--muted);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .status-monitors {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
  }

  .status-monitor-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    transition: border-color 0.2s;
  }

  .status-monitor-row:hover { border-color: var(--border2); }

  .status-monitor-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .status-monitor-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-monitor-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .badge-up    { background: rgba(46,204,113,0.12); color: #2ecc71; border: 1px solid rgba(46,204,113,0.25); }
  .badge-down  { background: rgba(231,76,60,0.12);  color: #e74c3c; border: 1px solid rgba(231,76,60,0.25); }
  .badge-warn  { background: rgba(243,156,18,0.12); color: #f39c12; border: 1px solid rgba(243,156,18,0.25); }
  .badge-pause { background: rgba(122,144,168,0.12); color: var(--muted); border: 1px solid rgba(122,144,168,0.2); }

  .status-monitor-uptime {
    font-family: 'Syne', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    flex-shrink: 0;
    min-width: 44px;
    text-align: right;
  }

  /* Uptime bar row */
  .status-uptime-bar-wrap {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .status-uptime-bar-track {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
  }

  .status-uptime-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
  }

  .status-divider {
    height: 1px;
    background: var(--border);
    margin: 1.25rem 0;
  }

  /* skeleton loader */
  .status-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .skel-row {
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--bg3) 25%, rgba(255,255,255,0.04) 50%, var(--bg3) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
  }

  @keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .status-error-msg {
    text-align: center;
    color: var(--muted);
    font-size: 0.875rem;
    padding: 2rem 0;
  }

  .status-footer-link {
    text-align: center;
    margin-top: 0.25rem;
  }

  .status-footer-link a {
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s;
  }

  .status-footer-link a:hover { opacity: 1; }

  /* Clickable status pill in contact / footer */
  .status-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    padding: 0;
    transition: color 0.2s;
    text-decoration: none;
  }

  .status-trigger:hover { color: var(--text); }

  footer {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 2.5rem 2rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
  }

  footer a { color: var(--muted); text-decoration: none; }
  footer a:hover { color: var(--text); }

  .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .storage-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 1rem;
  }

  .tag-ssd { background: rgba(99,153,34,0.15); color: #7cc142; border: 1px solid rgba(99,153,34,0.25); }
  .tag-nvme { background: rgba(0,212,255,0.1); color: var(--accent2); border: 1px solid rgba(0,212,255,0.2); }
  .tag-custom { background: var(--accent); color: #fff; }

  .divider { height: 1px; background: var(--border); margin: 1.5rem 0; }

  .page-note { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 2rem; }
  .page-note + .page-note { margin-top: 0.75rem; }

  /* Per-service guide pages (/help/guides/<service>/) — one .guide-section
     per included feature card, consistent structure across all 6 guides. */
  /* scroll-margin-top so a .guide-toc click doesn't land the section's own
     h2 behind the fixed nav (nav is ~68px tall: 1.2rem padding top+bottom
     plus its 30px logo icon — 90px gives a bit of breathing room below it). */
  .guide-section { margin-top: 2.5rem; scroll-margin-top: 90px; }
  .guide-section h2 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: #fff;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .guide-section h2 .guide-icon { font-size: 1.2rem; }
  .guide-section p { color: var(--muted); line-height: 1.7; margin-bottom: 1rem; }
  .guide-section p:last-child { margin-bottom: 0; }
  .guide-steps {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin: 1rem 0;
  }
  .guide-steps ol, .guide-steps ul { padding-left: 1.25rem; }
  .guide-steps li { color: var(--text); line-height: 1.65; margin-bottom: 0.6rem; }
  .guide-steps li:last-child { margin-bottom: 0; }
  .guide-steps code {
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    color: var(--accent);
  }
  .guide-tip {
    background: rgba(59,158,255,0.08);
    border: 1px solid rgba(59,158,255,0.25);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-size: 0.88rem;
    color: var(--muted);
    margin-top: 1rem;
    line-height: 1.6;
  }
  .guide-tip strong { color: var(--accent); }
  /* Wraps to as many rows as needed — never a horizontal scrollbar (project
     rule: a scrollbar is never the right fallback for content that doesn't
     fit, an extra line is). Same wrapping pill-row pattern already used by
     .payment-strip-row and the mobile .page-sidebar. */
  .guide-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2rem;
  }
  .guide-toc a {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
  }
  .guide-toc a:hover { border-color: rgba(59,158,255,0.35); color: var(--text); }
  .page-note a { color: var(--accent); text-decoration: none; }

  .pricing-section-label {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 3rem 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .pricing-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  .ssd-note { font-size: 0.75rem; color: #7cc142; font-weight: 500; }
  .nvme-note { font-size: 0.75rem; color: var(--accent2); font-weight: 500; }

  .managed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
  }

  /* Fixed column-count variants for pages whose tier count doesn't match
     .minecraft-grid's 5-column default (avoids an awkward empty track on
     wide screens) — but still need to collapse on mobile like every other
     pricing grid, which an inline style="grid-template-columns:..." can't
     do (inline styles beat any media query, so it never collapsed before). */
  .grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; max-width: 900px; margin-left: auto; margin-right: auto; }
  @media (max-width: 900px) {
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 700px) {
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 480px) {
    .grid-cols-4, .grid-cols-3 { grid-template-columns: 1fr !important; }
  }

  .managed-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
  }

  .managed-card:hover { border-color: var(--border2); transform: translateY(-3px); }

  .managed-card-popular {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(59,158,255,0.06) 0%, var(--card) 60%);
  }

  .managed-popular-badge {
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--accent-solid);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.9rem;
    border-radius: 100px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .managed-plan-label {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.75rem;
  }

  .managed-price {
    font-family: 'Syne', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1;
  }

  .managed-price span { font-size: 0.85rem; color: var(--muted); font-weight: 400; font-family: 'DM Sans', sans-serif; }

  .managed-includes {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.75rem;
    flex: 1;
  }

  .managed-includes li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--muted);
  }

  .managed-check { font-size: 0.75rem; color: var(--accent2); font-weight: 700; flex-shrink: 0; margin-top: 2px; }
  .managed-check.response { color: var(--accent); }
  .managed-card .btn-plan { margin-top: auto; }

  .faq-list {
    max-width: 820px;
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }


  .faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s;
  }

  .faq-item.open { border-color: rgba(59,158,255,0.35); }

  .faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.98rem;
    font-weight: 600;
    color: #fff;
    transition: background 0.15s;
  }

  .faq-q:hover { background: rgba(255,255,255,0.025); }
  .faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  .faq-prompt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
    width: 1rem;
    transition: color 0.2s;
  }

  .faq-item.open .faq-prompt { color: var(--accent2); }

  .faq-q-text { flex: 1; line-height: 1.4; }

  .faq-toggle {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border: 1px solid var(--border2);
    border-radius: 50%;
    position: relative;
    transition: transform 0.3s ease, border-color 0.2s;
  }

  .faq-toggle::before, .faq-toggle::after {
    content: '';
    position: absolute;
    background: var(--muted);
    transition: background 0.2s;
  }
  .faq-toggle::before { top: 50%; left: 25%; right: 25%; height: 1px; transform: translateY(-50%); }
  .faq-toggle::after { left: 50%; top: 25%; bottom: 25%; width: 1px; transform: translateX(-50%); }

  .faq-item.open .faq-toggle { transform: rotate(135deg); border-color: var(--accent); }
  .faq-item.open .faq-toggle::before,
  .faq-item.open .faq-toggle::after { background: var(--accent); }

  .faq-a-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }

  .faq-a-inner { overflow: hidden; }

  .faq-item.open .faq-a-panel { grid-template-rows: 1fr; }

  .faq-a {
    padding: 0 1.5rem 1.25rem 3.5rem;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.7;
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-a-panel, .faq-toggle { transition: none; }
  }

  .back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 42px; height: 42px;
    background: var(--card);
    border: 1px solid var(--border2);
    border-radius: 10px;
    color: var(--muted);
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, color 0.2s, border-color 0.2s, transform 0.2s;
    z-index: 90;
    text-decoration: none;
  }

  .back-to-top.visible {
    opacity: 1;
    pointer-events: all;
  }

  .back-to-top:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
  }

  .nav-links {
    transition: opacity 0.2s, transform 0.2s;
  }

  .nav-links.mobile-closing {
    opacity: 0;
    transform: translateY(-8px);
  }
  @media (max-width: 768px) {
    .canada-grid { grid-template-columns: 1fr; gap: 2rem; }
    .nav-links { display: none; }
    .nav-links.mobile-open {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 65px; left: 0; right: 0;
      background: rgba(8,13,20,0.97);
      backdrop-filter: blur(16px);
      padding: 1.5rem 2rem;
      border-bottom: 1px solid var(--border);
      gap: 1.25rem;
      z-index: 99;
      /* No max-height/overflow originally — with Help's submenu expanded
         (3 extra rows) the list can run past the bottom of a short phone
         screen, and since this is `position:fixed` there was no way to
         scroll down to the items below the fold (found 2026-07-27). */
      max-height: calc(100vh - 65px);
      overflow-y: auto;
    }
    .nav-hamburger { display: flex; }
    /* .nav-dropdown is a flex row (label link + separate chevron button,
       see the desktop rule above) — spread them across the full row width
       here instead of stretching the label link itself to 100%, which would
       just push the chevron button off to the side/wrap. */
    /* .nav-links a / .nav-dropdown-toggle have no padding at all on desktop
       (just text at 0.9rem, ~23px tall rows) — fine for a mouse, thin for a
       thumb (found 2026-07-27). Both sit in the same column list, so both
       need the same treatment to stay visually consistent row-to-row. */
    .nav-links a, .nav-dropdown-toggle { padding: 0.5rem 0; }
    .nav-dropdown { width: 100%; justify-content: space-between; }
    /* Desktop's chevron tap target is a deliberately tight 18px (padding
       0.25rem + matching negative margin, so it doesn't disturb the compact
       hover-driven layout there) — but this chevron is the ONLY way to open
       Games/Help on touch, and 18px is well under the ~44px touch-target
       guideline (found 2026-07-27). Safe to grow much more here: this row
       is `justify-content:space-between` with nothing else sharing it, and
       the `.nav-links.mobile-open` row gap (1.25rem) plus this row's own
       padding leave enough clearance that the enlarged invisible padding
       (still canceled out for layout via the matching negative margin,
       same trick as desktop) doesn't overlap neighboring rows. */
    .nav-dropdown-chevron { padding: 1rem; margin: -1rem; }
    .nav-dropdown-menu {
      position: static;
      display: none;
      box-shadow: none;
      border: none;
      background: transparent;
      padding: 0.25rem 0 0 1rem;
      margin-top: 0.5rem;
    }
    .nav-dropdown:hover .nav-dropdown-menu { display: none; }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
    h1 { font-size: 2.5rem; }
    .managed-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  }

  @media (max-width: 900px) {
    .managed-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  }

  

  /* ── CHECKOUT MODAL ─────────────────────────────────────────── */
  #checkoutModal .modal { max-width: 640px; }
  /* PayPal/Stripe/Interac live in their own wrapping row (#pm-traditional-row);
     Crypto is a separate full-width sibling below — deliberate layout, not
     flex-wrap overflow (confirmed via screenshot 2026-07-11: cramped at 640px
     with all 4 in one row; widening the whole modal instead was tried and
     reverted — looked disproportionate on steps 1-2). Wrap/min-width for the
     traditional row's own buttons are set inline in inc/checkout-modal.php,
     but min-width must also live here — selectPaymentMethod() in checkout.js
     replaces each button's whole inline style attribute (style.cssText) on
     every click, including the initial default-PayPal selection on page
     load, which would otherwise wipe the inline min-width immediately. */
  #pm-traditional-row > button { min-width: 150px; }
  .checkout-steps { display: flex; margin-bottom: 2rem; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .checkout-step { flex: 1; text-align: center; padding: 0.6rem; font-size: 0.75rem; color: var(--muted); font-weight: 500; background: var(--bg3); border-right: 1px solid var(--border); }
  .checkout-step:last-child { border-right: none; }
  .checkout-step.active { background: rgba(59,158,255,0.15); color: var(--accent); font-weight: 600; }
  .checkout-step.done { background: rgba(46,204,113,0.1); color: #2ecc71; }
  .checkout-page { display: none; }
  .checkout-page.active { display: block; }
  .plan-summary-bar { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
  .plan-summary-name { font-family: 'Syne', sans-serif; font-weight: 700; color: #fff; font-size: 0.95rem; }
  .plan-summary-price { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--accent2); font-size: 1.1rem; }
  .plan-summary-price small { font-size: 0.7rem; color: var(--muted); font-weight: 400; font-family: 'DM Sans', sans-serif; }
  .billing-selector { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
  .billing-option { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--bg3); transition: all 0.2s; }
  .billing-option:hover { border-color: var(--border2); }
  .billing-option.selected { border-color: var(--accent); background: rgba(59,158,255,0.08); }
  .billing-option input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
  .billing-option-info { flex: 1; }
  .billing-option-label { display: block; font-weight: 600; color: var(--text); font-size: 0.9rem; }
  .billing-option-sub { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }
  .billing-option-price { font-family: 'Syne', sans-serif; font-weight: 800; color: #fff; font-size: 1rem; text-align: right; }
  .billing-option-price small { display: block; font-size: 0.68rem; color: var(--muted); font-weight: 400; font-family: 'DM Sans', sans-serif; }
  .discount-tag { background: rgba(46,204,113,0.15); color: #2ecc71; border: 1px solid rgba(46,204,113,0.25); font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 0.5rem; }
  .config-section-title { font-family: 'Syne', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin: 1.25rem 0 0.75rem; }
  .config-fields { display: flex; flex-direction: column; gap: 0.75rem; }
  .config-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  @media (max-width: 500px) { .config-row { grid-template-columns: 1fr; } }
  .order-summary { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.5rem; }
  .order-summary-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.875rem; color: var(--muted); border-bottom: 1px solid var(--border); }
  .order-summary-row:last-child { border-bottom: none; }
  .order-summary-row.total { color: #fff; font-weight: 700; font-size: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border2); }
  .order-summary-row span:last-child { color: var(--text); font-weight: 500; text-align: right; }
  .order-summary-row.total span:last-child { color: var(--accent2); font-family: 'Syne', sans-serif; font-size: 1.1rem; }
  #paypal-button-container { margin-top: 1rem; min-height: 50px; }
  .paypal-loading { text-align: center; color: var(--muted); font-size: 0.875rem; padding: 1.5rem; }
  .checkout-success { text-align: center; padding: 1rem 0; }
  .success-icon { font-size: 4rem; margin-bottom: 1rem; display: block; }
  .success-title { font-family: 'Syne', sans-serif; font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 0.75rem; }
  .success-sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.5rem; line-height: 1.7; }
  .success-details { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; text-align: left; margin-bottom: 1.5rem; }
  .success-details p { font-size: 0.875rem; color: var(--muted); margin-bottom: 0.4rem; }
  .success-details p strong { color: var(--text); }
  .checkout-nav { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
  .btn-back { background: transparent; border: 1px solid var(--border2); color: var(--muted); padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s; flex-shrink: 0; }
  .btn-back:hover { border-color: var(--accent); color: var(--accent); }
  .btn-next { background: var(--accent-solid); border: none; color: #fff; padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: opacity 0.2s; flex: 1; }
  .btn-next:hover { opacity: 0.88; }
  .req { color: var(--accent); margin-left: 2px; }

  /* ── MOBILE IMPROVEMENTS (≤ 480px) ─────────────────────────── */
  @media (max-width: 480px) {

    /* Hero: reduce top padding, tighten stats bar */
    .hero { padding: 5.5rem 1.25rem 3rem; }
    .hero p { font-size: 1rem; }
    .hero-stats { gap: 1.5rem; margin-top: 2.5rem; padding-top: 2rem; }
    .stat-num { font-size: 1.4rem; }

    /* Sections: reduce side padding */
    section { padding: 3rem 1.25rem; }

    /* Pricing & MC cards: tighter padding */
    .pricing-card { padding: 1.5rem 1.25rem; }
    .mc-card { padding: 1.25rem; }

    /* FAQ: tighter padding, answer aligns under question text without the prompt gutter */
    .faq-q { padding: 1.1rem 1.25rem; gap: 0.75rem; font-size: 0.92rem; }
    .faq-a { padding: 0 1.25rem 1.1rem 1.25rem; }

    /* Contact card: less vertical padding */
    .contact-card { padding: 2rem 1.25rem; }

    /* Modal: full-width sheet from bottom, less padding */
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal {
      border-radius: 20px 20px 0 0;
      padding: 1.75rem 1.25rem;
      max-height: 92vh;
    }
    .modal-title { font-size: 1.15rem; padding-right: 2rem; }

    /* Checkout steps: smaller text so they fit on one line */
    .checkout-step { font-size: 0.68rem; padding: 0.5rem 0.25rem; }

    /* Billing options: stack price below label on very narrow screens */
    .billing-option { flex-wrap: wrap; gap: 0.5rem; }
    .billing-option-price { width: 100%; text-align: left; font-size: 0.9rem; }

    /* Big stat box: tighter padding */
    .big-stat-box { padding: 1.75rem 1.25rem; }

    /* Footer: stack items centered */
    .footer-inner { flex-direction: column; align-items: center; text-align: center; }

    /* Back to top: smaller, less intrusive */
    .back-to-top { bottom: 1rem; right: 1rem; width: 36px; height: 36px; font-size: 1rem; }

    /* Nav: tighter padding */
    nav { padding: 0.9rem 1.25rem; }

    /* Hide "My Account" pill in nav on mobile — accessible via hamburger menu */
    .nav-portal-btn { display: none; }
  }

  /* ── TABLET TWEAKS (481px – 768px) ──────────────────────────── */
  @media (min-width: 481px) and (max-width: 768px) {
    .hero { padding: 7rem 1.5rem 3.5rem; }
    section { padding: 4rem 1.5rem; }
    .contact-card { padding: 2.5rem 1.5rem; }
    .modal-overlay { padding: 1rem; }
    nav { padding: 1rem 1.5rem; }
  }

  .promo-banner {
    position: relative;
    top: -4rem;
    overflow: hidden;
    max-width: 94vw;
    width: max-content;
    margin: 0 auto 1.75rem;
    border-radius: 18px;
    background: linear-gradient(90deg, #0052a3, #3b9eff 40%, #00d4ff 55%, #0052a3);
    background-size: 250% 100%;
    animation: promo-gradient-move 8s ease infinite;
    box-shadow: 0 4px 24px rgba(0, 178, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.65rem 1.4rem;
    text-align: center;
  }
  .promo-banner::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: promo-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
  }
  .promo-badge {
    flex-shrink: 0;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.22rem 0.55rem;
    border-radius: 100px;
  }
  .promo-text {
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    /* pre-line (not nowrap) — a message longer than the banner's max-width
       now wraps instead of being clipped by overflow:hidden, and an actual
       line break typed into the admin's message/message_fr textarea renders
       as a real line break instead of being collapsed. */
    white-space: pre-line;
  }
  @keyframes promo-gradient-move {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  @keyframes promo-shimmer {
    0% { left: -60%; }
    100% { left: 130%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .promo-banner, .promo-banner::after { animation: none; }
  }
  @media (max-width: 640px) {
    .promo-banner { flex-direction: column; gap: 0.3rem; padding: 0.6rem 1rem; width: auto; max-width: 92vw; top: -1rem; }
    .promo-text { font-size: 0.8rem; white-space: pre-line; }
  }
  @media (min-height: 1300px) {
    .promo-banner { top: -5rem; }
  }

  /* ── Secondary-page header (vps.php, games.php, wordpress-hosting.php, ── */
  /* email-hosting.php, managed.php, faq.php) — lighter than the full-      */
  /* viewport home .hero, mirrors tos.html/privacy.html's own page header.  */
  .page-hero {
    padding: calc(64px + 5rem) clamp(1.5rem,5vw,4rem) 3rem;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .page-hero-eyebrow {
    font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--accent); font-weight: 500; margin-bottom: 1rem;
    display: flex; align-items: center; gap: .6rem;
  }
  .page-hero-eyebrow::before { content: ''; display: inline-block; width: 2rem; height: 1px; background: var(--accent); }
  .page-hero h1 {
    font-family: 'Syne', sans-serif; font-size: clamp(1.8rem,4.5vw,3rem);
    font-weight: 800; line-height: 1.15; letter-spacing: -.03em; margin-bottom: 1.25rem;
  }
  .page-hero p.page-hero-sub { color: var(--muted); font-size: 1.05rem; max-width: 640px; }


  /* Promo banner variant for the 6 standalone pages — same visual treatment as */
  /* the home hero's .promo-banner but without the hero-vertical-centering     */
  /* compensation offsets (there's no min-height:100vh flex-centered hero here). */
  .promo-banner-page {
    overflow: hidden;
    max-width: 94vw;
    width: max-content;
    /* nav.js inserts a position:fixed nav with no document-flow height of its
       own, so this being the first thing in <main> needs its own clearance —
       .page-hero below it already has generous top padding for the no-banner
       case, but doesn't help this element which precedes it. */
    margin: calc(64px + 2.5rem) auto 0;
    border-radius: 18px;
    background: linear-gradient(90deg, #0052a3, #3b9eff 40%, #00d4ff 55%, #0052a3);
    background-size: 250% 100%;
    animation: promo-gradient-move 8s ease infinite;
    box-shadow: 0 4px 24px rgba(0, 178, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.65rem 1.4rem;
    text-align: center;
    position: relative;
  }
  .promo-banner-page::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: promo-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .promo-banner-page, .promo-banner-page::after { animation: none; }
  }
  @media (max-width: 640px) {
    .promo-banner-page { flex-direction: column; gap: 0.3rem; padding: 0.6rem 1rem; width: auto; max-width: 92vw; }
    .promo-banner-page .promo-text { font-size: 0.8rem; white-space: pre-line; }
  }

  /* ── SHORT DESKTOP VIEWPORTS (e.g. a normal, non-maximized-to-4K 1080p
     browser window — usable viewport height varies by browser chrome, seen
     as low as 697px (Firefox) and as high as 951px (Brave) on the same
     1080p display) — on the 6 standalone product pages, the "banner" here is
     .promo-banner-page (the blue gradient announcement), which precedes
     section#vps etc. as a DOM sibling — its position comes entirely from its
     own margin-top. Placed at the very end of the file deliberately, since
     .promo-banner-page's base rule sets the full margin shorthand (which
     clobbers an earlier-in-source longhand override regardless of
     specificity ties) — this guarantees it always wins. Only targets desktop
     widths — mobile/tablet already have their own overrides above. */
  @media (min-width: 769px) and (max-height: 1024px) {
    .promo-banner-page { margin-top: calc(64px + 2rem); }
  }