/* ====================================================================
   Void Arcade — SEO content blocks
   ====================================================================
   Styles the indexable article that sits BELOW the playable canvas on
   every game page, and the category hub pages.

   Design intent: this is a quiet reading surface that belongs to the
   existing premium dark arcade identity. It never competes with the
   game itself — the game owns the viewport, this begins after it.

   This content is visible to everyone. Nothing here is hidden from
   users and served only to crawlers.
   ==================================================================== */

:root {
  --va-seo-ink: #e8eef8;
  --va-seo-ink-dim: #9aa8c2;
  --va-seo-ink-faint: #6d7c96;
  --va-seo-line: rgba(140, 160, 200, 0.16);
  --va-seo-line-soft: rgba(140, 160, 200, 0.09);
  --va-seo-surface: rgba(18, 23, 33, 0.72);
  --va-seo-accent: #7fb4ff;
  --va-seo-bg: #070a10;
}

/* ---- shell ------------------------------------------------------- */

.va-seo-content {
  position: relative;
  z-index: 1;
  background: var(--va-seo-bg);
  border-top: 1px solid var(--va-seo-line);
  color: var(--va-seo-ink-dim);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  padding: 56px 24px 72px;
  /* The game shell uses overflow:hidden on body; this block lives after
     it in the flow, so it needs to establish its own normal layout. */
  text-align: left;
}

.va-seo-article {
  max-width: 760px;
  margin: 0 auto;
}

/* ---- breadcrumb -------------------------------------------------- */

.va-seo-breadcrumb {
  max-width: 760px;
  margin: 0 auto 28px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
}

.va-seo-breadcrumb a {
  color: var(--va-seo-ink-faint);
  text-decoration: none;
  transition: color 0.18s ease;
}

.va-seo-breadcrumb a:hover { color: var(--va-seo-accent); }

.va-seo-breadcrumb span[aria-current] { color: var(--va-seo-ink-dim); }

.va-seo-crumb-sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* ---- header ------------------------------------------------------ */

.va-seo-header { margin-bottom: 26px; }

.va-seo-content .va-seo-h1 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--va-seo-ink);
  margin: 0 0 6px;
}

.va-seo-tagline {
  margin: 0;
  font-size: 16px;
  color: var(--va-seo-ink-faint);
}

/* ---- fact strip -------------------------------------------------- */

.va-seo-facts {
  list-style: none;
  margin: 0 0 30px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 22px;
  background: var(--va-seo-surface);
  border: 1px solid var(--va-seo-line-soft);
  border-radius: 14px;
}

.va-seo-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--va-seo-ink);
}

.va-seo-fact-k {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
}

/* ---- prose ------------------------------------------------------- */

.va-seo-lede {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--va-seo-ink-dim);
  margin: 0 0 12px;
}

.va-seo-block { margin-top: 38px; }

.va-seo-content h2,
.va-seo-content h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--va-seo-accent);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--va-seo-line-soft);
}

.va-seo-content p { margin: 0 0 14px; }

.va-seo-content ol,
.va-seo-content ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.va-seo-content li { margin-bottom: 7px; }

.va-seo-content a {
  color: var(--va-seo-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 180, 255, 0.28);
  transition: border-color 0.18s ease;
}

.va-seo-content a:hover { border-bottom-color: var(--va-seo-accent); }

.va-seo-note {
  font-size: 13.5px;
  color: var(--va-seo-ink-faint);
}

/* ---- controls table ---------------------------------------------- */

.va-seo-controls {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 14px;
}

.va-seo-controls caption {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
  padding-bottom: 8px;
}

.va-seo-controls th,
.va-seo-controls td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--va-seo-line-soft);
  text-align: left;
}

.va-seo-controls th {
  width: 36%;
  font-weight: 500;
  color: var(--va-seo-ink);
  font-variant-numeric: tabular-nums;
}

.va-seo-controls td { color: var(--va-seo-ink-dim); }

/* ---- changelog --------------------------------------------------- */

.va-seo-changelog {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.va-seo-changelog > li {
  padding-left: 18px;
  border-left: 1px solid var(--va-seo-line);
  padding-bottom: 20px;
}

.va-seo-changelog > li:last-child { padding-bottom: 0; }

.va-seo-version {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--va-seo-ink);
  margin-bottom: 8px;
}

