/* /earn only. Device: the map from the other side, on yellow. You are the dot; the five steps play on it,
   real recent prices pop around you, Zone is the chat it is. Uses the shared tokens, pill, chip, plate and FAQ. */

/* ---------- inner H2 and the FAQ statement at that size (the shared inner parts live in site.css) ---------- */
.h2 { font: 800 var(--fs-h2)/.95 var(--display); letter-spacing: -.03em; }
.faq .statement { font-size: var(--fs-h2); }

/* ---------- the opener: the dot scene lives in you.css (shared with the home) ---------- */

/* ---------- the four facts ---------- */
.facts { padding: clamp(72px, 8vw, 130px) 0; }
.facts-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.facts-head .lead { max-width: 30ch; color: var(--mute); }
/* 90% is the anchor, huge, on the left; the other three stack on the right as pill rows, quieter and tight */
.fact-list { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: repeat(3, auto); column-gap: clamp(32px, 6vw, 96px); margin-top: clamp(36px, 4.4vw, 64px); border-top: 2.5px solid var(--ink); }
.fact-list li { display: grid; gap: 16px; justify-items: start; align-content: start; }
.fact-list li:first-child { grid-row: 1 / -1; padding-top: clamp(36px, 4vw, 60px); }
.fact-list li:not(:first-child) { grid-column: 2; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 22px; padding: clamp(20px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--rule); }
.fact-list p { font-size: 17px; line-height: 1.45; max-width: 30ch; }
.fact-list li:first-child p { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; max-width: 24ch; }
.fv { padding: .14em .36em .04em; border-width: max(3px, .03em); transform: rotate(-3deg); }
.fact-list li:nth-child(even) .fv { transform: rotate(2deg); }
.fv-xl { font-size: clamp(64px, 6vw, 88px); }
.fact-list li:first-child .fv-xl { font-size: clamp(120px, 15vw, 224px); }
.fv-l { font-size: clamp(40px, 3.6vw, 52px); }
.fv-m { font-size: clamp(26px, 2.2vw, 32px); }
.facts-cta { margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 959px) {
  .fact-list { grid-template-columns: minmax(0, 1fr); }
  .fact-list li:first-child { grid-row: auto; padding-top: 32px; padding-bottom: 12px; }
  .fact-list li:not(:first-child) { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
  .fact-list li:first-child .fv-xl { font-size: min(34vw, 140px); }
}

/* ---------- HSTLE Zone: the plan, the asks, the hustler's call ---------- */
.zone { position: relative; overflow: hidden; overflow: clip; background: var(--map); padding: clamp(72px, 8vw, 130px) 0; --halo: var(--map); }
.zone-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.zone-l { display: grid; gap: 20px; justify-items: start; }
.zone-k { background: var(--ink); color: #fff; border-radius: 8px; padding: 9px 12px 8px; }
.zone-lead { font-weight: 600; max-width: 30ch; background: var(--map); box-shadow: 0 0 0 8px var(--map); border-radius: 4px; }
.zone-from { display: flex; align-items: center; gap: 14px; font: 600 18px/1.2 var(--text); background: var(--map); box-shadow: 0 0 0 8px var(--map); border-radius: 999px; }
.zone-from .pill { font-size: 44px; transform: rotate(-3deg); }
.thread { display: grid; gap: 20px; }
.thread-ex { justify-self: end; }
.msg { display: flex; align-items: flex-end; gap: 12px; }
.msg-ask { justify-content: flex-end; }
.msg-ask .state { order: -1; }
.tok { --d: clamp(48px, 4vw, 60px); flex: none; width: var(--d); height: var(--d); border-radius: 50%; background: var(--c); color: var(--fg, var(--ink)); box-shadow: 0 0 0 3px var(--ink); display: grid; place-items: center; padding-top: 3px; font: 800 calc(var(--d) * .46)/1 var(--display); }
.bub { background: #fff; border: 3px solid var(--ink); border-radius: 26px 26px 26px 8px; padding: 14px 20px 16px; max-width: 16ch; font: 800 clamp(26px, 2.6vw, 40px)/1.04 var(--display); letter-spacing: -.015em;  }
.bub-k { display: block; margin-bottom: 8px; font: 600 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.msg-ask .bub { background: var(--y); border-radius: 26px 26px 8px 26px; padding: 12px 18px 10px; font-size: clamp(20px, 1.8vw, 26px); }
.state { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 7px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rule); font: 600 14px/1 var(--text); white-space: nowrap; }
.state.is-yes { background: var(--ink); color: #fff; box-shadow: none; }
.state svg { width: 14px; height: 14px; color: var(--y); }
html.motion .thread .msg { opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .4s var(--out), transform .5s var(--out); transition-delay: calc(var(--k, 0) * .35s); }
html.motion .thread.is-in .msg { opacity: 1; transform: none; }
@media (max-width: 959px) {
  .zone-in { grid-template-columns: 1fr; }
  .bub { font-size: 24px; padding: 12px 16px 13px; }
  .msg-ask .bub { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .you-chip, .np, .you-proof, .you-paid, .you-dot, .steps li, .steps .pill { transition-duration: .2s !important; transition-delay: 0s !important; }
  .np, .you-proof, .you-paid { transform: none !important; }
}
@media (prefers-contrast: more) {
  .you-proof, .bub { box-shadow: 0 0 0 2px var(--ink); }
}