/* ==========================================================================
   ORBT 2026 — community + pitch pages (scoped .cm-* and page-prefixed lb-/ft-/dc-)
   Maximalist sticker-zine to match the homepage (home/redesign.css).
   Loaded ONLY by: leaderboard / featured / discover / vs-linktree / linktree-alternative.
   Uses orbt.css tokens (--rainbow, --accent, --text, --bg, --c-*).
   ========================================================================== */

.cm-main{ overflow-x:clip; }

/* ---------- POSTER PAGE HEAD (shared) ---------- */
.cm-head{ position:relative; overflow:hidden; padding:clamp(120px,15vh,180px) 0 clamp(34px,5vw,60px); }
.cm-head .wrap{ position:relative; z-index:3; }
.cm-head-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cm-head-blobs .hp-blob{ position:absolute; fill:var(--text); }
.cm-head-blobs .b1{ width:38vw; top:-14%; right:-6%; opacity:.06; }
.cm-head-blobs .b2{ width:24vw; bottom:-26%; left:-8%; opacity:.05; }
.cm-ribbon{ position:absolute; z-index:1; left:-6%; right:-6%; top:38%; height:clamp(30px,4vw,56px);
  background:var(--rainbow); transform:rotate(-4deg); opacity:.92; box-shadow:0 20px 50px -22px rgba(123,47,247,.5); }
.cm-ribbon::after{ content:attr(data-text); position:absolute; inset:0; display:flex; align-items:center; white-space:nowrap;
  font-family:var(--display); font-weight:800; font-size:clamp(18px,2.4vw,30px); color:#fff; mix-blend-mode:overlay;
  animation:hp-band 20s linear infinite; }
.cm-head h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.8rem,8vw,6.4rem); line-height:.86;
  letter-spacing:-.035em; text-transform:uppercase; margin:.4rem 0 1rem; max-width:16ch; }
.cm-head h1 em{ font-style:normal; background:var(--rainbow-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cm-head .lead{ max-width:48ch; color:var(--muted); font-size:clamp(1.02rem,1.4vw,1.2rem); }
.cm-eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.4rem; }
.cm-eyebrow::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--rainbow); }
.cm-head .barcode{ margin-top:1.4rem; opacity:.6; }
.cm-facts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.cm-facts span{ font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.45rem .8rem; background:#fff; border:2px solid var(--text); border-radius:999px; box-shadow:3px 3px 0 0 var(--text); }
.cm-facts span b{ color:var(--accent); }

.cm-foot-cta{ text-align:center; margin-top:clamp(2.4rem,5vw,3.4rem); }

/* ==========================================================================
   LEADERBOARD — ranked sticker board with chunky medals
   ========================================================================== */
.lb{ max-width:880px; margin:0 auto; }

/* top-3 podium row */
.lb-podium{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,18px); margin-bottom:clamp(14px,2vw,22px); align-items:end; }
.lb-pod{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  border:2.5px solid var(--text); border-radius:22px; background:#fff; padding:1.4rem 1rem 1.2rem;
  box-shadow:6px 6px 0 0 var(--text); text-decoration:none; color:var(--text);
  transition:transform .3s var(--spring), box-shadow .2s var(--ease); }
.lb-pod:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 0 var(--text); }
.lb-pod .lb-medal{ position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:2.5px solid var(--text);
  font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--text); box-shadow:3px 3px 0 0 var(--text); }
