/* Landing page. Tokens in cosmic_tokens.css; the sign-in button (.xb) and .pw-list live in onboarding.css. */
html { scroll-behavior: smooth; }

/* Launch price under the hero: a big number, a narrow meter, one line of small print. Centered, no frame. */
.lb { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 0 8px; text-align: center; }
.lb-rule { width: min(100%, 440px); height: 1px; background: var(--cc-divider); }
.lb-price { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-text); }
.lb-price i { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-magenta); box-shadow: 0 0 10px var(--cc-magenta); animation: cc-pulse 1.6s ease-in-out infinite; }
.lb-head { display: flex; align-items: baseline; gap: 14px; }
.lb-n { font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.lb-label { font-family: var(--cc-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #b9bec4; }
.lb-meter { position: relative; width: min(100%, 360px); height: 4px; border-radius: 99px; background: var(--cc-track); overflow: hidden; }
.lb-meter i { position: absolute; inset: 0 auto 0 0; width: var(--taken); min-width: 10px; border-radius: inherit; background: linear-gradient(90deg, var(--cc-magenta), var(--cc-amber)); box-shadow: 0 0 12px var(--cc-magenta); transform-origin: left; animation: cc-fill 900ms var(--cc-ease-out) 300ms both; }
.lb-foot { margin-bottom: 10px; font-family: var(--cc-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cc-text-muted); text-wrap: balance; }
.lb-foot b { color: var(--cc-text); font-weight: 600; }

/* Hero: copy on the left, a post turning into a card on the right. */
.hh { display: grid; align-items: center; gap: 48px; min-height: calc(100dvh - 61px - 160px); padding: 48px 0 32px; }
@media (min-width: 900px) { .hh { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
@media (max-width: 899px) { .hh { min-height: 0; gap: 24px; } }
.hh-copy { display: flex; flex-direction: column; gap: 22px; }
.hh-copy > * { animation: rv-fade 700ms var(--cc-ease-out) both; }
.hh-copy > :nth-child(2) { animation-delay: 70ms } .hh-copy > :nth-child(3) { animation-delay: 140ms } .hh-copy > :nth-child(4) { animation-delay: 210ms }
.hh-eyebrow { font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-text-muted); }
.hh-h { max-width: 13ch; font-size: clamp(44px, 7vw, 80px); font-weight: 800; line-height: .94; letter-spacing: -.045em; text-wrap: balance; }
.hh-sub { max-width: 42ch; font-size: 18px; line-height: 1.5; color: #b9bec4; text-wrap: pretty; }
.hh-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 4px; }
.hh-trust { font-size: 13px; color: var(--cc-text-muted); }

/* A milestone playing out (milestone_controller.js): the stage counts up, then turns into the card.
   Phases: count, turn, card, reset. */
.ms { position: relative; display: grid; place-items: center; min-height: 440px; perspective: 1400px; }
.ms > * { grid-area: 1 / 1; }
.ms-stage { width: min(100%, 380px); transition: opacity 500ms var(--cc-ease-out), transform 600ms var(--cc-ease-out), filter 600ms; }
.ms-card { opacity: 0; transform: rotateY(-90deg) scale(.92); pointer-events: none; transition: opacity 300ms, transform 800ms var(--cc-ease-spring); }
.ms::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.35), rgba(139,92,246,.18) 40%, transparent 70%); transition: opacity 400ms; }
.ms[data-phase="turn"] .ms-stage { opacity: 0; transform: rotateY(90deg) scale(.92); filter: brightness(2.2); }
.ms[data-phase="turn"]::after { opacity: 1; }
.ms[data-phase="card"] .ms-stage { opacity: 0; transform: rotateY(90deg) scale(.92); transition: none; }
.ms[data-phase="card"] .ms-card { opacity: 1; transform: none; }
.ms[data-phase="reset"] .ms-stage { opacity: 0; transform: translateY(12px); transition: none; }
.ms[data-phase="reset"] .ms-card { opacity: 0; transform: translateY(-12px) scale(.96); transition: opacity 500ms, transform 500ms; }
@media (max-width: 640px) { .ms { min-height: 360px; } .ms-card { zoom: .86; } }

/* The post */
.xp { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 20px; background: var(--cc-plate); box-shadow: var(--cc-plate-edge), 0 30px 80px -40px rgba(29,155,240,.35); }
.xp-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.xp-head span:last-child { color: var(--cc-text-muted); }
.xp-av { width: 36px; height: 36px; border-radius: 50%; background: var(--cc-rim-singular); box-shadow: inset 0 0 0 3px #07070d; flex-shrink: 0; }
.xp-text { font-size: 17px; line-height: 1.4; }
.xp-stats { display: flex; gap: 18px; font-size: 13px; color: var(--cc-text-muted); font-variant-numeric: tabular-nums; }
.xp-stats b { font-weight: 600; color: var(--cc-text); }
.xp-views { margin-left: auto; }
.xp-views b { color: var(--cc-sky); }
.ms-goal { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--cc-divider); font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text-muted); white-space: nowrap; }
.ms-track { position: relative; flex: 1; height: 3px; border-radius: 99px; background: var(--cc-track); overflow: hidden; }
.ms-track i { position: absolute; inset: 0; transform: scaleX(var(--p, 0)); transform-origin: left; background: var(--cc-tag-epic); }

