/* Marketing-section styles, shared by the landing page and the
   /real-life-pokedex pillar page (which introduced them — hence the rp-
   prefix). Loaded after styles.css (which supplies the tokens, header,
   footer, .btn and the global VT323/Press Start type rules); the prefix
   also means a stale cached styles.css can never fight these rules.

   Design system: the shared GBA look (hard 3px black borders, offset "pixel"
   shadows, Press Start 2P chrome) with one showpiece — the pointer-tilted holo
   card in the hero. Cards/screenshots are smooth downscaled art, so images
   override the body's image-rendering: pixelated. */

/* Every content image declares width/height attributes for layout stability;
   height:auto keeps the aspect ratio once CSS resizes the width. */
main img { height: auto; image-rendering: auto; -webkit-user-select: none; user-select: none; }

/* --- Type ------------------------------------------------------------- */
/* Section headings are Press Start 2P with a small gold "gem" — the pixel
   equivalent of a bullet, not a decorative underline. */
.rp-h2 {
  font-family: 'Press Start 2P', 'VT323', monospace;
  font-size: clamp(15px, 2.2vw, 19px);
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 10px;
}
.rp-h2::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 14px;
  background: var(--gold);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--border);
  vertical-align: 2px;
}
.rp-intro {
  font-size: 21px;
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0 0 12px;
}

/* --- Layout wrappers --------------------------------------------------- */
.rp-wide { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.rp-section {
  padding: 72px 0;
  scroll-margin-top: 64px; /* anchor jumps clear the sticky header */
}
.rp-section--alt {
  background: rgba(31, 41, 55, 0.55);
  border-top: 3px solid var(--border);
  border-bottom: 3px solid var(--border);
}

/* --- Hero --------------------------------------------------------------- */
/* Left-heavy scrim: copy sits on the darkened side, the pixel-art scene and
   the holo card get the open right half. */
.rp-hero {
  background-color: var(--bg);
  background-image:
    linear-gradient(100deg,
      rgba(17, 24, 39, 0.94) 0%,
      rgba(17, 24, 39, 0.82) 46%,
      rgba(17, 24, 39, 0.45) 100%),
    url("images/hero-bg.webp");
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid var(--border);
  padding: 64px 0 0;
}
.rp-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  flex-wrap: wrap;
}
/* Desktop: the hero (copy + card + chip band) owns the whole first screen
   (viewport minus the sticky 64px header). min-height, so short viewports
   still grow instead of clip. The band sits at the bottom; the auto margins
   on .rp-hero-inner center the content in the space above it. (This block
   must come after the .rp-hero-inner base rule — same specificity, and its
   margin: auto has to win the cascade.) */
@media (min-width: 720px) {
  .rp-hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 64px);
  }
  .rp-hero-inner { width: 100%; margin: auto; }
}
/* Short desktop viewports (e.g. 720p laptops): compact the hero so the whole
   first screen — band included — still fits without scrolling. */