.lb-pod.p1{ transform:translateY(-14px); --pc:var(--c-yellow); }
.lb-pod.p1:hover{ transform:translate(-3px,-17px); }
.lb-pod.p2{ --pc:#d8d8e0; }
.lb-pod.p3{ --pc:#f0a868; }
.lb-pod .lb-medal{ background:var(--pc); }
.lb-pod .lb-pod-av{ width:84px; height:84px; border-radius:20px; background-size:cover; background-position:center;
  background-color:var(--bg-3); border:2.5px solid var(--text); display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:2rem; color:var(--accent); }
.lb-pod .lb-pod-name{ font-family:var(--display); font-weight:800; font-size:1.1rem; letter-spacing:-.02em;
  display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; justify-content:center; }
.lb-pod .lb-pod-h{ font-family:var(--mono); font-size:.74rem; color:var(--accent); }
.lb-pod .lb-pod-v{ font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.03em; margin-top:.2rem; }
.lb-pod .lb-pod-v small{ display:block; font-family:var(--mono); font-size:.58rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.lb-pod.p1 .lb-pod-v{ background:var(--rainbow-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* the rest = sticker rows */
.lb-list{ display:flex; flex-direction:column; gap:.7rem; }
.lb-row{ display:flex; align-items:center; gap:1rem; padding:.85rem 1.1rem; border:2.5px solid var(--text); border-radius:16px;
  background:#fff; text-decoration:none; box-shadow:4px 4px 0 0 var(--text);
  transition:transform .25s var(--spring), box-shadow .18s var(--ease); }
.lb-row:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 0 var(--text); }
.lb-rank{ font-family:var(--display); font-weight:800; font-size:1.4rem; color:var(--text); width:46px; flex:none; text-align:center;
  letter-spacing:-.03em; }
.lb-rank::before{ content:"#"; font-size:.8em; color:var(--faint); }
.lb-av{ width:50px; height:50px; border-radius:13px; flex:none; background-size:cover; background-position:center;
  background-color:var(--bg-3); display:grid; place-items:center; font-family:var(--display); font-weight:800;
  color:var(--accent); border:2.5px solid var(--text); }
.lb-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.lb-name{ display:flex; align-items:center; gap:.35rem; min-width:0; color:var(--text); font-weight:800; font-size:1.04rem;
  font-family:var(--display); letter-spacing:-.02em; }
.lb-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-handle{ font-size:.76rem; color:var(--accent); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-views{ flex:none; text-align:right; font-family:var(--display); font-weight:800; color:var(--text); font-size:1.3rem;
  display:flex; flex-direction:column; line-height:1; letter-spacing:-.03em; }
.lb-views small{ font-size:.56rem; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-family:var(--mono); margin-top:.2rem; }
/* top 3 are promoted into the podium; ranks 4+ render as rows. tint any stray top row safely */
.lb-row.lb-top1{ background:linear-gradient(100deg,rgba(225,29,143,.14),#fff 60%); }
.lb-row.lb-top1 .lb-rank{ color:var(--accent); }
.lb-empty{ text-align:center; padding:48px 16px; color:var(--muted); font-family:var(--mono); font-size:.92rem;
  border:2.5px dashed var(--line-2); border-radius:18px; }
.lb-empty a{ color:var(--accent); font-weight:700; }
.lb-skel{ height:74px; border-radius:16px; background:linear-gradient(90deg,#fff,var(--bg-2),#fff); background-size:200% 100%;
  animation:cmsh 1.3s infinite; margin-bottom:.7rem; border:2.5px solid var(--line-2); }
@keyframes cmsh{ to{ background-position:-200% 0; } }
.op-badge{ flex:none; }
@media (max-width:560px){
  .lb-podium{ grid-template-columns:1fr; gap:26px; }
  .lb-pod.p1{ transform:none; } .lb-pod.p1:hover{ transform:translate(-3px,-3px); }
  .lb-rank{ font-size:1.15rem; width:38px; }
  .lb-views{ font-size:1.1rem; }
}

/* ==========================================================================
   FEATURED — tilted sticker phone-cards on a pegboard
   ========================================================================== */
.ft-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:clamp(1.1rem,2.4vw,2rem); margin-top:1.4rem; }
.ft-card{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  padding:1.8rem 1.2rem 1.4rem; border:2.5px solid var(--text); border-radius:24px; background:#fff; text-decoration:none;
  box-shadow:6px 6px 0 0 var(--text); transition:transform .3s var(--spring), box-shadow .2s var(--ease); }
.ft-card:nth-child(3n+1){ transform:rotate(-1.4deg); }
.ft-card:nth-child(3n+2){ transform:rotate(1.2deg); }
.ft-card:nth-child(3n+3){ transform:rotate(-.6deg); }
.ft-card:hover{ transform:rotate(0) translate(-3px,-4px); box-shadow:11px 11px 0 0 var(--text); z-index:2; }
/* color tab corner */
.ft-card::before{ content:""; position:absolute; top:-2.5px; left:22px; width:46px; height:14px; border-radius:0 0 8px 8px;
  border:2.5px solid var(--text); border-top:0; background:var(--rainbow); }
.ft-card:nth-child(4n+1)::before{ background:var(--c-mag); }
.ft-card:nth-child(4n+2)::before{ background:var(--c-blue); }
.ft-card:nth-child(4n+3)::before{ background:var(--c-green); }
.ft-card:nth-child(4n+4)::before{ background:var(--c-yellow); }
.ft-av{ width:88px; height:88px; border-radius:20px; background-size:cover; background-position:center; background-color:var(--bg-3);
  border:2.5px solid var(--text); display:grid; place-items:center; box-shadow:3px 3px 0 0 var(--text);
  font-family:var(--display); font-weight:800; font-size:2rem; color:var(--accent); position:relative; z-index:1; margin-top:.4rem; }
.ft-name{ display:flex; align-items:center; justify-content:center; gap:.35rem; flex-wrap:wrap; color:var(--text);
  font-weight:800; font-size:1.16rem; font-family:var(--display); letter-spacing:-.02em; }
.ft-handle{ font-family:var(--mono); font-size:.78rem; color:var(--accent); letter-spacing:.02em; }
.ft-bio{ color:var(--muted); font-size:.9rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; max-width:26ch; }
.ft-views{ margin-top:.3rem; font-family:var(--mono); font-size:.66rem; color:var(--text); text-transform:uppercase; letter-spacing:.1em;
  background:var(--bg-2); border:2px solid var(--text); border-radius:999px; padding:.3rem .7rem; }
.ft-empty{ text-align:center; padding:60px 16px; color:var(--muted); font-family:var(--mono); font-size:.92rem;
  border:2.5px dashed var(--line-2); border-radius:22px; }
.ft-empty a{ color:var(--accent); font-weight:700; }
.ft-skel{ height:248px; border-radius:24px; border:2.5px solid var(--line-2); background:linear-gradient(90deg,#fff,var(--bg-2),#fff);
  background-size:200% 100%; animation:cmsh 1.3s infinite; }
@media (prefers-reduced-motion:reduce){ .ft-card,.ft-card:hover{ transform:none; } }

/* ==========================================================================
   DISCOVER — bold sectioned grid with sticker-tab labels
   ========================================================================== */
.dc-sec{ margin-top:clamp(2.6rem,5vw,4rem); }
.dc-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.dc-head h2{ display:inline-flex; align-items:center; gap:.55rem; margin:0;
  font-family:var(--display); font-weight:800; font-size:clamp(1.1rem,2.6vw,1.7rem); text-transform:uppercase; letter-spacing:-.02em;
  background:#fff; border:2.5px solid var(--text); border-radius:14px; padding:.5rem .9rem; box-shadow:4px 4px 0 0 var(--text); }
.dc-head h2 svg{ width:1.05em; height:1.05em; fill:var(--accent); flex:none; }
.dc-head h2.t-mag{ box-shadow:4px 4px 0 0 var(--c-mag); } .dc-head h2.t-mag svg{ fill:var(--c-mag); }
.dc-head h2.t-blue{ box-shadow:4px 4px 0 0 var(--c-blue); } .dc-head h2.t-blue svg{ fill:var(--c-blue); }
.dc-head h2.t-green{ box-shadow:4px 4px 0 0 var(--c-green); } .dc-head h2.t-green svg{ fill:var(--c-green); }
.dc-more{ font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--text); text-decoration:none; white-space:nowrap;
  letter-spacing:.04em; border-bottom:2px solid var(--accent); padding-bottom:1px; }
.dc-more:hover{ color:var(--accent); }
.dc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:.9rem; }
.dc-card{ display:flex; align-items:center; gap:.85rem; padding:.85rem .95rem; border:2.5px solid var(--text); border-radius:15px;
  background:#fff; text-decoration:none; box-shadow:3px 3px 0 0 var(--text);
  transition:transform .25s var(--spring), box-shadow .18s var(--ease); }
.dc-card:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 var(--text); }
.dc-av{ width:48px; height:48px; border-radius:12px; flex:none; background-size:cover; background-position:center; background-color:var(--bg-3);
  display:grid; place-items:center; font-weight:800; color:var(--accent); border:2.5px solid var(--text); font-family:var(--display); }
.dc-meta{ min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.dc-name{ display:flex; align-items:center; gap:.35rem; min-width:0; color:var(--text); font-weight:800; font-size:.98rem;
  font-family:var(--display); letter-spacing:-.02em; }
.dc-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-handle{ font-size:.74rem; color:var(--accent); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-empty{ color:var(--muted); font-size:.88rem; padding:1rem 1.1rem; font-family:var(--mono); border:2.5px dashed var(--line-2); border-radius:14px; }
.dc-skel{ height:80px; border-radius:15px; border:2.5px solid var(--line-2); background:linear-gradient(90deg,#fff,var(--bg-2),#fff);
  background-size:200% 100%; animation:cmsh 1.3s infinite; }

/* ==========================================================================
   VS / PITCH PAGES — savage face-off poster, reasons, table
   ========================================================================== */
.cm-sec{ padding:clamp(48px,7vw,90px) 0; position:relative; }
.cm-sec-head{ margin-bottom:clamp(24px,3.5vw,44px); }
.cm-sec-head h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,5vw,3.6rem); line-height:.92;
  letter-spacing:-.03em; text-transform:uppercase; max-width:20ch; }
.cm-sec-head h2 em{ font-style:normal; background:var(--rainbow-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cm-sec-head p{ color:var(--muted); max-width:44ch; margin-top:.6rem; }

/* giant face-off */
.cm-faceoff{ position:relative; border:3px solid var(--text); border-radius:30px; background:#fff; box-shadow:12px 12px 0 0 var(--text);
  padding:clamp(1.8rem,4vw,3.4rem); overflow:hidden; }
.cm-faceoff .cm-fo-mascot{ position:absolute; right:clamp(-30px,-1vw,0px); top:50%; transform:translateY(-50%) rotate(8deg);
  width:clamp(120px,16vw,200px); opacity:.16; pointer-events:none; }
.cm-fo-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(1rem,4vw,3rem); }
.cm-fo-col .cm-fo-lbl{ font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin-bottom:.5rem; }
.cm-fo-them{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,5vw,3.6rem); color:var(--muted);
  text-decoration:line-through; text-decoration-color:var(--c-red); text-decoration-thickness:5px; line-height:.95; }
.cm-fo-us{ font-family:var(--display); font-weight:800; font-size:clamp(2.8rem,8vw,6rem); line-height:.86;
  background:var(--rainbow-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cm-fo-sub{ font-family:var(--mono); font-size:.84rem; color:var(--muted); margin-top:.6rem; }
.cm-fo-vs{ font-family:var(--display); font-weight:800; font-size:1.1rem; color:#fff; background:var(--text);
  width:58px; height:58px; display:grid; place-items:center; border-radius:50%; border:2.5px solid var(--text); box-shadow:4px 4px 0 0 var(--c-mag); }
@media (max-width:640px){ .cm-fo-grid{ grid-template-columns:1fr; text-align:center; gap:1.4rem; } .cm-fo-vs{ margin:0 auto; } }

/* the math strip */
.cm-math{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(12px,1.8vw,20px); margin-top:clamp(1.4rem,3vw,2rem); }
.cm-math-card{ border:2.5px solid var(--text); border-radius:20px; background:#fff; padding:1.4rem 1.3rem; box-shadow:5px 5px 0 0 var(--text); }
.cm-math-card.dark{ background:var(--text); } .cm-math-card.dark *{ color:var(--bg); }
.cm-math-card .n{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.03em; line-height:1; }
.cm-math-card .n.rb{ background:var(--rainbow-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cm-math-card .l{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:.5rem; }

/* reasons sticker wall (vs/pitch) */
.cm-reasons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:clamp(12px,1.8vw,20px); }
.cm-reason{ position:relative; border:2.5px solid var(--text); border-radius:20px; background:#fff; padding:1.5rem 1.3rem;
  box-shadow:5px 5px 0 0 var(--text); transition:transform .3s var(--spring), box-shadow .2s var(--ease); }
.cm-reason:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 0 var(--text); }
.cm-reason .cm-r-no{ font-family:var(--mono); font-size:.74rem; font-weight:700; color:var(--accent); letter-spacing:.08em; }
.cm-reason h3{ font-family:var(--display); font-weight:800; font-size:1.2rem; text-transform:uppercase; letter-spacing:-.02em; margin:.5rem 0 .4rem; }
.cm-reason p{ color:var(--muted); font-size:.94rem; }
.cm-reason.wash{ background:var(--tc,var(--c-yellow)); }
.cm-reason.dark{ background:var(--text); } .cm-reason.dark h3{ color:var(--bg); } .cm-reason.dark p{ color:var(--bg-3); } .cm-reason.dark .cm-r-no{ color:var(--c-yellow); }

/* migration steps (linktree-alternative signature) */
.cm-steps{ display:grid; gap:clamp(14px,2vw,22px); counter-reset:step; }
.cm-step{ display:flex; gap:1.2rem; align-items:flex-start; border:2.5px solid var(--text); border-radius:20px; background:#fff;
  padding:1.4rem 1.5rem; box-shadow:5px 5px 0 0 var(--text); }
.cm-step::before{ counter-increment:step; content:counter(step); flex:none; width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.6rem; color:#fff;
  background:var(--rainbow-diag); border:2.5px solid var(--text); box-shadow:3px 3px 0 0 var(--text); }
.cm-step h3{ font-family:var(--display); font-weight:800; font-size:1.2rem; text-transform:uppercase; letter-spacing:-.02em; margin-bottom:.3rem; }
.cm-step p{ color:var(--muted); font-size:.95rem; }

/* table wrapper sticker */
.cm-table-wrap{ border:3px solid var(--text); border-radius:24px; overflow:hidden; background:#fff; box-shadow:8px 8px 0 0 var(--text); }
.cm-table-wrap .cmp th, .cm-table-wrap .cmp td{ border-bottom:2px solid var(--line); }
.cm-table-wrap .cmp thead th{ font-size:.74rem; }
.cm-table-wrap .cmp thead th.hl{ color:var(--accent); }
.cm-table-wrap .cmp td.hl, .cm-table-wrap .cmp th.hl{ background:rgba(225,29,143,.08); }
.cm-table-wrap .cmp .feat{ font-family:var(--display); font-weight:700; color:var(--text); text-transform:none; letter-spacing:-.01em; font-size:1rem; }
.cm-table-wrap .cmp .ck{ stroke:var(--c-green); } .cm-table-wrap .cmp .dash{ stroke:var(--no); }

/* big closing CTA poster (reuse hp-cta look but self-contained) */
.cm-close{ position:relative; text-align:center; padding:clamp(64px,9vw,120px) 0; overflow:hidden; background:var(--bg-2); border-top:3px solid var(--text); margin-top:clamp(48px,7vw,90px); }
.cm-close img{ width:clamp(80px,12vw,130px); margin:0 auto 1.2rem; display:block; filter:drop-shadow(0 16px 30px rgba(123,47,247,.4)); animation:hp-float 5s var(--ease) infinite; }
.cm-close h2{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,8vw,5.5rem); line-height:.86; text-transform:uppercase; letter-spacing:-.035em; }
.cm-close h2 em{ font-style:normal; background:var(--rainbow-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cm-close p{ color:var(--muted); margin:1rem auto 1.8rem; max-width:42ch; }
@media (prefers-reduced-motion:reduce){ .cm-close img{ animation:none; } }