/* Design pass based on the taste-skill rules (github.com/Leonxlnx/taste-skill).
   Loaded last on every page. Brand colours and fonts are kept; this file
   flattens the surfaces, cuts the type scale to a few clear steps and removes
   the common "generated page" decoration: glow, glass, hairlines, eyebrow
   labels, index numbers and pulsing dots.

   One ground, one ink, one accent. Depth comes from tone steps, not shadows. */

:root {
  --t-ground: #0a0a0d;
  --t-step-1: #121216;
  --t-step-2: #18181d;
  --t-ink: #f4f4f5;
  --t-muted: #a8a7b0;
  --t-accent: #b69aff;
  --t-accent-ink: #171020;

  /* Type: five sizes, far apart. */
  --t-display: clamp(2.5rem, 4.7vw, 4.5rem);
  --t-h2: clamp(1.95rem, 3.2vw, 3rem);
  --t-h3: 1.25rem;
  --t-body: 1rem;
  --t-small: 0.875rem;

  --t-section-gap: clamp(4.5rem, 9vw, 9rem);

  /* The old tertiary/muted grey (#8d8c97) is about 3.6:1 on the card tone,
     under the 4.5:1 that small text needs. */
  --text-tertiary: #8d8c97;
  --text-muted: #8d8c97;
}

body { background: var(--t-ground); color: var(--t-ink); }

/* ---------- Type ---------- */
/* Heroes that share the row with a picture have half the width to work with. */
:root:root body :is(.gh-hero-grid, .mc-hero-grid, .bm-hero-grid, .vm-hero-grid) :is(h1, [class*="hero-title"]) {
  font-size: clamp(2.25rem, 3.7vw, 3.5rem);
  max-width: none;
}
/* Page titles in the middle of the site (cart, login, legal) stay modest;
   only real heroes get the display size. Two lines at most. */
:root:root body main h1 {
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}
:root:root body :is([class*="hero-title"], [class*="hero-heading"], .vm-h1, .bm-h1) {
  font-size: var(--t-display);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
  max-width: 20ch;
}
/* Long hero titles (whole sentences) and guide articles: a little smaller and
   the full column width, so they stay within two or three lines. Must come
   after the display rule above (same specificity, later wins). */
