/* Homepage sections: the "How it works" scroll story, the "What's live" grid
   and the roadmap's finishing touches. */

/* ===================== How it works: a pinned scroll story ===================== */
.story { padding-bottom: 0; }
.story-track { position: relative; height: 360vh; margin-top: clamp(24px, 4vw, 48px); }
.story-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.story-grid { width: 100%; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 88px); align-items: center; }

.story-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.story-steps li { border-top: 1px solid #1C1C20; }
.story-steps li:last-child { border-bottom: 1px solid #1C1C20; }
.story-steps button { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; width: 100%; padding: 22px 0 24px; cursor: pointer; }
.story-steps button:focus-visible { outline: 2px solid var(--canary); outline-offset: 4px; border-radius: 6px; }
.story-steps .n { font: 500 12px/2.6 var(--typed); color: #44444A; transition: color .4s ease; }
.story-steps .t { display: flex; flex-direction: column; }
.story-steps b { font: 700 clamp(30px, 3.4vw, 50px)/1 var(--display); letter-spacing: -.04em; color: #3A3A40; transition: color .5s ease, translate .6s var(--m-ease, ease); font-variation-settings: "opsz" 96; }
.story-steps em { font-style: normal; color: #A6A6AE; font-size: 16.5px; line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--m-ease, ease), opacity .4s ease, margin .6s var(--m-ease, ease); }
.story-steps li.on b { color: var(--paper); }
.story-steps li.on .n { color: var(--canary); }
.story-steps li.on em { max-height: 3.2em; opacity: 1; margin-top: 10px; }
.story-steps li.done b { color: #6E6E76; }
.story-steps button:hover b { color: #8E8E96; }
.story-steps li.on button:hover b { color: var(--paper); }
.story-steps .prog { position: absolute; left: 0; right: 0; top: -1px; height: 1px; overflow: hidden; }
.story-steps .prog i { position: absolute; inset: 0; background: var(--canary); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.story-steps li.done .prog i { transform: scaleX(1); background: #34343A; }

.stage { position: relative; height: min(66vh, 540px); min-height: 420px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 70% at 70% 20%, rgba(255,255,255,.045), transparent 70%), #0C0C0E;
  box-shadow: inset 0 0 0 1px #222227, 0 60px 120px -50px rgba(0,0,0,.95); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(90% 80% at 60% 40%, #000, transparent); mask-image: radial-gradient(90% 80% at 60% 40%, #000, transparent); }
.stage-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid #1C1C20; font: 500 11px var(--typed); letter-spacing: .14em; text-transform: uppercase; color: #6E6E76; }
.stage-bar span { display: flex; align-items: center; gap: 10px; }
.stage-k { color: var(--paper); }
.sc { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; padding: 26px 28px 70px; box-sizing: border-box; opacity: 0; scale: .965; filter: blur(10px); pointer-events: none; transition: opacity .55s ease, scale .8s var(--m-ease, ease), filter .6s ease; }
.sc.on { opacity: 1; scale: 1; filter: none; pointer-events: auto; transition-delay: .12s; }
.sc-foot { position: absolute; left: 28px; right: 28px; bottom: 22px; display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid #1C1C20; }
.sc-foot span { font: 500 11px var(--typed); letter-spacing: .14em; text-transform: uppercase; color: #6E6E76; }
.sc-foot b { font: 700 26px/1 var(--display); letter-spacing: -.03em; color: var(--paper); font-variant-numeric: tabular-nums; }

/* 01 Watch */
.spark-box { position: relative; height: 42%; }
.spark { display: block; width: 100%; height: 100%; overflow: visible; }
.spark .line { fill: none; stroke: var(--canary); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spark .area { opacity: 0; }
.spark .dump { stroke: #6E6E76; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: 0; }
.sc-watch.on .spark .line { animation: drawLine 2.4s cubic-bezier(.6,0,.3,1) .2s forwards; }
.sc-watch.on .spark .area { animation: fadeIn 1.2s ease 1.6s forwards; }
.sc-watch.on .spark .dump { animation: fadeIn .6s ease 1.5s forwards; }
.spark-box > span { position: absolute; padding: 4px 9px; border-radius: 999px; font: 500 11px var(--typed); white-space: nowrap; opacity: 0; translate: 0 6px; }
.tag-peak { left: calc(31% + 14px); top: -2px; background: #1C1C20; color: var(--paper); }
.tag-now { right: 0; bottom: 18%; background: var(--paper); color: #0A0A0B; font-weight: 600 !important; }
.sc-watch.on .tag-peak { animation: tagIn .6s var(--m-ease, ease) 1.2s forwards; }
.sc-watch.on .tag-now { animation: tagIn .6s var(--m-ease, ease) 2.5s forwards; }
.feed { position: relative; height: calc(58% - 70px); margin-top: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.feed div { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 14px; align-items: center; padding: 7px 2px; border-bottom: 1px solid #16161A; font: 400 12px var(--typed); color: #6E6E76; animation: feedIn .45s var(--m-ease, ease) both; }
.feed div.hit { color: #E9D9A0; }
.feed div.hit .side::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--canary); margin-right: 8px; vertical-align: middle; }
.feed div.sell { color: var(--paper); }
.feed .amt { text-align: right; }
@keyframes feedIn { from { opacity: 0; translate: 0 -100%; } to { opacity: 1; translate: none; } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes tagIn { to { opacity: 1; translate: none; } }

/* 02 Flag */
.sc-flag { display: flex; flex-direction: column; gap: 10px; }
.fl { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: center; padding: 15px 18px; border-radius: 16px; background: #111114; box-shadow: inset 0 0 0 1px #1E1E23; opacity: 0; translate: 28px 0; }
.fl b { display: block; font: 600 18px/1.2 var(--print); color: var(--paper); }
.fl em { display: block; font: 400 12.5px/1.5 var(--typed); font-style: normal; color: #6E6E76; margin-top: 3px; }
.fl.raised em { color: #E9D9A0; }
.fl:not(.raised) b { color: #6E6E76; }
.cb { position: relative; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #44444A; }
.fl.raised .cb::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: var(--canary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat; opacity: 0; scale: 1.9; }
.sc-flag.on .fl { animation: flIn .6s var(--m-ease, ease) forwards; }
.sc-flag.on .fl:nth-child(2) { animation-delay: .12s; } .sc-flag.on .fl:nth-child(3) { animation-delay: .24s; } .sc-flag.on .fl:nth-child(4) { animation-delay: .36s; }
.sc-flag.on .fl.raised .cb::after { animation: stampIn .35s cubic-bezier(.2,1.6,.4,1) forwards; }
.sc-flag.on .fl:nth-child(1) .cb::after { animation-delay: .8s; } .sc-flag.on .fl:nth-child(2) .cb::after { animation-delay: 1.15s; } .sc-flag.on .fl:nth-child(3) .cb::after { animation-delay: 1.5s; }
@keyframes flIn { to { opacity: 1; translate: none; } }
@keyframes stampIn { to { opacity: 1; scale: 1; } }

/* 03 Trace */
.sc-trace svg { display: block; width: 100%; height: calc(100% - 20px); overflow: visible; }
.sc-trace .edges path { fill: none; stroke: #3A3A40; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sc-trace .edges path.hot { stroke: var(--canary); stroke-width: 2; }
.sc-trace.on .edges path { animation: drawLine 1s cubic-bezier(.6,0,.3,1) forwards; }
.sc-trace.on .edges path:nth-child(2) { animation-delay: .1s; } .sc-trace.on .edges path:nth-child(3) { animation-delay: .2s; } .sc-trace.on .edges path:nth-child(4) { animation-delay: .3s; } .sc-trace.on .edges path:nth-child(5) { animation-delay: .4s; }
.sc-trace.on .edges path.hot { animation-delay: 1s; }
.sc-trace .parts circle { fill: var(--canary); offset-rotate: 0deg; opacity: 0; filter: drop-shadow(0 0 6px rgba(245,197,24,.9)); }
.sc-trace.on .parts circle { animation: travel 2.4s linear 1.6s infinite; }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.sc-trace .nodes g { opacity: 0; transform-box: fill-box; transform-origin: center; scale: .4; }
.sc-trace.on .nodes g { animation: nodeIn .5s cubic-bezier(.2,1.5,.4,1) forwards; animation-delay: calc(var(--k) * 110ms); }
.sc-trace .w circle { fill: #18181C; stroke: #8E8E96; stroke-width: 1.5; }
.sc-trace .hop circle { fill: #18181C; stroke: #6E6E76; stroke-width: 1.5; }
.sc-trace text { font: 400 11px var(--typed); fill: #8E8E96; }
.sc-trace .cex rect { fill: #0A0A0B; stroke: var(--canary); stroke-width: 1.5; }
.sc-trace .cex text { fill: #A6A6AE; font-size: 10px; letter-spacing: .08em; }
.sc-trace .cex text.big { font: 700 16px var(--display); fill: var(--paper); letter-spacing: -.01em; }
.sc-trace.on .cex { animation-delay: 1.2s !important; }
.sc-trace.on .cex rect { animation: cexGlow 2.4s ease-in-out 1.8s infinite; }
@keyframes nodeIn { to { opacity: 1; scale: 1; } }
@keyframes cexGlow { 50% { filter: drop-shadow(0 0 12px rgba(245,197,24,.55)); } }

/* 04 File */
.sc-file { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }
.case { position: relative; padding: 22px 24px 20px; border-radius: 6px; background: var(--paper); color: #0A0A0B; rotate: -1.5deg; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); opacity: 0; translate: 0 40px; }
.case-top span, .case-hash span { display: block; font: 500 10.5px var(--typed); letter-spacing: .16em; text-transform: uppercase; color: #6E6E76; }
.case-top b { display: block; font: 700 clamp(22px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -.03em; margin: 4px 0 14px; }
.case-hash code { font: 500 13px var(--typed); color: #0A0A0B; }
.case-stamp { position: absolute; right: 18px; top: 18px; padding: 5px 12px; border-radius: 6px; background: #0A0A0B; color: var(--paper); font: 600 12px var(--typed); letter-spacing: .18em; text-transform: uppercase; opacity: 0; rotate: -8deg; scale: 2; }
.case-stamp::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--canary); margin-right: 8px; vertical-align: middle; }
.sc-file.on .case { animation: flIn .8s var(--m-ease, ease) .1s forwards; }
.sc-file.on .case-stamp { animation: stampIn .3s cubic-bezier(.2,1.6,.4,1) 1.3s forwards; }
.routes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.routes li { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: #111114; box-shadow: inset 0 0 0 1px #1E1E23; font-weight: 600; opacity: 0; translate: 0 16px; }
.routes em { margin-left: auto; font: 400 12px var(--typed); font-style: normal; color: #8E8E96; }
.routes .ok { width: 20px; height: 20px; border-radius: 50%; background: var(--canary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/66% no-repeat; flex: none; }
.sc-file.on .routes li { animation: flIn .6s var(--m-ease, ease) forwards; animation-delay: calc(1.6s + var(--k) * 180ms); }

@media (max-width: 900px) {
  .story-track { height: 420vh; }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: center; }
  .stage { height: 52svh; min-height: 340px; border-radius: 22px; }
  .story-steps li:not(.on) { display: none; }
  .story-steps li.on { border-bottom: 1px solid #1C1C20; }
  .story-steps button { padding: 16px 0; }
  .story-steps b { font-size: 30px; }
  .sc { padding: 18px 18px 62px; }
  .sc-foot { left: 18px; right: 18px; bottom: 16px; }
  .fl { padding: 10px 12px; } .fl b { font-size: 15px; } .fl em { font-size: 11.5px; }
  .sc-trace text { font-size: 15px; } .sc-trace .w text { display: none; }
  .feed div { grid-template-columns: 54px 1fr auto; } .feed .amt { display: none; }
}

/* ===================== What's live: the grid ===================== */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "rc rc kl fd" "rc rc cs ls" "cx cx lu fl" "ck ck tg tg"; gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; min-height: 230px; padding: 22px; border-radius: 22px; background: #0E0E11; box-shadow: inset 0 0 0 1px #1C1C20; overflow: hidden; transition: box-shadow .4s ease, translate .5s var(--m-ease, ease); }
.tile:hover { box-shadow: inset 0 0 0 1px #34343A; }
.m-on .tile.m-glow.m-hot { translate: 0 -4px; }
.tile .viz { position: relative; flex: 1; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.tile .tt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tile h3 { margin: 6px 0 0; font: 700 22px/1.1 var(--display); letter-spacing: -.03em; font-variation-settings: "opsz" 96; }
.tile p { margin: 0; color: #8E8E96; font-size: 15px; line-height: 1.45; }
.t-receipt { grid-area: rc; } .t-kill { grid-area: kl; } .t-funds { grid-area: fd; } .t-case { grid-area: cs; } .t-loss { grid-area: ls; } .t-cex { grid-area: cx; } .t-lineup { grid-area: lu; } .t-file { grid-area: fl; }
.t-receipt { background: radial-gradient(70% 60% at 50% 30%, rgba(245,197,24,.07), transparent 70%), #0E0E11; }
.t-receipt h3 { font-size: 32px; }

.mini-receipt { width: min(240px, 70%); padding: 18px 16px 22px; background: var(--paper); border-radius: 3px; display: flex; flex-direction: column; gap: 9px; rotate: -3deg; box-shadow: 0 40px 70px -30px rgba(0,0,0,.95); clip-path: inset(0 0 100% 0); }
.mini-receipt i { display: block; height: 6px; border-radius: 2px; background: #C9C8C0; }
.mini-receipt i:nth-child(odd) { width: 78%; }
.mini-receipt i.h { height: 12px; width: 52%; margin: 0 auto 6px; background: #0A0A0B; }
.mini-receipt i.hl { background: var(--canary); width: 46%; }
.mini-receipt i.hl.w { width: 62%; margin-left: auto; }
.mini-receipt i.bc { height: 26px; width: 100%; margin-top: 8px; background: repeating-linear-gradient(90deg, #0A0A0B 0 2px, transparent 2px 4px, #0A0A0B 4px 5px, transparent 5px 8px); }
.tile.in .mini-receipt { animation: print 2.2s steps(22, end) .4s forwards; }
@keyframes print { to { clip-path: inset(0 0 0 0); } }

.t-kill svg { width: 100%; height: 76px; overflow: visible; }
.t-kill path, .t-funds .lines path { fill: none; stroke: var(--canary); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.t-kill.in path { animation: drawLine 1.8s cubic-bezier(.6,0,.3,1) .5s forwards; }
.kill-tag { position: absolute; right: 0; top: 0; padding: 4px 10px; border-radius: 999px; background: var(--paper); color: #0A0A0B; font: 600 11.5px var(--typed); opacity: 0; translate: 0 6px; }
.t-kill.in .kill-tag { animation: tagIn .5s var(--m-ease, ease) 2s forwards; }
.t-funds svg { width: 100%; height: 76px; overflow: visible; }
.t-funds .lines path { stroke: #55555C; stroke-width: 1.5; }
.t-funds circle { fill: #18181C; stroke: #8E8E96; stroke-width: 1.5; }
.t-funds rect { fill: #0A0A0B; stroke: var(--canary); stroke-width: 1.5; }
.t-funds.in .lines path { animation: drawLine 1.2s cubic-bezier(.6,0,.3,1) .5s forwards; }
.t-funds.in .lines path:nth-child(2) { animation-delay: .7s; } .t-funds.in .lines path:nth-child(3) { animation-delay: .9s; }
.t-funds.in rect { animation: cexGlow 2.4s ease-in-out 1.8s infinite; }

.cex-row { display: flex; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cex-row > div { display: flex; gap: 10px; padding-right: 10px; flex: none; animation: slide 22s linear infinite; }
.cex-row span { padding: 10px 16px; border-radius: 12px; background: #141418; box-shadow: inset 0 0 0 1px #24242A; font: 600 15px var(--display); letter-spacing: -.01em; color: #C9C9CF; white-space: nowrap; }
@keyframes slide { to { transform: translateX(-100%); } }

.case-line { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: #141418; box-shadow: inset 0 0 0 1px #24242A; }
.case-line code { font: 500 14px var(--typed); color: var(--paper); overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid var(--canary); }
.t-case.in .case-line code { animation: type 1.4s steps(15, end) .5s forwards, caret .8s steps(1) 0s 6; }
@keyframes type { to { width: 15ch; } }
@keyframes caret { 50% { border-color: transparent; } }
.padlock { position: relative; width: 14px; height: 11px; margin-top: 6px; border-radius: 3px; background: var(--canary); }
.padlock::before { content: ""; position: absolute; left: 2px; right: 2px; top: -8px; height: 10px; border: 2px solid var(--canary); border-bottom: 0; border-radius: 6px 6px 0 0; box-sizing: border-box; transform-origin: 90% 100%; rotate: -28deg; transition: rotate .4s ease; }
.t-case.in .padlock::before { animation: shut .4s cubic-bezier(.2,1.6,.4,1) 2s forwards; }
@keyframes shut { to { rotate: 0deg; } }

.t-loss .viz { gap: 10px; align-items: baseline; }
.t-loss .loss { font: 700 54px/1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.t-loss .viz span { font: 500 14px var(--typed); color: #6E6E76; }

.match { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; }
.match span { padding: 7px 12px; border-radius: 999px; background: #141418; box-shadow: inset 0 0 0 1px #24242A; font: 500 12px var(--typed); color: #6E6E76; transition: color .3s ease, box-shadow .3s ease; }
.match .dep { color: #0A0A0B; background: var(--canary); box-shadow: none; }
.match i { width: 100%; height: 0; }
.t-lineup.in .match span:not(.dep) { animation: lit .4s ease forwards; }
.t-lineup.in .match span:nth-of-type(2) { animation-delay: .8s; } .t-lineup.in .match span:nth-of-type(3) { animation-delay: 1.2s; } .t-lineup.in .match span:nth-of-type(4) { animation-delay: 1.6s; }
@keyframes lit { to { color: var(--paper); box-shadow: inset 0 0 0 1px var(--canary); } }

.paste { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.paste span { padding: 9px 14px; border-radius: 12px; background: var(--paper); color: #0A0A0B; font: 600 13px var(--print); opacity: 0; scale: .7; }
.t-file.in .paste span { animation: stampIn .45s cubic-bezier(.2,1.6,.4,1) forwards; }
.t-file.in .paste span:nth-child(2) { animation-delay: .25s; } .t-file.in .paste span:nth-child(3) { animation-delay: .5s; }
.t-file.in .paste span:first-child { animation-delay: .1s; }

.soon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 22px 0 0; color: #8E8E96; font-size: 15px; }
.soon .sep { width: 1px; height: 16px; background: #26262B; margin: 0 6px; }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "rc rc" "kl fd" "cs ls" "cx cx" "lu fl" "ck ck" "tg tg"; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rc" "kl" "fd" "cs" "ls" "cx" "lu" "fl" "ck" "tg"; }
  .tile { min-height: 0; }
}

/* ===================== Roadmap touches ===================== */
.iso text.t-name { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-stretch: normal; }
.iso.wait .rise { transform: translateY(90px) scale(.94); opacity: 0; }
.iso polygon[stroke-dasharray], .iso line[stroke-dasharray] { animation: march 1.4s linear infinite; }
@keyframes march { to { stroke-dashoffset: -18; } }
.iso .beacon ellipse { fill: none; stroke: var(--canary); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: beacon 2.8s ease-out infinite; }
.iso .beacon ellipse:nth-child(2) { animation-delay: 1.4s; }
@keyframes beacon { from { scale: .85; opacity: .7; } to { scale: 1.25; opacity: 0; } }
.iso .here { font: 500 11px var(--typed) !important; letter-spacing: .16em; fill: var(--canary) !important; }
.iso .here-g { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.road-detail { transition: opacity .35s ease, translate .5s var(--m-ease, ease); }
.road-detail.swap { opacity: 0; translate: 0 10px; }
.road-detail h3 { font-family: var(--display); font-stretch: normal; letter-spacing: -.03em; font-weight: 700; }
.road-detail ul { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.road-detail li { padding: 9px 14px !important; border: 0 !important; border-radius: 999px; background: #121215; box-shadow: inset 0 0 0 1px #24242A; font-size: 15px; }
.road-auto { grid-column: 1 / -1; height: 1px; background: #1C1C20; position: relative; overflow: hidden; }
.road-auto i { position: absolute; inset: 0; background: var(--canary); transform-origin: 0 50%; transform: scaleX(0); }
.road-auto.run i { animation: autoBar 5s linear forwards; }
@keyframes autoBar { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .sc, .fl, .routes li, .case, .case-stamp, .sc-trace .nodes g, .spark-box > span, .kill-tag, .paste span { animation: none !important; opacity: 1 !important; translate: none !important; scale: 1 !important; filter: none !important; }
  .spark .line, .sc-trace .edges path, .t-kill path, .t-funds .lines path { stroke-dashoffset: 0 !important; animation: none !important; }
  .spark .area, .spark .dump, .fl.raised .cb::after { opacity: 1 !important; scale: 1 !important; animation: none !important; }
  .sc:not(.on) { opacity: 0 !important; }
  .mini-receipt { clip-path: none !important; animation: none !important; }
  .case-line code { width: auto !important; animation: none !important; }
  .cex-row > div, .iso polygon, .iso line, .iso .beacon ellipse, .iso .here-g, .sc-trace .parts circle { animation: none !important; }
}

/* ---------- callers: the call next to the wallet ---------- */
.kol { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.kol-demo { margin: 0; padding: clamp(16px, 2vw, 24px); border: 1px solid var(--rule); border-radius: 18px; background: radial-gradient(80% 70% at 40% 20%, rgba(245,197,24,.06), transparent 70%), #0E0E11; display: flex; flex-direction: column; gap: 14px; }
.kol-demo svg { width: 100%; height: auto; overflow: visible; }
.kol-demo .k-grid path { stroke: #1F1F24; stroke-width: 1; }
.kol-demo .k-line { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.kol-demo .k-drop { stroke: #3A3A42; stroke-width: 1.2; stroke-dasharray: 4 4; }
.kol-demo .k-call circle { fill: var(--canary); }
.kol-demo .k-call rect { fill: #17171B; stroke: rgba(245,197,24,.5); }
.kol-demo text { fill: var(--paper); font: 600 12.5px var(--print); }
.kol-demo text.sm { fill: var(--fog); font: 500 11px var(--typed); }
.kol-demo .k-peak circle { fill: var(--paper); }
.kol-demo .k-s { fill: var(--stamp-bright, #FF5A4E); }
.kol-demo .k-sell-tag text { fill: var(--stamp-bright, #FF5A4E); font: 500 11px var(--typed); }
.k-meter { display: flex; flex-direction: column; gap: 8px; }
.k-bar { height: 10px; border-radius: 99px; background: #1C1C21; overflow: hidden; }
.k-bar i { display: block; height: 100%; width: 100%; background: var(--canary); border-radius: 99px; transform-origin: 0 50%; }
.k-meter p { color: var(--fog); font-size: 15px; } .k-meter b { color: var(--canary); font: 700 22px var(--print); margin-right: 4px; }
.kol-demo figcaption { color: #8E8E96; font-size: 13px; }
.kol-steps { list-style: none; counter-reset: k; display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; }
.kol-steps li { counter-increment: k; display: grid; grid-template-columns: 42px 1fr; gap: 4px 14px; }
.kol-steps li::before { content: counter(k, decimal-leading-zero); grid-row: span 2; font: 600 13px var(--typed); color: var(--canary); border: 1px solid rgba(245,197,24,.35); border-radius: 99px; height: 30px; display: grid; place-items: center; }
.kol-steps b { font: 650 20px/1.2 var(--print); color: var(--paper); }
.kol-steps span { color: var(--fog); line-height: 1.55; }
.kol-steps em { color: var(--paper); font-style: normal; }
.kol-look { margin-top: clamp(28px, 4vw, 44px); max-width: 640px; display: flex; flex-direction: column; gap: 10px; }
.kol-look label { font: 650 18px var(--print); color: var(--paper); }
.kol-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.kol-row input { min-width: 0; border: 1px solid var(--rule); border-radius: 12px; background: #0E0E11; color: var(--paper); font: 500 15.5px var(--typed); padding: 12px 14px; }
.kol-row input:focus { outline: none; border-color: #6E6E76; }
#callerMsg { color: var(--fog); font-size: 14px; min-height: 1em; }
.kol-rules { margin-top: 18px; color: #8E8E96; font-size: 14.5px; max-width: 80ch; }
.kol-rules a { color: var(--paper); }
/* the example plays once it scrolls into view */
.m-on .kol-demo:not(.in) .k-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-on .kol-demo:not(.in) .k-call, .m-on .kol-demo:not(.in) .k-s, .m-on .kol-demo:not(.in) .k-peak, .m-on .kol-demo:not(.in) .k-sell-tag, .m-on .kol-demo:not(.in) .k-win { opacity: 0; }
.m-on .kol-demo:not(.in) .k-bar i { transform: scaleX(0); }
.m-on .kol-demo.in .k-line { stroke-dasharray: 1; animation: kDraw 2.2s cubic-bezier(.4,.1,.2,1) .3s both; }
.m-on .kol-demo.in .k-win { animation: kFade .8s ease 1.2s both; }
.m-on .kol-demo.in .k-call { animation: kPop .5s cubic-bezier(.2,1.6,.4,1) 1.05s both; transform-box: fill-box; transform-origin: 50% 50%; }
.m-on .kol-demo.in .k-s { animation: kPop .35s cubic-bezier(.2,1.6,.4,1) both; transform-box: fill-box; transform-origin: 50% 0; }
.m-on .kol-demo.in .k-s:nth-child(1) { animation-delay: 1.45s; } .m-on .kol-demo.in .k-s:nth-child(2) { animation-delay: 1.7s; } .m-on .kol-demo.in .k-s:nth-child(3) { animation-delay: 1.9s; } .m-on .kol-demo.in .k-s:nth-child(4) { animation-delay: 2.15s; }
.m-on .kol-demo.in .k-sell-tag { animation: kFade .5s ease 1.6s both; }
.m-on .kol-demo.in .k-peak { animation: kFade .6s ease 2.4s both; }
.m-on .kol-demo.in .k-bar i { animation: kFill 1.4s cubic-bezier(.2,.7,.2,1) 2.6s both; }
@keyframes kDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kPop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes kFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 900px) { .kol { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .kol-row { grid-template-columns: minmax(0, 1fr); } }
/* What's live: the callers and bot tiles */
.t-callers { grid-area: ck; } .t-bot { grid-area: tg; }
.t-callers svg { width: 100%; height: 70px; } .t-callers path { fill: none; stroke: var(--paper); stroke-width: 2; } .t-callers line { stroke: #3A3A42; stroke-dasharray: 3 3; } .t-callers circle { fill: var(--canary); }
.t-callers .call-tag { position: absolute; left: 14px; top: 6px; font: 500 12px var(--typed); color: var(--canary); }
.t-callers .viz { position: relative; }
.t-bot .tg { display: flex; flex-direction: column; gap: 4px; font: 500 13px var(--typed); color: var(--fog); padding: 10px 12px; border-radius: 12px; background: #17212B; }
.t-bot .tg span:first-child { color: var(--paper); font-weight: 600; }