/* ---------- v8: contract address, links, console window, envelopes window, contracts print, motion ---------- */

/* the CA: bigger, blue, one tap copies it */
.ca2{margin-top:24px}
.ca2 .cal{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.ca2 .cal span{letter-spacing:.06em;text-transform:none}
.cab{margin-top:10px;display:flex;align-items:center;gap:14px;width:100%;max-width:640px;background:rgba(61,112,195,.08);border:1px solid rgba(127,188,255,.35);border-radius:4px;padding:13px 16px;cursor:pointer;font:inherit;text-align:left;transition:border-color .3s ease,background .3s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}
.cab code{flex:1;min-width:0;color:var(--ink);font-family:Mono;font-size:15px;letter-spacing:.02em;overflow-wrap:anywhere;line-height:1.5}
.cab em{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9ef0ff;border-left:1px solid rgba(127,188,255,.3);padding-left:14px;white-space:nowrap}
.cab:hover{border-color:#9ef0ff;background:rgba(61,112,195,.14)}
.cab:active{transform:scale(.99)}
.cab.done{border-color:var(--ok)}.cab.done em{color:var(--ok)}

.proofs{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 14px;max-width:640px}
.proofs a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9ef0ff;text-decoration:none;border:1px solid rgba(127,188,255,.35);border-radius:4px;padding:8px 12px;background:rgba(61,112,195,.08);transition:border-color .3s ease,background .3s ease,color .3s ease}
.proofs a:hover{border-color:#9ef0ff;background:rgba(61,112,195,.14);color:#e8f4ff}
.soc{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.soc a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#cfe6ff;text-decoration:none;border:1px solid rgba(127,188,255,.25);padding:8px 12px;border-radius:3px;transition:border-color .3s ease,color .3s ease,background .3s ease}
.soc a:hover{border-color:#9ef0ff;color:#fff;background:rgba(61,112,195,.12)}
.fsoc a{display:inline-block;margin:0 14px 6px 0;color:var(--ink);text-decoration:none}
.fsoc a:hover{color:#fff}
.zm-soc{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.zm-soc a{text-align:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#cfe6ff;text-decoration:none;border:1px solid rgba(158,240,255,.2);padding:10px 4px}
.zm-soc a:hover{border-color:#9ef0ff}
@media (max-width:600px){.cab code{font-size:13px}.cab{padding:12px}}

/* the menu: the wallet first, and it looks like a wallet, not like an action */
.zm-wallet{display:flex;align-items:center;gap:14px;width:100%;margin:4px 0 18px;padding:15px 16px;background:linear-gradient(90deg,rgba(158,240,255,.12),rgba(61,112,195,.04));border:1px solid #9ef0ff;border-radius:999px;color:var(--hi);font:inherit;text-align:left;cursor:pointer;transition:background .3s ease,transform .15s ease}
.zm-wallet i{width:9px;height:9px;border-radius:50%;background:#5d6c8f;box-shadow:0 0 0 4px rgba(93,108,143,.18);flex:none;transition:background .4s ease,box-shadow .4s ease}
.zm-wallet span{flex:1;display:grid}
.zm-wallet b{font-size:14px;font-weight:600;letter-spacing:.08em}
.zm-wallet small{font-size:11px;color:var(--grey)}
.zm-wallet em{font-style:normal;color:#9ef0ff;font-size:16px}
.zm-wallet:hover{background:linear-gradient(90deg,rgba(158,240,255,.2),rgba(61,112,195,.08))}
.zm-wallet:active{transform:scale(.98)}
.zconn .zm-wallet i{background:var(--ok);box-shadow:0 0 0 4px rgba(120,255,190,.15),0 0 12px var(--ok)}
.zconn .zm-wallet small::after{content:' · connected'}

/* the console: a window that scrolls, not a page that grows */
.console{max-height:360px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#1f3a6e transparent}
.console::-webkit-scrollbar{width:6px}.console::-webkit-scrollbar-thumb{background:#1f3a6e;border-radius:3px}
.console .old{opacity:1}
@media (max-width:980px){.console{max-height:260px;min-height:160px}}

/* envelopes: on the phone, a window of two that scrolls */
.fwrap{position:relative}
.fhint{display:none}
@media (max-width:980px){
  .fwrap .feed{overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;min-height:0;scrollbar-width:thin;scrollbar-color:#1f3a6e transparent;transition:max-height .5s ease}
  .fwrap .feed .row{scroll-snap-align:start}
  .fwrap.many .feed{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 46px),transparent)}
  .fwrap.many .fhint{display:flex;align-items:center;gap:12px;justify-content:center;padding:12px 0 2px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
  .fhint i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2,#2a4a7a),transparent)}
  .fhint span::before{content:'↕';display:inline-block;margin-right:8px;color:#9ef0ff;animation:fnud 1.8s ease-in-out infinite}
  .fwrap.end .fhint span::before{content:'↑'}
}
@keyframes fnud{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
.feed .row.new{animation:rnew 2.4s ease both}
@keyframes rnew{0%{background:rgba(158,240,255,.22);transform:translateY(-8px);opacity:0}25%{opacity:1;transform:none}100%{background:transparent}}

/* contracts: four, the print, four */
.tax{grid-template-columns:1fr 1fr}
.cx{margin-top:28px;border:1px solid var(--line);padding:26px 26px 30px;background:linear-gradient(180deg,rgba(10,14,39,.55),rgba(5,5,16,.2))}
.cxh{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.cxh span{font-size:11px;color:var(--grey);letter-spacing:.06em}
.cxg{display:grid;grid-template-columns:1fr 300px 1fr;gap:28px;align-items:center}
.cxl{display:grid;gap:10px}
.cxw{font-size:12px;color:var(--grey)}
.cxi{position:relative;display:grid;grid-template-columns:30px 1fr;gap:2px 10px;padding:12px 14px;border:1px solid rgba(127,188,255,.16);background:rgba(15,26,58,.35);text-decoration:none;color:var(--txt);opacity:0;transform:translateY(10px);transition:border-color .3s ease,background .3s ease,opacity .7s ease calc(var(--i) * 90ms),transform .7s ease calc(var(--i) * 90ms)}
.cx.on .cxi{opacity:1;transform:none}
.cxi:hover{border-color:#9ef0ff;background:rgba(61,112,195,.14)}
.cxn{grid-row:1/4;font-size:11px;color:var(--ink);padding-top:2px}
.cxi b{font-size:13px;color:var(--hi);font-weight:600;letter-spacing:.04em}
.cxi small{font-size:11px;color:var(--grey)}
.cxi code{font-size:11px;color:var(--ink);overflow-wrap:anywhere;margin-top:4px}
.cxi::after{content:'↗';position:absolute;right:12px;top:11px;font-size:12px;color:#9ef0ff;opacity:0;transition:opacity .3s ease}
.cxi:hover::after{opacity:1}
.cxr .cxi{text-align:left}
.cxm{text-align:center}
#cxp{width:100%;max-width:260px;height:auto;display:block;margin:0 auto}
#cxp .rg{fill:none;stroke:#3d70c3;stroke-width:1.15;stroke-linecap:round;opacity:.55}
#cxp .rh{fill:none;stroke:#bfe0ff;stroke-width:1.3;stroke-linecap:round}

.cxq{font-family:Disp;font-weight:500;font-size:22px;color:var(--hi);margin-top:14px}
.cxq span{color:var(--ink);font-weight:300}
.cxs{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:8px}
@media (max-width:980px){
  .tax{grid-template-columns:1fr}
  .cx{padding:20px 16px 22px}
  .cxg{grid-template-columns:1fr;gap:14px}
  .cxm{order:-1}#cxp{max-width:170px}.cxq{font-size:19px}
}

/* the hero device: its two buttons invite a tap */
#herodev .btns .hgo{position:relative;overflow:hidden}
#herodev .btns .glow{border-color:#9ef0ff;color:#fff;animation:hglow 2.8s ease-in-out infinite}
#herodev .btns .glow::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(190,235,255,.35),transparent);transform:skewX(-18deg);animation:hsheen 3.6s ease-in-out infinite}
#herodev .btns .glow span{position:relative;z-index:1}
@keyframes hglow{0%,100%{box-shadow:0 0 0 0 rgba(158,240,255,0),0 0 10px rgba(127,188,255,.15)}50%{box-shadow:0 0 0 4px rgba(158,240,255,.08),0 0 26px rgba(127,188,255,.45)}}
@keyframes hsheen{0%,55%{left:-60%}85%,100%{left:130%}}

/* the hand device: tabs slide, the window grows softly */
.tabs{position:relative}
.tabs .tind{position:absolute;bottom:-1px;height:2px;background:#9ef0ff;box-shadow:0 0 10px rgba(158,240,255,.7);transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1);left:0;width:0}
.tabs.slid button.on{border-bottom-color:transparent}
.app .device.grow{overflow:hidden;transition:height .42s cubic-bezier(.2,.8,.2,1)}
.pane.on{animation:pin .45s ease both}
@keyframes pin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* a little more life */
.verb{transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease}
.verb:hover{transform:translateY(-4px);box-shadow:0 14px 40px -18px rgba(127,188,255,.45)}
.next div{transition:background .4s ease}
.next div:hover{background:#0b1230}
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:0;bottom:0;left:-70%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);transition:left .7s ease;pointer-events:none}
.btn:hover::after{left:130%}
.sh .n{position:relative;padding-bottom:10px}
.sh .n::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:linear-gradient(90deg,#9ef0ff,transparent);transition:width 1.2s cubic-bezier(.2,.8,.2,1) .2s}
.sh.lit .n::after{width:120px}
.strip p{transition:color .6s ease}
.strip p.bump{color:#9ef0ff}
.step,.split,.note{transition:border-color .5s ease}
.step:hover{border-top-color:#9ef0ff}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.cxi{opacity:1;transform:none}}
#cxp .rg{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,.1,.2,1) calc(var(--d) * 70ms)}
.cx.on #cxp .rg{stroke-dashoffset:0}

/* the console text in the headline blue (#7fbcff), and a cursor while a line is typed */
.console{color:var(--ink)}

.console .typing::after{content:'';display:inline-block;width:7px;height:13px;margin-left:2px;vertical-align:-2px;background:#9ef0ff;animation:cblink .7s steps(1) infinite}
@keyframes cblink{50%{opacity:0}}

/* the supply stays next to the sales tax, same height (the contracts moved out of this grid) */
.tax .split:last-child{grid-column:auto}

/* notes: the courtyard is checking (dots breathe), and the moment it approves (a white line) */
.notes .nt .chk{font-style:normal;color:#9ef0ff}
.notes .nt .chk i{font-style:normal;animation:chk 1.4s ease-in-out infinite}
.notes .nt .chk i:nth-child(2){animation-delay:.2s}.notes .nt .chk i:nth-child(3){animation-delay:.4s}
@keyframes chk{0%,100%{opacity:.2}50%{opacity:1}}
.notes .nt.ok span{color:var(--ok)}
.console .appr{color:#fff;text-shadow:0 0 10px rgba(158,240,255,.55)}

/* the crowd: how many notes an anonymous action hides among */
.crowd{font-size:11px;line-height:1.6;color:var(--grey);margin-top:10px;padding:9px 12px;border-left:2px solid var(--ok);background:rgba(15,26,58,.5)}
.crowd b{color:var(--hi);font-weight:600}
.crowd.small{border-left-color:#ffb86b}
.crowd.small b{color:#ffcf9a}