:root:root body :is(.mc-hero-title, .dp-hero-title, .hero-heading) {
  font-size: clamp(2.1rem, 3.5vw, 3.25rem);
  max-width: none;
}
:root:root body :is(main h2, .section-title, [class*="section-title"], .vm-h2, .bm-h2, .qa-title) {
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
  /* Headings stay attached to what they introduce: more room above than below. */
  margin-bottom: 0.9rem;
}
:root:root body :is(main h3, [class*="plan-name"], [class*="card-title"]) {
  font-size: var(--t-h3);
  font-weight: 550;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
body main p { line-height: 1.55; }
body main :is(h2, h3) + p,
body main [class*="section-sub"],
body main [class*="lead"] {
  color: var(--t-muted);
  max-width: 62ch;
}

/* ---------- Rhythm: sections far apart, content inside tight ---------- */
body main > section,
body main > div > section {
  padding-block: var(--t-section-gap);
}
body main > section:first-child { padding-top: calc(var(--header-h, 4.25rem) + clamp(2.5rem, 5vw, 4.5rem)); }
/* Tone steps instead of hairlines to separate sections. */
body main .section-bordered { border: 0; }
body main > section:nth-of-type(even):not([class*="hero"]):not([class*="cta"]) { background: var(--t-step-1); }

/* ---------- Flat surfaces: no hairlines, shadows, glow or glass ---------- */
/* `:root:root body` lifts these above the page stylesheets' own
   `.page .card` rules without resorting to !important. */
:root:root body :is(.game-card, .plan-card, .feature-card, .service-card, .pricing-card, .svc-card,
  .vps-plan-card, .vps-feature-card, .vps-os-card, .vps-loc-card, .infra-spec-card,
  .dp-step, .dp-layer, .dp-cap-item, .mc-plan-card, .mc-feature-card, .mc-network-card,
  .mc-why-card, .gh-feature-card, .gh-infra-card, .gh-why-card, .gh-step, .gh-plan-card,
  .vm-plan, .vm-quick-plan, .bm-plan, .gh-game-card-active, .dp-tech-card, .dp-cap-card,
  .mh-plan, .vps-card, .team-card, .footer-cta) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  background-color: var(--t-step-2);
}
/* On a stepped (even) section the card has to step the other way. */
:root:root body main > section:nth-of-type(even) :is(.game-card, .plan-card, .feature-card, .service-card,
  .svc-card, .vps-plan-card, .vps-feature-card, .mc-plan-card, .mc-feature-card, .mc-why-card,
  .gh-feature-card, .gh-plan-card, .vm-plan, .bm-plan, .mh-plan, .vps-card) { background-color: #1e1e25; }

:root:root body :is(.game-card, .plan-card, .feature-card, .service-card, .pricing-card, .svc-card,
  .vps-plan-card, .vps-feature-card, .mc-plan-card, .mc-feature-card, .mc-why-card, .gh-feature-card,
  .gh-plan-card, .vm-plan, .bm-plan, .mh-plan, .vps-card):is(:hover, :focus-within) {
  transform: none;
  box-shadow: none;
}
/* Hover tint only for a real pointer; touch screens would keep it stuck on. */
@media (hover: hover) and (pointer: fine) {
  :root:root body :is(.game-card, .plan-card, .feature-card, .service-card, .pricing-card, .svc-card,
    .vps-plan-card, .vps-feature-card, .mc-plan-card, .mc-feature-card, .mc-why-card, .gh-feature-card,
    .gh-plan-card, .vm-plan, .bm-plan, .mh-plan, .vps-card):hover { background-color: #1d1d24; }
}
/* The one highlighted plan gets a full accent field, not a glow. */
:root:root body :is(.mc-plan-card.mc-plan-featured, .vm-plan.is-featured, .bm-plan.is-featured, .mh-plan.is-featured, .mh-plan.mh-plan-featured) {
  background-image: none;
  background-color: #231d33;
}

/* Media: square like everything else. */
:root:root body :is(.gh-game-card-img, .bm-hero-media, .dp-hero-visual, .infra-hero-photo,
  .infra-hero-photo img, .bm-hero-media img, .vm-hero-visual img, .dp-hero-visual img,
  .gh-hero-visual, .mc-hero-visual) { border-radius: 0; border: 0; box-shadow: none; }

/* ---------- Buttons: flat, named for the action ---------- */
:root:root body :is(.btn, .mc-buy, .mc-add-cart) { box-shadow: none; background-image: none; }
:root:root body :is(.btn-primary, .mc-buy-featured) { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-accent-ink); }
:root:root body :is(.btn-primary, .mc-buy-featured):hover { background: #c9b5ff; border-color: #c9b5ff; }

/* ---------- Decoration removed ---------- */
/* Eyebrow labels sitting above headings. */
:root:root body :is(.eyebrow, .eyebrow-index, .mc-eyebrow, .vm-eyebrow, .mh-eyebrow, .dp-eyebrow, .bm-eyebrow,
.gh-eyebrow, .policy-eyebrow, .vm-quick-plan-kicker, .hero-chip ) { display: none; }
/* Index numbering (01, 02, Step 02). */
:root:root body :is(.mc-plan-num, .mc-why-num, .vm-plan-num, .vm-feature-num, .gh-step-num, .dp-step-num,
.dp-limit-num, .bm-use-num, .bm-plan-num, .gh-infra-num, .bm-feature-num, .cs-num,
.dp-layer-num ) { display: none; }
/* Pulsing status dots stop pulsing; the dot itself still says "online". */
.footer-status-dot, .bm-live-dot, .d-dot-badge, .pulse-dot, .gh-status-badge::before,
.svc-badge-live::before { animation: none !important; box-shadow: none !important; }
/* Moving backdrops and scan lines. */
.particle-overlay, .scan-effect::after, .matrix-bg::before { display: none; }
.hover-lift:hover { transform: none; box-shadow: none; }

/* ---------- Header: a plain bar ---------- */
.site-header {
  background: var(--t-ground);
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header.is-scrolled { background: var(--t-ground); border-bottom: 0; }
@media (min-width: 1025px) {
  .site-header, .site-header.is-scrolled {
    background: var(--t-ground);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header .mega-menu {
    border: 0;
    border-radius: 0;
    background: var(--t-step-1);
    box-shadow: none;
  }
  .site-header .mega-title {
    color: var(--t-muted);
    font-size: var(--t-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }
  .site-header .mega-link, .site-header .mega-featured-link { border-radius: 0; }
  .site-header .mega-featured-link {
    border: 0;
    background: #231d33;
    background-image: none;
  }
  .site-header .mega-featured-tag { border: 0; border-radius: 0; background: rgba(182, 154, 255, 0.18); text-transform: none; letter-spacing: 0; }
  .site-header .nav-link, .site-header .header-cart-link, .site-header .header-action-link { border-radius: 0; }
  .site-header .nav-indicator { border-radius: 0; }
}

/* Footer: tone step, no hairlines or glow. */
.footer { background: var(--t-step-1); border-top: 0; }
.footer .footer-bottom, .footer-payments { border: 0; }
.footer-cta { background-color: var(--t-step-2); }

/* ---------- Second pass: the boxes the first list missed ----------
   Found by scanning every page for elements that still had a border and a
   rounded corner. */
:root:root body :is(.cell, .mc-infra-item, .mc-faq-item, .dp-faq-item, .about-card, .about-email-card,
  .about-contact-card, .about-stat, .mh-game-tile, .mh-service, .mh-why-cell, .bm-plan-card, .bm-panel,
  .qa-card, .qa-attack-card, .qa-card-item, .qa-details, .infra-stat-card, .infra-loc-card, .dp-limit,
  .dp-limit-note, .gh-spec-strip, .gh-cta-inner, .bm-split-media, .team-avatar) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  background-color: var(--t-step-2);
}
:root:root body main > section:nth-of-type(even) :is(.cell, .mc-infra-item, .mc-faq-item, .dp-faq-item,
  .about-card, .about-stat, .mh-game-tile, .mh-service, .mh-why-cell, .bm-plan-card, .qa-card, .infra-stat-card,
  .infra-loc-card, .dp-limit) { background-color: #1e1e25; }
/* Icons on top of identical cards are decoration; the title already says it. */
:root:root body :is(.about-card, .infra-spec-card, .dp-cap-card, .mc-feature-card, .gh-feature-card) :is([class*="-icon"], .icon) { display: none; }

/* Tiny uppercase caption over the hero video and the pill chips under the
   buttons: the headline and buttons already say it. Chips become flat tags. */
:root:root body .mh-hero-scene-label { display: none; }
:root:root body .mh-hero :is(ul, ol) > li {
  border: 0;
  border-radius: 0;
  background: var(--t-step-2);
  box-shadow: none;
}

/* Buttons: filled and flat; square like the rest of the system. */
:root:root body :is(.mc-buy, .mc-add-cart, .vm-plan-buy, .bm-plan-buy, .vps-card-cta) {
  border: 0;
  background: #2a2a33;
  color: var(--t-ink);
}
:root:root body :is(.mc-buy, .mc-add-cart, .vm-plan-buy, .bm-plan-buy, .vps-card-cta):hover { background: #34343e; }
:root:root body :is(.btn, .btn-primary, .mc-buy, .mc-add-cart, .vm-plan-buy, .bm-plan-buy, .vps-card-cta,
  .mc-plan-badge, .mh-plan-badge, .bm-plan-badge, .site-header .btn, .footer .btn) { border-radius: 0; }
:root:root body .btn:not(.btn-primary) { border: 0; background: #26262d; color: var(--t-ink); }
:root:root body .btn:not(.btn-primary):hover { background: #30303a; }
/* Page-specific button families (outlined secondary buttons become filled). */
:root:root body :is(.mh-btn, .vm-btn, .mc-btn, .bm-btn, .gh-btn, .dp-btn) { border-radius: 0; box-shadow: none; }
:root:root body :is(.mh-btn, .vm-btn, .mc-btn, .bm-btn, .gh-btn, .dp-btn):not([class*="primary"]):not([class*="solid"]):not([class*="white"]) {
  border: 0;
  background: #26262d;
  color: var(--t-ink);
}
:root:root body :is(.mh-btn, .vm-btn, .mc-btn, .bm-btn, .gh-btn, .dp-btn):not([class*="primary"]):not([class*="solid"]):not([class*="white"]):hover { background: #30303a; }
:root:root body .about-email-card { border: 0; border-radius: 0; background-color: var(--t-step-2); }

/* ---------- Readability ----------
   A scan of 22 pages found ~600 text nodes under 13px (spec labels, badges,
   "/ month", footer headings, plan taglines). Nothing meant to be read should
   sit below 13px; values and descriptions get 14px. */
:root:root body :is(.mc-plan-specs, .bm-plan-specs, .vm-plan-specs, .vps-card-specs, .mh-plan-specs, .gh-plan-specs) :is(li, span, strong, small) {
  font-size: 0.875rem;
}
:root:root body :is(.vm-plan-spec, .vm-plan-pricing, .vm-plan-pricing p) span { font-size: 0.8125rem; }
:root:root body :is(.mh-plan-price, .vps-card-price, .bm-plan-price, .vm-plan-price) small,
:root:root body :is(.bm-plan-price, .strong, .dd) span { font-size: 0.8125rem; }
:root:root body :is(.mc-plan-tagline, .vps-card-tag, .mh-plan-tag, .bm-plan-tag, .sw-desc, .sw-text span,
  .svc-tag, .svc-badge, .gh-status-badge, .mc-plan-badge, .mh-plan-badge, .bm-plan-badge, .infra-loc-badge,
  .vm-stat-label, .bm-stat-label, .about-stat-label, .infra-spec-label, .spec-item-label,
  .config-item-label, .gh-spec-label, .order-row-label, .order-row-value, .vm-plan-code, .bm-plan-per,
  .qa-updated, .infra-loc-region, .vm-plan-buy, .bm-plan-buy) {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
:root:root body .mc-plan-tagline { font-size: 0.875rem; }
/* Third sweep (whole-site audit): the last small headings and labels. */
:root:root body :is(.mc-infra-item h4, .vps-os-card h4, .qa-attack-card h4, .vm-plan-id p, .vm-quick-plan-specs span,
  .gh-crumbs a, .policy-toc-title, .cart-note, .checkout-price-clarity, .promo-label, .promo-btn, .promo-msg,
  .empty-badge, .infra-note) {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
:root:root body .mc-infra-item h4 { font-size: 0.9375rem; font-weight: 550; color: var(--t-ink); }
/* Metadata lines (date, author, read time). */
:root:root body :is(.policy-updated, .qa-updated, time) { font-size: 0.8125rem; }
:root:root body main :is(th, caption) { font-size: 0.8125rem; letter-spacing: 0.01em; text-transform: none; }
:root:root body main :is(label, .btn) { font-size: max(0.8125rem, 1em); }

/* Last outlined, rounded boxes found by the audit: FAQ accordions, policy
   callouts, cart rows, notices, tables of contents. Filled tone steps instead. */
:root:root body :is(main details, .policy-highlight, .policy-head, .policy-updated, .policy-callout, .ownership-card,
  .cart-item, .cart-summary, .notice-box, .toc, .co-empty-card, .checkout-hero-art, .mc-hero-specs, .svc-hero-card) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  background-color: var(--t-step-2);
}
/* Some pages style <details> with an inline style attribute, which only
   !important can override. */
:root:root body main details[style] {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--t-step-2) !important;
}
/* Feature list items and hero tags: filled tags/rows, no outlines. */
:root:root body :is(.vm-feature-list li, .dp-hero-tags span, .dp-chips span, .vm-chips li, .bm-chips li) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--t-step-2);
}
:root:root body main details { padding: 1rem 1.25rem; }
:root:root body main details + details { margin-top: 2px; }
:root:root body main details > summary { font-weight: 550; color: var(--t-ink); cursor: pointer; }

/* Boxes inside plan cards: filled tone step instead of outlined, rounded boxes. */
:root:root body :is(.vm-plan-pricing p, .vm-plan-specs) {
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
}
:root:root body .vm-plan-specs { background: transparent; }
:root:root body :is(.vm-plan, .bm-plan, .vm-quick-plan)::before { display: none; }
/* Second sweep: chips, marquee, cart and checkout labels. */
:root:root body :is(.gh-game-spec span, .bm-marquee-track span, .dp-chips span, .vm-chips li, .bm-chips li,
  .cart-spec, .cart-item-type, .cart-controls label, .checkout-section-hint, .checkout-breadcrumb,
  .checkout-breadcrumb a, .consent-text a, .co-quick-pick span, .cs-lbl, .lbl, .save, .period, .cycle-hint,
  .order-plan-sub, .order-config, .order-total-label, .checkout-hero-price small, .vm-crumbs,
  .vm-crumbs a, .vm-crumbs span, .vm-quick-plan-price span, .vm-quick-plan-link, .feature-head,
  .bm-media-cap, .dp-cap-item p, .qa-attack-card span, .strong small, strong > small, dl dt, dl dd span,
  .mh-game-tile-info span, .bm-crumbs, .bm-crumbs a, .bm-crumbs span, .bm-hero-cap-spec, .bm-credits) {
  font-size: 0.8125rem;
}
/* More index numbering on the homepage ("01", "02"). */
:root:root body :is(.mh-service-no, .mh-why-no) { display: none; }

/* Footer: no decorative arc, readable column headings and links. */
:root:root body .footer-swoosh { display: none; }
:root:root body .footer :is(.footer-col-heading, .footer-col-drawer summary) {
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-ink);
}
:root:root body .footer :is(.footer-col a, .footer-legal a) { font-size: 0.9375rem; line-height: 1.5; }
:root:root body .footer-status-dot { width: 8px; height: 8px; }
/* The column chevrons only mean something in the phone accordion. */
@media (min-width: 1025px) {
  :root:root body .footer-col-drawer summary::after,
  :root:root body .footer-col-drawer summary::marker,
  :root:root body .footer-col-drawer summary svg { display: none; content: none; }
}

/* Cart count badge: it was white on white (--brand-red is not defined in this
   theme), so a cart with items showed an empty white dot. Accent fill, dark
   number, readable size. */
:root:root body .site-header .header-cart-link { position: relative; }
:root:root body .vh-cart-badge {
  top: -6px;
  right: -6px;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--t-accent);
  color: var(--t-accent-ink);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.15rem;
}
/* Header: the cart sits as a flat square like every other control. */
:root:root body .site-header .header-cart-link {
  border: 0;
  border-radius: 0;
  background: var(--t-step-2);
}
:root:root body .site-header .header-cart-label { font-size: 0.875rem; }

/* ---------- Articles (guides, comparisons, blog posts) ----------
   Used by vds-vs-bare-metal, bare-metal-guide, ddos-protection-explained,
   best-minecraft-hosting-india. Built for reading: a 17px body in a lighter
   grey, a heading scale that stays close to the body, a table that reads like
   a table. */
:root:root body .post {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #c9c8d1;
}
:root:root body .post :is(p, li) { max-width: 68ch; }
:root:root body .post p { margin-block: 0 1.15rem; }
:root:root body .post strong { color: var(--t-ink); font-weight: 600; }
:root:root body .post a { color: #d4c6ff; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:root:root body .post :is(h2, h3) { max-width: 24ch; text-wrap: balance; }
:root:root body .post h2 {
  font-size: clamp(1.5rem, 2.3vw, 1.9rem);
  font-weight: 550;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 3.25rem 0 0.85rem;
}
:root:root body .post h3 { font-size: 1.25rem; margin: 2.25rem 0 0.6rem; }
:root:root body .post :is(img, figure img) { border-radius: 0; }
:root:root body .post figure { margin: 2.25rem 0; }
:root:root body .post figcaption { margin-top: 0.7rem; font-size: 0.875rem; color: var(--t-muted); max-width: 68ch; }
:root:root body .post-meta { font-size: 0.875rem; color: var(--t-muted); margin-bottom: 1.5rem; }
:root:root body .post-tag { font-size: 0.875rem; text-transform: none; letter-spacing: 0; }

:root:root body .post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  color: #c9c8d1;
}
:root:root body .post-table :is(th, td) {
  padding: 0.9rem 1.1rem;
  text-align: left;
  border: 0;
  vertical-align: top;
}
:root:root body .post-table th {
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-ink);
  background: var(--t-step-2);
}
:root:root body .post-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
:root:root body .post-table tbody tr :is(th, td):first-child { color: var(--t-ink); font-weight: 550; }
:root:root body .qa-table-wrap { margin: 1.5rem 0 2.5rem; overflow-x: auto; }
:root:root body .qa-table-wrap + p, :root:root body .post .qa-table-caption { font-size: 0.875rem; color: var(--t-muted); }
/* The "Guide" label above the title is an eyebrow; the title already says it. */
:root:root body:has(.post) main > section:first-of-type .container > p[style*="uppercase"] { display: none; }
:root:root body:has(.post) main > section:first-of-type .container > p:not([style*="uppercase"]) {
  font-size: 1.125rem;
  line-height: 1.55;
  color: #c9c8d1;
  max-width: 56ch;
}

/* Article layout on desktop: the title and text start on the same left edge as
   the logo, and a sticky "On this page" list (js/article.js) fills the right.
   The inline max-width:780px on these pages is why !important is needed. */
@media (min-width: 1025px) {
  :root:root body:has(.post) main > section .container[style*="max-width"] {
    max-width: none !important;
    width: min(100% - 2 * var(--gutter), var(--container));
  }
  :root:root body:has(.post) main > section:nth-of-type(2) .container {
    display: grid;
    grid-template-columns: minmax(0, 44rem) 15rem;
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
  :root:root body:has(.post) main > section:nth-of-type(2) .container > :is(.post-fact-strip, .post-meta, .post) { grid-column: 1; }
  :root:root body:has(.post) .post-toc {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    top: calc(var(--header-h, 4.25rem) + 2rem);
    padding-top: 0.35rem;
  }
}
/* ---------- Article pages, redesign ----------
   Three changes that turn a wall of text into something you can scan:
   1. a strip of real facts (taken from the article itself) before the text,
   2. the "which one should you pick" list as three separate cards,
   3. a plain meta line instead of a "Guide" chip. */
:root:root body .post-fact-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 0 0 2.5rem;
}
:root:root body .post-fact-strip > * {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.35rem 1.4rem;
  background: var(--t-step-2);
  color: var(--t-ink);
  text-decoration: none;
}
:root:root body .post-fact-strip span { font-size: 0.875rem; color: var(--t-muted); }
:root:root body .post-fact-strip strong {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
:root:root body .post-fact-strip small { font-size: 0.9375rem; font-weight: 400; color: var(--t-muted); letter-spacing: 0; }
:root:root body .post-fact-strip em { font-style: normal; font-size: 0.9375rem; line-height: 1.4; color: var(--t-muted); }
:root:root body .post-fact-strip a { transition: background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  :root:root body .post-fact-strip a:hover { background: #1d1d24; }
}
:root:root body .post-fact-strip a:active { transform: scale(0.99); }

:root:root body .post-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
:root:root body .post-tag { display: none; }

/* The decision list: each option is its own card, the label is the card's heading. */
:root:root body .post ul {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: 1.5rem 0 2.25rem;
  padding: 0;
}
:root:root body .post ul > li {
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 1.25rem 1.4rem 1.35rem;
  background: var(--t-step-2);
}
:root:root body .post ul > li > strong:first-child {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t-ink);
}
:root:root body .post :is(figure, .qa-table-wrap, ul) + p { margin-top: 0.5rem; }
:root:root body .post-table td:last-child { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  :root:root body .post-fact-strip { grid-template-columns: minmax(0, 1fr); }
}

/* Article titles run two lines in the text column, not the full page width. */
:root:root body:has(.post) main > section:first-of-type h1 { max-width: 22ch; }
:root:root body .post-toc-title {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--t-ink);
}
:root:root body .post-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
:root:root body .post-toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 2px solid var(--t-step-2);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--t-muted);
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}
:root:root body .post-toc a[aria-current="true"] { color: var(--t-ink); border-left-color: var(--t-accent); }
@media (hover: hover) and (pointer: fine) {
  :root:root body .post-toc a:hover { color: var(--t-ink); }
}
/* On a phone the list would only push the article down; it sits after the text. */
@media (max-width: 1024px) {
  :root:root body .post-toc { display: none; }
}

/* ---------- Homepage rhythm ----------
   Minecraft, Hytale and VPS used to be three identical four-card grids. The
   VPS section becomes a price list: one row per plan, specs side by side. */
@media (min-width: 1025px) {
  :root:root body #vps-plans .vps-cards { grid-template-columns: 1fr; gap: 2px; }
  :root:root body #vps-plans .vps-card {
    display: grid;
    grid-template-columns: minmax(200px, 1.2fr) 150px minmax(0, 3fr) auto;
    align-items: center;
    gap: 2rem;
    padding: 1.25rem 1.75rem;
  }
  :root:root body #vps-plans .vps-card-head { min-width: 0; }
  :root:root body #vps-plans .vps-card-price { margin: 0; white-space: nowrap; }
  :root:root body #vps-plans .vps-card-specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :root:root body #vps-plans .vps-card-specs li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border: 0;
    padding: 0;
  }
  :root:root body #vps-plans .vps-card-specs span { color: var(--t-muted); font-size: 0.8125rem; }
  :root:root body #vps-plans .vps-card-specs strong { font-weight: 550; text-align: left; max-width: none; }
  :root:root body #vps-plans .vps-card-cta { white-space: nowrap; padding-inline: 1.5rem; }
}

