/* PL8 CLLCT — site styles
   Palette and type taken from the app's onboarding screens. */

:root {
  --red: #e8382d;
  --red-dark: #cc2b21;
  --navy: #082c73;
  --ink: #0a0a0a;
  --ink-2: #3d3d3d;
  --muted: #767676;
  --line: #e7e7e7;
  --bg: #ffffff;
  --bg-soft: #f6f6f6;

  --common: #e8382d;
  --uncommon: #ffb108;
  --rare: #01e5c7;
  --super: #004ef7;
  --ultra: #ca00f7;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --page: 1120px;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 24px; }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.eyebrow .num { color: var(--ink); }

h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.04; margin: 0; font-weight: 800; }
h1 { font-size: clamp(44px, 7.2vw, 82px); }
h2 { font-size: clamp(32px, 4.6vw, 52px); }
h3 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; }

.lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); max-width: 46ch; line-height: 1.55; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 66px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand b {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.nav a:hover { color: var(--ink); }
.nav a.is-current { color: var(--ink); }
@media (max-width: 720px) { .nav a.hide-sm { display: none; } .nav { gap: 18px; } }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--red);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--bg-soft); border-color: #d6d6d6; }
.btn.sm { height: 42px; padding: 0 20px; font-size: 11px; }

/* ---------- hero ---------- */

.hero { padding: 92px 0 24px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 22px;
}

/* App Store button: Apple's badge (black, the Apple mark, "Download on the /
   App Store", a thin grey keyline) as a pill, the same height and rounding as .btn. */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 26px 0 20px;
  border-radius: 999px;
  border: 1px solid #a6a6a6;
  background: #000;
  color: #fff;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.appstore-badge:hover { filter: brightness(1.3); }
.appstore-badge:active { transform: translateY(1px); }
.appstore-badge svg { width: 26px; height: 26px; flex: 0 0 auto; margin-top: -2px; }
.appstore-badge span { display: grid; line-height: 1; text-align: left; }
.appstore-badge small { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; }
.appstore-badge b { font-family: var(--sans); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-top: 3px; }

.fan { position: relative; width: 100%; height: 440px; }
/* The tilted outer cards reach past the screen edge on tablet widths; clip
   that sideways spill instead of letting the whole page scroll. */
