/* H26 Referral hero — the in-app "Refer a Shop" screen. 24s loop: copy code → a shop signs up (Pending) → pays for a plan (Converted, credit lands) → second shop → second credit. Needs hero-graphics.css shell. */
.rcg .h26{--t:24s}
.rcg .h26 .panel{display:flex;flex-direction:column}
.rcg .h26 .ic{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rcg .h26 .seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border-radius:8px;background:var(--g-hi,#f3f4f6);height:30px;margin-bottom:12px;flex:none}
.rcg .h26 .seg span{display:flex;align-items:center;justify-content:center;gap:6px;font-size:9.5px;font-weight:600;color:var(--g-mute,#6b7280);border-radius:6px;white-space:nowrap}
.rcg .h26 .seg span.on{background:var(--g-bg,#fff);color:var(--g-ink,#111318);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.rcg .h26 .ttl{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;letter-spacing:-.01em;height:16px;margin-bottom:4px;flex:none}.rcg .h26 .ttl .ic{width:13px;height:13px;color:var(--blue)}
.rcg .h26 .intro{font-size:9.5px;line-height:12px;color:var(--g-mute,#6b7280);height:24px;overflow:hidden;margin-bottom:10px;max-width:520px;flex:none}.rcg .h26 .intro b{color:var(--g-ink,#111318);font-weight:700}
.rcg .h26 .cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;flex:none}
.rcg .h26 .cd{height:54px;border:1px solid var(--g-line,#e6e8ed);border-radius:8px;padding:10px 12px;background:var(--g-bg,#fff);position:relative}
.rcg .h26 .cd .lab{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g-mute,#6b7280);height:10px;line-height:10px;margin-bottom:6px}
.rcg .h26 .cd .val{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px}
.rcg .h26 .cd .code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:14px;font-weight:700;letter-spacing:.12em}
.rcg .h26 .cd .url{font-size:9.5px;font-weight:500;color:var(--g-ink2,#3a3f4b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rcg .h26 .cpb{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;color:var(--g-mute,#6b7280);position:relative;flex:none}.rcg .h26 .cpb .ic{grid-area:1/1}
.rcg .h26 .cpb .ic.cp{animation:rfCpA var(--t) step-end infinite}.rcg .h26 .cpb .ic.ok{opacity:0;color:var(--grn);stroke-width:2.6;animation:rfCpB var(--t) step-end infinite}
.rcg .h26 .cpb.pz::after{content:"";position:absolute;inset:-3px;border-radius:7px;border:1.5px solid var(--blue);opacity:0;animation:rfPulse var(--t) ease-out infinite}
.rcg .h26 .tip{position:absolute;right:-2px;top:-22px;background:#0c0d10;color:#fff;font-size:8.5px;font-weight:600;padding:3px 7px;border-radius:5px;opacity:0;animation:rfTip var(--t) ease-out infinite;white-space:nowrap;z-index:5}
@keyframes rfCpA{0%,10%{opacity:1}10.01%,24%{opacity:0}24.01%,100%{opacity:1}}@keyframes rfCpB{0%,10%{opacity:0}10.01%,24%{opacity:1}24.01%,100%{opacity:0}}
@keyframes rfPulse{0%,9.5%{opacity:0;transform:scale(1)}11%{opacity:1}17%,100%{opacity:0;transform:scale(1.35)}}
@keyframes rfTip{0%,10%{opacity:0;transform:translateY(3px)}11.5%,20%{opacity:1;transform:none}22%,100%{opacity:0;transform:none}}
/* stat chips */
.rcg .h26 .stats{display:flex;gap:8px;margin-bottom:12px;flex:none}.rcg .h26 .stat{gap:5px;padding:0 10px;position:relative}.rcg .h26 .stat .ic{color:var(--blue)}.rcg .h26 .stat .ic.g{color:var(--grn)}.rcg .h26 .stat .ic.m{color:var(--g-mute2,#9aa0ab)}.rcg .h26 .stat .sw{min-width:8px}
.rcg .h26 .plus{position:absolute;right:10px;top:4px;font-size:10px;font-weight:700;color:var(--grn);opacity:0;z-index:4}.rcg .h26 .plus.p1{animation:rfPl1 var(--t) ease-out infinite}.rcg .h26 .plus.p2{animation:rfPl2 var(--t) ease-out infinite}
@keyframes rfPl1{0%,40%{opacity:0;transform:translateY(0)}42%{opacity:1;transform:translateY(-6px)}50%{opacity:1;transform:translateY(-14px)}54%,100%{opacity:0;transform:translateY(-18px)}}
@keyframes rfPl2{0%,76%{opacity:0;transform:translateY(0)}78%{opacity:1;transform:translateY(-6px)}86%{opacity:1;transform:translateY(-14px)}90%,100%{opacity:0;transform:translateY(-18px)}}
/* history */
.rcg .h26 .hh{font-size:11.5px;font-weight:700;height:14px;line-height:14px;margin-bottom:8px;flex:none}
.rcg .h26 .hist{flex:1;min-height:0;position:relative;border:1px solid var(--g-line,#e6e8ed);border-radius:10px;background:var(--g-soft,#f8f9fb);overflow:hidden}
.rcg .h26 .emp{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;color:var(--g-mute,#6b7280);animation:rfEmp var(--t) ease-out infinite;padding:0 20px}
.rcg .h26 .emp .ic{width:28px;height:28px;color:var(--g-mute3,#d1d5db);stroke-width:1.5;margin-bottom:6px}.rcg .h26 .emp b{font-size:11px;font-weight:700;color:var(--g-ink,#111318)}.rcg .h26 .emp span{font-size:9px;max-width:260px;line-height:1.4}
@keyframes rfEmp{0%,22%{opacity:1}24.5%,100%{opacity:0}}
.rcg .h26 .tbl{position:absolute;inset:0;padding:4px 12px 0;opacity:0;animation:rfInB var(--t) ease-out infinite}
.rcg .h26 .tbl .hd,.rcg .h26 .tbl .row{grid-template-columns:1.6fr .7fr .9fr 1fr .6fr}.rcg .h26 .tbl .hd{padding:6px 10px}
.rcg .h26 .row .d{font-size:9.5px;color:var(--g-mute,#6b7280);white-space:nowrap}.rcg .h26 .row .pl{font-size:9.5px;font-weight:600;color:var(--g-ink2,#3a3f4b);white-space:nowrap}.rcg .h26 .row .cr{font-size:10px;font-weight:700;text-align:right;white-space:nowrap}
.rcg .h26 .row .sw{width:100%}.rcg .h26 .row .cr .sw{justify-items:end}
.rcg .h26 .chip.st{border-radius:4px}
.rcg .h26 .row::after{content:"";position:absolute;inset:0 -4px;border-radius:6px;background:var(--g-gtint,#f0fdf4);opacity:0;pointer-events:none}.rcg .h26 .row>*{position:relative;z-index:1}
.rcg .h26 .row.r1{opacity:0;animation:rfInB var(--t) ease-out infinite}.rcg .h26 .row.r1::after{animation:rfFl1 var(--t) ease-out infinite}
.rcg .h26 .row.r2{opacity:0;animation:rfInD var(--t) ease-out infinite}.rcg .h26 .row.r2::after{animation:rfFl2 var(--t) ease-out infinite}
@keyframes rfFl1{0%,40%{opacity:0}42%{opacity:1}54%,100%{opacity:0}}@keyframes rfFl2{0%,76%{opacity:0}78%{opacity:1}90%,100%{opacity:0}}
/* state swaps — A copy 10% · B row1 pending 22% · C row1 converted 40% · D row2 pending 58% · E row2 converted 76% */
.rcg .h26 .sw>span{opacity:0}
.rcg .h26 .v0B{animation:rf0B var(--t) step-end infinite}.rcg .h26 .v0C{animation:rf0C var(--t) step-end infinite}.rcg .h26 .vBC{animation:rfBC var(--t) step-end infinite}.rcg .h26 .vBD{animation:rfBD var(--t) step-end infinite}.rcg .h26 .vCE{animation:rfCE var(--t) step-end infinite}.rcg .h26 .vDE{animation:rfDE var(--t) step-end infinite}
.rcg .h26 .vB{animation:rfInB var(--t) ease-out infinite}.rcg .h26 .vC{animation:rfInC var(--t) ease-out infinite}.rcg .h26 .vD{animation:rfInD var(--t) ease-out infinite}.rcg .h26 .vE{animation:rfInE var(--t) ease-out infinite}
.rcg .h26 .vP0{animation:rfP0 var(--t) step-end infinite}.rcg .h26 .vP1{animation:rfP1 var(--t) step-end infinite}
@keyframes rf0B{0%,22%{opacity:1}22.01%,100%{opacity:0}}@keyframes rf0C{0%,40%{opacity:1}40.01%,100%{opacity:0}}
@keyframes rfBC{0%,22%{opacity:0}22.01%,40%{opacity:1}40.01%,100%{opacity:0}}@keyframes rfBD{0%,22%{opacity:0}22.01%,58%{opacity:1}58.01%,100%{opacity:0}}
@keyframes rfCE{0%,40%{opacity:0}40.01%,76%{opacity:1}76.01%,100%{opacity:0}}@keyframes rfDE{0%,58%{opacity:0}58.01%,76%{opacity:1}76.01%,100%{opacity:0}}
@keyframes rfP0{0%,22%{opacity:1}22.01%,40%{opacity:0}40.01%,58%{opacity:1}58.01%,76%{opacity:0}76.01%,100%{opacity:1}}@keyframes rfP1{0%,22%{opacity:0}22.01%,40%{opacity:1}40.01%,58%{opacity:0}58.01%,76%{opacity:1}76.01%,100%{opacity:0}}
@keyframes rfInB{0%,22%{opacity:0;transform:translateY(5px)}24.5%,100%{opacity:1;transform:none}}
@keyframes rfInC{0%,40%{opacity:0;transform:translateY(5px)}42.5%,100%{opacity:1;transform:none}}
@keyframes rfInD{0%,58%{opacity:0;transform:translateY(5px)}60.5%,100%{opacity:1;transform:none}}
@keyframes rfInE{0%,76%{opacity:0;transform:translateY(5px)}78.5%,100%{opacity:1;transform:none}}
/* toasts + cursor */
.rcg .h26 .toast{right:22px;bottom:50px}
.rcg .h26 .toast.t1{animation:rfT1 var(--t) ease-out infinite}.rcg .h26 .toast.t2{animation:rfT2 var(--t) ease-out infinite}
@keyframes rfT1{0%,40%{opacity:0;transform:translateY(10px)}42.5%,54%{opacity:1;transform:none}57%,100%{opacity:0;transform:translateY(4px)}}
@keyframes rfT2{0%,76%{opacity:0;transform:translateY(10px)}78.5%,90%{opacity:1;transform:none}93%,100%{opacity:0;transform:translateY(4px)}}
.rcg .h26 .cur{animation:rfCur var(--t) cubic-bezier(.3,.7,.3,1) infinite}
@keyframes rfCur{0%,3%{opacity:0;left:440px;top:280px}8%{opacity:1;left:369px;top:148px}10%{left:369px;top:148px}10.6%{left:367px;top:146px}12%{left:369px;top:148px}17%{opacity:0;left:390px;top:180px}100%{opacity:0;left:390px;top:180px}}
/* mobile composition 400×560 */
.rcg .h26.mob .panel{padding:18px 16px}.rcg .h26.mob .seg{margin-bottom:10px}.rcg .h26.mob .intro{height:36px;max-width:none}
.rcg .h26.mob .cards{grid-template-columns:1fr;gap:8px}.rcg .h26.mob .stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}.rcg .h26.mob .stat{justify-content:flex-start}
.rcg .h26.mob .tbl .hd,.rcg .h26.mob .tbl .row{grid-template-columns:1.6fr 1fr .6fr}.rcg .h26.mob .tbl .d,.rcg .h26.mob .tbl .pl{display:none}
.rcg .h26.mob .toast{left:16px;right:16px;bottom:60px;max-width:none}.rcg .h26.mob .toast .tt{white-space:normal}
.rcg .h26.mob .cur{animation-name:rfCurM}
@keyframes rfCurM{0%,3%{opacity:0;left:200px;top:330px}8%{opacity:1;left:358px;top:158px}10%{left:358px;top:158px}10.6%{left:356px;top:156px}12%{left:358px;top:158px}17%{opacity:0;left:340px;top:200px}100%{opacity:0;left:340px;top:200px}}
/* reduced motion → final state */
@media (prefers-reduced-motion:reduce){.rcg .h26 *,.rcg .h26 *::before,.rcg .h26 *::after{animation:none!important}.rcg .h26 .cur,.rcg .h26 .plus,.rcg .h26 .tip,.rcg .h26 .toast,.rcg .h26 .emp{display:none}.rcg .h26 .sw>span{opacity:0!important}.rcg .h26 .sw>span.fin{opacity:1!important;transform:none}.rcg .h26 .tbl,.rcg .h26 .row.r1,.rcg .h26 .row.r2{opacity:1;transform:none}.rcg .h26 .cpb .ic.ok{opacity:0}.rcg .h26 .cpb .ic.cp{opacity:1}}