/* Coin: the coin itself, the supply, three ways in, the loop, the two coin rule, questions.
   Orange leads this page because orange is the coin. */

/* ---------- small tag used next to the second coin ---------- */
.soon{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;border:1px dashed rgba(255,255,255,.42);font:700 .72rem/1 var(--sans);letter-spacing:.02em;color:var(--text-2);white-space:nowrap;vertical-align:middle}
.soon--ink{border-color:rgba(40,22,4,.5);color:#5a3a12}

/* ---------- first screen ---------- */
.chero{position:relative;padding:clamp(12px,3.2vw,60px) 0 clamp(40px,6vw,88px)}
.chero__grid{display:grid;gap:clamp(8px,3vw,44px);justify-items:center;text-align:center}
.chero__grid>*{min-width:0}
.chero__copy{display:grid;justify-items:center}
.chero h1{margin-top:12px;font-size:clamp(2.2rem,9.4vw,4.5rem);line-height:1;letter-spacing:-.022em}
.chero h1 span{display:block}
.chero__l1{color:var(--orange-hi);text-shadow:0 0 46px rgba(255,138,36,.5)}
.chero .lead{margin-top:14px;max-width:35ch}
.chero__act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.chero__act .btn{padding:0 1.05em;font-size:.97rem}
.chero__open{margin-top:16px;max-width:34ch;font-size:1rem;color:var(--text-3)}

/* the coin: a gloss black disc, a thick orange glass rim, an inner ring and the mark.
   --dia is the diameter, --u is one percent of it, so every detail scales with the coin. */
.mint{--dia:clamp(168px,min(58vw,27vh),250px);--u:calc(var(--dia)/100);order:-1;position:relative;width:var(--dia);height:var(--dia);margin:clamp(4px,1.6vw,16px) auto calc(var(--u)*11);perspective:calc(var(--dia)*3.4)}
@supports (height:1svh){.mint{--dia:clamp(168px,min(58vw,27svh),250px)}}
.mint__halo{position:absolute;inset:-40%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,150,54,.56),rgba(255,138,36,.2) 47%,rgba(255,138,36,0) 73%)}
.mint__floor{position:absolute;left:10%;right:10%;top:101.5%;height:9%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,0))}
.mint__floor::after{content:"";position:absolute;inset:-70% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,138,36,.34),rgba(255,138,36,0))}
.mint__float,.mint__tilt,.mint__coin{position:absolute;inset:0;transform-style:preserve-3d}
.mint__tilt{transform:rotateX(var(--px,0deg)) rotateY(var(--py,0deg));transition:transform .7s var(--ease)}
.mint__coin{transform:rotateX(11deg) rotateY(-21deg) rotateZ(-4deg)}

/* thickness: a stack of discs behind the face, each with the milled edge */
.mint__edge{position:absolute;inset:0;border-radius:50%;transform:translateZ(calc(var(--u)*-.56*var(--i)));background:
  linear-gradient(rgba(18,6,0,calc(var(--i)*.036)),rgba(18,6,0,calc(var(--i)*.036))),
  repeating-conic-gradient(rgba(60,22,0,.36) 0 .8deg,rgba(60,22,0,0) .8deg 2.4deg),
  linear-gradient(100deg,#ffd9ae 0%,#ffa64a 16%,#f07a14 44%,#b3560b 72%,#6a2d00 100%)}

/* the face: glass rim with bubbles, a light band around it, and two crisp highlights */
.mint__face{position:absolute;inset:0;border-radius:50%;transform:translateZ(.01px);background:
  radial-gradient(circle at 7.7% 36.2%,rgba(255,255,255,.9) 0,rgba(255,255,255,.9) calc(var(--u)*.5),rgba(255,255,255,0) calc(var(--u)*.9)),
  radial-gradient(circle at 24.7% 12.5%,rgba(255,255,255,.8) 0,rgba(255,255,255,.8) calc(var(--u)*.32),rgba(255,255,255,0) calc(var(--u)*.62)),
  radial-gradient(circle at 43.7% 5%,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) calc(var(--u)*.24),rgba(255,255,255,0) calc(var(--u)*.5)),
  radial-gradient(circle at 62.9% 7.9%,rgba(255,255,255,.85) 0,rgba(255,255,255,.85) calc(var(--u)*.44),rgba(255,255,255,0) calc(var(--u)*.8)),
  radial-gradient(circle at 89.7% 28.9%,rgba(255,244,230,.75) 0,rgba(255,244,230,.75) calc(var(--u)*.3),rgba(255,244,230,0) calc(var(--u)*.6)),
  radial-gradient(circle at 90.5% 68%,rgba(255,244,230,.8) 0,rgba(255,244,230,.8) calc(var(--u)*.5),rgba(255,244,230,0) calc(var(--u)*.9)),
  radial-gradient(circle at 59.4% 94%,rgba(255,244,230,.7) 0,rgba(255,244,230,.7) calc(var(--u)*.28),rgba(255,244,230,0) calc(var(--u)*.56)),
  radial-gradient(circle at 15.3% 78.1%,rgba(255,244,230,.8) 0,rgba(255,244,230,.8) calc(var(--u)*.4),rgba(255,244,230,0) calc(var(--u)*.74)),
  conic-gradient(from -52deg,rgba(255,234,196,.72) 0,rgba(255,214,150,0) 12%,rgba(92,28,0,.46) 30%,rgba(255,198,122,.56) 46%,rgba(255,226,172,.2) 53%,rgba(92,28,0,.42) 70%,rgba(255,214,150,0) 88%,rgba(255,234,196,.72) 100%),
  radial-gradient(closest-side,#170800 78.2%,#ffd2a0 79.5%,#a34603 80.8%,#ec6d06 84%,#ff8a1e 87.4%,#ffc27a 89.6%,#ff9026 91.6%,#ea6a04 94.8%,#b04c04 97.4%,#ffa85c 98.7%,#6a2c00 99.6%,#3a1600 100%)}
.mint__face::before,.mint__face::after{content:"";position:absolute;border-radius:50%;border:solid transparent;pointer-events:none}
.mint__face::before{inset:3.5%;border-width:calc(var(--u)*1.2);border-top-color:rgba(255,255,255,.96);transform:rotate(-40deg);filter:blur(calc(var(--u)*.2))}
.mint__face::after{inset:6.8%;border-width:calc(var(--u)*.75);border-bottom-color:rgba(255,236,214,.72);transform:rotate(-36deg);filter:blur(calc(var(--u)*.2))}

/* the well: the logo's gloss black tile, made round */
.mint__well{position:absolute;inset:10.5%;border-radius:50%;overflow:hidden;clip-path:circle(50%);isolation:isolate;display:grid;place-items:center;
  background:radial-gradient(130% 96% at 50% 0%,#282d28 0,#131613 44%,#060706 100%);
  box-shadow:inset 0 0 0 calc(var(--u)*.7) rgba(12,4,0,.9),inset 0 calc(var(--u)*1.6) calc(var(--u)*1.4) rgba(255,255,255,.2),inset 0 calc(var(--u)*-17) calc(var(--u)*18) calc(var(--u)*-9) rgba(255,138,36,.52),inset 0 0 calc(var(--u)*6) rgba(0,0,0,.9)}
.mint__well::before{content:"";position:absolute;z-index:0;left:-32%;right:-32%;top:-76%;height:124%;border-radius:50%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.17) 100%)}
.mint__ring{position:absolute;z-index:1;inset:6.2%;border-radius:50%;border:calc(var(--u)*.55) solid rgba(255,190,128,.8);box-shadow:0 0 calc(var(--u)*3.2) rgba(255,138,36,.6),inset 0 0 calc(var(--u)*3.2) rgba(255,138,36,.38)}
.mint__well picture{position:relative;z-index:2;width:72%;transform:translateY(-2%)}
.mint__well img{width:100%;height:auto;filter:drop-shadow(0 calc(var(--u)*2.6) calc(var(--u)*3) rgba(0,0,0,.8))}
.mint__sheen{position:absolute;inset:0;border-radius:50%;overflow:hidden;clip-path:circle(50%);pointer-events:none}
.mint__sheen::before{content:"";position:absolute;inset:-10% -45%;background:linear-gradient(112deg,rgba(255,255,255,0) 39%,rgba(255,255,255,.24) 47.5%,rgba(255,255,255,.05) 52%,rgba(255,255,255,0) 59%);transform:translateX(-24%)}

.mint__glint{position:absolute;left:18.4%;top:18.4%;width:calc(var(--u)*15);height:calc(var(--u)*15);margin:calc(var(--u)*-7.5);pointer-events:none;opacity:.85;background:
  radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0) 24%),
  linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 50%,rgba(255,255,255,0)) center/100% calc(var(--u)*.45) no-repeat,
  linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.95) 50%,rgba(255,255,255,0)) center/calc(var(--u)*.45) 100% no-repeat}

/* slow tilt and float, only when motion is allowed */
.anim .mint__float{animation:mint-float 7s ease-in-out infinite}
.anim .mint__coin{animation:mint-tilt 11s ease-in-out infinite alternate}
.anim .mint__floor{animation:mint-floor 7s ease-in-out infinite}
.anim .mint__sheen::before{animation:mint-sheen 11s ease-in-out infinite alternate}
.anim .mint__glint{animation:mint-glint 5.5s ease-in-out infinite}
.anim .mint.is-off .mint__float,.anim .mint.is-off .mint__coin,.anim .mint.is-off .mint__floor,.anim .mint.is-off .mint__sheen::before,.anim .mint.is-off .mint__glint{animation-play-state:paused}
@keyframes mint-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,calc(var(--u)*-4.5),0)}}
@keyframes mint-tilt{0%{transform:rotateX(13deg) rotateY(-25deg) rotateZ(-5deg)}100%{transform:rotateX(5deg) rotateY(24deg) rotateZ(3deg)}}
@keyframes mint-floor{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.88);opacity:.7}}
@keyframes mint-glint{0%,100%{opacity:.2;transform:scale(.55) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(14deg)}}
@keyframes mint-sheen{0%{transform:translateX(-62%)}100%{transform:translateX(62%)}}

@media (min-width:900px){
  .chero__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);align-items:center;justify-items:start;text-align:left}
  .chero__copy{justify-items:start}
  .chero .lead{max-width:38ch}
  .chero__act{justify-content:flex-start;gap:12px}
  .chero__act .btn{min-height:58px;padding:0 1.6em;font-size:1.08rem}
  .mint{--dia:clamp(320px,33vw,440px);order:0;justify-self:center;margin-block:calc(var(--u)*6) calc(var(--u)*13)}
}