@media (max-width: 520px) {
  /* Whole-sentence titles need a smaller step on a 375px screen. */
  :root:root body :is(.mc-hero-title, .dp-hero-title, .gh-hero-title) { font-size: 1.75rem; letter-spacing: -0.03em; }
}
@media (max-width: 520px) {
  :root:root body :is([class*="hero-title"], [class*="hero-heading"], .vm-h1, .bm-h1,
    .gh-hero-grid h1, .mc-hero-grid h1, .bm-hero-grid h1, .vm-hero-grid h1) { font-size: 2rem; }
}

/* Phone: recompose, don't shrink. */
@media (max-width: 760px) {
  :root { --t-section-gap: clamp(4.5rem, 16vw, 7rem); }
  :root:root body :is(main h1, [class*="hero-title"], [class*="hero-heading"], .vm-h1, .bm-h1) { max-width: none; }
  .btn, .mc-buy, .mc-add-cart { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Footer
   One calm block: a call-to-action band, then brand + four link columns on
   the same grid as the page, then a plain bottom row. No boxes behind the
   columns, no hairlines, no pulsing dot. Phone keeps the accordion.
   ========================================================================== */
:root:root body .footer {
  background: var(--t-step-1);
  padding-block: 0 clamp(1.75rem, 3vw, 2.5rem);
}
:root:root body .footer .container { padding-top: clamp(3rem, 6vw, 5rem); }

/* --- Call-to-action band --- */
:root:root body .footer-cta {
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.8fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  background: var(--t-step-2);
}
:root:root body .footer-cta-title {
  max-width: 22ch;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  font-weight: 550;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
:root:root body .footer-cta-lede { max-width: 50ch; font-size: 1rem; line-height: 1.55; color: var(--t-muted); }
:root:root body .footer-trust { border: 0; padding: 0; gap: 0.7rem; }
:root:root body .footer-trust li { border: 0; padding: 0; font-size: 0.9375rem; color: var(--t-muted); }
:root:root body .footer-trust strong { font-size: 1.125rem; color: var(--t-ink); }
:root:root body .footer-cta-actions .btn { min-height: 46px; }
:root:root body .footer-cta-actions .btn:hover { transform: none; }

/* --- Brand + link columns --- */
:root:root body .footer .footer-top {
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding: 0;
}
:root:root body .footer-brand .brand { gap: 0.75rem; font-size: 1.15rem; }
:root:root body .footer-brand .brand img {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--t-step-2);
}
:root:root body .footer-brand p {
  max-width: 32ch;
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--t-muted);
}
/* Status link: a dot and words, not a pill. The dot is neutral on purpose; real
   state lives on the status page. */
:root:root body .footer-status {
  margin-top: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.9375rem;
  color: var(--t-ink);
  white-space: normal;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 0.25em;
}
@media (hover: hover) and (pointer: fine) {
  :root:root body .footer-status:hover { transform: none; text-decoration-color: currentColor; }
}
:root:root body .footer-col { background: none; padding: 0; border: 0; }
:root:root body .footer-col-drawer { background: none; padding: 0; border: 0; }
:root:root body .footer :is(.footer-col-heading, .footer-col-drawer summary) {
  padding: 0;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-ink);
}
:root:root body .footer-col-panel { gap: 0.15rem; margin: 1rem 0 0; }
:root:root body .footer .footer-col a {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--t-muted);
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  :root:root body .footer .footer-col a:hover { color: var(--t-ink); transform: none; }
}

/* --- Bottom row --- */
:root:root body .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: 0;
  border: 0;
  font-size: 0.875rem;
  color: var(--t-muted);
}
:root:root body .footer-bottom p { margin: 0; }

/* Desktop/tablet: columns are plain lists, not accordions. */
@media (min-width: 768px) {
  :root:root body .footer :is(.footer-col-heading, .footer-col-drawer summary) { pointer-events: none; cursor: default; }
  :root:root body .footer .footer-col-heading::after { display: none; }
}

/* Laptop: the CTA drops its middle column. */
@media (max-width: 1024px) {
  :root:root body .footer-cta { grid-template-columns: minmax(0, 1fr) auto; }
  :root:root body .footer-trust { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 0.5rem 2rem; }
  :root:root body .footer .footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :root:root body .footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  :root:root body .footer-cta { grid-template-columns: minmax(0, 1fr); }
  :root:root body .footer-cta-actions { grid-column: 1; grid-row: auto; flex-direction: row; justify-content: flex-start; }
  :root:root body .footer-cta-actions .btn { min-width: 0; flex: 1 1 9rem; }
}
/* Phone: one column, each link group an accordion row. */
@media (max-width: 767px) {
  :root:root body .footer .footer-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :root:root body .footer .footer-brand { margin-bottom: 2rem; }
  :root:root body .footer-col { margin-top: 2px; }
  :root:root body .footer-col-drawer { background: var(--t-step-2); padding: 0 1.1rem; }
  :root:root body .footer .footer-col-heading { padding: 1rem 0; min-height: 48px; }
  :root:root body .footer .footer-col-panel { margin: 0 0 0.9rem; }
  :root:root body .footer .footer-col a { padding: 0.55rem 0; }
  :root:root body .footer-bottom { flex-direction: column; margin-top: 2.5rem; }
}

/* ==========================================================================
   Footer, second pass (taste-skill layout + Emil Kowalski interaction rules)
   Idea from the subject: a hosting company sells hardware and numbers, so the
   closing call-to-action is one solid accent field with the three proof points
   set large, and the brand name closes the page at display size.
   ========================================================================== */
