/* QuestBar Online — landing page.
   Palette and type are the game's own (Client/QuestBar.App/Themes/QuestBarTheme.axaml):
   Pixelify Sans = titles, Hanken Grotesk = labels/prose, IM FELL English italic = flavour. */

@font-face {
  font-family: "Pixelify Sans";
  src: url("../assets/fonts/PixelifySans.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/HankenGrotesk.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IM FELL English";
  src: url("../assets/fonts/IMFellEnglish-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --void: #070503;
  --ink: #0d0906;
  --app-ink: #150f08;
  --wood-700: #241a10;
  --wood-600: #2e2114;
  --wood-500: #3a2b19;
  --wood-400: #47341f;
  --bronze: #6b4a25;
  --bronze-hi: #9a6f3c;
  --gold: #c9932f;
  --gold-bright: #e3b45f;
  --gold-shine: #f0cf86;
  --gold-deep: #8a5f1b;
  --text: #f3e9d2;
  --text-body: #d8c6a1;
  --text-muted: #a08a63;
  --text-dim: #6f5f43;
  --ink-dark: #1a1109;
  --safe: #77b06a;
  --danger: #cf4b3c;
  --info: #5f95c9;
  --arcane: #9d7ed1;
  --ember: #d97a45;

  --f-display: "Pixelify Sans", "Hanken Grotesk", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-flavor: "IM FELL English", Georgia, "Times New Roman", serif;

  --gutter: 16px;
  --wrap: 75rem;
  --radius: 4px;
  --step: 6px; /* the pixel step used by the stepped corners */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  font-size: clamp(15px, 0.35vw + 11.5px, 24px);
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--text-body);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-bright); text-decoration-color: rgba(227, 180, 95, .4); text-underline-offset: .2em; }
a:hover { color: var(--gold-shine); }
:focus-visible { outline: 2px solid var(--gold-shine); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold); color: var(--ink-dark); }

.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--gold); color: var(--ink-dark); padding: .6rem 1rem; font-weight: 700; text-decoration: none; }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 28px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--text); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: .01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
p { margin: 0 0 1rem; }
.flavor { font-family: var(--f-flavor); font-style: italic; color: var(--gold-shine); font-size: 1.2em; line-height: 1.35; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-body); font-weight: 700; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
}
.eyebrow::before, .diamond {
  content: ""; width: .5rem; height: .5rem; flex: none; background: var(--gold-bright);
  transform: rotate(45deg); box-shadow: 0 0 10px rgba(227, 180, 95, .55);
}
.lead { font-size: 1.12rem; color: var(--text-body); max-width: 40rem; }
.muted { color: var(--text-muted); }

.section { position: relative; padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: 1rem; }
.section-head .flavor { margin: 0 0 1rem; }

/* gilded rule between sections */
.rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--bronze) 20%, var(--gold) 50%, var(--bronze) 80%, transparent); opacity: .7; }

/* ---------- buttons ---------- */
.btn {
  --c1: var(--gold-shine); --c2: var(--gold-bright); --c3: var(--gold);
  position: relative; display: inline-flex; align-items: center; gap: .8rem;
  padding: .95rem 1.5rem; border: 0; cursor: pointer;
  font-family: var(--f-body); font-weight: 800; font-size: 1rem; letter-spacing: .01em; line-height: 1.15;
  color: var(--ink-dark); text-decoration: none; text-align: left;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 38%, var(--c3) 100%);
  clip-path: polygon(var(--step) 0, calc(100% - var(--step)) 0, 100% var(--step), 100% calc(100% - var(--step)), calc(100% - var(--step)) 100%, var(--step) 100%, 0 calc(100% - var(--step)), 0 var(--step));
  box-shadow: inset 0 2px 0 rgba(255, 245, 210, .55), inset 0 -3px 0 rgba(90, 55, 10, .55);
  transition: filter .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { color: var(--ink-dark); filter: brightness(1.08) saturate(1.05); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); filter: brightness(.96); }
.btn:focus-visible { outline: none; filter: brightness(1.12); box-shadow: inset 0 0 0 3px var(--ink-dark), inset 0 0 0 5px var(--gold-shine); }
.btn svg { width: 1.6em; height: 1.6em; flex: none; }
.btn .btn-t { display: flex; flex-direction: column; gap: .2rem; }
.btn .btn-main { font-size: 1.12em; }
.btn .btn-sub { font-weight: 600; font-size: .78em; opacity: .78; letter-spacing: .02em; }
.btn-lg { padding: 1.1rem 1.8rem 1.1rem 1.4rem; font-size: 1.08rem; }