@media (min-width: 720px) and (max-height: 800px) {
  .rp-hero { padding-top: 20px; }
  .rp-hero-inner { padding-bottom: 20px; }
  .rp-hero h1 { font-size: clamp(20px, 2.4vw, 27px); margin-bottom: 14px; }
  .rp-lede { margin-bottom: 20px; }
  .rp-holo { width: min(260px, 76vw); }
  .rp-hero-caption { margin-top: 12px; }
}
.rp-hero-copy { flex: 1 1 400px; max-width: 600px; }
.rp-eyebrow {
  font-size: 21px;
  letter-spacing: 1px;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 18px;
}
.rp-eyebrow::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  background: var(--gold);
  vertical-align: 1px;
}
.rp-hero h1 {
  font-family: 'Press Start 2P', 'VT323', monospace;
  font-size: clamp(20px, 3vw, 33px);
  line-height: 1.65;
  color: var(--text);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
  margin: 0 0 20px;
}
.rp-lede {
  font-size: 22px;
  color: var(--text);
  max-width: 54ch;
  margin: 0 0 28px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.rp-lede strong { color: var(--gold); }
.rp-note { font-size: 17px; color: var(--text-dim); margin: 14px 0 0; }

/* The holo card — the page's one showpiece. JS drives --rx/--ry (tilt) and
   --gx/--gy/--glare (glare highlight) from the pointer; without JS or with
   reduced motion it's simply a glowing card. The idle float uses the separate
   `translate` property so it composes with the transform tilt. */
.rp-hero-stage { flex: 0 1 340px; text-align: center; }
.rp-holo {
  position: relative;
  width: min(320px, 76vw);
  margin: 0 auto;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.15s ease-out;
  animation: rp-float 5.5s ease-in-out infinite;
  will-change: transform;
}
.rp-holo.is-live { animation: none; }
@keyframes rp-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
.rp-holo img {
  display: block;
  width: 100%;
  border-radius: 12px;
  /* Glow tinted to the featured card's rarity frame via --holo-glow (set it
     inline on the .rp-holo, like the landing showcase does); the default is
     the pillar hero's Uncommon green. */
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.65),
    0 0 64px var(--holo-glow, rgba(74, 200, 100, 0.40));
}
.rp-holo-glare {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background: radial-gradient(
    340px circle at var(--gx, 50%) var(--gy, 40%),
    rgba(255, 255, 255, 0.30),
    rgba(255, 255, 255, 0) 58%);
  opacity: var(--glare, 0);
  transition: opacity 0.25s ease;
}
.rp-hero-caption {
  display: inline-block;
  font-size: 17px;
  color: var(--text-dim);
  margin: 18px 0 0;
  padding: 3px 12px 5px;
  background: rgba(17, 24, 39, 0.72);
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .rp-holo { animation: none; transition: none; }
}

/* --- Card showcase (landing page): one holo card beside its pitch. The
   card reuses the .rp-holo tilt/glare kit; the reveal class goes on the
   stage wrapper because .rv's own transform would override the tilt. ------ */
.rp-showcase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  flex-wrap: wrap;
}
.rp-showcase-copy { flex: 1 1 400px; max-width: 620px; }
.rp-showcase-stage { flex: 0 1 340px; margin: 0 auto; }
/* The tilt is pointer-only, so don't promise it on touch screens. */
@media (hover: none) { .rp-hover-only { display: none; } }

/* --- Chip band: what the scanner covers. Lives at the bottom of the hero;
   the hero's own border-bottom is the separator below it. ----------------- */
.rp-band {
  background: var(--panel);
  border-top: 3px solid var(--border);
  padding: 18px 0;
}
.rp-band .rp-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
  flex-wrap: wrap;
}
.rp-band-label { font-size: 20px; color: var(--text-dim); }
.rp-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.rp-chips li {
  font-size: 19px;
  color: var(--text);
  background: var(--panel-2);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--border);
  padding: 3px 12px 5px;
}

/* --- How it works: three phones ---------------------------------------- */
.rp-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.rp-step { text-align: center; }
/* Slimmed-down version of the landing page's phone mockup. */
.rp-phone {
  width: min(216px, 100%);
  margin: 0 auto 20px;
  aspect-ratio: 9 / 19.5;
  background: #0a0a0c;
  border-radius: 28px;
  padding: 8px;
  box-shadow:
    inset 0 0 0 2px #303036,
    0 14px 34px rgba(0, 0, 0, 0.55);
}
.rp-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 21px;
  overflow: hidden;
  background: #000;
}
.rp-phone-screen img,
.rp-phone-screen video {
  width: 100%;
  height: 100% !important; /* beat the shared `main img { height:auto }` — the screen crops like the app's aspect-fill */
  object-fit: cover;
  display: block;
}
.rp-step-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}
.rp-step-n {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: #fff;
  background: var(--primary);
  border: 3px solid var(--border);
  box-shadow: 3px 3px 0 var(--border);
  padding: 7px 10px;
}
.rp-step h3 {
  font-family: 'Press Start 2P', 'VT323', monospace;
  font-size: 14px;
  color: var(--text);
  margin: 0;
}
.rp-step p {
  font-size: 19px;
  color: var(--text-dim);
  max-width: 30ch;
  margin: 0 auto;
}