.va-seo-version time {
  font-weight: 400;
  font-size: 12px;
  color: var(--va-seo-ink-faint);
  font-variant-numeric: tabular-nums;
}

.va-seo-changelog ul { padding-left: 18px; }

/* ---- related ----------------------------------------------------- */

.va-seo-related {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.va-seo-related a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--va-seo-line-soft);
  border-radius: 12px;
  background: var(--va-seo-surface);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.va-seo-related a:hover {
  border-color: rgba(127, 180, 255, 0.4);
  transform: translateY(-1px);
}

.va-seo-related strong {
  color: var(--va-seo-ink);
  font-weight: 600;
  font-size: 15px;
}

.va-seo-related span {
  color: var(--va-seo-ink-faint);
  font-size: 13px;
}

.va-seo-about { color: var(--va-seo-ink-faint); }

/* ====================================================================
   Category hub pages
   ==================================================================== */

.va-hub {
  min-height: 100vh;
  background: var(--va-seo-bg);
  color: var(--va-seo-ink-dim);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

.va-hub-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.va-hub-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  color: var(--va-seo-ink-faint);
  text-decoration: none;
  font-size: 14px;
}

.va-hub-back:hover { color: var(--va-seo-accent); }

.va-hub-back img { height: 22px; width: auto; opacity: 0.75; }

.va-hub-header {
  max-width: 720px;
  margin-bottom: 42px;
}

.va-hub-header h1 {
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--va-seo-ink);
  margin: 0 0 14px;
}

.va-hub-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--va-seo-ink-dim);
  margin: 0;
}

.va-hub-count {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
}

/* ---- grid -------------------------------------------------------- */

.va-hub-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
}

.va-hub-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--va-seo-line-soft);
  border-radius: 16px;
  overflow: hidden;
  background: var(--va-seo-surface);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.va-hub-card a:hover {
  border-color: rgba(127, 180, 255, 0.4);
  transform: translateY(-2px);
}

.va-hub-shot {
  display: block;
  aspect-ratio: 16 / 9;
  background: #0d1119;
  overflow: hidden;
}

.va-hub-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.va-hub-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
}

.va-hub-tag {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--va-seo-accent);
}

.va-hub-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--va-seo-ink);
}

.va-hub-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--va-seo-ink-dim);
}

.va-hub-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--va-seo-ink-faint);
}

/* ---- hub footer / cross-links ------------------------------------ */

.va-hub-more {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--va-seo-line-soft);
}

.va-hub-more h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--va-seo-ink-faint);
  margin: 0 0 14px;
}

.va-hub-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.va-hub-links a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--va-seo-line-soft);
  border-radius: 999px;
  color: var(--va-seo-ink-dim);
  text-decoration: none;
  font-size: 13.5px;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.va-hub-links a:hover {
  border-color: rgba(127, 180, 255, 0.4);
  color: var(--va-seo-accent);
}

/* ---- prose pages (self-evolving arcade, reports) ----------------- */

.va-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 88px;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--va-seo-ink-dim);
  font-size: 16px;
  line-height: 1.72;
}

.va-doc h1 {
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--va-seo-ink);
  margin: 0 0 16px;
}

.va-doc .va-doc-standfirst {
  font-size: 18px;
  line-height: 1.6;
  color: var(--va-seo-ink-dim);
  margin: 0 0 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--va-seo-line-soft);
}

.va-doc h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--va-seo-ink);
  margin: 44px 0 14px;
  text-transform: none;
  border: 0;
  padding: 0;
}

.va-doc h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--va-seo-ink);
  margin: 28px 0 10px;
}

.va-doc p { margin: 0 0 16px; }

.va-doc ul,
.va-doc ol { margin: 0 0 16px; padding-left: 22px; }

.va-doc li { margin-bottom: 8px; }

.va-doc a {
  color: var(--va-seo-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 180, 255, 0.28);
}

.va-doc a:hover { border-bottom-color: var(--va-seo-accent); }

.va-doc-callout {
  margin: 28px 0;
  padding: 18px 22px;
  background: var(--va-seo-surface);
  border: 1px solid var(--va-seo-line-soft);
  border-left: 2px solid var(--va-seo-accent);
  border-radius: 12px;
  font-size: 15px;
}

.va-doc-callout p:last-child { margin-bottom: 0; }

.va-doc-meta {
  font-size: 13px;
  color: var(--va-seo-ink-faint);
  margin-bottom: 30px;
}

.va-doc-meta time { font-variant-numeric: tabular-nums; }

/* A definition-style lead-in used on the self-evolving arcade page so the
   answer to "what is a self-evolving arcade?" is the first thing present. */
.va-doc-definition {
  margin: 0 0 34px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(127, 180, 255, 0.07), rgba(127, 180, 255, 0.02));
  border: 1px solid rgba(127, 180, 255, 0.2);
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--va-seo-ink);
}

.va-doc-definition p:last-child { margin-bottom: 0; }

/* ---- responsive -------------------------------------------------- */

@media (max-width: 640px) {
  .va-seo-content { padding: 40px 18px 56px; }
  .va-hub-inner { padding: 24px 18px 64px; }
  .va-doc { padding: 24px 18px 64px; }
  .va-seo-facts { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .va-hub-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .va-hub-card a,
  .va-seo-related a {
    transition: none;
  }
  .va-hub-card a:hover,
  .va-seo-related a:hover {
    transform: none;
  }
}

/* ====================================================================
   Game-page integration
   ====================================================================
   Game pages set `body { overflow: hidden }` and position #gameContainer
   as `position: fixed`, so the game already sits outside normal flow and
   owns the viewport. To make the article below it reachable WITHOUT
   touching any game CSS or layout:

     - `body` is allowed to scroll vertically again on game pages that
       opt in via .va-has-seo-content.
     - A spacer reserves exactly one viewport so the game is what you see
       on load; the article begins immediately after it.
     - #gameContainer stays `position: fixed`, so it does not move, does
       not resize, and is not affected by the scroll. The canvas keeps the
       full viewport it was built against.

   This is additive only. No existing rule is overridden, and a page that
   does not carry .va-has-seo-content behaves exactly as before.
   ==================================================================== */

body.va-has-seo-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* The game shell centres content with flex; the SEO layer must stack
     normally underneath rather than being centred as a flex sibling. */
  display: block !important;
  min-height: 100vh;
  /* `position: static` so <body> is NOT the containing block for the
     games that centre #gameContainer with `position:absolute; top:50%`
     (void-gate, and any portrait game following that pattern). If body
     stayed the containing block, the spacer + article would double its
     height and "50%" would resolve to the middle of the whole document,
     dropping the game a full viewport down the page. With body static,
     those containers resolve against the initial containing block (the
     viewport), which is what they were written against. */
  position: static !important;
}

/* Games that position #gameContainer absolutely were centring against a
   viewport-tall <body>. Now that the document is taller than the viewport,
   they must be pinned to the viewport explicitly — `fixed` keeps them
   exactly where `absolute` used to put them, and keeps the game on screen
   while the article scrolls underneath it (the same behaviour the games
   that already use `position: fixed` have). */
body.va-has-seo-content #gameContainer {
  position: fixed !important;
}

/* Reserves the first screenful for the game, which is fixed-position and
   therefore paints over this space. */
.va-seo-spacer {
  height: 100vh;
  height: 100svh;
  pointer-events: none;
}

/* The game is fixed and would paint over the article as you scroll past
   it. The start screen sits at z-index 9500 and some in-game overlays go
   higher still, so the article is lifted above all of them — it only ever
   occupies space below the first viewport, so this cannot cover the game
   while the game is the thing on screen. */
body.va-has-seo-content .va-seo-content {
  position: relative;
  z-index: 10000;
}

/* A quiet affordance telling players there is something below the game.
   Hidden once the reader has scrolled (handled in seo-enhance.js). */
.va-seo-scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  /* Above the mobile control overlay (a full-screen fixed layer with
     touch-action:none), or the cue cannot be tapped on a phone — and on
     touch devices tapping it is the only way into the article. */
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(140, 160, 200, 0.18);
  background: rgba(10, 13, 18, 0.6);
  backdrop-filter: blur(6px);
  color: rgba(154, 168, 194, 0.85);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}

.va-seo-scroll-cue:hover { opacity: 1; }
.va-seo-scroll-cue[hidden] { display: none !important; }

/* On phones the cue must not sit over the on-screen controls, which own
   the bottom of the screen. It moves to the top-centre announcement band
   instead — still the only hint that there is anything below the game,
   and mobile is where that hint matters most. */
@media (pointer: coarse) {
  .va-seo-scroll-cue {
    bottom: auto;
    top: calc(8px + var(--va-safe-top, 0px));
    font-size: 11px;
    padding: 5px 11px;
    opacity: 0.6;
  }
}

/* The start screen is exactly where the cue belongs: the player has not
   committed to a run yet, there is room, and on touch devices tapping it
   is the only way into the article (the mobile control overlay is a
   full-screen `touch-action: none` layer that swallows swipes).

   During an active run it is hidden — nothing floats over live gameplay.
   The game-over screen owns the full viewport, so it is hidden there too. */
body.va-body-game-over .va-seo-scroll-cue {
  display: none !important;
}

/* Active play = neither start nor game-over is up. */
body.va-has-seo-content:not(.va-body-start):not(.va-body-game-over) .va-seo-scroll-cue {
  display: none !important;
}

/* ====================================================================
   Challenge loop
   ====================================================================
   The incoming-challenge banner sits above the game, top-centre, which
   is the announcement zone reserved by the UI rules. It clears itself on
   the first input so it never overlaps live play. Bottom-left stays free
   for the powerup tray; bottom-right stays free for game stats.
   ==================================================================== */

.va-challenge-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 18px;
  max-width: calc(100vw - 32px);
  border-radius: 14px;
  border: 1px solid rgba(127, 180, 255, 0.28);
  background: rgba(12, 17, 26, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  font-family: 'Outfit', system-ui, sans-serif;
  color: #e8eef8;
  animation: va-challenge-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes va-challenge-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.va-challenge-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d7c96;
  white-space: nowrap;
}

.va-challenge-score {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #7fb4ff;
  font-variant-numeric: tabular-nums;
}

.va-challenge-hint {
  font-size: 13px;
  color: #9aa8c2;
  white-space: nowrap;
}

.va-challenge-close {
  margin-left: 2px;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(140, 160, 200, 0.12);
  color: #9aa8c2;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.va-challenge-close:hover {
  background: rgba(140, 160, 200, 0.22);
  color: #e8eef8;
}

@media (max-width: 520px) {
  .va-challenge-banner { gap: 9px; padding: 9px 12px 9px 14px; }
  .va-challenge-label { font-size: 10px; }
  .va-challenge-score { font-size: 17px; }
  .va-challenge-hint { display: none; }
}

/* ---- copy-link toast --------------------------------------------- */

.va-challenge-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(140, 160, 200, 0.2);
  background: rgba(12, 17, 26, 0.94);
  backdrop-filter: blur(8px);
  color: #e8eef8;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.va-challenge-toast.is-out {
  opacity: 0;
  transform: translate(-50%, 8px);
}

@media (prefers-reduced-motion: reduce) {
  .va-challenge-banner { animation: none; }
  .va-challenge-toast { transition: none; }
}

/* ====================================================================
   Homepage — browse by type + brand positioning
   ====================================================================
   Lives inside the existing homepage layout and inherits its section
   header rhythm, so it reads as part of the page rather than an SEO
   appendage bolted to the bottom.
   ==================================================================== */

.va-home-seo {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 10px;
}

.va-home-cats {
  list-style: none;
  margin: 0 0 54px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.va-home-cats a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(140, 160, 200, 0.14);
  border-radius: 999px;
  background: rgba(18, 23, 33, 0.5);
  color: #9aa8c2;
  text-decoration: none;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.va-home-cats a:hover {
  border-color: rgba(127, 180, 255, 0.45);
  background: rgba(127, 180, 255, 0.07);
  color: #e8eef8;
}

.va-home-cats a span {
  font-size: 11.5px;
  color: #6d7c96;
  font-variant-numeric: tabular-nums;
}

.va-home-about {
  max-width: 760px;
  margin: 0 0 40px;
  font-family: 'Outfit', system-ui, sans-serif;
  color: #9aa8c2;
  font-size: 15.5px;
  line-height: 1.7;
}

.va-home-about h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #e8eef8;
  margin: 0 0 14px;
  text-transform: none;
}

.va-home-about p { margin: 0 0 14px; }

.va-home-about a {
  color: #7fb4ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 180, 255, 0.28);
}

.va-home-about a:hover { border-bottom-color: #7fb4ff; }

@media (max-width: 900px) {
  .va-home-seo { padding: 0 20px 6px; }
  .va-home-cats { margin-bottom: 38px; }
}