:root:root body .footer-cta {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 6vw, 6rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--t-accent);
  color: var(--t-accent-ink);
}
:root:root body .footer-cta > div:first-child { grid-column: 1; grid-row: 1; }
:root:root body .footer-cta-title {
  max-width: 15ch;
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--t-accent-ink);
  text-wrap: balance;
}
:root:root body .footer-cta-lede {
  max-width: 44ch;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(23, 16, 32, 0.8);
}
:root:root body .footer-cta-actions {
  grid-column: 1;
  grid-row: 2;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.6rem;
}
:root:root body .footer-cta-actions .btn {
  min-width: 0;
  min-height: 50px;
  padding-inline: 1.6rem;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
:root:root body .footer-cta-actions .btn-primary { background: var(--t-accent-ink); color: #fff; }
:root:root body .footer-cta-actions :is(.btn-outline, .btn-secondary) { background: rgba(23, 16, 32, 0.12); color: var(--t-accent-ink); }
@media (hover: hover) and (pointer: fine) {
  :root:root body .footer-cta-actions .btn-primary:hover { background: #2b2040; }
  :root:root body .footer-cta-actions :is(.btn-outline, .btn-secondary):hover { background: rgba(23, 16, 32, 0.2); }
}
:root:root body .footer-cta-actions .btn:active { transform: scale(0.97); }

/* The three proof points, large. */
:root:root body .footer-trust {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
  border: 0;
}
:root:root body .footer-trust li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0;
  border: 0;
  font-size: 1rem;
  color: rgba(23, 16, 32, 0.75);
}
:root:root body .footer-trust strong {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--t-accent-ink);
}

/* --- Link hover: colour only, mouse only, fast (Emil: hover is a frequent action) --- */
:root:root body .footer .footer-col a { transition: color 150ms ease; }

/* --- Brand name at display size closes the page --- */
:root:root body .footer-bottom { align-items: baseline; }
:root:root body .footer .container::after {
  content: "MoradoSolution";
  display: block;
  margin-top: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 12.2vw, 12rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.85;
  white-space: nowrap;
  color: #20202a;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 1024px) {
  :root:root body .footer-cta { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  :root:root body .footer-cta > div:first-child,
  :root:root body .footer-cta-actions,
  :root:root body .footer-trust { grid-column: 1; grid-row: auto; }
  :root:root body .footer-trust { flex-direction: row; flex-wrap: wrap; gap: 1.25rem 2.5rem; padding-top: 0.5rem; }
  :root:root body .footer-trust li { flex: 1 1 9rem; }
}
@media (max-width: 520px) {
  :root:root body .footer-cta-actions { flex-direction: column; }
  :root:root body .footer-cta-actions .btn { width: 100%; min-height: 52px; }
  :root:root body .footer .container::after { font-size: 11.6vw; }
}
@media (prefers-reduced-motion: reduce) {
  :root:root body .footer-cta-actions .btn:active { transform: none; }
}

/* ==========================================================================
   /infrastructure
   The page used to be one layout repeated: heading, then a grid of identical
   boxes. Each section now has its own shape: a spec sheet, big proof numbers,
   plain rows, location tiles, and a left-aligned closing strip.
   ========================================================================== */

/* Hero buttons: filled and flat like every other button. */
:root:root body:has(.infra-hero) :is(.hero-cta-primary, .hero-cta-secondary) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
:root:root body:has(.infra-hero) .hero-cta-primary { background: var(--t-accent); color: var(--t-accent-ink); }
:root:root body:has(.infra-hero) .hero-cta-secondary { background: var(--t-step-2); color: var(--t-ink); }
:root:root body:has(.infra-hero) :is(.hero-cta-primary, .hero-cta-secondary):active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  :root:root body:has(.infra-hero) .hero-cta-primary:hover { background: #c9b5ff; }
  :root:root body:has(.infra-hero) .hero-cta-secondary:hover { background: #24242c; }
}

/* Quick answer: not a boxed wall. The first paragraph leads; the rest reads at body size. */
:root:root body:has(.infra-hero) .qa-card { padding: 0; background: none; max-width: 46rem; }
:root:root body:has(.infra-hero) .qa-updated { margin: 0 0 1rem; font-size: 0.875rem; color: var(--t-muted); }
:root:root body:has(.infra-hero) .qa-lede {
  margin: 0 0 2.5rem;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: #d4d3dc;
}
:root:root body:has(.infra-hero) .qa-h { margin: 0 0 0.6rem; font-size: 1.25rem; font-weight: 550; color: var(--t-ink); }
:root:root body:has(.infra-hero) .qa-p { font-size: 1.0625rem; line-height: 1.65; color: var(--t-muted); }
:root:root body:has(.infra-hero) .qa-link { color: #d4c6ff; text-decoration: underline; text-underline-offset: 0.2em; }

/* Specifications: a spec sheet, one row per fact. */
:root:root body:has(.infra-hero) .infra-figure { margin: 2rem 0 2.5rem; }
:root:root body:has(.infra-hero) .infra-figure img { border-radius: 0; width: 100%; height: auto; }
:root:root body:has(.infra-hero) .infra-figure figcaption { font-size: 0.875rem; }
:root:root body:has(.infra-hero) .infra-spec-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 0; }
:root:root body:has(.infra-hero) .infra-spec-card {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem 2rem;
  padding: 1.2rem 1.5rem;
  transform: none;
}
:root:root body:has(.infra-hero) .infra-spec-icon { display: none; }
:root:root body:has(.infra-hero) .infra-spec-label { font-size: 0.9375rem; letter-spacing: 0; text-transform: none; color: var(--t-muted); }
:root:root body:has(.infra-hero) .infra-spec-value {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--t-ink);
}
:root:root body:has(.infra-hero) .infra-spec-detail { font-size: 0.9375rem; color: var(--t-muted); }
:root:root body:has(.infra-hero) .infra-note { font-size: 0.9375rem; color: var(--t-muted); }

/* Density: the three numbers are the section. */
:root:root body:has(.infra-hero) .infra-stat-grid { gap: clamp(1.5rem, 4vw, 4rem); margin: 2.5rem 0 3.5rem; }
:root:root body:has(.infra-hero) .infra-stat-card { padding: 0; align-items: flex-start; text-align: left; background: none; }
/* The alternating-section rule gives cards a fill; these numbers sit on the page. */
:root:root body:has(.infra-hero) main section .container .infra-stat-grid .infra-stat-card { background: none; }
:root:root body:has(.infra-hero) .infra-stat-value {
  font-size: clamp(2.75rem, 1.4rem + 4.8vw, 5.25rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--t-ink);
}
:root:root body:has(.infra-hero) .infra-stat-label { max-width: 24ch; margin-top: 0.7rem; font-size: 1rem; line-height: 1.45; color: var(--t-muted); }

/* Feature lists: flat tone-step blocks; three shapes (rows, 2-up, 3-up). */
:root:root body:has(.infra-hero) .infra-feature-grid { gap: 2px; margin-top: 2rem; }
:root:root body:has(.infra-hero) .infra-feature-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--t-step-2);
  padding: 1.35rem 1.5rem 1.5rem;
  transform: none;
}
:root:root body:has(.infra-hero) .infra-feature-card::before { display: none; }
:root:root body:has(.infra-hero) .infra-feature-card h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--t-ink); margin: 0 0 0.4rem; }
:root:root body:has(.infra-hero) .infra-feature-card p { font-size: 0.9375rem; line-height: 1.6; color: var(--t-muted); }
:root:root body:has(.infra-hero) .infra-feature-grid--list { grid-template-columns: minmax(0, 1fr); }
:root:root body:has(.infra-hero) .infra-feature-grid--list .infra-feature-card {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem 2rem;
}
:root:root body:has(.infra-hero) .infra-feature-grid--list .infra-feature-card h3 { margin: 0; }
:root:root body:has(.infra-hero) .infra-feature-grid--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Locations: the city is the content. */
:root:root body:has(.infra-hero) .infra-loc-grid { gap: 2px; margin: 2rem 0 2.5rem; }
:root:root body:has(.infra-hero) .infra-loc-card { padding: 1.5rem 1.5rem 1.6rem; gap: 0.5rem; }
:root:root body:has(.infra-hero) .infra-loc-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
:root:root body:has(.infra-hero) .infra-loc-header h3 { order: 2; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-weight: 500; letter-spacing: -0.03em; }
:root:root body:has(.infra-hero) .infra-loc-badge {
  order: 1;
  padding: 0.2rem 0.6rem;
  border-radius: 0;
  background: rgba(182, 154, 255, 0.16);
  color: #d7c8ff;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}
:root:root body:has(.infra-hero) .infra-loc-region { font-size: 0.9375rem; color: var(--t-muted); }

/* Closing strip: left-aligned, one decision. */
.infra-cta { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 7vw, 6rem); }
.infra-cta .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--t-step-2);
}
.infra-cta h2 { margin: 0 0 0.6rem; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; max-width: 20ch; }
.infra-cta p { margin: 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.55; color: var(--t-muted); }
.infra-cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.infra-cta-actions .btn { min-height: 50px; padding-inline: 1.5rem; }

@media (max-width: 900px) {
  :root:root body:has(.infra-hero) .infra-spec-card { grid-template-columns: 9rem minmax(0, 1fr); }
  :root:root body:has(.infra-hero) .infra-spec-detail { grid-column: 2; }
  :root:root body:has(.infra-hero) .infra-feature-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root:root body:has(.infra-hero) .infra-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root:root body:has(.infra-hero) .infra-spec-card,
  :root:root body:has(.infra-hero) .infra-feature-grid--list .infra-feature-card { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  :root:root body:has(.infra-hero) .infra-spec-detail { grid-column: 1; }
  :root:root body:has(.infra-hero) .infra-feature-grid--tiles,
  :root:root body:has(.infra-hero) .infra-feature-grid,
  :root:root body:has(.infra-hero) .infra-loc-grid,
  :root:root body:has(.infra-hero) .infra-stat-grid { grid-template-columns: minmax(0, 1fr); }
  :root:root body:has(.infra-hero) .infra-stat-grid { gap: 2rem; }
  .infra-cta-actions { width: 100%; }
  .infra-cta-actions .btn { flex: 1 1 100%; }
}

/* ---------- /infrastructure, second pass ---------- */

/* Quick answer: the section fill lands on .qa-card (the alternating-section rule),
   which left the text flush against the box edge. It sits on the page instead. */
:root:root body:has(.infra-hero) main section .container .qa-card { background: none; padding: 0; }
:root:root body:has(.infra-hero) .qa-card .qa-title { margin-bottom: 1.25rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); max-width: 22ch; }
:root:root body:has(.infra-hero) .qa-lede { margin-bottom: 1.5rem; }
/* The three supporting statements are separate points, not part of one paragraph. */
:root:root body:has(.infra-hero) .qa-points {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: 0 0 3rem;
  padding: 0;
}
:root:root body:has(.infra-hero) .qa-points li {
  padding: 1.1rem 1.4rem 1.2rem;
  background: var(--t-step-2);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #c9c8d1;
}

