/* Product / landing page for mememage.art — the front door.
   Cosmic visuals (starfield, the typewriter wordmark, the M/Y/C bar), plain
   legible words. Reuses theme.css/layout.css/mememage.css tokens + the wordmark;
   this file is the landing layout only. */

:root {
  --m: #dc50dc;   /* magenta */
  --y: #dcc83c;   /* yellow  */
  --c: #3cc8dc;   /* cyan    */
}

.product-body {
  /* Opt out of the shared `body { display: flex }` (that's for the decoder's
     centered panel). The product page is a normal scrolling document; as a
     flex item the wrap couldn't shrink below the code block's intrinsic width,
     which overflowed the page on mobile. Block lets it shrink + the code block
     scrolls within. */
  display: block;
  background: #060609;
  color: #d8d8e2;
  margin: 0;
  /* Opt out of mememage.css's `body { padding: 2.5rem 1.2rem 3rem }` (breathing
     room for the decoder's centered panel). Here it just added ~40px of dead
     space above the hero; .product-wrap supplies its own padding. */
  padding: 0;
  min-height: 100vh;
  line-height: 1.6;
}

.product-wrap {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.4rem 6rem;
}

/* ---- Hero ---- */
.product-hero {
  text-align: center;
  /* Top padding matches the decoder/validator title height: they sit at 40px
     via mememage.css's `body { padding-top: 2.5rem }`; this page zeroes that
     body padding, so the hero re-supplies the same 2.5rem. */
  padding: 2.5rem 0 1.75rem;
}
.product-hero .page-header { margin-bottom: 0; }
.product-tagline {
  font-size: 1.35rem;
  font-weight: 400;
  color: #f0f0f6;
  letter-spacing: 0.01em;
  margin: 1.4rem 0 0.6rem;
}
.product-sub {
  font-size: 0.92rem;
  color: #9a9ab0;
  max-width: 34rem;
  margin: 0 auto 2rem;
}
/* Genesis hero image — a constrained portrait that lifts on hover and opens
   full-res in a lightbox on click. */
.product-hero-zoom {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}
.product-hero-img {
  display: block;
  width: auto;
  max-width: min(88vw, 19rem);
  max-height: 27rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.product-hero-zoom:hover .product-hero-img {
  transform: translateY(-4px);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.6);
}

/* Lightbox — examine the hero image full-res on a dimmed backdrop. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
  animation: lightbox-fade 0.25s ease;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: 100%;
  max-height: 94vh;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }

/* Install shadowbox — the pip CTA opens /install in a same-origin iframe so
   visitors get the download options without leaving mememage.art. */
.install-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
  animation: lightbox-fade 0.25s ease;
}
.install-modal[hidden] { display: none; }
.install-modal-card {
  position: relative;
  width: min(560px, 94vw);
  height: min(700px, 88vh);
  background: #0a0a0f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.install-modal-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.install-modal-close {
  position: absolute;
  top: 9px;
  right: 11px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 20, 28, 0.85);
  color: #dcc83c;
  font-size: 17px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.install-modal-close:hover { background: #dcc83c; color: #0a0a0f; }

.cta-row {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cta {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}
.cta-primary {
  color: #0a0a12;
  background: linear-gradient(90deg, var(--m), var(--y), var(--c));
  font-weight: 600;
}
.cta-primary:hover { transform: translateY(-1px); }
.cta-gold {
  color: #2a1e08;
  background: linear-gradient(95deg, #f4d774, #d9a823);
  font-weight: 600;
  box-shadow: 0 0 18px rgba(217, 168, 35, 0.28);
}
.cta-gold:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(217, 168, 35, 0.45); }
.cta-ghost {
  color: #c8c8d4;
  border: 1px solid #2e2e44;
  background: rgba(255, 255, 255, 0.02);
}
.cta-ghost:hover { border-color: #4a4a66; color: #fff; }
.cta-code {
  font-family: inherit;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}
.cta-code:hover { border-color: rgba(255, 255, 255, 0.6); }

/* ---- Sections ---- */
.product-section { padding: 1.75rem 0; }
.section-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #6a6a82;
  margin: 0 0 0.9rem;
}
.section-lead {
  font-size: 1.18rem;
  color: #ececf4;
  font-weight: 400;
  margin: 0 0 0.9rem;
}
.product-section p { color: #a6a6bc; font-size: 0.95rem; margin: 0 0 0.8rem; }
.product-section strong { color: #e6e6f0; font-weight: 600; }
.product-section code { color: #9fe6f0; font-size: 0.92em; }

/* The three-step "how" + "what you own" cards */
.tri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-top: 1.4rem;
}
.tri-cell {
  border: 1px solid rgba(255,255,255,0.07);
  border-top-width: 2px;
  border-radius: 6px;
  padding: 0.95rem 0.9rem;
  background: #0c0c14;
}
.tri-cell h4 {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d8d8e4;
}
.tri-cell p { font-size: 0.8rem; color: #9090a6; margin: 0; }
.tri-m { border-top-color: var(--m); }
.tri-y { border-top-color: var(--y); }
.tri-c { border-top-color: var(--c); }

/* What it proves — the badge ladder */
.proves { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1.2rem; }
.prove {
  display: flex; gap: 0.7rem; align-items: baseline;
  font-size: 0.88rem;
}
.prove b { letter-spacing: 0.08em; min-width: 8.5rem; }
.prove span { color: #9a9ab0; font-size: 0.82rem; }
.prove-w b { color: #6ee7a8; }
.prove-a b { color: #7fb4ff; }
.prove-e b { color: #c79bff; }

/* Code block */
.code-block {
  background: #0a0a12;
  border: 1px solid #1e1e30;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-top: 1.2rem;
  overflow-x: auto;
}
.code-block pre {
  margin: 0;
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.75;
  color: #c8c8d4;
  white-space: pre;
}
.code-block .ck { color: var(--c); }       /* call */
.code-block .cs { color: #c5e6a0; }         /* string */
.code-block .cc { color: #5f5f78; }         /* comment */

/* Core vs cosmos */
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1.2rem; }
.cc-col {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 1rem;
  background: rgba(255,255,255,0.015);
}
.cc-col h4 { margin: 0 0 0.5rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }
.cc-core h4 { color: var(--c); }
.cc-cosmos h4 { color: var(--m); }
.cc-col ul { margin: 0; padding-left: 1.1rem; }
.cc-col li { font-size: 0.82rem; color: #9a9ab0; margin: 0.25rem 0; }
.cc-col .cc-tag { display: block; margin-top: 0.6rem; font-size: 0.74rem; color: #6a6a82; font-style: italic; }

/* The closing line */
.product-coda { text-align: center; padding: 3.4rem 0 1rem; }
.product-coda .section-lead { font-size: 1.25rem; }
.product-foot-links {
  display: flex; gap: 1.3rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.6rem; font-size: 0.8rem;
}
.product-foot-links a {
  color: #b9b9c6; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 1px;
}
.product-foot-links a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.product-fineprint { margin-top: 2.2rem; font-size: 0.72rem; color: #5a5a70; }

@media (max-width: 600px) {
  .product-wrap { padding: 0 1.15rem 5rem; }   /* a touch more content width */
  .tri, .cc-grid { grid-template-columns: 1fr; }
  .product-tagline { font-size: 1.15rem; }
  .product-sub { font-size: 0.88rem; }
  /* Wrap the code instead of clipping the inline comments off the right edge. */
  .code-block { padding: 0.9rem 0.95rem; }
  .code-block pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.68rem; }
  .prove { flex-direction: column; gap: 0.1rem; }
  .prove b { min-width: 0; }
}