/* --- Card anatomy: annotated specimen ----------------------------------- */
.rp-anatomy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.rp-anatomy-card {
  position: relative;
  flex: 0 0 auto;
  width: min(400px, 100%);
  margin: 0;
}
.rp-anatomy-card img {
  display: block;
  width: 100%;
  border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}
/* Numbered pins sit on the card at percentage coordinates (the card art has a
   fixed 640x894 aspect, so percentages stay put at every size). They're the
   map half of a legend — the numbers repeat in .rp-legend. */
.rp-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-family: 'Press Start 2P', monospace;
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  color: #111827;
  background: var(--gold);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--border);
  transition: transform 0.15s ease, background 0.15s ease;
  z-index: 1;
}
.rp-pin.is-hl {
  transform: translate(-50%, -50%) scale(1.3);
  background: #fff;
}
.rp-legend {
  flex: 1 1 380px;
  max-width: 520px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rp-legend li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  padding: 10px 12px;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rp-legend li.is-hl {
  border-color: var(--gold);
  background: rgba(251, 191, 36, 0.06);
}
.rp-legend .rp-pin {
  position: static;
  transform: none;
}
.rp-legend li.is-hl .rp-pin { transform: none; }
.rp-legend strong {
  display: block;
  font-size: 20px;
  color: var(--text);
}
.rp-legend span {
  font-size: 18px;
  color: var(--text-dim);
  display: block;
}

/* --- Rarity ladder ------------------------------------------------------ */
.rp-ladder {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: start;
}
/* The ladder literally rises: each tier stands a step higher than the one
   before it (--lift), so the layout itself says "rarer = higher". */
.rp-tier {
  text-align: center;
  padding-top: var(--lift, 0);
}
.rp-tier[data-tier="common"]    { --lift: 54px; --tier-bg: #5b616b; }
.rp-tier[data-tier="uncommon"]  { --lift: 36px; --tier-bg: #2e7d32; --tier-glow: rgba(46, 125, 50, 0.35); }
.rp-tier[data-tier="rare"]      { --lift: 18px; --tier-bg: #305fa8; --tier-glow: rgba(59, 130, 246, 0.45); }
.rp-tier[data-tier="very-rare"] { --lift: 0px;  --tier-bg: #7a4dc4; --tier-glow: rgba(147, 100, 224, 0.55); }
.rp-tier img {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, 0.5),
    0 0 40px var(--tier-glow, transparent);
}
.rp-plaque {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-top: -13px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--tier-bg);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--border);
  padding: 6px 9px;
}
.rp-tier p {
  font-size: 18px;
  color: var(--text-dim);
  max-width: 24ch;
  margin: 10px auto 0;
}

/* Landing → pillar hand-off line under the ladder. */
.rp-more { font-size: 19px; color: var(--text-dim); margin: 44px 0 0; }

/* --- Honest comparison --------------------------------------------------- */
.rp-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.rp-vs {
  background: var(--panel);
  border: 3px solid var(--border);
  border-radius: 6px;
  padding: 22px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.rp-vs h3 {
  font-family: 'Press Start 2P', 'VT323', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 12px;
}
.rp-vs p { font-size: 19px; margin: 0 0 12px; }
.rp-verdict {
  margin-top: auto;
  border-top: 2px solid var(--panel-2);
  padding-top: 12px;
  color: var(--gold);
}
.rp-vs .rp-verdict { margin-bottom: 0; }

/* --- FAQ (native details, no JS) ----------------------------------------- */
.rp-faq { margin-top: 28px; max-width: 820px; }
.rp-faq details {
  border: 3px solid var(--border);
  background: var(--panel);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  margin-bottom: 14px;
  padding: 0 18px;
}
.rp-faq summary {
  font-size: 23px;
  color: var(--text);
  cursor: pointer;
  padding: 14px 34px 14px 0;
  list-style: none;
  position: relative;
}
.rp-faq summary:hover { color: var(--gold); }
.rp-faq summary:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.rp-faq summary::-webkit-details-marker { display: none; }
.rp-faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 14px;
  color: var(--gold);
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
}
.rp-faq details[open] summary::after { content: "\2013"; }
.rp-faq details p {
  font-size: 19px;
  margin: 0 0 16px;
  max-width: 70ch;
}

/* --- Closing CTA ---------------------------------------------------------- */
.rp-cta {
  text-align: center;
  padding: 72px 20px 80px;
  background-color: var(--bg);
  /* Darker scrim than the hero: the copy sits straight on the art here,
     with no column of its own to lean on. */
  background-image:
    linear-gradient(180deg,
      rgba(17, 24, 39, 0.88) 0%,
      rgba(17, 24, 39, 0.66) 55%,
      rgba(17, 24, 39, 0.82) 100%),
    url("images/hero-bg.webp");
  background-size: cover;
  background-position: center bottom;
  border-top: 3px solid var(--border);
}
.rp-cta .rp-h2 { font-size: clamp(17px, 2.6vw, 24px); }
.rp-cta .rp-h2::before { display: none; }
.rp-cta-tag {
  font-size: 22px;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  margin: 0 0 28px;
}
/* QR hand-off for desktop readers; phones just tap the button instead. */
.rp-qr {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding: 14px 18px;
  background: var(--panel);
  border: 3px solid var(--border);
  box-shadow: 3px 3px 0 var(--border);
}
.rp-qr img {
  display: block;
  width: 108px;
  height: 108px;
  background: #fff;
  padding: 8px;
  border: 2px solid var(--border);
}
.rp-qr span {
  font-size: 19px;
  color: var(--text-dim);
  max-width: 17ch;
  text-align: left;
}
@media (max-width: 899px), (hover: none) {
  .rp-qr { display: none; }
}

/* The closing CTA artwork should meet the footer directly — kill the gap the
   shared footer margin would leave. (.footnote-tm, the trademark fine print
   next to it, lives in styles.css — the landing footer carries it too.) */
.site-footer { margin-top: 0; }

/* --- Scroll reveal (JS adds rv-on to <html>; without JS or with reduced
   motion nothing is ever hidden) ------------------------------------------ */
.rv-on .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.rv-on .rv.is-in { opacity: 1; transform: none; }
.rv-on .rp-steps li:nth-child(2),
.rv-on .rp-ladder li:nth-child(2) { transition-delay: 0.08s; }
.rv-on .rp-steps li:nth-child(3),
.rv-on .rp-ladder li:nth-child(3) { transition-delay: 0.16s; }
.rv-on .rp-ladder li:nth-child(4) { transition-delay: 0.24s; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 979px) {
  .rp-section { padding: 56px 0; }
  /* Steps: phone-beside-copy rows read better than three stacked towers. */
  .rp-steps { grid-template-columns: 1fr; gap: 28px; max-width: 560px; margin-left: auto; margin-right: auto; }
  .rp-step {
    display: grid;
    grid-template-columns: 124px 1fr;
    grid-template-areas: "phone head" "phone copy";
    column-gap: 20px;
    align-content: center;
    text-align: left;
  }
  .rp-phone { grid-area: phone; width: 124px; margin: 0; border-radius: 20px; padding: 6px; }
  .rp-phone-screen { border-radius: 15px; }
  .rp-step-head { grid-area: head; justify-content: flex-start; align-self: end; }
  .rp-step p { grid-area: copy; align-self: start; margin: 0; max-width: 34ch; }
}
@media (max-width: 719px) {
  .rp-hero { padding: 44px 0 0;
    background-image:
      linear-gradient(180deg,
        rgba(17, 24, 39, 0.92) 0%,
        rgba(17, 24, 39, 0.72) 55%,
        rgba(17, 24, 39, 0.55) 100%),
      url("images/hero-bg-mobile.webp");
  }
  .rp-hero-inner { gap: 40px; padding-bottom: 48px; }
  .rp-ladder { grid-template-columns: 1fr 1fr; gap: 22px; row-gap: 30px; }
  .rp-tier { --lift: 0px !important; }
  .rp-compare { grid-template-columns: 1fr; }
  .rp-legend { flex-basis: 100%; }
}