.hero { overflow-x: clip; }
.fan img {
  position: absolute;
  width: 47%;
  filter: drop-shadow(0 22px 42px rgba(10, 10, 10, 0.18));
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fan img:nth-child(1) { left: 0; top: 46px; transform: rotate(-9deg); }
.fan img:nth-child(2) { left: 26.5%; top: 0; z-index: 2; }
.fan img:nth-child(3) { right: 0; top: 52px; transform: rotate(9deg); }
.fan:hover img:nth-child(1) { transform: rotate(-13deg) translate(-10px, -6px); }
.fan:hover img:nth-child(3) { transform: rotate(13deg) translate(10px, -6px); }
.fan:hover img:nth-child(2) { transform: translateY(-10px); }

@media (max-width: 900px) {
  .hero { padding-top: 56px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .fan { height: 340px; order: -1; }
}
@media (max-width: 560px) { .fan { height: 280px; } }

/* ---------- rarity ladder ---------- */

.ladder { padding: 40px 0 8px; }
.ladder ol {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.ladder li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pip { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.pip.common { background: var(--common); }
.pip.uncommon { background: var(--uncommon); border-radius: 2px; transform: rotate(45deg); }
/* the rare tiers count up in stars, as in the app: ★ rare, ★★ super, ★★★ ultra */
.stars { display: inline-flex; gap: 1px; flex: 0 0 auto; }
.stars svg { width: 12px; height: 12px; fill: currentColor; }
.stars.rare { color: var(--rare); }
.stars.super { color: var(--super); }
.stars.ultra { color: var(--ultra); }
@media (max-width: 700px) { .ladder ol { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ---------- feature rows ---------- */

.features { padding: 40px 0 20px; }
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 72px 0;
  border-top: 1px solid var(--line);
}
.feature:first-child { border-top: 0; }
.feature .copy p.lede { margin: 18px 0 0; }
.feature.flip .art { order: -1; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 34px; padding: 52px 0; }
  .feature.flip .art { order: 0; }
}

.art { min-height: 240px; display: flex; align-items: center; justify-content: center; }

/* catch art */
/* The cards are sized by the box's width, so the box's height has to follow
   its width too (a fixed height let them spill into the next section once the
   layout went to one column). 100 / 82 holds the taller card, tilted, with its
   8% drop. Capped so the pair doesn't balloon in the single column. */
.art-catch { position: relative; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 100 / 82; }
.art-catch img { position: absolute; width: 52%; filter: drop-shadow(0 18px 34px rgba(10, 10, 10, 0.16)); }
.art-catch img:nth-child(1) { left: 0; top: 8%; transform: rotate(-7deg); }
.art-catch img:nth-child(2) { right: 0; top: 0; transform: rotate(3deg); }

/* feed art: two screenshots from the app, each in an iPhone drawn at the
   phone's own point size (393 × 852 screen) and scaled down as one piece. */
/* The pair leans apart at the top and overlaps at the bottom. Sizes,
   the gap and the overlap all scale with --s, so only --s changes per width. */
.phone-pair { --s: 0.52; --tilt: 5deg; display: flex; align-items: center; justify-content: center; gap: calc(var(--s) * 18px); padding: 14px 0; }
.phone-pair .phone-wrap:first-child { position: relative; z-index: 2; transform: rotate(calc(var(--tilt) * -1)); }
.phone-pair .phone-wrap:last-child { transform: rotate(var(--tilt)); }
.phone-wrap { width: calc(417px * var(--s)); height: calc(876px * var(--s)); flex: 0 0 auto; }
.phone {
  width: 417px; height: 876px; padding: 12px; border-radius: 68px;
  background: #0b0b0c;
  box-shadow: 0 0 0 2px #2b2b2e, 0 40px 80px rgba(10, 10, 10, 0.22), 0 10px 24px rgba(10, 10, 10, 0.12);
  transform: scale(var(--s)); transform-origin: 0 0;
}
.ph-screen { position: relative; width: 393px; height: 852px; border-radius: 56px; overflow: hidden; background: #fff; }
.ph-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ph-island { position: absolute; left: 50%; top: 11px; width: 125px; height: 37px; margin-left: -62.5px; border-radius: 20px; background: #000; }
.ph-home { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #000; }

@media (max-width: 1080px) { .phone-pair { --s: 0.46; } }
@media (max-width: 900px) { .phone-pair { --s: 0.58; } }
@media (max-width: 620px) { .phone-pair { --s: 0.42; } }
@media (max-width: 460px) { .phone-pair { --s: 0.35; } }
@media (max-width: 385px) { .phone-pair { --s: 0.32; } }

/* vote art */
.tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 440px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #fff;
}
.tag .n { color: var(--muted); letter-spacing: 0; }
.tag.on { background: var(--red); border-color: var(--red); color: #fff; }
.tag.on .n { color: rgba(255, 255, 255, 0.75); }

/* map art */
.map { width: 100%; max-width: 540px; height: auto; }

/* trade art */
.trade { display: flex; align-items: center; gap: 18px; }
.trade img { width: min(168px, 36vw); filter: drop-shadow(0 16px 30px rgba(10, 10, 10, 0.16)); }
.trade .swap { font-size: 26px; color: #c4c4c4; }

/* ---------- secret message + community teasers (home page) ---------- */

.teasers { padding: 0 0 80px; }
.teasers .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .teasers .wrap { grid-template-columns: 1fr; } }
.teaser {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 34px 32px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  min-width: 0;
}
.teaser.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.teaser.dark .eyebrow { color: rgba(255, 255, 255, 0.6); }
.teaser.dark .eyebrow .num { color: #fff; }
.teaser h2 { font-size: clamp(28px, 3.6vw, 40px); }
.teaser p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 44ch; }
.teaser.dark p { color: rgba(255, 255, 255, 0.78); }
.teaser .btn { justify-self: start; }
.teaser.dark .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.teaser.dark .btn.ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- footer ---------- */

.site-footer { padding: 54px 0; border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer a, .site-footer span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.site-footer a:hover { color: var(--ink); }

/* ---------- legal page ---------- */

.legal-head { padding: 72px 0 34px; }
.legal-head h1 { font-size: clamp(38px, 6vw, 62px); margin-bottom: 18px; }
.legal-head .meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-body { padding-bottom: 96px; }
.legal-body .wrap { max-width: 760px; }

.prose { font-size: 17px; color: var(--ink-2); }
.prose h2 {
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 48px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 17px; color: var(--ink); margin: 28px 0 10px; font-weight: 700; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.prose .intro { font-size: 19px; color: var(--ink); line-height: 1.55; margin-bottom: 18px; }
.prose .intro + .intro { margin-bottom: 8px; }
.prose code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}
.table-scroll { overflow-x: auto; margin-bottom: 22px; }
.table-scroll table { margin-bottom: 0; min-width: 520px; }
.prose blockquote {
  margin: 0 0 20px;
  padding: 16px 20px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  color: var(--ink-2);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }