/* Lead engine. Send a lead, watch it move, get paid.
   Green is go. Orange is the coin. The four request needs stay white on purpose: nobody is paid there. */

/* ---------- first screen: the words, one button, and the three states on a glass tube ---------- */
.lhero{position:relative;padding:clamp(26px,4.4vw,60px) 0 clamp(30px,5vw,60px)}
.lhero__grid{display:grid;gap:18px}
.lhero__grid>*{min-width:0}
.lhero h1{margin-top:14px;max-width:16ch}
.lhero__pay{display:block}
.lhero .lead{max-width:46ch}
.lhero__act{display:grid;justify-items:center;gap:2px;margin-top:20px}
.lhero__act .btn{width:100%}
.lhero__alt{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:1rem;border-radius:10px}

.flow{--orb:46px;--rail:10px;margin:8px 0 0;padding:14px 12px 18px;border-radius:var(--r-lg)}
.flow__cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px;font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3)}
.flow__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
.flow__s{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;padding:0 4px;text-align:center}
.flow__s>b{margin-top:9px;font:800 1.1rem/1.1 var(--display);letter-spacing:-.01em}
.flow__s>span:last-child{max-width:15ch;font-size:.84rem;line-height:1.32;color:var(--text-2)}
.flow__orb{position:relative;z-index:2;display:grid;place-items:center;width:var(--orb);height:var(--orb);border-radius:50%}
.flow__orb .icon{width:46%;height:46%;stroke-width:2.2}
.flow__orb--w{color:#0b0e0b;background:radial-gradient(circle at 34% 26%,#fff 0,#eaf0e6 32%,#b3bdae 68%,#69745f 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 0 22px rgba(255,255,255,.28)}
.flow__orb--g{color:var(--green-ink);background:radial-gradient(circle at 34% 26%,#e6ffd9 0,#8cf060 34%,#49b922 68%,#1d6a0e 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34),0 0 24px rgba(99,217,54,.55)}
.flow__orb--o{color:var(--orange-ink);background:radial-gradient(circle at 34% 26%,#ffe3c2 0,#ffa64a 34%,#ee7411 68%,#9c4705 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34),0 0 24px rgba(255,138,36,.6)}
.flow__orb::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:rgba(9,11,9,.6);opacity:0}
/* the tube between two orbs, the liquid that fills it, and the drop that leads the liquid */
.flow__s+.flow__s::before,.flow__liq,.flow__run{position:absolute;top:calc(var(--orb)/2 - var(--rail)/2);left:calc(-50% + var(--orb)/2 + 5px);width:calc(100% - var(--orb) - 10px);height:var(--rail);border-radius:var(--rail)}
.flow__s+.flow__s::before{content:"";background:#060806;box-shadow:inset 0 1px 2px #000,0 0 0 1px var(--line-2)}
.flow__liq{z-index:1;transform-origin:0 50%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 58%),linear-gradient(90deg,#f3f7f0,var(--green))}
.flow__s:last-child .flow__liq{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 58%),linear-gradient(90deg,var(--green),var(--orange))}
.flow__run{z-index:1;opacity:0}
.flow__run em{position:absolute;left:calc(var(--rail)*-.8);top:50%;width:calc(var(--rail)*1.6);height:calc(var(--rail)*1.6);margin-top:calc(var(--rail)*-.8);border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff,#bdf5a5 46%,#63d936);box-shadow:0 0 14px rgba(140,240,96,.9)}
.flow__s:last-child .flow__run em{background:radial-gradient(circle at 34% 28%,#fff,#ffd6ab 46%,#ff8a24);box-shadow:0 0 14px rgba(255,169,79,.9)}

/* the loop only runs while the tile is on screen. Without motion every state simply stays lit. */
.anim .flow.is-live .flow__s:nth-child(2) .flow__liq{animation:fl-fill-a 7.2s cubic-bezier(.45,0,.25,1) infinite}
.anim .flow.is-live .flow__s:nth-child(3) .flow__liq{animation:fl-fill-b 7.2s cubic-bezier(.45,0,.25,1) infinite}
.anim .flow.is-live .flow__s:nth-child(2) .flow__run{animation:fl-run-a 7.2s cubic-bezier(.45,0,.25,1) infinite}
.anim .flow.is-live .flow__s:nth-child(3) .flow__run{animation:fl-run-b 7.2s cubic-bezier(.45,0,.25,1) infinite}
.anim .flow.is-live .flow__s:nth-child(1) .flow__orb{animation:fl-pop-a 7.2s var(--ease) infinite}
.anim .flow.is-live .flow__s:nth-child(2) .flow__orb{animation:fl-pop-b 7.2s var(--ease) infinite}
.anim .flow.is-live .flow__s:nth-child(3) .flow__orb{animation:fl-pop-c 7.2s var(--ease) infinite}
.anim .flow.is-live .flow__s:nth-child(2) .flow__orb::after{animation:fl-veil-b 7.2s linear infinite}
.anim .flow.is-live .flow__s:nth-child(3) .flow__orb::after{animation:fl-veil-c 7.2s linear infinite}
@keyframes fl-fill-a{0%,8%{transform:scaleX(0);opacity:1}34%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes fl-fill-b{0%,44%{transform:scaleX(0);opacity:1}70%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes fl-run-a{0%,8%{transform:translateX(0);opacity:0}10%{opacity:1}34%{transform:translateX(100%);opacity:1}37%,100%{transform:translateX(100%);opacity:0}}
@keyframes fl-run-b{0%,44%{transform:translateX(0);opacity:0}46%{opacity:1}70%{transform:translateX(100%);opacity:1}73%,100%{transform:translateX(100%);opacity:0}}
@keyframes fl-pop-a{0%,100%{transform:none}4%{transform:scale(1.14)}9%{transform:none}}
@keyframes fl-pop-b{0%,33%,100%{transform:none}37%{transform:scale(1.16)}42%{transform:none}}
@keyframes fl-pop-c{0%,69%{transform:none}74%{transform:scale(1.2) rotateY(180deg)}80%,100%{transform:rotateY(360deg)}}
@keyframes fl-veil-b{0%,33%{opacity:1}36%,94%{opacity:0}100%{opacity:1}}
@keyframes fl-veil-c{0%,69%{opacity:1}72%,94%{opacity:0}100%{opacity:1}}

@media (min-width:560px){
  .lhero__act{display:flex;flex-wrap:wrap;align-items:center;justify-items:start;gap:8px 18px}
  .lhero__act .btn{width:auto}
  .flow{--orb:56px;--rail:12px;padding:18px 20px 22px}
  .flow__s>b{font-size:1.25rem}
  .flow__s>span:last-child{font-size:.94rem;max-width:22ch}
}
@media (min-width:980px){
  .lhero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:60px;row-gap:30px;align-items:center}
  .lhero__head{grid-column:1/-1}
  .lhero h1{max-width:none;font-size:clamp(3rem,5.3vw,4.3rem)}
  .lhero__side{display:contents}
  .lhero__act{margin-top:0;justify-content:flex-end}
  .flow{grid-column:1/-1;--orb:74px;--rail:14px;margin:0;padding:22px 34px 32px;border-radius:var(--r-xl)}
  .flow__track{margin-top:20px}
  .flow__s>b{margin-top:14px;font-size:1.6rem}
  .flow__s>span:last-child{font-size:1.02rem;max-width:none}
}

/* ---------- pick what the customer needs ---------- */
.cats__group+.cats__group{margin-top:clamp(34px,5vw,52px)}
.cats__g{display:flex;align-items:center;gap:10px;font-size:1.34rem}
.cats__g .coin{font-size:1.05rem}
.cats__hint{margin:6px 0 16px;color:var(--text-2);max-width:54ch}
.cats__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cats__grid>li{display:flex;min-width:0}
.cat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;padding:16px 14px;border-radius:var(--r-lg);text-align:left;transition:transform var(--t-2) var(--ease),border-color var(--t-2)}
.cat:hover{transform:translateY(-4px);border-color:var(--line-3)}
.cat:active{transform:translateY(0) scale(.985)}
.cat__ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:14px;background:rgba(99,217,54,.14);box-shadow:inset 0 0 0 1px rgba(99,217,54,.4);color:var(--green-hi)}
.cat__ic .icon{width:24px;height:24px}
.cat__l{font:800 1.14rem/1.12 var(--display);letter-spacing:-.01em}
.cat__x{flex:1;font-size:.88rem;line-height:1.36;color:var(--text-2)}
.cat__pay{display:flex;flex-wrap:wrap;align-items:center;gap:6px 7px;margin-top:10px}
.cat__earn{display:inline-flex;align-items:center;gap:7px;font:800 1.24rem/1 var(--display);color:var(--orange-hi);white-space:nowrap}
.cat__earn .coin{font-size:.92rem}
.cat__unit{font-size:.84rem;font-weight:600;color:var(--orange-pale);white-space:nowrap}
.cat__pay .sample{position:absolute;top:18px;right:14px}
@media (max-width:359.98px){.cat__pay .sample{top:12px;right:10px;height:18px;padding:0 5px;font-size:.56rem;letter-spacing:.08em}}
/* the four request needs: white, never orange */
.cat--ask{background:linear-gradient(180deg,#fff,#e4eadf);border:1px solid #fff;color:#0b0e0b;box-shadow:inset 0 1px 0 #fff,0 30px 60px -34px #000}
.cat--ask:hover{border-color:#fff}
.cat--ask .cat__ic{background:#0b0e0b;box-shadow:none;color:#fff}
.cat--ask .cat__x{color:#38423a}
.cat__free{margin-top:10px;font-size:.87rem;font-weight:700;line-height:1.3}
@media (min-width:700px){
  .cats__grid{gap:16px}
  .cats__grid--refer{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cat{padding:22px 20px}
  .cat__pay .sample{position:static}
  .cat__l{font-size:1.3rem}
  .cat__x{font-size:.95rem}
}
@media (min-width:960px){.cats__grid--ask{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- your leads and your earnings, side by side on wide screens ---------- */
.dash__grid{display:grid;gap:clamp(40px,6vw,56px)}
.dash__grid>*{min-width:0}
.mine h2{margin-top:12px}
.mine h2:focus{outline:none}
.mine__sub{margin-top:10px;color:var(--text-2);max-width:48ch}
.lrows{display:grid;gap:12px;margin-top:20px}
.lrow{position:relative;padding:16px 16px 15px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 60px -44px #000}
.lrow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 0 0 1.5px rgba(255,169,79,.9),0 0 46px -4px rgba(255,138,36,.75);transition:opacity .5s var(--ease)}
.lrow.is-pop::after{opacity:1}
.lrow__top{display:flex;align-items:flex-start;gap:12px}
.lrow__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(99,217,54,.14);box-shadow:inset 0 0 0 1px rgba(99,217,54,.38);color:var(--green-hi)}
.lrow__main{flex:1;min-width:0}
.lrow__need{font:800 1.12rem/1.2 var(--display);letter-spacing:-.005em;overflow-wrap:anywhere}
.lrow__who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:4px;font-size:.96rem;font-weight:600}
.lrow__meta{display:flex;flex-wrap:wrap;margin-top:2px;font-size:.89rem;color:var(--text-2)}
.lrow__meta>span:not(:last-child)::after{content:"";display:inline-block;width:3px;height:3px;margin:0 8px;border-radius:50%;background:var(--text-3);vertical-align:middle}
.lrow__pay{flex:none;display:grid;justify-items:end;gap:5px;text-align:right}
.lrow__amt{display:inline-flex;align-items:center;gap:6px;font:800 1.3rem/1 var(--display);color:var(--text-2)}
.lrow__amt .coin{font-size:.9rem;opacity:.5}
.lrow__state{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.lrow[data-st="3"] .lrow__amt{color:var(--orange-hi)}
.lrow[data-st="3"] .lrow__amt .coin{opacity:1}
.lrow[data-st="3"] .lrow__state{color:var(--orange-pale)}
.anim .lrow.is-pop .lrow__amt .coin{animation:coinflip .9s var(--ease)}
@keyframes coinflip{from{transform:rotateY(0) scale(.8)}60%{transform:rotateY(540deg) scale(1.3)}to{transform:rotateY(720deg) scale(1)}}

/* four steps: Sent, Checked, Matched, Paid */
.trk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
.trk li{position:relative;display:grid;justify-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--text-3);text-align:center}
.trk i{position:relative;z-index:1;display:block;width:20px;height:20px;border-radius:50%;background:#1a1f1a;box-shadow:inset 0 0 0 2px var(--line-3)}
.trk i::before{content:"";position:absolute;left:6px;top:6px;width:8px;height:5px;border-left:2.5px solid var(--green-ink);border-bottom:2.5px solid var(--green-ink);transform:rotate(-45deg) scale(0);transition:transform var(--t-2) var(--spring)}
.trk i::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 2px rgba(140,240,96,.55);opacity:0}
.trk li+li::before,.trk li+li::after{content:"";position:absolute;top:8px;left:calc(-50% + 13px);width:calc(100% - 26px);height:4px;border-radius:4px}
.trk li+li::before{background:rgba(255,255,255,.12)}
.trk li+li::after{background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.trk li.is-on{color:var(--text)}
.trk li.is-on::after{transform:scaleX(1)}
.trk li.is-on i{background:var(--green);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45),0 0 14px rgba(99,217,54,.6)}
.trk li.is-on i::before{transform:rotate(-45deg) scale(1)}
.trk li.is-now{color:var(--green-pale)}
.trk li.is-now i::before{transform:rotate(-45deg) scale(0)}
.anim .trk li.is-now i::after{animation:ping 1.25s var(--ease) infinite}
.trk li.is-pay.is-on{color:var(--orange-pale)}
.trk li.is-pay.is-on::after{background:linear-gradient(90deg,var(--green),var(--orange))}
.trk li.is-pay.is-on i{background:radial-gradient(circle at 34% 28%,#ffe3c2 0,#ffa64a 34%,#ee7411 68%,#9c4705 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),0 0 14px rgba(255,138,36,.7)}
.trk li.is-pay.is-on i::before{border-color:var(--orange-ink)}
@keyframes ping{from{opacity:.9;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}}

.lrows__empty{padding:22px 18px;border-radius:22px;border:1px dashed var(--line-3);color:var(--text-2)}
.lrows__empty strong{display:block;font:800 1.2rem/1.2 var(--display);color:var(--text)}
.lrows__empty .btn{margin-top:14px}

/* your requests: neutral on purpose, with their own three steps and no payout */
.reqs{margin-top:30px}
.reqs__h{font-size:1.3rem}
.rrows{display:grid;gap:12px;margin-top:14px}
.rrow{padding:16px;border-radius:22px;background:rgba(255,255,255,.035);border:1px solid var(--line-2)}
.rrow__top{display:flex;align-items:flex-start;gap:12px}
.rrow__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px var(--line-3);color:#fff}
.rrow__main{flex:1;min-width:0}
.rrow__need{font:800 1.12rem/1.2 var(--display)}
.rrow__what{margin-top:4px;font-size:.92rem;color:var(--text-2);overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.rrow__city{margin-top:4px;font-size:.86rem;color:var(--text-3)}
.rrow__free{flex:none}
.rtrk{display:grid;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rtrk li{position:relative;display:flex;align-items:center;gap:10px;font-size:.93rem;font-weight:500;color:var(--text-3)}
.rtrk i{position:relative;flex:none;display:block;width:20px;height:20px;border-radius:50%;background:#1a1f1a;box-shadow:inset 0 0 0 2px var(--line-3)}
.rtrk i::before{content:"";position:absolute;left:6px;top:6px;width:8px;height:5px;border-left:2.5px solid #0b0e0b;border-bottom:2.5px solid #0b0e0b;transform:rotate(-45deg) scale(0);transition:transform var(--t-2) var(--spring)}
.rtrk i::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.5);opacity:0}
.rtrk li.is-on{color:var(--text);font-weight:600}
.rtrk li.is-on i{background:#fff;box-shadow:0 0 12px rgba(255,255,255,.35)}
.rtrk li.is-on i::before{transform:rotate(-45deg) scale(1)}
.anim .rtrk li.is-now i::after{animation:ping 1.25s var(--ease) infinite}
.rrows__empty{padding:16px 18px;border-radius:18px;border:1px dashed var(--line-3);color:var(--text-2);font-size:.97rem}
.rrows__empty .link{display:inline-flex;align-items:center;min-height:44px;margin-top:2px}

.mine__reset{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.mine__reset p{flex:1;min-width:200px;font-size:.88rem;color:var(--text-3)}

/* earnings */
.earn{padding:22px 20px 20px;border-radius:var(--r-lg)}
.earn__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.earn__head h2{font-size:clamp(1.7rem,4vw,2.1rem)}
.earn__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.earn__stats>div{padding:14px 14px 13px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.earn__stats>.earn__main{grid-column:1/-1;background:linear-gradient(180deg,rgba(255,138,36,.22),rgba(255,138,36,.07));border-color:rgba(255,138,36,.42)}
.earn__stats dt{font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-2)}
.earn__stats dd{margin-top:7px;font:800 1.9rem/1 var(--display);letter-spacing:-.02em}
.earn__main dd{display:flex;align-items:center;gap:11px;font-size:clamp(2.7rem,11vw,3.5rem);color:var(--orange-hi)}
.earn__main .coin{font-size:.6em}
.earn__unit{margin-top:11px;font-size:.88rem;color:var(--text-3)}

.bars{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.bars__cap{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700}
.bars__plot{--h:124px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:34px}
.bars__col{position:relative;display:grid;justify-items:center;align-content:start;gap:8px}
.bars__slot{position:relative;display:block;width:100%;max-width:46px;height:var(--h);border-radius:10px 10px 4px 4px;overflow:hidden;background:rgba(255,255,255,.05)}
.bars__fill{position:absolute;inset:0;border-radius:10px 10px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.16));box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(calc((1 - var(--v,0))*100%));transition:transform .8s var(--ease)}
.bars__fill--way{background:repeating-linear-gradient(135deg,rgba(255,169,79,.6) 0 5px,rgba(255,169,79,.18) 5px 10px);box-shadow:none}
.bars__fill--paid{background:linear-gradient(180deg,#ffc98f,#ff8a24);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transform:translateY(calc((1 - var(--p,0))*100%))}
.bars__v{position:absolute;left:-4px;right:-4px;top:-21px;text-align:center;font:800 .88rem/1 var(--display);color:var(--text-2);transform:translateY(calc((1 - var(--v,0))*var(--h)));transition:transform .8s var(--ease)}
.bars__col.is-now .bars__v{color:var(--orange-hi)}
.bars__w{min-height:2.3em;font-size:.74rem;font-weight:600;line-height:1.15;color:var(--text-2);text-align:center}
.bars__col.is-now .bars__w{color:#fff;font-weight:700}
.anim .bars:not(.in) .bars__fill{transform:translateY(100%)}
.anim .bars:not(.in) .bars__v{transform:translateY(var(--h))}
.bars__note{margin-top:8px;font-size:.88rem;line-height:1.45;color:var(--text-3)}
.earn__go{display:inline-flex;align-items:center;min-height:44px;margin-top:10px}

@media (min-width:980px){
  .dash__grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.88fr);gap:48px;align-items:start}
  .earn{position:sticky;top:calc(var(--top) + 20px);padding:28px 28px 24px;border-radius:var(--r-xl)}
  .lrow{padding:20px 22px 18px}
  .rrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:22px;align-items:center;padding:20px 22px}
  .rtrk{margin-top:0;padding:0 0 0 22px;border-top:0;border-left:1px solid var(--line)}
}

/* ---------- the rules, on a bright band ---------- */
.rules__in{display:grid;gap:26px}
.rules h2{margin-top:12px;max-width:11ch;font-size:clamp(2.5rem,9.4vw,4.6rem);line-height:.98}
.rules__list{display:grid}
.rules__list>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;padding:20px 0;border-top:2px solid rgba(5,20,2,.9)}
.rules__list>li:last-child{border-bottom:2px solid rgba(5,20,2,.9)}
.rules__y{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green-ink);color:var(--green-hi)}
.rules__y .icon{width:24px;height:24px;stroke-width:2.6}
.rules__list h3{align-self:center;font-size:1.42rem}
.rules__list p{grid-column:2;max-width:50ch;font-size:1.03rem;line-height:1.5}
@media (min-width:900px){
  .rules__in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:start}
  .rules__head{position:sticky;top:calc(var(--top) + 30px)}
  .rules__list>li{padding:26px 0;gap:6px 22px}
  .rules__y{width:52px;height:52px}
  .rules__list h3{font-size:1.7rem}
  .rules__list p{font-size:1.1rem}
}

/* ---------- the door to the business side ---------- */
.tobiz__a{display:flex;align-items:center;gap:16px;padding:20px 18px;border-radius:var(--r-lg);text-decoration:none;transition:transform var(--t-2) var(--ease),border-color var(--t-2)}
.tobiz__a:hover{transform:translateY(-4px);border-color:var(--line-3)}
.tobiz__ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(99,217,54,.14);box-shadow:inset 0 0 0 1px rgba(99,217,54,.4);color:var(--green-hi)}
.tobiz__ic .icon{width:26px;height:26px}
.tobiz__t{flex:1;min-width:0}
.tobiz__t h2{font-size:clamp(1.4rem,4.4vw,2.1rem)}
.tobiz__t p{margin-top:4px;color:var(--text-2)}
.tobiz__go{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--green);color:var(--green-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 26px -10px rgba(99,217,54,.9);transition:transform var(--t-1) var(--spring)}
.tobiz__go .icon{stroke-width:2.4}
.tobiz__a:hover .tobiz__go{transform:translateX(4px)}
@media (min-width:760px){.tobiz__a{padding:30px 34px;gap:24px;border-radius:var(--r-xl)}}

/* ---------- the two flows, in sheets ---------- */
.flowd .sheet__head{margin-bottom:14px}
.flowd .sheet__head h2:focus{outline:none}
.flowd__k{margin-bottom:8px;font:700 .76rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--green-hi)}
.flowd--ask .flowd__k{color:var(--text-2)}
.progrow{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.prog{flex:1;display:flex;gap:6px}
.prog li{position:relative;flex:1;height:6px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.13)}
.prog li::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.prog li.is-on::after{transform:scaleX(1)}
.progrow__t{flex:none;font-size:.86rem;font-weight:700;color:var(--text-2)}
.stp{display:grid;gap:15px;min-width:0;margin:0;padding:0;border:0}
.anim .stp:not([hidden]){animation:stp-in .34s var(--ease)}
.anim .stp.from-back:not([hidden]){animation-name:stp-back}
@keyframes stp-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes stp-back{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.field--check>.check{font-size:.98rem;font-weight:500;line-height:1.45}
.field--check.is-bad>.check{border-color:var(--danger)}
.check:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(99,217,54,.18)}
.check input:focus-visible{outline:none}
.flowd__pays{color:var(--orange-pale)!important;font-weight:600}
.flowd__quiet{font-size:.9rem;line-height:1.5;color:var(--text-3)}
.flowd__quiet .link{display:flex;align-items:center;min-height:44px;font-size:.95rem}
.sum{padding:2px 16px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid var(--line)}
.sum>div{padding:11px 0}
.sum dd{min-width:0;overflow-wrap:anywhere}
.sum__pay{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(255,138,36,.2),rgba(255,138,36,.07));border:1px solid rgba(255,138,36,.42);font-size:.98rem;line-height:1.4}
.sum__pay .coin{font-size:1.5rem}
.sum__pay>span:nth-child(2){flex:1;min-width:0}
.sum__pay strong{color:var(--orange-hi)}
.flowd__nav{display:flex;gap:10px;margin-top:20px}
.flowd__nav .btn{flex:1}
.flowd__nav [data-back]{flex:0 0 auto}
.flowd__fine{margin-top:12px;font-size:.85rem;color:var(--text-3);text-align:center}
.flowd--ask .stp{gap:13px}
.flowd--ask .textarea{min-height:84px}
.flowd--ask .note{padding:13px 16px}
.flowd__two{display:grid;gap:13px;align-items:start}
.flowd__two>*{min-width:0}
@media (min-width:360px){.flowd__two{grid-template-columns:1fr 1fr;gap:12px}.flowd__two .input,.flowd__two .select{padding-left:13px}.flowd__two .select{padding-right:34px;background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%}}