/* Jump links: sticky under the header, colour-only state, one thick bar on the active link. */
.section-nav {
  position: sticky;
  top: var(--header-h, 4.25rem);
  z-index: 30;
  background: var(--t-ground);
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav ul {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.section-nav a {
  display: block;
  padding: 1rem 0 0.8rem;
  border-bottom: 2px solid transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--t-muted);
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}
.section-nav a[aria-current="true"] { color: var(--t-ink); border-bottom-color: var(--t-accent); }
@media (hover: hover) and (pointer: fine) {
  .section-nav a:hover { color: var(--t-ink); }
}
html { scroll-padding-top: calc(var(--header-h, 4.25rem) + 3.5rem); }
@media (prefers-reduced-motion: reduce) {
  .section-nav a { transition: none; }
}

/* ---------- VPS and bot pages: the extras row and plan codes ----------
   "Additional IPs", "Test VPS" and "EMI" were rounded, outlined boxes (and,
   by mistake, button-coloured). Flat tone-step blocks now. */
:root:root body :is(.vm-plan-extra, .vm-plan-extra--test) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: none;
  background-color: var(--t-step-2);
  color: var(--t-ink);
}
:root:root body .vm-plan-extra .vm-eyebrow { display: none; }
:root:root body .vm-plan-extra > p:not(.vm-plan-promise) { font-size: 0.9375rem; line-height: 1.55; color: var(--t-muted); }
:root:root body .vm-plan-promise { font-size: 0.9375rem; color: var(--t-muted); }
:root:root body .vm-plan-code { border: 0; border-radius: 0; background: rgba(255, 255, 255, 0.06); }
/* The four numbers under the hero: outlined, rounded tiles on a phone. */
@media (max-width: 900px) {
  :root:root body .vm-stat { border: 0; border-radius: 0; background: var(--t-step-2); }
}

/* ---------- /bot-hosting ----------
   The page was the VPS page with a new headline and no way to reach the
   products bots actually use. A routing section sends people to Node.js,
   Lavalink or a full VPS, and the section headings line up with the hero. */
.bot-paths { padding-block: clamp(3.5rem, 7vw, 6rem) 0; }
:root:root body:has(.bot-paths) .vm-head { text-align: left; align-items: flex-start; margin-inline: 0; max-width: 46rem; }
:root:root body:has(.bot-paths) .vm-head-desc { margin-inline: 0; text-align: left; }
.bot-path-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-top: 2.25rem;
}
.bot-path {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--t-step-2);
  color: var(--t-ink);
  text-decoration: none;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.bot-path-kind { font-size: 1rem; font-weight: 550; color: var(--t-ink); }
.bot-path-price {
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bot-path-price small { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--t-muted); }
.bot-path-desc { flex: 1; max-width: 34ch; font-size: 0.9375rem; line-height: 1.55; color: var(--t-muted); }
.bot-path-cta { margin-top: 0.75rem; font-size: 0.9375rem; font-weight: 550; color: #d4c6ff; }
.bot-path:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .bot-path:hover { background: #1d1d24; }
}
@media (max-width: 860px) {
  .bot-path-list { grid-template-columns: minmax(0, 1fr); }
  .bot-path-desc { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bot-path { transition: none; }
  .bot-path:active { transform: none; }
}

/* /bot-hosting pictures: a photo on each setup tile and a "where it runs" band.
   Photos are the project's own CC0 / site images (assets/IMAGES.md). No motion
   on images: they load lazily and stay put. */
.bot-path { --bot-pad: clamp(1.5rem, 2.4vw, 2rem); padding: 0 var(--bot-pad) var(--bot-pad); }
.bot-path-img {
  display: block;
  margin: 0 calc(-1 * var(--bot-pad)) 0.9rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--t-step-1);
}
.bot-path-img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }

.bot-site { padding-block: clamp(3.5rem, 7vw, 6rem) 0; }
.bot-site-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.bot-site-copy .vm-h2 { max-width: 14ch; }
.bot-site-copy .vm-head-desc { max-width: 40ch; margin-top: 1rem; }
.bot-site-facts { list-style: none; display: grid; gap: 2px; margin: 2rem 0 0; padding: 0; }
.bot-site-facts li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--t-step-2);
}
.bot-site-facts strong { font-size: 1.25rem; font-weight: 550; letter-spacing: -0.02em; color: var(--t-ink); }
.bot-site-facts span { font-size: 0.9375rem; color: var(--t-muted); }
.bot-site-fig { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--t-step-1); }
.bot-site-fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
@media (max-width: 900px) {
  .bot-site-grid { grid-template-columns: minmax(0, 1fr); }
  .bot-site-fig { order: -1; aspect-ratio: 16 / 9; }
  .bot-site-copy .vm-h2, .bot-site-copy .vm-head-desc { max-width: none; }
}

/* Rarer pictures: crop each to its subject (the patch-panel photo is portrait). */
.bot-path:nth-child(1) .bot-path-img img { object-position: 55% 45%; }
.bot-path:nth-child(2) .bot-path-img img { object-position: 50% 52%; }
.bot-path:nth-child(3) .bot-path-img img { object-position: 45% 40%; }
.bot-site-fig img { object-position: 50% 40%; }

/* Hero plan card: at tablet width the VPS stylesheet turns the card into a
   photo + content grid. This card has no photo, so the content was squeezed
   into the narrow first column and the second stayed empty. One column. */
:root:root body .vm-quick-plan:not(:has(.vm-quick-plan-photo)) { grid-template-columns: minmax(0, 1fr); }
:root:root body .vm-quick-plan { border-radius: 0; }
@media (min-width: 720px) {
  :root:root body .vm-quick-plan:not(:has(.vm-quick-plan-photo)) { display: block; }
}
:root:root body .vm-quick-plan-heading { align-items: flex-start; gap: 1rem; }
:root:root body .vm-quick-plan-price { text-align: right; flex-shrink: 0; }
:root:root body .vm-quick-plan-price span { display: block; font-size: 0.8125rem; }

/* ==========================================================================
   Design system, global layer (Taste skill: colour, forms, states, motion)
   ========================================================================== */
:root { color-scheme: dark; }

/* Preloader: the Taste skill lists preloaders and entry gates as things to avoid. */
.boot-overlay { display: none !important; }

/* Focus: one ring everywhere, 2px accent with a 2px offset. */
:root:root body :is(a, button, summary, [role="button"], [tabindex]):focus-visible,
:root:root body :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
  box-shadow: none;
}
:root:root body :is(a, button):focus:not(:focus-visible) { outline: none; }

/* Fields: filled, no border, square. Focus is the ring above. */
:root:root body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select, textarea
) {
  min-height: 44px;
  padding-inline: 0.9rem;
  border: 0;
  border-radius: 0;
  background-color: #20202a;
  box-shadow: none;
  color: var(--t-ink);
}
:root:root body textarea { min-height: 7.5rem; padding-block: 0.75rem; }
:root:root body ::placeholder { color: #9a99a5; opacity: 1; }
:root:root body :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--t-accent); }
:root:root body label { color: var(--t-ink); font-weight: 500; }

/* Disabled stays legible, and says so with the cursor. */
:root:root body :is(button, .btn, input, select, textarea, a)[disabled],
:root:root body :is(button, .btn, a)[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
/* Busy controls (the site's scripts set aria-busy or .is-loading while a request runs). */
:root:root body :is(button, .btn)[aria-busy="true"],
:root:root body :is(button, .btn).is-loading { cursor: progress; opacity: 0.75; }

/* Hover and focus raise contrast, they do not lower it. */
@media (hover: hover) and (pointer: fine) {
  :root:root body :is(input, select, textarea):hover:not(:focus) { background-color: #262631; }
}

/* Selection and scrollbars take the system's colours. */
::selection { background: rgba(182, 154, 255, 0.35); color: #fff; }
html { scrollbar-color: #3a3a46 var(--t-ground); }

/* Lines: the Taste skill allows no 1px lines (tone, space or a thick bar instead).
   Nearly every divider in the old stylesheets reads from these three tokens, so
   they are switched off here rather than patched in 100 places. Rows and cells
   are separated by padding and tone. */
:root {
  --border: transparent;
  --border-faint: transparent;
  --border-strong: transparent;
}
:root:root body main :is(td, th) { border-bottom: 0; }
:root:root body main table :is(td, th) { padding-block: 0.8rem; }
:root:root body main table thead :is(th) { background: var(--t-step-2); }
:root:root body main :is(li, h2, h3) { border-bottom-color: transparent; }

/* Gradient surfaces left over from the old design: flat fields. */
:root:root body :is(.vm-cta, .empty-badge) { background-image: none; background-color: var(--t-step-1); }

/* Second inspector pass: the lines, badges and low-contrast bits it still found.
   Rows are separated by spacing, badges are flat tinted tags, and status text
   uses a lighter hue so it reads on the dark ground. */
:root:root body :is(
  .mc-plan-price, .vm-plan-spec, .svc-link, .mc-hero, .mc-cta, .vm-stat, .vm-section, .mh-plan-specs,
  .policy-section, .bm-section, .bm-plan-price, .bm-use, .vps-card-specs, .vm-quick-plan-specs,
  .vm-stats, .vm-cta, .mc-hero-spec, .svc-catalogue-head, .about-hero, .bm-stats, .bm-stat, .bm-marquee,
  .bm-cta, .bm-credits, .checkout-hero, .checkout-hero-price, .checkout-progress, .co-empty-card,
  .dp-hero, .dp-tech-visual, .dp-cta, .qa, .mc-section, .svc-hero, .svc-proof, .legal-header
) { border: 0; box-shadow: none; }
:root:root body :is(.mc-plan-badge, .gh-status-badge, .mh-plan-badge, .bm-plan-badge, .svc-tag) {
  border: 0;
  border-radius: 0;
  background: rgba(182, 154, 255, 0.16);
  color: #d7c8ff;
}
:root:root body .empty-badge { color: var(--t-ink); }
:root:root body .bm-credits { color: var(--t-muted); }
:root:root body :is(.dp-breadcrumbs, .vm-crumbs, .gh-crumbs) :is([aria-current], span) { color: var(--t-muted); }
:root:root body .form-error { color: #ff9aa6; }
/* DDoS page: its blue button joins the one accent. */
:root:root body .dp-btn-primary { background: var(--t-accent); color: var(--t-accent-ink); }
@media (hover: hover) and (pointer: fine) {
  :root:root body .dp-btn-primary:hover { background: #c9b5ff; }
}

/* No scroll-progress lines under or above the header, on any page. */
.vps-progress, .nav-progress, [class*="scroll-progress"], [class*="reading-progress"] { display: none !important; }

/* ---------- VPS plan card ----------
   Used on /vps and /bot-hosting. The old card tucked the price into two small
   boxes at the bottom of two more boxes. Now the price leads, the specs are a
   plain list, and there is one button; nothing is nested inside another panel. */
:root:root body .vm-plan-list .vm-plan {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(1.5rem, 2.2vw, 1.9rem);
}
:root:root body .vm-plan-list .vm-plan-num { display: none; }

/* 1. Name and one-line use */
:root:root body .vm-plan-list .vm-plan-id {
  order: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
}
:root:root body .vm-plan-list .vm-plan-id h3 { margin: 0; font-size: 1.375rem; font-weight: 550; letter-spacing: -0.02em; color: var(--t-ink); }
:root:root body .vm-plan-list .vm-plan-id p { margin: 0.2rem 0 0; font-size: 0.9375rem; color: var(--t-muted); }
:root:root body .vm-plan-list .vm-plan-code { flex-shrink: 0; padding: 0.15rem 0.5rem; font-size: 0.8125rem; color: var(--t-muted); }

/* 2. Price: the number people came for */
:root:root body .vm-plan-list .vm-plan-pricing {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 1.5rem;
  padding: 0;
  background: none;
  border: 0;
}
:root:root body .vm-plan-list .vm-plan-pricing p {
  display: flex;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
/* The old stylesheet gave each price row min-height: 66px, which is what left a gap. */
:root:root body .vm-plan-list .vm-plan-pricing p { min-height: 0; }
:root:root body .vm-plan-list .vm-plan-pricing p:first-child { flex-direction: column; gap: 0.15rem; }
:root:root body .vm-plan-list .vm-plan-pricing p:first-child span { order: -1; font-size: 0.9375rem; color: var(--t-muted); letter-spacing: 0; text-transform: none; }
:root:root body .vm-plan-list .vm-plan-pricing p:first-child strong {
  font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--t-ink);
  font-variant-numeric: tabular-nums;
}
:root:root body .vm-plan-list .vm-plan-pricing p:first-child small { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--t-muted); }
:root:root body .vm-plan-list .vm-plan-pricing p:last-child {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
}
:root:root body .vm-plan-list .vm-plan-pricing p:last-child span { font-size: 0.9375rem; letter-spacing: 0; text-transform: none; color: var(--t-muted); }
:root:root body .vm-plan-list .vm-plan-pricing p:last-child strong { font-size: 0.9375rem; font-weight: 550; color: var(--t-ink); font-variant-numeric: tabular-nums; }
:root:root body .vm-plan-list .vm-plan-pricing p:last-child small { font-size: 0.875rem; font-weight: 400; color: var(--t-muted); }

/* 3. Specs: label left, value right, no panel around them */
:root:root body .vm-plan-list .vm-plan-specs {
  order: 3;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 0 1.75rem;
  padding: 0;
  background: none;
  border: 0;
}
:root:root body .vm-plan-list .vm-plan-spec {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border: 0;
}
:root:root body .vm-plan-list .vm-plan-spec strong { font-size: 0.9375rem; font-weight: 550; color: var(--t-ink); text-align: right; white-space: nowrap; }
:root:root body .vm-plan-list .vm-plan-spec span { font-size: 0.9375rem; letter-spacing: 0; text-transform: none; color: var(--t-muted); }

/* 4. One button, always at the bottom of the card */
:root:root body .vm-plan-list .vm-plan-buy {
  order: 4;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 600;
}
/* The recommended plan is the one accent field in the grid. */
:root:root body .vm-plan-list .vm-plan--recommended,
:root:root body main section .vm-plan-list .vm-plan.vm-plan--recommended { background-color: #261f3a; }
:root:root body .vm-plan-list .vm-plan--recommended .vm-plan-buy { background: var(--t-accent); color: var(--t-accent-ink); }
/* The Starter card's button is "solid" in the markup; only one accent button per grid. */
:root:root body .vm-plan-list .vm-plan:not(.vm-plan--recommended) .vm-plan-buy--solid { background: #2a2a33; color: var(--t-ink); }
@media (hover: hover) and (pointer: fine) {
  :root:root body .vm-plan-list .vm-plan--recommended .vm-plan-buy:hover { background: #c9b5ff; }
  :root:root body .vm-plan-list .vm-plan:not(.vm-plan--recommended) .vm-plan-buy:hover { background: #34343e; }
}

/* SEO internal-link notes and the answer-first paragraph. Plain text links, no extra boxes. */
:root:root body :is(.mc-hero-note, .gh-hero-note, .hero-lede-link) {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--t-muted);
}
:root:root body :is(.mc-hero-note, .gh-hero-note, .hero-lede-link) a {
  color: #d4c6ff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
:root:root body .answer-first {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.4rem 1.2rem;
  background: var(--t-step-2);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--t-ink);
}
:root:root body .answer-first strong { color: var(--t-accent); font-weight: 600; }

/* ==========================================================================
   /best-minecraft-hosting-india: layout (Taste skill, layout reference)
   One left anchor line (the logo's), a full-width title, a lede beside the
   accent "short answer", a sticky "On this page" list beside the article, and
   a different shape per section: criteria as a 2x2 grid, plain rows for the
   method, tables, flat FAQ rows. Section gaps are larger than inner gaps.
   ========================================================================== */
.gd-hero { padding: calc(var(--header-h, 4.25rem) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(3rem, 6vw, 5rem); }
:root:root body .gd-hero h1 {
  max-width: none;
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}
.gd-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.gd-hero-copy .hero-lede { margin: 0; max-width: 46ch; font-size: 1.1875rem; line-height: 1.55; color: #c9c8d1; }
.gd-byline { margin: 1.5rem 0 0; max-width: 52ch; font-size: 0.9375rem; line-height: 1.55; color: var(--t-muted); }
.gd-byline a { color: #d4c6ff; text-decoration: underline; text-underline-offset: 0.2em; }

/* The short answer is the one accent field on the page. */
.gd-answer { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--t-accent); color: var(--t-accent-ink); }
.gd-answer p { margin: 0; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--t-accent-ink); }
.gd-answer strong { font-weight: 650; }

/* The article: bigger gaps between sections, smaller inside them. */
.gd-body { padding-top: 0; padding-bottom: clamp(4rem, 8vw, 8rem); }
:root:root body .gd-body .post h2 {
  max-width: 34ch;
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
}
:root:root body .gd-body .post > h2:first-child { margin-top: 0; }
:root:root body .gd-body .post h3 { max-width: 40ch; }
:root:root body .gd-body .post p { margin-bottom: 1.25rem; }

/* The four things that matter: a 2x2 grid, not a bullet list. */
:root:root body .gd-body .gd-criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root:root body .gd-body .gd-criteria > li { padding: 1.5rem 1.5rem 1.6rem; }
:root:root body .gd-body .gd-criteria > li > strong:first-child { font-size: 1.25rem; margin-bottom: 0.5rem; }
@media (max-width: 640px) { :root:root body .gd-body .gd-criteria { grid-template-columns: minmax(0, 1fr); } }

/* Tables: the provider table has long cells, give the first column room. */
:root:root body .gd-body .post-table caption { padding: 0 0 0.9rem; text-align: left; font-size: 0.9375rem; line-height: 1.5; color: var(--t-muted); caption-side: top; }
:root:root body .gd-body .post-table tbody th[scope="row"] { color: var(--t-ink); font-weight: 600; white-space: nowrap; background: none; }
:root:root body .gd-body .post-table td { color: #c9c8d1; }
:root:root body .gd-body .post-table tbody tr:first-child { background: rgba(182, 154, 255, 0.1); }

/* Figures run the full column. */
:root:root body .gd-body .post figure { margin: 2.5rem 0; }
:root:root body .gd-body .post figure img { display: block; width: 100%; height: auto; }

/* Actions and the FAQ. */
.gd-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2.25rem 0 0; }
.gd-cta .btn { min-height: 50px; padding-inline: 1.5rem; }
.gd-faq { display: grid; gap: 2px; margin-top: 1.5rem; }
:root:root body .gd-faq details { padding: 1.1rem 1.4rem; }
:root:root body .gd-faq summary { font-size: 1.0625rem; }
:root:root body .gd-faq details[open] > summary { margin-bottom: 0.6rem; }
:root:root body .gd-faq details p { margin: 0; color: #c9c8d1; }
.gd-updated { margin-top: 3rem; font-size: 0.875rem; color: var(--t-muted); }

@media (max-width: 1024px) {
  .gd-hero-row { grid-template-columns: minmax(0, 1fr); }
  :root:root body .gd-hero h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3rem); }
}
@media (max-width: 640px) {
  .gd-hero { padding-bottom: 2.5rem; }
  .gd-cta .btn { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  :root:root body .gd-hero h1 { font-size: 1.75rem; letter-spacing: -0.035em; }
}

/* /vds-vs-bare-metal: fact strip sits under the hero row */
.gd-hero .post-fact-strip { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ==========================================================================
   /services: catalogue (Taste layout + Anthropic frontend-design "commit to one
   direction"): three flagship games carry real key art; everything else is
   typographic, so no weak or off-topic picture is on the page. Game rows,
   cloud cards and tool rows each have a different shape.
   ========================================================================== */
.sv-proof ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.sv-proof li { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 600; line-height: 1.3; color: var(--t-accent-ink); }
.sv-section { padding-top: 0; padding-bottom: 0; margin-bottom: clamp(4.5rem, 8vw, 7.5rem); }
.sv-head { display: grid; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
:root:root body .sv-head h2 { margin: 0; max-width: 24ch; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; }
.sv-head p { margin: 0; color: var(--t-muted); font-size: 1rem; }

:root:root body .sv-feature-card,
:root:root body .sv-row,
:root:root body .sv-cloud-card { display: flex; color: var(--t-ink); text-decoration: none; background: var(--t-step-2); transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
:root:root body .sv-name { display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
:root:root body .sv-desc { display: block; font-size: 0.9375rem; line-height: 1.55; color: #b4b3be; }
:root:root body .sv-price { font-size: 0.9375rem; color: var(--t-muted); white-space: nowrap; }
:root:root body .sv-price strong { color: var(--t-ink); font-size: 1.125rem; font-weight: 650; }
:root:root body .sv-price-text { color: #d4c6ff; font-weight: 600; }
.sv-go { display: inline-flex; width: 1.25rem; height: 1.25rem; color: var(--t-accent); }
.sv-go svg { width: 100%; height: 100%; transition: transform 200ms var(--ease-out); }
.sv-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }

/* flagship games: three with art */
.sv-feature { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
:root:root body .sv-feature-card { flex-direction: column; overflow: hidden; }
.sv-feature-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 300ms var(--ease-out); }
.sv-feature-body { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; padding: 1.4rem 1.4rem 1.5rem; }
.sv-feature-body .sv-foot { padding-top: 0.75rem; }

/* the other games: plain rows */
.sv-list { display: grid; gap: 2px; margin: 2px 0 0; padding: 0; list-style: none; }
.sv-feature + .sv-list { margin-top: 2px; }
:root:root body .sv-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(7rem, auto) 1.25rem; align-items: center; gap: 1.5rem; padding: 1.15rem 1.4rem; }
:root:root body .sv-row .sv-name { font-size: 1.0625rem; }
:root:root body .sv-price { text-align: right; }

/* cloud: three tall cards, specs as plain tags */
.sv-cloud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
:root:root body .sv-cloud-card { flex-direction: column; gap: 0.75rem; padding: 1.75rem 1.5rem 1.6rem; min-height: 17rem; }
:root:root body .sv-cloud-card .sv-name { font-size: 1.5rem; }
.sv-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.sv-tags span { padding: 0.3rem 0.6rem; font-size: 0.8125rem; line-height: 1.2; background: #20202a; color: #c9c8d1; }
:root:root body .sv-cloud-card .sv-price strong { font-size: 1.5rem; }

@media (hover: hover) and (pointer: fine) {
  :root:root body .sv-feature-card:hover, :root:root body .sv-row:hover, :root:root body .sv-cloud-card:hover { background: #20202a; }
  .sv-feature-card:hover img { transform: scale(1.03); }
  :root:root body a:hover > .sv-go svg, :root:root body a:hover .sv-foot .sv-go svg { transform: translateX(4px); }
}
:root:root body .sv-feature-card:active, :root:root body .sv-row:active, :root:root body .sv-cloud-card:active { transform: scale(0.985); }

.sv-end { text-align: left; }
:root:root body .sv-end h2 { max-width: 20ch; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }
.sv-end .section-desc { max-width: 46ch; }
.sv-end > div { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.sv-end + * , .sv-end { padding-bottom: clamp(4rem, 8vw, 7rem); }

@media (max-width: 1024px) {
  .sv-feature, .sv-cloud { grid-template-columns: minmax(0, 1fr); }
  :root:root body .sv-cloud-card { min-height: 0; }
  :root:root body .sv-feature-card { flex-direction: row; }
  .sv-feature-card img { width: 42%; aspect-ratio: auto; height: auto; }
}
@media (max-width: 720px) {
  :root:root body .sv-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1rem; }
  :root:root body .sv-row .sv-desc { grid-column: 1 / -1; grid-row: 2; }
  .sv-row .sv-go { display: none; }
  :root:root body .sv-feature-card { flex-direction: column; }
  .sv-feature-card img { width: 100%; aspect-ratio: 16 / 9; }
  .sv-end > div .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Footer, third pass: five link columns (Games added), contact buttons under the
   brand line, and a bottom row with a back-to-top control. Columns stay plain
   lists on desktop and accordions on phones.
   ========================================================================== */
:root:root body .footer .footer-top { grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); }
:root:root body .footer-brand p { max-width: 30ch; }
.footer-brand-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
:root:root body .footer .footer-brand-actions .btn { min-height: 44px; padding-inline: 1.1rem; font-size: 0.9375rem; }

:root:root body .footer-bottom { align-items: center; gap: 0.5rem 2rem; }
:root:root body .footer-bottom p:nth-child(2) { margin-right: auto; }
:root:root body .footer .footer-top-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1rem;
  background: var(--t-step-2); color: var(--t-ink);
  font-size: 0.9375rem; text-decoration: none;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.footer-top-link svg { width: 1rem; height: 1rem; color: var(--t-accent); transition: transform 200ms var(--ease-out); }
:root:root body .footer .footer-top-link:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  :root:root body .footer .footer-top-link:hover { background: #20202a; }
  .footer-top-link:hover svg { transform: translateY(-3px); }
}

@media (max-width: 1200px) {
  :root:root body .footer .footer-top { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  :root:root body .footer .footer-brand { grid-column: 1 / -1; }
  :root:root body .footer-brand p { max-width: 52ch; }
}
@media (max-width: 860px) and (min-width: 768px) {
  :root:root body .footer .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :root:root body .footer .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-brand-actions .btn { flex: 1 1 8rem; }
  :root:root body .footer-bottom p:nth-child(2) { margin-right: 0; }
  :root:root body .footer .footer-top-link { width: 100%; justify-content: center; }
}

/* Policy pages (cookies, terms, aup, abuse, sla, ...) use the same article layout as /refund. */
:root:root body .gd-body .post .callout { margin: 1.5rem 0; padding: 1.1rem 1.4rem; background: var(--t-step-2); border: 0; border-radius: 0; color: #c9c8d1; }
:root:root body .gd-body .post .callout p { margin: 0; }
:root:root body .gd-body .post .ownership-card { display: grid; gap: 0.2rem; margin: 0 0 1.5rem; padding: 1.1rem 1.4rem; background: var(--t-step-2); border: 0; border-radius: 0; }
:root:root body .gd-body .post .ownership-card .label { font-size: 0.8125rem; color: var(--t-muted); }
:root:root body .gd-body .post .ownership-card .value { font-size: 1.25rem; font-weight: 600; color: var(--t-ink); }
:root:root body .gd-body .post ul, :root:root body .gd-body .post ol { padding-left: 1.25rem; }
:root:root body .gd-body .post li { margin-bottom: 0.45rem; line-height: 1.65; }
:root:root body:has(.post) .post-toc { max-height: calc(100vh - 7rem); overflow-y: auto; overscroll-behavior: contain; }
:root:root body .gd-body .post h3 { margin: 2rem 0 0.6rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.015em; color: var(--t-ink); }

/* ==========================================================================
   /minecraft-budget
   Plans are grouped by what the copy already says each RAM size suits, so the
   thirteen cards are four small decisions instead of one long grid. The lines
   every plan shares (DDoS, panel) move into one strip above the cards.
   ========================================================================== */
:root:root body .mx-hero { padding: calc(var(--header-h, 4.25rem) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(3rem, 6vw, 5rem); background: var(--t-ground); }
.mx-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); font-size: 0.875rem; color: var(--t-muted); }
.mx-crumbs a { color: var(--t-muted); text-decoration: none; }
.mx-crumbs [aria-current] { color: var(--t-ink); }
:root:root body .mx-hero h1 { max-width: none; font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.mx-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(2rem, 4vw, 3.5rem); }
.mx-hero-copy .hero-lede { margin: 0; max-width: 46ch; font-size: 1.1875rem; line-height: 1.55; color: #c9c8d1; }
.mx-note { margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--t-muted); }
.mx-note a { color: #d4c6ff; text-decoration: underline; text-underline-offset: 0.2em; }
.mx-hero-copy .gd-cta { margin-top: 1.75rem; }
.mx-hero-art { margin: 0; }
.mx-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

:root:root body .mx-plans, :root:root body .mx-section { padding: 0; margin-bottom: clamp(4.5rem, 8vw, 7.5rem); background: none; }
.mx-head { display: grid; gap: 0.6rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
:root:root body .mx-head h2, :root:root body .mx-answer h2, :root:root body .mx-cta h2 { margin: 0; max-width: 24ch; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.mx-head p { margin: 0; max-width: 60ch; color: var(--t-muted); line-height: 1.6; }

.mx-included { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding: 0; list-style: none; }
.mx-included li { display: grid; gap: 0.15rem; padding: 1rem 1.25rem; background: var(--t-step-2); font-size: 0.9375rem; color: var(--t-muted); }
.mx-included strong { font-size: 1.0625rem; font-weight: 600; color: var(--t-ink); }

.mx-tier { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 3rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.mx-tier-info h3 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--t-ink); }
.mx-ram { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--t-accent); font-weight: 600; }
.mx-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mx-plan { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 1.5rem 1.4rem; background: var(--t-step-2); }
:root:root body .mx-plan-name { margin: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; color: var(--t-ink); }
.mx-plan-tag { margin: 0; min-height: 3.1em; font-size: 0.9375rem; line-height: 1.55; color: #b4b3be; }
.mx-plan-price { margin: 0.25rem 0 0; display: flex; align-items: baseline; gap: 0.3rem; }
.mx-plan-price .amt { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--t-ink); }
.mx-plan-price .per { font-size: 0.9375rem; color: var(--t-muted); }
.mx-specs { display: grid; gap: 0; margin: 0.5rem 0 0.75rem; padding: 0; list-style: none; }
.mx-specs li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.9375rem; color: var(--t-muted); }
.mx-specs li:nth-child(odd) { background: none; }
.mx-specs strong { color: var(--t-ink); font-weight: 600; }
.mx-plan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: auto; }
.mx-plan-actions .btn { min-height: 48px; padding-inline: 0.75rem; justify-content: center; font-size: 0.9375rem; }
.mx-price-note { margin: 0; color: var(--t-muted); font-size: 0.9375rem; }
.mx-price-note a { color: #d4c6ff; text-decoration: underline; text-underline-offset: 0.2em; }

.mx-spec-sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0; }
.mx-spec-sheet > div { display: grid; gap: 0.4rem; align-content: start; padding: 1.25rem 1.4rem 1.4rem; background: var(--t-step-2); }
.mx-spec-sheet dt { font-size: 0.875rem; color: var(--t-muted); }
.mx-spec-sheet dd { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--t-ink); }

.mx-why { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.mx-why .mx-head { margin: 0; position: sticky; top: 6rem; }
.mx-why-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mx-why-list li { padding: 1.25rem 1.5rem 1.35rem; background: var(--t-step-2); }
:root:root body .mx-why-list h3 { margin: 0 0 0.35rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; color: var(--t-ink); }
.mx-why-list p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: #b4b3be; }

.mx-answer { max-width: 62rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mx-updated { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--t-muted); }
.mx-lead { margin: 1.1rem 0 0; max-width: 58ch; font-size: 1.1875rem; line-height: 1.55; color: #c9c8d1; }
.mx-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mx-qa > div { padding: 1.5rem; background: var(--t-step-2); }
:root:root body .mx-qa h3 { margin: 0 0 0.6rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; color: var(--t-ink); }
.mx-qa p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: #b4b3be; }
:root:root body .mx-table-details { margin-top: 2px; padding: 0; background: var(--t-step-2); }
:root:root body .mx-table-details summary { padding: 1.1rem 1.5rem; font-size: 1.0625rem; font-weight: 600; color: var(--t-ink); }
.mx-table-details .qa-table-wrap { padding: 0 1.5rem 1.25rem; overflow-x: auto; }

.mx-faq { display: grid; gap: 2px; max-width: 62rem; }
:root:root body .mx-faq details { padding: 1.1rem 1.4rem; background: var(--t-step-2); }
:root:root body .mx-faq summary { font-size: 1.0625rem; font-weight: 600; color: var(--t-ink); }
:root:root body .mx-faq details[open] > summary { margin-bottom: 0.6rem; }
.mx-faq details p { margin: 0; line-height: 1.65; color: #c9c8d1; }

.mx-cta { padding: clamp(2rem, 5vw, 4rem); background: var(--t-accent); color: var(--t-accent-ink); }
.mx-cta-eyebrow { margin: 0 0 0.9rem; font-size: 0.9375rem; font-weight: 600; color: var(--t-accent-ink); }
:root:root body .mx-cta h2 { max-width: 16ch; color: var(--t-accent-ink); font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.04; }
.mx-cta > p:not(.mx-cta-eyebrow) { max-width: 46ch; margin: 1.1rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: rgba(23, 16, 32, 0.8); }
.mx-cta .btn-primary { background: var(--t-accent-ink); color: #fff; }
:root:root body .mx-cta .btn-secondary { background: rgba(23, 16, 32, 0.12); color: var(--t-accent-ink); }

@media (max-width: 1100px) {
  .mx-included, .mx-spec-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-tier { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .mx-tier-info { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
  .mx-ram { margin: 0; }
  .mx-why { grid-template-columns: minmax(0, 1fr); }
  .mx-why .mx-head { position: static; }
}
@media (max-width: 900px) {
  .mx-hero-row { grid-template-columns: minmax(0, 1fr); }
  .mx-qa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root:root body .mx-hero h1 { font-size: 1.75rem; letter-spacing: -0.035em; }
  .mx-plan-grid, .mx-included, .mx-spec-sheet { grid-template-columns: minmax(0, 1fr); }
  .mx-plan-tag { min-height: 0; }
}

/* Minecraft plans, second pass: tier title above the cards, four across, stat tiles. */
.mx-tier { display: block; margin-bottom: clamp(3rem, 6vw, 5rem); }
.mx-tier-info { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
:root:root body .mx-tier-info h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; }
.mx-ram { margin: 0; font-size: 1rem; }
.mx-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx-plan-grid-start { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx-plan { gap: 0.6rem; padding: 1.4rem 1.25rem 1.25rem; }
.mx-plan-tag { min-height: 4.7em; }
.mx-bar { height: 4px; margin: 0.35rem 0 0.4rem; background: #20202a; }
.mx-bar span { display: block; height: 100%; background: var(--t-accent); }
.mx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0.4rem 0 0.9rem; padding: 0; list-style: none; }
.mx-stats li { display: grid; gap: 0.15rem; padding: 0.7rem 0.8rem; background: #20202a; }
.mx-stats strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; color: var(--t-ink); white-space: nowrap; }
.mx-stats span { font-size: 0.8125rem; color: var(--t-muted); }
.mx-plan-actions { grid-template-columns: 1fr; }
.mx-help { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--t-step-1); }
:root:root body .mx-help h4 { margin: 0; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.025em; color: var(--t-ink); }
.mx-help p { margin: 0; max-width: 56ch; font-size: 1rem; line-height: 1.6; color: #c9c8d1; }
.mx-help a { color: #d4c6ff; text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 1200px) {
  .mx-plan-grid, .mx-plan-grid-start { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-help { grid-column: 1 / -1; }
  .mx-plan-tag { min-height: 3.2em; }
}
@media (max-width: 640px) {
  .mx-plan-grid, .mx-plan-grid-start { grid-template-columns: minmax(0, 1fr); }
  .mx-plan-tag { min-height: 0; }
}
.mx-stats strong { white-space: normal; overflow-wrap: anywhere; font-size: 1rem; }

/* Minecraft: proof strip under the hero. */
.mx-proof-wrap { margin: 0 0 clamp(3.5rem, 7vw, 6rem); }
.mx-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.mx-proof li { display: grid; gap: 0.3rem; padding: 1.4rem 1.5rem; background: var(--t-step-2); font-size: 0.9375rem; color: var(--t-muted); }
.mx-proof strong { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--t-ink); }
:root:root body .mx-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 900px) { .mx-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mx-proof { grid-template-columns: minmax(0, 1fr); } }
:root:root body :is(.mx-hero, .mx-proof-wrap, .mx-plans, .mx-section) { background: var(--t-ground); border: 0; }
:root:root body :is(.mx-hero, .mx-proof-wrap, .mx-plans, .mx-section)::before, :root:root body :is(.mx-hero, .mx-proof-wrap, .mx-plans, .mx-section)::after { content: none; }
:root:root body main > :is(.mx-hero, .mx-proof-wrap, .mx-plans, .mx-section):is(section) { background: var(--t-ground); padding-top: 0; padding-bottom: 0; }
:root:root body main > .mx-hero:is(section) { padding-top: calc(var(--header-h, 4.25rem) + clamp(1.5rem, 4vw, 3rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
:root:root body .mx-cta .btn-primary { background: var(--t-accent-ink); color: #fff; }
:root:root body .mx-cta .btn { border: 0; min-height: 50px; padding-inline: 1.6rem; }
@media (hover: hover) and (pointer: fine) {
  :root:root body .mx-cta .btn-primary:hover { background: #2b2040; }
  :root:root body .mx-cta .btn-secondary:hover { background: rgba(23, 16, 32, 0.2); }
}

/* ---------- Checkout: pay on the website or on Discord ---------- */
.pay-method { margin: 0 0 1.25rem; padding: 0; border: 0; display: grid; gap: 2px; min-width: 0; }
.pay-method[hidden] { display: none; }
.pay-method legend { padding: 0; margin: 0 0 0.6rem; font-size: 0.9375rem; font-weight: 600; color: var(--t-ink); }
.pm-card { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.95rem 1rem; background: var(--t-step-2); cursor: pointer; transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1); }
.pm-card input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--t-accent); }
.pm-card span { display: grid; gap: 0.2rem; min-width: 0; }
.pm-card b { font-size: 1rem; font-weight: 600; color: var(--t-ink); }
.pm-card em { font-style: normal; font-size: 0.875rem; line-height: 1.5; color: var(--t-muted); }
.pm-card:has(input:checked) { background: var(--t-step-3); box-shadow: inset 3px 0 0 var(--t-accent); }
.pm-card:has(input:focus-visible) { outline: 2px solid var(--t-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pm-card:hover { background: var(--t-step-3); } }

/* ===== Checkout: flat Taste surfaces, no borders, gradients, shadows or hero picture ===== */
:root:root body .checkout-hero { background: var(--t-step-1); border: 0; }
:root:root body .checkout-hero::before, :root:root body .checkout-hero::after { display: none; }
:root:root body .checkout-hero-art { display: none; }
:root:root body .checkout-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: 1.75rem 2rem; }
:root:root body .checkout-hero-title h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; }
:root:root body .checkout-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; color: var(--t-muted); border-radius: 0; }
:root:root body .checkout-hero-price { color: var(--t-ink); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -0.03em; }
:root:root body .checkout-progress { background: var(--t-step-1); border: 0; margin-top: 2px; }
:root:root body .checkout-steps li { border-radius: 0; }
:root:root body .checkout-steps li.is-active { background: var(--t-accent); color: var(--t-accent-ink); border: 0; }
:root:root body .checkout-steps li.is-active .cs-num, :root:root body .checkout-steps li.is-active .cs-lbl { color: var(--t-accent-ink); }
:root:root body .checkout-section-title { font-size: 1.375rem; font-weight: 600; text-transform: none; letter-spacing: -0.02em; color: var(--t-ink); background: none; -webkit-text-fill-color: currentColor; margin-bottom: 1rem; }
:root:root body .checkout-block { padding-block: 1.75rem; border: 0; }
:root:root body .spec-grid { gap: 2px; }
:root:root body .spec-item { background: var(--t-step-1); border: 0; border-radius: 0; padding: 1.1rem 1.2rem; }
:root:root body .spec-item-value { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--t-ink); }
:root:root body .config-item select, :root:root body .select-wrap select, :root:root body .promo-code-input { background: var(--t-step-2); border: 0; border-radius: 0; }
:root:root body .cycle-toggle { gap: 2px; }
:root:root body .cycle-toggle > * { background: var(--t-step-2); border: 0; border-radius: 0; color: var(--t-ink); }
:root:root body .cycle-toggle > .selected { background: var(--t-accent); color: var(--t-accent-ink); }
:root:root body .cycle-toggle > .selected .save, :root:root body .cycle-toggle > .selected .lbl { color: var(--t-accent-ink); }
:root:root body .software-option { background: var(--t-step-2); border: 0; border-radius: 0; }
:root:root body .software-option:has(input:checked), :root:root body .software-option.selected { background: var(--t-step-3); box-shadow: inset 3px 0 0 var(--t-accent); }
:root:root body .order-sidebar { background: var(--t-step-1); border: 0; border-radius: 0; box-shadow: none; }
:root:root body .order-total { background: var(--t-step-3); border: 0; border-radius: 0; }
:root:root body .order-total-value { color: var(--t-accent); }
:root:root body .promo-box { background: var(--t-step-2); border: 0; border-radius: 0; }
:root:root body .promo-btn { background: var(--t-step-3); border: 0; border-radius: 0; color: var(--t-ink); }
:root:root body .order-row { border: 0; }
:root:root body .order-payment, :root:root body .order-trust { border: 0; }
:root:root body .checkout-cta { width: 100%; border-radius: 0; }:root:root body .checkout-hero { padding-top: 5.5rem; }
:root:root body .checkout-back { letter-spacing: 0; font-size: 0.875rem; }
:root:root body .config-value { background: var(--t-step-2); border: 0; border-radius: 0; }
:root:root body .order-note, :root:root body .order-footer { border: 0; }

/* checkout hero: sub-text must not inherit the title tracking */
:root:root body .checkout-hero-title .checkout-hero-sub,
:root:root body .checkout-hero-title .badge,
:root:root body .checkout-hero-price small { letter-spacing: normal; }

/* text-only page heroes (support, guides): do not stretch to a full screen of empty space */
:root:root body main > section.hero { min-height: auto; padding-bottom: clamp(3rem, 8vh, 5rem); }

/* /minecraft-budget#plans: AMD EPYC / Budget switch */
.mx-plan-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); scroll-margin-top: 6rem; }
.mx-plan-tab { display: grid; gap: 0.15rem; padding: 1rem 1.25rem; border: 0; border-bottom: 2px solid transparent; background: var(--t-step-2); color: var(--t-muted); font: inherit; font-size: 0.9375rem; text-align: left; cursor: pointer; }
.mx-plan-tab strong { font-size: 1.0625rem; font-weight: 600; color: var(--t-ink); }
.mx-plan-tab:hover { color: var(--t-ink); }
.mx-plan-tab[aria-selected="true"] { border-bottom-color: #c4afff; }
.mx-plan-tab:focus-visible { outline: 2px solid #c4afff; outline-offset: 2px; }
.mx-budget-head { display: grid; gap: 0.6rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
:root:root body .mx-budget-head h3 { margin: 0; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); font-weight: 500; letter-spacing: -0.03em; color: var(--t-ink); }
.mx-budget-head p { margin: 0; max-width: 60ch; color: var(--t-muted); line-height: 1.6; }
#budget .qa-table-wrap { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 600px) {
  .mx-plan-tab { padding: 0.75rem; font-size: 0.8125rem; line-height: 1.35; }
  .mx-plan-tab strong { font-size: 0.9375rem; line-height: 1.3; }
}
#budget .mx-plan-grid { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }