/* =============================================================================
   VerseGame public site — v2
   Single-accent industrial design: one green, black chapter bands, white body,
   2px radii, hairline borders, Inter, 1280px measure, corner-square motif.
   No panel URLs or login UI anywhere on the public site.
   ========================================================================== */

:root {
  --g:       #76b900;               /* the ONE accent */
  --g-dark:  #629a00;
  --black:   #000000;
  --coal:    #111111;               /* raised surfaces on black */
  --ink:     #1a1a1a;               /* text on white */
  --ink-2:   #555555;
  --ink-3:   #767676;
  --paper:   #ffffff;
  --paper-2: #f6f6f6;               /* alternate band */
  --line:    #e4e4e4;               /* hairline on white */
  --line-d:  rgba(255, 255, 255, .16);
  --inv:     #f2f2f2;               /* text on black */
  --inv-2:   #b3b3b3;
  --max:     1280px;
  --r:       2px;
  --font:    'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font: 400 16px/1.65 var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--g); color: #000; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

.mono { font-family: var(--mono); font-size: .92em; }
.sp { flex: 1; }

/* corner-square motif ------------------------------------------------------ */
.tick { display: inline-block; width: 12px; height: 12px; background: var(--g); flex: none; }
.kicker {
  display: flex; align-items: center; gap: 10px;
  font: 600 12.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
}
.on-black .kicker { color: var(--inv-2); }

/* type ---------------------------------------------------------------------- */
h1 { font: 700 clamp(38px, 6vw, 64px)/1.08 var(--font); letter-spacing: -.02em; }
h2 { font: 700 clamp(28px, 4vw, 40px)/1.15 var(--font); letter-spacing: -.015em; }
h3 { font: 600 18px/1.35 var(--font); }
.g { color: var(--g); }

/* buttons -------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 15px/1 var(--font); padding: 15px 28px; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn.primary { background: var(--g); color: #000; }
.btn.primary:hover { background: var(--g-dark); }
.btn.dark { background: var(--black); color: #fff; }
.btn.dark:hover { background: #2a2a2a; }
.btn.ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn.ghost:hover { border-color: var(--ink); }
.on-black .btn.ghost { border-color: var(--line-d); color: var(--inv); }
.on-black .btn.ghost:hover { border-color: #fff; }
.btn.sm { padding: 10px 18px; font-size: 13.5px; }

/* =============================================================================
   NAV — black, hairline bottom, green active underline
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: var(--black); border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.scrolled { border-bottom-color: var(--line-d); }
.nav-in { display: flex; align-items: center; gap: 34px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; font: 700 18px/1 var(--font); color: #fff; }
.brand img { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a {
  color: var(--inv-2); font: 500 14px/1 var(--font); padding: 25px 13px 23px;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav-links a:hover, .nav-links a[aria-current] { color: #fff; border-bottom-color: var(--g); }
/* --- grouped dropdowns (desktop: hover panels, mobile: flat sections) ------ */
.nav-grp { position: relative; display: flex; }
.nav-drop {
  position: absolute; top: 100%; left: 0; min-width: 216px;
  display: none; flex-direction: column; padding: 8px 0;
  background: var(--black); border: 1px solid var(--line-d);
  border-top: 2px solid var(--g); border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.nav-grp:hover .nav-drop, .nav-grp:focus-within .nav-drop { display: flex; }
.nav-drop a {
  padding: 10px 18px; border-bottom: 0; border-left: 2px solid transparent;
  font: 500 13.5px/1.2 var(--font); white-space: nowrap;
}
.nav-drop a:hover { border-bottom-color: transparent; border-left-color: var(--g); background: rgba(255,255,255,.04); }
.nav-cta { margin-left: auto; }
.nav-auth { display: flex; align-items: center; gap: 10px; }
.mobile-auth { display: none; }        /* auth links live in the desktop button group */
.burger {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line-d);
  border-radius: var(--r); color: #fff; width: 40px; height: 40px; cursor: pointer;
  align-items: center; justify-content: center;
}
@media (max-width: 920px) {
  /* keep Sign in / Register visible in the header bar — hiding them behind
     the burger made the site look login-less on phones */
  .nav-cta { display: flex; margin-left: auto; gap: 8px; }
  .nav-auth .btn.sm { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
  .mobile-auth { display: flex; }      /* also inside the burger menu */
  .mobile-auth > a { color: #fff; font-weight: 700; }
  .burger { display: inline-flex; margin-left: 0; }
  .nav-links {
    position: absolute; top: 64px; left: 0; right: 0; display: none;
    flex-direction: column; gap: 0; background: var(--black);
    border-bottom: 1px solid var(--line-d); padding: 8px 0 14px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 32px; border-bottom: 0; border-left: 2px solid transparent; }
  .nav-links a:hover { border-left-color: var(--g); }
  /* dropdown groups flatten into labelled sections on mobile */
  .nav-grp { flex-direction: column; }
  .nav-grp > a { color: #fff; font-weight: 700; }
  .nav-drop {
    position: static; display: flex; min-width: 0; padding: 0 0 6px;
    background: none; border: 0; box-shadow: none;
  }
  .nav-drop a { padding: 10px 32px 10px 46px; color: var(--inv-2); }
}

/* =============================================================================
   HERO — black chapter
   ========================================================================== */
.hero {
  background: var(--black); color: var(--inv);
  padding: 168px 0 96px; position: relative; overflow: hidden;
}
.hero::after {                       /* faint engineering grid, pure CSS */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-d) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
  background-size: 72px 72px; opacity: .22;
  mask-image: radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
}
.hero-in { position: relative; z-index: 1; max-width: 880px; }
.hero .kicker { margin-bottom: 26px; }
.hero h1 { color: #fff; }
.hero .sub { margin: 26px 0 38px; font-size: 19px; color: var(--inv-2); max-width: 640px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--line-d); }
.hero-meta div { display: flex; align-items: center; gap: 9px; font: 500 13.5px/1.3 var(--font); color: var(--inv-2); }
.hero-meta svg { width: 16px; height: 16px; color: var(--g); flex: none; }

/* =============================================================================
   SECTIONS
   ========================================================================== */
section { padding: 96px 0; }
section.band { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.black { background: var(--black); color: var(--inv); }
.sec-h { max-width: 720px; margin-bottom: 56px; }
.sec-h .kicker { margin-bottom: 18px; }
.sec-h p { margin-top: 16px; color: var(--ink-2); font-size: 17px; }
.black .sec-h p { color: var(--inv-2); }

/* games ---------------------------------------------------------------------- */
.games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 980px) { .games-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .games-grid { grid-template-columns: 1fr; } }
.g-card { background: var(--paper); display: flex; flex-direction: column; }
.g-card .art { position: relative; aspect-ratio: 16/9; background: var(--black); overflow: hidden; }
.g-card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.g-card .art .fb { position: absolute; inset: 0; display: grid; place-items: center; color: #666; font: 600 20px/1 var(--font); letter-spacing: .05em; }
.g-card .g-b { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.g-card .g-t { display: flex; align-items: center; gap: 10px; }
.g-card .g-t h3 { font-size: 19px; }
.g-tag { font: 600 10.5px/1 var(--font); letter-spacing: .12em; color: var(--ink-2); border: 1px solid var(--line); padding: 5px 8px; border-radius: var(--r); }
.g-card p { font-size: 14.5px; color: var(--ink-2); }
.g-card .g-a { margin-top: auto; padding-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.g-card .g-a .more { font: 600 13.5px/1 var(--font); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.g-card .g-a .more:hover { color: var(--g-dark); }
.g-card .g-a .more svg { width: 14px; height: 14px; }

/* feature grid ---------------------------------------------------------------- */
.feat-grid, .sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 980px) { .feat-grid, .sec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .feat-grid, .sec-grid { grid-template-columns: 1fr; } }
.feat { background: var(--paper); padding: 30px 28px 32px; }
.band .feat { background: var(--paper-2); }
.feat .ic { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center; color: var(--g-dark); margin-bottom: 18px; }
.feat .ic svg { width: 19px; height: 19px; }
.feat h3 { margin-bottom: 9px; }
.feat p { font-size: 14.5px; color: var(--ink-2); }

/* api chapter (black) --------------------------------------------------------- */
.api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 980px) { .api-grid { grid-template-columns: 1fr; gap: 44px; } }
.api-copy h2 { color: #fff; }
.api-copy > p { margin-top: 16px; color: var(--inv-2); font-size: 17px; }
.api-points { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 15px; }
.api-points li { display: flex; gap: 12px; font-size: 15px; color: var(--inv-2); }
.api-points li b { color: var(--inv); }
.api-points svg { width: 17px; height: 17px; color: var(--g); flex: none; margin-top: 3px; }
.code-win { background: var(--coal); border: 1px solid var(--line-d); border-radius: var(--r); overflow: hidden; }
.code-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line-d); }
.code-bar i { width: 10px; height: 10px; border-radius: 50%; background: #333; }
.code-bar span { margin-left: 8px; font: 500 12px/1 var(--mono); color: var(--inv-2); }
.code-win pre { padding: 20px 22px; font: 400 13px/1.75 var(--mono); color: #d6d6d6; overflow-x: auto; }
.code-win .c { color: #6f6f6f; }
.code-win .k { color: var(--g); }
.code-win .s { color: #cbe896; }
.code-win .f { color: #9fd64a; }

/* stats ------------------------------------------------------------------------ */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--paper); padding: 34px 28px; }
.stat .v { font: 700 46px/1 var(--font); letter-spacing: -.02em; }
.stat .v::after { content: ""; display: block; width: 12px; height: 12px; background: var(--g); margin-top: 14px; }
.stat .l { font: 600 15px/1.3 var(--font); margin-top: 16px; }
.stat .s { font-size: 13.5px; color: var(--ink-2); margin-top: 7px; }

/* why rows ----------------------------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 820px) { .why-grid { grid-template-columns: 1fr; } }
.why { background: var(--paper); padding: 28px; display: flex; gap: 20px; }
.why .ic { width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center; color: var(--g-dark); }
.why .ic svg { width: 19px; height: 19px; }
.why h3 { margin-bottom: 7px; }
.why p { font-size: 14.5px; color: var(--ink-2); }

/* integration steps ---------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--paper-2); padding: 30px 26px 32px; }
.step .n { font: 700 15px/1 var(--mono); color: #000; background: var(--g); width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 20px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-2); }

/* round lifecycle — the centrepiece band ---------------------------------------------
   Same hairline-table construction as .steps (1px grid gaps over a line-coloured
   background), but on black and with a live rail across the top: a static
   hairline plus one accent segment that travels the width of the band, so the
   band reads as a moving pipeline rather than five static boxes. The segment is
   16% wide, so translating it 625% of its own width walks its left edge exactly
   from one end to the other. */
/* Hosts its own prism lattice (see landing.js), which mounts as an absolutely
   positioned layer — hence the containing block here and the lifted .wrap. */
#lifecycle { position: relative; overflow: hidden; }
#lifecycle > .wrap { position: relative; z-index: 1; }
.rail {
  list-style: none; position: relative; margin-top: 6px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--line-d); border: 1px solid var(--line-d);
}
.rail::before, .rail::after { content: ""; position: absolute; top: -1px; height: 2px; pointer-events: none; }
.rail::before { left: 0; right: 0; background: var(--line-d); }
.rail::after {
  left: 0; width: 16%;
  background: linear-gradient(90deg, transparent, var(--g), transparent);
  animation: rail-run 7s linear infinite;
}
@keyframes rail-run { from { transform: translateX(0); } to { transform: translateX(625%); } }
.rl { background: var(--coal); padding: 26px 22px 28px; display: flex; flex-direction: column; gap: 10px; }
.rl-n { font: 700 15px/1 var(--mono); color: #000; background: var(--g); width: 34px; height: 34px; display: grid; place-items: center; flex: none; }
.rl-b h3 { font-size: 15.5px; margin-bottom: 9px; }
.rl-b code {
  display: inline-block; font-family: var(--mono); font-size: 12.5px; color: var(--g);
  background: #000; border: 1px solid var(--line-d); border-radius: var(--r);
  padding: 3px 8px; margin-bottom: 9px; word-break: break-word;
}
.rl-b p { font-size: 13.8px; line-height: 1.62; color: var(--inv-2); }
.rl-b .mono { color: var(--inv); }
/* Reads as one continuous table with the rail above it — hence no top border. */
.rail-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line-d); border: 1px solid var(--line-d); border-top: 0;
}
.rf { background: var(--coal); padding: 20px 22px; display: flex; align-items: flex-start; gap: 13px; }
.rf svg { width: 20px; height: 20px; color: var(--g); flex: none; margin-top: 2px; }
.rf b { display: block; font: 600 14px/1.4 var(--font); margin-bottom: 3px; }
.rf span { display: block; font-size: 13px; line-height: 1.6; color: var(--inv-2); }
.rf span .mono { color: var(--inv); font-size: .95em; }
@media (max-width: 1080px) { .rail { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .rail-foot { grid-template-columns: 1fr; } }
@media (max-width: 740px) { .rail { grid-template-columns: repeat(2, 1fr); } .rl { padding: 22px 18px 24px; } }
@media (max-width: 520px) { .rail { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rail::after { animation: none; opacity: .55; } }

/* faq -------------------------------------------------------------------------------- */
.faq { max-width: 860px; border: 1px solid var(--line); background: var(--paper); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  font: 600 16px/1.4 var(--font); padding: 22px 26px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { margin-left: auto; flex: none; transition: transform .18s; color: var(--ink-3); }
.faq details[open] summary .chev { transform: rotate(180deg); color: var(--g-dark); }
.faq .a { padding: 0 26px 24px; color: var(--ink-2); font-size: 15px; max-width: 760px; }
.faq .a code { font-family: var(--mono); font-size: .9em; background: var(--paper-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: var(--r); }
.faq .a a { color: var(--g-dark); font-weight: 600; }

/* contact band (black) ------------------------------------------------------------------ */
.contact-card { padding: 72px 64px; position: relative; }
@media (max-width: 700px) { .contact-card { padding: 48px 24px; } }
.contact-card h2 { color: #fff; max-width: 620px; }
.contact-card p { margin-top: 16px; color: var(--inv-2); font-size: 17px; max-width: 560px; }
.contact-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.contact-note { margin-top: 26px; font-size: 13.5px; color: var(--inv-2); }
.contact-note .mono { color: var(--inv); }

/* =============================================================================
   FOOTER — black chapter
   ========================================================================== */
footer { background: var(--black); color: var(--inv-2); padding: 72px 0 34px; border-top: 3px solid var(--g); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 48px; border-bottom: 1px solid var(--line-d); }
@media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand p { margin-top: 16px; font-size: 14px; max-width: 300px; }
.foot h4 { color: #fff; font: 600 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.foot a { font-size: 14px; transition: color .15s; }
.foot a:hover { color: var(--g); }
.foot-bottom { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 26px; font-size: 12.5px; }

/* =============================================================================
   DEMO PLAYER — full-screen modal with iframe
   ========================================================================== */
.demo-modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(0, 0, 0, .92); padding: 24px;
}
.demo-modal.open { display: flex; flex-direction: column; }
.demo-top { display: flex; align-items: center; gap: 14px; max-width: var(--max); margin: 0 auto 14px; width: 100%; }
.demo-top .tick { width: 10px; height: 10px; }
.demo-top .t { color: #fff; font: 600 16px/1 var(--font); }
.demo-top .badge { font: 600 10.5px/1 var(--font); letter-spacing: .12em; color: #000; background: var(--g); padding: 5px 8px; border-radius: var(--r); }
.demo-close {
  margin-left: auto; background: none; border: 1px solid var(--line-d); border-radius: var(--r);
  color: #fff; width: 38px; height: 38px; cursor: pointer; display: grid; place-items: center;
}
.demo-close:hover { border-color: #fff; }
.demo-body { flex: 1; max-width: var(--max); margin: 0 auto; width: 100%; min-height: 0; position: relative; border: 1px solid var(--line-d); background: #000; }
.demo-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo-load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--inv-2); font: 500 14px/1.6 var(--font); text-align: center; }
.demo-load .sq { width: 14px; height: 14px; background: var(--g); margin: 0 auto 14px; animation: sq-spin 1s steps(4) infinite; }
@keyframes sq-spin { to { transform: rotate(360deg); } }
.demo-note { max-width: var(--max); margin: 12px auto 0; width: 100%; font-size: 12.5px; color: var(--inv-2); }

/* =============================================================================
   SUBPAGES (SEO pages share this sheet)
   ========================================================================== */
.page-hero { background: var(--black); color: var(--inv); padding: 150px 0 64px; }
.page-hero .crumbs { display: flex; gap: 8px; align-items: center; font: 500 13px/1 var(--font); color: var(--inv-2); margin-bottom: 24px; flex-wrap: wrap; }
.page-hero .crumbs a:hover { color: var(--g); }
.page-hero h1 { color: #fff; font-size: clamp(32px, 4.6vw, 48px); }
.page-hero .lead { margin-top: 20px; font-size: 18px; color: var(--inv-2); max-width: 700px; }
.page-body { padding: 72px 0 88px; }
.page-body .prose { max-width: 780px; }
.prose h2 { font-size: 26px; margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; margin: 28px 0 10px; }
.prose p { margin: 0 0 16px; color: var(--ink-2); font-size: 16px; }
.prose ul, .prose ol { margin: 0 0 18px 20px; color: var(--ink-2); }
.prose li { margin-bottom: 8px; }
.prose li b, .prose p b { color: var(--ink); }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--paper-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: var(--r); }
.prose .callout { border: 1px solid var(--line); border-left: 3px solid var(--g); background: var(--paper-2); padding: 18px 22px; margin: 22px 0; font-size: 15px; color: var(--ink-2); }
.prose table { border-collapse: collapse; width: 100%; margin: 18px 0 24px; font-size: 14.5px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.prose th { background: var(--paper-2); font-weight: 600; }
.prose td { color: var(--ink-2); }
.page-banner { border: 1px solid var(--line); background: var(--black); aspect-ratio: 16/6; position: relative; overflow: hidden; margin-bottom: 40px; }
.page-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.page-cta { margin-top: 52px; border: 1px solid var(--line); background: var(--paper-2); padding: 34px 36px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.page-cta h3 { font-size: 19px; }
.page-cta p { color: var(--ink-2); font-size: 14.5px; margin-top: 5px; }
.related { margin-top: 56px; }
.related h2 { font-size: 22px; margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 820px) { .related-grid { grid-template-columns: 1fr; } }
.related-grid a { background: var(--paper); padding: 20px 22px; display: block; transition: background .15s; }
.related-grid a:hover { background: var(--paper-2); }
.related-grid a b { display: block; font-size: 15px; margin-bottom: 5px; }
.related-grid a span { font-size: 13.5px; color: var(--ink-2); }

/* reveal ---------------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .demo-load .sq { animation: none; }
}

/* =============================================================================
   v3 ADDITIONS — background media, live plans, mobile hardening.
   Colour system unchanged on purpose (green accent / black bands / white body):
   the DESIGN-replicate.md reference was applied for its PRINCIPLES (one scarce
   accent, colour-blocked elevation, full-bleed bands, editorial whitespace,
   tight display type) — the user asked to keep the current palette.
   ========================================================================== */

/* ---- background media (hero video + game-art washes) ---------------------- */
.hero-media, .page-hero { position: relative; overflow: hidden; }
.bg-media {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.bg-media video, .bg-media img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05);
  opacity: .35;
}
/* the home hero's video IS the background (replaces the flat black) — only a
   soft bottom scrim remains so the copy and CTAs stay readable over motion */
.bg-media video.hero-video { opacity: 1; }
.hero .bg-media::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.82) 100%);
}
.bg-media::after {                    /* keeps text AAA-readable over any art */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 60%, #000 100%);
}
.hero .wrap, .page-hero .wrap { position: relative; z-index: 1; }
.hero::after { z-index: 1; }

/* mosaic of real game banners behind the hero (built by landing.js) */
.bg-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; }
.bg-mosaic img { width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; }
@media (max-width: 700px) { .bg-mosaic { grid-template-columns: repeat(2, 1fr); } }

/* ---- live plans (admin-configured, fetched from /api/public/plans) -------- */
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 980px) { .plans-grid { grid-template-columns: 1fr; } }
.plan { background: var(--paper); padding: 34px 30px; display: flex; flex-direction: column; }
.plan.featured { background: var(--black); color: var(--inv); }
.plan .p-name { font: 700 20px/1.2 var(--font); }
.plan .p-price { font: 700 clamp(30px, 3.4vw, 40px)/1.05 var(--font); letter-spacing: -.02em; margin: 16px 0 2px; }
.plan .p-price small { font: 500 13.5px/1 var(--font); color: var(--ink-3); letter-spacing: 0; }
.plan.featured .p-price small { color: var(--inv-2); }
.plan .p-desc { margin: 12px 0 18px; font-size: 14.5px; color: var(--ink-2); }
.plan.featured .p-desc { color: var(--inv-2); }
.plan ul { list-style: none; margin: 0 0 24px; display: grid; gap: 9px; }
.plan li { display: flex; gap: 9px; font: 500 13.5px/1.45 var(--font); color: var(--ink-2); }
.plan.featured li { color: var(--inv-2); }
.plan li::before { content: ""; width: 9px; height: 9px; margin-top: 5px; background: var(--g); flex: none; }
.plan .btn { margin-top: auto; }
.plans-note { margin-top: 18px; font: 500 13px/1.5 var(--font); color: var(--ink-3); }

/* ---- mobile hardening ------------------------------------------------------ */
@media (max-width: 920px) {
  .nav-in { gap: 14px; }
  /* the burger menu must scroll — with 20+ links it overflowed the viewport
     and everything below the fold was simply unreachable */
  .nav-links { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; }
}
@media (max-width: 640px) {
  section { padding: 64px 0; }
  .hero { padding: 118px 0 56px; }
  .page-hero { padding: 118px 0 48px; }
  /* phone-size type — the desktop clamps still rendered huge on 430px */
  h1 { font-size: 32px; }
  h2 { font-size: 25px; }
  .hero .sub { font-size: 16px; margin: 18px 0 26px; }
  .page-hero .lead { font-size: 16px; }
  .kicker { font-size: 11px; letter-spacing: .14em; }
  .hero .kicker { margin-bottom: 18px; }
  .hero-cta .btn, .page-cta .btn { width: 100%; }
  .page-cta { padding: 26px 20px; }
  .hero-meta { gap: 14px 22px; margin-top: 40px; }
  /* full-bleed demo player — the 24px frame wasted a third of a phone screen */
  .demo-modal { padding: 0; }
  .demo-top { padding: 10px 14px; margin-bottom: 0; }
  .demo-note { padding: 8px 14px; }
  .demo-body { border-left: 0; border-right: 0; }
  /* long content that used to overflow the viewport sideways */
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }
  pre, .prose pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .plan { padding: 28px 22px; }
}
@media (max-width: 420px) {
  .nav-in { gap: 10px; }
  .brand { font-size: 15px; gap: 8px; }
  .brand img { width: 24px; height: 24px; }
  .nav-auth .btn.sm { padding: 8px 10px; font-size: 12px; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   VGFX bridge + coverage globe (see /shared/verse-fx.css)
   The FX kit reads --vg-* tokens; the public site has its own palette, so map
   one onto the other here instead of forking the kit. Values are tuned for the
   black chapter bands, which is where the globe and the dot lattice live.
   ========================================================================== */
:root {
  --vg-bg:     var(--black);
  --vg-srf:    var(--coal);
  --vg-line:   rgba(255, 255, 255, .16);
  --vg-line-2: rgba(255, 255, 255, .30);
  --vg-ink:    var(--inv);
  --vg-ink-2:  var(--inv-2);
  --vg-ink-3:  #8a8a8a;
  --vg-brand:  var(--g);
  --vg-data:   #9ede2a;
  --vg-ok:     var(--g);
  --vg-warn:   #d8a300;
  --vg-bad:    #d84a2f;
  --vg-r-s:    var(--r);
  --vg-t-f:    var(--font);
  --vg-sh-2:   0 10px 30px rgba(0, 0, 0, .45);
}

/* coverage globe band ------------------------------------------------------- */
.cov-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.cov-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); }
.cov-num { background: var(--black); padding: 26px 24px; }
.cov-num .v { font: 700 44px/1 var(--font); letter-spacing: -.02em; }
.cov-num .v::after { content: ""; display: block; width: 12px; height: 12px; background: var(--g); margin-top: 12px; }
.cov-num .l { font: 600 14px/1.35 var(--font); margin-top: 14px; }
.cov-num .s { font-size: 13px; color: var(--inv-2); margin-top: 6px; }
.cov-cur { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.cov-cur span { font: 500 12px/1 var(--mono); letter-spacing: .06em; padding: 8px 10px; color: var(--inv-2); border: 1px solid var(--line-d); border-left: 2px solid var(--g); }
.cov-hint { margin-top: 24px; font-size: 13.5px; color: var(--inv-2); max-width: 46ch; }
.cov-grid > .cov-globe { justify-self: center; width: 100%; max-width: 460px; }
@media (max-width: 900px) {
  .cov-grid { grid-template-columns: 1fr; gap: 42px; }
  .cov-grid > .cov-globe { order: -1; max-width: 380px; }
}
@media (max-width: 520px) {
  .cov-nums { grid-template-columns: 1fr; }
  .cov-grid > .cov-globe { max-width: 300px; }
}