.btn-ghost {
  --c1: rgba(46, 33, 20, .92); --c2: rgba(36, 26, 16, .92); --c3: rgba(26, 17, 9, .92);
  color: var(--text); box-shadow: inset 0 0 0 1px var(--bronze), inset 0 1px 0 rgba(255, 220, 150, .08);
  font-weight: 700;
}
.btn-ghost:hover { color: var(--gold-shine); box-shadow: inset 0 0 0 1px var(--gold), inset 0 1px 0 rgba(255, 220, 150, .12); }
.btn-ghost[aria-disabled="true"] { cursor: default; color: var(--text-muted); transform: none; filter: none; }
.btn.is-recommended::after {
  content: attr(data-badge); position: absolute; right: .6rem; top: .5rem;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800;
  color: var(--gold-shine);
}
.btn-ghost.is-recommended { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 0 transparent; }

/* ---------- header / nav ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
}
.topbar.is-solid {
  background: rgba(13, 9, 6, .86);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(107, 74, 37, .6), 0 12px 30px rgba(0, 0, 0, .35);
}
.topbar .wrap { display: flex; align-items: center; gap: 1.2rem; height: 4rem; max-width: 90rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); text-decoration: none; font-family: var(--f-display); font-size: 1.15rem; letter-spacing: .02em; white-space: nowrap; }
.brand img { width: 2.1rem; height: 2.1rem; }
.brand:hover { color: var(--gold-shine); }
.nav { display: none; margin-left: auto; gap: .2rem; }
.nav a { color: var(--text-body); text-decoration: none; font-weight: 600; font-size: .9rem; padding: .45rem .7rem; border-radius: 3px; }
.nav a:hover { color: var(--gold-shine); background: rgba(201, 147, 47, .08); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
@media (min-width: 1020px) { .nav + .top-actions { margin-left: .4rem; } }
.lang { display: inline-flex; padding: 3px; background: rgba(21, 15, 8, .8); box-shadow: inset 0 0 0 1px var(--bronze); border-radius: 3px; }
.lang button {
  font: 700 .74rem/1 var(--f-body); letter-spacing: .1em; color: var(--text-muted);
  background: none; border: 0; padding: .5rem .6rem; cursor: pointer; border-radius: 2px;
}
.lang button[aria-pressed="true"] { background: var(--gold); color: var(--ink-dark); }
.lang button:hover:not([aria-pressed="true"]) { color: var(--gold-shine); }
.top-dl { padding: .6rem 1rem; font-size: .85rem; --step: 4px; }
.top-dl .btn-sub { display: none; }
@media (min-width: 1020px) { .nav { display: flex; } }
@media (max-width: 420px) { .top-dl { display: none; } .brand span { font-size: 1rem; } }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; isolation: isolate; background: var(--void);
  padding: 6.5rem 0 5.5rem;
}
.hero-bg { position: absolute; inset: -6% 0; z-index: -3; will-change: transform; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 55%; }
.hero.is-loaded .hero-bg img { animation: hero-settle 2.4s var(--ease) both; }
@keyframes hero-settle { from { transform: scale(1.07); filter: brightness(.6); } to { transform: scale(1); filter: brightness(1); } }
.hero::before { /* legibility: darken the text side and fade to ink at the bottom */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(7, 5, 3, .92) 0%, rgba(7, 5, 3, .74) 32%, rgba(7, 5, 3, .18) 62%, rgba(7, 5, 3, .1) 100%),
    linear-gradient(180deg, rgba(7, 5, 3, .55) 0%, transparent 22%, transparent 62%, var(--ink) 100%);
}
.hero::after { /* warm forge glow rising from the valley */
  content: ""; position: absolute; inset: auto -10% -20% -10%; height: 70%; z-index: -2;
  background: radial-gradient(60% 60% at 60% 100%, rgba(217, 122, 69, .26), transparent 70%);
  mix-blend-mode: screen; pointer-events: none;
}
.embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }
.hero-content { position: relative; max-width: 42rem; }
.hero-mark { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.3rem; }
.hero-mark img { width: clamp(4rem, 7vw, 5.6rem); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(201, 147, 47, .25)); }
.hero-mark .eyebrow { margin: 0; }
.hero h1 {
  font-size: clamp(2.9rem, 8.4vw, 6.2rem); line-height: .95; letter-spacing: .005em; margin-bottom: 1.2rem;
  background: linear-gradient(180deg, #fff6dc 0%, var(--gold-shine) 40%, var(--gold-bright) 62%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(26, 17, 9, .85)) drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
}
.hero h1 small { display: block; font-size: .44em; letter-spacing: .32em; margin-top: .55rem; padding-left: .2em; }
.hero .tagline { font-size: clamp(1.35rem, 2.4vw, 1.9rem); margin: 0 0 1.1rem; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
.hero .lead { color: var(--text); text-shadow: 0 1px 12px rgba(0, 0, 0, .9); margin-bottom: 2rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; }
.cta-alt { display: flex; flex-wrap: wrap; gap: .6rem; }
.cta-alt .btn { padding: .75rem 1.05rem; font-size: .9rem; }
.cta-note { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .88rem; color: var(--text-body); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.cta-note span { display: inline-flex; align-items: center; gap: .45rem; }
.cta-note span::before { content: ""; width: .36rem; height: .36rem; background: var(--gold); transform: rotate(45deg); }
.os-hint { margin-top: .8rem; font-size: .86rem; color: var(--gold-shine); min-height: 1.3em; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted); text-decoration: none;
}
.scroll-cue i { width: 2px; height: 2.4rem; background: linear-gradient(var(--gold), transparent); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 719px) {
  .hero { align-items: flex-end; padding-bottom: 4.5rem; }
  .hero-bg img { object-position: 66% 50%; }
  .hero::before { background: linear-gradient(180deg, rgba(7, 5, 3, .55) 0%, rgba(7, 5, 3, .25) 26%, rgba(7, 5, 3, .78) 52%, var(--ink) 100%); }
  .scroll-cue { display: none; }
  .cta-row > .btn-lg { width: 100%; }
}

/* ---------- frames (the game's bronze card, with pixel corners) ---------- */
.frame {
  position: relative; background: var(--app-ink);
  box-shadow: 0 0 0 1px var(--bronze), 0 0 0 4px var(--ink), 0 0 0 5px rgba(107, 74, 37, .5), 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.frame::before, .frame::after { /* gold pixel corner brackets */
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 2;
  border: 3px solid var(--gold-bright); filter: drop-shadow(0 0 6px rgba(227, 180, 95, .45));
}
.frame::before { left: -5px; top: -5px; border-right: 0; border-bottom: 0; }
.frame::after { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.frame img { width: 100%; }

.shot { margin: 0; }
.shot button { all: unset; display: block; cursor: zoom-in; width: 100%; }
.shot button:focus-visible { outline: 2px solid var(--gold-shine); outline-offset: 8px; }
.shot figcaption { margin-top: 1.1rem; font-size: .82rem; color: var(--text-muted); display: flex; align-items: center; gap: .55rem; }
.shot figcaption::before { content: ""; width: .4rem; height: .4rem; background: var(--gold-deep); transform: rotate(45deg); flex: none; }
.shot .frame { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.shot button:hover .frame { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px var(--ink), 0 0 0 5px rgba(201, 147, 47, .45), 0 40px 70px -24px rgba(0, 0, 0, .9); }

/* ---------- what is it ---------- */
.what { background: radial-gradient(80% 60% at 70% 30%, rgba(95, 149, 201, .07), transparent 60%), var(--ink); }
.what-head { display: grid; gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.what-head .flavor { margin: 1rem 0 0; }
.what-head .lead { margin: 0; }
@media (min-width: 1000px) { .what-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.desk { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 1000px) { .desk { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 3rem; } }
.desk-zoom { max-width: 22rem; margin: 0 auto; width: 100%; }
.screen-inner { position: relative; overflow: hidden; border-radius: 3px; }
.anno { position: absolute; pointer-events: none; }
.anno-free {
  left: 3%; top: 7%; width: 66%; height: 84%; display: grid; place-items: center;
  border: 2px dashed rgba(240, 207, 134, .38); border-radius: 4px;
}
.anno-free span {
  font-family: var(--f-display); font-weight: 500; color: rgba(240, 207, 134, .85); text-align: center;
  font-size: clamp(1rem, 2.1vw, 1.75rem); padding: 0 1rem; text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.anno-rail {
  left: 73.4%; top: .4%; width: 26.2%; height: 66%;
  border: 2px solid var(--gold-bright); border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(227, 180, 95, .12), 0 0 30px rgba(227, 180, 95, .35);
  animation: rail-pulse 3.2s ease-in-out infinite;
}
.anno-rail span {
  position: absolute; right: 0; top: calc(100% + .5rem);
  font: 800 .72rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-dark); background: var(--gold-bright); padding: .4rem .55rem; border-radius: 2px;
}
@keyframes rail-pulse { 50% { box-shadow: 0 0 0 7px rgba(227, 180, 95, .06), 0 0 46px rgba(227, 180, 95, .55); } }
@media (max-width: 719px) { .anno-free span { font-size: .8rem; } .anno-rail span { font-size: .55rem; padding: .25rem .35rem; } }
.monitor { position: relative; }
.monitor-screen {
  position: relative; padding: 12px; border-radius: 10px;
  background: linear-gradient(180deg, #1b140c, #0b0805);
  box-shadow: 0 0 0 1px #3a2b19, inset 0 0 0 1px #000, 0 40px 80px -30px rgba(0, 0, 0, .95);
}
.monitor-screen img { border-radius: 3px; width: 100%; }
.monitor-stand { width: 22%; height: 2.2rem; margin: 0 auto; background: linear-gradient(180deg, #1a1209, #0c0805); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.monitor-foot { width: 38%; height: .5rem; margin: 0 auto; border-radius: 0 0 6px 6px; background: #120c07; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.traits { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; gap: 1.4rem 2rem; }
@media (min-width: 720px) { .traits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .traits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.traits li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: start; }
.traits .ico {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; color: var(--gold-bright);
  background: linear-gradient(180deg, var(--wood-600), var(--wood-700)); box-shadow: inset 0 0 0 1px var(--bronze);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.traits .ico svg { width: 1.3rem; height: 1.3rem; }
.traits strong { display: block; color: var(--text); font-size: 1.02rem; margin-bottom: .15rem; }
.traits span { color: var(--text-muted); font-size: .95rem; }
.kbd { font: 700 .78em/1 var(--f-body); padding: .22em .45em; border-radius: 3px; background: var(--wood-600); box-shadow: inset 0 0 0 1px var(--bronze), 0 2px 0 var(--void); color: var(--gold-shine); white-space: nowrap; }

/* ---------- feature rows ---------- */
.features { background: linear-gradient(180deg, var(--ink), var(--app-ink) 50%, var(--ink)); }
.feature { display: grid; gap: 2.2rem; align-items: center; }
.feature + .feature { margin-top: clamp(4.5rem, 9vw, 8rem); }
@media (min-width: 960px) {
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; }
  .feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .feature.flip .feature-copy { order: 2; }
}
.feature-num { font-family: var(--f-display); font-size: .95rem; color: var(--gold-deep); letter-spacing: .2em; display: block; margin-bottom: .5rem; }
.feature h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: .9rem; }
.feature .flavor { margin-bottom: 1rem; font-size: 1.15rem; }
.facts { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .65rem; }
.facts li { position: relative; padding-left: 1.4rem; color: var(--text-body); font-size: .97rem; }
.facts li::before { content: ""; position: absolute; left: .1rem; top: .6em; width: .42rem; height: .42rem; background: var(--gold); transform: rotate(45deg); }
.facts b { color: var(--text); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem; }
.chip {
  font: 700 .72rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .6rem; color: var(--gold-bright); background: rgba(46, 33, 20, .7); box-shadow: inset 0 0 0 1px var(--bronze); border-radius: 2px;
}
.chip.r-common { color: #b4ad9e; } .chip.r-magic { color: var(--safe); } .chip.r-rare { color: var(--info); } .chip.r-epic { color: var(--arcane); }
.chip.r-legendary { color: var(--gold-bright); } .chip.r-mythic { color: var(--ember); } .chip.r-unique { color: #5fc9b0; } .chip.r-relic { color: #e0663c; }

/* ---------- world ---------- */
.world { overflow: hidden; }
.world-band { position: absolute; inset: 0; z-index: -1; opacity: .16; }
.world-band img { width: 100%; height: 100%; object-fit: cover; }
.world-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink), transparent 20%, transparent 70%, var(--ink)); }
.regions { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.region {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--void);
  box-shadow: 0 0 0 1px var(--bronze); isolation: isolate;
}
.region img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.92) brightness(.86); z-index: -2; }
.region::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(7, 5, 3, .92)); }
.region:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1); }
.region:hover { box-shadow: 0 0 0 1px var(--gold); }
.region-body { position: absolute; inset: auto 0 0 0; padding: .9rem 1rem; }
.region h3 { font-size: 1.25rem; }
.region p { margin: .2rem 0 0; font-size: .8rem; color: var(--text-muted); line-height: 1.4; }
.region p b { color: var(--gold-bright); font-weight: 700; }

.world-split { display: grid; gap: 2.4rem; align-items: center; margin-top: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 960px) { .world-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }

.subhead { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: clamp(3.5rem, 7vw, 6rem) 0 1.6rem; }
.subhead h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.subhead p { margin: 0; color: var(--text-muted); max-width: 32rem; font-size: .95rem; }
.bestiary { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.6rem), 1fr)); }
.beast { margin: 0; position: relative; background: var(--void); box-shadow: 0 0 0 1px var(--wood-400); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.beast img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.beast figcaption { padding: .55rem .65rem .65rem; font-size: .78rem; font-weight: 700; color: var(--text); line-height: 1.25; background: linear-gradient(180deg, var(--wood-700), var(--app-ink)); border-top: 1px solid var(--bronze); }
.beast:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--gold), 0 18px 36px -12px rgba(0, 0, 0, .9), 0 0 24px rgba(201, 147, 47, .18); }