/* The follower line, and the streak grid that shares its plate */
.fl { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 18px; border-radius: 20px; background: var(--cc-plate); box-shadow: var(--cc-plate-edge), 0 30px 80px -40px rgba(62,230,214,.3); }
.fl-head { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-text-muted); }
.fl-head b { font-family: var(--cc-font); font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--cc-text); font-variant-numeric: tabular-nums; }
.fl-head small { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--cc-text-muted); }
.fl-chart { width: 100%; height: 150px; overflow: visible; }
.fl-goal { stroke: var(--cc-border); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
/* The line starts 60% drawn (612 of 1,000 is where the count begins), so the plate is never empty. */
.fl-line { fill: none; stroke: url(#fl_stroke); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - (.6 + .4 * var(--p, 0))); }
.fl-hit { fill: var(--cc-cyan); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 200ms; }
.fl-label { position: absolute; right: 22px; top: 62px; font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .1em; color: var(--cc-text-muted); }
.ms[data-phase="turn"] .fl-hit { opacity: 1; animation: cc-shock 700ms ease-out; }
/* Here the card rises out of the crossing point, top right of the chart, instead of flipping. */
.ms-rise .ms-card { transform: translate(30%, -18%) scale(.12); }
.ms-rise[data-phase="turn"] .ms-stage { transform: scale(.96); filter: none; opacity: .3; }
/* Thirty days, lit one by one by the controller. */
.sk { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; padding: 6px 0 2px; }
.sk i { aspect-ratio: 1; border-radius: 5px; background: var(--cc-track); box-shadow: inset 0 0 0 1px var(--cc-divider); transition: background 250ms, box-shadow 250ms, transform 250ms var(--cc-ease-pop); }
.sk i.on { background: linear-gradient(135deg, #1d9bf0, #3ee6d6); box-shadow: 0 0 12px rgba(62,230,214,.45); transform: scale(1.08); }

/* Shared section frame. */
.hm { padding: 88px 0 0; }
.hm-last { padding-bottom: 48px; }
.hm-h { font-size: clamp(28px, 4.2vw, 40px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.hm > .hm-h { margin-bottom: 28px; }
.hm-p { max-width: 44ch; font-size: 17px; line-height: 1.55; color: #b9bec4; text-wrap: pretty; }
.hm-center { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 8px; }
.hm-center .hm-p { max-width: 52ch; }
.hm-dealt { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-text-muted); }
.hm-dealt i { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-cyan); box-shadow: 0 0 10px var(--cc-cyan); }

/* Three ways a card happens: the three demos side by side, staggered by the controller. */
.tr { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 900px) { .tr { grid-template-columns: repeat(3, 1fr); } }
.tr-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 10px 0; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); min-width: 0; }
.tr-label { font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cc-sky); }
.tr .ms { width: 100%; min-height: 380px; }
.tr .ms-stage { width: min(100%, 320px); }
.tr .cc { zoom: .86; }
.tr .xp-text { font-size: 15px; }
@media (max-width: 640px) { .tr .ms { min-height: 320px; } .tr .cc { zoom: .74; } }

/* Show them off: your post with the card's picture, your public page beside it. */
.so { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .so { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; } }
.so-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.so-post { width: min(100%, 460px); margin-top: 14px; }
.so-pic { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; height: 260px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 60%, #140f2e, #000 80%); box-shadow: inset 0 0 0 1px var(--cc-divider); }
.so-pic .cc { zoom: .56; }
.so-pic .cc-hit { pointer-events: none; }
.so-side { display: flex; flex-direction: column; gap: 6px; }
.so-side span { font-family: var(--cc-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-text-muted); }
.so-side b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.so-side em { font-style: normal; font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .08em; color: var(--cc-cyan); }
.so-page { border-radius: 24px; overflow: hidden; background: var(--cc-plate); box-shadow: var(--cc-plate-edge); min-width: 0; }
.so-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--cc-divider); }
.so-id { display: flex; align-items: center; gap: 14px; }
.so-id .xp-av { width: 48px; height: 48px; box-shadow: inset 0 0 0 4px #07070d; }
.so-id b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.so-id span { font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text-muted); }
.so-stats { display: flex; gap: 22px; }
.so-stats div { display: flex; flex-direction: column; align-items: center; }
.so-stats dd { font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.so-stats dt { font-size: 11px; color: var(--cc-text-muted); }
.so-grid { display: flex; gap: 14px; padding: 22px 24px; overflow-x: auto; scrollbar-width: none; }
.so-grid::-webkit-scrollbar { display: none; }
.so-grid .cc { zoom: .62; }

/* Your binder: a demo strip with the rarity legend. */
.bn { display: flex; flex-direction: column; gap: 22px; }
.bn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.bn-ring { display: flex; align-items: center; gap: 14px; }
.bn-ring svg { width: 56px; height: 56px; flex-shrink: 0; }
.bn-ring b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bn-ring span { font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-text-muted); }
.bn-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-legend li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #b9bec4; }
.bn-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
/* 100vw counts a classic scrollbar, so the page clips the few pixels it overhangs. */
body:has(.bn-strip) { overflow-x: clip; }
.bn-strip { display: flex; gap: 20px; margin: 0 -16px; padding: 16px 16px 24px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.bn-strip::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .bn-strip { margin: 0 -32px; padding: 16px 32px 24px; } }
.bn-strip .cc { scroll-snap-align: start; zoom: .8; }

/* Pricing */
.pr { display: grid; gap: 36px; padding: 36px; border-radius: 28px; background: radial-gradient(80% 120% at 0% 0%, rgba(139,92,246,.16), transparent 70%), var(--cc-plate); box-shadow: var(--cc-plate-edge), 0 0 80px -40px rgba(139,92,246,.5); }
@media (min-width: 900px) { .pr { grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 48px; } }
.pr-main { display: flex; flex-direction: column; gap: 14px; }
.pr-price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 8px; }
.pr-amount { font-size: 72px; font-weight: 800; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pr-per { font-family: var(--cc-font-mono); font-size: 14px; color: var(--cc-text-muted); }
.pr-was { margin-left: 6px; font-size: 22px; font-weight: 600; color: var(--cc-text-muted); text-decoration-thickness: 2px; }
.pr-side { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 28px; }

/* Spots left at the launch price */
.sp { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sp-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.sp-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-text); }
.sp-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-magenta); box-shadow: 0 0 10px var(--cc-magenta); animation: cc-pulse 1.6s ease-in-out infinite; }
.sp-left { font-size: 14px; color: var(--cc-text-muted); font-variant-numeric: tabular-nums; }
.sp-left b { font-weight: 800; color: var(--cc-text); }
.sp-bar { position: relative; height: 8px; border-radius: 99px; background: var(--cc-track); overflow: hidden; }
.sp-fill { position: absolute; inset: 0 auto 0 0; width: var(--taken); border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #ff4fa3, #ffb547); transform-origin: left; animation: cc-fill 1.4s var(--cc-ease-out) 400ms both; overflow: hidden; }
.sp-fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: xb-sweep 3s ease-in-out 1.8s infinite; }
.sp-next { font-size: 13px; color: var(--cc-text-muted); }
.sp-ladder { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 4px; }
.sp-ladder li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cc-divider); color: var(--cc-text-muted); }
.sp-ladder b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.sp-ladder span { font-family: var(--cc-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sp-ladder .on { color: var(--cc-text); background: rgba(255,79,163,.07); box-shadow: inset 0 0 0 1px rgba(255,79,163,.45); }
.sp-ladder .gone b { text-decoration: line-through; }

/* Questions */
.fq { display: grid; gap: 28px 48px; }
@media (min-width: 640px) { .fq { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .fq { grid-template-columns: repeat(4, 1fr); } }
.fq div { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--cc-divider); }
.fq dt { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.fq dd { font-size: 14px; line-height: 1.5; color: #b9bec4; }