/* -----------------------------
   Landing (index.html) — marketing hero
   Keep a bold headline over Bliss; XP cards sit below.
   ----------------------------- */

/* Top-of-page Play CTA. Lives between the .site-header wordmark (top
   banner) and the .hero image. Tap → smooth-scroll to #landingChoices
   so first-timers can reach the host/deploy/spectate/marketer cards
   without scrolling past the hero. Visual is the standard XP-green
   primary button language (matches .btn in 03-chrome-primitives.css)
   but bigger and width-auto, since this is a single standalone CTA
   rather than a card-bottom action. Click handler is wired in the
   <script> block at the end of public/index.html. Captain X95 /
   2026-05-08. */
.hero-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 4px;
}
.hero-cta {
  /* X123-2026-05-12 (Captain): Lato-first stack, same revert as
     .btn in 15-mlcom-overrides.css. --f-display lists W95FA first
     which made these labels render in the pixel font once the W95FA
     CDN landed; the original design intent was Lato Heavy and the
     comment on the next line has been historically accurate about
     intent if not about rendering. */
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;                 /* Lato Heavy, matches .btn */
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 42px;
  border: 1px solid var(--ml-green-dark);
  border-radius: 6px;
  background: var(--ml-green);      /* flat memelord brand green */
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.30);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.28);
}
.hero-cta:hover  { filter: brightness(1.08) saturate(1.05); }
.hero-cta:active { transform: translateY(1px); filter: brightness(0.95); box-shadow: inset 0 2px 2px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.20); }
.hero-cta:focus-visible {
  outline: 2px solid var(--ml-yellow);
  outline-offset: 2px;
}

/* Situation Room CTA — same .hero-cta press chrome, different palette
   so it reads as the parallel paid-mode entry point rather than a
   second copy of PLAY. Charcoal monitor body + amber chyron accent
   echoes the .sr-monitor + .sr-monitor-head treatment on
   marketer.html so the visual relationship between the button and
   its destination is immediate. Captain X97 / 2026-05-08. */
.hero-cta.hero-cta-situation {
  background: linear-gradient(180deg, #2a2f38 0%, #1a1d22 100%);
  color: var(--ml-green-hi);
  border-color: #000;
  text-shadow: 0 0 6px rgba(64, 208, 116, 0.55);
  box-shadow:
    inset 0 1px 0 #4a4f58,
    inset 0 -1px 0 #050608,
    0 3px 8px rgba(0, 0, 0, 0.45);
}
.hero-cta.hero-cta-situation:hover {
  filter: brightness(1.12);
  text-shadow: 0 0 10px rgba(64, 208, 116, 0.75);
}

.hero {
  /* X149-2026-05-14: removed the `-20px` horizontal escape margin.
     Captain QA: "the landing page hero was bigger when I switched
     tabs … it's not the same size as the hero on every other page."
     Math: `.page` is 660 max with 24px padding (X86-2026-05-08) →
     content area 612px. The pre-X149 -20px escape pulled `.hero`
     out to 612 + 40 = 652px, which `.hero-art` (width: 660px /
     max-width: 100%) then filled. Meanwhile `.phase-hero` on
     host/player/spectator sits inside `.container` (660 / 24px
     padding, no escape margin) and renders at 612px. So the
     landing hero rendered 40px wider than every other page's
     hero on desktop. Removing the escape aligns `.hero-art` to
     the same 612px lane every `.phase-hero` uses. The escape was
     originally added when `.page` was 880 wide (X65 lane
     unification) and the four landing cards needed to fill the
     full lane edge-to-edge; that 880-era logic was already a
     historical leftover after X79's 660 narrowing. `.hero-grid`
     below still has its own escape margin — see comment there
     for whether to mirror this change. */
  margin: 36px 0 32px;
  text-align: center;
  padding: 0;
}
.hero .kicker {
  font-family: var(--f-pixel);
  /* 2026-04-25: kicker demoted from header material to a small footer
     line under the recruiter. Captain wanted the meta out of the
     way. Bumped down from 0.65rem and flipped from margin-bottom to
     margin-top because it now sits BELOW the recruiter, not above the
     hero. See MEMELORD_DESIGN_BIBLE.md Opening Screen entry.
     2026-04-28: contrast fix — added rgba(0,0,0,0.45) background behind text
     to provide dark backdrop for white text on Bliss sky blue. This creates
     an effective contrast of ~5.0:1, meeting WCAG AA 4.5:1 standard. */
  font-size: 0.55rem;
  color: #ffffff;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 14px 0 0;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  display: inline-block;
  text-shadow: 2px 2px 0 #000, 0 0 8px rgba(0, 252, 157, 0.50);
}

/* Boot Camp Press Start pixel-art panel — the visual centerpiece of
   the opening screen. Replaces the old .hero-wojak left-side portrait;
   sits centered at the top of .hero, bordered + drop-shadowed so it
   reads like a chunky Luna-era window panel on top of XP Bliss.
   Pixelated rendering keeps the chunky retro art crisp — no smoothing
   that would mush the lettering. The aspect ratio is preserved
   (height: auto). On mobile we shrink the max-width so the panel
   doesn't exceed the viewport. */
.hero-art {
  /* 2026-05-01 PM: .hero-window Win95 chrome was stripped. Sizing
     moved here — image renders at full lane width on desktop, with
     max-width:100% so phones still get viewport-bound rendering and
     centering via margin auto.
     2026-05-05 (X65): width 560 → 880 to match the unified 880 desktop
     lane. 2026-05-08 (X78): 880 → 720 (Captain QA "feels too wide").
     2026-05-08 (X79): 720 → 660 (Captain QA "let's try 660 px on
     everything"). Asset is pixel art at native 560px, so scaling up
     to 660 still uses the image-rendering: pixelated path — coarser
     than native but a smaller upscale than the 720 / 880 builds were.
     If Captain wants a sharper-at-660 hero, the asset under
     public/img/splash-boot-camp-press-start.png would need to be
     re-rendered at the higher native size. */
  display: block;
  width: 660px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* ── Hero Win95 window frame: REMOVED 2026-05-01 PM ───────────────────
   The .hero-window / .hero-window-body / .hero-window-titlebar etc.
   rules used to wrap boot-camp-press-start.png in a Win95 window chrome
   (gray frame + navy title bar). Captain's 2026-05-01 PM call: the
   image is already framed pixel-art on its own, the extra gray box was
   visual noise. Sizing (width: 560px, max-width: 100%, centered)
   moved up to .hero-art directly. The .hero-window* rules had no other
   consumers in the repo (only index.html), so they were deleted
   wholesale rather than left as dead CSS. */

.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 0.95;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-shadow: 3px 3px 0 #000, 0 0 20px rgba(0, 0, 0, 0.35);
  margin-bottom: 14px;
  font-weight: 900;                /* Lato Heavy */
  font-family: var(--f-display);
}
.hero h1 .hot  { color: var(--ml-yellow); }   /* memelord brand yellow */
.hero h1 .pink { color: #2cf3d0; }            /* memelord.com signature teal */
.hero .tagline {
  font-family: var(--f-body);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: #000;
  background:
    linear-gradient(180deg, #fffdc7 0%, var(--ml-yellow) 100%);
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #c4a83c;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 8px rgba(0, 0, 0, 0.30);
  margin-bottom: 24px;
  letter-spacing: 0.03em;
}
/* Memetic Warfare Training Division hero — uniformed Wojak recruiter on
   the right, dept-of-memetic-warfare stack on the left. If the image
   PNGs aren't dropped yet, onerror strips them and the text still reads. */
.hero-row {
  /* X84-2026-05-08: 820 → 660 to track the unified desktop lane.
     Pre-X84 this rule predated the lane-pinning era and shipped at
     820, which made the landing page render visibly WIDER than every
     other page in the site (lane is 660 post-X79). Captain caught
     this on the X79 sweep follow-up: "all of the pages are now
     different widths." Snapped to 660 to match. The .hero-text /
     .hero-wojak children are flex items with their own min-widths,
     so the row still wraps cleanly on phones. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  text-align: left;
  max-width: 660px;
  margin: 0 auto;
}
.hero-text { flex: 1 1 320px; min-width: 260px; }
.hero-wojak {
  flex: 0 0 auto;
  width: clamp(140px, 26vw, 220px);
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(3px 3px 0 #000);
}
.hero-dept {
  font-family: var(--f-display);
  /* 2026-04-25: bumped from 0.72rem → ~0.95rem and padding from
     4px/10px → 7px/16px so the US Department chip reads as the primary
     framing element, not a small kicker. Captain explicitly wanted
     this bigger now that it carries the "MEMETIC WARFARE" framing on
     its own (the redundant black h1 line was removed). */
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ml-ink);
  background: var(--ml-gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 0;
  box-shadow:
    inset  1px  1px 0 #fff7b8,
    inset -1px -1px 0 #a17d00;
  margin-bottom: 10px;
  font-weight: 700;
}
.hero-flag {
  /* 2026-04-25: scaled up alongside .hero-dept (16px → 22px wide) so
     the flag stays visually balanced against the bigger chip. */
  width: 22px; height: 16px;
  image-rendering: pixelated;
}
.recruiter {
  font-family: var(--f-display);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: #000;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 12px;
  font-weight: 700;
  box-shadow:
    inset  1px  1px 0 var(--ml-gray-sh),
    inset -1px -1px 0 var(--ml-gray-hi-2),
    inset  2px  2px 0 var(--ml-gray-sh-2),
    inset -2px -2px 0 var(--ml-gray-hi),
    3px 3px 0 rgba(0,0,0,0.35);
  letter-spacing: 0;
  text-transform: none;
}
.recruiter .pink { color: var(--ml-red); }
.hero-gun {
  /* Real keyboard-gun photo (cropped from the iPhone-case product shot,
     rembg'd to transparent BG and tight-boxed — public/img/prop-keyboard-gun.png).
     Bumped from 28px → 56px so the detail is actually legible. */
  width: 56px; height: auto;
  image-rendering: -webkit-optimize-contrast;
  vertical-align: middle;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.45));
}

.battlefield-tag {
  font-family: var(--f-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ml-ink);
  text-align: center;
  margin: 22px 0 0;
  opacity: 0.75;
}

.hero-grid {
  /* Two-up so the four landing cards (host / deploy / cuck chair /
     marketer mode) render abreast in a 2×2 grid — Captain's call on
     2026-05-01 PM: revert from the single-column 560px stack back to
     the prior multi-column layout. The single-column experiment caused
     the four cards to read as a tall stack under the hero; abreast is
     the correct opening shape.
     X86-2026-05-08: dropped the desktop -20px escape margin. Pre-X86
     the rule was `margin: 12px -20px 0;` to pull the grid OUT to the
     full `.page` width past the 20px page padding — the landing
     "matched the 560/660 hero". Captain QA: "the main page is much
     wider" than host/spectator/player. The escape margin was the
     drift cause: it widened the .hero-grid past `.page`'s content
     area (612 post-X86) to the full 660 outer lane. Now the grid
     sits inside `.page` content area and ends up at the same width
     as cards on the other surfaces. Mobile escape margin in
     `17-mobile-tweaks.css` is unchanged — phones still need the
     -12px break-out because the hero asset is wider than the 12px
     mobile padding leaves room for. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0 0;
  text-align: left;
}
.hero-grid .card h2 { color: var(--luna-title-text); }
.hero-grid .card p  { margin-bottom: 10px; }
/* Make each role card a flex column so the CTA button sticks to the
   bottom regardless of how long the description paragraph is. Without
   this, the four cards (host / deploy / cuck chair / marketer mode)
   end up with buttons at different heights when their descriptions
   wrap onto different numbers of lines. margin-top:auto on the last
   child eats any extra vertical space, dropping the button to the
   bottom edge of the card.

   2026-04-25: previously the selector only matched `<a>` wrappers,
   but the four landing cards use direct `<button class="btn">`
   children. That meant the rule was a no-op and Captain saw the
   buttons drifting to different heights between cards. Selector now
   covers both `.btn` (button) and anchor children — same behaviour
   for either. */
.hero-grid .card {
  display: flex;
  flex-direction: column;
}
.hero-grid .card > .btn:last-child,
.hero-grid .card > a:last-child {
  margin-top: auto;
}