/* ---------- pre claim: a gloss black claim ticket with a tear off stub ---------- */
html.anim{scroll-behavior:smooth}
.pass{position:relative;isolation:isolate;display:grid;border-radius:var(--r-xl);background:linear-gradient(180deg,#1b201b,#090b09);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -70px 90px -56px rgba(255,138,36,.42),0 40px 90px -50px #000}
.pass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.035) 34%,rgba(255,255,255,0) 34.3%)}
.pass>*{min-width:0}
.pass__main{padding:clamp(24px,4.6vw,52px) clamp(22px,4.6vw,52px) clamp(24px,4vw,46px)}
.pass__main h2{margin-top:12px;max-width:13ch}
.pass__main .lead{margin-top:14px;max-width:44ch}
.claim__act{margin-top:22px}
.claim__done{display:grid;justify-items:start;gap:14px;margin-top:18px;outline:0}
.claim__ok{display:flex;align-items:flex-start;gap:12px;max-width:30ch;font:800 clamp(1.2rem,3.2vw,1.55rem)/1.25 var(--display)}
.claim__ok b{color:var(--orange-hi);overflow-wrap:anywhere}
.claim__tick{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--orange);color:var(--orange-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 20px rgba(255,138,36,.55)}
.claim__tick .icon{width:18px;height:18px;stroke-width:2.6}
.claim__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;color:var(--text-2)}
.pass__stub{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:24px clamp(22px,4.6vw,40px) 26px;border-top:2px dashed rgba(255,255,255,.24)}
.pass__stub::before,.pass__stub::after{content:"";position:absolute;top:-15px;width:28px;height:28px;border-radius:50%;background:var(--ink-0);box-shadow:inset 0 0 0 1px var(--line-2)}
.pass__stub::before{left:-15px;clip-path:inset(0 0 0 50%)}
.pass__stub::after{right:-15px;clip-path:inset(0 50% 0 0)}
.pcoin{position:relative;display:block;flex:none;width:68px;height:68px;border-radius:50%;background:
  conic-gradient(from -52deg,rgba(255,234,196,.72) 0,rgba(255,214,150,0) 12%,rgba(92,28,0,.46) 30%,rgba(255,198,122,.56) 46%,rgba(255,226,172,.2) 53%,rgba(92,28,0,.42) 70%,rgba(255,214,150,0) 88%,rgba(255,234,196,.72) 100%),
  radial-gradient(closest-side,#170800 74%,#ffd2a0 76%,#a34603 78.4%,#ec6d06 82.6%,#ff8a1e 86.6%,#ffc27a 89.4%,#ff9026 92%,#ea6a04 95%,#b04c04 97.6%,#ffa85c 98.8%,#6a2c00 100%);
  box-shadow:0 12px 24px -10px #000,0 0 28px rgba(255,138,36,.42)}
.pcoin__in{position:absolute;inset:12.5%;display:grid;place-items:center;border-radius:50%;overflow:hidden;clip-path:circle(50%);background:radial-gradient(130% 96% at 50% 0%,#282d28 0,#131613 44%,#060706 100%);box-shadow:inset 0 0 0 1px rgba(12,4,0,.9),inset 0 2px 1px rgba(255,255,255,.2),inset 0 -12px 12px -7px rgba(255,138,36,.52)}
.pcoin picture{width:72%}
.pcoin img{width:100%;height:auto}
.pass__kv{display:grid;gap:7px;min-width:0}
.pass__kv div{display:grid;grid-template-columns:50px minmax(0,1fr);align-items:baseline;gap:10px}
.pass__kv dt{font-size:.84rem;font-weight:700;color:var(--text-3)}
.pass__kv dd{font:800 1.06rem/1.2 var(--display);overflow-wrap:anywhere}
.pass__kv dd.is-blank{font:600 1rem/1.25 var(--sans);color:var(--text-3)}
.pass__stamp{position:absolute;right:16px;top:-16px;display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:7px;border:2px dashed var(--orange);background:#0c0f0c;color:var(--orange-hi);font:800 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transform:rotate(4deg)}
.anim .pass__stamp:not([hidden]){animation:stamp .5s var(--spring)}
@keyframes stamp{from{opacity:0;transform:rotate(-8deg) scale(1.6)}to{opacity:1;transform:rotate(4deg) scale(1)}}
@media (min-width:900px){
  .pass{grid-template-columns:minmax(0,1fr) 350px}
  .pass__stub{grid-template-columns:minmax(0,1fr);align-content:center;gap:20px;padding:36px 38px;border-top:0;border-left:2px dashed rgba(255,255,255,.24)}
  .pass__stub::before{left:-15px;top:-15px;clip-path:inset(50% 0 0 0)}
  .pass__stub::after{left:-15px;right:auto;top:auto;bottom:-15px;clip-path:inset(0 0 50% 0)}
  .pcoin{width:84px;height:84px}
  .pass__stamp{right:22px;top:22px}
}

/* the pre claim sheet */
.sheet__sub{margin-top:6px;max-width:36ch;font-size:1rem;line-height:1.45;color:var(--text-2)}
.sheet .field{margin-bottom:16px}
.sheet .input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,138,36,.2)}
.sheet :focus-visible{outline-color:var(--orange-hi)}
.sheet .field>label.check{font-size:1rem;font-weight:600}
.sheet .check input:checked{background:var(--orange);border-color:var(--orange)}
.sheet .check input::after{border-color:var(--orange-ink)}
.sheet .field.is-bad .check{border-color:var(--danger)}
.opt{margin-left:6px;font-size:.8rem;font-weight:600;color:var(--text-3)}
.claim__fine{margin:2px 0 16px;font-size:.95rem;color:var(--text-3)}
.claim__sent{display:grid;gap:14px;outline:0}
.claim__senttop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.claim__sent .claim__ok{max-width:none}

/* ---------- supply: the founder's numbers ---------- */
.supply__box{padding:clamp(22px,4.6vw,56px)}
.supply__head{display:grid;gap:10px}
.supply__head h2{font-size:clamp(1.5rem,3.4vw,2.1rem)}
.supply__total{margin-top:clamp(20px,3.4vw,34px);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px}
.supply__big{padding-right:.04em;font:900 clamp(2.5rem,13.4vw,7.6rem)/.94 var(--display);letter-spacing:-.035em;color:var(--orange-hi);background:linear-gradient(180deg,#fff1df 4%,#ffb469 40%,#ff8a24 72%,#d96608 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.supply__unit{font:800 clamp(1.15rem,2.7vw,1.7rem)/1.1 var(--display)}
.supply__bar{margin-top:clamp(22px,3.6vw,40px)}
.supply__pct{margin-bottom:10px;color:var(--text-2)}
.supply__pct b{color:var(--orange-hi);font-weight:800}
.supply__meter{height:clamp(26px,3.4vw,36px);background:repeating-linear-gradient(-55deg,rgba(255,255,255,.12) 0 5px,rgba(255,255,255,.035) 5px 11px);box-shadow:inset 0 1px 3px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.1)}
.supply__meter .meter__fill{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -8px 12px -5px rgba(150,60,0,.6);transition:transform 1.7s var(--ease) .2s}
.anim .supply__bar:not(.in) .meter__fill{transform:translate3d(-101%,0,0)}
.supply__split{display:flex;justify-content:space-between;gap:14px;margin-top:16px}
.supply__part{display:flex;flex-direction:column-reverse;gap:6px;min-width:0}
.supply__part--left{align-items:flex-end;text-align:right}
.supply__part dd{display:flex;flex-direction:column;gap:3px;font:800 clamp(1.28rem,6.4vw,2.9rem)/1 var(--display);letter-spacing:-.02em}
.supply__part--mined dd{color:var(--orange-hi)}
.supply__about{font:600 .88rem/1.2 var(--sans);letter-spacing:0;color:var(--text-3)}
.supply__part dt{display:flex;align-items:center;gap:8px;font-size:clamp(.88rem,4.2vw,1.0625rem);font-weight:600;white-space:nowrap;color:var(--text-2)}
.supply__part dt::before{content:"";flex:none;width:11px;height:11px;border-radius:3px;background:linear-gradient(180deg,#ffbd7c,#ff8a24)}
.supply__part--left dt::before{background:repeating-linear-gradient(-55deg,rgba(255,255,255,.4) 0 2px,rgba(255,255,255,.1) 2px 4px);box-shadow:inset 0 0 0 1px var(--line-3)}
.supply__by{margin-top:clamp(18px,3vw,30px);padding-top:16px;border-top:1px solid var(--line);font-size:1rem;color:var(--text-3)}

/* ---------- three ways to get it: wide rows, not a card grid ---------- */
.ways .shead h2{max-width:none}
.ways__list{display:grid;gap:14px}
.way{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 14px;padding:22px 20px;border-radius:var(--r-lg)}
.way h3{font-size:clamp(1.5rem,3.6vw,1.95rem)}
.way p{grid-column:1/-1;max-width:46ch;color:var(--text-2)}
.way>.btn,.way>.link,.way>.pill{grid-column:1/-1;justify-self:start}
.way>.link{display:inline-flex;align-items:center;min-height:44px}
.way>.pill{height:34px;padding:0 14px;font-size:.86rem}
.way--earn{padding-block:26px}
@media (min-width:900px){
  .way{grid-template-columns:auto minmax(0,.8fr) minmax(0,1.25fr) auto;gap:30px;padding:26px 32px}
  .way p,.way>.btn,.way>.link,.way>.pill{grid-column:auto}
  .way>.btn,.way>.link,.way>.pill{justify-self:end}
  .way--earn{padding-block:40px}
}

/* ---------- the loop: the coin runs one lane, the lead runs the other ---------- */
.slip{display:block;flex:none;width:16px;height:12px;border-radius:3.5px;background:linear-gradient(180deg,#c9f7b4,#63d936);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 10px rgba(99,217,54,.6)}
.ring{position:relative;padding:40px 30px}
.ring__line{position:absolute;inset:0;border-radius:36px;border:2px solid transparent;pointer-events:none;background:linear-gradient(90deg,rgba(255,138,36,.85) 0 30%,rgba(99,217,54,.85) 70% 100%) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude}
.lane{position:absolute;top:46px;bottom:46px;width:0;pointer-events:none}
.lane--coin{left:1px;color:var(--orange-hi)}
.lane--lead{right:1px;color:var(--green-hi)}
.lane b{position:absolute;left:-6px;width:12px;height:12px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;border-radius:1px}
.lane--coin b{transform:rotate(45deg)}
.lane--lead b{transform:rotate(-135deg)}
.lane b:nth-of-type(1){top:20%}.lane b:nth-of-type(2){top:50%}.lane b:nth-of-type(3){top:80%}
.lane__run{position:absolute;inset:0;opacity:0}
.lane__run i{position:absolute;left:0;top:0}
.lane__run .coin{font-size:16px;margin:-.575em 0 0 -.575em}
.lane__run .slip{margin:-6px 0 0 -8px}
.anim .lane--coin .lane__run{animation:lane-down 6.4s linear infinite}
.anim .lane--lead .lane__run{animation:lane-up 7.5s linear infinite}
.anim .lane--coin .lane__run:nth-of-type(2){animation-delay:-1.6s}
.anim .lane--coin .lane__run:nth-of-type(3){animation-delay:-3.2s}
.anim .lane--coin .lane__run:nth-of-type(4){animation-delay:-4.8s}
.anim .lane--lead .lane__run:nth-of-type(2){animation-delay:-2.5s}
.anim .lane--lead .lane__run:nth-of-type(3){animation-delay:-5s}
.anim .ring.is-off .lane__run{animation-play-state:paused}
@keyframes lane-down{0%{transform:translate3d(0,0,0);opacity:0}9%{opacity:1}91%{opacity:1}100%{transform:translate3d(0,100%,0);opacity:0}}
@keyframes lane-up{0%{transform:translate3d(0,100%,0);opacity:0}9%{opacity:1}91%{opacity:1}100%{transform:translate3d(0,0,0);opacity:0}}
@keyframes lane-right{0%{transform:translate3d(0,0,0);opacity:0}7%{opacity:1}93%{opacity:1}100%{transform:translate3d(100%,0,0);opacity:0}}
@keyframes lane-left{0%{transform:translate3d(100%,0,0);opacity:0}7%{opacity:1}93%{opacity:1}100%{transform:translate3d(0,0,0);opacity:0}}
.ring__tag{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 9px;border-radius:999px;background:var(--ink-1);font-size:.84rem;font-weight:800;white-space:nowrap}
.ring__tag .coin{font-size:.95rem}
.ring__tag--coin{top:-14px;left:26px;color:var(--orange-pale);box-shadow:inset 0 0 0 1.5px rgba(255,138,36,.75)}
.ring__tag--lead{bottom:-14px;right:26px;color:var(--green-pale);box-shadow:inset 0 0 0 1.5px rgba(99,217,54,.75)}
.ring__nodes{position:relative;z-index:1;display:grid;gap:24px}
.node{position:relative;padding:20px 20px 22px;border-radius:var(--r-lg);background:linear-gradient(180deg,#191d19,#0b0d0b);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 60px -40px #000}
.node__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.node__n{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--orange);color:var(--orange-ink);font:800 1.1rem/1 var(--display);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 18px rgba(255,138,36,.45)}
.node h3{margin-top:14px}
.node p{margin-top:6px;color:var(--text-2)}
.node+.node::before{content:"";position:absolute;left:50%;top:-19px;width:11px;height:11px;margin-left:-6px;border-right:3px solid var(--orange-hi);border-bottom:3px solid var(--orange-hi);border-radius:1px;transform:rotate(45deg)}
.node--mid{border-color:rgba(99,217,54,.4)}
.node--pay{border-color:rgba(255,138,36,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -50px 60px -44px rgba(255,138,36,.4),0 30px 60px -40px #000}
.flow__key{display:grid;gap:12px;margin-top:30px}
.flow__key li{display:flex;align-items:flex-start;gap:12px;color:var(--text-2)}
.flow__key .coin{font-size:1rem;margin-top:.28em}
.flow__key .slip{margin-top:.42em}
@media (min-width:900px){
  .ring{padding:48px 46px}
  .ring__line{border-radius:48px;background:linear-gradient(180deg,rgba(99,217,54,.85) 0 30%,rgba(255,138,36,.85) 70% 100%) border-box}
  .lane{top:auto;bottom:auto;left:70px;right:70px;width:auto;height:0}
  .lane--coin{bottom:1px}
  .lane--lead{top:1px}
  .lane b{top:-6px;left:auto}
  .lane--coin b{transform:rotate(-45deg)}
  .lane--lead b{transform:rotate(135deg)}
  .lane b:nth-of-type(1){top:-6px;left:26%}.lane b:nth-of-type(2){top:-6px;left:50%}.lane b:nth-of-type(3){top:-6px;left:74%}
  .anim .lane--coin .lane__run{animation-name:lane-right;animation-duration:7.2s}
  .anim .lane--lead .lane__run{animation-name:lane-left;animation-duration:8.4s}
  .anim .lane--coin .lane__run:nth-of-type(2){animation-delay:-1.8s}
  .anim .lane--coin .lane__run:nth-of-type(3){animation-delay:-3.6s}
  .anim .lane--coin .lane__run:nth-of-type(4){animation-delay:-5.4s}
  .anim .lane--lead .lane__run:nth-of-type(2){animation-delay:-2.8s}
  .anim .lane--lead .lane__run:nth-of-type(3){animation-delay:-5.6s}
  .ring__tag--coin{top:auto;bottom:-14px;left:88px}
  .ring__tag--lead{bottom:auto;top:-14px;right:88px}
  .ring__nodes{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
  .node{padding:24px 24px 28px}
  .node+.node::before{left:-24px;top:50%;margin:-6px 0 0;transform:rotate(-45deg)}
  .flow__key{grid-template-columns:1fr 1fr;gap:36px}
}

/* ---------- the two coin rule, on the bright band ---------- */
.rule__grid{display:grid;gap:clamp(36px,6vw,72px);align-items:center}
.rule__grid>*{min-width:0}
.rule h2{margin-top:14px;font-size:clamp(2.7rem,11.6vw,5.6rem);line-height:.94;letter-spacing:-.03em}
.rule h2 span{display:block}
.rule__say{margin-top:18px;max-width:34ch;font-size:var(--fs-lead);font-weight:600}
.rule__coins{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.rule__coins li{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:54px;padding:10px 18px 10px 12px;border-radius:28px;background:#0b0d0b;color:#fff;font:800 1.14rem/1.1 var(--display);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 32px -18px rgba(60,22,0,.95)}
.rule__coins .coin{font-size:1.55rem}
.rule__blank{flex:none;width:1.78rem;height:1.78rem;border-radius:50%;border:2px dashed rgba(255,255,255,.6);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.5),rgba(255,255,255,.07) 62%)}
.rule__coins li+li{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1.5px rgba(255,255,255,.16),0 18px 32px -18px rgba(60,22,0,.95)}

/* a page of the agreement */
.doc{position:relative;justify-self:center;width:min(100%,470px);margin:0}
.doc::before{content:"";position:absolute;inset:0;border-radius:12px;background:#f3e3cf;transform:rotate(-3.4deg) translate(-7px,8px);box-shadow:0 26px 50px -26px rgba(70,26,0,.75)}
.doc__sheet{position:relative;padding:22px 24px 30px;border-radius:12px;background:#fffdf9;color:#17120b;transform:rotate(1.5deg);box-shadow:0 34px 60px -28px rgba(70,26,0,.9)}
.doc__top{display:flex;justify-content:flex-end}
.doc__tag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:7px;border:2px dashed #c25a06;color:#a24a04;font:800 .74rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;transform:rotate(2.5deg)}
.doc h3{margin-top:16px;font-size:clamp(1.2rem,3.4vw,1.42rem);line-height:1.15}
.doc__clause{margin-top:10px;font-size:1.13rem;line-height:1.6;font-weight:500}
.doc__clause mark{padding:0 3px;border-radius:3px;background:linear-gradient(180deg,rgba(255,207,154,0) 52%,#ffcf9a 52%);color:inherit;font-weight:800}
.doc__clause .soon{margin:0 1px 0 2px;transform:translateY(-1px)}
.doc__greek{display:grid;gap:10px;margin-top:18px}
.doc__greek i{height:9px;border-radius:9px;background:#ebe3d8}
.doc__greek i:nth-child(1){width:94%}.doc__greek i:nth-child(2){width:71%}.doc__greek i:nth-child(3){width:83%}
.doc__top+.doc__greek{margin-top:6px}
.doc__top+.doc__greek i:nth-child(1){width:58%}.doc__top+.doc__greek i:nth-child(2){width:86%}
@media (min-width:900px){
  .rule__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .doc__sheet{padding:28px 32px 36px}
}

/* ---------- questions ---------- */
.faq__grid{display:grid;gap:clamp(20px,4vw,60px)}
.faq__grid>*{min-width:0}
.faq__head .lead{margin-top:12px}
.q{border-top:1px solid var(--line-2)}
.q:last-child{border-bottom:1px solid var(--line-2)}
.q summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px;padding:14px 2px;cursor:pointer;list-style:none;border-radius:10px}
.q summary::-webkit-details-marker{display:none}
.q summary::marker{content:""}
.q summary h3{font-size:clamp(1.16rem,2.7vw,1.42rem)}
.q summary:hover h3{color:var(--orange-hi)}
.q__ic{position:relative;flex:none;width:38px;height:38px;border-radius:50%;background:rgba(255,138,36,.14);box-shadow:inset 0 0 0 1px rgba(255,138,36,.42);transition:transform var(--t-2) var(--ease),background var(--t-1)}
.q__ic::before,.q__ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;margin:-1.25px 0 0 -7px;border-radius:2px;background:var(--orange-hi)}
.q__ic::after{transform:rotate(90deg)}
.q[open] .q__ic{transform:rotate(45deg);background:rgba(255,138,36,.26)}
.q__a{padding:0 2px 24px;max-width:62ch;color:var(--text-2)}
.q__a .soon{margin:0 2px}
.anim .q[open] .q__a{animation:rise var(--t-2) var(--ease)}
.q :focus-visible{outline-color:var(--orange-hi)}
@media (min-width:900px){
  .faq__grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.4fr);align-items:start}
  .faq__head{position:sticky;top:calc(var(--top) + 30px)}
}

/* ---------- the quiet note at the end ---------- */
.fine{padding:0 0 clamp(6px,2vw,22px)}
.fine p{max-width:66ch;padding:16px 18px;border-radius:var(--r-md);border:1px dashed var(--line-2);font-size:1rem;color:var(--text-3)}