.factions { margin-top: clamp(3.5rem, 7vw, 6rem); text-align: center; }
.factions h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.factions > p { color: var(--text-muted); margin: 0 auto 1.6rem; max-width: 36rem; font-size: .95rem; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 1.6rem; width: max-content; animation: marquee 60s linear infinite; padding: .6rem 0; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee figure { margin: 0; width: 5.2rem; flex: none; }
.marquee img { width: 5.2rem; height: 5.2rem; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); transition: transform .3s var(--ease); }
.marquee figure:hover img { transform: translateY(-3px) scale(1.06); }
.marquee figcaption { font-size: .66rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.2; }
@keyframes marquee { to { transform: translateX(calc(-50% - .8rem)); } }

/* ---------- classes ---------- */
.classes { background: radial-gradient(70% 50% at 50% 0%, rgba(201, 147, 47, .08), transparent 70%), var(--ink); }
.class-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.class {
  --accent: var(--gold-bright);
  position: relative; padding: 1.5rem 1.25rem 1.4rem; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--wood-600), var(--wood-700) 40%, var(--app-ink));
  box-shadow: inset 0 0 0 1px var(--bronze), inset 0 1px 0 rgba(255, 220, 150, .07);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.class:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--accent), 0 24px 40px -18px rgba(0, 0, 0, .9), 0 0 30px -6px color-mix(in srgb, var(--accent) 35%, transparent); }
.class::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); opacity: .9; }
.class img { width: 4.6rem; height: 4.6rem; margin-bottom: .9rem; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
.class h3 { font-size: 1.55rem; margin-bottom: .25rem; }
.class .epithet { font-family: var(--f-flavor); font-style: italic; color: var(--gold-shine); font-size: 1.05rem; line-height: 1.3; margin-bottom: .9rem; }
.class dl { margin: 0; display: grid; gap: .55rem; font-size: .88rem; }
.class dt { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.class dd { margin: .1rem 0 0; color: var(--text-body); line-height: 1.45; }
.class dd b { color: var(--accent); }
.class.c-vanguard { --accent: #cf6a4b; } .class.c-ranger { --accent: #77b06a; } .class.c-scholar { --accent: #5f95c9; }
.class.c-rogue { --accent: #b9a07a; } .class.c-mystic { --accent: #9d7ed1; }
.class-note { margin-top: 2rem; text-align: center; color: var(--text-muted); font-size: .95rem; }
.class-note strong { color: var(--text); }

/* ---------- seasons ---------- */
.seasons { overflow: hidden; isolation: isolate; }
.seasons-bg { position: absolute; inset: 0; z-index: -1; }
.seasons-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.seasons-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(13, 9, 6, .55) 30%, rgba(13, 9, 6, .7) 70%, var(--ink) 100%); }
.p2w {
  position: relative; display: grid; gap: 1.2rem; align-items: center; margin-bottom: 3rem; padding: 1.6rem 1.6rem;
  background: linear-gradient(90deg, rgba(119, 176, 106, .12), rgba(21, 15, 8, .85) 55%);
  box-shadow: inset 0 0 0 1px rgba(119, 176, 106, .45);
}
@media (min-width: 760px) { .p2w { grid-template-columns: auto 1fr; padding: 1.8rem 2.2rem; gap: 1.8rem; } }
.p2w-seal {
  width: 4.6rem; height: 4.6rem; display: grid; place-items: center; color: var(--safe);
  border: 2px solid var(--safe); transform: rotate(45deg); box-shadow: 0 0 24px rgba(119, 176, 106, .25);
}
.p2w-seal svg { transform: rotate(-45deg); width: 2rem; height: 2rem; }
.p2w h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .35rem; }
.p2w p { margin: 0; color: var(--text-body); }
.season-grid { display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 960px) { .season-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.6rem; }
.stat { padding: 1rem 1.1rem; background: rgba(21, 15, 8, .8); box-shadow: inset 0 0 0 1px var(--bronze); }
.stat b { display: block; font-family: var(--f-display); font-size: 1.9rem; color: var(--gold-shine); line-height: 1; margin-bottom: .35rem; }
.stat span { font-size: .82rem; color: var(--text-muted); line-height: 1.35; display: block; }

/* ---------- install ---------- */
.install { background: linear-gradient(180deg, var(--ink), var(--app-ink)); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step {
  counter-increment: step; position: relative; padding: 2.4rem 1.5rem 1.6rem;
  background: linear-gradient(180deg, var(--wood-700), var(--app-ink)); box-shadow: inset 0 0 0 1px var(--bronze);
}
.step::before {
  content: counter(step); position: absolute; top: -1.1rem; left: 1.4rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.2rem; color: var(--ink-dark);
  background: linear-gradient(180deg, var(--gold-shine), var(--gold));
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.step h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.step p { margin: 0; color: var(--text-muted); font-size: .95rem; }
.step code { font-size: .82em; color: var(--gold-shine); background: var(--void); padding: .15em .4em; border-radius: 3px; word-break: break-all; }
.smartscreen {
  margin-top: 1.2rem; display: grid; gap: .9rem; align-items: center; padding: 1.1rem 1.3rem;
  background: rgba(95, 149, 201, .08); box-shadow: inset 0 0 0 1px rgba(95, 149, 201, .4);
}
@media (min-width: 760px) { .smartscreen { grid-template-columns: auto 1fr; gap: 1.2rem; } }
.smartscreen .ss-flow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ss-btn { font: 600 .82rem/1 "Segoe UI", var(--f-body); padding: .5rem .8rem; color: #fff; background: #1e3a5f; box-shadow: inset 0 0 0 1px #4f7fb5; border-radius: 2px; white-space: nowrap; }
.ss-btn.link { background: none; box-shadow: none; text-decoration: underline; color: #9cc3ef; padding-left: 0; padding-right: 0; }
.ss-arrow { color: var(--text-muted); }
.smartscreen p { margin: 0; font-size: .92rem; color: var(--text-body); }
.autoupdate { margin-top: 2.6rem; display: grid; gap: 1.2rem; align-items: center; padding: 1.6rem; background: radial-gradient(80% 140% at 0% 50%, rgba(201, 147, 47, .14), transparent 60%), var(--app-ink); box-shadow: inset 0 0 0 1px var(--bronze); }
@media (min-width: 760px) { .autoupdate { grid-template-columns: auto 1fr; gap: 1.6rem; padding: 1.8rem 2.2rem; } }
.autoupdate svg { width: 3.4rem; height: 3.4rem; color: var(--gold-bright); }
.autoupdate h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.autoupdate p { margin: 0; color: var(--text-body); }

.dl-cards { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 860px) { .dl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dl-card { padding: 1.5rem; background: var(--app-ink); box-shadow: inset 0 0 0 1px var(--wood-400); display: flex; flex-direction: column; gap: .8rem; }
.dl-card.is-recommended { box-shadow: inset 0 0 0 2px var(--gold), 0 0 40px -12px rgba(201, 147, 47, .45); }
.dl-card header { display: flex; align-items: center; gap: .8rem; }
.dl-card header svg { width: 2rem; height: 2rem; color: var(--gold-bright); flex: none; }
.dl-card h3 { font-size: 1.3rem; }
.dl-card .badge { margin-left: auto; font: 800 .62rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dark); background: var(--gold-bright); padding: .35rem .5rem; border-radius: 2px; visibility: hidden; }
.dl-card.is-recommended .badge { visibility: visible; }
.dl-card p { margin: 0; font-size: .9rem; color: var(--text-muted); flex: 1; }
.dl-card .btn { justify-content: center; text-align: center; }

/* ---------- requirements ---------- */
.req-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.req { padding: 1.4rem 1.4rem 1.2rem; background: var(--app-ink); box-shadow: inset 0 0 0 1px var(--wood-400); }
.req h3 { font-size: 1.2rem; display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.req h3 svg { width: 1.5rem; height: 1.5rem; color: var(--gold-bright); }
.req dl { margin: 0; display: grid; gap: .6rem; }
.req dt { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.req dd { margin: .1rem 0 0; color: var(--text); font-size: .95rem; }
.req.soon { opacity: .75; }

/* ---------- faq ---------- */
.faq-list { max-width: 52rem; margin: 0 auto; display: grid; gap: .6rem; }
.faq-list details { background: var(--app-ink); box-shadow: inset 0 0 0 1px var(--wood-400); transition: box-shadow .3s; }
.faq-list details[open] { box-shadow: inset 0 0 0 1px var(--bronze-hi); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 1.1rem 3.2rem 1.1rem 1.3rem; position: relative;
  font-weight: 700; color: var(--text); font-size: 1.02rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 1.4rem; top: 50%; width: .55rem; height: .55rem; margin-top: -.4rem;
  border-right: 2px solid var(--gold-bright); border-bottom: 2px solid var(--gold-bright); transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(225deg); margin-top: -.1rem; }
.faq-list summary:hover { color: var(--gold-shine); }
.faq-list .answer { padding: 0 1.3rem 1.2rem; color: var(--text-body); font-size: .96rem; }
.faq-list .answer p:last-child { margin-bottom: 0; }

/* ---------- final cta + footer ---------- */
.final { text-align: center; overflow: hidden; isolation: isolate; padding: clamp(5rem, 11vw, 9rem) 0; }
.final-bg { position: absolute; inset: 0; z-index: -1; }
.final-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.final-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 50%, rgba(13, 9, 6, .45), rgba(13, 9, 6, .92) 75%), linear-gradient(180deg, var(--ink), transparent 30%, transparent 70%, var(--ink)); }
.final img.mark { width: 5.4rem; margin: 0 auto 1.4rem; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .7)); }
.final h2 { margin-bottom: .8rem; }
.final .flavor { margin: 0 auto 2rem; max-width: 36rem; }
.final .cta-row { justify-content: center; }

.footer { background: var(--void); padding: 3rem 0 2.4rem; font-size: .86rem; color: var(--text-muted); box-shadow: 0 -1px 0 var(--wood-500); }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer h4 { font-family: var(--f-body); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer a { color: var(--text-body); text-decoration: none; }
.footer a:hover { color: var(--gold-shine); text-decoration: underline; }
.footer .brand { margin-bottom: .9rem; }
.footer-bottom { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--wood-500); display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between; font-size: .78rem; color: var(--text-dim); }

/* ---------- lightbox ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1600px); max-height: 94vh; overflow: visible; color: var(--text); }
.lightbox::backdrop { background: rgba(7, 5, 3, .9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox img { max-width: min(96vw, 1600px); max-height: calc(94vh - 3.4rem); width: auto; height: auto; box-shadow: 0 0 0 1px var(--gold), 0 30px 80px rgba(0, 0, 0, .9); background: var(--void); }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .8rem; }
.lightbox-bar p { margin: 0; font-size: .9rem; color: var(--text-body); }
.lightbox-close { font: 700 .85rem/1 var(--f-body); color: var(--text); background: var(--wood-600); border: 0; box-shadow: inset 0 0 0 1px var(--bronze); padding: .6rem .9rem; cursor: pointer; }
.lightbox-close:hover { color: var(--gold-shine); box-shadow: inset 0 0 0 1px var(--gold); }

/* ---------- reveal motion (only when JS runs, never under reduced motion) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .06s; } .js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .12s; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .18s; } .js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .24s; }
.js .reveal-stagger.is-in > *:nth-child(6) { transition-delay: .3s; } .js .reveal-stagger.is-in > *:nth-child(7) { transition-delay: .36s; }
.js .reveal-stagger.is-in > *:nth-child(8) { transition-delay: .42s; } .js .reveal-stagger.is-in > *:nth-child(n+9) { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .hero-bg { transform: none !important; }
  .marquee-track { animation: none !important; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee-track [aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .embers { display: none; }
}

@media print {
  .topbar, .embers, .scroll-cue, .lightbox { display: none !important; }
  .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- pass 2: art-direction fixes ---------- */
h1, h2, h3, h4 { font-weight: 500; }
.region h3, .class h3, .step h3, .req h3, .dl-card h3, .factions h3, .autoupdate h3 { font-weight: 400; }
/* Pixelify's 5/S and 2/Z read alike: every figure is set in the sans face, as the game does (QbFontFigures). */
.stat b, .feature-num, .step::before { font-family: var(--f-body); font-weight: 800; letter-spacing: 0; }
.stat b { font-size: 2.2rem; }
.feature-num { font-size: .85rem; letter-spacing: .24em; color: var(--gold); }
.step::before { font-size: 1.1rem; }

.hero::before {
  background:
    linear-gradient(90deg, rgba(7, 5, 3, .92) 0%, rgba(7, 5, 3, .74) 32%, rgba(7, 5, 3, .18) 62%, rgba(7, 5, 3, .1) 100%),
    linear-gradient(180deg, rgba(7, 5, 3, .55) 0%, transparent 22%, transparent 56%, rgba(13, 9, 6, .82) 86%, var(--ink) 100%);
}
@media (max-width: 719px) {
  .hero::before { background: linear-gradient(180deg, rgba(7, 5, 3, .55) 0%, rgba(7, 5, 3, .2) 24%, rgba(7, 5, 3, .8) 50%, var(--ink) 100%); }
}

.feature .shot { position: relative; isolation: isolate; }
.feature .shot::before {
  content: ""; position: absolute; inset: -14% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow, rgba(201, 147, 47, .3)), transparent 75%);
}
.feature:nth-of-type(1) { --glow: rgba(207, 75, 60, .26); }
.feature:nth-of-type(2) { --glow: rgba(227, 180, 95, .22); }
.feature:nth-of-type(3) { --glow: rgba(157, 126, 209, .24); }
.feature:nth-of-type(4) { --glow: rgba(119, 176, 106, .2); }
.feature:nth-of-type(5) { --glow: rgba(95, 149, 201, .22); }
.feature:nth-of-type(6) { --glow: rgba(217, 122, 69, .26); }
.feature h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }

.class-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.class { flex: 1 1 15rem; max-width: 22rem; }
@media (min-width: 1180px) { .class { flex-basis: 0; max-width: none; } .class-grid { flex-wrap: nowrap; } }

.step code { white-space: nowrap; word-break: normal; display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: bottom; }

.install { background: linear-gradient(180deg, var(--ink), var(--app-ink) 45%, var(--ink)); }

.region::after { background: linear-gradient(180deg, transparent 28%, rgba(7, 5, 3, .7) 58%, rgba(7, 5, 3, .96)); }
.region p { color: var(--text-body); }

.marquee figcaption { color: var(--text-body); opacity: .75; }
.features, .what, .seasons, .final, .world { overflow: hidden; overflow: clip; }
.hero::after { inset: auto -10% 0 -10%; height: 75%; background: radial-gradient(55% 45% at 62% 62%, rgba(217, 122, 69, .24), transparent 100%); }
.hero-fade { position: absolute; inset: auto 0 0 0; height: 22%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13, 9, 6, 0), var(--ink) 92%); }
.hero .wrap { position: relative; z-index: 1; }
.scroll-cue { z-index: 1; }

/* phones: long card lists become swipeable strips instead of a 20 000 px scroll */
@media (max-width: 719px) {
  .regions, .class-grid {
    display: flex; flex-wrap: nowrap; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter)); padding: .4rem var(--gutter) 1rem; scroll-padding: 0 var(--gutter);
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--bronze) transparent;
  }
  .regions > *, .class-grid > * { flex: 0 0 82%; max-width: none; scroll-snap-align: start; }
  .region { aspect-ratio: 4 / 3; }
  .bestiary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
  .beast figcaption { font-size: .68rem; padding: .45rem .45rem .5rem; }
  .steps { gap: 2rem; }
  .class-grid { justify-content: flex-start; }
}
.swipe-hint { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin: .2rem 0 0; }
.swipe-hint::after { content: " →"; color: var(--gold); }
@media (min-width: 720px) { .swipe-hint { display: none; } }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lead.center { margin-left: auto; margin-right: auto; }
.world-t2 { margin-bottom: .8rem; }
.section-tight { padding-top: 0; }