/* $RIPS PACK CHECKER v2 LOOK (rb/pack-checker, 23 Oct 2026): Mitch's demo (docs/pack-checker/reference-mitch/).
   A campaign page, so the dark navy theme of his demo, not the site's cream pop-ups. Kept from the brand: Titan One,
   Barlow Semi Condensed (the site's UI face), the lowercase logo, pink #FA2E86 and ink #0E1116.
   Layers: navy ground + starburst rays + dot grid (.pc-bg), centred theatrical content, navy panels with a thick cream
   outline, pink caps headings with an ink drop, pink pill buttons with glow, gold $RIPS numbers, mint success. */
@font-face{font-family:'Titan One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/titan-one-v17-latin.woff2) format('woff2')}
:root{
  --ink:#0E1116; --pink:#FA2E86; --pink-hi:#FF5FA2; --pink-deep:#C20F5E;
  --navy:#0B1030; --navy-2:#121A48; --navy-3:#1B2560; --line:#2E3A7A; --cream:#F1EADB;
  --text:#F4F6FF; --muted:#A9B4DA; --dim:#8390C2;
  --gold-1:#FFF1B0; --gold-2:#FFD447; --gold-3:#F2A900; --mint:#6EE7A8; --mint-2:#3FCB86; --sky:#8FD8FF; --blue:#3DA5F5;
  --display:'Titan One',system-ui,sans-serif; --ui:'Barlow Semi Condensed',system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-panel:26px; --edge:3px solid var(--cream);
  --sh-panel:0 0 0 1px rgba(0,0,0,.4),0 24px 60px -18px rgba(0,0,0,.75);
}
*{box-sizing:border-box}
html{background:var(--navy);color-scheme:dark}
html.pc-locked{overflow:hidden}
body.pc{margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden;color:var(--text);font:600 16px/1.45 var(--ui);-webkit-font-smoothing:antialiased}
:where(.pc) button,:where(.pc) input{font:inherit;color:inherit}
:where(.pc) button{cursor:pointer}
:where(.pc) a{color:inherit}
:where(.pc) img{display:block;max-width:100%;height:auto}
.pc svg{flex:0 0 auto}
.pc .num{font-variant-numeric:tabular-nums}
.pc :focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.pc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc-skip{position:absolute;left:12px;top:-60px;z-index:60;padding:10px 16px;background:#fff;color:var(--ink);border-radius:12px;font:700 15px/1 var(--ui)}
.pc-skip:focus{top:12px}

/* the background: navy, rays from the centre, a dot grid, a dark vignette */
/* the background: the LIVE site's plate (bg-plate-v3 / bg-plate-mobile-v3, the rays + halftone), recoloured offline to
   Mitch's dark navy (bg-dark*.webp: its own luminance mapped onto navy, so the rays and dots are the live ones) */
.pc-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#0B1030}
/* the plate is an <img> (one fetch), faded in once decoded; app.js holds the first screen until it is (max 2.5 s) */
.pc-bg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .35s ease}
.pc-bg__img.is-in{opacity:1}
.pc-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(110,130,255,.16) 0,transparent 40%),radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(3,5,18,.72) 100%)}

.pc-mock{position:fixed;right:14px;top:12px;z-index:30;height:28px;display:inline-flex;align-items:center;padding:0 12px;border:2px dashed rgba(241,234,219,.6);border-radius:999px;background:rgba(11,16,48,.7);
  font:700 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.pc-mock[hidden]{display:none}

.pc-main{max-width:1180px;margin:0 auto;padding:22px 24px 64px;outline:none}
.pc-screen{animation:pcin .32s ease-out both}
@keyframes pcin{from{opacity:0;transform:translateY(10px)}}

/* the head: the logo (landing, wallets) or the profile chip + the five step dots */
.pc-head{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0 22px}
.pc-logo{display:block;border-radius:12px}
.pc-logo img{height:86px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.pc-prof{display:inline-flex;align-items:center;gap:12px}
.pc-prof__av{width:56px;height:56px;border-radius:14px;border:3px solid var(--cream);object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.pc-prof__t{display:flex;flex-direction:column;line-height:1}
.pc-prof__t span{font:400 13px/1 var(--display);text-transform:uppercase;color:#fff;letter-spacing:.02em}
.pc-prof__t b{margin-top:4px;font:400 30px/1 var(--display);text-transform:uppercase;color:transparent;background:linear-gradient(180deg,#E4F7FF,#8FD8FF 55%,#3DA5F5);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 0 0 #fff) drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 3px 0 var(--ink))}
.pc-dots{display:flex;gap:7px;margin:0;padding:0;list-style:none}
.pc-dots li{width:8px;height:8px;border-radius:50%;background:rgba(169,180,218,.35)}
.pc-dots li.is-done{background:var(--mint)}
.pc-dots li.is-now{width:22px;border-radius:5px;background:var(--pink);box-shadow:0 0 10px rgba(250,46,134,.7)}

/* type */
.pc-title{margin:0;font:400 54px/1.02 var(--display);text-transform:uppercase;color:#fff;text-align:center;text-shadow:0 4px 0 var(--ink),0 0 24px rgba(0,0,0,.35);text-wrap:balance}
.pc-title--xl{font-size:60px}
.pc-lead{max-width:56ch;margin:12px auto 0;font:600 19px/1.45 var(--ui);color:#DCE3FF;text-align:center}
.pc-goldtxt{color:var(--gold-2);font-weight:800}
.pc-ptitle{margin:6px 0 0;font:400 34px/1.05 var(--display);text-transform:uppercase;color:var(--pink-hi);text-align:center;text-shadow:0 3px 0 var(--ink);text-wrap:balance}
.pc-plead{margin:8px auto 0;max-width:46ch;font:600 16px/1.45 var(--ui);color:#DCE3FF;text-align:center}
.pc-h2{margin:0 0 14px;font:400 24px/1.1 var(--display);text-transform:uppercase;color:#fff;text-shadow:0 3px 0 var(--ink)}
.pc-h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px;font:400 16px/1.1 var(--display);text-transform:uppercase;color:var(--sky)}
.pc-h3 span{font:700 13px/1 var(--ui);letter-spacing:.06em;color:var(--muted)}
.pc-k{display:block;font:400 12px/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--sky)}
.pc-fine{margin:12px 0 0;font:600 14px/1.45 var(--ui);color:var(--muted);text-align:center}
.pc-addr{font:600 14px/1.2 var(--mono);color:#E6EBFF;white-space:nowrap}
.pc-center{display:flex;flex-direction:column;align-items:center;text-align:center}

/* the gold number (Mitch's "48,600 $RIPS") */
.pc-gold{display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pc-gold b{font:400 64px/1 var(--display);color:transparent;background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 45%,var(--gold-3) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 0 18px rgba(255,212,71,.25));padding:.04em 0}
.pc-gold i{font:400 30px/1 var(--display);font-style:normal;color:#F7F1E1;text-shadow:0 3px 0 var(--ink)}
.pc-gold--xl b{font-size:96px}

/* buttons: pink pill with glow (main), gold, mint, ghost, quiet */
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 28px;border:3px solid rgba(255,255,255,.22);border-radius:999px;
  font:400 18px/1 var(--display);letter-spacing:.01em;text-decoration:none;white-space:nowrap;touch-action:manipulation;transition:transform .15s ease,filter .15s ease,box-shadow .2s ease}
.pc-btn svg{width:18px;height:18px}
.pc-btn:hover{filter:brightness(1.07)}
.pc-btn:active{transform:translateY(1px) scale(.98)}
.pc-btn--pink{background:linear-gradient(180deg,#FF7AB5 0%,#FA2E86 52%,#D8126A 100%);color:#fff;text-shadow:0 2px 0 rgba(120,0,50,.45);box-shadow:0 0 0 2px rgba(255,170,205,.35) inset,0 0 26px rgba(250,46,134,.55),0 10px 22px -8px rgba(0,0,0,.6)}
.pc-btn--gold{background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));color:var(--ink);border-color:rgba(255,255,255,.4);box-shadow:0 0 18px rgba(255,212,71,.35),0 8px 18px -8px rgba(0,0,0,.6)}
.pc-btn--mint{background:linear-gradient(180deg,#A8F5CB,var(--mint) 55%,var(--mint-2));color:var(--ink);border-color:rgba(255,255,255,.4);box-shadow:0 0 26px rgba(110,231,168,.5),0 10px 22px -8px rgba(0,0,0,.6)}
.pc-btn--ghost{background:rgba(11,16,48,.6);color:#fff;border-color:rgba(241,234,219,.55)}
.pc-btn--quiet{background:rgba(46,58,122,.45);color:var(--muted);border-color:rgba(131,144,194,.35);cursor:default;white-space:normal;text-align:center;line-height:1.1}
.pc-btn--quiet:hover{filter:none}
.pc-btn--sm{min-height:44px;padding:0 18px;font-size:15px}
.pc-btn--lg{min-height:58px;padding:0 34px;font-size:20px}
.pc-btn--xl{min-height:64px;padding:0 44px;font-size:22px}
.pc-btn--block{width:100%}
.pc-btn[disabled]{opacity:.42;filter:grayscale(.5);box-shadow:none;cursor:not-allowed}
.pc-textbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;font:700 15px/1.2 var(--ui);color:var(--sky);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pc-textbtn svg{width:16px;height:16px}
.pc-textbtn--c{align-self:center;margin:4px auto 0;display:flex}
.pc-spin{animation:pcspin .8s linear infinite}
@keyframes pcspin{to{transform:rotate(360deg)}}
.pc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px}

/* panels: navy with a thick cream outline */
.pc-panel{position:relative;background:linear-gradient(180deg,var(--navy-3) 0%,var(--navy-2) 60%,#0E1540 100%);border:var(--edge);border-radius:var(--r-panel);box-shadow:var(--sh-panel)}
.pc-modal{max-width:640px;margin:0 auto;padding:30px 30px 26px;display:flex;flex-direction:column;align-items:stretch}
.pc-ictile{display:grid;place-items:center;align-self:center;width:72px;height:72px;border-radius:18px;border:3px solid var(--cream);background:#10163F;box-shadow:0 8px 18px rgba(0,0,0,.45);color:#fff}
.pc-ictile svg{width:34px;height:34px}
.pc-ictile .pc-ictile__coin{width:56px;height:56px}
.pc-ictile--mono{background:var(--cream);color:var(--ink);font:400 22px/1 var(--display)}
.pc-pfoot{margin:16px 0 0;font:600 14px/1.5 var(--ui);color:var(--muted);text-align:center}
.pc-pfoot b{color:#fff}
.pc-badge{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;border:2.5px solid var(--cream);background:linear-gradient(180deg,#FF7AB5,#FA2E86);color:#fff;font:400 16px/1 var(--display);box-shadow:0 4px 0 var(--ink)}
.pc-pinkchip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;background:var(--pink);color:#fff;font:400 12px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;font-style:normal;box-shadow:0 0 12px rgba(250,46,134,.45)}
.pc-mintchip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:7px;background:var(--mint);color:var(--ink);font:400 12px/1 var(--display);text-transform:uppercase}
.pc-mintchip svg{width:13px;height:13px}
.pc-lockchip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:7px;border:1.5px solid rgba(169,180,218,.45);background:rgba(46,58,122,.6);font:400 11px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pc-lockchip svg{width:12px;height:12px}
.pc-lockchip--gold{border:0;background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--ink);align-self:flex-start}

/* chain chip and platform tile */
.pc-chain{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:44px;height:26px;padding:0 8px;border-radius:7px;background:#0A0F2E;border:1.5px solid rgba(143,216,255,.45);font:400 12px/1 var(--display);letter-spacing:.04em;color:var(--sky)}
.pc-chain--none{color:var(--muted);border-color:rgba(169,180,218,.4)}
.pc-mono{display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:2.5px solid var(--cream);background:var(--pc-c);font:400 15px/1 var(--display);color:var(--ink)}
.pc-mono--xs{width:24px;height:24px;border-width:2px;border-radius:7px;font-size:9px}
.pc-mono--wallet{background:#2A3480;color:#fff}
.pc-mono--wallet svg{width:22px;height:22px}

/* ---- 1 landing ---- */
.pc-land{display:flex;flex-direction:column;align-items:center;text-align:center}
.pc-hero{position:relative;width:300px;margin:4px 0 10px}
.pc-hero::before{content:"";position:absolute;inset:8% -12%;border-radius:50%;background:radial-gradient(closest-side,rgba(250,46,134,.45),rgba(250,46,134,0));filter:blur(18px);animation:pcglow 3.2s ease-in-out infinite}
.pc-hero__pack{position:relative;width:100%;height:auto;animation:pcfloat 3.6s ease-in-out infinite;filter:drop-shadow(0 26px 30px rgba(0,0,0,.6))}
@keyframes pcfloat{50%{transform:translateY(-14px) rotate(-1.2deg)}}
@keyframes pcglow{50%{opacity:.55;transform:scale(1.05)}}
.pc-land__lead{max-width:42ch;margin:6px 0 22px;font:600 19px/1.45 var(--ui);color:#DCE3FF}

/* ---- 2 wallets ---- */
.pc-wal{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center;max-width:1020px;margin:0 auto}
.pc-wal__art{display:flex;justify-content:center}
.pc-wal__pack{width:min(100%,330px);height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.6));animation:pcfloat 3.6s ease-in-out infinite}
.pc-wal__form{min-width:0}
.pc-wal__form .pc-prof{margin-bottom:16px}
.pc-wal__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pc-wal__h h1{margin:0;font:400 24px/1.15 var(--display);color:#fff;text-shadow:0 3px 0 var(--ink)}
.pc-count{font:400 15px/1 var(--display);color:var(--muted);white-space:nowrap}
.pc-wal__sub{margin:6px 0 14px;font:600 15px/1.45 var(--ui);color:var(--muted)}
.pc-ins{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pc-in__row{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 8px 0 14px;border:2px solid rgba(241,234,219,.75);border-radius:14px;background:rgba(10,15,46,.85)}
.pc-in__row:focus-within{border-color:var(--sky);box-shadow:0 0 0 3px rgba(143,216,255,.25)}
.pc-in__n{font:400 13px/1 var(--display);color:var(--dim);flex:0 0 auto}
.pc .pc-in__f{flex:1 1 auto;min-width:0;height:50px;padding:0;border:0;background:none;outline:none;font:600 16px/1 var(--mono);color:#fff;text-overflow:ellipsis}
.pc-in__f::placeholder{color:#7381B8;font-family:var(--ui)}
.pc-in.is-err .pc-in__row{border-color:#FF6B81}
.pc-in__e{margin:6px 0 0 6px;font:700 14px/1.3 var(--ui);color:#FF9AAB}
.pc-in__x{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border:0;border-radius:10px;background:rgba(169,180,218,.12);color:var(--muted)}
.pc-in__x svg{width:16px;height:16px}
.pc-in__x:hover{color:#fff;background:rgba(169,180,218,.22)}
.pc-round{display:grid;place-items:center;width:44px;height:44px;margin:12px 0 0;border-radius:50%;border:2px solid rgba(241,234,219,.75);background:rgba(10,15,46,.85);color:#fff}
.pc-round svg{width:18px;height:18px}
.pc-wal__go{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:18px}
.pc-demo summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font:700 15px/1 var(--ui);color:var(--sky);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;list-style:none}
.pc-demo summary::-webkit-details-marker{display:none}
.pc-demo__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pc-chipbtn{min-height:40px;padding:0 14px;border:2px solid rgba(241,234,219,.6);border-radius:999px;background:rgba(10,15,46,.85);font:400 14px/1 var(--display);color:#fff}
.pc-chipbtn:hover{border-color:var(--pink);color:var(--pink-hi)}
.pc-safe{display:flex;align-items:flex-start;gap:8px;margin:18px 0 0;font:600 14px/1.4 var(--ui);color:var(--muted)}
.pc-safe svg{width:18px;height:18px;color:var(--mint);margin-top:1px}

/* ---- 3 analysing: coin, then the pack + tier pill, then the slab flip ---- */
.pc-stage{position:relative;display:flex;flex-direction:column;align-items:center;min-height:700px;padding-top:40px}
.pc-stage__coin,.pc-stage__pack,.pc-stage__slab{position:absolute;left:50%;top:40px;transform:translateX(-50%);transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.2,.4,1)}
.pc-stage__coin{top:120px;width:150px;perspective:600px}
.pc-coin{width:150px;height:150px;animation:pccoin 1.4s linear infinite;filter:drop-shadow(0 0 22px rgba(250,46,134,.45))}
@keyframes pccoin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
.pc-stage__line{position:absolute;top:310px;left:0;right:0;margin:0;font:400 40px/1.05 var(--display);text-transform:uppercase;color:#fff;text-align:center;text-shadow:0 4px 0 var(--ink)}
.pc-stage__pack{width:250px;opacity:0;pointer-events:none}
.pc-stage__packsvg{width:100%;height:auto;filter:drop-shadow(0 0 30px rgba(250,46,134,.45)) drop-shadow(0 22px 26px rgba(0,0,0,.6))}
.pc-stage__slab{width:300px;opacity:0;pointer-events:none}
.pc-stage__reveal{position:absolute;top:560px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0}
.pc-stage__lbl{font:400 18px/1 var(--display);text-transform:uppercase;color:#fff;letter-spacing:.03em;text-shadow:0 3px 0 var(--ink)}
.pc-stage[data-phase="assess"] .pc-coin{animation-duration:.7s}
.pc-stage[data-phase="reveal"] .pc-stage__coin,.pc-stage[data-phase="flip"] .pc-stage__coin,
.pc-stage[data-phase="reveal"] .pc-stage__line,.pc-stage[data-phase="flip"] .pc-stage__line{opacity:0}
.pc-stage[data-phase="reveal"] .pc-stage__pack{opacity:1;animation:pcshake .5s ease-in-out 2,pcpackin .45s cubic-bezier(.2,1.3,.4,1) both}
.pc-stage[data-phase="reveal"] .pc-stage__reveal{opacity:1}
.pc-stage[data-phase="reveal"] .pc-tierpill{animation:pcpop .6s .7s cubic-bezier(.2,1.6,.4,1) both}
.pc-stage[data-phase="reveal"] .pc-stage__lbl{animation:pcfade .4s .55s both}
.pc-stage[data-phase="flip"] .pc-stage__pack{opacity:0;transform:translateX(-50%) scale(.85)}
.pc-stage[data-phase="flip"] .pc-stage__slab{opacity:1}
.pc-stage[data-phase="flip"] .pc-stage__reveal{opacity:0}
@keyframes pcshake{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(-4deg) translateY(-6px)}75%{transform:translateX(-50%) rotate(4deg) translateY(-6px)}}
@keyframes pcpackin{from{opacity:0;transform:translateX(-50%) scale(.6)}}
@keyframes pcpop{from{opacity:0;transform:scale(.4)}}
@keyframes pcfade{from{opacity:0;transform:translateY(6px)}}

/* the tier pill (Mitch's huge gold LEGENDARY) */
.pc-tierpill{display:inline-flex;align-items:center;justify-content:center;min-width:300px;height:76px;padding:0 40px;border:4px solid var(--ink);border-radius:16px;
  background:linear-gradient(180deg,#FFF0A8 0%,var(--pc-t,#FFD447) 50%,color-mix(in srgb,var(--pc-t,#FFD447) 70%,#9A6A00) 100%);
  box-shadow:0 0 0 4px var(--cream),0 0 40px rgba(255,212,71,.35),0 14px 24px -8px rgba(0,0,0,.6);font:400 48px/1 var(--display);text-transform:uppercase;color:var(--ink);letter-spacing:.02em}
.pc-tierpill--sm{min-width:0;height:36px;padding:0 14px;border-width:2.5px;border-radius:9px;box-shadow:0 0 0 2.5px var(--cream);font-size:17px}

/* the slab and its flip */
.pc-slabwrap{margin:0;width:100%;max-width:330px;perspective:1400px}
.pc-slabwrap.is-sm{max-width:240px}
.pc-flip{position:relative;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,1.25,.45,1)}
.pc-flip.is-back{transform:rotateY(180deg)}
.pc-flip.is-turning{transform:rotateY(0)}
.pc-flip.is-flipping{animation:pcflipin 1s cubic-bezier(.3,1.25,.45,1) both}
@keyframes pcflipin{from{transform:rotateY(180deg)}}
.pc-flip__f,.pc-flip__b{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pc-flip__b{position:absolute;inset:0;transform:rotateY(180deg)}
.pc-flip__b .pc-slab{height:100%}
.pc-slab{position:relative;padding:12px;border-radius:18px;border:2px solid rgba(255,255,255,.75);
  background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(200,212,255,.16) 40%,rgba(255,255,255,.26) 70%,rgba(190,200,240,.18));
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.08),inset 0 0 30px rgba(255,255,255,.12),0 0 50px rgba(120,150,255,.25),0 30px 50px -20px rgba(0,0,0,.8);backdrop-filter:blur(2px)}
.pc-slab::after{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.28) 40%,transparent 50%);pointer-events:none}
.pc-slab__label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;background:#fff;color:var(--ink);border:2px solid #C9D0DA}
.pc-slab__logo{display:grid;place-items:center;width:52px;height:30px;border:1.5px solid var(--ink);border-radius:5px;background:var(--ink)}
.pc-slab__logo img{width:44px;height:auto}
.pc-slab__mid{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;font:800 9.5px/1.25 var(--ui);letter-spacing:.04em;color:#222}
.pc-slab__mid b{font:400 12px/1.1 var(--display);letter-spacing:.02em;color:var(--ink)}
.pc-slab__mid span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pc-slab__grade{display:flex;flex-direction:column;align-items:center;min-width:44px}
.pc-slab__grade b{font:400 28px/1 var(--display);color:var(--pink)}
.pc-slab__grade span{font:800 8.5px/1 var(--ui);letter-spacing:.06em;color:var(--ink)}
.pc-slab__grade--star svg{width:22px;height:22px;color:var(--ink)}
.pc-slab__card{margin-top:12px;padding:10px;border-radius:12px;background:rgba(10,14,40,.35)}
.pc-card{position:relative;overflow:hidden;padding:9px 9px 8px;border-radius:12px;border:5px solid transparent;
  background:linear-gradient(180deg,#2B1D52,#170F35) padding-box,linear-gradient(160deg,#FFF2B0,var(--pc-t) 40%,color-mix(in srgb,var(--pc-t) 60%,#7A4F00) 70%,#FFF2B0) border-box;color:#fff}
.pc-card__top{display:flex;justify-content:space-between;align-items:center;gap:8px;font:400 16px/1 var(--display)}
.pc-card__top span{display:inline-flex;align-items:center;gap:3px;font-size:13px;color:#FFE9A6}
.pc-card__top svg{width:12px;height:12px;color:var(--pink-hi)}
.pc-card__art{position:relative;margin-top:7px;aspect-ratio:1.18;border-radius:6px;overflow:hidden;border:2px solid color-mix(in srgb,var(--pc-t) 70%,#fff);
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,220,120,.55) 0deg 8deg,rgba(255,150,60,.15) 8deg 16deg),radial-gradient(circle,#FFE9A6,#C97A12)}
.pc-card__art img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.pc-card__tag{margin:7px -2px 0;padding:4px 6px;border-radius:4px;background:linear-gradient(90deg,#FFE9A6,var(--pc-t),#FFE9A6);color:var(--ink);font:800 italic 10.5px/1 var(--ui);text-align:center;letter-spacing:.02em}
.pc-card__move{display:flex;align-items:center;gap:6px;margin-top:8px;font:400 14px/1 var(--display)}
.pc-card__dm{display:inline-flex;gap:1px;color:var(--pink-hi)}
.pc-card__dm svg{width:8px;height:8px}
.pc-card__move em{margin-left:auto;font-style:normal;color:#FFE9A6}
.pc-card__txt{margin:6px 0 0;font:600 10.5px/1.3 var(--ui);color:#D9DEFF;text-align:center}
.pc-card__foot{display:flex;justify-content:space-between;margin-top:7px;font:700 8.5px/1 var(--ui);letter-spacing:.08em;color:#9AA3D6}
.pc-card__holo{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 20%,rgba(255,135,190,.28) 35%,rgba(111,210,242,.28) 50%,rgba(255,217,59,.28) 65%,rgba(255,255,255,0) 80%);
  background-size:250% 100%;mix-blend-mode:color-dodge;animation:pcholo 4.5s ease-in-out infinite alternate;pointer-events:none}
@keyframes pcholo{to{background-position:100% 0}}
.pc-card--back{display:grid;place-items:center;min-height:330px;border:5px solid transparent;background:radial-gradient(circle,#C53CFF 0%,#5B1FB8 35%,#1A0F4A 70%) padding-box,linear-gradient(160deg,#9DB6FF,#3B58E8 50%,#9DB6FF) border-box}
.pc-card--back::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.14) 0deg 6deg,transparent 6deg 14deg)}
.pc-card--back img{position:relative;width:76%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.pc-slab__stamp{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-14deg);padding:6px 14px;border:4px solid var(--pink);border-radius:10px;background:rgba(11,16,48,.82);
  color:var(--pink-hi);font:400 26px/1 var(--display);letter-spacing:.05em;box-shadow:0 0 24px rgba(250,46,134,.5)}
.pc-slabwrap.is-sm .pc-slab__stamp{font-size:19px}
.pc-slabwrap.is-sm .pc-card--back{min-height:240px}

/* ---- 4 result ---- */
.pc-res{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:center;max-width:1040px;margin:0 auto}
.pc-res__slab{display:flex;justify-content:center;position:relative}
.pc-res__slab::before{content:"";position:absolute;inset:-10% 0;background:radial-gradient(closest-side,rgba(140,170,255,.35),transparent);filter:blur(10px);z-index:-1}
.pc-res__lbl{margin:0 0 6px;font:400 22px/1.1 var(--display);color:var(--sky);text-shadow:0 3px 0 var(--ink)}
.pc-res__tier{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:14px 0 22px;font:700 15px/1.3 var(--ui);color:var(--muted)}
.pc-vrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:16px 0 8px;font:400 17px/1 var(--display);color:#fff}
.pc-vrow b{font:400 20px/1 var(--display);color:#fff}
.pc-meter{height:30px;border:3px solid #fff;border-radius:999px;background:#0A0F2E;overflow:hidden;box-shadow:0 4px 0 var(--ink)}
.pc-meter i{display:block;height:100%;border-radius:999px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.pc-meter--pink i{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 8px,rgba(255,255,255,0) 8px 16px),linear-gradient(180deg,#FF9AC6,#FA2E86 60%,#D8126A)}
.pc-meter--blue i{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 8px,rgba(255,255,255,0) 8px 16px),linear-gradient(180deg,#B9ECFC,#3DA5F5 60%,#1C6FC2)}
.pc-res__note{margin:12px 0 0;font:600 15px/1.45 var(--ui);color:var(--muted)}
.pc-res__note.pc-res__bonus{margin:6px 0 0;overflow-wrap:anywhere}   /* A8: the quiet "+10% referral bonus" line under the number */
.pc-break{max-width:1040px;margin:44px auto 0;padding:26px 28px}
.pc-break__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px}
.pc-plats,.pc-wfs{list-style:none;margin:0;padding:0}
.pc-plat{display:grid;grid-template-columns:auto minmax(0,1fr) 116px;align-items:center;gap:12px;padding:10px 0;border-top:1.5px solid rgba(169,180,218,.18)}
.pc-plat:first-child{border-top:0}
.pc-plat__m{min-width:0}
.pc-plat__t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-bottom:7px}
.pc-plat__t b{font:400 16px/1.1 var(--display);color:#fff}
.pc-plat__t > span:not(.pc-lockchip){font:700 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pc-pbar{height:10px;border-radius:999px;background:rgba(169,180,218,.15);overflow:hidden}
.pc-pbar i{display:block;height:100%;border-radius:999px;background:var(--pc-c)}
.pc-plat__v{text-align:right}
.pc-plat__v b{display:block;font:400 18px/1.1 var(--display);color:#fff}
.pc-plat__v span{font:600 13px/1.3 var(--ui);color:var(--muted)}
.pc-wf{display:flex;align-items:center;gap:10px;min-height:46px;border-top:1.5px solid rgba(169,180,218,.18)}
.pc-wf:first-child{border-top:0}
.pc-wf .pc-addr{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pc-wf__v{margin-left:auto;font:700 14px/1 var(--ui);color:var(--muted);white-space:nowrap}
.pc-wf__v b{font:400 16px/1 var(--display);color:#fff}
.pc-wf.is-none .pc-addr{color:var(--dim)}

/* ---- confirmed ---- */
.pc-conf{padding-top:70px}
.pc-xtile{position:relative;display:grid;place-items:center;width:110px;height:110px;margin-bottom:22px;border-radius:24px;border:4px solid var(--cream);background:#000;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.6);animation:pcpop .5s cubic-bezier(.2,1.6,.4,1) both}
.pc-xtile > svg{width:52px;height:52px}
.pc-xtile span{position:absolute;right:-14px;bottom:-14px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:3px solid var(--cream);background:var(--mint);color:var(--ink)}
.pc-xtile span svg{width:22px;height:22px}
.pc-conf .pc-btn{margin-top:26px}

/* ---- 5 link (Mitch's concept panel 1) ---- */
.pc-lprog{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:20px 0 6px;font:600 14px/1 var(--ui);color:var(--muted)}
.pc-lprog b{color:#fff}
.pc-mbar{height:10px;border-radius:999px;background:rgba(169,180,218,.18);overflow:hidden}
.pc-mbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--mint-2),var(--mint));box-shadow:0 0 10px rgba(110,231,168,.6)}
.pc-lsum{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 14px;padding:0;list-style:none;font:600 13px/1.3 var(--ui);color:var(--muted)}
.pc-lsum li{display:inline-flex;align-items:center;gap:6px}
.pc-lsum i{width:10px;height:10px;border-radius:3px}
.pc-lsum b{color:#fff;font-weight:800}
.pc-lsum .is-linked{background:var(--mint)}
.pc-lsum .is-wait{background:var(--sky)}
.pc-lsum .is-locked{background:var(--gold-2)}
.pc-lrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pc-lrow{display:flex;flex-direction:column;gap:8px;padding:14px 14px 14px 16px;border:2px solid rgba(169,180,218,.32);border-radius:18px;background:rgba(10,15,46,.65)}
.pc-lrow__main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.pc-lrow__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.pc-lrow__who > b{font:400 16px/1.15 var(--display);color:#fff}
.pc-lrow__who > span{font:600 13px/1.3 var(--ui);color:var(--muted)}
.pc-lrow__who .pc-addr{font-size:12.5px;color:var(--muted)}
.pc-lrow__ps{display:inline-flex;gap:3px;margin-top:2px}
.pc-lrow__note{margin:0;font:600 13.5px/1.4 var(--ui);color:var(--muted)}
.pc-lrow.is-done{border-color:var(--mint);background:linear-gradient(180deg,rgba(110,231,168,.12),rgba(10,15,46,.65));box-shadow:0 0 18px rgba(110,231,168,.15)}
.pc-lrow.is-none{border-style:dashed;opacity:.8}
.pc-lrow.is-signing{border-color:var(--pink);box-shadow:0 0 18px rgba(250,46,134,.25)}
.pc-linked{display:inline-flex;align-items:center;gap:6px;font:400 15px/1 var(--display);color:var(--mint);text-transform:uppercase;white-space:nowrap}
.pc-linked svg{width:18px;height:18px}
.pc-signbox{padding:12px;border:2px dashed rgba(169,180,218,.45);border-radius:12px;background:rgba(5,8,26,.55);font:600 13px/1.4 var(--ui);color:var(--muted)}
.pc-signbox pre{margin:8px 0 10px;padding:10px 12px;border:1.5px solid rgba(169,180,218,.35);border-radius:8px;background:#070A22;font:600 13.5px/1.45 var(--mono);color:#fff;white-space:pre-wrap;overflow-wrap:anywhere}
.pc-signbox__go{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pc-add{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;margin-top:12px;border:2px dashed rgba(169,180,218,.5);border-radius:16px;background:none;font:400 15px/1 var(--display);color:#DCE3FF}
.pc-add svg{width:16px;height:16px}
.pc-link .pc-btn--block{margin-top:16px}

/* ---- top-up (concept panel 2) ---- */
.pc-tu__back{align-self:flex-start;margin:-8px 0 0 -4px}
.pc-amts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:400px;width:100%;margin:18px auto 0}
.pc-amt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;border:2px solid rgba(169,180,218,.4);border-radius:14px;background:rgba(10,15,46,.65)}
.pc-amt b{font:400 20px/1 var(--display);color:#fff}
.pc-amt span{font:700 12px/1 var(--ui);color:var(--muted)}
.pc-amt.is-on{border-color:#FFB3D3;background:linear-gradient(180deg,#FF7AB5,#FA2E86);box-shadow:0 0 18px rgba(250,46,134,.5)}
.pc-amt.is-on span{color:#fff}
.pc-dep{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center;margin-top:16px;padding:14px;border:2px solid rgba(169,180,218,.4);border-radius:18px;background:rgba(10,15,46,.65)}
.pc-dep__qr{width:132px;height:132px;padding:6px;border-radius:12px;background:#fff}
.pc-dep__qr svg{display:block;width:100%;height:100%}
.pc-dep__r{min-width:0;display:flex;flex-direction:column;gap:8px}
.pc-dep__r code{font:600 14px/1.35 var(--mono);color:#fff;word-break:break-all}
.pc-dep__net{display:inline-flex;align-items:center;gap:5px;font:700 13px/1 var(--ui);color:var(--mint)}
.pc-dep__net svg{width:14px;height:14px}
.pc-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 0;padding:0;list-style:none}
.pc-tiles li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border:2px solid rgba(169,180,218,.32);border-radius:14px;background:rgba(10,15,46,.65);text-align:center}
.pc-tiles .pc-badge{width:26px;height:26px;font-size:13px;border-radius:7px;border-width:2px;box-shadow:0 3px 0 var(--ink);margin-bottom:2px}
.pc-tiles b{font:400 13px/1.15 var(--display);color:#fff}
.pc-tiles span:last-child{font:600 12px/1.2 var(--ui);color:var(--muted)}
.pc-waitbox{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border:2px solid rgba(250,46,134,.55);border-radius:14px;background:rgba(250,46,134,.08)}
.pc-waitbox > svg{width:26px;height:26px;color:var(--pink-hi)}
.pc-waitbox b{display:block;font:400 16px/1.2 var(--display);color:#fff}
.pc-waitbox span{font:600 13px/1.3 var(--ui);color:var(--muted)}
.pc .pc-sim{align-self:center;margin-top:14px;border-style:dashed}

/* ---- success (concept panel 3) ---- */
.pc-ok{overflow:hidden;align-items:center;text-align:center;padding-top:36px}
.pc-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pc-confetti i{position:absolute;width:9px;height:13px;border-radius:2px;transform:translateY(var(--y)) rotate(var(--r));opacity:.95;animation:pcconf 1.6s var(--d) cubic-bezier(.2,.7,.3,1) both}
@keyframes pcconf{from{transform:translateY(-40px) rotate(0);opacity:0}20%{opacity:1}}
.pc-okbadge{position:relative;display:grid;place-items:center;width:110px;height:110px;border-radius:50%;border:4px solid var(--ink);background:radial-gradient(circle at 40% 35%,#B6F7D4,var(--mint) 55%,var(--mint-2));color:var(--ink);
  box-shadow:0 0 0 5px var(--cream),0 0 40px rgba(110,231,168,.55);animation:pcpop .55s cubic-bezier(.2,1.6,.4,1) both}
.pc-okbadge svg{width:58px;height:58px}
.pc-ok__amt{position:relative;margin:22px 0 0;font:400 58px/1 var(--display);color:var(--mint);text-shadow:0 4px 0 var(--ink),0 0 26px rgba(110,231,168,.35)}
.pc-ok__sub{position:relative;margin:8px 0 0;font:400 16px/1.2 var(--display);text-transform:uppercase;color:#DCE3FF;letter-spacing:.02em}
.pc-unl{position:relative;width:100%;margin:22px 0 20px;padding:16px;border:2px solid rgba(169,180,218,.4);border-radius:18px;background:rgba(10,15,46,.7);text-align:left}
.pc-unl__h{display:flex;align-items:center;gap:10px;font:400 14px/1 var(--display);text-transform:uppercase;color:#fff}
.pc-unl__coin{width:30px;height:30px}
.pc-unl__h .pc-pinkchip{margin-left:auto}
.pc-unl__n{margin:12px 0 8px;font:400 18px/1 var(--display);color:var(--muted)}
.pc-unl__n b{font-size:34px}
.pc-boostbar{position:relative;height:16px;border-radius:999px;border:2px solid rgba(255,255,255,.8);background:#070A22;overflow:hidden}
.pc-boostbar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,rgba(250,46,134,.55) 0 6px,rgba(250,46,134,.25) 6px 12px);border-right:3px solid #fff}
.pc-unl__t{margin:10px 0 0;font:700 14px/1.35 var(--ui);color:var(--pink-hi)}
.pc-ok .pc-pfoot{position:relative}

/* ---- dashboard ---- */
.pc-dash{display:flex;flex-direction:column;align-items:stretch;max-width:1000px;margin:0 auto}
.pc-prog{margin-top:26px;padding:22px 24px 20px}
.pc-prog__h{display:flex;align-items:center;gap:14px}
.pc-locktile{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;border:3px solid var(--cream);background:#FFF2C9;color:var(--ink)}
.pc-locktile svg{width:24px;height:24px}
.pc-prog__k{font:400 14px/1 var(--display);text-transform:uppercase;color:var(--sky);letter-spacing:.03em}
.pc-prog__n{margin:6px 0 0;font:400 17px/1 var(--display);color:#C9D2F5}
.pc-prog__n b{font-size:30px}
.pc-ubar{position:relative;height:32px;margin-top:18px;border:3px solid #fff;border-radius:999px;background:#070A22;overflow:hidden}
.pc-ubar i{position:absolute;left:0;top:0;bottom:0}
.pc-ubar__boost{background:repeating-linear-gradient(-45deg,rgba(250,46,134,.5) 0 7px,rgba(120,20,70,.5) 7px 14px);border-right:3px solid var(--pink-hi);z-index:1}
.pc-ubar__boost span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font:400 11px/1 var(--display);color:#fff;white-space:nowrap;letter-spacing:.04em}
.pc-ubar__fill{background:linear-gradient(180deg,#FFF1B0,#FFD447 55%,#F2A900);z-index:2;border-radius:999px}
.pc-ubar__ticks{position:relative;display:flex;justify-content:space-between;margin-top:8px;font:600 13px/1.25 var(--ui);color:var(--muted)}
.pc-ubar__ticks span{display:flex;flex-direction:column}
.pc-ubar__ticks span:last-child{text-align:right}
.pc-ubar__ticks span[style]{position:absolute;top:0;transform:translateX(-10%)}
.pc-ubar__ticks b{color:#fff;font-weight:800}
.pc-lsum--dash{margin:16px 0 0;padding-top:12px;border-top:1.5px solid rgba(169,180,218,.18)}
.pc-steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:30px 0 0;padding:0;list-style:none}
.pc-steps3 li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 20px 22px}
.pc-steps3 li > .pc-badge{position:absolute;top:-19px;left:50%;transform:translateX(-50%)}
.pc-steps3__art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:132px;margin-bottom:10px}
.pc-steps3__art img{width:76px;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(250,46,134,.35));transform:rotate(-6deg)}
.pc-steps3__eq{flex-direction:row;gap:14px}
.pc-steps3__eq > span{display:flex;flex-direction:column;align-items:center;gap:6px}
.pc-steps3__eq b{font:800 13px/1 var(--ui);color:#fff}
.pc-steps3__eq em{font:400 30px/1 var(--display);font-style:normal;color:#fff}
.pc-eqcoin{width:72px;height:72px}
.pc-steps3 h2{margin:10px 0 8px;font:400 23px/1.1 var(--display);text-transform:uppercase;color:#fff;text-shadow:0 3px 0 var(--ink)}
.pc-steps3 p{margin:0;font:600 15px/1.45 var(--ui);color:#C9D2F5}
.pc-steps3 .pc-mintbig{margin:0;font:400 46px/1 var(--display);color:var(--mint);text-shadow:0 4px 0 var(--ink),0 0 24px rgba(110,231,168,.35)}
.pc-tl{margin-top:22px;padding:24px 20px 20px}
.pc-tl ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.pc-tl ol::before{content:"";position:absolute;left:12.5%;right:12.5%;top:9px;height:3px;background:rgba(241,234,219,.6)}
.pc-tl__i{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pc-tl__dot{width:20px;height:20px;border-radius:50%;border:3px solid var(--cream);background:var(--navy-2)}
.pc-tl__i.is-current .pc-tl__dot{background:var(--pink);box-shadow:0 0 0 4px rgba(250,46,134,.3),0 0 14px rgba(250,46,134,.7)}
.pc-tl__i.is-done .pc-tl__dot{background:var(--mint)}
.pc-tl__i b{font:400 16px/1.1 var(--display);color:#fff}
.pc-tl__i > span:last-child{font:600 13.5px/1.3 var(--ui);color:var(--muted)}
.pc-dash > .pc-center{margin-top:28px}
.pc-dash .pc-fine{max-width:70ch}

/* ---- the share sheet ---- */
.pc-sheet{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.pc-sheet[hidden]{display:none}
.pc-sheet__scrim{position:absolute;inset:0;background:rgba(4,6,20,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pc-sheet__p{position:relative;display:flex;flex-direction:column;width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:26px 24px 20px;animation:pcpop .25s ease-out both;overscroll-behavior:contain}
.pc-sheet__x{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:44px;height:44px;border:2.5px solid var(--cream);border-radius:12px;background:#0A0F2E;color:#fff;z-index:2}
.pc-sheet__x svg{width:18px;height:18px}
.pc-post{display:flex;gap:12px;margin:16px 0;padding:14px;border:2px solid rgba(169,180,218,.35);border-radius:16px;background:#070A22;text-align:left}
.pc-post__av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.pc-post__b{min-width:0;flex:1}
.pc-post__who{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.pc-post__who b{font:800 16px/1.2 var(--ui);color:#fff}
.pc-post__who span{font:600 15px/1.2 var(--ui);color:var(--muted)}
.pc-post__txt{margin:4px 0 12px;font:500 16px/1.45 var(--ui);color:#E6EBFF;overflow-wrap:anywhere}
.pc-post__card{display:flex;justify-content:center;padding:14px;border-radius:14px;background:radial-gradient(circle at 50% 40%,#2C3A9A,#0B1030 70%)}

/* toast */
.pc-toast{position:fixed;left:50%;bottom:24px;z-index:70;max-width:calc(100% - 32px);padding:12px 20px;border:2px solid var(--mint);border-radius:16px;background:#0A0F2E;color:#fff;
  font:700 15px/1.35 var(--ui);text-align:center;box-shadow:0 12px 26px -10px rgba(0,0,0,.7);transform:translate(-50%,160%);opacity:0;transition:transform .25s ease-out,opacity .2s;pointer-events:none}
.pc-toast.is-on{transform:translate(-50%,0);opacity:1}

/* ---- narrower desktops / tablets ---- */
@media (max-width:1100px){
  .pc-res{gap:36px}
  .pc-gold--xl b{font-size:80px}
}
/* ---- phone ---- */
@media (max-width:860px){
  .pc-main{padding:16px 16px 48px}
  .pc-mock{top:8px;right:8px;height:24px;font-size:10px;padding:0 9px}
  .pc-head{margin:22px 0 16px}
  .pc-logo img{height:58px}
  .pc-prof__av{width:46px;height:46px;border-radius:12px}
  .pc-prof__t b{font-size:24px}
  .pc-title{font-size:36px}
  .pc-title--xl{font-size:38px}
  .pc-lead{font-size:17px}
  .pc-ptitle{font-size:27px}
  .pc-hero{width:230px}
  .pc-land__lead{font-size:17px}
  .pc .pc-btn--xl{width:100%;font-size:20px;min-height:60px}
  .pc-wal{grid-template-columns:minmax(0,1fr);gap:8px}
  .pc-wal__art{display:none}
  .pc-wal__form .pc-prof{display:none}
  .pc-wal__h h1{font-size:21px}
  .pc-wal__go .pc-btn{width:100%}
  .pc-stage{min-height:520px;padding-top:10px}
  .pc-stage__coin{top:80px;width:120px}
  .pc-coin{width:120px;height:120px}
  .pc-stage__line{top:240px;font-size:30px}
  .pc-stage__pack{top:10px;width:200px}
  .pc-stage__slab{top:0;width:260px}
  .pc-stage__reveal{top:350px}
  .pc-tierpill{min-width:0;width:min(100%,320px);height:64px;padding:0 20px;font-size:38px}
  .pc-tierpill--sm{width:auto;height:34px;font-size:16px}
  .pc-res{grid-template-columns:minmax(0,1fr);gap:26px}
  .pc-res__slab .pc-slabwrap{max-width:290px}
  .pc-res__info{text-align:left}
  .pc-gold--xl b{font-size:58px}
  .pc-gold i{font-size:24px}
  .pc-res .pc-acts{flex-direction:column;align-items:stretch}
  .pc-res .pc-btn--lg{font-size:18px}
  .pc-break{padding:20px 16px;margin-top:30px}
  .pc-break__grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .pc-plat{grid-template-columns:auto minmax(0,1fr) 98px;gap:10px}
  .pc-mono{width:40px;height:40px}
  .pc-conf{padding-top:30px}
  .pc-modal{padding:24px 16px 20px;border-radius:22px}
  .pc-lrow{padding:12px}
  .pc-lrow__main{grid-template-columns:auto minmax(0,1fr)}
  .pc-lrow__act{grid-column:1 / -1}
  .pc-lrow__act .pc-btn,.pc-lrow__act .pc-linked{width:100%;justify-content:center}
  .pc-lrow__act .pc-linked{min-height:40px}
  .pc-lprog{grid-template-columns:auto minmax(0,1fr)}
  .pc-lprog .pc-textbtn{grid-column:1 / -1;justify-self:start;min-height:32px}
  .pc-dep{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .pc-dep__qr{width:150px;height:150px}
  .pc-dep__r{align-items:center;width:100%}
  .pc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-ok__amt{font-size:42px}
  .pc-steps3{grid-template-columns:minmax(0,1fr);gap:30px}
  .pc-prog{padding:18px 16px}
  .pc-ubar__ticks span[style]{display:none}
  .pc-tl ol{grid-template-columns:minmax(0,1fr);gap:16px}
  .pc-tl ol::before{left:9px;right:auto;top:10px;bottom:10px;width:3px;height:auto}
  .pc-tl__i{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:14px;row-gap:2px;text-align:left;align-items:center}
  .pc-tl__dot{grid-row:1 / span 2}
  .pc-dash .pc-btn--lg{width:100%}
  .pc-sheet{padding:0;place-items:end stretch}
  .pc-sheet__p{width:100%;border-radius:22px 22px 0 0;border-bottom:0;max-height:calc(100dvh - 20px)}
}
@media (max-width:359px){
  .pc-title{font-size:30px}
  .pc-gold--xl b{font-size:48px}
  .pc-tierpill{font-size:32px}
}
/* reduced motion: a quick fade instead, the reveal stays */
@media (prefers-reduced-motion:reduce){
  .pc-hero::before,.pc-hero__pack,.pc-wal__pack,.pc-coin,.pc-card__holo,.pc-spin{animation:none}
  .pc-stage[data-phase="reveal"] .pc-stage__pack{animation:pcfade .3s both}
  .pc-stage[data-phase="reveal"] .pc-tierpill,.pc-stage[data-phase="reveal"] .pc-stage__lbl{animation:pcfade .3s .1s both}
  .pc-flip,.pc-stage__coin,.pc-stage__pack,.pc-stage__slab{transition:opacity .3s ease}
  .pc-flip.is-flipping{animation:pcfade .3s both}
  .pc-flip.is-turning{transform:none}
  .pc-confetti i{animation:none}
  .pc-xtile,.pc-okbadge,.pc-sheet__p{animation:pcfade .25s both}
  .pc-screen{animation:none}
  .pc-meter i,.pc-toast{transition:none}
}
.pc-confetti{z-index:0}
.pc-ok > :not(.pc-confetti){position:relative;z-index:1}

/* ===== round 3 ===== */
/* Connect: "Connect" then the X mark, a soft pink glow behind the button */
.pc-glowbtn{position:relative;display:inline-flex}
.pc-glowbtn::before{content:"";position:absolute;inset:-18px -34px;border-radius:999px;background:radial-gradient(closest-side,rgba(250,46,134,.55),rgba(250,46,134,0));filter:blur(10px);z-index:-1;animation:pcglow 3.2s ease-in-out infinite}
.pc-glowbtn .pc-btn{gap:12px}
.pc-glowbtn .pc-btn svg{width:22px;height:22px}

/* the site's real packs: a WebGL canvas over the flat -v4 still (the still shows until the 3D is live, or if it can't be) */
.pc-3d{position:relative}
.pc-3d__cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .4s ease}
.pc-3d.is-live .pc-3d__cv{opacity:1}
.pc-3d.is-live > .pc-fanstill,.pc-3d.is-live > .pc-3d__still{opacity:0}
.pc-hero.pc-3d{width:min(100%,640px);height:430px;margin:0 0 6px}
.pc-hero.pc-3d .pc-hero__pack{display:none}
.pc-hero::before{inset:16% 18%}
.pc-wal__art.pc-3d{height:470px}
.pc-3d__still{position:absolute;left:50%;top:50%;width:220px;transform:translate(-50%,-50%);filter:drop-shadow(0 20px 26px rgba(0,0,0,.6));transition:opacity .3s}
.pc-fanstill{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
.pc-fanstill img{position:absolute;width:180px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6))}
.pc-fanstill__p--0{transform:translateX(-62%) rotate(-12deg) scale(.9)}
.pc-fanstill__p--1{transform:translateY(-4%);z-index:1}
.pc-fanstill__p--2{transform:translateX(62%) rotate(12deg) scale(.9)}
.pc-steps3__art .pc-fanstill{position:relative;inset:auto;width:200px;height:132px}
.pc-steps3__art .pc-fanstill img{width:72px}
.pc-steps3__art img{transform:none}
.pc-steps3__art .pc-fanstill__p--0{transform:translateX(-58%) rotate(-12deg) scale(.9)}
.pc-steps3__art .pc-fanstill__p--2{transform:translateX(58%) rotate(12deg) scale(.9)}

/* analysing: the coin, then the real pack (its canvas) with the tier pill, then the real rip */
.pc-stage__rip{position:absolute;left:50%;top:-30px;width:min(100vw,860px);height:660px;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .35s ease}
.pc-stage__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.pc-stage__ripstill{position:absolute;inset:0;display:grid;place-items:center}
.pc-stage__ripstill img{width:200px;filter:drop-shadow(0 0 30px rgba(250,46,134,.4)) drop-shadow(0 22px 26px rgba(0,0,0,.6))}
.pc-stage.has-3d .pc-stage__ripstill{display:none}
.pc-stage[data-phase="reveal"] .pc-stage__rip,.pc-stage[data-phase="rip"] .pc-stage__rip{opacity:1}
.pc-stage[data-phase="rip"] .pc-stage__coin,.pc-stage[data-phase="rip"] .pc-stage__line{opacity:0}
.pc-stage[data-phase="reveal"] .pc-stage__rip{animation:pcshake .5s ease-in-out .25s 2}
.pc-stage[data-phase="rip"] .pc-stage__reveal{opacity:0;transition:opacity .3s}
.pc-stage__reveal{z-index:2}
.pc-stage__skip{position:absolute;right:0;top:0;opacity:0;pointer-events:none}
.pc-stage[data-phase="rip"] .pc-stage__skip{opacity:1;pointer-events:auto}
@keyframes pcshake{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(-2.5deg) translateY(-4px)}75%{transform:translateX(-50%) rotate(2.5deg) translateY(-4px)}}

/* the site's own Rip Card slab (card-slab.js drawSealed), as a picture */
.pc-slabimg{position:relative;margin:0;width:100%;max-width:340px;aspect-ratio:1000/1610;border-radius:16px}
.pc-slabimg img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s;filter:drop-shadow(0 26px 34px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(120,150,255,.25))}
.pc-slabimg.is-ready img{opacity:1}
.pc-slabimg:not(.is-ready){background:linear-gradient(110deg,rgba(255,255,255,.06) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.06) 70%) 0 0/200% 100%;animation:pcshim 1.2s linear infinite}
@keyframes pcshim{to{background-position:-200% 0}}
.pc-slabimg.is-flipping{animation:pcflipin 1s cubic-bezier(.3,1.25,.45,1) both;transform-style:preserve-3d}
.pc-slabimg.is-sm{max-width:220px}
.pc-slabimg .pc-slab__stamp{top:58%}

/* where the score came from: names only, no amounts */
.pc-pchips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pc-pchip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:2px solid rgba(241,234,219,.6);border-radius:12px;background:rgba(10,15,46,.7)}
.pc-pchip b{font:400 15px/1 var(--display);color:#fff}
.pc-pchip span{font:700 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pc-pchip em{display:inline-flex;align-items:center;gap:4px;font:400 10px/1 var(--display);font-style:normal;text-transform:uppercase;color:var(--gold-2)}
.pc-pchip em svg{width:11px;height:11px}
.pc-pchips--trade .pc-pchip{border-color:rgba(143,216,255,.55)}
.pc-h3--gap{margin-top:20px}
.pc-found{display:inline-flex;align-items:center;gap:5px;font:400 13px/1 var(--display);color:var(--mint);text-transform:uppercase}
.pc-found svg{width:14px;height:14px}

/* link rows: no letter tiles; a plain wallet mark for a self wallet, the platform's NAME for a platform wallet */
.pc-wtile{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:2.5px solid var(--cream);background:#2A3480;color:#fff;flex:0 0 auto}
.pc-wtile svg{width:22px;height:22px}
.pc-lrow--notile .pc-lrow__main{grid-template-columns:minmax(0,1fr) auto}
.pc-lrow__ps{flex-wrap:wrap;gap:5px}
.pc-lrow__ps i{font:700 11px/1 var(--ui);font-style:normal;letter-spacing:.04em;padding:4px 7px;border-radius:6px;background:rgba(169,180,218,.15);color:#DCE3FF}
.pc-signbox__k{display:block;margin:0 0 8px;font:400 12px/1 var(--display);text-transform:uppercase;color:var(--sky)}
.pc-wpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pc-wpick__b{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 10px;border:2px solid rgba(241,234,219,.6);border-radius:14px;background:#0A0F2E;font:400 15px/1 var(--display);color:#fff}
.pc-wpick__b img{width:28px;height:28px;border-radius:8px}
.pc-wpick__b svg{width:22px;height:22px;color:var(--muted)}
.pc-wpick__b:hover{border-color:var(--pink);box-shadow:0 0 14px rgba(250,46,134,.35)}

/* the $1 confirm */
.pc-namepill{align-self:center;display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:3px solid var(--cream);border-radius:14px;background:#10163F;font:400 22px/1 var(--display);color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.45)}
.pc-onedollar{display:flex;flex-direction:column;align-items:center;gap:4px;margin:16px auto 0}
.pc-onedollar b{font:400 64px/1 var(--display);color:transparent;background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 45%,var(--gold-3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 var(--ink))}
.pc-onedollar span{font:400 14px/1 var(--display);text-transform:uppercase;color:var(--mint);letter-spacing:.03em}
.pc-ok__sub{max-width:44ch;text-transform:none;font:600 16px/1.45 var(--ui)}

@media (max-width:860px){
  .pc-hero.pc-3d{height:330px;width:100%}
  .pc-fanstill img{width:120px}
  .pc-wal__art.pc-3d{display:none}
  .pc-stage__rip{height:400px;top:-6px}
  .pc-stage[data-phase] .pc-stage__reveal{top:392px}
  .pc-stage{min-height:560px}
  .pc-slabimg{max-width:280px}
  .pc-wpick{grid-template-columns:minmax(0,1fr)}
  .pc-onedollar b{font-size:54px}
}
@media (prefers-reduced-motion:reduce){
  .pc-glowbtn::before,.pc-slabimg:not(.is-ready){animation:none}
  .pc-stage[data-phase="reveal"] .pc-stage__rip{animation:none}
  .pc-slabimg.is-flipping{animation:pcfade .3s both}
}

/* =====================================================================================================================
   v4 DESIGN PASS (23 Oct, Luke: "looks shit ... massive gap at the bottom ... the text is tiny ... the pack jumps").
   Critique in docs/pack-checker/design-critique.md. Rules this block enforces:
   - every screen fills the window: .pc-main is the full viewport height and each screen is a flex column inside it;
     screens whose content is fixed (landing, analysing, confirmed, success) centre in it, screens whose content GROWS
     (wallets, results, link, dashboard) are top-aligned so a new row never moves anything above it;
   - one type scale, sized off the window HEIGHT as well as width so 570 / 655-tall windows are not cramped and
     982-tall ones are not empty: display in Titan One, body never under 17px on desktop, labels never under 13px;
   - the wallets screen is two fixed columns: the hero pack pinned in its own column, the list scrolling in its own box.
   ===================================================================================================================== */
:root{
  --pad-y:clamp(14px,2.6vh,28px); --pad-x:clamp(16px,3vw,44px);
  --t-hero:clamp(40px,6vh + 1.4vw,84px);      /* the big white display title */
  --t-title:clamp(32px,4.4vh + 1vw,60px);     /* panel titles */
  --t-h2:clamp(22px,2.6vh + .6vw,32px);
  --t-lead:clamp(19px,1.5vh + .6vw,24px);
  --t-body:clamp(17px,1.2vh + .45vw,21px);
  --t-small:clamp(15px,.8vh + .4vw,17px);
  --t-label:clamp(13px,.6vh + .35vw,15px);
}
.pc-main{max-width:none;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:var(--pad-y) var(--pad-x)}
.pc-screen{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;width:100%;max-width:1320px;margin:0 auto}
.pc-fill{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0}
.pc-head{margin:0 0 clamp(8px,2vh,22px);gap:clamp(6px,1vh,10px)}
.pc-logo img{height:clamp(50px,8.5vh,92px)}
.pc-prof{gap:14px}
.pc-prof__av{width:clamp(46px,6.6vh,64px);height:clamp(46px,6.6vh,64px)}
.pc-prof__t span{font-size:clamp(13px,1.4vh,16px)}
.pc-prof__t b{font-size:clamp(26px,4vh,38px)}
.pc-dots li{width:9px;height:9px}
.pc-dots li.is-now{width:26px}

/* type */
.pc-title{font-size:var(--t-hero);line-height:1}
.pc-title--xl{font-size:var(--t-hero)}
.pc-lead,.pc-land__lead{font-size:var(--t-lead);line-height:1.45;color:#E4E9FF;max-width:52ch}
.pc-ptitle{font-size:var(--t-title);line-height:1.02}
.pc-plead{font-size:var(--t-body);line-height:1.5;color:#E4E9FF;max-width:48ch}
.pc-h2{font-size:var(--t-h2)}
.pc-h3{font-size:clamp(16px,1.6vh,19px)}
.pc-h3 span{font-size:var(--t-label)}
.pc-k{font-size:var(--t-label)}
.pc-fine{font-size:var(--t-small);color:#B9C3E6}
.pc-pfoot{font-size:var(--t-small);color:#B9C3E6}
.pc-addr{font-size:15px}
.pc-btn{min-height:54px;font-size:clamp(18px,1.6vh,21px);padding:0 30px}
.pc-btn--sm{min-height:50px;font-size:17px;padding:0 22px}
.pc-btn--lg{min-height:clamp(56px,7vh,66px);font-size:clamp(20px,2.1vh,24px);padding:0 38px}
.pc-btn--xl{min-height:clamp(60px,8vh,72px);font-size:clamp(21px,2.4vh,26px);padding:0 52px}
.pc-btn svg{width:20px;height:20px}
.pc-textbtn{font-size:var(--t-small)}
.pc-chain{height:30px;min-width:50px;font-size:13px}
.pc-lockchip{height:30px;font-size:12.5px;padding:0 11px}
.pc-lockchip svg{width:14px;height:14px}
.pc-pinkchip,.pc-mintchip{height:30px;font-size:13px;padding:0 12px}
.pc-mock{font-size:12px;height:30px}

/* ---- landing: logo, the fan (the hero), one line, Connect ---- */
.pc-land{gap:clamp(6px,1.4vh,16px);text-align:center}
.pc-land .pc-head{margin-bottom:0}
.pc-hero.pc-3d{flex:1 1 auto;width:100vw;max-width:none;height:auto;min-height:clamp(240px,40vh,420px);max-height:64vh;margin:0 calc(50% - 50vw)}
.pc-hero.pc-3d .pc-fanstill img{width:clamp(150px,24vh,300px)}
.pc-land__lead{margin:0 0 clamp(4px,1vh,10px)}
.pc-land .pc-fine{margin-top:clamp(4px,1vh,10px)}

/* ---- wallets: hero pack pinned left, the form right; nothing moves when a row is added ---- */
.pc-screen--wallets{max-width:1320px}
.pc-wal{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,4vw,72px);align-items:stretch;
  height:calc(100dvh - 2 * var(--pad-y));min-height:500px;max-width:none;margin:0}
.pc-wal__hero{position:relative;display:flex;flex-direction:column;align-items:center;min-height:0}
.pc-logo--wal{flex:0 0 auto;margin-bottom:clamp(4px,1vh,12px)}
.pc-wal__stage{position:relative;flex:1 1 auto;width:100%;min-height:0}
.pc-wal__stage::before{content:"";position:absolute;left:50%;top:50%;width:min(80%,520px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(250,46,134,.42),rgba(250,46,134,.12) 55%,transparent);filter:blur(14px);animation:pcglow 3.6s ease-in-out infinite}
.pc-wal__hero .pc-3d__still{width:auto;height:min(78%,560px);max-width:80%;object-fit:contain}
.pc-wal__form{display:flex;flex-direction:column;justify-content:flex-start;min-height:0;max-width:620px;padding-top:clamp(0px,4vh,48px)}
.pc-wal__form .pc-prof{margin-bottom:clamp(8px,1.8vh,18px);display:inline-flex}
.pc-wal__title{margin:0;font:400 var(--t-title)/1 var(--display);text-transform:uppercase;color:#fff;text-shadow:0 4px 0 var(--ink)}
.pc-wal__sub{margin:clamp(8px,1.4vh,14px) 0 clamp(10px,2vh,20px);font:600 var(--t-body)/1.45 var(--ui);color:#DCE3FF;max-width:52ch}
.pc-wal__lh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font:700 var(--t-label)/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.pc-count{font-size:15px;color:#DCE3FF}
.pc-ins{flex:0 1 auto;min-height:62px;overflow-y:auto;overscroll-behavior:contain;padding:2px 6px 2px 2px;margin-right:-6px;scrollbar-width:thin;scrollbar-color:rgba(169,180,218,.5) transparent}
.pc-in__row{min-height:clamp(54px,7vh,62px);border-width:2.5px;border-radius:16px}
.pc .pc-in__f{font-size:17px;height:clamp(50px,6.6vh,58px)}
.pc-in__n{font-size:14px;color:#9AA6D8}
.pc-in__x{width:44px;height:44px}
.pc-in__e{font-size:15px}
.pc-wal__go{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(10px,2vh,18px)}
.pc-addrow{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 18px;border:2px dashed rgba(241,234,219,.6);border-radius:999px;background:none;font:400 17px/1 var(--display);color:#fff}
.pc-addrow svg{width:18px;height:18px}
.pc-addrow:hover{border-color:var(--pink);color:var(--pink-hi)}
.pc-wal__meta{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;margin-top:clamp(8px,1.6vh,16px)}
.pc-wal__meta .pc-safe{margin:0;font-size:var(--t-small);color:#C9D2F5}
.pc-demo summary{font-size:var(--t-small);min-height:44px}
.pc-chipbtn{min-height:44px;font-size:15px}
.pc-demo[open]{flex-basis:100%}

/* ---- analysing / reveal / rip: the stage fills the window ---- */
.pc-stage{flex:1 1 auto;position:relative;min-height:420px;padding:0}
.pc-stage__coin{top:20%;width:clamp(120px,19vh,180px)}
.pc-coin{width:100%;height:auto}
.pc-stage__line{top:calc(20% + clamp(140px,23vh,220px));font-size:clamp(30px,5vh,58px)}
.pc-stage__rip{position:absolute;left:50%;top:-8px;bottom:clamp(96px,15vh,140px);height:auto;width:min(100vw,1100px);transform:translateX(-50%)}
.pc-stage__reveal,.pc-stage[data-phase] .pc-stage__reveal{top:auto;bottom:0}
.pc-stage__lbl{font-size:clamp(17px,2.2vh,24px)}
.pc-tierpill{height:clamp(62px,9vh,92px);min-width:clamp(280px,30vw,420px);font-size:clamp(38px,6vh,60px)}
.pc-stage__ripstill img{width:auto;height:min(80%,520px)}
.pc-stage__skip{top:4px}

/* ---- result: the slab and the number are the focal point and fill the first screen ---- */
.pc-res{flex:1 1 auto;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4.5vw,80px);align-items:center;max-width:1180px;margin:0 auto;width:100%;
  min-height:calc(100dvh - 2 * var(--pad-y) - clamp(70px,13vh,130px))}
.pc-res__slab .pc-slabimg{width:auto;height:min(calc(100dvh - 2 * var(--pad-y) - clamp(90px,15vh,150px)),640px);max-width:none}
.pc-res__lbl{font-size:clamp(22px,3vh,32px)}
.pc-gold--xl b{font-size:clamp(64px,11vh,128px)}
.pc-gold i{font-size:clamp(26px,3.4vh,38px)}
.pc-res__tier{font-size:var(--t-body);color:#DCE3FF}
.pc-tierpill--sm{height:40px;font-size:20px;padding:0 16px}
.pc-vrow{font-size:clamp(18px,2.2vh,24px);margin:clamp(10px,2vh,20px) 0 10px}
.pc-vrow b{font-size:clamp(20px,2.6vh,28px)}
.pc-meter{height:clamp(28px,3.8vh,38px)}
.pc-res__note{font-size:var(--t-small);color:#C9D2F5}
.pc-res__note svg{width:15px;height:15px;vertical-align:-2px}
.pc-break{max-width:1180px;width:100%;margin:clamp(24px,5vh,56px) auto 0;padding:clamp(22px,3vh,32px) clamp(20px,3vw,36px)}
.pc-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:0 0 14px;padding:0;list-style:none}
.pc-cat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 14px;padding:18px 20px;border:2.5px solid rgba(241,234,219,.55);border-radius:18px;background:rgba(10,15,46,.7)}
.pc-cat.is-gacha{box-shadow:inset 6px 0 0 0 var(--pink)}
.pc-cat.is-trade{box-shadow:inset 6px 0 0 0 var(--blue)}
.pc-cat__k{font:400 clamp(18px,2vh,22px)/1.1 var(--display);color:#fff}
.pc-cat b{grid-row:span 2;font:400 clamp(34px,4.5vh,46px)/1 var(--display);color:var(--gold-2);text-shadow:0 3px 0 var(--ink)}
.pc-cat__v{font:600 var(--t-small)/1.3 var(--ui);color:#C9D2F5}
.pc-break .pc-h3{margin-top:18px}
.pc-wf{min-height:52px}
.pc-wf__v{font-size:15px}
.pc-found{font-size:14px}

/* ---- confirmed / success: centred moments ---- */
.pc-screen--confirmed .pc-conf{flex:1 1 auto;justify-content:center;padding-top:0}
.pc-xtile{width:clamp(96px,15vh,140px);height:clamp(96px,15vh,140px)}
.pc-xtile > svg{width:48%;height:48%}
.pc-screen--success .pc-ok{margin-top:clamp(0px,2vh,24px)}

/* ---- link / confirm $1: the panel, top-aligned so new rows only grow it downward ---- */
.pc-modal{max-width:760px;width:100%;padding:clamp(24px,3.4vh,36px) clamp(20px,3vw,40px) clamp(22px,3vh,32px)}
.pc-ictile{width:clamp(64px,9vh,84px);height:clamp(64px,9vh,84px)}
.pc-lprog{font-size:var(--t-small)}
.pc-lsum{font-size:var(--t-small)}
.pc-lrow{padding:16px 18px;border-radius:20px}
.pc-lrow__who > b{font-size:clamp(18px,2vh,21px)}
.pc-lrow__who > span{font-size:15px}
.pc-lrow__who .pc-addr{font-size:14.5px}
.pc-lrow__ps i{font-size:13px;padding:5px 9px}
.pc-lrow__note{font-size:15.5px;color:#C9D2F5}
.pc-signbox{font-size:15px}
.pc-signbox pre{font-size:15px}
.pc-wpick__b{min-height:54px;font-size:17px}
.pc-linked{font-size:18px}
.pc-add{min-height:56px;font-size:17px}
.pc-namepill{font-size:19px;min-height:46px}
.pc-onedollar b{font-size:clamp(64px,10vh,96px)}
.pc-onedollar span{font-size:16px}
.pc-dep__r code{font-size:15.5px}
.pc-dep__net{font-size:15px}
.pc-tiles b{font-size:16px}
.pc-tiles span:last-child{font-size:14px}
.pc-waitbox b{font-size:18px}
.pc-waitbox span{font-size:15px}
.pc-ok__amt{font-size:clamp(44px,7vh,70px)}
.pc-ok__sub{font-size:var(--t-body);color:#E4E9FF}
.pc-unl__h{font-size:15px}
.pc-unl__t{font-size:15.5px}

/* ---- dashboard ---- */
.pc-dash{max-width:1120px;width:100%}
.pc-prog__k{font-size:clamp(15px,1.7vh,18px)}
.pc-prog__n{font-size:clamp(18px,2.2vh,22px)}
.pc-prog__n b{font-size:clamp(32px,4.6vh,44px)}
.pc-ubar{height:38px}
.pc-ubar__boost span{font-size:13px}
.pc-ubar__ticks{font-size:15px}
.pc-steps3 li{padding:34px 24px 26px}
.pc-steps3 h2{font-size:clamp(24px,2.8vh,30px)}
.pc-steps3 p{font-size:var(--t-body);line-height:1.5}
.pc-steps3__art{min-height:clamp(150px,20vh,210px)}
.pc-steps3__art .pc-fanstill{width:270px;height:clamp(150px,20vh,210px)}
.pc-steps3__art .pc-fanstill img{width:clamp(84px,11vh,112px)}
.pc-steps3__eq b{font-size:15px}
.pc-eqcoin{width:clamp(72px,9vh,92px);height:clamp(72px,9vh,92px)}
.pc-steps3 .pc-mintbig{font-size:clamp(46px,6vh,60px)}
.pc-tl__i b{font-size:clamp(17px,2vh,21px)}
.pc-tl__i > span:last-child{font-size:15px}

/* the share sheet */
.pc-post__txt{font-size:17px}
.pc-sheet{place-items:start center;padding-top:clamp(16px,6vh,60px)}

/* the slab / card art labels are drawn by the site's canvas now; the old HTML card is unused */
.pc-mono--xs{font-size:11px}

/* ---- short windows (Luke's ~1000x570 Chrome, 1147x655) ---- */
@media (min-width:861px) and (max-height:700px){
  .pc-wal__sub{margin-bottom:10px}
  .pc-wal__form{padding-top:0}
  .pc-steps3__art{min-height:140px}
}

/* ---- phone ---- */
@media (max-width:860px){
  :root{--t-hero:clamp(34px,9vw,44px);--t-title:clamp(28px,7.6vw,36px);--t-lead:18px;--t-body:17px;--t-small:15px;--t-label:13px}
  .pc-main{padding:14px 16px 28px}
  .pc-hero.pc-3d{min-height:280px;max-height:48vh;height:46vh;flex:0 0 auto}
  .pc-wal{display:flex;flex-direction:column;height:auto;min-height:0;gap:6px}
  .pc-wal__hero{order:0}
  .pc-wal__stage{display:none}
  .pc-logo--wal img{height:54px}
  .pc-wal__form{max-width:none;padding-top:4px}
  .pc-ins{overflow:visible;max-height:none;margin-right:0;padding:0}
  .pc-wal__go .pc-btn{flex:1 1 auto}
  .pc-stage{min-height:calc(100dvh - 140px)}
  .pc-stage__rip{bottom:110px}
  .pc-stage__coin{top:16%}
  .pc-stage__line{top:calc(16% + 160px)}
  .pc-tierpill{min-width:0;width:min(100%,330px);height:66px;font-size:38px}
  .pc-res{grid-template-columns:minmax(0,1fr);min-height:0;gap:22px}
  .pc-res__slab .pc-slabimg{height:auto;width:min(78vw,300px)}
  .pc-gold--xl b{font-size:56px}
  .pc-cats{grid-template-columns:minmax(0,1fr)}
  .pc-sheet{place-items:end stretch;padding-top:0}
}
/* v4 critique follow-ups */
.pc-prof__t b{max-width:min(46vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:4px}
.pc-lockchip--wait{border:1.5px solid rgba(143,216,255,.55);background:rgba(61,165,245,.14);color:#CDEBFF;align-self:flex-start;text-transform:none;letter-spacing:.01em;font:700 14px/1 var(--ui)}
.pc-slabimg .pc-slab__stamp{top:53%}
.pc-land__lead{max-width:36ch}
.pc-mintchip svg{width:14px;height:14px}
.pc-screen--link .pc-modal,.pc-screen--topup .pc-modal{margin-top:0}
@media (min-width:861px) and (max-height:800px){ .pc-ictile{width:54px;height:54px} .pc-ictile .pc-ictile__coin{width:42px;height:42px} }
@media (max-width:860px){
  /* the result on a phone: the number, the tier and the CTA first, the slab after */
  .pc-res__info{order:-1}
  .pc-res__slab .pc-slabimg{width:min(64vw,240px)}
  .pc-ubar__boost span{top:auto;bottom:calc(100% + 8px);left:0;transform:none;color:var(--pink-hi)}
  .pc-ubar{overflow:visible;margin-top:30px}
  .pc-prog__n{line-height:1.25}
}

/* v4 second round: scale up on tall windows */
.pc-wal__form{padding-top:clamp(0px,8vh - 24px,80px)}
.pc .pc-in__f{font-size:clamp(16px,1.1vh + .4vw,20px)}
.pc-in__row{min-height:clamp(54px,6.6vh,68px)}
.pc-modal{max-width:clamp(640px,52vw,840px)}
.pc-lrow__who > b{font-size:clamp(18px,1.4vh + .4vw,23px)}
.pc-lrow__who > span,.pc-lrow__note{font-size:var(--t-small)}
.pc-lprog,.pc-lsum{font-size:var(--t-small)}
.pc-res__lbl{font-size:clamp(22px,3.2vh,36px)}
.pc-gold--xl b{font-size:clamp(64px,12vh,136px)}
.pc-res__tier{font-size:var(--t-lead)}
/* the BlockRips account line under the profile (real sign-in only) */
.pc-acct{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 clamp(6px,1.2vh,12px);font:600 var(--t-small)/1.35 var(--ui);color:#DCE3FF;min-height:24px}
.pc-acct:empty{display:none}
.pc-acct svg{width:18px;height:18px}
.pc-acct.is-ready svg{color:var(--mint)}
.pc-acct.is-failed{color:#FFB3C0}
.pc-acct .pc-textbtn{min-height:32px}
.pc-demo:not([open]) .pc-demo__chips{display:none}
/* the landing's one hero pack (Mitch's black pack), glowing, centred */
.pc-hero--one .pc-3d__still{height:min(86%,600px);width:auto}
.pc-hero__glow{position:absolute;left:50%;top:50%;width:min(56vh,620px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(250,46,134,.5),rgba(250,46,134,.14) 55%,transparent);filter:blur(16px);animation:pcglow 3.6s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pc-hero__glow,.pc-wal__stage::before{animation:none}}
/* no overflow clip on the hero (Luke, 23 Oct: "a weird line under the pack"): clipping the blurred glows at the hero's
   bottom edge drew a hard full-width step in the background. Nothing in the hero is wider than the viewport. */
.pc-hero.pc-3d{overflow:visible}
.pc-wal__stage{overflow:visible}
@media (max-width:860px){ .pc-mock{top:auto;bottom:8px;left:8px;right:auto;opacity:.85} }
@media (max-width:860px){ .pc-gold--xl b{font-size:min(54px,12.6vw)} .pc-gold{gap:8px} }

/* ---- the card, opened out of the slab (app.js openCard) --------------------------------------------------------------
   Desktop: the card at full viewport height. Phone: full width. It slides from the slab's card window (--pc-from). */
.pc-slabimg[data-opencard]{cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.pc-slabimg[data-opencard]:hover img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.65)) drop-shadow(0 0 48px rgba(250,46,134,.32))}
.pc-slabimg[data-opencard]:focus-visible{outline:3px solid var(--sky);outline-offset:6px}
.pc-slab__hint{position:absolute;left:50%;bottom:6.2%;transform:translateX(-50%);padding:6px 12px;border-radius:999px;white-space:nowrap;
  font:700 13px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--cream);background:rgba(11,16,48,.72);border:1px solid rgba(241,234,219,.22);
  opacity:0;transition:opacity .25s;pointer-events:none}
.pc-slabimg.is-ready .pc-slab__hint{opacity:.9}
.pc-slabimg.is-out img{opacity:.35;transition:opacity .2s}
html.pc-noscroll,html.pc-noscroll body{overflow:hidden}
.pc-view{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.pc-view__bg{position:absolute;inset:0;background:rgba(5,7,20,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s ease;cursor:zoom-out}
.pc-view__card{position:relative;display:block;height:calc(100dvh - 32px);width:auto;max-width:calc(100vw - 32px);aspect-ratio:1060/1484;object-fit:contain;
  border-radius:3.6%/2.6%;box-shadow:0 30px 80px rgba(0,0,0,.7);cursor:zoom-out;
  transform:var(--pc-from,translateY(30%) scale(.5));opacity:.2;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.pc-view.is-on .pc-view__bg{opacity:1}
.pc-view.is-on .pc-view__card{transform:none;opacity:1}
.pc-view.is-closing .pc-view__card{transition:transform .3s cubic-bezier(.5,0,.75,0),opacity .3s ease .08s;opacity:.2}
.pc-view.is-closing .pc-view__bg{transition-duration:.3s}
.pc-view__x{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;
  border:2px solid rgba(241,234,219,.5);background:rgba(11,16,48,.8);color:var(--cream);cursor:pointer}
.pc-view__x svg{width:22px;height:22px}
.pc-view__x:hover{background:var(--pink);border-color:var(--pink)}
.pc-view__x:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
@media (max-aspect-ratio:1060/1484){   /* portrait / phone: the card fills the width */
  .pc-view__card{width:calc(100vw - 32px);height:auto;max-height:calc(100dvh - 32px)}
}
@media (prefers-reduced-motion:reduce){
  .pc-view__card,.pc-view.is-closing .pc-view__card{transform:none;transition:opacity .2s ease}
  .pc-view__bg{transition:opacity .2s}
}

/* ---- lock-in round (23 Oct): the stake strip, countdown, nudges, the return from X, lock moments ---------------------
   One rhythm for all of it: transform/opacity only, 150-450 ms, exits faster; every loop stops under reduced motion. */
.pc-stake{width:100%;max-width:640px;margin:0 auto 18px;padding:14px 16px 12px;border-radius:20px;border:2px solid rgba(169,180,218,.28);
  background:linear-gradient(180deg,rgba(18,26,72,.92),rgba(11,16,48,.92));box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
.pc-screen--dashboard .pc-stake{max-width:1000px}
.pc-track{list-style:none;display:flex;margin:0 0 12px;padding:0;gap:0}
.pc-track li{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center;
  font:700 13px/1.15 var(--ui);letter-spacing:.02em;color:var(--muted)}
.pc-track li::before{content:"";position:absolute;top:13px;left:calc(-50% + 18px);right:calc(50% + 18px);height:3px;border-radius:2px;background:rgba(169,180,218,.28)}
.pc-track li:first-child::before{display:none}
.pc-track li.is-done::before,.pc-track li.is-now::before{background:var(--mint)}
.pc-track i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid rgba(169,180,218,.45);background:var(--navy);font:400 13px/1 var(--display);font-style:normal;color:var(--muted)}
.pc-track i svg{width:15px;height:15px}
.pc-track li.is-done{color:#CFF7E2}
.pc-track li.is-done i{border-color:var(--mint);background:var(--mint);color:var(--ink)}
.pc-track li.is-now{color:var(--text)}
.pc-track li.is-now i{border-color:var(--pink);background:var(--pink);color:#fff;box-shadow:0 0 0 0 rgba(250,46,134,.6);animation:pcring 1.8s ease-out infinite}
.pc-track .num{color:var(--gold-2)}
@keyframes pcring{0%{box-shadow:0 0 0 0 rgba(250,46,134,.55)}70%,100%{box-shadow:0 0 0 10px rgba(250,46,134,0)}}
.pc-stake__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-bottom:10px}
.pc-stake__punch{margin:0;font:400 17px/1.15 var(--display);color:var(--text);text-wrap:balance}
.pc-stake__bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:rgba(169,180,218,.18)}
.pc-stake__bar i{display:block;height:100%;transition:width .45s cubic-bezier(.16,1,.3,1)}
.pc-stake__bar .is-in{background:linear-gradient(90deg,var(--mint-2),var(--mint))}
/* pc80 (Luke, 27 Oct, note 5): the locked-in part is always seen once there is some (210 of 222,162 drew nothing): at least
   one bar-height pill (12px), never more than its real share once that is bigger; the yellow part's own moving stripes (same
   angle, size, speed) in green; a round right end over the yellow, which starts under it so no track shows at the corners */
.pc-stake__bar .is-in.is-some{position:relative;z-index:1;flex-shrink:0;min-width:12px;border-radius:999px;
  background:repeating-linear-gradient(-45deg,var(--mint) 0 8px,var(--mint-2) 8px 16px);background-size:22.6px 22.6px;animation:pcstripe 1.2s linear infinite}
.pc-stake__bar .is-under{box-sizing:content-box;margin-left:-12px;padding-left:12px}
.pc-stake__bar .is-wait{background:repeating-linear-gradient(-45deg,var(--gold-2) 0 8px,var(--gold-3) 8px 16px);background-size:22.6px 22.6px;animation:pcstripe 1.2s linear infinite}
.pc-stake__bar .is-held{background:rgba(169,180,218,.45)}
@keyframes pcstripe{to{background-position:22.6px 0}}
.pc-stake__nums{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:8px 0 0;padding:0;font:600 14px/1.3 var(--ui);color:var(--muted)}
.pc-stake__nums li{display:inline-flex;align-items:center;gap:6px}
.pc-stake__nums li > i{width:10px;height:10px;border-radius:3px}
.pc-stake__nums .is-in > i{background:var(--mint)} .pc-stake__nums .is-wait > i{background:var(--gold-2)} .pc-stake__nums .is-held > i{background:rgba(169,180,218,.6)}
.pc-stake__nums b{color:var(--text);font-variant-numeric:tabular-nums}
.pc-stake__nums .is-in b{color:var(--mint)}
.pc-stake__unit{margin-left:auto;font:400 12px/1 var(--display);letter-spacing:.06em;color:var(--dim)}
/* the countdown chip: real dates from config (fomo.countdowns), tabular figures so it never jitters */
.pc-cd{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border-radius:999px;border:1.5px solid rgba(250,46,134,.55);
  background:rgba(250,46,134,.12);font:700 14px/1 var(--ui);color:#FFD6E8;white-space:nowrap}
.pc-cd svg{width:15px;height:15px;color:var(--pink-hi)}
.pc-cd b{font:700 15px/1 var(--ui);font-variant-numeric:tabular-nums;color:#fff;min-width:9.5ch}
/* the result's chips: "Not locked yet" (off the card, Luke) + the countdown */
.pc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.pc-notlocked{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border-radius:999px;border:1.5px solid rgba(255,212,71,.6);
  background:rgba(255,212,71,.12);font:700 14px/1 var(--ui);color:var(--gold-1);white-space:nowrap}
.pc-notlocked svg{width:15px;height:15px}
.pc-nudge{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:12px 0 0;padding:8px 12px 8px 10px;border-radius:14px;
  background:rgba(110,231,168,.10);border:1.5px solid rgba(110,231,168,.4);font:600 15px/1.35 var(--ui);color:#DFFBEA}
.pc-nudge > svg{width:18px;height:18px;flex:none;color:var(--mint)}
.pc-nudge > span{flex:1 1 14ch}
.pc-nudge b{color:#fff}
.pc-nudge .pc-textbtn{min-height:36px;color:var(--mint)}
.pc-sharenote{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font:600 15px/1.4 var(--ui);color:#DCE3FF}
.pc-sharenote svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--sky)}
.pc-twostep{list-style:none;display:grid;gap:8px;margin:14px 0 4px;padding:0}
.pc-twostep li{display:flex;align-items:center;gap:12px;font:700 16px/1.3 var(--ui);color:var(--text)}
.pc-twostep .pc-badge{flex:none;width:30px;height:30px;font-size:14px}
/* waiting on X */
.pc-conf{padding-top:clamp(12px,4vh,48px)}
.pc-xtile--wait span{background:var(--pink);color:#fff;animation:pcnudge 1.6s ease-in-out infinite}
@keyframes pcnudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.pc-conf .pc-lead{max-width:44ch}
.pc-conf__more{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin-top:10px}
/* back from X */
.pc-welcome{display:flex;align-items:center;gap:18px;text-align:left}
.pc-welcome .pc-ptitle,.pc-welcome .pc-plead{text-align:left;margin-left:0}
.pc-xtile--sm{flex:none;width:72px;height:72px;margin:0 8px 0 0;border-radius:18px;border-width:3px}
.pc-xtile--sm > svg{width:34px;height:34px}
.pc-xtile--sm span{right:-10px;bottom:-10px;width:32px;height:32px}
.pc-xtile--sm span svg{width:16px;height:16px}
.pc-allin{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;font:400 15px/1.2 var(--display);color:var(--mint);text-transform:uppercase}
.pc-allin svg{width:18px;height:18px}
.pc-lockchip--wait{animation:pcbreathe 2.4s ease-in-out infinite}
@keyframes pcbreathe{0%,100%{border-color:rgba(143,216,255,.45)}50%{border-color:rgba(255,212,71,.85)}}
.pc-lockchip--in{align-self:flex-start;border:0;background:rgba(110,231,168,.16);color:var(--mint);font:700 13px/1 var(--ui);text-transform:none;letter-spacing:.01em}
.pc-lrow{position:relative}
.pc-lrow.is-justlocked{animation:pclock .6s cubic-bezier(.16,1,.3,1) both}
@keyframes pclock{0%{border-color:var(--mint);box-shadow:0 0 0 0 rgba(110,231,168,.55)}100%{border-color:rgba(110,231,168,.55);box-shadow:0 0 0 14px rgba(110,231,168,0)}}
.pc-lrow.is-done{border-color:rgba(110,231,168,.45)}
.pc-punch{margin:8px auto 0;max-width:46ch;font:700 16px/1.4 var(--ui);color:var(--text);text-align:center}
.pc-dash__wait{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;font:600 15px/1.35 var(--ui);color:var(--gold-1)}
.pc-dash__wait > svg{width:18px;height:18px}
.pc-dash__wait b{color:#fff}
/* the lock burst: a ring of bits that fly out from what just got locked */
.pc-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.pc-burst i{position:absolute;left:-4px;top:-5px;width:8px;height:10px;border-radius:2px;opacity:0;animation:pcburst .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes pcburst{0%{opacity:1;transform:translate(var(--sx,0),var(--sy,0)) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
.pc-linked{position:relative}
.pc-okbadge{position:relative}
/* picked up after a reload. pc107: Start over back for team testing (Luke 2 Nov: 'until I say'), remove before launch.
   rb/pc-startover-pill (Luke, 4 Nov: "small, right at the top and central on the x axis"; mock A picked, no underline): one
   small pill centred on the window at the top (left:0;right:0;margin:auto, not a transform: pcin animates transform), out of
   the flow on every screen (absolute: it scrolls away with a scrolling screen and never sits over content). Visible 28px
   tall; the button's hit area is 44px tall (it overhangs the pill 8px above and below, nothing painted). The sentence stays
   for screen readers (visually hidden; the bar is role=status). Where the screen's own header owns the top centre (the
   desktop @name header, the phone dashboard's @name + X row) the screen steps down just enough to clear it */
.pc-resume{display:flex;flex-wrap:nowrap;align-items:center;position:absolute;z-index:35;top:8px;left:0;right:0;width:max-content;max-width:calc(100vw - 32px);
  height:28px;margin:0 auto;padding:0;gap:0;border-radius:999px;background:rgba(11,16,48,.82);border:1.5px solid rgba(143,216,255,.38);
  box-shadow:0 4px 12px rgba(0,0,0,.28);font:600 13px/1 var(--ui);color:#DCEFFF}
.pc-resume > svg{display:none}   /* a clock beside "Start over" alone reads as "later", not "restart" */
.pc-resume > .pc-resume__t{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc-resume .pc-textbtn{height:44px;min-height:44px;margin:-8px 0;padding:0 14px;border-radius:999px;cursor:pointer;font:700 13px/1 var(--ui);color:var(--sky);
  text-decoration:none;touch-action:manipulation;transition:color .15s ease-out}
.pc-resume .pc-textbtn:hover{color:#fff}
.pc-resume .pc-textbtn:focus-visible{outline:2px solid var(--sky);outline-offset:-6px}
/* the screen steps down so its top (the desktop @name header) clears the pill (8..36) by 8px+ */
.pc-main:has(> .pc-resume) > .pc-screen{margin-top:max(0px, 44px - var(--pad-y))}
@media (max-width:560px){
  /* staged (Verify, Top up...): level with the logo row (logo 14..42), whose centre is free */
  html.pc-staged .pc-main > .pc-resume{top:14px}
  html.pc-staged .pc-main:has(> .pc-resume) > .pc-screen{margin-top:0}
  /* the dashboard (and any scrolling screen): the logo row is full (logo | @name + X), so the pill sits just under it; the
     step goes INSIDE the header (padding): its @name + X are pinned up into the logo row (top:-52px, dash.css), so they stay */
  html:not(.pc-staged) .pc-main > .pc-resume{top:58px}
  html:not(.pc-staged) .pc-main:has(> .pc-resume) > .pc-screen{margin-top:0}
  html:not(.pc-staged) .pc-main:has(> .pc-resume) > .pc-screen > .pc-head{padding-top:36px}
}
@media (max-width:560px){
  .pc-stake{padding:12px 12px 10px;margin-bottom:14px}
  .pc-track li{font-size:12px}
  .pc-stake__punch{font-size:15px}
  .pc-stake__nums{gap:4px 12px;font-size:13px}
  .pc-welcome{gap:12px}
  .pc-xtile--sm{width:58px;height:58px}
  .pc-xtile--sm > svg{width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){
  .pc-track li.is-now i,.pc-stake__bar .is-wait,.pc-stake__bar .is-in.is-some,.pc-xtile--wait span,.pc-lockchip--wait,.pc-lrow.is-justlocked{animation:none}
  .pc-stake__bar i{transition:none}
}
.pc-wal__punch{display:flex;align-items:center;gap:8px;margin:8px 0 0;font:700 15px/1.3 var(--ui);color:#DFFBEA}
.pc-wal__punch svg{width:16px;height:16px;flex:none;color:var(--mint)}
.pc-proof{margin:8px 0 0;font:700 14px/1.3 var(--ui);color:var(--muted);text-align:center}
.pc-stake{max-width:clamp(640px,52vw,840px)}
.pc-welcome{margin-bottom:6px}
.pc-link .pc-lrows{margin-top:18px}
/* short desktop windows (the ~1000x570 laptop): the result keeps its Share button above the fold */
@media (min-width:861px) and (max-height:700px){
  .pc-chips{margin:0 0 4px}
  .pc-res__tier{margin:6px 0 4px}
  .pc-vrow{margin:8px 0 6px}
  .pc-meter{height:18px;border-width:2px;box-shadow:0 3px 0 var(--ink)}
  .pc-res__info .pc-res__note{display:none}
  .pc-res__info .pc-nudge{margin-top:10px;padding:2px 12px 2px 10px}
  .pc-res__info .pc-acts{margin-top:12px;row-gap:4px}
  .pc-res__info .pc-sharenote{margin-top:6px}
}
/* the longer share label wraps instead of running off a phone */
.pc-res__info .pc-acts [data-act="share"]{white-space:normal;text-align:center;line-height:1.1;padding-top:10px;padding-bottom:10px}
@media (max-width:560px){ .pc-res__info .pc-acts [data-act="share"]{width:100%;font-size:18px;padding-left:20px;padding-right:20px} }
/* step 2 under the share button: big and plain (Luke, 23 Oct: "make it big and obvious") */
.pc-claimnext{display:flex;align-items:center;gap:12px;margin:14px 0 0;font:400 clamp(18px,2.3vh,24px)/1.15 var(--display);color:#fff;text-shadow:0 2px 0 var(--ink);text-wrap:balance}
.pc-claimnext__n{flex:none;display:grid;place-items:center;width:clamp(32px,4vh,40px);height:clamp(32px,4vh,40px);border-radius:50%;border:3px solid var(--cream);
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--ink);font:400 clamp(16px,2vh,20px)/1 var(--display);text-shadow:none;box-shadow:0 3px 0 var(--ink)}
@media (min-width:861px) and (max-height:700px){ .pc-res__info .pc-claimnext{margin-top:10px} }
@media (max-width:560px){ .pc-claimnext{font-size:19px;justify-content:center} }
/* rb/airdrop-zero-share: a card with nothing found keeps "Try other wallets" under its Share step, small (the text button,
   left under the step numbers like "Edit wallets" in the panel below) */
.pc-res__info .pc-res__try{margin-top:6px}
/* the mock badge sits in the page flow at the very end, so it never covers anything at any size (Luke, 23 Oct) */
.pc-mock,.pc-mock{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:flex;width:max-content;max-width:calc(100% - 32px);margin:16px auto 0;flex:none;opacity:.85}
.pc-mock[hidden]{display:none}
@media (max-width:860px){ .pc-mock{top:auto;bottom:auto;left:auto;right:auto} }
/* phone result: room under "Come back here to claim your airdrop" before the bottom edge */
@media (max-width:560px){
  .pc-res__info .pc-res__tier{margin:8px 0 4px}
  .pc-res__info .pc-vrow{margin:10px 0 6px}
  .pc-res__info .pc-meter{height:22px;border-width:2px}
  .pc-res__info .pc-chips{margin-bottom:4px}
  .pc-res__info .pc-acts{margin-top:14px}
}
@media (min-width:861px){ .pc-hasmock .pc-wal{height:calc(100dvh - 2 * var(--pad-y) - 46px)} }
/* ---- wallets screen, desktop (Luke, 23 Oct): the PAGE scrolls; the logo + pack column is sticky; no inner scroll box ----
   Adding a row grows the form column only. The pack column is pinned to the viewport height, so the canvas never resizes,
   and the gutter is reserved so a scrollbar appearing never narrows the page. */
html:has(> body[data-screen="wallets"]){scrollbar-gutter:stable}   /* only where rows can add a scrollbar under the pack */
@media (min-width:861px){
  .pc-wal,.pc-hasmock .pc-wal{height:auto;min-height:calc(100dvh - 2 * var(--pad-y) - 46px);align-items:start}
  .pc-wal__hero{position:sticky;top:var(--pad-y);height:calc(100dvh - 2 * var(--pad-y));min-height:440px;align-self:start}
  .pc-ins{overflow:visible;max-height:none;min-height:0;padding:0;margin-right:0;overscroll-behavior:auto}
  .pc-wal__form{padding-bottom:clamp(12px,3vh,32px)}
}
/* keep the sticky pack inside its column even at the very bottom of the page (the mock badge sits below the column) */
@media (min-width:861px){ .pc-hasmock .pc-wal__hero{height:calc(100dvh - 2 * var(--pad-y) - 46px)} }
/* the header name always fits whole (never cut mid-handle): the type shrinks with the handle's length (--n) */
.pc-prof__t b{max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;font-size:min(clamp(26px,4vh,38px),calc(min(46vw,420px) / (var(--n,8) * .74)))}
/* phone wallets screen: rows, Add wallet and Check my wallets stack in normal flow; the page scrolls (no sticky bar over rows) */
@media (max-width:860px){
  .pc-prof__t b{font-size:min(24px,calc((100vw - 130px) / (var(--n,8) * .74)))}
  .pc-wal__go{position:static;margin:14px 0 0;padding:0;background:none;z-index:auto}
}
.pc-hero__glow{width:min(56vh,620px,92vw)}   /* never wider than the screen (the hero no longer clips it) */
/* the centred glows keep their centring while they breathe (pcglow's bare scale() dropped the translate, so they slid) */
@keyframes pcglowc{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{opacity:.55;transform:translate(-50%,-50%) scale(1.05)}}
.pc-hero__glow,.pc-wal__stage::before{animation-name:pcglowc}
/* ---- the 3D pack's placeholder (Luke, 23 Oct): a pre-render of the same 3D pack, in the SAME box at the SAME size as the
   canvas (full box height; the render already carries the 0.86 fill), so when the live canvas fades in over it nothing
   moves. The still stays fully visible under the canvas until the fade is done, then goes. No drop-shadow (the canvas
   has none). */
.pc-3d .pc-3d__still,.pc-hero--one .pc-3d__still,.pc-wal__hero .pc-3d__still{position:absolute;left:50%;top:0;width:auto;height:100%;max-width:none;max-height:none;
  transform:translateX(-50%);filter:none;object-fit:contain;transition:opacity 0s linear .45s}
.pc-3d .pc-3d__cv{transition:opacity .4s ease}
.pc-3d.is-live .pc-3d__still{opacity:0}
.pc-3d__still.is-loading,.pc-stage__ripstill img.is-loading{visibility:hidden}
.pc-main > .pc-mock{animation:pcin .32s ease-out both}   /* arrives with the screen, not before it */

/* ---- Mitch's flow, ours (23 Oct): X composer preview + share image, "Allocation confirmed", modals over the lobby ---- */
/* the link / top-up / success / how-to steps sit over the BlockRips lobby (a blurred, dimmed picture of it) */
.pc-bg::before{content:"";position:absolute;inset:0;z-index:1;background:#0B1030 url(/site/pack-checker/lobby-bg.webp) center/cover no-repeat;opacity:0;transition:opacity .35s ease}
@media (max-width:1023px){ .pc-bg::before{background-image:url(/site/pack-checker/lobby-bg-mobile.webp)} }
.pc-onlobby .pc-bg::before{opacity:1}
.pc-bg::after{z-index:2}
.pc-onlobby .pc-bg::after{background:rgba(5,7,20,.35)}
/* the two ways a wallet links */
.pc-keys{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 4px}
.pc-keys__b{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:12px;border-radius:16px;
  border:2px solid rgba(169,180,218,.28);background:rgba(10,15,46,.55);text-align:left}
.pc-keys__b b{font:400 15px/1.15 var(--display);color:#fff}
.pc-keys__b > span:last-child{grid-column:1 / -1;font:600 14px/1.35 var(--ui);color:#C9D2F5;margin-top:4px}
.pc-keys__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--ink)}
.pc-keys__ic svg{width:18px;height:18px}
.pc-keys__ic.is-you{background:var(--pink);color:#fff}
.pc-keys__ic.is-app{background:var(--gold-2)}
/* the X composer preview */
.pc-xc{margin:14px 0 14px;padding:14px 14px 10px;border-radius:18px;background:#000;border:1px solid #2F3336;text-align:left}
.pc-xc__row{display:flex;gap:12px;align-items:flex-start}
.pc-xc__av{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}
.pc-xc__body{flex:1 1 auto;min-width:0}
.pc-xc__aud{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;border:1px solid #1D9BF0;font:700 13px/1 var(--ui);color:#1D9BF0}
.pc-xc__txt{margin:8px 0 10px;font:500 17px/1.4 var(--ui);color:#E7E9EA;overflow-wrap:anywhere}
.pc-xc__link{color:#1D9BF0}
.pc-xc__img{position:relative;margin:0;border-radius:16px;overflow:hidden;border:1px solid #2F3336;aspect-ratio:1200/675;background:#0B1030}
.pc-xc__img img{display:block;width:100%;height:100%;object-fit:cover}
.pc-xc__skel{position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.04) 70%) 0 0/200% 100%;animation:pcshim 1.2s linear infinite}
.pc-xc__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:8px;font:600 13px/1.3 var(--ui);color:#8B98A5}
.pc-xc__foot > span{display:inline-flex;align-items:center;gap:6px}
.pc-xc__foot svg{width:14px;height:14px}
.pc-xc__foot .pc-textbtn{min-height:36px}
/* the airdrop dashboard's X (dash.css places it): it lands on the lobby */
.pc-dash__x{position:fixed;top:14px;right:14px;z-index:40;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;
  border:2px solid rgba(241,234,219,.6);background:rgba(11,16,48,.85);color:var(--cream);cursor:pointer}
.pc-dash__x svg{width:22px;height:22px}
.pc-dash__x:hover{background:var(--pink);border-color:var(--pink)}
.pc-ok__more{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;position:relative}
/* confetti over the result, once */
.pc-rain{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.pc-rain i{position:absolute;top:-24px;width:9px;height:13px;border-radius:2px;opacity:.95;animation:pcrain var(--t) var(--d) cubic-bezier(.3,.1,.6,1) forwards}
@keyframes pcrain{to{transform:translate(var(--sx),calc(100vh + 60px)) rotate(var(--r))}}
.pc-tu__more{margin:8px 0 0;text-align:center;font:600 14px/1.4 var(--ui);color:var(--muted)}
@media (max-width:560px){ .pc-keys{grid-template-columns:1fr 1fr;gap:8px} .pc-keys__b{padding:10px} .pc-xc__txt{font-size:16px} }
@media (prefers-reduced-motion:reduce){ .pc-rain{display:none} .pc-bg::before{transition:none} }
.pc-sheet__p > .pc-ptitle{padding:0 48px}
.pc-conf .pc-btn,.pc-alloc .pc-btn{white-space:normal;text-align:center;max-width:100%;line-height:1.15;padding-top:10px;padding-bottom:10px}
.pc-screen--dashboard .pc-head{padding:0 60px}
@media (max-width:860px){ .pc-screen--dashboard .pc-prof__t b{font-size:min(22px,calc((100vw - 250px) / (var(--n,8) * .74)))} }
.pc-prog__start{margin:4px 0 0;font:700 15px/1.3 var(--ui);color:var(--mint)}

/* ---- ANALYSING, rebuilt (23 Oct): the big 3D pack, a building glow, big copy, beats, the 3D coin ------------------
   The rip canvas covers the WHOLE window (fixed, behind the page's text): the falling wrapper leaves by the window's
   edge, as on the lobby, instead of being cut by the old canvas box's bottom edge mid-page. */
.pc-screen--analysing .pc-head,.pc-screen--analysing .pc-mock{position:relative;z-index:3}
.pc-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:0}
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{position:fixed;left:0;top:0;right:auto;bottom:auto;width:100vw;height:100vh;height:100dvh;transform:none;z-index:0;opacity:1;pointer-events:none}
.pc-stage__cv{opacity:0;transition:opacity .4s ease}
.pc-stage.has-3d .pc-stage__cv{opacity:1}
.pc-stage__ripstill,.pc-stage.has-3d .pc-stage__ripstill{display:block;position:absolute;inset:0}
.pc-stage__ripstill img{position:absolute;top:0;left:50%;width:auto;height:100%;max-width:none;transform:translateX(-50%);filter:none}
.pc-stage.has-3d .pc-stage__ripstill{opacity:0;transition:opacity 0s linear .45s}
.pc-stage__glow{position:fixed;left:50%;top:68%;z-index:0;width:min(92vh,980px,130vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(250,46,134,.62),rgba(250,46,134,.18) 55%,rgba(250,46,134,0));filter:blur(18px);
  opacity:calc(.25 + .75 * var(--glow,.3));transform:translate(-50%,-50%) scale(calc(.72 + .38 * var(--glow,.3)));
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.pc-stage__copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.3vh,14px);margin-top:clamp(0px,1.6vh,22px);
  padding:0 16px;text-align:center;transition:opacity .3s ease}
.pc-stage__headline{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,18px)}
.pc-stage__line,.pc-stage[data-phase] .pc-stage__line{position:static;margin:0;font:400 clamp(26px,5.4vh,60px)/1.02 var(--display);text-transform:uppercase;color:#fff;
  text-shadow:0 4px 0 var(--ink);text-wrap:balance;opacity:1}
.pc-coinspin{display:inline-block;flex:none;width:48px;height:48px;position:relative;container-type:size;perspective:600px}
/* the CSS 3D coin (app.js coinSpin): the art on both faces at +-4% of the width (coin3d.js's thickness, T 0.16 of the
   radius), nine rim discs between them in the coin's pink chrome, one compositor animation turning the lot */
.pc-coin3{position:absolute;inset:0;transform-style:preserve-3d;animation:pccoin3 2.4s linear -.3s infinite;will-change:transform}
@keyframes pccoin3{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.pc-coin3 i{position:absolute;inset:0;border-radius:50%}
.pc-coin3__f,.pc-coin3__b{background:#2a0718 url(/site/pack-checker/coin-face-v1.webp) center/cover no-repeat;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,120,190,.6)}
.pc-coin3__f{transform:translateZ(4cqw)}
.pc-coin3__b{transform:rotateY(180deg) translateZ(4cqw)}
.pc-coin3__e{inset:.6%;background:linear-gradient(90deg,#3d0622 0%,#a41a5c 22%,#ff5fa8 46%,#ffd3e8 52%,#e13a86 60%,#7a0f45 82%,#2f0419 100%)}
.pc-coin3__e:nth-child(2){transform:translateZ(-3.6cqw)}.pc-coin3__e:nth-child(3){transform:translateZ(-2.7cqw)}
.pc-coin3__e:nth-child(4){transform:translateZ(-1.8cqw)}.pc-coin3__e:nth-child(5){transform:translateZ(-.9cqw)}
.pc-coin3__e:nth-child(6){transform:translateZ(0)}.pc-coin3__e:nth-child(7){transform:translateZ(.9cqw)}
.pc-coin3__e:nth-child(8){transform:translateZ(1.8cqw)}.pc-coin3__e:nth-child(9){transform:translateZ(2.7cqw)}
.pc-coin3__e:nth-child(10){transform:translateZ(3.6cqw)}
.pc-stage__headline .pc-coinspin{width:clamp(54px,9.5vh,104px);height:clamp(54px,9.5vh,104px)}
.pc-stage.has-3d #pcCoinSlot{opacity:0;transition:opacity 0s linear .45s}
.pc-beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:calc(3 * 1.5em)}
.pc-beats li{display:flex;align-items:center;gap:8px;font:700 clamp(15px,2.2vh,21px)/1.25 var(--ui);color:#DFFBEA;text-shadow:0 2px 6px rgba(0,0,0,.6);animation:pcin .3s ease-out both}
.pc-beats li svg{width:18px;height:18px;flex:none;color:var(--mint)}
.pc-stage[data-phase="reveal"] .pc-stage__copy,.pc-stage[data-phase="rip"] .pc-stage__copy{opacity:0}
.pc-stage__reveal,.pc-stage[data-phase] .pc-stage__reveal{position:absolute;left:0;right:0;top:clamp(0px,1.6vh,22px);bottom:auto;z-index:2}
.pc-stage[data-phase="assess"] .pc-stage__rip{animation:pcrumble .16s linear infinite}
@keyframes pcrumble{0%{transform:translate(0,0)}25%{transform:translate(1.5px,-1px)}50%{transform:translate(-1px,1.5px)}75%{transform:translate(-1.5px,-.5px)}100%{transform:translate(0,0)}}
.pc-stage__skip,.pc-stage[data-phase] .pc-stage__skip{position:fixed;right:clamp(12px,2vw,28px);top:auto;bottom:clamp(16px,3vh,32px);z-index:3;min-height:48px;padding:0 22px;
  border-radius:999px;border:2px solid rgba(241,234,219,.8);background:rgba(11,16,48,.82);color:#fff;font:400 17px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s;text-decoration:none}
.pc-stage[data-phase="rip"] .pc-stage__skip{opacity:1;pointer-events:auto}
.pc-stage__skip:hover{background:var(--pink);border-color:var(--pink)}
.pc-stage__skip:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .pc-stage[data-phase] .pc-stage__rip{animation:none} .pc-stage__glow{transition:none} }
/* screens with window-fixed layers (the rip stage, the how-to close button): fade in by opacity only. A transform
   animation (pcin) makes .pc-screen the containing block of its fixed children, which then sit inside the 1320px
   column instead of the window (the rip canvas was 96px off at 1512 and scrolled sideways). */
@keyframes pcfadeo{from{opacity:0}}
.pc-screen--analysing,.pc-screen--dashboard{animation:pcfadeo .32s ease-out both}
.pc-stage__line,.pc-stage[data-phase] .pc-stage__line{font-size:min(5.4vh,8vw,60px)}
/* the stage's canvas starts below the copy (its lower part runs past the window's bottom edge, so the falling
   wrapper still leaves by the edge); the pack and the slab sit centred in it, under the headline and beats */
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{top:clamp(56px,13vh,140px);height:100vh;height:100dvh}
@media (max-width:560px){ .pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{top:clamp(80px,17vh,160px)} }
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(56px,13vh,140px);top:var(--rt);height:calc(100vh - var(--rt));height:calc(100dvh - var(--rt))}
@media (max-width:560px){ .pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(80px,17vh,160px)} }

/* ---- the score bars = the Clans page's ladder bar (rebrand-clans/clans.css .track / .track__fill, 23 Oct) ----------
   Ink edge, a recessed track, the fill's own gradient sized to the full bar (--fw) so its colours don't squash, white
   115deg stripes moving at the Clans speed (1.2 s), a white highlight along the top. The fill grows in on arrival.
   Like the rest of the site it moves regardless of Reduce Motion (blockrips-reduce-motion-ignored). */
.pc-meter{position:relative;height:clamp(26px,3.6vh,34px);border:3px solid var(--ink);border-radius:999px;background:#E6ECF3;overflow:hidden;
  box-shadow:0 0 0 3px rgba(255,255,255,.92),inset 0 3px 0 rgba(14,17,22,.1)}
.pc-meter i{position:absolute;inset:0 auto 0 0;display:block;height:auto;border-radius:999px;overflow:hidden;background-size:var(--fw,100%) 100%;
  transition:width 1.3s cubic-bezier(.16,1,.3,1) .15s}
.pc-meter i::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 10px,transparent 10px 20px);background-size:22px 100%;animation:pcstripe2 1.2s linear infinite}
.pc-meter i::after{content:"";position:absolute;left:6px;right:6px;top:3px;height:28%;border-radius:999px;background:rgba(255,255,255,.55)}
@keyframes pcstripe2{to{background-position:22px 0}}
.pc-meter--pink i{background-image:linear-gradient(90deg,#FF8CC0 0%,#FF4D96 40%,#F0187A 100%)}
.pc-meter--blue i{background-image:linear-gradient(90deg,#8FE1FF 0%,#22A6DC 55%,#1C6FC2 100%)}
@media (prefers-reduced-motion:reduce){ .pc-meter i{transition:width 1.3s cubic-bezier(.16,1,.3,1) .15s} .pc-meter i::before{animation:pcstripe2 1.2s linear infinite} }
@media (min-width:861px) and (max-height:700px){ .pc-meter{height:20px;border-width:2px} }
@media (max-width:560px){ .pc-res__info .pc-meter{height:22px;border-width:2px} }

/* ---- stickers, not pills: the lobby's own sticker language (promo.css .dpromo, kit.css: ink edge, white ring,
   solid fills, Titan One, the brand's -3.5deg kicker tilt) ------------------------------------------------------- */
.pc-tag{--tilt:-3.5deg;display:inline-flex;flex-direction:column;vertical-align:middle;transform:rotate(var(--tilt));filter:drop-shadow(0 8px 12px rgba(5,7,20,.45));
  color:var(--ink);font-style:normal}
.pc-tag__slab{display:flex;align-items:center;gap:8px;padding:8px 14px 6px;border:3px solid var(--ink);border-radius:14px 14px 4px 4px;
  background:linear-gradient(180deg,#FFE877 0%,#FFD93B 55%,#F2B90C 100%);box-shadow:inset 0 -5px 0 rgba(0,0,0,.14),0 0 0 3px #fff}
.pc-tag__slab svg{width:18px;height:24px;flex:none;color:var(--ink)}
.pc-tag__slab b{font:400 24px/1 var(--display);letter-spacing:.01em;white-space:nowrap}
.pc-tag__tab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 14px 7px;border:3px solid var(--ink);border-top:0;border-radius:0 0 12px 12px;
  background:var(--ink);box-shadow:0 0 0 3px #fff;clip-path:inset(0 -4px -4px -4px)}
.pc-tag__tab i{font:700 12px/1 var(--ui);font-style:normal;letter-spacing:.12em;color:#AEB6C8;white-space:nowrap}
.pc-tag__tab b{font:400 22px/1 var(--display);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
/* the padlock sticker: a cream plate, ink edge, the pink padlock */
.pc-tag--lock{--tilt:2.5deg;flex-direction:row;align-items:center;gap:8px;padding:8px 14px 7px;border:3px solid var(--ink);border-radius:14px;
  background:linear-gradient(180deg,#FFFDF6,#F1EADB);box-shadow:inset 0 -4px 0 rgba(14,17,22,.1),0 0 0 3px #fff}
.pc-tag--lock svg{width:24px;height:24px;flex:none;color:#fff;background:linear-gradient(180deg,#FF6BAA,#FA2E86 55%,#D40E64);border:2.5px solid var(--ink);border-radius:8px;padding:3px}
.pc-tag--lock b{font:400 20px/1 var(--display);text-transform:uppercase;white-space:nowrap}
/* compact (inside the progress strip and on phones) */
.pc-tag--sm .pc-tag__slab{padding:5px 10px 4px}
.pc-tag--sm .pc-tag__slab b{font-size:16px}
.pc-tag--sm .pc-tag__slab svg{width:13px;height:17px}
.pc-tag--sm .pc-tag__tab{padding:4px 10px 5px}
.pc-tag--sm .pc-tag__tab b{font-size:15px}
.pc-tag--sm .pc-tag__tab i{font-size:10px}
.pc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:8px 0 18px 4px}
.pc-stake__row .pc-tag{margin:2px 4px 6px 0}
@media (min-width:861px) and (max-height:700px){ .pc-chips{margin:4px 0 8px 4px;gap:10px 14px} .pc-chips .pc-tag__slab b{font-size:18px} .pc-chips .pc-tag__tab b{font-size:17px} .pc-chips .pc-tag--lock b{font-size:16px} .pc-chips .pc-tag__slab,.pc-chips .pc-tag--lock{padding-top:5px;padding-bottom:4px} }
@media (max-width:560px){ .pc-chips{gap:10px 12px;margin:6px 0 12px 2px} .pc-chips .pc-tag__slab b{font-size:17px} .pc-chips .pc-tag__tab b{font-size:16px} .pc-chips .pc-tag--lock b{font-size:15px} }
/* the per-wallet chips in the same language */
.pc-lockchip{height:auto;min-height:30px;padding:5px 12px 4px;border:2.5px solid var(--ink);border-radius:10px;box-shadow:0 0 0 2px rgba(255,255,255,.9);
  font:400 13px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;transform:rotate(-1.5deg);align-self:flex-start;animation:none}
.pc-lockchip--wait{background:linear-gradient(180deg,#FFE877,#F2B90C);color:var(--ink)}
.pc-lockchip--gold{background:#C9D0DA;color:var(--ink)}
.pc-lockchip--in{background:linear-gradient(180deg,#9DF3C4,#3FCB86);color:var(--ink)}
.pc-lockchip svg{width:14px;height:14px}
@media (max-width:560px){ .pc-chips{margin-bottom:18px} }
/* the full-window stage shakes in place (the old keyframes carried the old box's translateX(-50%), which threw the
   whole canvas half a window to the left during the tier reveal) */
@keyframes pcshakefs{0%,100%{transform:none}20%{transform:translate(-7px,-3px) rotate(-.6deg)}40%{transform:translate(6px,2px) rotate(.5deg)}60%{transform:translate(-5px,2px) rotate(-.4deg)}80%{transform:translate(4px,-2px) rotate(.3deg)}}
.pc-stage[data-phase="reveal"] .pc-stage__rip{animation:pcshakefs .5s ease-in-out .25s 2}
@media (max-width:560px){ .pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(150px,27vh,260px)} }
/* the stage canvas covers the whole window again; the picture is lens-shifted down by --shift (stage3d.js applyShift),
   so the coin can be drawn live beside the headline and the pack sits under the copy */
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{top:0;height:100vh;height:100dvh}
.pc-stage__cv{--shift:calc(var(--rt) / 2)}
.pc-stage__ripstill img{top:calc(var(--rt) / 2)}
.pc-stage__cv{--shift:var(--rt)}
.pc-stage__ripstill img{top:var(--rt)}
.pc-beats{min-height:calc(2 * 1.5em)}
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(70px,17vh,180px)}
@media (max-width:560px){ .pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(150px,26vh,240px)} }
/* analysing, round 2: the copy has its own band above the pack at every size; a bigger coin */
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(96px,22vh,230px)}
@media (max-width:560px){ .pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(180px,31vh,290px)} }
.pc-stage__headline .pc-coinspin{width:clamp(80px,14vh,150px);height:clamp(80px,14vh,150px)}
@media (max-width:560px){ .pc-stage__headline .pc-coinspin{width:76px;height:76px} }
.pc-stage__line,.pc-stage[data-phase] .pc-stage__line{font-size:min(5.6vh,8vw,62px)}
/* --shift lives on the rip box so the probe (a child of it) inherits it; the still and the live pack use the same value */
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--shift:calc(var(--rt) * .55)}
.pc-stage__cv{--shift:inherit}
.pc-stage__ripstill img{top:calc(var(--rt) * .55)}
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(96px,22vh,230px)}
@media (max-width:560px){ .pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(180px,31vh,290px)} }
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--shift:calc(var(--rt) * .5)}
.pc-stage__ripstill img{top:calc(var(--rt) * .5)}
@media (max-width:560px){ .pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--shift:calc(var(--rt) * .32)} .pc-stage__ripstill img{top:calc(var(--rt) * .32)} }

/* ===== POLISH PASS (23 Oct, every screen at 1147 / 1512 / 1000 / 390) ===================================================== */
/* wallets: Add wallet on the left, Check on the right, on one line (the early column rule was never reset) */
.pc-wal__go{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
@media (max-width:860px){ .pc-wal__go{flex-direction:column;align-items:stretch;gap:10px} .pc-wal__go .pc-addrow{justify-content:center} }
/* the punch line has its own space above the list label */
.pc-wal__punch{margin:4px 0 14px}
.pc-wal__lh{margin-top:0}
/* the countdown sticker's small caps label is never under 12px */
.pc-tag--sm .pc-tag__tab i,.pc-tag__tab i{font-size:12px}
/* the result: room between the number, the stickers and the tier row */
.pc-chips{margin:12px 0 20px 4px}
@media (min-width:861px) and (max-height:700px){ .pc-chips{margin:8px 0 14px 4px} }
@media (max-width:560px){ .pc-chips{flex-direction:column;align-items:flex-start;gap:14px;margin:12px 0 22px 2px} }
/* the progress strip: punch and sticker on one row when they fit, never crowding; step labels stay legible */
.pc-stake__row{flex-wrap:nowrap;align-items:center;gap:12px 16px}
.pc-stake__punch{flex:1 1 auto;min-width:0}
.pc-stake__row .pc-tag{flex:none;margin:4px 6px 8px 0}
@media (max-width:560px){
  .pc-stake__row{flex-wrap:wrap}
  .pc-track li{font-size:11.5px;line-height:1.15;padding:0 2px}
  .pc-track li > span{max-width:9ch;text-wrap:balance}
}
/* short desktop windows: the step screens keep their main action above the fold */
@media (min-width:861px) and (max-height:700px){
  .pc-stake{padding:10px 14px 9px;margin-bottom:12px}
  .pc-track{margin-bottom:8px}
  .pc-track i{width:24px;height:24px}
  .pc-track li::before{top:11px}
  .pc-conf{padding-top:0}
  .pc-conf .pc-xtile{width:84px;height:84px;margin-bottom:14px}
  .pc-conf .pc-xtile > svg{width:40px;height:40px}
  .pc-conf .pc-title{font-size:clamp(30px,6vh,44px)}
  .pc-conf .pc-btn{margin-top:16px}
}
.pc-conf .pc-title,.pc-ptitle,.pc-title{text-wrap:balance}
.pc-plead,.pc-lead,.pc-punch,.pc-ok__sub,.pc-res__note,.pc-pfoot{text-wrap:pretty}
/* the share sheet fits a short window: the preview image is capped, the Post button stays in view */
@media (max-height:800px) and (min-width:561px){
  .pc-sheet__p{width:min(560px,100%)}
  .pc-sheet__p > .pc-ptitle{font-size:28px}
  .pc-twostep{margin:8px 0 2px;gap:4px}
  .pc-xc{margin:10px 0}
  .pc-xc__txt{font-size:15px;margin:6px 0 8px}
  .pc-xc__img{max-width:340px}
}
/* link: the two "who holds the keys" boxes stack on a phone (each one a clean row) */
@media (max-width:560px){
  .pc-keys{grid-template-columns:1fr}
  .pc-keys__b{grid-template-columns:auto 1fr}
  .pc-keys__b > span:last-child{grid-column:2;margin-top:0}
}
/* the per-wallet stickers wrap inside their row, never past its edge */
.pc-lockchip{white-space:normal;max-width:100%;line-height:1.15}
/* success: the confetti stays in the band above the title; the title fits a phone on one line */
.pc-confetti{bottom:auto;height:150px}
@media (max-width:560px){ .pc-ok__amt{font-size:clamp(30px,9vw,40px)} }
/* the pre-rendered coin fills its slot like the old flat one did (the coin is ~80% of its frame) */
.pc-ictile .pc-ictile__coin{width:64px;height:64px}
.pc-unl__coin{width:40px;height:40px}
.pc-eqcoin.pc-coinspin{width:clamp(84px,11vh,108px);height:clamp(84px,11vh,108px)}
@media (min-width:861px) and (max-height:800px){ .pc-ictile .pc-ictile__coin{width:50px;height:50px} }
/* the unlock bar's "3x BOOST" label sits above the bar at every size (it was under the fill's knob on desktop) */
.pc-ubar{overflow:visible;margin-top:30px}
.pc-ubar__boost span{top:auto;bottom:calc(100% + 8px);left:0;transform:none;color:var(--pink-hi);font-size:13px}
/* mini stickers (success header, how-to step 2) */
.pc-tag--mini{--tilt:-2.5deg;filter:drop-shadow(0 4px 6px rgba(5,7,20,.4))}
.pc-tag--mini .pc-tag__slab{padding:5px 10px 4px;border-radius:10px;border-width:2.5px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14),0 0 0 2px #fff}
.pc-tag--mini .pc-tag__slab b{font-size:14px}
.pc-tag--mini .pc-tag__slab svg{width:11px;height:15px}
.pc-tag--pink .pc-tag__slab{background:linear-gradient(180deg,#FF6BAA 0%,#FA2E86 55%,#D40E64 100%);color:#fff}
.pc-unl__h .pc-tag{margin-left:auto}
/* the slab's hint pill sits just under the card, not on its foot text */
.pc-slab__hint{bottom:1.5%}
/* wallets: the punch line gets air above the list label */
.pc-wal__punch{margin:6px 0 16px}
@media (max-width:560px){ .pc-track li{font-size:12px;letter-spacing:0} .pc-track li > span{max-width:8.5ch} }
/* the ~1000x570 laptop: the result keeps "Come back here to claim your airdrop" above the fold */
@media (min-width:861px) and (max-height:620px){
  .pc-res__lbl{font-size:20px;margin-bottom:2px}
  .pc-gold--xl b{font-size:clamp(52px,10vh,64px)}
  .pc-chips{margin:6px 0 10px 4px;gap:8px 12px}
  .pc-chips .pc-tag__slab{padding:4px 10px 3px}
  .pc-chips .pc-tag__slab b{font-size:15px}
  .pc-chips .pc-tag__tab{padding:3px 10px 4px}
  .pc-chips .pc-tag__tab b{font-size:14px}
  .pc-chips .pc-tag--lock{padding:4px 10px 3px}
  .pc-chips .pc-tag--lock b{font-size:14px}
  .pc-chips .pc-tag--lock svg{width:20px;height:20px}
  .pc-res__tier{margin:2px 0 2px}
  .pc-vrow{margin:6px 0 4px}
  .pc-res__info .pc-nudge{margin-top:8px}
  .pc-res__info .pc-acts{margin-top:10px}
  .pc-stake__punch{font-size:14px}
  .pc-stake{padding:8px 12px 7px}
}

/* ===== REVIEW FIXES (23 Oct, independent review of screens-v8) ============================================= */
/* result, phone: the card first and visible without scrolling, then the allocation */
@media (max-width:860px){
  .pc-res__info{order:0}
  .pc-res{gap:14px}
  .pc-res__slab .pc-slabimg{height:auto;width:min(52vw,210px)}
}
.pc-res__lbl{text-wrap:balance}
/* the share button carries step 1 (step 2 is the line under it), and a shorter label on a phone */
.pc-acts--step{flex-wrap:nowrap;align-items:center;gap:12px}
.pc-acts--step .pc-claimnext__n{flex:none}
.pc-short{display:none}
@media (max-width:560px){ .pc-long{display:none} .pc-short{display:inline} .pc-res .pc-acts--step{flex-direction:row;align-items:center} .pc-acts--step .pc-btn{flex:1 1 auto;white-space:nowrap} }
.pc-claimnext{margin-top:12px}
/* the score labels breathe above their bars */
.pc-res__info .pc-vrow{margin-bottom:10px}
@media (min-width:861px) and (max-height:620px){ .pc-res__info .pc-vrow{margin-bottom:6px} }
/* stickers on a phone result: real gaps */
@media (max-width:560px){ .pc-chips{gap:18px;margin:14px 0 24px 2px} }
/* the nudge on a phone: its link under the line, not squeezed beside it */
@media (max-width:560px){ .pc-nudge{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px} .pc-nudge > svg{display:none} .pc-nudge .pc-textbtn{min-height:32px;padding:0} }
/* success: a clean "0 / 41,962" and a header row that does not cram */
.pc-unl__n{display:flex;align-items:baseline;gap:6px;font:400 18px/1 var(--display)}
.pc-unl__n b{font:400 30px/1 var(--display);color:var(--gold-2);text-shadow:0 3px 0 var(--ink);-webkit-text-fill-color:currentColor;background:none}
@media (max-width:560px){
  .pc-unl__h{flex-wrap:wrap;row-gap:10px;font-size:15px}
  .pc-unl__h > span{white-space:nowrap}
  .pc-unl__h .pc-tag{margin-left:0;flex-basis:100%;width:max-content;max-width:max-content}
}
/* confirm $1: the address in one line (middle-truncated, the copy button copies it whole); equal step tiles */
.pc-dep__r code{word-break:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.pc-tiles li{justify-content:flex-start}
.pc-tiles b{white-space:nowrap}
/* how to unlock: the title clear of the progress card */
.pc-screen--dashboard .pc-dash > .pc-title{margin-top:clamp(18px,4vh,36px)}
/* analysing: the headline is centred; the coin sits to its left without pushing it (a column on a phone) */
.pc-stage__headline{position:relative}
@media (min-width:561px){ .pc-stage__headline .pc-coinspin{position:absolute;right:calc(100% + clamp(10px,1.4vw,18px));top:50%;transform:translateY(-50%)} }
@media (max-width:560px){ .pc-stage__headline{flex-direction:column;gap:6px} .pc-stage__headline .pc-coinspin{width:64px;height:64px} }
/* the tier reveal on a phone sits just above the pack */
@media (max-width:560px){ .pc-stage__reveal,.pc-stage[data-phase] .pc-stage__reveal{top:calc(var(--rt-ph,26vh) * .62)} }

/* ===== round 23 Oct (night) ============================================================================== */
/* the readable view is the WHOLE SLAB, enlarged (never the bare card) */
.pc-view__slab{aspect-ratio:1335/2261;border-radius:2.4%/1.4%;box-shadow:0 30px 80px rgba(0,0,0,.7)}
@media (max-aspect-ratio:1335/2261){ .pc-view__slab{width:calc(100vw - 32px);height:auto;max-height:calc(100dvh - 32px)} }
@media (min-aspect-ratio:1335/2261){ .pc-view__slab{height:calc(100dvh - 32px);width:auto} }
/* effects live on one full-window layer above everything: nothing decorative is ever cut by a box */
.pc-fx{position:fixed;inset:0;z-index:2147482000;pointer-events:none;overflow:visible}
.pc-fx .pc-burst{position:fixed;width:0;height:0}
.pc-confetti--fx{position:fixed;width:520px;height:320px;inset:auto;bottom:auto;overflow:visible;pointer-events:none}
.pc-ok,.pc-unl,.pc-lrow,.pc-stake,.pc-modal{overflow:visible}
/* the share step: two equal, bold steps; a lock line; the picture offered as a file */
.pc-steps2{list-style:none;display:grid;gap:10px;margin:14px 0 10px;padding:0}
.pc-steps2 li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:2.5px solid rgba(241,234,219,.55);border-radius:16px;background:rgba(10,15,46,.6)}
.pc-steps2__n{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:3px solid var(--cream);background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  color:var(--ink);font:400 18px/1 var(--display);box-shadow:0 3px 0 var(--ink)}
.pc-steps2 b{display:block;font:400 clamp(18px,2.6vh,22px)/1.15 var(--display);color:#fff;text-wrap:balance}
.pc-steps2 li > div > span{display:block;margin-top:3px;font:600 14px/1.35 var(--ui);color:#C9D2F5}
.pc-lockline{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;font:700 15px/1.35 var(--ui);color:var(--gold-1);text-wrap:pretty}
.pc-lockline svg{width:18px;height:18px;flex:none;margin-top:1px}
.pc-saveimg{display:flex;align-items:center;gap:14px;margin:14px 0 4px;padding:10px;border-radius:14px;background:rgba(10,15,46,.5);border:1.5px dashed rgba(169,180,218,.4)}
.pc-saveimg__img{position:relative;flex:none;width:120px;aspect-ratio:1200/675;margin:0;border-radius:8px;overflow:hidden;background:#0B1030}
.pc-saveimg__img img{display:block;width:100%;height:100%;object-fit:cover}
.pc-saveimg p{margin:0 0 2px;font:600 13px/1.35 var(--ui);color:#C9D2F5}
.pc-saveimg .pc-textbtn{min-height:32px}
@media (max-width:560px){ .pc-saveimg__img{width:96px} }
/* the share sheet's title on two lines at most */
.pc-sheet__p > .pc-ptitle{padding:0 40px;font-size:clamp(26px,3.6vh,32px)}

/* ===== second review fixes (screens-v10) ============================================================================ */
/* confetti fades out after it lands */
.pc-confetti--fx{transition:opacity .5s ease}
.pc-confetti--fx.is-out{opacity:0}
/* the nudge on a phone: the arrow kept, the words and the link stacked tightly beside it */
@media (max-width:560px){
  .pc-nudge{display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:2px;align-items:start;padding:10px 12px}
  .pc-nudge > svg{display:block;grid-row:1 / span 2;margin-top:2px}
  .pc-nudge > span{flex:none}
  .pc-nudge .pc-textbtn{grid-column:2;justify-self:start;min-height:30px;padding:0}
}
/* pc80 (Luke, 27 Oct, note 6): How to unlock has no close X (the flow ends with "Start ripping"), so its header is the
   Verify pages' own; the airdrop dashboard's X keeps its place (dash.css) */
/* result on a phone: "Tap to read" under the slab (not on its logo); the tier bar full width, 12px under the stickers */
@media (max-width:860px){
  .pc-res__slab{padding-bottom:34px}
  .pc-res__slab .pc-slab__hint{bottom:-30px;transform:translateX(-50%)}
  .pc-res__tier{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
  .pc-res__tier .pc-tierpill{width:100%;min-width:0}
  .pc-chips{margin-bottom:12px}
}
/* analysing: the coin above the heading at every size */
.pc-stage__headline{flex-direction:column;gap:8px}
@media (min-width:561px){ .pc-stage__headline .pc-coinspin{position:static;transform:none;width:clamp(64px,10vh,110px);height:clamp(64px,10vh,110px)} }
/* allocation confirmed fits a short window whole (the preview pill included) */
@media (min-width:861px) and (max-height:700px){
  .pc-alloc .pc-xtile{width:72px;height:72px;margin-bottom:10px}
  .pc-alloc .pc-title{font-size:clamp(28px,5.4vh,40px)}
  .pc-alloc .pc-lead{margin-top:6px}
  .pc-alloc .pc-btn{margin-top:12px}
}

/* ===== last review fixes ========================================================================================== */
/* the mock pill never sits over the rip or the reveal (it comes back on the next screen) */
.pc-main > .pc-screen--analysing ~ .pc-mock{display:none}
/* wallets (Luke, 23 Oct: "the straight lines on the left of these buttons ... the fade just looks awful"): no sticky bar,
   no slab, no edges, no fade. "Add wallet" and "Check my wallets" sit in the flow under the last row and the column
   scrolls with the page (the pack stays put on the left) */
/* "Add wallet" stays white (a lighter edge on hover, never pink) */
.pc-addrow:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06)}
/* analysing on a short window: the beats keep ~24px clear of the pack */
@media (min-width:861px) and (max-height:700px){
  .pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--shift:calc(var(--rt) * .72)}
  .pc-stage__ripstill img{top:calc(var(--rt) * .72)}
  .pc-beats li{font-size:14px}
}
/* ---- the pack owns the stage (23 Oct): the 3D pack is framed by stage3d.js into the space under the copy band
   (--rt) above the foot (--foot), at 92% of that height; the flat still is the same pack, cropped tight, drawn into
   the same box, so the canvas takes over without a jump ---- */
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--foot:64px}
.pc-stage__ripstill img,.pc-stage[data-phase] .pc-stage__ripstill img{top:calc(var(--rt) + (100dvh - var(--rt) - var(--foot)) * .04);height:calc((100dvh - var(--rt) - var(--foot)) * .92);width:auto;max-width:none}
/* the copy band the pack sits under: the coin, the headline and two beat lines (or the tier pill) */
.pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(160px,34vh,330px)}
@media (max-width:560px){ .pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--rt:clamp(230px,34vh,320px)} }
/* more of the window for the pack: a slimmer foot on desktop (the mock pill is off this screen; Skip sits beside the
   pack's foot), and a tighter copy band on short windows */
@media (min-width:561px){ .pc-stage__rip,.pc-stage[data-phase] .pc-stage__rip{--foot:22px} }
@media (min-width:861px) and (max-height:700px){
  .pc-stage__headline{gap:4px}
  .pc-stage__headline .pc-coinspin{width:52px;height:52px}
  .pc-stage__line,.pc-stage[data-phase] .pc-stage__line{font-size:min(5vh,34px)}
  .pc-beats{gap:2px;min-height:calc(2 * 1.3em)}
  .pc-beats li{font-size:13px}
  .pc-stage__copy{margin-top:0;gap:4px}
}
/* the pack hand-off between screens: the screen holds still, everything around the pack fades in */
.pc-screen.is-handoff{animation:none}
.pc-fadein{animation:pcfadeo .35s ease-out both}
/* ---- the post preview (Luke, 23 Oct): their X post exactly as X draws it, dark theme, then "Post on X" ----
   X's own dark tokens: black ground, #2F3336 rules, #E7E9EA text, #71767B secondary, #1D9BF0 links; the card is the
   1.91:1 summary_large_image with the domain on it and "From <domain>" under it. Sized so the whole step (title, post,
   button) fits the window: the card's width follows the height left over. */
.pc-prev{--xw:min(100%,560px,calc((100dvh - 470px) * 1.91 + 84px));gap:0;padding-top:clamp(4px,2vh,24px);padding-bottom:24px}
.pc-prev .pc-title{font-size:clamp(30px,5.4vh,48px)}
.pc-prev .pc-lead{max-width:44ch;margin-top:8px}
.pc-xpost{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;width:var(--xw);min-width:min(100%,320px);margin:clamp(14px,2.6vh,24px) auto 0;padding:12px 16px 6px;
  background:#000;border:1px solid #2F3336;border-radius:16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8);text-align:left;
  font:400 15px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#E7E9EA;animation:pcpop .5s cubic-bezier(.2,1.3,.4,1) both}
.pc-xpost__av{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#16181C}
.pc-xpost__body{min-width:0}
/* a long name or handle wraps (project rule: wrap, never truncate); the X mark keeps the top right */
.pc-xpost__who{display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;min-width:0;padding-right:24px;position:relative}
.pc-xpost__who b{font-weight:700;min-width:0;overflow-wrap:anywhere}
.pc-xpost__who span{color:#71767B;min-width:0;overflow-wrap:anywhere}
.pc-xpost__who i{position:absolute;right:0;top:1px;display:grid;color:#E7E9EA}
.pc-xpost__who i svg{width:17px;height:17px}
.pc-xpost__text{margin:2px 0 0;overflow-wrap:anywhere;white-space:pre-wrap}
.pc-xpost__tag{color:#1D9BF0}
.pc-xpost__card{position:relative;margin:12px 0 0;aspect-ratio:1200/630;border:1px solid #2F3336;border-radius:16px;overflow:hidden;background:#16181C}
.pc-xpost__card img{display:block;width:100%;height:100%;object-fit:cover}
/* X prints the card's title on ONE line over the picture and cuts it with an ellipsis when it is too long; the preview
   does what X does (this is X's UI being shown, not ours), so it never covers the picture's number */
.pc-xpost__dom{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:0 6px;border-radius:4px;background:rgba(0,0,0,.77);color:#fff;font-size:13px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* rb/pc-sharecard (30 Oct): the caption is drawn at X's own proportions at every width: X prints a 13px/20px pill 12px
   in from the corner on its ~506px feed card, so here every size is that share of the card's width (cqw), with a floor
   so it stays legible on a phone. At 506px it is exactly X's; it never reaches the picture's score bars (y 504 of 630). */
.pc-xpost__card{container-type:inline-size}
@supports (width:1cqw){.pc-xpost__dom{left:max(5px,2.37cqw);bottom:max(5px,2.37cqw);max-width:calc(100% - 2 * max(5px,2.37cqw));padding:0 max(3px,1.19cqw);border-radius:max(2px,.79cqw);font-size:max(9px,2.57cqw);line-height:max(13px,3.95cqw)}}
.pc-xpost__from{margin:4px 0 0;color:#71767B;font-size:13px}
.pc-xpost__acts{display:flex;justify-content:space-between;max-width:440px;margin:6px 0 0;padding:4px 0;color:#71767B}
.pc-xpost__acts svg{width:19px;height:19px}
.pc-prev > .pc-btn{margin-top:clamp(14px,2.6vh,24px)}
.pc-prev__note{max-width:46ch;margin-top:10px}
@media (max-width:560px){
  .pc-prev{--xw:100%}
  .pc-xpost{grid-template-columns:36px minmax(0,1fr);gap:10px;padding:10px 12px 4px}
  .pc-xpost__av{width:36px;height:36px}
  .pc-prev > .pc-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.pc-xpost{animation:none}}
/* a short window (1000x570): the post explains itself, so the lead line goes and the button stays in view */
@media (min-width:561px) and (max-height:620px){.pc-prev .pc-lead{display:none}.pc-prev .pc-title{font-size:30px}}

/* ===== the logo in the corner (Luke, 23 Oct: "the logo should be in the top left corner") ================================ */
/* where the site's own header puts it: top left, on every screen, scrolling with the page; above the rip's canvas */
.pc-corner{position:absolute;top:clamp(12px,2.2vh,22px);left:clamp(14px,1.8vw,28px);z-index:40;display:block;line-height:0;border-radius:10px}
.pc-corner[hidden]{display:none}
.pc-corner img{display:block;height:clamp(30px,4.6vh,46px);width:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.pc-corner:focus-visible{outline:3px solid #22A6DC;outline-offset:4px}
/* a phone: the logo has its own row (the site's mobile header), everything else starts under it */
@media (max-width:560px){
  .pc-corner{top:14px;left:16px}
  .pc-corner img{height:28px}
  .pc-main{padding-top:58px}
}
/* the wallets screen's pack column, now that the logo is not above the pack: the pack starts under the corner logo's row
   and keeps an even margin below, so it is centred in the space that is left and never runs up to the logo */
@media (min-width:861px){
  .pc-wal__hero{box-sizing:border-box;padding-top:calc(clamp(12px,2.2vh,22px) + clamp(30px,4.6vh,46px) + clamp(8px,2vh,20px) - var(--pad-y,0px));padding-bottom:clamp(8px,2vh,20px)}
}

/* ===== the start: log in or sign up, then "Connect your X" (Luke, 23 Oct) ================================================ */
/* the demo's sign-in states (?mock=1 only): one small dropdown in the top-right corner (the landing keeps it clear) */
.pc-authpick{position:fixed;right:clamp(12px,1.8vw,28px);top:clamp(12px,2.2vh,22px);z-index:45;display:flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1.5px dashed rgba(241,234,219,.5);
  border-radius:10px;background:rgba(10,15,46,.85);font:700 12px/1 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:#C9D2F5}
.pc-authpick select{min-height:28px;max-width:170px;border:1px solid rgba(241,234,219,.4);border-radius:7px;background:#121A48;color:#fff;font:600 13px/1 var(--ui);padding:0 6px}
.pc-authpick select:focus-visible{outline:2px solid #22A6DC;outline-offset:2px}
@media (max-width:560px){ .pc-authpick > span{display:none} .pc-authpick{right:12px;top:12px;padding:3px} .pc-authpick select{max-width:150px} }
/* the stand-in for the site's sign-in box (?mock=1) and its name step */
.pc-login{display:grid;gap:10px;margin:18px 0 6px}
.pc-login__row{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border:2px solid rgba(241,234,219,.35);border-radius:14px;background:rgba(255,255,255,.06);
  font:700 17px/1.2 var(--ui);color:#fff;text-align:left;cursor:pointer}
.pc-login__row:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.pc-login__row:focus-visible{outline:3px solid #22A6DC;outline-offset:2px}
.pc-login__row svg{width:22px;height:22px;flex:none}
.pc-namein{display:block;width:100%;min-height:52px;margin:16px 0 12px;padding:0 16px;border:2px solid rgba(241,234,219,.45);border-radius:14px;background:rgba(10,15,46,.7);
  font:700 18px/1 var(--ui);color:#fff;box-sizing:border-box}
.pc-namein:focus{outline:3px solid #22A6DC;outline-offset:2px;border-color:#fff}
/* "Connect your X" */
.pc-xconn{padding-top:clamp(40px,10vh,110px);gap:0}
.pc-xconn .pc-lead{max-width:40ch}
.pc-xconn .pc-btn{margin-top:22px}
.pc-xconn__tile span{background:var(--sky,#7BDCF5)}
.pc-xconn__err{display:flex;gap:12px;align-items:flex-start;max-width:min(100%,460px);margin:20px auto 0;padding:12px 16px;border:2px solid #FF8A8A;border-radius:14px;
  background:rgba(120,20,40,.35);text-align:left;color:#FFE3E3;font:600 15px/1.4 var(--ui)}
.pc-xconn__err > svg{width:22px;height:22px;flex:none;margin-top:1px;color:#FF9C9C}
.pc-xconn__err b{display:block;font:400 17px/1.2 var(--display);color:#fff;margin-bottom:3px}
.pc-xconn__err span{display:block}
.pc-xconn__how{max-width:44ch;margin-top:14px}
.pc-xconn__who{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:22px 0 0;font:600 14px/1.4 var(--ui);color:#C9D2F5}
.pc-xconn__who > svg{width:16px;height:16px;color:var(--mint)}
@media (max-width:560px){ .pc-xconn{padding-top:24px} .pc-xconn .pc-btn{width:100%} }

/* ===== the slab, presented the way the Rip Card presents its own (Luke, 23 Oct: "the glow behind it is a bit shit",
   "when I hover over this card it shouldn't highlight") ======================================================================
   no glow or frame behind it, its own shadow only; no change on hover (app.js bindTilt tilts it, transform only); keyboard
   focus keeps a quiet ring */
.pc-res__slab::before{display:none}
.pc-slabimg img,.pc-slabimg[data-opencard]:hover img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.55))}
.pc-slabimg img{will-change:transform}
.pc-slabimg[data-opencard]:focus{outline:none}
.pc-slabimg[data-opencard]:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:4px}
/* the longer "Continue as @name" on a phone: its glow stays inside the screen (it pushed the page 30px wide) */
@media (max-width:560px){ .pc-glowbtn{max-width:100%} .pc-glowbtn::before{left:-6px;right:-6px} #pcStart{max-width:100%;white-space:normal} }

/* the lookup failed (real data): said plainly above the buttons, which retry it */
.pc-alert{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:10px 14px;border:2px solid #FF8A8A;border-radius:12px;background:rgba(120,20,40,.35);
  font:700 15px/1.4 var(--ui);color:#FFE3E3}
.pc-alert > svg{width:20px;height:20px;flex:none;margin-top:1px;color:#FF9C9C}

/* ===== the signed-in player's own BlockRips account row (wallets screen): fixed, verified, not removable ===================== */
.pc-acctlist{list-style:none;margin:0 0 10px;padding:0}
.pc-in--acct .pc-in__row{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px;border-radius:14px;border:2px solid var(--mint,#6EE7A8);
  background:linear-gradient(90deg,rgba(110,231,168,.16),rgba(110,231,168,.06))}
.pc-in__n--acct{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:#FA2E86;color:#fff}
.pc-in__n--acct svg{width:16px;height:16px}
.pc-acctrow__who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.2}
.pc-acctrow__who b{font:400 16px/1.15 var(--display);color:#fff}
.pc-acctrow__who > span{font:600 13px/1.3 var(--ui);color:#C9D2F5;overflow-wrap:anywhere}
.pc-acctrow__ok{display:inline-flex;align-items:center;gap:5px;flex:none;padding:4px 10px;border-radius:999px;background:rgba(110,231,168,.18);color:#BFF7D9;font:700 12px/1 var(--ui);letter-spacing:.02em}
.pc-acctrow__ok svg{width:13px;height:13px;color:var(--mint,#6EE7A8)}
.pc-wtile--acct{background:#FA2E86;color:#fff}
@media (max-width:560px){ .pc-in--acct .pc-in__row{flex-wrap:wrap} .pc-acctrow__ok{margin-left:38px} }

/* ── ROUND 24 OCT (Luke's list) ───────────────────────────────────────────────────────────────────────────────────
   THE LANDING BUBBLE: "Sign in to check your $RIPS allocation." bigger, in a bubble. The page's own sticker (the
   padlock plate: cream face, ink edge, white ring, a slight tilt) with a speech tail pointing up at the pack. */
.pc-bubble{position:relative;--tilt:-2deg;transform:rotate(var(--tilt));margin:16px 0 clamp(18px,3vh,28px);padding:14px 28px 13px;max-width:min(calc(100vw - 48px),900px);
  border:3px solid var(--ink);border-radius:20px;background:linear-gradient(180deg,#FFFDF6,#F1EADB);
  box-shadow:inset 0 -5px 0 rgba(14,17,22,.1),0 0 0 3px #fff;filter:drop-shadow(0 10px 14px rgba(5,7,20,.45));
  font:400 clamp(22px,2.4vw,32px)/1.12 var(--display);color:var(--ink);text-align:center;text-wrap:balance}
.pc-bubble b{font-weight:400;color:var(--pink)}
/* the tail: an ink triangle with a cream one inside it, on the top edge, pointing at the pack */
.pc-bubble::before,.pc-bubble::after{content:"";position:absolute;left:50%;bottom:100%;transform:translateX(-50%);border-style:solid;border-color:transparent}
.pc-bubble::before{bottom:calc(100% + 2px);border-width:0 17px 19px;border-bottom-color:var(--ink)}
/* the cream inside runs down over the box's top edge, so the tail and the bubble are one shape */
.pc-bubble::after{bottom:calc(100% - 1px);border-width:0 12px 15px;border-bottom-color:#FFFDF6}
@media (min-width:768px){.pc-bubble{white-space:nowrap}}
@media (max-width:600px){.pc-bubble{padding:11px 18px 10px;border-radius:16px}}

/* review of this round: the padlock sticker kept clear of the tier bar under it (the boost sticker beside it is gone) */
.pc-res .pc-chips{margin-bottom:14px}
/* "Allocation confirmed" without the progress card: the X tile and its words sit in the middle of the free height */
.pc-screen--allocated .pc-alloc{flex:1 1 auto;justify-content:center;padding-top:clamp(24px,5vh,56px);padding-bottom:clamp(24px,6vh,72px)}
.pc-screen--allocated .pc-alloc .pc-xtile{margin-bottom:clamp(14px,2.4vh,24px)}

/* SHINY (Luke, 24 Oct: "need to make the cards shiny"): a glint sweeps across the slab every few seconds, on top of
   the foil drawn into the card itself (card.js). It sits over the slab picture only (object-fit:contain leaves ~2.6%
   each side of the box empty), lightens what is under it and never takes a click. */
.pc-slabimg::after{content:"";position:absolute;top:0;bottom:0;left:2.6%;right:2.6%;border-radius:3.5%/2.2%;pointer-events:none;opacity:0;
  background:linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.10) 44%,rgba(255,255,255,.55) 50%,rgba(255,240,250,.12) 56%,rgba(255,255,255,0) 62%) no-repeat;
  background-size:300% 100%;background-position:120% 0;mix-blend-mode:screen}
.pc-slabimg.is-ready::after{opacity:1;animation:pcglint 4.2s cubic-bezier(.45,0,.25,1) 1.2s infinite}
.pc-slabimg.is-out::after{opacity:0}
@keyframes pcglint{0%{background-position:120% 0}45%,100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.pc-slabimg.is-ready::after{animation:none;background-position:62% 0;opacity:.6}}

/* THE REEL'S PLACE ON THIS PAGE: the lobby overlay (live-reel.css) with only its rarity zone, set where the tier pill
   used to sit (under the header, above the pack; app.js measures the slot into --pc-reel-top). The lobby's own Skip is
   hidden: this page's Skip presses it. */
body[data-screen="analysing"] .suspense{grid-template:"rarity" auto / 1fr;align-content:start;align-items:start;padding:var(--pc-reel-top,140px) 4% 0}
body[data-screen="analysing"] .suspense .sus--rarity{align-self:start;justify-self:center;margin:0;padding-left:0;padding-right:0}   /* centred: the zone's 20px side padding pushed the plate off-centre on a phone */
body[data-screen="analysing"] .suspense .sus--year,body[data-screen="analysing"] .suspense .sus--company,body[data-screen="analysing"] .suspense .sus__status{display:none}
.rip-skip{display:none!important}
.pc-stage__reveal.has-reel{visibility:hidden}

/* THE HOLO (Luke, 24 Oct: "needs to look like an actual shiny pokemon card... not just a shimmer"). app.js lays this
   over the card inside the slab (and over the opened card) and steers --hx/--hy, where the light falls (0-100%), from
   the mouse or the slab's tilt, or sways it on its own. Three layers, the way a holo rare's foil reads:
   - __art   the ART BOX's foil: a prism rainbow that slides as the light moves, over a fine vertical foil grain,
             colour-dodged into the picture, brightest where the light is.
   - __spark glitter in the art box: tiny points that flash as the light passes.
   - __glare the light itself across the whole card. */
.pc-holo{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;border-radius:5.1%/3.64%;overflow:hidden;opacity:0;transition:opacity .4s;
  --hx:50%;--hy:50%;--hd:0}
.pc-holo.is-on{opacity:1}
.pc-slabimg.is-out .pc-holo{opacity:0}
.pc-holo i{position:absolute;display:block}
.pc-holo__art,.pc-holo__spark{left:10.57%;top:13.21%;width:78.87%;height:36.12%}
.pc-holo__art{
  background-image:
    repeating-linear-gradient(115deg,
      hsl(0,100%,58%) 0%,hsl(45,100%,55%) 4%,hsl(90,100%,52%) 8%,hsl(170,100%,52%) 12%,hsl(215,100%,58%) 16%,hsl(280,100%,60%) 20%,hsl(330,100%,58%) 24%,hsl(360,100%,58%) 28%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.0) 0 3px,rgba(255,255,255,.22) 3px 4px,rgba(255,255,255,0) 4px 7px),
    radial-gradient(farthest-corner circle at var(--hx) var(--hy),rgba(255,255,255,.6) 0%,rgba(255,255,255,.15) 30%,rgba(128,128,128,0) 70%);
  background-size:420% 420%,100% 100%,100% 100%;
  background-position:var(--hx) var(--hy),0 0,0 0;
  background-blend-mode:overlay,overlay,normal;   /* the rainbow and grain overlaid into the picture: its detail stays, its colour turns to foil */
  /* pc101 (Luke, 2 Nov: Mitch's card showed a full rainbow over his photo): on a device that draws this layer without its
     overlay blend, the colour paints straight over the picture. Capped so the worst case is a light tint and the photo
     always reads: .16 to .30 (was .42 to .72), a little less saturated. Working blends are a touch paler (mock approved) */
  mix-blend-mode:overlay;opacity:calc(.16 + var(--hd) * .14);filter:saturate(.75);
  /* the foil lights up around where the light falls and fades away from it, as a holo does as you tilt it */
  -webkit-mask-image:radial-gradient(farthest-side circle at var(--hx) var(--hy),#000 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.12) 85%);
          mask-image:radial-gradient(farthest-side circle at var(--hx) var(--hy),#000 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.12) 85%)}
.pc-holo__spark{
  background-image:
    radial-gradient(circle at 12% 18%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 37% 62%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 71% 27%,#fff 0 1.4px,transparent 2.2px),radial-gradient(circle at 88% 74%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 54% 41%,#fff 0 1.1px,transparent 1.9px),radial-gradient(circle at 23% 84%,#fff 0 1.3px,transparent 2.1px);
  background-size:46px 38px,58px 44px,52px 61px,39px 47px,63px 53px,44px 57px;
  -webkit-mask-image:radial-gradient(circle at var(--hx) var(--hy),#000 0%,rgba(0,0,0,.35) 30%,transparent 55%);
          mask-image:radial-gradient(circle at var(--hx) var(--hy),#000 0%,rgba(0,0,0,.35) 30%,transparent 55%);
  mix-blend-mode:screen;opacity:.9}
.pc-holo__glare{inset:0;
  background:radial-gradient(farthest-corner circle at var(--hx) var(--hy),rgba(255,255,255,.45) 0%,rgba(255,255,255,.08) 32%,rgba(0,0,0,.1) 95%);
  mix-blend-mode:overlay}
.pc-view .pc-holo{z-index:1}

/* THE RESULT, EVENED OUT (Luke, 24 Oct: "sort the ui... all looks uneven"). One column with one left edge and one
   right edge: the label, the number, the tier row, the bars, the nudge and the share button all span it. The tier
   row reads like the bar rows (pill on the left, "Pack score" on the right); the share button and the "come back"
   line share one badge column, and the button runs to the column's right edge. */
.pc-res .pc-res__info{display:flex;flex-direction:column;align-items:stretch;text-align:left}
.pc-res .pc-res__info > *{margin-left:0;margin-right:0}
.pc-res .pc-res__tier{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 14px}
.pc-res .pc-res__tier .pc-tierpill{width:auto;min-width:0;flex:none;padding:0 20px;height:40px;font-size:20px;border-width:2.5px;border-radius:10px}
.pc-res .pc-res__tier > span:last-child{white-space:nowrap}
.pc-res .pc-nudge{width:100%;box-sizing:border-box}
.pc-res .pc-acts--step{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;width:100%;margin-top:18px}
.pc-res .pc-acts--step .pc-btn{flex:1 1 auto;width:auto;max-width:none;justify-content:center}
.pc-res .pc-claimnext{justify-content:flex-start;gap:12px;margin-top:12px}
@media (max-width:560px){ .pc-res .pc-res__lbl{font-size:clamp(20px,6.2vw,26px)} }
.pc-xconn__how{text-wrap:balance;max-width:34ch;margin-left:auto;margin-right:auto}   /* the one-line X note never leaves a word on its own line */

/* ==== STAGES (MOCK, rb/pc-stages, 25 Oct; Luke: "it shouldnt be scrollable ... an obvious slow flashing arrow on
   the right to go to the next page ... link, in stages"). Verify your wallets / top-up / Wallet locked in / How to
   unlock: the header and the progress strip stay; under them ONE stage shows at a time (app.js stagify), inside one
   navy frame (the panel; How to unlock gets the same frame, as wide as its strip). The stages share one grid cell, so
   the frame is as tall as its tallest stage and never jumps between stages. The page never scrolls on these screens. ==== */
html.pc-staged .pc-main{padding-bottom:6px;overflow-x:clip}
html.pc-staged .pc-main > .pc-mock{position:fixed;top:12px;right:14px;z-index:30;margin:0}   /* off the flow: the stage needs the height */
html.pc-staged body[data-screen="dashboard"] .pc-main > .pc-mock{right:auto;left:clamp(130px,13vw,200px)}   /* the X owns the top-right here */
html.pc-staged .pc-stake{margin-bottom:8px}

/* the frame. Arrows either STRADDLE its edge (centred on the cream line; where the gutter outside is wide enough for
   the glow) or sit INSIDE it (--off >= 0). Each stage keeps a lane clear of them. */
.pc-pagerframe{--arw:56px;--arwb:48px;
  --off-l:calc(var(--arwb) / -2 - 1.5px);--off-r:calc(var(--arw) / -2 - 1.5px);
  --lane-l:calc(var(--arwb) / 2 + 12px);--lane-r:calc(var(--arw) / 2 + 12px)}
.pc-pagerframe.pc-pagerframe{padding:clamp(10px,1.8vh,22px) 0 24px}   /* bottom: the dots pill reaches 7.5px in; 16px+ clear above it */
.pc-screen--success .pc-ok.pc-pagerframe{margin-top:0}
.pc-screen--dashboard .pc-dash.pc-pagerframe{position:relative;width:100%;max-width:1000px;margin:0 auto;   /* = the strip's width */
  background:linear-gradient(180deg,var(--navy-3) 0%,var(--navy-2) 60%,#0E1540 100%);border:var(--edge);border-radius:var(--r-panel);box-shadow:var(--sh-panel)}
@media (min-width:861px) and (max-width:1127px){
  /* How to unlock's frame runs nearly edge to edge here: no room outside it for the glow, so the arrows go inside */
  .pc-dash.pc-pagerframe{--off-l:10px;--off-r:10px;--lane-l:calc(var(--arwb) + 20px);--lane-r:calc(var(--arw) + 20px)}
}
.pc-pager{align-self:stretch;width:100%;min-width:0}
.pc-ok > .pc-pager{position:static}   /* the arrows and dots hang off the panel, not the stage area (.pc-ok > * is relative) */
.pc-pager__vp{display:grid;grid-template-columns:minmax(0,1fr);overflow-x:clip;overflow-y:visible}
.pc-stg{grid-area:1 / 1;align-self:center;min-width:0;display:flex;flex-direction:column;align-items:stretch;padding:0 var(--lane-r) 0 var(--lane-l);visibility:hidden}
.pc-stg.is-on,.pc-stg.is-leaving{visibility:visible}
.pc-stg > :first-child{margin-top:0}
.pc-stg > :last-child{margin-bottom:0}
.pc-ok .pc-stg{align-items:center;text-align:center;position:relative;z-index:1}   /* above the panel's confetti box, as before */
.pc-link .pc-stg > .pc-lrows{margin-top:0}
.pc-link .pc-stg > .pc-lrows--rest{margin-bottom:12px}
.pc-tu .pc-stg > .pc-tu__back{margin-left:0}   /* inside the stage's lane */
.pc-link .pc-stg > .pc-allin + .pc-lrows--rest{margin-top:12px}
/* headlines break evenly; a stage title never leaves a word alone */
.pc-stg .pc-ptitle,.pc-stg .pc-title,.pc-stg .pc-ok__amt,.pc-stg h2,.pc-stg .pc-waitbox b{text-wrap:balance}
/* top-up: the safety line under the address; stage 3 (tiles, waiting box, mock buttons) a little tighter */
.pc-tu .pc-stg > .pc-dep + .pc-pfoot{margin-top:12px}
.pc-tu .pc-stg > .pc-waitbox{margin-top:8px}
.pc-tu .pc-stg > .pc-sim{margin-top:8px;max-width:100%}
.pc-tu .pc-stg > .pc-fine{margin-top:4px}
/* How to unlock inside its frame */
.pc-dash .pc-stg > .pc-center{margin-top:clamp(12px,2.2vh,28px)}
.pc-pager .pc-steps3__art{align-self:stretch}   /* a real width, so the fan's min(270px,100%) resolves (its packs are absolute) */
.pc-pager .pc-steps3__art .pc-fanstill{width:min(270px,100%)}
.pc-dash .pc-stg > .pc-title{text-align:center}
.pc-screen--dashboard .pc-stg > .pc-steps3{margin-top:20px}   /* the cards' number badges sit 19px above them */
.pc-pager .pc-steps3 li{padding-top:clamp(26px,3.4vh,34px);padding-bottom:clamp(18px,2.6vh,26px)}
.pc-pager .pc-steps3__art{min-height:clamp(96px,15vh,210px)}
.pc-pager .pc-steps3__art .pc-fanstill{height:clamp(96px,15vh,210px)}
.pc-pager .pc-steps3__art .pc-fanstill img{width:clamp(54px,9.5vh,112px)}   /* the packs stay inside the shorter art box */
.pc-pager .pc-steps3--one{grid-template-columns:minmax(0,1fr)}
@media (min-width:861px) and (max-height:620px){
  /* short desktop windows: the three cards in their frame, art a little smaller (never the words) */
  .pc-pager .pc-steps3__art,.pc-pager .pc-steps3__art .pc-fanstill{min-height:80px;height:auto}
  .pc-pager .pc-steps3__art .pc-fanstill{height:80px}
  .pc-pager .pc-steps3__art .pc-fanstill img{width:48px}
  .pc-pager .pc-eqcoin.pc-coinspin,.pc-pager .pc-eqcoin{width:58px;height:58px}
  .pc-pager .pc-steps3 .pc-mintbig{font-size:46px}
  .pc-pager .pc-steps3 li{padding-top:24px;padding-bottom:14px}
  .pc-pager .pc-steps3 h2{margin:8px 0 6px}
}

/* the arrows, centred on the stage. Next = the page's pink button in the brand's sticker kit (ink outline + offset ink
   shadow) with its "Next" tag joined under it as one sticker, breathing slowly (1.8 s glow + brightness, never a fast
   blink, the button itself always opaque). Back = quiet. */
.pc-pager__go{position:absolute;z-index:3;display:grid;place-items:center}
.pc-pager__go[hidden]{display:none}
.pc-pager__go--next{right:var(--off-r);top:calc(50% - var(--arw) / 2);width:var(--arw);height:var(--arw);animation:pcarw 1.8s ease-in-out infinite}
.pc-pager__go--prev{left:var(--off-l);top:calc(50% - var(--arwb) / 2);width:var(--arwb);height:var(--arwb)}
.pc-pager__go--next::before{content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,95,162,.95) 0%,rgba(250,46,134,.5) 50%,rgba(250,46,134,0) 71%);animation:pcarwglow 1.8s ease-in-out infinite}
.pc-pager__btn{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;padding:0;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pc-pager__next{border:3px solid var(--ink);color:#fff;background:linear-gradient(180deg,#FF7AB5 0%,#FA2E86 52%,#D8126A 100%);
  box-shadow:0 0 0 2px rgba(255,170,205,.45) inset,0 4px 0 var(--ink);animation:pcarwlit 1.8s ease-in-out infinite}
.pc-pager__next svg{width:28px;height:28px;filter:drop-shadow(0 2px 0 rgba(120,0,50,.45))}
.pc-pager__prev{border:2px solid rgba(241,234,219,.6);background:rgba(11,16,48,.92);color:var(--cream)}
.pc-pager__prev svg{width:22px;height:22px}
.pc-pager__next:hover{animation-play-state:paused;filter:brightness(1.12)}
.pc-pager__prev:hover{border-color:var(--pink);color:#fff}
.pc-pager__btn:active{transform:translateY(2px)}
.pc-pager__next:active{box-shadow:0 0 0 2px rgba(255,170,205,.45) inset,0 2px 0 var(--ink)}
.pc-pager__btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
/* the tag tucks under the button's ink rim (no gap, so no frame line shows between them) */
.pc-pager__lbl{position:absolute;z-index:0;top:calc(100% - 7px);left:50%;transform:translateX(-50%);padding:10px 10px 4px;border-radius:0 0 12px 12px;background:var(--ink);
  font:400 13px/1.1 var(--display);letter-spacing:.03em;color:var(--cream);white-space:nowrap;pointer-events:none}
@keyframes pcarw{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes pcarwglow{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:1;transform:scale(1.32)}}
@keyframes pcarwlit{0%,100%{filter:brightness(.86) saturate(.9)}50%{filter:brightness(1.12) saturate(1.1)}}
/* where you are: a small pill of dots sitting on the frame's bottom edge */
.pc-pager__dots{position:absolute;left:50%;bottom:-10.5px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:6px;margin:0;padding:4px 8px;list-style:none;
  border-radius:999px;background:var(--navy);border:2px solid rgba(241,234,219,.75)}
.pc-pager__dots li{width:6px;height:6px;border-radius:50%;background:rgba(169,180,218,.45);transition:background .2s ease,transform .2s ease}
.pc-pager__dots li.is-on{background:var(--pink);transform:scale(1.3)}

/* a wallet being signed: its sign box takes the place of its info lines and chips, so the row stays inside its stage */
.pc-pager .pc-lrow.is-signing > .pc-lockchip,.pc-pager .pc-lrow.is-signing > .pc-lrow__note,.pc-pager .pc-lrow.is-signing .pc-lrow__ps{display:none}
@media (min-width:861px){
  /* desktop: the message on the left, the wallets to sign with on the right */
  .pc-pager .pc-lrow.is-signing .pc-signbox{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:14px;align-items:start}
  .pc-pager .pc-signbox > span:first-child{grid-column:1;grid-row:1;align-self:end}
  .pc-pager .pc-signbox > pre{grid-column:1;grid-row:2;margin-bottom:0}
  .pc-pager .pc-signbox > .pc-signbox__k{grid-column:2;grid-row:1;align-self:end;margin:0}
  .pc-pager .pc-signbox > .pc-wpick,.pc-pager .pc-signbox > .pc-signbox__go{grid-column:2;grid-row:2;margin-top:8px}
  .pc-pager .pc-signbox > .pc-signbox__go{flex-direction:column;align-items:stretch}
  .pc-pager .pc-wpick{grid-template-columns:minmax(0,1fr);gap:6px}
  .pc-pager .pc-wpick__b{min-height:44px;justify-content:flex-start;padding:0 14px}
}

@media (max-width:860px){
  /* the phone (TL, 25 Oct): no side lanes, the stage gets the frame's full width. Both arrows sit on the frame's BOTTOM
     edge, level with the stage dots: Back at the bottom-left, Next at the bottom-right (10px in, so its glow at full
     size ends 12px+ inside the screen). The frame's bottom padding keeps the content 16px+ above them, and the page's
     bottom padding leaves room for the arrow, its tag and the glow under the frame (52px: glow radius 39 + 12 + 1). */
  .pc-pagerframe,.pc-dash.pc-pagerframe{--arw:48px;--arwb:44px;--lane-l:20px;--lane-r:20px}
  .pc-pagerframe.pc-pagerframe{padding-bottom:40px}
  html.pc-staged .pc-main{padding-bottom:52px}
  .pc-pager__go--next{top:auto;bottom:calc(var(--arw) / -2 - 1.5px);right:10px}
  .pc-pager__go--prev{top:auto;bottom:calc(var(--arwb) / -2 - 1.5px);left:10px}
  .pc-pager__go--next::before{inset:-6px;animation-name:pcarwglows}
  .pc-pager__next svg{width:24px;height:24px}
  .pc-pager__prev svg{width:20px;height:20px}
  .pc-pager__lbl{padding:10px 8px 4px}
  html.pc-staged .pc-main > .pc-mock{top:10px;right:10px}
  html.pc-staged body[data-screen="dashboard"] .pc-main > .pc-mock{left:auto;right:10px}
  /* while a wallet is being signed its row is its name and address over the sign box; Phantom and Solflare side by side */
  .pc-pager .pc-lrow.is-signing .pc-lrow__act{display:none}
  .pc-pager .pc-wpick{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pc-pager .pc-wpick__b--other{grid-column:1 / -1}
  /* spacing only (never the words), so the tallest stages fit above the bottom arrows */
  .pc-pagerframe.pc-pagerframe{padding-top:12px}
  .pc-pager .pc-lrow.is-signing{padding:12px}
  .pc-pager .pc-tiles li{padding-top:10px;padding-bottom:10px}
  .pc-pager .pc-tl{padding-top:16px;padding-bottom:14px}
  .pc-pager .pc-tl ol{gap:10px}
  .pc-dash .pc-stg > .pc-center{margin-top:12px}
}
@keyframes pcarwglows{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:1;transform:scale(1.22)}}

/* ==== VERIFY, ROUND 2 (rb/pc-link2, 25 Oct; Luke on the Verify pages). Last rule wins, so this block sits last. ====
   1. ONE FRAME SIZE PER SECTION ("when ye confirm wallet the page resizes ... it should always stay the same size"): on
      the staged screens the page is exactly the window, and the frame takes the height left under the header and
      the strip (capped, so a tall window doesn't get a tall empty box). That height depends on the window only, never
      on the stage on show, its state (signing, locked, all locked, removed) or how many wallets there are; each stage
      centres in it. The header and the strip are a fixed height on these screens, so the frame never moves either. */
html.pc-staged .pc-main{height:100vh;height:100dvh;min-height:0}
html.pc-staged .pc-screen{min-height:0}
html.pc-staged .pc-screen > .pc-pagerframe{flex:1 1 auto;min-height:0;max-height:var(--frame-max,none);display:flex;flex-direction:column}
html.pc-staged .pc-screen--link{--frame-max:600px}
html.pc-staged .pc-screen--topup{--frame-max:600px}
html.pc-staged .pc-screen--success{--frame-max:560px}
html.pc-staged .pc-screen--dashboard{--frame-max:660px}
.pc-pagerframe > .pc-pager{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.pc-pagerframe .pc-pager__vp{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
/* a screen redrawing itself (a wallet signed, locked or removed) doesn't fade and slide in again */
.pc-screen--again,.pc-screen--again ~ .pc-mock{animation:none}
/* the strip's punch line keeps one line's height on these screens (its words change with the state) */
html.pc-staged .pc-stake__row{min-height:1.15em}

/* 2. THE INTRO: the coin spins on its own above the title (no tile); "The two ways to verify" over the two boxes,
      with "or" between them so they read as two ways, not two steps */
.pc-link .pc-link__coin{width:clamp(56px,8.4vh,84px);height:clamp(56px,8.4vh,84px);align-self:center;margin:0 auto clamp(2px,.8vh,8px);filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.pc-link .pc-keys__h{margin:clamp(14px,2.6vh,26px) 0 0;font:400 clamp(17px,1.4vh + .45vw,22px)/1.1 var(--display);color:#fff;text-align:center;text-shadow:0 2px 0 var(--ink)}
.pc-link .pc-keys--or{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:12px;margin:clamp(10px,1.6vh,16px) 0 0}
.pc-link .pc-keys--or .pc-keys__b{align-content:start;row-gap:6px;padding:clamp(12px,1.8vh,18px) clamp(12px,1.4vw,18px)}
.pc-link .pc-keys--or .pc-keys__b b{font-size:clamp(16px,1.2vh + .35vw,19px)}
.pc-link .pc-keys--or .pc-keys__b > span:last-child{font-size:var(--t-small);line-height:1.4;margin-top:2px}
.pc-keys__or{align-self:center;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid rgba(241,234,219,.7);background:var(--navy);
  font:400 15px/1 var(--display);color:var(--cream);text-transform:uppercase;box-shadow:0 4px 0 var(--ink)}
@media (max-width:560px){
  .pc-link .pc-keys--or{grid-template-columns:minmax(0,1fr);gap:0}
  .pc-keys__or{justify-self:center;width:34px;height:34px;margin:-7px 0;position:relative;z-index:1;font-size:13px;box-shadow:0 3px 0 var(--ink)}
}

/* 3. THE WALLET TRACKER (app.js wtrack): one circle per wallet entered, the strip's top row on Verify and the top-up */
.pc-wt{margin:0 0 12px}
.pc-wt__row{list-style:none;display:flex;margin:0;padding:0}
.pc-wt__i{position:relative;flex:1 1 0;min-width:0;display:flex;justify-content:center}
.pc-wt__i::before{content:"";position:absolute;top:13px;left:calc(-50% + 18px);right:calc(50% + 18px);height:3px;border-radius:2px;background:rgba(169,180,218,.28);transition:background .3s ease}
.pc-wt__i:first-child::before{display:none}
.pc-wt__i.is-done::before{background:var(--mint)}
.pc-wt__b{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-width:0;min-height:44px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pc-wt__b:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:10px}
.pc-wt__c{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid rgba(169,180,218,.45);background:var(--navy);
  font:400 13px/1 var(--display);font-style:normal;color:var(--muted);transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
.pc-wt__c b{font-weight:400}
.pc-wt__c svg{display:none;width:15px;height:15px}
.pc-wt__b:hover .pc-wt__c{border-color:var(--cream);color:#fff}
.pc-wt__l,.pc-wt__cap{font:700 13px/1.15 var(--ui);letter-spacing:.02em;white-space:nowrap}
@media (min-width:861px) and (max-height:700px){ .pc-wt{margin-bottom:8px} .pc-wt__c{width:24px;height:24px} .pc-wt__i::before{top:11px} }
@media (max-width:560px){ .pc-wt__l,.pc-wt__cap{font-size:12px;letter-spacing:0} }
.pc-wt__l{max-width:100%;overflow:hidden;text-overflow:clip}
/* rb/pc-30w: "Rip to unlock" (71px) ran past its slot where a slot is 66-71px wide (1512x982 at 10 wallets: "Rip to unlocl").
   Its label may run past its slot's edges, evenly, centred under the lock (the strip goes compact below 66px a slot) */
.pc-wt__i--rip .pc-wt__l{max-width:none}
.pc-wt__cap{display:none;margin:6px 0 0;text-align:center;color:var(--text)}
.pc-wt.is-compact .pc-wt__l{display:none}
/* compact: the circle alone is the button's box (so the caption row lands where the labels were: the strip keeps its
   height), with its tap area stretched 8px above and below */
.pc-wt.is-compact .pc-wt__b{position:relative;min-height:0}
.pc-wt.is-compact .pc-wt__b::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.pc-wt.is-compact .pc-wt__cap,.pc-wt.is-empty .pc-wt__cap{display:block}
.pc-wt.is-empty{display:grid;place-items:center;min-height:50px}
.pc-wt.is-empty .pc-wt__cap{margin:0;color:var(--muted)}
/* locked in: mint with a tick */
.pc-wt__i.is-done .pc-wt__b{color:#CFF7E2}
.pc-wt__i.is-done .pc-wt__c{border-color:var(--mint);background:var(--mint);color:var(--ink)}
.pc-wt__i.is-done .pc-wt__c b{display:none}
.pc-wt__i.is-done .pc-wt__c svg{display:block}
/* the wallet on screen: the strip's pink "you are here" ring */
.pc-wt__i.is-now .pc-wt__b{color:var(--text)}
.pc-wt__i.is-now .pc-wt__c{border-color:var(--pink);background:var(--pink);color:#fff;animation:pcring 1.8s ease-out infinite}
/* can't be verified on this page yet (its row on the last page says why) */
.pc-wt__i.is-off .pc-wt__c{border-style:dashed;background:transparent;color:var(--dim)}
.pc-wt__i.is-off .pc-wt__b{color:var(--dim)}
/* the moment it locks: the circle swells green, a mint ring goes out, the tick draws itself (with the ding) */
.pc-wt__c::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--mint);opacity:0;pointer-events:none}
.pc-wt__c svg path{stroke-dasharray:22;stroke-dashoffset:0}
.pc-wt__i.is-pop .pc-wt__c{animation:pcwtpop .62s cubic-bezier(.22,1.4,.36,1) both}
.pc-wt__i.is-pop .pc-wt__c::after{animation:pcwtring .7s ease-out both}
.pc-wt__i.is-pop .pc-wt__c svg path{animation:pcwttick .34s .14s ease-out both}
@keyframes pcwtpop{0%{transform:scale(.6)}42%{transform:scale(1.26)}100%{transform:scale(1)}}   /* green from its first frame, then the swell */
@keyframes pcwtring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
@keyframes pcwttick{from{stroke-dashoffset:22}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ .pc-wt__i.is-now .pc-wt__c,.pc-wt__i.is-pop .pc-wt__c,.pc-wt__i.is-pop .pc-wt__c::after,.pc-wt__i.is-pop .pc-wt__c svg path{animation:none} }
/* rb/pc-30w, Option 1 "pages of ten" (Luke, 2 Nov): MORE THAN 10 WALLETS (app.js wtrack adds .pc-wt--pages only then; 10 or
   fewer is the strip above, untouched). The row shows one group of ten and Rip to unlock: today's 10-wallet row, same
   circles, same height. The compact caption's line carries "Wallet 13 of 30 | 1–10 · 11–20 · 21–30"; the groups are
   buttons, the one on show underlined pink, a group all locked in with a small mint tick */
.pc-wt.pc-wt--pages .pc-wt__i.is-out{display:none}
.pc-wt.pc-wt--pages .pc-wt__i.is-first::before{display:none}
.pc-wt.pc-wt--pages .pc-wt__cap{display:flex;justify-content:center;align-items:center;gap:6px 12px;flex-wrap:wrap;white-space:normal;color:var(--muted)}
.pc-wt.pc-wt--pages .pc-wt__at{color:var(--text)}
.pc-wt.pc-wt--pages .pc-wt__at b{font-weight:700}
.pc-wt.pc-wt--pages .pc-wt__sep{width:1px;height:12px;background:rgba(169,180,218,.38)}
.pc-wt.pc-wt--pages .pc-wt__pgs{display:inline-flex;align-items:center;gap:0}
.pc-wt__pg{position:relative;display:inline-flex;align-items:center;gap:3px;padding:0 10px;border:0;background:none;cursor:pointer;
  font:inherit;letter-spacing:inherit;line-height:inherit;color:var(--dim);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* a 44px tap area: from just under the circles down into the free space under the strip (never over a circle's own), and at
   least 44px wide and tall, centred on the group (a narrow one, "11", reaches a little past its own box) */
.pc-wt__pg::after{content:"";position:absolute;left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px));top:-6px;bottom:min(-24px,calc(100% - 38px))}
.pc-wt__pg:hover{color:var(--text)}
.pc-wt__pg svg{display:none;width:11px;height:11px;color:var(--mint)}
.pc-wt__pg.is-all{color:#CFF7E2}
.pc-wt__pg.is-all svg{display:block}
.pc-wt__pg.is-on{color:var(--text)}
.pc-wt__pg.is-on::before{content:"";position:absolute;left:10px;right:10px;bottom:-3px;height:2px;border-radius:1px;background:var(--pink)}
.pc-wt__pg:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px}

/* 4. ONE WALLET, ONE PAGE: a wallet's own stage is a card that fills it, everything centred down one column:
      tile, name, address, what it bought on; its $RIPS; the line on how it connects; Connect; then the two small
      actions. The wallets on the last page (the ones that can't be verified here) keep the compact rows. */
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest){flex:1 1 auto;justify-content:center}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;
  padding:clamp(18px,3vh,32px) clamp(16px,2.6vw,36px) clamp(14px,2.2vh,22px);border-radius:24px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(61,82,190,.28),rgba(10,15,46,0) 60%),rgba(10,15,46,.7)}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow > .pc-lrow__main{display:contents}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-wtile{order:0;width:clamp(52px,7vh,68px);height:clamp(52px,7vh,68px);border-radius:16px;border-width:3px;box-shadow:0 6px 0 var(--ink)}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-wtile svg{width:clamp(26px,3.4vh,32px);height:clamp(26px,3.4vh,32px)}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__who{order:1;align-items:center;gap:4px;margin-top:clamp(10px,1.6vh,16px)}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__who > b{font-size:clamp(22px,2.4vh + .4vw,30px);line-height:1.05}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__ps{justify-content:center;margin-top:6px}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lockchip{order:2;align-self:center;margin-top:clamp(12px,2vh,20px);min-height:38px;padding:8px 16px 7px;font-size:clamp(15px,1.2vh + .3vw,18px)}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lockchip .num{font-size:1.18em}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__note{order:3;max-width:44ch;margin-top:clamp(10px,1.6vh,14px);text-wrap:balance}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-signbox{order:4;align-self:stretch;margin-top:clamp(12px,1.8vh,16px);text-align:left}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act{order:5;align-self:stretch;display:flex;justify-content:center;margin-top:clamp(14px,2.4vh,22px)}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-btn{width:min(100%,380px);min-height:clamp(54px,6.6vh,62px);font-size:clamp(19px,1.8vh + .3vw,23px)}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-linked{min-height:clamp(54px,6.6vh,62px);font-size:clamp(20px,2vh,24px)}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-linked svg{width:24px;height:24px}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__more,.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-rmask{order:6}
/* signing: the message and the wallets to sign with take the place of the chips, the $RIPS line and Connect */
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-signing .pc-lrow__act{display:none}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-signing{padding-top:clamp(14px,2.2vh,22px)}
/* Connect later + Remove this wallet: small text actions under Connect, quieter than it (Luke: "smaller under the
   connect buttons") */
.pc-lrow__more{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 22px;margin-top:6px}
.pc-lrow__more .pc-textbtn{min-height:40px;padding:0 6px;font:700 15px/1.2 var(--ui);color:var(--muted);text-decoration-thickness:1.5px;text-decoration-color:rgba(169,180,218,.55)}
.pc-lrow__more .pc-textbtn:hover{color:#fff;text-decoration-color:currentColor}
.pc-lrow__more .pc-lrow__rm:hover{color:#FFB3B3}
/* the remove confirm, inline in the card where the actions were */
.pc-rmask{display:none}
.pc-lrow.is-rmask .pc-lrow__more,.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow.is-rmask .pc-lrow__act,.pc-lrow.is-rmask .pc-lrow__act{display:none}
.pc-lrow.is-rmask .pc-rmask{display:flex;flex-direction:column;align-items:center;gap:12px;align-self:stretch;margin-top:clamp(14px,2.4vh,22px);padding:14px 16px;
  border:2px solid rgba(255,138,138,.55);border-radius:18px;background:rgba(255,92,92,.08)}
.pc-rmask p{margin:0;max-width:42ch;font:600 var(--t-small)/1.4 var(--ui);color:#E4E9FF;text-wrap:balance}
.pc-rmask p b{font:400 1.08em/1.2 var(--display);color:#fff}
.pc-rmask__b{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pc-rmask__b .pc-btn{min-width:132px}
.pc-rmask__yes{background:#FF6B6B;border-color:var(--ink);color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.pc-rmask__yes:hover{filter:brightness(1.06)}
.pc-lrow.is-rmask{border-color:rgba(255,138,138,.6)}
@media (max-width:860px){
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow{padding:16px 14px 10px;border-radius:20px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-btn{width:100%}
  .pc-lrow__more{gap:0 14px}
  .pc-rmask__b .pc-btn{min-width:0;flex:1 1 0}
  .pc-rmask__b{align-self:stretch;flex-wrap:nowrap}
}
/* the dots pill hangs ~8px under the frame's bottom edge: the page keeps room for it (the frame now runs to the foot) */
@media (min-width:861px){ html.pc-staged .pc-main{padding-bottom:9px} }
/* the phone: the same compositions, tighter (spacing and sizes only, never the words), so the tallest stage (the
   sign step) fits above the bottom arrows */
@media (max-width:860px){
  .pc-link .pc-link__coin{width:46px;height:46px;margin-bottom:0}
  .pc-link .pc-keys__h{margin-top:12px;font-size:17px}
  .pc-link .pc-keys--or{margin-top:8px}
  .pc-link .pc-keys--or .pc-keys__b{padding:10px 12px;row-gap:4px}
  .pc-link .pc-keys--or .pc-keys__b b{font-size:16px}
  .pc-link .pc-keys--or .pc-keys__b > span:last-child{font-size:15px;line-height:1.35}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow{padding:14px 12px 4px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-wtile{width:48px;height:48px;border-radius:14px;box-shadow:0 4px 0 var(--ink)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-wtile svg{width:24px;height:24px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__who{margin-top:8px;gap:2px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__who > b{font-size:22px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lockchip{margin-top:10px;min-height:34px;padding:6px 12px 5px;font-size:15px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__note{margin-top:8px;font-size:15px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act{margin-top:12px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-btn{min-height:52px;font-size:20px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-linked{min-height:52px}
  .pc-lrow__more{margin-top:2px}
  /* the sign step: name and address over the message and the wallets to sign with (the tile steps aside) */
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-signing{padding-top:12px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-signing .pc-wtile{display:none}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-signing .pc-lrow__who{margin-top:0}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-signbox{margin-top:10px;padding:10px}
  .pc-pager .pc-signbox pre{margin:6px 0 8px;padding:8px 10px;font-size:13.5px;line-height:1.4}
  .pc-pager .pc-signbox__k{margin-bottom:6px}
  .pc-pager .pc-wpick__b{min-height:46px}
  .pc-lrow.is-rmask .pc-rmask{margin-top:12px;padding:12px}
}
/* short desktop windows (570-700px tall): the wallet card puts its tile beside the name, and the remove confirm
   stands in for the how-it-connects line, so every state fits the frame */
@media (min-width:861px) and (max-height:700px){
  .pc-link .pc-link__coin{width:44px;height:44px;margin-bottom:0}
  .pc-link .pc-keys__h{margin-top:10px}
  .pc-link .pc-keys--or{margin-top:8px}
  .pc-link .pc-keys--or .pc-keys__b{padding:10px 14px;row-gap:4px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);align-items:center;column-gap:0;padding:14px 20px 4px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow > *,.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow > .pc-lrow__main > *{grid-column:1 / -1;justify-self:center}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow .pc-wtile{grid-column:2;grid-row:1;margin-right:14px;width:52px;height:52px;box-shadow:0 4px 0 var(--ink)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow .pc-lrow__who{grid-column:3;grid-row:1;align-items:flex-start;text-align:left;margin-top:0;gap:2px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow .pc-lrow__who > b{font-size:22px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__ps{justify-content:flex-start;margin-top:3px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lockchip{margin-top:10px;min-height:34px;padding:6px 14px 5px;font-size:15px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__note{margin-top:6px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow > .pc-lrow__main > .pc-lrow__act,.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow > .pc-signbox,
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow > .pc-rmask{justify-self:stretch}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act{margin-top:10px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-btn,.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-linked{min-height:50px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-signbox{margin-top:10px;padding:10px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-signing{padding-top:12px}
  .pc-pager .pc-signbox pre{margin:6px 0 0;padding:7px 10px;font-size:14px;line-height:1.35}
  .pc-pager .pc-wpick__b{min-height:40px}
  .pc-pager .pc-wpick{gap:5px}
  .pc-lrow__more{margin-top:2px}
  .pc-lrow__more .pc-textbtn{min-height:36px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-rmask .pc-lrow__note,
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-rmask .pc-lrow__ps{display:none}
  .pc-lrow.is-rmask .pc-rmask{margin-top:10px;margin-bottom:10px;padding:10px 14px;gap:10px}
}
/* the phone: the strip's numbers always keep two lines' room (a third number, or a longer one, wraps them), so the
   strip, and the frame under it, is the same height whoever is playing and whatever is locked or removed */
@media (max-width:560px){
  html.pc-staged .pc-stake__nums{min-height:38px;align-content:flex-start}
  .pc-link .pc-link__coin{width:40px;height:40px}
  .pc-link .pc-stg .pc-ptitle{margin-top:2px}
  .pc-link .pc-stg .pc-plead{margin-top:6px;font-size:16px;line-height:1.42}
  .pc-link .pc-keys__h{margin-top:10px}
  .pc-link .pc-keys--or{margin-top:6px}
  .pc-link .pc-keys--or .pc-keys__b{padding:9px 12px}
}
/* How to unlock's last page on the phone (the timeline, Rip, the small print): spacing only, so it fits its fixed
   frame above the Back arrow for every player */
@media (max-width:560px){
  .pc-pager .pc-tl{padding-top:12px;padding-bottom:10px}
  .pc-pager .pc-tl ol{gap:6px}
  .pc-pager .pc-tl__i{row-gap:0}
  .pc-dash .pc-stg > .pc-center{margin-top:10px}
  .pc-dash .pc-stg > .pc-center .pc-fine{margin-top:8px;line-height:1.35}
}
/* the two small actions keep a 44px tap area without taking more room */
.pc-lrow__more .pc-textbtn{position:relative}
.pc-lrow__more .pc-textbtn::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* ==== VERIFY ROUND 2, review fixes (25 Oct) ==== */
/* the toast on the staged pages: inside the frame, over the card it is about (app.js placeToast); a little smaller */
.pc-toast.is-inframe{bottom:auto;padding:7px 14px;font-size:14px;line-height:1.3;transform:translate(-50%,0) scale(.94)}
.pc-toast.is-inframe.is-on{transform:translate(-50%,0) scale(1)}
/* its slot: a single-wallet card keeps room above it for the toast (54px from the frame's top edge) where the frame is
   tight; while signing or confirming a remove the card is taller and no toast shows, so the slot gives way */
@media (max-width:860px){
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow:not(.is-signing):not(.is-rmask){margin-top:33px}
  /* (so the tallest card, a two-line name, still fits under that slot) */
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow{padding-top:12px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-wtile{width:44px;height:44px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lockchip{margin-top:8px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__note{margin-top:6px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act{margin-top:10px}
}
@media (min-width:861px) and (max-height:700px){
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow:not(.is-signing):not(.is-rmask){margin-top:42px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow{padding-bottom:2px}
  .pc-lrow__more{margin-top:0}
  .pc-lrow__more .pc-textbtn{min-height:32px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__note{max-width:none;font-size:15px}   /* one line where it can be */
}
/* locked: the green chip says it; no separate LOCKED IN row (the note under it now says who it's linked to) */
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow.is-done > .pc-lrow__main > .pc-lrow__act{display:none}
/* the wallet being signed with: "Signing…" on one line, the button keeps its height */
.pc-wpick__b.is-busy{white-space:nowrap;cursor:progress;opacity:1;filter:none}
.pc-wpick__b.is-busy svg{width:20px;height:20px;color:var(--pink-hi)}
/* the phone's two wallet buttons side by side: label, icon and padding that leave the border clear */
@media (max-width:860px){
  .pc-pager .pc-wpick__b{gap:8px;padding:0 12px;font-size:15px}
  .pc-pager .pc-wpick__b img{width:28px;height:28px}
}
/* page 1: the two boxes line up (their title rows share one height; Luke's own words for the titles are kept) */
@media (min-width:561px){
  .pc-link .pc-keys--or{grid-template-rows:auto auto}
  .pc-link .pc-keys--or > .pc-keys__b{grid-row:1 / span 2;grid-template-rows:subgrid;align-content:normal}
  .pc-link .pc-keys--or > .pc-keys__or{grid-row:1 / span 2}
}
/* the top-up once the $1 has arrived: the waiting box becomes the lock, the mock button a quiet confirmed pill */
.pc-waitbox.is-done{border-color:var(--mint);background:rgba(110,231,168,.1)}
.pc-waitbox.is-done > svg{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--mint);color:var(--ink)}
.pc-waitbox.is-done b{color:var(--mint)}
.pc .pc-sim.is-done[disabled]{opacity:1;filter:none;cursor:default;border-style:solid;border-color:rgba(110,231,168,.7);background:rgba(110,231,168,.1);color:var(--mint)}
.pc .pc-sim.is-done svg{width:18px;height:18px}

/* pc62: the real wallet proof. The error says what went wrong and what to do, under the picker, in the field-error red
   the wallet list already uses (.pc-in.is-err). The $1 step for real players: "Coming soon" where the address goes. */
.pc-proof-err{margin:10px 0 0;font:700 14px/1.4 var(--ui);color:#FF8A9C;text-wrap:pretty}
.pc-pager .pc-signbox > .pc-proof-err,.pc-pager .pc-signbox > .pc-lrow__note{grid-column:1 / -1}
.pc-signbox > .pc-lrow__note{margin-top:8px}
.pc-dep--soon{grid-template-columns:minmax(0,1fr)}
.pc-dep--soon .pc-dep__r{align-items:flex-start}
.pc-dep--soon .pc-dep__net{display:block;font-weight:600;line-height:1.4;color:var(--muted)}
a.pc-wpick__b{text-decoration:none}
@media (max-width:640px){.pc-dep--soon .pc-dep__r{align-items:center;text-align:center}}

/* pc103 (Luke, 2 Nov): the "Picked up where you left off. Start over" pill (pc63) went; pc107 (Luke 2 Nov: 'until I say')
   brought it back for team testing, remove before launch. rb/pc-startover-pill (Luke, 4 Nov, mock A, no underline): it is now
   one small "Start over" pill at the top centre of every screen, out of the flow (rules with the base .pc-resume above).
   pc63's lesson stands: in the flow it pushed every stage past its frame after a reload (16 stage-qa failures). */
.pc-main > .pc-resume{animation:pcin .32s ease-out both}   /* arrives with the screen, as the Mock badge does */
/* the demo's Mock badge (?mock=1 only) shares that row: it gives way while the pill is up (until the next screen) */
html.pc-staged .pc-main:has(.pc-resume) > .pc-mock{display:none}
/* pc63: a real player who has not locked every wallet gets the "N $RIPS not locked yet / Lock them in" row in the unlock
   panel (the demo's How to unlock preview has every wallet locked, so it never showed): on the phone that panel came
   within 14px of Back / Next. Trimmed from the panel's own padding and gaps (18px+ clear, also with a three-line strip). */
@media (max-width:560px){
  html.pc-staged .pc-stg .pc-prog{padding-top:12px;padding-bottom:10px}
  html.pc-staged .pc-stg .pc-dash__wait{margin-top:10px;gap:6px 12px}
  /* and with a third strip line ("Held for you", wallets that can't be linked yet) the strip is ~20px taller: 10px more */
  html.pc-staged .pc-stg .pc-prog .pc-ubar{margin-top:24px}
  html.pc-staged .pc-stg .pc-prog .pc-ubar__ticks{margin-top:6px}
  html.pc-staged .pc-stg .pc-prog .pc-unl__t{margin-top:6px}
}
/* pc63: the wallets screen at Luke's 1147x655, signed in (the BlockRips account row above three boxes): it scrolled
   60px, with Check my wallets on the bottom edge and the never-ask line below it. The short-window rule above set the
   form's top padding to 0, but the later .pc-wal__form rule (8vh - 24px) won the cascade; it is set again here, after
   it, with the gaps trimmed a little. The page still scrolls when more rows are added (Luke, 23 Oct). */
@media (min-width:861px) and (max-height:700px){
  .pc-wal__form{padding-top:0;padding-bottom:8px}
  .pc-wal__form .pc-prof{margin-bottom:8px}
  .pc-wal__sub{margin:6px 0 8px}
  .pc-wal__punch{margin-bottom:10px}
  .pc-acctlist{margin-bottom:8px}
  .pc-ins{gap:8px}
  .pc-wal__go{margin-top:10px}
}
/* pc63: the stepper's line into a step is green only when the step BEFORE it is done (it went green into "Rip to unlock"
   while "Link wallets 0/3" was unfinished) */
.pc-track li:not(.is-reached)::before{background:rgba(169,180,218,.28)}
/* pc64: card 2's "$1 USDC = 1.4 $RIPS" picture, inside the Kickstart: a plain label under the rate (it is double the title's) */
.pc-steps3__eq > span{position:relative}
.pc-eqnote{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:2px;white-space:nowrap;font:700 13px/1.1 var(--ui);font-style:normal;color:var(--pink-hi)}
.pc-steps3__eq:has(.pc-eqnote){margin-bottom:22px}   /* the label hangs under the rate, so the two coins stay level */
/* a short desktop window (1000x570): the cards stage ran 20px past its frame on pc62 (badges cut by the frame's top);
   the two coins a size down there fit it */
@media (min-width:861px) and (max-height:620px){
  .pc-pager .pc-eqcoin.pc-coinspin{width:72px;height:72px}
  .pc-pager .pc-eqcoin{width:60px;height:60px}
  .pc-pager .pc-steps3 li{padding-top:20px;padding-bottom:8px}
  .pc-steps3__eq:has(.pc-eqnote){margin-bottom:16px}
  .pc-pager .pc-steps3 p{line-height:1.38}
}

/* ---- THE KICKSTART ON THE UNLOCK BAR (option B, Luke 25 Oct; docs/pack-checker/decisions/kickstart-reveal.md) --------
   The label sits ABOVE the bar as its own line (it used to hang out of the band, which kept the bar from clipping), so
   the bar clips the stripes and the fill to its round ends: no square corner, no flat tab. The Kickstart's stretch is
   faint outline stripes on the bar's dark track (clearly not filled) with a pink edge where it ends; the gold fill sits
   on top with a dark seam, at least as wide as the track is tall once anything is unlocked. */
.pc-ubar__k{display:block;margin-top:16px;font:400 13px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--pink-hi)}
.pc-ubar.pc-ubar--ks{overflow:hidden;margin-top:18px}
.pc-ubar__k + .pc-ubar.pc-ubar--ks{margin-top:7px}
.pc-ubar__ks{z-index:1;background:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(255,95,162,.42) 7px 9px);box-shadow:inset -3px 0 0 var(--pink-hi)}
.pc-ubar--ks .pc-ubar__fill{z-index:2;border-radius:0;box-shadow:3px 0 0 #070A22}
/* square-ended: the bar's own round end shapes it, so a small amount fills that end (a half-disc) plus a little body,
   never a coin or a lens. 18px = just past the end's curve (inner height 32px) */
.pc-ubar--ks .pc-ubar__fill.is-some{min-width:18px}
/* the stretch always shows a few stripes past that fill: on a phone 10% of the bar is ~27px, which the 18px fill and its
   seam all but covered (round 2). 52px = 18px fill + 3px seam + about three stripes */
.pc-ubar__ks{min-width:52px}
.pc-ks-done{display:flex;align-items:flex-start;gap:8px;color:var(--mint)}
.pc-ks-done svg{flex:none;width:18px;height:18px;margin-top:-1px}
@media (min-width:861px) and (max-height:620px){
  .pc-ubar__k{margin-top:12px}
}
@media (max-width:860px){
  .pc-ubar__k{margin-top:14px}
  .pc-ubar.pc-ubar--ks{margin-top:14px}
}

/* How to unlock's three cards (desktop): the pictures share one row, so the three headings line up (card 2's "In your
   Kickstart" line made its heading sit ~19px lower); and card 2's two coin labels sit on one line (the coins differ in
   size, so the labels used to sit 6-8px apart) */
@media (min-width:861px){
  .pc-pager .pc-steps3:not(.pc-steps3--one) > li{display:grid;grid-template-rows:subgrid;grid-row:span 3;justify-items:center;align-content:start;row-gap:0}
  .pc-pager .pc-steps3:not(.pc-steps3--one) > li > .pc-steps3__art{align-self:stretch;justify-self:stretch}   /* a real width (the fan's packs are absolute) */
}
.pc-steps3__eq{align-items:flex-end}
/* no lone last word in the three cards' text or the Kickstart line (round 2: "more." / "unlock." / "claimable.") */
.pc-steps3 p,.pc-unl__t{text-wrap:pretty}
.pc-steps3__eq > em{align-self:center}
/* the real $1 (Phase 2, pc65): "Can't sign? Send $1 instead": a text button in the row under the wallet on a computer,
   a cell of the picker on a phone (where it takes the place "Other wallet" has on a computer); the address loading line;
   the waiting box's icon */
.pc-wpick__b--send{display:none}
.pc-wpick__b svg.pc-wpick__usdc{width:24px;height:24px;flex:none;color:inherit}
@media (max-width:860px){
  .pc-lrow__alt{display:none}
  .pc-pager .pc-wpick--alt .pc-wpick__b--send{display:flex;grid-column:1 / -1}
  /* spacing only, so the sign stage keeps 16px clear of the bottom arrows with the extra row */
  .pc-pager .pc-wpick.pc-wpick--alt{gap:6px}
  .pc-pager .pc-wpick--alt .pc-wpick__b{min-height:44px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-signing:has(.pc-wpick--alt){padding-top:8px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-signing:has(.pc-wpick--alt) .pc-signbox{margin-top:6px;padding:8px 10px}
  .pc-pager .pc-signbox:has(.pc-wpick--alt) pre{margin:4px 0 6px}
  .pc-pager .pc-lrow.is-signing:has(.pc-wpick--alt) .pc-lrow__more{margin-top:0}
  .pc-pager .pc-lrow.is-signing:has(.pc-wpick--alt) .pc-lrow__more .pc-textbtn{min-height:36px}
}
.pc-dep--soon .pc-dep__net.pc-dep__net--load{display:inline-flex;align-items:center;gap:8px}
.pc-dep--soon .pc-dep__net--load svg{width:16px;height:16px}
.pc-waitbox[data-sendwait] > svg{flex:none}
/* the EVM $1.0x (Phase 3, pc67): the odd amount stays the big gold number; one plain line under the network says to send
   exactly it (sentence case, the muted body colour: it is guidance, not a label) */
.pc-onedollar .pc-onedollar__x{font:600 14px/1.4 var(--ui);font-style:normal;color:var(--muted);text-align:center;max-width:34ch;margin-top:2px}
.pc-onedollar[aria-busy="true"] b{opacity:.55}

/* pc69 (reviewer, 26 Oct): the very short desktop window (1000x570). With "No wallet app found" under the wallets, the
   sign card was 23px taller than the stage and pressed into the frame's top edge. A little less height here, so every
   sign state fits; nothing changes above 600px tall. Headings that wrap keep words together ("An app holds / the keys"). */
@media (min-width:861px) and (max-height:600px){
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow.is-signing{padding-top:8px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow.is-signing .pc-wtile{width:44px;height:44px}
  .pc-pager .pc-wpick__b{min-height:36px}
  .pc-pager .pc-signbox > .pc-proof-err{margin-top:6px;line-height:1.3}
}
.pc-keys__b b{text-wrap:balance}
.pc-onedollar__x{text-wrap:balance}
/* pc69: the quiet Terms link inside the small print: same size and colour as the line, underlined, never split;
   the padding widens the tap area without moving the line */
.pc-terms{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap;padding:10px 4px;margin:-10px -4px;border-radius:6px}
.pc-terms:hover{color:#fff}
.pc-terms:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
/* pc69: the one ID-check line on the EVM send step, for a site that checks ID before money leaves (idFirst). The
   quiet gold of the lock line (.pc-lockline), on the address stage between the address box and the small print */
.pc-tu__id{display:flex;align-items:flex-start;justify-content:center;gap:8px;margin:12px auto 0;max-width:560px;font:700 15px/1.35 var(--ui);color:var(--gold-1);text-align:left;text-wrap:pretty}
.pc-tu__id svg{width:18px;height:18px;flex:none;margin-top:1px}
.pc-tu__id + .pc-pfoot{margin-top:8px}
@media (max-width:560px){ .pc-tu__id{font-size:14px;margin-top:10px} .pc-tu--id .pc-dep__qr{width:100px;height:100px} }   /* the line's room on a phone: a smaller QR (scanned from another screen; the phone copies) */
@media (min-width:861px) and (max-height:620px){ .pc-tu__id{font-size:14px;margin-top:8px} }
/* Round 2 (pc70): THE WALLETS SCREEN FITS ITS WINDOW with three wallets pasted and the "Your BlockRips account" row loaded
   (DECISIONS §4, no scrolling on the later screens). It ran 68px past 1000x570, "Check my wallets" cut at the bottom, and 78px
   past 390x844. Spacing and row heights only: every line, row and button is still there, every tap target is >= 44px, no
   text under 13px. More rows than fit still grow the page (Luke, 23 Oct). Measured with tools/qa/pc-release-26oct/walr2.mjs. */
@media (min-width:861px) and (max-height:620px){
  .pc-screen--wallets .pc-wal__form{padding-bottom:0}
  .pc-screen--wallets .pc-wal__form .pc-prof{margin-bottom:4px}
  .pc-screen--wallets .pc-prof__av{width:40px;height:40px}
  .pc-screen--wallets .pc-acct{margin-bottom:4px}
  .pc-screen--wallets .pc-wal__sub{margin:4px 0 6px;line-height:1.35}
  .pc-screen--wallets .pc-wal__punch{margin:4px 0 6px}
  .pc-screen--wallets .pc-wal__lh{margin-bottom:6px}
  .pc-screen--wallets .pc-acctlist{margin-bottom:6px}
  .pc-screen--wallets .pc-in--acct .pc-in__row{min-height:46px;padding-top:4px;padding-bottom:4px}
  .pc-screen--wallets .pc-ins{gap:6px}
  .pc-screen--wallets .pc-in__row{min-height:48px}
  .pc .pc-screen--wallets .pc-in__f{height:42px}
  .pc-screen--wallets .pc-wal__go{margin-top:6px}
  .pc-screen--wallets .pc-wal__go .pc-btn--lg{min-height:50px}
  .pc-screen--wallets .pc-addrow{min-height:46px}
  .pc-screen--wallets .pc-wal__meta{margin-top:6px}
}
@media (max-width:560px){
  .pc-screen--wallets .pc-wal__form{padding-top:6px}
  .pc-screen--wallets .pc-wal__form .pc-prof{margin-bottom:10px}
  .pc-screen--wallets .pc-acct{margin-bottom:6px}
  .pc-screen--wallets .pc-wal__sub{margin:8px 0 10px}
  .pc-screen--wallets .pc-wal__punch{margin:4px 0 10px}
  .pc-screen--wallets .pc-acctlist{margin-bottom:8px}
  .pc-screen--wallets .pc-in--acct .pc-in__row{padding-top:5px;padding-bottom:5px;row-gap:4px}
  .pc-screen--wallets .pc-ins{gap:8px}
  .pc-screen--wallets .pc-in__row{min-height:52px}
  .pc .pc-screen--wallets .pc-in__f{height:46px}
  .pc-screen--wallets .pc-wal__go{margin-top:10px;gap:8px}
  .pc-screen--wallets .pc-wal__go .pc-btn--lg{min-height:54px}
  .pc-screen--wallets .pc-addrow{min-height:46px}
  .pc-screen--wallets .pc-wal__meta{margin-top:8px}
}
/* Round 2 (pc70): card 2's rate picture is an unlock rate, not a price: an arrow where the "=" was, and words that never part
   from their number ("0.7 $RIPS unlocked" on one line) */
.pc-steps3__eq > em{display:grid;place-items:center}
.pc-steps3__eq > em svg{display:block;width:28px;height:28px}
.pc-steps3__eq b{white-space:nowrap;text-align:center}
.pc-steps3__eq{gap:10px}
@media (min-width:861px) and (max-height:620px){ .pc-pager .pc-steps3__eq b{font-size:13px} .pc-pager .pc-steps3__eq{gap:6px} }
/* Round 2: on a phone the "not locked yet" line sits beside its lock (it wrapped under it and left the lock alone on a
   line), the button under both, so the line can carry "576 of them already unlocked by your rips" at no extra height */
@media (max-width:560px){ .pc-dash__wait > span{flex:1 1 calc(100% - 30px);min-width:0} .pc-dash__wait > svg{align-self:flex-start;margin-top:2px} html.pc-staged .pc-stg .pc-dash__wait{margin-top:6px;row-gap:4px} html.pc-staged .pc-stg .pc-prog .pc-prog__h + .pc-ubar{margin-top:12px} }   /* no Kickstart label above the bar (used up): its 24px room is not needed */

/* ==== pc71: LUKE'S 9 EDITS (26 Oct walkthrough, docs/pack-checker/luke-walkthrough-26oct.md). Only these; last rule wins. ==== */
/* 2. "Your BlockRips account": no pink tile behind the mark (pc72 note 11 sets the mark itself: the star, square) */
.pc-in__n--acct{border-radius:0;background:none;padding:0}
.pc-wtile--acct{border:0;border-radius:0;background:none;box-shadow:none}
/* 4. Terms: one small quiet link in the bottom-right corner of every full page (app.js termsCorner); never over the lobby
      screens. At the page's foot (so on the result, which scrolls, it sits under the content, never over it), under the
      sheets (50) and the toast (70); its hit area is 44px tall */
body.pc{position:relative}   /* the corner link's box: the page's own bottom-right (the window's, unless the page scrolls) */
.pc-terms--corner{position:absolute;right:clamp(12px,1.6vw,24px);bottom:clamp(6px,1.2vh,14px);z-index:25;margin:0;padding:12px 6px;line-height:20px;
  font:600 13px/20px var(--ui);letter-spacing:.02em;color:rgba(201,210,245,.72);text-decoration-color:rgba(201,210,245,.4)}
.pc-terms--corner[hidden]{display:none}
.pc-terms--corner:hover{color:#fff;text-decoration-color:currentColor}
/* 5 + 7. THE LAST VERIFY STAGE (Luke: "looks awful"). Same content and the same order of actions (Add another wallet, then See
      my airdrop); the player's locked-in figure leads, in the page's own gold sticker type, with the spinning $RIPS coin. A wallet
      left without connecting has a "Connect later" row here with its Connect (back to its page), and a gold ring in the tracker. */
.pc-link .pc-stg > .pc-lsum2{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:clamp(10px,1.2vw,16px);row-gap:0;margin:0 0 2px}
.pc-lsum2__coin.pc-coinspin,.pc-lsum2__coin{grid-row:span 2;width:clamp(52px,8vh,80px);height:clamp(52px,8vh,80px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.pc-lsum2__n{display:flex;align-items:baseline;gap:8px;margin:0;line-height:1}
.pc-lsum2__n b{font:400 clamp(42px,7.4vh,74px)/1 var(--display);color:transparent;background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 45%,var(--gold-3) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 var(--ink))}
.pc-lsum2__n span{font:400 clamp(17px,2vh,22px)/1 var(--display);color:var(--gold-2);text-shadow:0 2px 0 var(--ink)}
.pc-lsum2__k{margin:4px 0 0;font:400 clamp(14px,1.5vh,17px)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--mint)}
.pc-link .pc-stg > .pc-lsum2 + .pc-allin{margin-top:clamp(8px,1.4vh,14px)}
.pc-link .pc-stg > .pc-allin{justify-self:center;align-self:center;padding:7px 14px 6px;border-radius:999px;border:2px solid rgba(110,231,168,.55);background:rgba(110,231,168,.1);font-size:13px}
.pc-link .pc-stg > .pc-lsum2 ~ .pc-lrows--rest,.pc-link .pc-stg > .pc-lsum2 ~ .pc-later,.pc-link .pc-stg > .pc-later + .pc-lrows--rest{margin-top:clamp(12px,2vh,18px)}
.pc-later{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pc-link .pc-stg > .pc-later{margin:0}
.pc-later > .pc-lrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:12px;row-gap:4px;padding:8px 10px 8px 10px;border-radius:16px}
.pc-later > .pc-lrow > .pc-lrow__main{display:contents}
.pc-later .pc-wtile{grid-column:1;width:38px;height:38px;border-radius:11px}
.pc-later .pc-wtile svg{width:19px;height:19px}
.pc-later .pc-lrow__who{grid-column:2;min-width:0}
.pc-later .pc-lrow__who > b{font-size:17px}
.pc-later .pc-lockchip--later{grid-column:3;grid-row:1;align-self:center}
.pc-later .pc-lrow__act{grid-column:4;grid-row:1}
.pc-link .pc-stg > .pc-later + .pc-nudge{margin-top:clamp(12px,2vh,18px)}
.pc-link .pc-stg > .pc-lrows--rest + .pc-nudge,.pc-link .pc-stg > .pc-allin + .pc-nudge,.pc-link .pc-stg > .pc-lsum2 + .pc-nudge{margin-top:clamp(12px,2vh,18px)}
.pc-link .pc-stg > .pc-lrows--rest{margin-bottom:0}
.pc-link .pc-stg > .pc-lrows--rest > .pc-lrow{padding:10px 12px 10px 12px;gap:6px;border-radius:16px}
.pc-link .pc-stg > .pc-lrows--rest .pc-wtile{width:40px;height:40px;border-radius:11px}
.pc-link .pc-stg > .pc-lrows--rest .pc-wtile svg{width:20px;height:20px}
.pc-lrow--later{border-color:rgba(255,212,71,.45)}
.pc-lrow--later .pc-lrow__act .pc-btn{min-height:44px;font-size:16px;padding:0 20px}
.pc-lockchip--later{align-self:flex-start;gap:6px;border:2px solid rgba(255,212,71,.55);border-radius:8px;box-shadow:none;background:rgba(255,212,71,.12);color:#FFE7A0;
  font:700 13px/1 var(--ui);letter-spacing:.01em;text-transform:none;min-height:26px;padding:4px 9px}
.pc-lockchip--later svg{width:14px;height:14px;flex:none;color:var(--gold-2)}
.pc-lsum2__go{display:flex;align-items:stretch;gap:12px;margin-top:clamp(12px,2vh,18px)}
.pc-lsum2__go > *{margin:0;flex:1 1 0;min-width:0}
.pc-lsum2__go > .pc-btn--pink{flex:1.25 1 0}
.pc-link .pc-lsum2__go .pc-add{min-height:54px;border:2.5px solid rgba(241,234,219,.6);border-radius:999px;background:rgba(11,16,48,.7);color:#fff;font-size:16px;box-shadow:0 4px 0 var(--ink);cursor:pointer}
.pc-link .pc-lsum2__go .pc-add:hover{border-color:var(--cream);background:rgba(27,37,96,.9)}
.pc-link .pc-lsum2__go .pc-add:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.pc-link .pc-lsum2__go .pc-add svg{width:16px;height:16px;color:var(--mint)}
.pc-link .pc-lsum2__go .pc-btn{min-height:54px;padding:0 18px;white-space:nowrap}
.pc-link .pc-stg > .pc-lsum2__go + .pc-pfoot{margin-top:clamp(10px,1.6vh,14px);font-size:14px;color:#9FAADA}
.pc-wt__i.is-later .pc-wt__c{border-color:var(--gold-2);border-style:solid;color:var(--gold-1)}
@media (max-width:560px){
  .pc-lsum2__coin.pc-coinspin,.pc-lsum2__coin{width:50px;height:50px}
  .pc-lsum2__n b{font-size:clamp(36px,11vw,46px)}
  .pc-lsum2__n span{font-size:17px}
  .pc-link .pc-stg > .pc-lsum2__go{margin-top:12px}
  .pc-link .pc-stg > .pc-later + .pc-nudge,.pc-link .pc-stg > .pc-allin + .pc-nudge,.pc-link .pc-stg > .pc-lrows--rest + .pc-nudge{margin-top:12px}
  .pc-later > .pc-lrow{grid-template-columns:auto minmax(0,1fr) auto;padding:8px 10px;column-gap:10px}
  .pc-later .pc-wtile{width:34px;height:34px;border-radius:10px}
  .pc-later .pc-lrow__who > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pc-later .pc-lrow__act .pc-btn{padding:0 16px;font-size:15px}
  .pc-later .pc-lockchip--later{grid-column:2 / -1;grid-row:2;justify-self:start}
  .pc-later .pc-lrow__act{grid-column:3;grid-row:1}
  .pc-lsum2__go{flex-direction:column;gap:10px}
  .pc-lsum2__go > *,.pc-lsum2__go > .pc-btn--pink{flex:none}
  .pc-link .pc-lsum2__go .pc-add,.pc-link .pc-lsum2__go .pc-btn{min-height:50px}
  .pc-link .pc-stg > .pc-lsum2__go + .pc-pfoot{font-size:13px}
}
@media (min-width:861px) and (max-height:700px){
  /* short windows: the figure on one line (coin, number, "Locked in") so the stage holds what it held before */
  .pc-link .pc-stg > .pc-lsum2{grid-template-columns:auto auto auto;column-gap:10px}
  .pc-lsum2__coin.pc-coinspin,.pc-lsum2__coin{grid-row:auto;width:38px;height:38px}
  .pc-lsum2__n b{font-size:34px}
  .pc-lsum2__k{margin:0;align-self:center}
  .pc-link .pc-stg > .pc-lsum2 ~ .pc-lrows--rest,.pc-link .pc-stg > .pc-lsum2 ~ .pc-later,.pc-link .pc-stg > .pc-lsum2 + .pc-allin{margin-top:8px}
  .pc-link .pc-stg > .pc-lrows--rest + .pc-nudge,.pc-link .pc-stg > .pc-allin + .pc-nudge,.pc-link .pc-stg > .pc-later + .pc-nudge,.pc-lsum2__go{margin-top:10px}
  .pc-link .pc-lsum2__go .pc-add,.pc-link .pc-lsum2__go .pc-btn{min-height:48px}
}
@media (max-width:560px){
  /* the phone: the figure on one line too, so a skipped wallet's row fits on the last stage with it */
  .pc-link .pc-stg > .pc-lsum2{grid-template-columns:auto auto auto;column-gap:8px}
  .pc-lsum2__coin.pc-coinspin,.pc-lsum2__coin{grid-row:auto;width:34px;height:34px}
  .pc-lsum2__n b{font-size:32px}
  .pc-lsum2__k{margin:0;align-self:center;font-size:13px}
  .pc-link .pc-stg > .pc-lsum2 ~ .pc-later,.pc-link .pc-stg > .pc-lsum2 + .pc-allin{margin-top:10px}
  .pc-link .pc-stg > .pc-later + .pc-nudge,.pc-link .pc-stg > .pc-lsum2 + .pc-nudge,.pc-link .pc-stg > .pc-allin + .pc-nudge{margin-top:10px}
  .pc-link .pc-stg > .pc-lsum2__go{margin-top:10px;gap:8px}
  .pc-later > .pc-lrow{padding-top:6px;padding-bottom:6px;row-gap:2px}
}
/* 6. THE NEXT BUTTON (Luke: the "Next" tab under the round arrow didn't connect to it). The arrow and the word are one button:
      one pink sticker shape (ink edge, offset ink shadow, the same slow breathing glow), one hit area. On a computer it is a
      tall capsule straddling the frame's edge, as wide as the round arrow was (so no stage lane changes); on a phone a
      "Next ->" pill on the frame's bottom edge. Back is the same shape, quiet navy. */
.pc-pagerframe{--arwh:84px;--arwbh:74px}
.pc-pager__go--next{top:calc(50% - var(--arwh) / 2);height:var(--arwh)}
.pc-pager__go--prev{top:calc(50% - var(--arwbh) / 2);height:var(--arwbh)}
.pc-pager__go--next::before{border-radius:999px;inset:-8px}
.pc-pager__btn{border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.pc-pager__btn > svg{flex:none}
.pc-pager__btn > .pc-pager__lbl{position:static;transform:none;padding:0;margin:0;border-radius:0;background:none;z-index:auto;
  font:400 13px/1 var(--display);letter-spacing:.03em;white-space:nowrap;pointer-events:none}
.pc-pager__next > .pc-pager__lbl{color:#fff;text-shadow:0 2px 0 rgba(120,0,50,.45)}
.pc-pager__prev > .pc-pager__lbl{color:var(--cream);font-size:12px}
.pc-pager__next svg{width:26px;height:26px}
.pc-pager__prev svg{width:20px;height:20px}
.pc-pager__prev{box-shadow:0 4px 0 var(--ink)}
.pc-pager__prev:active{box-shadow:0 2px 0 var(--ink)}
@media (max-width:860px){
  .pc-pagerframe,.pc-dash.pc-pagerframe{--arwh:48px;--arwbh:44px}
  .pc-pager__go--next{top:auto;width:auto;height:var(--arw);bottom:calc(var(--arw) / -2 - 1.5px)}
  .pc-pager__go--prev{top:auto;width:auto;height:var(--arwb);bottom:calc(var(--arwb) / -2 - 1.5px)}
  .pc-pager__go--next::before{inset:-6px;animation-name:pcarwglowp}
  .pc-pager__btn{flex-direction:row;gap:6px;padding:0 18px}
  .pc-pager__next{padding:0 16px 0 20px}
  .pc-pager__prev{padding:0 16px 0 12px}
  .pc-pager__next > .pc-pager__lbl{order:-1;font-size:16px}
  .pc-pager__prev > .pc-pager__lbl{font-size:14px}
  .pc-pager__next svg{width:22px;height:22px}
  .pc-pager__prev svg{width:18px;height:18px}
}
@keyframes pcarwglowp{0%,100%{opacity:0;transform:scale(.94)}50%{opacity:1;transform:scale(1.1)}}
/* 3. the result's card glides in from where the rip left it (app.js cardGlide); what is around it waits, then fades in */
.pc-prefade{opacity:.002}   /* not 0: a layer at 0 is not rastered, and its raster then stalled the first 250ms of the move */
.pc-glowkeep{z-index:-1}   /* the rip's glow, kept behind the result while its card travels (app.js keepGlow) */
.pc-res__slab .pc-slab__hint{transition:opacity .3s ease}
.pc-res__slab.is-gliding .pc-slab__hint{opacity:0;visibility:hidden;transition:none}

/* ==== pc72: LUKE'S ROUND 2 NOTES 10-17 (26 Oct, docs/pack-checker/luke-walkthrough-26oct.md). Only these; last rule wins. ==== */
/* 10. THE CONNECT STEP: one clean card inside the frame (it was frame > pink card > dashed box > message box). The wallet's
       card keeps its own quiet edge while signing; the sign step sits flat inside it, under one hairline: the message as
       plain text with a pink rule beside it, the wallets to sign with beside (desktop) or under (phone) it. */
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow.is-signing{border-color:rgba(169,180,218,.32);box-shadow:none}
.pc-pager .pc-lrow.is-signing .pc-signbox,.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-signbox{padding:clamp(12px,1.8vh,16px) 0 0;border:0;border-top:1.5px solid rgba(169,180,218,.2);border-radius:0;background:none}
.pc-pager .pc-signbox pre{margin:8px 0 0;padding:2px 0 2px 12px;border:0;border-left:3px solid var(--pink);border-radius:0;background:none;color:#fff}
@media (max-width:860px){ .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-signbox{padding:10px 0 0} .pc-pager .pc-signbox pre{margin:6px 0 10px} }
/* 11. the account row: the BlockRips star mark only (the favicon's art, transparent), square, at the tile's size */
.pc-in__n--acct{width:28px;height:28px}
.pc-acctlogo{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.pc-wtile--acct{width:44px;height:44px;padding:2px;box-sizing:border-box}
.pc-link .pc-stg > .pc-lrows--rest .pc-wtile--acct{width:40px;height:40px}
.pc-wtile--acct .pc-acctlogo{width:100%;height:100%}
/* 12. THE NEXT GLOW: softer, and with no edges. It was a circle gradient in a capsule-shaped box, still ~30% bright where the
       box's straight sides cut it (the "straight edges left and right"); now an ellipse that fits the box and fades to
       nothing before any edge, breathing less. */
.pc-pager__go--next::before{inset:-12px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,95,162,.7) 0%,rgba(250,46,134,.46) 55%,rgba(250,46,134,.16) 80%,rgba(250,46,134,0) 100%);animation-name:pcarwglow72}
@keyframes pcarwglow72{0%,100%{opacity:.25;transform:scale(.96)}50%{opacity:.9;transform:scale(1.06)}}
@media (max-width:860px){ .pc-pager__go--next::before{inset:-8px;animation-name:pcarwglow72p} }
@keyframes pcarwglow72p{0%,100%{opacity:.25;transform:scale(.97)}50%{opacity:.85;transform:scale(1.04)}}
/* 13. the last Verify stage: whose the locked-in figure is, under it */
.pc-lsum2__by{grid-column:2;margin:4px 0 0;font:700 14px/1.2 var(--ui);color:var(--muted);letter-spacing:.01em}
.pc-lockchip--later.is-open{border-color:rgba(255,212,71,.4);background:rgba(255,212,71,.08)}
@media (min-width:861px) and (max-height:700px){ .pc-lsum2__by{grid-column:1 / -1;text-align:center;margin-top:2px;font-size:13px} }
@media (max-width:560px){ .pc-lsum2__by{grid-column:1 / -1;text-align:center;margin-top:2px;font-size:13px} }
/* 16. How to unlock, stage 1: the title and the lead only, as one tight centred block (pc71's pack and button are gone) */
.pc-dash .pc-stg > .pc-title + .pc-lead{margin:clamp(10px,1.8vh,16px) auto 0;max-width:34ch;text-align:center;text-wrap:balance}
/* 17. the strip over the site: the wallets, then Rip to unlock (a step, not a button) */
.pc-wt__i--rip .pc-wt__b{cursor:default}
.pc-wt__i--rip .pc-wt__c svg{display:block;width:14px;height:14px}
.pc-wt__i--rip.is-now::before{background:var(--pink)}
.pc-wt__b:not(button):hover .pc-wt__c{border-color:rgba(169,180,218,.45);color:var(--muted)}
.pc-wt__i--rip.is-now .pc-wt__b:hover .pc-wt__c{border-color:var(--pink);color:#fff}
.pc-wt__i.is-off.is-now .pc-wt__c{border-style:solid;border-color:var(--pink);background:var(--pink);color:#fff}
.pc-wt__i.is-off.is-now .pc-wt__b{color:var(--text)}
/* the tracker's three wallet states (Luke, 26 Oct): Locked in = green tick; Connect later = gold ring with a short gold line
   (pending, never a tick, never green); Coming soon = dashed grey ring with its number */
.pc-wt__c .pc-wt__dash{display:none}
.pc-wt__i.is-done .pc-wt__c .pc-wt__dash{display:none}
.pc-wt__i.is-later:not(.is-now):not(.is-done) .pc-wt__c{border:2.5px solid var(--gold-2);background:rgba(255,212,71,.12);color:var(--gold-1)}
.pc-wt__i.is-later:not(.is-now):not(.is-done) .pc-wt__c b{display:none}
.pc-wt__i.is-later:not(.is-now):not(.is-done) .pc-wt__c .pc-wt__dash{display:block;width:16px;height:16px}
.pc-wt__i.is-later:not(.is-now):not(.is-done) .pc-wt__b{color:#FFE7A0}
/* 14. a Coming soon wallet on its own stage: its "N $RIPS on this wallet" chip on one line, as the other wallets' chips */
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lockchip--gold{white-space:nowrap;max-width:100%}
/* 17. the joining lines follow the real state: green only between two wallets that are both locked in (it lit the line into
   any locked-in wallet, so a skipped wallet before it looked done); the line into Rip to unlock stays grey */
.pc-wt__i.is-done::before,.pc-wt__i--rip.is-now::before{background:rgba(169,180,218,.28)}
.pc-wt__i.is-done + .pc-wt__i.is-done::before{background:var(--mint)}
/* 13. the phone: room under a wallet-to-connect row's tilted chip */
@media (max-width:560px){ .pc-later > .pc-lrow{padding-bottom:11px} }

/* ==== pc73: LUKE'S ROUND 3 NOTES 19-28 (26 Oct) ==================================================================== */
/* 24. "No wallet app found on this browser..." (and every other sign error under the wallet picker) is centred */
.pc-proof-err,.pc-pager .pc-signbox > .pc-proof-err{text-align:center;justify-self:center}
/* 27. the gold unlock fill: a round right end and the Clans bar's moving diagonal stripes (rebrand-clans/clans.css
   .track__fill::before: 115deg, 10px white bands at .18, 1.2s) plus its top gloss (.track__fill::after). The Kickstart's
   pink outline stripes (option B) stay as they are under it: thin pink lines on the dark track, so they still read as not
   unlocked, and different from the fill's wide white bands. A little unlocked = one full round end (min width = height). */
.pc-ubar--ks .pc-ubar__fill{border-radius:0 999px 999px 0;overflow:hidden}
.pc-ubar--ks .pc-ubar__fill.is-some{min-width:32px}
.pc-ubar--ks .pc-ubar__fill::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.34) 0 10px,transparent 10px 20px);animation:pcstripe 1.2s linear infinite}
.pc-ubar--ks .pc-ubar__fill::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:6px;border-radius:999px;background:rgba(255,255,255,.5)}
@keyframes pcstripe{to{background-position:22px 0}}
@media (prefers-reduced-motion:reduce){.pc-ubar--ks .pc-ubar__fill::before{animation:none}}
.pc-ubar__ks{min-width:66px}   /* 27: the 32px round fill + its 3px seam + about three stripes */
/* 28. the timeline stage is gone: the three cards are How to unlock's last stage, with "Start ripping" and the small print
   under them. On a computer the cards give that pair room: a shorter picture row in short windows, the small print set
   wider so it takes two lines, not four */
@media (min-width:861px){
  .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center{margin-top:clamp(10px,1.8vh,22px)}
  .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-fine{max-width:min(92ch,100%);margin-top:clamp(6px,1vh,10px);font-size:13px;line-height:1.4}
}
@media (min-width:861px) and (max-height:760px){
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3__art{min-height:clamp(72px,12vh,150px)}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3__art .pc-fanstill{height:clamp(72px,12vh,150px)}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3__art .pc-fanstill img{width:clamp(46px,8vh,100px)}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 .pc-mintbig{font-size:clamp(36px,6vh,52px)}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 li{padding-top:clamp(20px,3vh,30px);padding-bottom:clamp(12px,2vh,20px)}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 h2{margin:6px 0 4px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 p{font-size:14px;line-height:1.36}
  .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-btn{min-height:48px;padding-top:0;padding-bottom:0}
}
@media (min-width:861px) and (max-height:620px){
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3__art{min-height:60px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3__art .pc-fanstill{height:60px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3__art .pc-fanstill img{width:40px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3__eq .pc-eqcoin{width:44px;height:44px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 .pc-mintbig{font-size:32px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 li{padding-top:20px;padding-bottom:10px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 h2{font-size:19px;margin:4px 0 2px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 p{font-size:13px;line-height:1.3}
  .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center{margin-top:10px}
  .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-btn{min-height:44px}
  .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-fine{font-size:12px;margin-top:5px;line-height:1.35}
}
@media (max-width:860px){
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3__art{min-height:64px;margin-bottom:4px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 .pc-mintbig{font-size:40px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 li{padding-top:26px;padding-bottom:16px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 h2{margin:6px 0 4px}
  .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 p{line-height:1.38}
  .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center{margin-top:14px}
  .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-fine{font-size:13px;line-height:1.36;margin-top:8px}
}
/* 23. a wallet's Connect stage: its number (the tracker's) in a circle in the card's top-left corner, inside the edge, in the
   tracker's own "this one" pink; nothing else in the card moves (its content is centred, the corner is free) */
.pc-wnum{display:none}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow{position:relative}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow > .pc-wnum{display:grid;place-items:center;position:absolute;top:clamp(12px,1.8vh,18px);left:clamp(12px,1.8vh,18px);
  width:clamp(32px,4.2vh,40px);height:clamp(32px,4.2vh,40px);border-radius:50%;border:2.5px solid var(--cream);background:linear-gradient(180deg,#FF7AB5,#FA2E86);
  box-shadow:0 3px 0 var(--ink);color:#fff;font:400 clamp(15px,2vh,19px)/1 var(--display)}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow.is-done > .pc-wnum{background:linear-gradient(180deg,#8CF0BE,#3FCB86);color:var(--ink)}
@media (max-width:860px){ .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow > .pc-wnum{top:10px;left:10px;width:30px;height:30px;font-size:15px;border-width:2px} }
/* 21. Verify's last stage (Luke, 26 Oct: "cluttered and squashed to the left, lots of unused space"). Same content, laid out
   in two parts that use the frame's width: on the left what is locked in (the coin, the gold figure, "Locked in", whose it
   is), stacked and centred; on the right what is left to do (the wallets still to connect, the nudge, Add a wallet); under
   both, centred, the way on ("See my airdrop") and the small print. One left and one right edge for everything on the right. */
@media (min-width:861px){
  .pc-link .pc-stg.pc-stg--sum{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,3.4vw,52px);row-gap:0;align-items:start;align-content:center}
  .pc-link .pc-stg.pc-stg--sum > *{grid-column:2;margin:clamp(10px,1.6vh,14px) 0 0}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2{grid-column:1;grid-row:1 / span 8;align-self:center;margin:0;
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:clamp(8px,1.6vh,18px) 0}
  .pc-link .pc-stg.pc-stg--sum > .pc-sumL + *{margin-top:0}
  .pc-stg--sum .pc-lsum2__coin.pc-coinspin,.pc-stg--sum .pc-lsum2__coin{width:clamp(56px,9vh,88px);height:clamp(56px,9vh,88px);margin-bottom:clamp(6px,1.2vh,12px)}
  .pc-stg--sum .pc-lsum2__n{justify-content:center}
  .pc-stg--sum .pc-lsum2__n b{font-size:clamp(46px,8vh,80px)}
  .pc-stg--sum .pc-lsum2__k{margin-top:clamp(4px,.8vh,8px)}
  .pc-stg--sum .pc-lsum2__by{margin-top:6px;text-align:center;font-size:14px}
  .pc-link .pc-stg.pc-stg--sum > .pc-allin{justify-self:start}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go,.pc-link .pc-stg.pc-stg--sum > .pc-pfoot{grid-column:1 / -1}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go{justify-content:center;margin-top:clamp(16px,2.8vh,26px)}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go:empty{display:none}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go > .pc-btn{flex:0 1 auto;min-width:min(340px,100%)}
  .pc-link .pc-stg.pc-stg--sum > .pc-pfoot{margin-top:clamp(8px,1.4vh,12px);text-align:center}
  /* the right column's rows: the wallet on line 1 with its Connect, its chip under the name (the column is narrower than a row was) */
  .pc-stg--sum .pc-later > .pc-lrow{grid-template-columns:auto minmax(0,1fr) auto}
  .pc-stg--sum .pc-later .pc-lockchip--later{grid-column:2 / -1;grid-row:2;justify-self:start}
  .pc-stg--sum .pc-later .pc-lrow__act{grid-column:3;grid-row:1}
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge{margin-top:clamp(10px,1.6vh,14px)}
}
@media (min-width:861px) and (max-height:700px){
  .pc-stg--sum .pc-lsum2__coin.pc-coinspin,.pc-stg--sum .pc-lsum2__coin{width:52px;height:52px;margin-bottom:6px}
  .pc-stg--sum .pc-lsum2__n b{font-size:clamp(40px,8vh,52px)}
  .pc-stg--sum .pc-lsum2__k{margin:4px 0 0;align-self:center}
  .pc-stg--sum .pc-lsum2__by{grid-column:auto;margin-top:4px}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go{margin-top:14px}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go .pc-btn{min-height:46px}
}
/* 22. "Add a wallet": a compact control that opens an address field in place (no trip back to Paste your wallets) */
.pc-addin{min-width:0}
.pc-addin__open{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 13px;border:2px solid rgba(169,180,218,.42);border-radius:999px;background:transparent;
  color:#fff;font:400 15px/1 var(--display);cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.pc-addin__open:hover{border-color:var(--cream);background:rgba(27,37,96,.6)}
.pc-addin__open:active{transform:translateY(1px)}
.pc-addin__open:focus-visible,.pc-addin__x:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
.pc-addin__open svg{width:14px;height:14px;color:var(--mint)}
.pc-addin__form{display:flex;align-items:center;gap:8px}
.pc-addin__f{flex:1 1 auto;min-width:0;height:44px;box-sizing:border-box;padding:0 12px;border:2px solid rgba(169,180,218,.45);border-radius:12px;background:rgba(7,10,34,.75);
  color:#fff;font:600 15px/1 var(--ui);font-variant-numeric:tabular-nums}
.pc-addin__f::placeholder{color:#8F9AC8}
.pc-addin__f:focus{outline:none;border-color:var(--sky)}
.pc-addin__f[aria-invalid="true"]{border-color:#FF8A9C}
.pc-addin__go{flex:none;min-height:44px}
.pc-addin__go .pc-spin{width:16px;height:16px}
.pc-addin__x{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#A9B4DA;cursor:pointer}
.pc-addin__x:hover{color:#fff;background:rgba(27,37,96,.6)}
.pc-addin__x svg{width:16px;height:16px}
.pc-addin__e{margin:6px 0 0;font:700 13px/1.35 var(--ui);color:#FF8A9C;text-wrap:pretty}
.pc-addin__cap{margin:0;font:600 14px/1.35 var(--ui);color:var(--muted)}
.pc-addin__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:4px;padding:8px 10px;border-radius:16px;border-color:rgba(110,231,168,.55)}
.pc-addin__row > .pc-wtile{grid-column:1;grid-row:1;width:38px;height:38px;border-radius:11px}
.pc-addin__row > .pc-wtile svg{width:19px;height:19px}
.pc-addin__row > .pc-lrow__who{grid-column:2;grid-row:1;min-width:0}
.pc-addin__row > .pc-lrow__who > b{font-size:17px}
.pc-addin__row > .pc-lrow__who > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-addin__row > .pc-lrow__act{grid-column:3;grid-row:1}
/* what it brings, plainly: a mint chip under the name, the same place as the rows' "Connect later" chip */
.pc-addin__plus{grid-column:2 / -1;grid-row:2;justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;
  border:2px solid rgba(110,231,168,.6);background:rgba(110,231,168,.12);font:700 13px/1.1 var(--ui);color:#C8F7DE;white-space:nowrap}
.pc-addin__plus svg{width:12px;height:12px;color:var(--mint)}
@media (max-width:860px){
  .pc-link .pc-stg > .pc-addin{margin-top:10px}
  .pc-addin__row{column-gap:10px}
  .pc-addin__f{font-size:16px}   /* 16px: iOS does not zoom into the field */
  .pc-link .pc-stg > .pc-lsum2__go:empty{display:none}
}
@media (min-width:861px){ .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go > .pc-btn{width:auto;flex:0 0 auto;min-width:min(340px,100%);padding:0 32px} }
@media (min-width:861px) and (max-height:620px){
  .pc-link .pc-stg.pc-stg--sum > *{margin-top:8px}
  .pc-link .pc-stg.pc-stg--sum > .pc-sumL + *{margin-top:0}
  .pc-stg--sum .pc-lsum2__coin.pc-coinspin,.pc-stg--sum .pc-lsum2__coin{width:40px;height:40px;margin-bottom:4px}
  .pc-stg--sum .pc-lsum2__n b{font-size:40px}
  .pc-stg--sum .pc-lsum2__by{font-size:12px}
  .pc-stg--sum .pc-later > .pc-lrow{padding-top:6px;padding-bottom:6px;row-gap:2px}
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge{padding:6px 10px;font-size:14px}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go{margin-top:10px}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go .pc-btn{min-height:42px}
  .pc-link .pc-stg.pc-stg--sum > .pc-pfoot{margin-top:6px;font-size:13px}
  .pc-addin__open{min-height:36px}
  .pc-addin__f,.pc-addin__go,.pc-addin__x{height:40px;min-height:40px}
  .pc-addin__x{width:40px}
}
/* 21. the figure's column holds any number: its size is the tier's size, or smaller when the digits would not fit beside
   "$RIPS" (--nd = its characters; ~.6em each in the display face). The right column gets more room; a row's address keeps one line */
@media (min-width:861px){
  .pc-link .pc-stg.pc-stg--sum{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .pc-stg--sum .pc-lsum2{container-type:inline-size;--nmax:clamp(46px,8vh,80px)}
  .pc-stg--sum .pc-lsum2__n b{font-size:min(var(--nmax),calc((100cqi - 100px) / (var(--nd,3) * .6)))}
  .pc-stg--sum .pc-later .pc-lrow__who > span,.pc-stg--sum .pc-addin__row .pc-lrow__who > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:861px) and (max-height:700px){ .pc-stg--sum .pc-lsum2{--nmax:clamp(40px,8vh,52px)} }
@media (min-width:861px) and (max-height:620px){ .pc-stg--sum .pc-lsum2{--nmax:40px} }
@media (max-width:860px){ .pc-addin:not(.is-open):not(.pc-addin--got){display:flex;justify-content:center;text-align:center} }
/* 21 + 22. in a short window and on the phone the last stage holds the skipped wallet AND a just-added one: both rows are
   one tight card each (Connect beside the name and the chip, not above the chip), so neither has to move to another stage */
@media (min-width:861px) and (max-height:620px),(max-width:860px){
  .pc-stg--sum .pc-later > .pc-lrow,.pc-stg--sum .pc-addin__row{padding:6px 8px 6px 10px;row-gap:3px;column-gap:10px}
  .pc-stg--sum .pc-later .pc-lrow__who > b,.pc-stg--sum .pc-addin__row > .pc-lrow__who > b{font-size:15px}
  .pc-stg--sum .pc-later .pc-lrow__who > span,.pc-stg--sum .pc-addin__row > .pc-lrow__who > span{font-size:12px}
  .pc-stg--sum .pc-later .pc-lrow__act,.pc-stg--sum .pc-addin__row > .pc-lrow__act{grid-row:1 / span 2;align-self:center}
  .pc-stg--sum .pc-later .pc-lrow__act .pc-btn,.pc-stg--sum .pc-addin__row .pc-lrow__act .pc-btn{min-height:40px;height:40px;padding:0 16px;font-size:15px}
  .pc-stg--sum .pc-later .pc-wtile,.pc-stg--sum .pc-addin__row > .pc-wtile{width:32px;height:32px;border-radius:9px}
  .pc-stg--sum .pc-later .pc-lockchip--later{grid-column:2;padding-top:2px;padding-bottom:2px;font-size:12px}
  .pc-stg--sum .pc-addin__plus{grid-column:2;padding:2px 8px 2px 6px;font-size:12px}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go .pc-btn{min-height:44px;height:44px;padding-top:0;padding-bottom:0}
}
@media (min-width:861px) and (max-height:620px),(max-width:860px){
  .pc-stg--sum .pc-later .pc-lockchip--later{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .pc-stg--sum .pc-later .pc-lockchip--later > span{overflow:hidden;text-overflow:ellipsis}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go .pc-btn{box-sizing:border-box}
}
.pc-link .pc-stg.pc-stg--sum .pc-lsum2__go > .pc-btn{margin:0}   /* 21: (.pc-link .pc-btn--block carried 16px above it inside the row) */
@media (min-width:861px) and (max-height:620px),(max-width:860px){ .pc-stg--sum .pc-later .pc-lockchip--later{min-height:24px} }
@media (min-width:861px) and (max-height:620px),(max-width:860px){
  .pc-stg--sum .pc-later .pc-lrow__act,.pc-stg--sum .pc-addin__row > .pc-lrow__act{grid-row:1}
  .pc-stg--sum .pc-later .pc-lockchip--later,.pc-stg--sum .pc-addin__plus{grid-column:2 / -1;text-overflow:clip}
}
/* 21. (final) the way on sits in the left part, under the figure it belongs to, so the right part can list every wallet
   still to connect (the skipped one and one just added) without any of them moving to another stage; the small print
   runs under both. The rows are the tight cards at every computer size (one look for the rows on this stage) */
@media (min-width:861px){
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2{grid-row:1 / span 5;align-self:end}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go{grid-column:1;grid-row:6 / span 4;align-self:start;justify-content:center;margin-top:clamp(12px,2.2vh,22px)}
  .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go > .pc-btn{min-width:0;width:100%;max-width:320px;padding:0 20px}
  .pc-link .pc-stg.pc-stg--sum > .pc-pfoot{grid-row:10;margin-top:clamp(14px,2.4vh,24px)}
  .pc-link .pc-stg.pc-stg--sum > .pc-allin,.pc-link .pc-stg.pc-stg--sum > .pc-later,.pc-link .pc-stg.pc-stg--sum > .pc-nudge,.pc-link .pc-stg.pc-stg--sum > .pc-addin{align-self:start}
  .pc-stg--sum .pc-later > .pc-lrow,.pc-stg--sum .pc-addin__row{padding:6px 8px 6px 10px;row-gap:3px;column-gap:10px}
  .pc-stg--sum .pc-later .pc-lrow__who > b,.pc-stg--sum .pc-addin__row > .pc-lrow__who > b{font-size:16px}
  .pc-stg--sum .pc-later .pc-lrow__who > span,.pc-stg--sum .pc-addin__row > .pc-lrow__who > span{font-size:13px}
  .pc-stg--sum .pc-later .pc-lrow__act,.pc-stg--sum .pc-addin__row > .pc-lrow__act{grid-row:1;align-self:center}
  .pc-stg--sum .pc-later .pc-lrow__act .pc-btn,.pc-stg--sum .pc-addin__row .pc-lrow__act .pc-btn{min-height:40px;height:40px;padding:0 16px;font-size:15px}
  .pc-stg--sum .pc-later .pc-wtile,.pc-stg--sum .pc-addin__row > .pc-wtile{width:34px;height:34px;border-radius:10px}
  .pc-stg--sum .pc-later .pc-lockchip--later{grid-column:2 / -1;min-height:24px;padding-top:2px;padding-bottom:2px;font-size:12px;white-space:nowrap}
  .pc-stg--sum .pc-addin__plus{grid-column:2 / -1;padding:2px 8px 2px 6px;font-size:12px}
}
@media (min-width:861px) and (max-height:620px){ .pc-link .pc-stg.pc-stg--sum > .pc-pfoot{margin-top:8px} .pc-link .pc-stg.pc-stg--sum .pc-lsum2__go{margin-top:10px} }
/* 22. "Add a wallet" at the end of the nudge ("Got another wallet?"); while the field (or what it found) shows, the add-in's
   own row takes over and the nudge's button steps aside */
.pc-addin:empty{display:none}
.pc-nudge .pc-addin__open{flex:none;margin-left:auto;min-height:34px;padding:0 14px 0 11px;font-size:14px}
.pc-stg:has(> .pc-addin:not(:empty)) .pc-nudge .pc-addin__open{display:none}
@media (max-width:860px){ .pc-nudge .pc-addin__open{grid-column:2;justify-self:start;margin:6px 0 2px} }
/* 21 + 22. two wallets still to connect (one skipped, one just added) and the nudge with its Add a wallet: tight enough to
   stay together on this stage in a short window and on the phone */
@media (min-width:861px){
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge{flex-wrap:nowrap;align-items:center}
  .pc-stg--sum .pc-later .pc-lockchip--later{height:22px;min-height:22px;line-height:1}
  .pc-stg--sum .pc-later{gap:6px}
}
@media (min-width:861px) and (max-height:620px){ .pc-link .pc-stg.pc-stg--sum > .pc-nudge{font-size:13px;line-height:1.25} }
@media (max-width:860px){
  .pc-stg--sum .pc-later .pc-lockchip--later{height:22px;min-height:22px;line-height:1}
  .pc-stg--sum .pc-later{gap:6px}
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:6px 8px 6px 10px}
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge > svg{grid-row:1;margin-top:0}
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge .pc-addin__open{grid-column:3;grid-row:1;margin:0;min-height:36px;padding:0 12px 0 10px}
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge > span{font-size:14px;line-height:1.25}
}
@media (min-width:861px){
  .pc-link .pc-stg.pc-stg--sum > .pc-sumL{grid-column:1;grid-row:1 / span 6;align-self:center;display:flex;flex-direction:column;align-items:center;margin:0;min-width:0}
  .pc-link .pc-stg.pc-stg--sum .pc-sumL > .pc-lsum2{width:100%}
  .pc-link .pc-stg.pc-stg--sum .pc-sumL > .pc-lsum2__go{width:100%;display:flex}
  .pc-link .pc-stg.pc-stg--sum > .pc-pfoot{grid-row:auto}
}
@media (max-width:860px){
  .pc-link .pc-stg.pc-stg--sum > .pc-later,.pc-link .pc-stg.pc-stg--sum > .pc-nudge,.pc-link .pc-stg.pc-stg--sum > .pc-addin,.pc-link .pc-stg.pc-stg--sum > .pc-lsum2__go,.pc-link .pc-stg.pc-stg--sum > .pc-allin{margin-top:8px}
  .pc-link .pc-stg.pc-stg--sum > .pc-lsum2__go + .pc-pfoot{margin-top:8px}
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge > span{font-size:13px}
}
@media (max-width:860px){
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge:has(.pc-addin__open){grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge:has(.pc-addin__open) > svg{display:none}
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge:has(.pc-addin__open) > span{grid-column:1}
  .pc-link .pc-stg.pc-stg--sum > .pc-nudge .pc-addin__open{grid-column:2;font-size:13px;padding:0 11px 0 9px;min-height:34px}
}
@media (min-width:861px) and (max-height:620px){ .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center{margin-top:8px} .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-btn{min-height:40px} .pc-pager .pc-stg:has(> .pc-center) .pc-steps3 li{padding-top:18px;padding-bottom:8px} }   /* 28: a clear gap between the small print and the stage dots at 1000x570 */

/* ---- pc75: THE PACK HAND-OVER, ONE PACK AT A TIME (Luke, 26 Oct: landing -> Paste your wallets, the pack "shrinks and goes
   see-through"; his screenshot showed two packs at once, the smaller one in front). Measured at 1512x1300 (stage 0.54 as
   wide as tall): the live canvas drew the pack at 80% of the still's size (stage3d.js backed its camera off to fit the
   width), faded in over the still for .4s, then the still went. Now (1) the one-pack canvas is framed by height exactly as
   the still is (stage3d.js opts.byHeight) and is never narrower than the still (the still's own box: full height, 740:1400,
   centred), so both draw the pack at the same pixels; (2) no cross-fade: the canvas shows at full opacity the moment its
   first frame has been presented (stage3d resolves after it), and the still goes ~6 frames later, under it. ---- */
.pc-3d[data-packs="hero"] .pc-3d__cv{left:50%;right:auto;top:0;bottom:auto;width:auto;min-width:100%;height:100%;aspect-ratio:740/1400;transform:translateX(-50%)}
.pc-3d .pc-3d__cv,.pc-3d.is-live .pc-3d__cv{transition:none}
.pc-3d .pc-3d__still,.pc-hero--one .pc-3d__still,.pc-wal__hero .pc-3d__still{transition:opacity 0s linear .1s}

/* ---- pc76: the Connect X tab (?xlink=, app.js SCREENS.xhelper): the same Connect to X screen; its one link-button */
.pc-xhelp a.pc-btn{text-decoration:none}
/* pc76: a Connect to X screen that carries a message (taken, cancelled, not connected yet, didn't open) fits a short window
   without scrolling (1000x570 / 1147x655: the message box + its buttons were 18-105 px too tall; "X didn't open" already
   scrolled 64 px at 1000x570 on pc75): the tile and the gaps get smaller, nothing is dropped */
@media (max-height:720px){
  :where(html:where(:not([data-inapp="x"]))) .pc-xconn--err{padding-top:6px}
  :where(html:where(:not([data-inapp="x"]))) .pc-xconn--err .pc-xconn__tile{width:72px;height:72px;margin-bottom:12px;border-radius:18px}
  :where(html:where(:not([data-inapp="x"]))) .pc-xconn--err .pc-xconn__tile span{width:32px;height:32px;right:-10px;bottom:-10px}
  :where(html:where(:not([data-inapp="x"]))) .pc-xconn--err .pc-xconn__tile span svg{width:16px;height:16px}
  :where(html:where(:not([data-inapp="x"]))) .pc-xconn--err .pc-xconn__err{margin-top:12px;max-width:min(100%,580px)}
  :where(html:where(:not([data-inapp="x"]))) .pc-xconn--err .pc-btn{margin-top:14px}
  :where(html:where(:not([data-inapp="x"]))) .pc-xconn--err .pc-xconn__how{margin-top:8px;max-width:64ch}
  :where(html:where(:not([data-inapp="x"]))) .pc-xconn--err .pc-xconn__who{margin-top:10px}
}

/* ==== pc77: VERIFY'S ACCOUNT STAGE AND LAST STAGE USE THE FRAME (Luke, 26 Oct: "the page in the first ss doesn't make use of
   the space; the layout in the second ss looks a bit weird too"). Same content, same flow. ================================ */
/* 1. The BlockRips account stage is a card like a wallet's Connect stage (it takes that card's rules: app.js puts the row in a
   .pc-lrows that is not --rest): the star mark where a wallet has its tile, "Your BlockRips account", whose it is, Pack rips,
   then the locked-in figure as the stage's sticker (its focus), what that figure is, and "Locked in" where a wallet has
   Connect. As on a locked-in wallet's card, the green sticker says "locked in" (no second LOCKED IN line: style.css "locked: the
   green chip says it"). Rows that can't be connected here stay compact under the card: .is-tight makes the card smaller so they
   fit together; only if they still don't do they go to the next stage. */
.pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct .pc-wtile--acct{width:clamp(60px,8.6vh,84px);height:clamp(60px,8.6vh,84px);border:0;border-radius:0;background:none;box-shadow:none}
.pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct .pc-lockchip--in{min-height:clamp(42px,5.4vh,52px);padding:9px clamp(16px,1.6vw,22px) 8px;font-size:clamp(16px,1.4vh + .4vw,21px);gap:8px}
.pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct .pc-lockchip--in .num{font-size:1.28em}
.pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct .pc-lockchip--in svg{width:1em;height:1em}
.pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct{padding-bottom:clamp(18px,3vh,32px)}
.pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct .pc-lrow__note{max-width:52ch}
.pc-link .pc-stg > .pc-lrows--acct + .pc-lrows--rest{margin-top:clamp(10px,1.6vh,14px)}
@media (max-width:860px){
  .pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct .pc-wtile--acct{width:60px;height:60px}
  .pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct{padding-bottom:18px}
}
@media (min-width:861px) and (max-height:620px){
  .pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct .pc-wtile--acct{width:52px;height:52px}
  .pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct .pc-lockchip--in{min-height:40px;font-size:16px}
  .pc-link .pc-stg > .pc-lrows--acct > .pc-lrow--acct{padding-bottom:14px}
}
/* 2. The last stage reads in order down one axis: the figure (the biggest thing on it), then what is left to do as one column
   of one width (the wallets still to connect, "Got another wallet?" with Add a wallet on the same line, the address field or
   what it found), then the way on, then the small print. app.js fitSum() picks the first form that fits the frame: the
   figure stacked and big; .is-compact the figure on one line with the coin beside it; .is-split (computers only) the figure
   beside the column, the way on and the small print under both. Verify first still decides which button leads. */
.pc-link .pc-stg.pc-stg--sum.pc-sum7{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.pc-link .pc-stg.pc-stg--sum.pc-sum7 > *{grid-column:auto;grid-row:auto;margin:0;align-self:center}
.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2,.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-sumR,
.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2__go,.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-pfoot{width:min(100%,560px);box-sizing:border-box}
/* the figure */
.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:0;container-type:inline-size;--nmax:clamp(52px,9.4vh,100px)}
.pc-link .pc-stg.pc-sum7 .pc-lsum2__coin.pc-coinspin,.pc-link .pc-stg.pc-sum7 .pc-lsum2__coin{width:clamp(60px,10.4vh,108px);height:clamp(60px,10.4vh,108px);margin:0 0 clamp(6px,1.2vh,12px)}
.pc-link .pc-stg.pc-sum7 .pc-lsum2__n{justify-content:center}
.pc-link .pc-stg.pc-sum7 .pc-lsum2__n span{font-size:clamp(18px,2.2vh,24px)}
.pc-link .pc-stg.pc-sum7 .pc-lsum2__k{margin:clamp(6px,1vh,10px) 0 0;font-size:clamp(15px,1.7vh,19px);align-self:auto}
.pc-link .pc-stg.pc-sum7 .pc-lsum2__by{grid-column:auto;margin:clamp(4px,.6vh,6px) 0 0;text-align:center;font-size:14px}
/* what is left to do: one column, one width, one gap */
.pc-sumR{display:flex;flex-direction:column;gap:8px;min-width:0}
.pc-sumR:empty{display:none}
.pc-link .pc-stg.pc-sum7 .pc-sumR > *{margin:0}
.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2 + .pc-sumR{margin-top:clamp(16px,3.2vh,32px)}
.pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-allin{align-self:center;padding:7px 14px 6px;border-radius:999px;border:2px solid rgba(110,231,168,.55);background:rgba(110,231,168,.1);font-size:13px}
.pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-later{gap:8px}
/* "Got another wallet?": the words, then Add a wallet at the line's right end, centred on it; the box is the rows' width */
.pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-height:52px;box-sizing:border-box;padding:6px 8px 6px 12px;border-radius:16px}
.pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge > svg{display:block;flex:none;margin:0}
.pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge > span{flex:1 1 auto;min-width:0;font-size:15px;line-height:1.3}
.pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge .pc-addin__open{flex:none;margin:0 0 0 auto;min-height:40px;padding:0 15px 0 12px;font-size:15px}
.pc-sumR:has(> .pc-addin:not(:empty)) .pc-nudge .pc-addin__open{display:none}
/* the way on, then the small print */
.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2__go{display:flex;justify-content:center;margin-top:clamp(14px,2.8vh,28px)}
.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2 + .pc-lsum2__go{margin-top:clamp(16px,3.2vh,32px)}
.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2__go:empty{display:none}
.pc-link .pc-stg.pc-stg--sum.pc-sum7 .pc-lsum2__go > .pc-btn{flex:0 1 auto;width:min(100%,380px);max-width:none;min-width:0;min-height:clamp(50px,6.2vh,58px);height:auto;padding:0 24px;margin:0;font-size:clamp(18px,1.8vh + .2vw,21px)}
.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-pfoot{margin-top:clamp(10px,1.8vh,16px);text-align:center;font-size:14px;line-height:1.45}
/* .is-compact: the figure on one line, the coin beside it */
.pc-link .pc-stg.pc-stg--sum.pc-sum7.is-compact > .pc-lsum2{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:clamp(12px,1.4vw,18px);text-align:left;--nmax:clamp(42px,6.6vh,64px)}
.pc-link .pc-stg.pc-sum7.is-compact .pc-lsum2__coin.pc-coinspin,.pc-link .pc-stg.pc-sum7.is-compact .pc-lsum2__coin{grid-row:1 / span 3;width:clamp(48px,7.4vh,76px);height:clamp(48px,7.4vh,76px);margin:0}
.pc-link .pc-stg.pc-sum7.is-compact .pc-lsum2__n,.pc-link .pc-stg.pc-sum7.is-compact .pc-lsum2__k,.pc-link .pc-stg.pc-sum7.is-compact .pc-lsum2__by{grid-column:2;justify-content:flex-start;text-align:left}
.pc-link .pc-stg.pc-sum7.is-compact .pc-lsum2__k{margin-top:4px;font-size:clamp(14px,1.5vh,17px)}
.pc-link .pc-stg.pc-sum7.is-compact .pc-lsum2__by{margin-top:3px;font-size:13px}
.pc-link .pc-stg.pc-stg--sum.pc-sum7.is-compact > .pc-lsum2 + .pc-sumR{margin-top:clamp(12px,2.2vh,22px)}
.pc-link .pc-stg.pc-stg--sum.pc-sum7.is-compact > .pc-lsum2__go{margin-top:clamp(12px,2.2vh,22px)}
/* .is-split (computers): the figure on the left, the column on the right, both centred on one line; under both, the way on
   and the small print */
@media (min-width:861px){
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);column-gap:clamp(18px,2.6vw,40px);row-gap:0;align-items:center;align-content:center}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split > .pc-lsum2{grid-column:1;grid-row:1;width:100%;--nmax:clamp(40px,7.6vh,72px)}
  .pc-link .pc-stg.pc-sum7.is-split .pc-lsum2__coin.pc-coinspin,.pc-link .pc-stg.pc-sum7.is-split .pc-lsum2__coin{width:clamp(44px,7.6vh,76px);height:clamp(44px,7.6vh,76px)}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split > .pc-sumR{grid-column:2;grid-row:1;width:100%;margin:0}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split > .pc-lsum2__go{grid-column:1 / -1;grid-row:2;width:100%;margin-top:clamp(12px,2.4vh,24px)}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split > .pc-pfoot{grid-column:1 / -1;grid-row:3;width:100%}
}
@media (min-width:861px) and (max-height:620px){
  .pc-link .pc-stg.pc-sum7 .pc-sumR{gap:6px}
  .pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge{min-height:44px;padding:4px 6px 4px 10px}
  .pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge > span{font-size:14px}
  .pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge .pc-addin__open{min-height:36px;font-size:14px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7 .pc-lsum2__go > .pc-btn{min-height:44px;font-size:18px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-pfoot{margin-top:8px;font-size:13px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split > .pc-lsum2__go{margin-top:12px}
}
/* the phone: one column always (the figure stacked, or on one line when the stage is full); the column, the button and the
   small print are the stage's full width */
@media (max-width:860px){
  .pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2,.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-sumR,
  .pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2__go,.pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-pfoot{width:100%}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2{--nmax:56px}
  .pc-link .pc-stg.pc-sum7 .pc-lsum2__coin.pc-coinspin,.pc-link .pc-stg.pc-sum7 .pc-lsum2__coin{width:64px;height:64px;margin-bottom:8px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-compact > .pc-lsum2{--nmax:44px}
  .pc-link .pc-stg.pc-sum7.is-compact .pc-lsum2__coin.pc-coinspin,.pc-link .pc-stg.pc-sum7.is-compact .pc-lsum2__coin{width:48px;height:48px;margin:0}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2 + .pc-sumR{margin-top:18px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-compact > .pc-lsum2 + .pc-sumR{margin-top:12px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-lsum2__go,.pc-link .pc-stg.pc-stg--sum.pc-sum7.is-compact > .pc-lsum2__go{margin-top:14px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7 .pc-lsum2__go > .pc-btn{width:100%;min-height:48px;font-size:19px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7 > .pc-pfoot{margin-top:10px;font-size:13px}
  .pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge{min-height:48px;padding:6px 6px 6px 10px;gap:8px}
  .pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge > svg{display:none}
  .pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge > span{font-size:14px;line-height:1.28}
  .pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge .pc-addin__open{min-height:40px;padding:0 12px 0 10px;font-size:14px}
}
@media (max-width:860px){
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-compact > .pc-lsum2 + .pc-sumR{margin-top:10px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-compact > .pc-lsum2__go{margin-top:10px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-compact > .pc-pfoot{margin-top:8px}
  .pc-link .pc-stg.pc-sum7.is-compact .pc-sumR > .pc-nudge{min-height:44px;padding-top:2px;padding-bottom:2px}
  .pc-link .pc-stg.pc-sum7.is-compact .pc-sumR > .pc-nudge .pc-addin__open{min-height:38px}
}
/* 1. (tight) the account card sharing its stage with rows that can't be connected here (nothing found, coming soon...) */
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--acct > .pc-lrow--acct{margin-top:0;padding:12px 16px 12px}
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--acct > .pc-lrow--acct .pc-wtile--acct{width:44px;height:44px}
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--acct > .pc-lrow--acct .pc-lrow__who{margin-top:6px;gap:2px}
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--acct > .pc-lrow--acct .pc-lrow__who > b{font-size:20px}
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--acct > .pc-lrow--acct .pc-lrow__ps{margin-top:2px}
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--acct > .pc-lrow--acct .pc-lockchip--in{margin-top:8px;min-height:36px;padding:6px 14px 5px;font-size:15px}
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--acct > .pc-lrow--acct .pc-lrow__note{margin-top:6px;font-size:14px}
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--acct + .pc-lrows--rest{margin-top:8px}
/* the account card needs no toast slot above it (nothing on its stage raises a toast): it sits centred like the others */
.pc-link .pc-stg > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct:not(.is-signing):not(.is-rmask){margin-top:0}
.pc-link .pc-stg.pc-sum7 .pc-sumR > .pc-nudge{flex-direction:row}
/* the tightest forms (a short window, the phone): two wallets still to connect + the nudge stay on this stage, as before pc77 */
@media (min-width:861px) and (max-height:620px){
  .pc-link .pc-stg.pc-sum7.is-split .pc-later > .pc-lrow,.pc-link .pc-stg.pc-sum7.is-split .pc-addin__row{padding-top:4px;padding-bottom:4px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split > .pc-lsum2__go{margin-top:8px}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split > .pc-pfoot{margin-top:6px}
}
@media (max-width:860px){
  .pc-link .pc-stg.pc-sum7.is-compact .pc-later > .pc-lrow,.pc-link .pc-stg.pc-sum7.is-compact .pc-addin__row{padding-top:4px;padding-bottom:4px}
  .pc-link .pc-stg.pc-sum7.is-compact .pc-sumR{gap:6px}
}
/* review fixes (pc77) -------------------------------------------------------------------------------------------------- */
/* .is-split: the way on sits under the column it follows (one left and one right edge with the rows), not across both */
@media (min-width:861px){
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split > .pc-lsum2{grid-row:1 / span 2;align-self:center}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split > .pc-lsum2__go{grid-column:2;grid-row:2}
  .pc-link .pc-stg.pc-stg--sum.pc-sum7.is-split .pc-lsum2__go > .pc-btn{width:100%}
}
/* the account card: the figure is the biggest thing on it (bigger than the card's title), and the star mark never carries
   the wallet tile's ink shadow (it showed as a dark line under the mark in short windows) */
.pc-link .pc-stg > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-wtile.pc-wtile--acct{box-shadow:none;border:0;background:none}
.pc-link .pc-stg > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lrow__who > b{font-size:clamp(20px,1.9vh + .3vw,26px)}
.pc-link .pc-stg > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lockchip--in{min-height:clamp(46px,6vh,58px);padding:9px clamp(18px,1.8vw,26px) 8px;font-size:clamp(17px,1.5vh + .5vw,23px)}
.pc-link .pc-stg > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lockchip--in .num{font-size:1.45em}
@media (max-width:860px){
  .pc-link .pc-stg > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lrow__who > b{font-size:21px}
  .pc-link .pc-stg > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lockchip--in{font-size:17px;padding:8px 14px 7px}
  .pc-link .pc-stg > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lockchip--in .num{font-size:1.4em}
}
/* short computer windows: the account card keeps the centred column (a wallet card puts its tile beside the name there only
   to make room for Connect and its links, which the account has none of), so it fills the frame like the others */
@media (min-width:861px) and (max-height:700px){
  .pc-link .pc-stg:not(.is-tight) > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct{display:flex;flex-direction:column;align-items:center;padding:clamp(16px,3vh,24px) 20px clamp(16px,3vh,24px)}
  .pc-link .pc-stg:not(.is-tight) > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-wtile--acct{width:56px;height:56px;margin:0}
  .pc-link .pc-stg:not(.is-tight) > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lrow__who{align-items:center;text-align:center;margin-top:10px}
  .pc-link .pc-stg:not(.is-tight) > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lrow__ps{justify-content:center}
  .pc-link .pc-stg:not(.is-tight) > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lockchip--in{margin-top:14px}
  .pc-link .pc-stg:not(.is-tight) > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lrow__note{margin-top:10px}
}
@media (max-width:860px){
  .pc-link .pc-stg > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lockchip--in{font-size:15px;padding:8px 12px 7px}
  .pc-link .pc-stg > .pc-lrows.pc-lrows--acct > .pc-lrow.pc-lrow--acct .pc-lockchip--in .num{font-size:1.5em}
}
/* pc77 (Luke, 26 Oct: "it should never say $1 = x $RIPS"): How to unlock card 2 is "Unlock it all", in card 3's figure-and-chip
   style, sized to its card. rb/pc-ugc (Luke, 31 Oct): its picture is the $RIPS unlocked (it was the dollars left to rip), so it
   is gold like the unlocked count everywhere else (.pc-steps3__un, below) */
.pc-steps3__left{flex-direction:column;container-type:inline-size}
.pc-steps3 .pc-mintbig.pc-leftbig{color:#fff;text-shadow:0 4px 0 var(--ink);white-space:nowrap;font-size:min(var(--lb,60px),calc(100cqi / (var(--nd,6) * .66)))}
.pc-steps3 .pc-steps3__left .pc-mintchip{margin-top:10px;background:#FFD447}
.pc-dash .pc-steps3 .pc-steps3__left .pc-mintbig.pc-leftbig,.pc-dash .pc-pager .pc-steps3 .pc-steps3__left .pc-mintbig.pc-leftbig{font-size:min(var(--lb,clamp(46px,6vh,60px)),calc(100cqi / (var(--nd,6) * .66)))}
@media (min-width:861px) and (max-height:760px){ .pc-dash .pc-steps3__left{--lb:clamp(36px,6vh,52px)} }
@media (min-width:861px) and (max-height:620px){ .pc-dash .pc-steps3__left{--lb:32px} .pc-dash .pc-steps3 .pc-steps3__left .pc-mintchip{margin-top:4px} }
@media (max-width:860px){ .pc-dash .pc-steps3__left{--lb:44px} }
.pc-steps3 .pc-steps3__un .pc-mintbig.pc-leftbig{color:var(--gold-2)}
/* pc78A layout ===========================================================================================================
   (Luke, 26 Oct: "loads of empty space... need to consider each screen and how the info should be presented in the UI").
   Worker A's screens only: the Verify intro, each wallet's Connect stage, the $1 stages, Wallet locked in. Same content, same
   flow. Each stage: one hero (the number that matters), what explains it next to it, the action where the eye ends, all of it
   scaled to the frame. One system with pc77's account stage and summary: the gold figure (.pc-lsum2__n) is the hero type, the
   column is min(100%,560px), the main button min(100%,420px) x clamp(54px,6.6vh,62px), gaps clamp(14-32px) on vh, small print
   14-15px. The phone (<=860px) keeps the same order, tighter. =========================================================== */
/* 1. THE VERIFY INTRO: the title, then the hero (the coin beside the figure, "to lock in" under it), then the lead; under a
   clear gap, "The two ways to verify" and the two boxes, bigger, so the stage reads as two masses: what you lock in, how */
.pc-link .pc-stg > .pc-vfig{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:clamp(12px,1.4vw,18px);margin:clamp(12px,2.4vh,24px) 0 0}
.pc-vfig__coin.pc-coinspin,.pc-vfig__coin{grid-row:span 2;width:clamp(56px,9vh,92px);height:clamp(56px,9vh,92px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.pc-vfig .pc-lsum2__n b{font-size:clamp(46px,8.4vh,88px)}
.pc-vfig .pc-lsum2__n span{font-size:clamp(18px,2.4vh,26px)}
.pc-vfig__k{margin:clamp(4px,.8vh,8px) 0 0;font:400 clamp(14px,1.7vh,19px)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--cream)}
.pc-vfig__k.is-in{color:var(--mint)}
.pc-link .pc-stg > .pc-vfig + .pc-plead{margin-top:clamp(10px,1.8vh,18px);font-size:clamp(15px,1.5vh + .2vw,19px);max-width:46ch;margin-left:auto;margin-right:auto}
.pc-link .pc-stg > .pc-ptitle:has(+ .pc-vfig){margin-bottom:0}
.pc-link .pc-stg > .pc-plead + .pc-keys__h{margin-top:clamp(18px,4vh,40px);font-size:clamp(18px,1.6vh + .5vw,24px)}
.pc-link .pc-stg > .pc-keys--or{gap:clamp(10px,1.2vw,16px);margin-top:clamp(10px,1.8vh,18px)}
.pc-link .pc-stg > .pc-keys--or .pc-keys__b{padding:clamp(14px,2.4vh,24px) clamp(14px,1.6vw,22px);column-gap:12px;row-gap:clamp(6px,1vh,10px)}
.pc-link .pc-stg > .pc-keys--or .pc-keys__ic{width:clamp(32px,4.4vh,42px);height:clamp(32px,4.4vh,42px);border-radius:11px}
.pc-link .pc-stg > .pc-keys--or .pc-keys__ic svg{width:clamp(18px,2.4vh,24px);height:clamp(18px,2.4vh,24px)}
.pc-link .pc-stg > .pc-keys--or .pc-keys__b b{font-size:clamp(17px,1.4vh + .45vw,22px)}
.pc-link .pc-stg > .pc-keys--or .pc-keys__b > span:last-child{font-size:clamp(14px,1.3vh + .15vw,17px);line-height:1.4}
@media (max-width:860px){
  .pc-link .pc-stg > .pc-vfig{margin-top:8px;column-gap:10px}
  .pc-vfig__coin.pc-coinspin,.pc-vfig__coin{width:52px;height:52px}
  .pc-vfig .pc-lsum2__n b{font-size:clamp(38px,11vw,46px)}
  .pc-vfig .pc-lsum2__n span{font-size:18px}
  .pc-vfig__k{font-size:14px;margin-top:4px}
  .pc-link .pc-stg > .pc-vfig + .pc-plead{margin-top:8px;font-size:15px}
  .pc-link .pc-stg > .pc-plead + .pc-keys__h{margin-top:14px;font-size:18px}
  .pc-link .pc-stg > .pc-keys--or{margin-top:8px}
  .pc-link .pc-stg > .pc-keys--or .pc-keys__b{padding:10px 12px;row-gap:4px}
  .pc-link .pc-stg > .pc-keys--or .pc-keys__ic{width:30px;height:30px}
  .pc-link .pc-stg > .pc-keys--or .pc-keys__ic svg{width:18px;height:18px}
  .pc-link .pc-stg > .pc-keys--or .pc-keys__b b{font-size:16px}
  .pc-link .pc-stg > .pc-keys--or .pc-keys__b > span:last-child{font-size:14px;line-height:1.35}
}
@media (max-width:560px){ .pc-link .pc-stg > .pc-keys--or{gap:0} .pc-link .pc-stg > .pc-keys--or .pc-keys__or{margin:-9px 0} }
@media (max-width:860px){
  .pc-link .pc-stg > .pc-vfig{margin-top:4px}
  .pc-vfig__coin.pc-coinspin,.pc-vfig__coin{width:46px;height:46px}
  .pc-vfig .pc-lsum2__n b{font-size:clamp(36px,10.4vw,44px)}
  .pc-link .pc-stg > .pc-keys--or .pc-keys__b{padding:9px 12px 10px;row-gap:2px}
  .pc-link .pc-stg > .pc-plead + .pc-keys__h{margin-top:12px}
}
/* short computer windows (1147x655, 1000x570): the same two masses, smaller */
@media (min-width:861px) and (max-height:700px){
  .pc-link .pc-stg > .pc-vfig{margin-top:6px}
  .pc-vfig__coin.pc-coinspin,.pc-vfig__coin{width:clamp(44px,8vh,56px);height:clamp(44px,8vh,56px)}
  .pc-vfig .pc-lsum2__n b{font-size:clamp(38px,7.4vh,50px)}
  .pc-vfig .pc-lsum2__n span{font-size:18px}
  .pc-vfig__k{font-size:14px;margin-top:3px}
  .pc-link .pc-stg > .pc-vfig + .pc-plead{margin-top:6px;font-size:15px}
  .pc-link .pc-stg > .pc-plead + .pc-keys__h{margin-top:clamp(10px,2vh,16px);font-size:18px}
  .pc-link .pc-stg > .pc-keys--or{margin-top:8px}
  .pc-link .pc-stg > .pc-keys--or .pc-keys__b{padding:10px 14px;row-gap:4px}
  .pc-link .pc-stg > .pc-keys--or .pc-keys__ic{width:30px;height:30px}
  .pc-link .pc-stg > .pc-keys--or .pc-keys__b b{font-size:17px}
  .pc-link .pc-stg > .pc-keys--or .pc-keys__b > span:last-child{font-size:14px}
}
@media (max-width:860px){ .pc-link .pc-stg > .pc-ptitle:has(+ .pc-vfig){font-size:min(30px,6.2vw);white-space:nowrap} }
/* 2. A WALLET'S CONNECT STAGE: the card is the stage (it runs the frame's full height, so there is no band of nothing above and
   under it), and what is in it is scaled to it, in three groups down one column: whose wallet it is (tile, name, address, what
   it bought on); the hero, the "N $RIPS on this wallet" sticker at the account card's size (pc77); then how it connects, said
   right over the action it explains, Connect, and under it the two small actions. Signing, Coming soon, the EVM $1.0x and the
   remove confirm are the same card. Short windows and the phone keep their tighter sizes and their toast slot (they were
   already full). */
@media (min-width:861px) and (min-height:701px){
  .pc-link .pc-stg:has(> .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct)){align-self:stretch}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct){flex:1 1 auto;display:flex;flex-direction:column}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow{flex:1 1 auto;justify-content:center;box-sizing:border-box}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow{padding:clamp(20px,3.4vh,36px) clamp(18px,3vw,44px) clamp(12px,2vh,22px)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-wtile{width:clamp(56px,8vh,80px);height:clamp(56px,8vh,80px);border-radius:18px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-wtile svg{width:clamp(28px,3.8vh,38px);height:clamp(28px,3.8vh,38px)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__who{margin-top:clamp(10px,1.6vh,16px);gap:clamp(4px,.6vh,6px)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__who > b{font-size:clamp(24px,2.5vh + .5vw,33px)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__who > span{font-size:clamp(14px,1.4vh + .1vw,17px)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lockchip{margin-top:clamp(16px,2.8vh,28px);min-height:clamp(46px,5.8vh,56px);padding:9px clamp(18px,1.8vw,26px) 8px;font-size:clamp(17px,1.4vh + .5vw,22px);gap:8px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lockchip .num{font-size:1.45em}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__note{margin-top:clamp(14px,2.8vh,28px);max-width:46ch;font-size:clamp(15px,1.3vh + .2vw,18px);line-height:1.4}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__act{margin-top:clamp(10px,1.4vh,14px)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__act .pc-btn{width:min(100%,420px);min-height:clamp(54px,6.4vh,60px)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__more{margin-top:clamp(2px,.8vh,8px)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__more .pc-textbtn{font-size:clamp(14px,1.3vh + .15vw,16px)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow.is-signing .pc-signbox{margin-top:clamp(14px,2.6vh,26px);padding:clamp(12px,1.8vh,18px)}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow.is-signing .pc-signbox pre{font-size:clamp(14px,1.3vh + .15vw,16px);line-height:1.45}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow.is-signing .pc-wpick__b{min-height:clamp(44px,5.2vh,50px);font-size:clamp(15px,1.3vh + .2vw,17px)}
}
/* the 621-700px tall computer window (1147x655): the card keeps its tile beside the name and its toast slot, at the frame's
   scale (it left ~75px of the frame unused) */
@media (min-width:861px) and (min-height:621px) and (max-height:700px){
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-wtile{width:60px;height:60px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-wtile svg{width:30px;height:30px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__who > b{font-size:24px;white-space:nowrap}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lockchip{margin-top:16px;min-height:44px;padding:8px 18px 7px;font-size:18px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lockchip .num{font-size:1.4em}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__note{margin-top:12px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__act{margin-top:10px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow .pc-lrow__act .pc-btn{width:min(100%,400px);min-height:54px;font-size:21px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow{padding-top:18px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow.is-signing .pc-signbox{margin-top:14px;padding:12px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow.is-signing .pc-wpick__b{min-height:44px}
}
/* short computer windows: the tile sits beside the name there, so the wallet's number sits on the card's top edge, in its
   corner (inside the card it ran into a long name's tile: "Your wallet · topped up an account") */
@media (min-width:861px) and (max-height:700px){
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest):not(.pc-lrows--acct) > .pc-lrow > .pc-wnum{top:-15px;left:18px}
}
/* 3. THE $1 STAGES. Stage 1 is the ask AND where to send it (Luke): the title, what rides on this wallet, the lead, then one
   row: the amount (the hero, gold) beside the player's own BlockRips deposit address box (QR, address, Copy address, the
   network), then the small print. The phone keeps them on two stages (app.js splits when they don't fit). Stage 2 is the
   steps and the wait, scaled to the frame. */
.pc-tu .pc-stg > .pc-tu__pay{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(18px,2.6vw,36px);margin-top:clamp(14px,2.8vh,28px)}
.pc-tu .pc-stg > .pc-tu__pay > .pc-onedollar{margin:0;padding:0 clamp(4px,1vw,14px)}
.pc-tu .pc-stg > .pc-tu__pay > .pc-dep{margin:0}
.pc-tu .pc-stg > .pc-tu__pay:not(:has(> .pc-dep)){display:flex;justify-content:center}
.pc-tu .pc-stg > .pc-ptitle{font-size:clamp(30px,3.6vh + .8vw,50px)}
.pc-tu .pc-stg > .pc-punch{margin-top:clamp(6px,1vh,10px);font-size:clamp(16px,1.5vh + .2vw,19px)}
.pc-tu .pc-stg > .pc-plead{margin-top:clamp(6px,1vh,10px);font-size:clamp(15px,1.5vh + .2vw,19px);max-width:52ch;margin-left:auto;margin-right:auto}
.pc-tu .pc-stg > .pc-tu__pay + .pc-pfoot,.pc-tu .pc-stg > .pc-tu__pay + .pc-tu__id{margin-top:clamp(10px,1.8vh,18px)}
.pc-tu .pc-stg > .pc-pfoot{font-size:clamp(13px,1.2vh + .1vw,15px)}
@media (min-width:861px){
  .pc-tu .pc-stg > .pc-tu__pay .pc-onedollar b{font-size:clamp(64px,11vh,120px)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-onedollar span{font-size:clamp(14px,1.6vh,18px)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep{grid-template-columns:auto minmax(0,1fr);padding:clamp(12px,1.8vh,18px);gap:clamp(12px,1.4vw,18px)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__qr{width:clamp(108px,16vh,164px);height:clamp(108px,16vh,164px)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__r{gap:clamp(6px,1.1vh,12px)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__r code{font-size:clamp(14px,1.4vh + .1vw,17px)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__r .pc-btn{min-height:clamp(42px,5.4vh,52px);font-size:clamp(15px,1.4vh + .2vw,18px)}
  /* the EVM amount's "send EXACTLY" line sits under it, in the amount's column */
  .pc-tu .pc-stg > .pc-tu__pay .pc-onedollar__x{max-width:20ch;font-size:clamp(13px,1.2vh + .1vw,15px)}
}
/* stage 2: the four steps bigger, the wait under them, the check (or Simulate under ?mock=1) and its line */
@media (min-width:861px) and (min-height:621px){
  .pc-tu .pc-stg > .pc-tiles{gap:clamp(10px,1.2vw,16px)}
  .pc-tu .pc-stg > .pc-tiles > li{padding:clamp(14px,2.4vh,24px) 10px;gap:clamp(4px,.8vh,8px)}
  .pc-tu .pc-stg > .pc-tiles .pc-badge{width:clamp(28px,3.6vh,36px);height:clamp(28px,3.6vh,36px);font-size:clamp(14px,1.6vh,18px)}
  .pc-tu .pc-stg > .pc-tiles b{font-size:clamp(16px,1.5vh + .3vw,21px)}
  .pc-tu .pc-stg > .pc-tiles span:not(.pc-badge){font-size:clamp(13px,1.3vh + .1vw,16px)}
  .pc-tu .pc-stg > .pc-waitbox{margin-top:clamp(12px,2.2vh,22px);padding:clamp(14px,2.2vh,22px) clamp(16px,1.8vw,24px);gap:14px}
  .pc-tu .pc-stg > .pc-waitbox > svg{width:clamp(22px,3vh,30px);height:clamp(22px,3vh,30px)}
  .pc-tu .pc-stg > .pc-waitbox b{font-size:clamp(17px,1.6vh + .3vw,22px)}
  .pc-tu .pc-stg > .pc-waitbox span{font-size:clamp(14px,1.3vh + .15vw,16px)}
  .pc-tu .pc-stg > .pc-sim{margin-top:clamp(12px,2.2vh,22px);min-height:clamp(44px,5.4vh,52px);font-size:clamp(15px,1.4vh + .2vw,18px)}
  .pc-tu .pc-stg > .pc-fine{margin-top:clamp(6px,1vh,10px);font-size:clamp(13px,1.2vh + .1vw,15px)}
}
/* short computer windows: the merged stage, tight */
@media (min-width:861px) and (max-height:700px){
  .pc-tu .pc-stg > .pc-tu__back{margin-top:-4px}
  .pc-tu .pc-stg > .pc-ptitle{font-size:clamp(26px,5vh,32px)}
  .pc-tu .pc-stg > .pc-punch{margin-top:4px;font-size:15px}
  .pc-tu .pc-stg > .pc-plead{margin-top:4px;font-size:15px;line-height:1.35}
  .pc-tu .pc-stg > .pc-tu__pay{margin-top:10px}
  .pc-tu .pc-stg > .pc-tu__pay .pc-onedollar b{font-size:clamp(56px,11vh,72px)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep{padding:10px}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__qr{width:clamp(96px,17vh,112px);height:clamp(96px,17vh,112px)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__r .pc-btn{min-height:40px}
  .pc-tu .pc-stg > .pc-tu__pay + .pc-pfoot,.pc-tu .pc-stg > .pc-tu__pay + .pc-tu__id{margin-top:8px}
  .pc-tu .pc-stg > .pc-pfoot{font-size:13px;line-height:1.35}
}
@media (max-width:860px){
  .pc-tu .pc-stg > .pc-tu__pay{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .pc-tu .pc-stg > .pc-tu__pay > .pc-onedollar{align-self:center}
}
@media (min-width:861px) and (max-height:700px){
  .pc-tu .pc-stg:has(> .pc-tu__pay){position:relative}
  .pc-tu .pc-stg:has(> .pc-tu__pay) > .pc-tu__back{position:absolute;top:-6px;left:var(--lane-l);margin:0}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__r{gap:6px}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__r .pc-k{line-height:1.2}
}
/* 4. WALLET LOCKED IN. Stage 1: the tick and "Wallet locked in" are the hero, bigger; what it means under them. Stage 2: what
   is unlocking is the hero: the coin and its label, then the unlocked figure big in gold over the whole airdrop, the line
   under it, then the way on (Verify first still picks it) and the two text links, one centred column of the system's width */
@media (min-width:861px){
  .pc-ok .pc-stg > .pc-okbadge{width:clamp(96px,15vh,150px);height:clamp(96px,15vh,150px)}
  .pc-ok .pc-stg > .pc-okbadge svg{width:52%;height:52%}
  .pc-ok .pc-stg > .pc-ok__amt{margin-top:clamp(16px,3vh,30px);font-size:clamp(44px,7.6vh,80px)}
  .pc-ok .pc-stg > .pc-ok__sub{margin-top:clamp(10px,1.8vh,18px);font-size:clamp(16px,1.6vh + .25vw,20px);max-width:44ch}
  .pc-ok .pc-stg > .pc-pfoot{margin-top:clamp(12px,2.4vh,24px);font-size:clamp(14px,1.3vh + .1vw,16px)}
  .pc-ok .pc-stg > .pc-unl{width:min(100%,560px);box-sizing:border-box;margin:0;padding:clamp(16px,3vh,30px) clamp(18px,2vw,28px);text-align:center}
  .pc-ok .pc-stg > .pc-unl .pc-unl__h{justify-content:center;font-size:clamp(15px,1.5vh + .1vw,18px);gap:12px}
  .pc-ok .pc-stg > .pc-unl .pc-unl__coin{width:clamp(40px,6vh,60px);height:clamp(40px,6vh,60px)}
  .pc-ok .pc-stg > .pc-unl .pc-unl__n{justify-content:center;margin:clamp(12px,2.2vh,22px) 0 clamp(8px,1.4vh,14px);font-size:clamp(20px,2.6vh,28px);gap:10px}
  .pc-ok .pc-stg > .pc-unl .pc-unl__n b{font-size:clamp(46px,8.4vh,88px);color:transparent;background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 45%,var(--gold-3) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 4px 0 var(--ink))}
  .pc-ok .pc-stg > .pc-unl .pc-unl__t{max-width:44ch;margin-left:auto;margin-right:auto;font-size:clamp(15px,1.4vh + .2vw,18px)}
  .pc-ok .pc-stg > .pc-unl + .pc-btn{width:min(100%,420px);margin-top:clamp(16px,3.2vh,32px);min-height:clamp(54px,6.6vh,62px)}
  .pc-ok .pc-stg > .pc-ok__more{margin-top:clamp(6px,1.2vh,12px)}
  .pc-ok .pc-stg > .pc-ok__more .pc-textbtn{min-height:40px;font-size:clamp(14px,1.3vh + .15vw,16px)}
}
@media (min-width:861px) and (max-height:700px){
  .pc-ok .pc-stg > .pc-okbadge{width:clamp(80px,15vh,96px);height:clamp(80px,15vh,96px)}
  .pc-ok .pc-stg > .pc-ok__amt{margin-top:14px;font-size:clamp(40px,8vh,52px)}
  .pc-ok .pc-stg > .pc-unl{padding:14px 18px}
  .pc-ok .pc-stg > .pc-unl .pc-unl__n{margin:10px 0 6px}
  .pc-ok .pc-stg > .pc-unl .pc-unl__n b{font-size:clamp(40px,8vh,52px)}
  .pc-ok .pc-stg > .pc-unl + .pc-btn{margin-top:14px;min-height:50px}
}
@media (max-width:860px){
  .pc-ok .pc-stg > .pc-okbadge{width:116px;height:116px}
  .pc-ok .pc-stg > .pc-unl{text-align:center;padding:18px 16px}
  .pc-ok .pc-stg > .pc-unl .pc-unl__h{justify-content:center}
  .pc-ok .pc-stg > .pc-unl .pc-unl__n{justify-content:center;margin:14px 0 10px}
  .pc-ok .pc-stg > .pc-unl .pc-unl__n b{font-size:clamp(40px,12vw,52px);color:transparent;background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 45%,var(--gold-3) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 var(--ink))}
  .pc-ok .pc-stg > .pc-unl + .pc-btn{margin-top:18px}
}
/* the address box keeps the room its address and Copy address need (the EVM amount "$1.05" is wider than "$1"): the box takes
   the larger share of the row, the amount the rest, and a wider amount steps down a size */
@media (min-width:861px){
  .pc-tu .pc-stg > .pc-tu__pay{grid-template-columns:minmax(0,1fr) minmax(340px,1.5fr)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-onedollar--evm b{font-size:clamp(52px,8vh,84px)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-onedollar span{text-align:center;line-height:1.2}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__r .pc-btn{white-space:nowrap}
}
@media (min-width:861px) and (max-height:700px){ .pc-tu .pc-stg > .pc-tu__pay .pc-onedollar--evm b{font-size:clamp(44px,8vh,56px)} }
/* review fixes (pc78A) ------------------------------------------------------------------------------------------------- */
/* the address box: its label on as few lines as it can, the address never cut twice (a smaller QR in the row gives the words
   the room) */
@media (min-width:861px){
  .pc-tu .pc-stg > .pc-tu__pay{grid-template-columns:minmax(0,.85fr) minmax(360px,1.7fr)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__qr{width:clamp(96px,13vh,132px);height:clamp(96px,13vh,132px)}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__r .pc-k{font-size:12px;letter-spacing:.02em;line-height:1.25}
  .pc-tu .pc-stg > .pc-tu__pay .pc-dep__r code{font-size:clamp(13px,1.3vh,15px);overflow:visible;text-overflow:clip}
}
/* the steps and the wait: the wait is this stage's hero (the state that matters), the steps over it at the frame's scale */
@media (min-width:861px) and (min-height:701px){
  .pc-tu .pc-stg > .pc-tiles > li{padding:clamp(18px,3vh,30px) 12px}
  .pc-tu .pc-stg > .pc-tiles .pc-badge{width:40px;height:40px;font-size:19px}
  .pc-tu .pc-stg > .pc-tiles b{font-size:clamp(18px,1.6vh + .4vw,23px)}
  .pc-tu .pc-stg > .pc-tiles span:not(.pc-badge){font-size:clamp(14px,1.4vh + .1vw,17px)}
  .pc-tu .pc-stg > .pc-waitbox{margin-top:clamp(16px,3vh,30px);padding:clamp(18px,3vh,30px) clamp(18px,2vw,28px);border-width:2px}
  .pc-tu .pc-stg > .pc-waitbox > svg{width:34px;height:34px}
  .pc-tu .pc-stg > .pc-waitbox b{font-size:clamp(20px,2vh + .4vw,28px)}
  .pc-tu .pc-stg > .pc-waitbox span{font-size:clamp(15px,1.4vh + .2vw,18px);line-height:1.4}
  .pc-tu .pc-stg > .pc-sim{margin-top:clamp(16px,3vh,30px)}
}
/* Wallet locked in: the unlocking panel has the Connect card's width (one grid), and stage 1 is scaled to the frame */
@media (min-width:861px){
  .pc-ok .pc-stg > .pc-unl{width:100%}
}
@media (min-width:861px) and (min-height:701px){
  .pc-ok .pc-stg > .pc-okbadge{width:clamp(110px,18vh,176px);height:clamp(110px,18vh,176px)}
  .pc-ok .pc-stg > .pc-ok__amt{font-size:clamp(52px,9vh,96px)}
  .pc-ok .pc-stg > .pc-ok__sub{font-size:clamp(17px,1.8vh + .3vw,22px)}
  .pc-ok .pc-stg > .pc-unl .pc-unl__n b{font-size:clamp(56px,10vh,104px)}
  .pc-ok .pc-stg > .pc-unl .pc-unl__t{font-size:clamp(16px,1.6vh + .2vw,19px)}
}
@media (max-width:860px){
  .pc-ok .pc-stg > .pc-unl{width:100%;box-sizing:border-box;padding:22px 16px}
  .pc-ok .pc-stg > .pc-unl .pc-unl__n b{font-size:clamp(46px,14vw,60px)}
  .pc-ok .pc-stg > .pc-unl .pc-unl__t{font-size:16px}
  .pc-ok .pc-stg > .pc-okbadge{width:132px;height:132px}
}


/* pc78B layout */
/* ==== pc78B: HOW TO UNLOCK AND THE AIRDROP DASHBOARD, ONE LAYOUT SYSTEM WITH VERIFY'S LAST STAGE (pc77) (Luke, 26 Oct: "even
   that screen is shit... loads of empty space... consider each screen and how the info should be presented"). Same content,
   same flow. Each stage: one hero, the parts grouped under what they explain, the action last, scaled to the frame with the
   same vh clamps as pc77's summary (figure clamp(52px,9.4vh,100px), coin clamp(60px,10.4vh,108px), the column 560-720px, the
   main button min(100%,380px) x clamp(50px,6.2vh,58px), gaps clamp(16px,3.2vh,32px), small print 14px). ================== */
.pc-dash,.pcd{--b-hero:clamp(52px,9.4vh,100px);--b-coin:clamp(60px,10.4vh,108px);--b-gap:clamp(16px,3.2vh,32px);--b-gap-s:clamp(10px,1.8vh,16px);
  --b-btnw:min(100%,380px);--b-btnh:clamp(50px,6.2vh,58px);--b-btnf:clamp(18px,1.8vh + .2vw,21px)}
.pc-gold-fig{color:transparent;background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 45%,var(--gold-3) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 var(--ink))}

/* 1. Stage 1, the title and the lead: the coin, the title, then the airdrop as the hero (the lead split at its number) */
.pc-dash .pc-stg:has(> .pc-htu1){justify-content:center}
.pc-htu1{display:flex;flex-direction:column;align-items:center;width:min(100%,680px);margin:0 auto;text-align:center}
.pc-htu1 > .pc-htu1__coin.pc-coinspin{width:var(--b-coin);height:var(--b-coin);margin:0 0 var(--b-gap-s);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.pc-dash .pc-stg .pc-htu1 > .pc-title{margin:0;font-size:var(--t-title);line-height:1.02}
.pc-dash .pc-stg .pc-htu1 > .pc-htu1__lead{display:flex;flex-direction:column;align-items:center;max-width:none;margin:var(--b-gap) 0 0;font:600 var(--t-lead)/1.35 var(--ui);color:#DCE3FF}
.pc-htu1__n{display:flex;align-items:baseline;justify-content:center;gap:.22em;margin:clamp(2px,.6vh,8px) 0 clamp(8px,1.6vh,16px);font-weight:400;line-height:1;white-space:nowrap}
.pc-htu1__n > .num{font:400 var(--b-hero)/1 var(--display);color:transparent;background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 45%,var(--gold-3) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 var(--ink))}
.pc-htu1__n > i{font:400 calc(var(--b-hero) * .36)/1 var(--display);font-style:normal;color:var(--gold-2);text-shadow:0 3px 0 var(--ink)}
.pc-htu1__post{max-width:34ch;text-wrap:balance}
@media (max-width:860px){
  .pc-htu1 > .pc-htu1__coin.pc-coinspin{width:76px;height:76px}
  .pc-dash .pc-stg .pc-htu1 > .pc-title{font-size:clamp(30px,8.6vw,38px)}
  .pc-htu1__n > .num{font-size:clamp(44px,14vw,60px)}
  .pc-htu1__n > i{font-size:clamp(18px,5.4vw,22px)}
  .pc-dash .pc-stg .pc-htu1 > .pc-htu1__lead{font-size:18px;margin-top:22px}
}
/* stage 1: the title is the screen's name, smaller than the figure (the hero) */
.pc-htu1{width:min(100%,760px)}
.pc-dash .pc-stg .pc-htu1 > .pc-title{font-size:clamp(28px,3vh + .9vw,46px)}

/* 2. "Your unlock progress": no panel in the frame; one centred column of the pc77 width scale. What it is -> the unlocked
   count (hero) -> the bar and its ends -> the Kickstart line -> what is not locked yet and its Connect (last) */
.pc-dash .pc-stg:has(> .pc-prog8){justify-content:center}
html.pc-staged .pc-dash .pc-stg > .pc-prog8{display:flex;flex-direction:column;align-items:center;width:min(100%,760px);margin:0 auto;padding:0;background:none;border:0;box-shadow:none;text-align:center}
.pc-prog8 > .pc-prog__k{display:inline-flex;align-items:center;gap:10px;margin:0;font:400 clamp(15px,1.7vh,19px)/1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--sky)}
.pc-prog8 > .pc-prog__k .pc-locktile{width:clamp(32px,4.2vh,40px);height:clamp(32px,4.2vh,40px);border-width:2px;border-radius:10px}
.pc-prog8 > .pc-prog__k .pc-locktile svg{width:55%;height:55%}
html.pc-staged .pc-dash .pc-prog8 > .pc-prog__n{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 .3em;margin:clamp(8px,1.6vh,16px) 0 0;font:400 clamp(18px,2.6vh,28px)/1.1 var(--display);color:#C9D2F5}
html.pc-staged .pc-dash .pc-prog8 > .pc-prog__n > b{font:400 var(--b-hero)/1 var(--display);color:transparent;background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 45%,var(--gold-3) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 var(--ink))}
.pc-prog8 > .pc-prog__start{margin:clamp(4px,.8vh,8px) 0 0;font-size:clamp(15px,1.7vh,18px)}
.pc-prog8 > .pc-prog__bar{align-self:stretch;margin-top:var(--b-gap);text-align:left}
html.pc-staged .pc-dash .pc-prog8 .pc-ubar__k{margin:0 0 8px;font-size:clamp(13px,1.5vh,16px)}
html.pc-staged .pc-dash .pc-prog8 .pc-ubar{height:clamp(34px,5vh,48px);margin-top:0}
html.pc-staged .pc-dash .pc-prog8 .pc-ubar__k + .pc-ubar{margin-top:0}
html.pc-staged .pc-dash .pc-prog8 .pc-ubar__ticks{margin-top:8px;font-size:clamp(14px,1.6vh,17px)}
html.pc-staged .pc-dash .pc-prog8 .pc-unl__t{margin:clamp(10px,1.8vh,16px) auto 0;max-width:52ch;text-align:center;font-size:clamp(15px,1.7vh,18px);text-wrap:balance}
html.pc-staged .pc-dash .pc-prog8 .pc-ks-done{justify-content:center}
html.pc-staged .pc-dash .pc-prog8 > .pc-unl__ahead{margin:var(--b-gap-s) auto 0;max-width:52ch;color:var(--mint)}
/* what is not locked yet and its Connect: one group under a tone line, the button the last thing on the stage */
.pc-prog8 > .pc-prog__wait{align-self:stretch;display:flex;flex-direction:column;align-items:center;margin-top:var(--b-gap);padding-top:var(--b-gap);border-top:2px solid rgba(241,234,219,.14)}
html.pc-staged .pc-dash .pc-prog8 .pc-dash__wait{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:8px;margin:0;max-width:56ch;font-size:clamp(15px,1.7vh,18px);text-align:left}
html.pc-staged .pc-dash .pc-prog8 .pc-dash__wait > svg{flex:none;width:1.1em;height:1.1em;margin-top:.1em}
html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-btn{width:var(--b-btnw);min-height:var(--b-btnh);margin-top:var(--b-gap-s);padding:0 24px;font-size:var(--b-btnf)}
/* short windows (1000x570, 1147x655): the not-locked line and its button share one row */
@media (min-width:861px) and (max-height:760px){
  .pc-prog8 > .pc-prog__wait{flex-direction:row;justify-content:center;gap:20px;margin-top:clamp(12px,2.2vh,20px);padding-top:clamp(12px,2.2vh,20px)}
  html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-btn{flex:none;width:auto;min-width:220px;margin-top:0}
  html.pc-staged .pc-dash .pc-prog8 .pc-dash__wait{align-items:center;max-width:40ch}
}
@media (max-width:860px){
  html.pc-staged .pc-dash .pc-prog8 > .pc-prog__n > b{font-size:clamp(46px,14vw,60px)}
  html.pc-staged .pc-dash .pc-prog8 > .pc-prog__n{font-size:20px}
  .pc-prog8 > .pc-prog__bar{margin-top:22px}
  html.pc-staged .pc-dash .pc-prog8 .pc-ubar{height:38px}
  html.pc-staged .pc-dash .pc-prog8 .pc-ubar__ticks{font-size:14px}
  html.pc-staged .pc-dash .pc-prog8 .pc-unl__t,html.pc-staged .pc-dash .pc-prog8 .pc-dash__wait{font-size:15px}
  .pc-prog8 > .pc-prog__wait{margin-top:18px;padding-top:16px}
  html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-btn{width:100%;min-height:54px;font-size:20px;margin-top:14px}
}
@media (min-width:861px) and (max-height:620px){
  html.pc-staged .pc-dash .pc-prog8 > .pc-prog__n{margin-top:6px}
  html.pc-staged .pc-dash .pc-prog8 > .pc-prog__n > b{font-size:46px}
  .pc-prog8 > .pc-prog__k .pc-locktile{width:28px;height:28px}
  .pc-prog8 > .pc-prog__bar{margin-top:14px}
  html.pc-staged .pc-dash .pc-prog8 .pc-ubar__k{margin-bottom:6px}
  html.pc-staged .pc-dash .pc-prog8 .pc-ubar{height:32px}
  html.pc-staged .pc-dash .pc-prog8 .pc-ubar__ticks{margin-top:5px}
  html.pc-staged .pc-dash .pc-prog8 .pc-unl__t{margin-top:8px}
  .pc-prog8 > .pc-prog__wait{margin-top:12px;padding-top:12px}
  html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-btn{min-height:48px}
}
@media (min-width:861px) and (max-height:760px){ html.pc-staged .pc-dash .pc-prog8 .pc-dash__wait{max-width:50ch} }
@media (max-width:860px){
  .pc-prog8 > .pc-prog__k .pc-locktile{width:30px;height:30px}
  html.pc-staged .pc-dash .pc-prog8 > .pc-prog__n{margin-top:8px;font-size:19px}
  html.pc-staged .pc-dash .pc-prog8 > .pc-prog__n > b{font-size:clamp(44px,13vw,54px)}
  .pc-prog8 > .pc-prog__bar{margin-top:16px}
  html.pc-staged .pc-dash .pc-prog8 .pc-ubar__k{margin-bottom:6px}
  html.pc-staged .pc-dash .pc-prog8 .pc-ubar{height:34px}
  html.pc-staged .pc-dash .pc-prog8 .pc-ubar__ticks{margin-top:6px}
  html.pc-staged .pc-dash .pc-prog8 .pc-unl__t{margin-top:10px}
  .pc-prog8 > .pc-prog__wait{margin-top:14px;padding-top:12px}
  html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-btn{min-height:52px;margin-top:10px}
}

/* 3. The last stage: the three steps, then "Start ripping", then the small print. The steps are no longer boxes in the frame
   (a box in a box): three columns split by one tone line, each its number, its picture (the figure the step is about), its
   heading and its words; the pictures share one row so the headings line up. "Start ripping" at the pc77 main-button size,
   the last thing to press; the small print under it. On a phone each step is its own stage, laid out the same way. */
.pc-dash .pc-stg:has(> .pc-steps3){justify-content:center}
html.pc-staged .pc-dash .pc-stg > .pc-steps3{gap:0;margin:0}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 > li.pc-panel{position:relative;padding:0 clamp(16px,2.2vw,32px);background:none;border:0;border-radius:0;box-shadow:none}
html.pc-staged .pc-dash .pc-stg > .pc-steps3:not(.pc-steps3--one) > li + li{border-left:2px solid rgba(241,234,219,.14)}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 > li > .pc-badge{position:static;transform:none;margin:0 0 clamp(8px,1.6vh,16px);justify-self:center}
@media (min-width:861px){
  html.pc-staged .pc-dash .pc-stg > .pc-steps3:not(.pc-steps3--one) > li{grid-row:span 4}
}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art{min-height:clamp(84px,17vh,200px);margin-bottom:clamp(6px,1.2vh,12px)}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill{height:clamp(84px,17vh,200px)}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill img{width:clamp(52px,10.5vh,110px)}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-mintbig{font-size:clamp(40px,7vh,64px)}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 h2{margin:clamp(6px,1.2vh,12px) 0 clamp(4px,.8vh,8px);font-size:clamp(20px,2.2vh + .4vw,28px)}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 p{font-size:clamp(14px,1.1vh + .4vw,18px);line-height:1.42;max-width:30ch;margin-inline:auto}
html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center{margin-top:var(--b-gap)}
html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-btn{width:var(--b-btnw);min-height:var(--b-btnh);padding:0 24px;font-size:var(--b-btnf)}
html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-fine{max-width:min(92ch,100%);margin-top:var(--b-gap-s);font-size:13px;line-height:1.45}
@media (min-width:861px) and (max-height:620px){
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art,html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill{min-height:76px;height:auto}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill{height:76px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill img{width:50px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-mintbig{font-size:38px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 > li > .pc-badge{width:28px;height:28px;font-size:14px;margin-bottom:6px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 h2{margin:4px 0 4px;font-size:20px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 p{font-size:14px;line-height:1.36}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center{margin-top:14px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-btn{min-height:46px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-fine{margin-top:8px;font-size:12px;line-height:1.35}
}
/* the phone: one step per stage, the picture bigger (it is the stage's hero), the words under it */
@media (max-width:860px){
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one > li.pc-panel{padding:0 4px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-steps3__art,html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-steps3__art .pc-fanstill{min-height:150px;height:150px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-steps3__art .pc-fanstill img{width:88px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-mintbig{font-size:58px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one h2{margin:14px 0 8px;font-size:28px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one p{font-size:17px;line-height:1.45}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one > li > .pc-badge{margin-bottom:12px}
  /* the last step's stage also carries Start ripping and the small print: its picture a little smaller so all of it fits */
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-steps3__art,html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-steps3__art .pc-fanstill{min-height:96px;height:96px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-mintbig{font-size:50px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one h2{margin:8px 0 6px;font-size:24px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one p{font-size:16px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center{margin-top:18px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-btn{width:100%;min-height:54px;font-size:20px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-fine{margin-top:10px;font-size:12.5px;line-height:1.4}
}
/* the figures stay on one line in their column ("Q1 2027" broke in two at 1512x982) */
html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art{container-type:inline-size}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-mintbig:not(.pc-leftbig){white-space:nowrap;font-size:min(clamp(40px,6.4vh,58px),17cqi)}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art,html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill{min-height:clamp(84px,15vh,190px)}
html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill{height:clamp(84px,15vh,190px)}
@media (min-width:861px) and (max-height:620px){
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art,html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill{min-height:62px;height:auto}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill{height:62px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill img{width:42px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-mintbig:not(.pc-leftbig){font-size:34px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 > li > .pc-badge{margin-bottom:4px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center{margin-top:12px}
}
@media (max-width:860px){
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-steps3__art{container-type:normal}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-mintbig:not(.pc-leftbig){font-size:58px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-mintbig:not(.pc-leftbig){font-size:50px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-steps3__art,html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-steps3__art .pc-fanstill{min-height:150px;height:150px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-steps3__art,html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-steps3__art .pc-fanstill{min-height:96px;height:96px}
}
@media (min-width:861px) and (max-height:620px){
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art{gap:4px;margin-bottom:2px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-mintchip{height:24px;margin-top:2px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 h2{margin:2px 0 3px}
}
/* the fan's packs stay inside their picture box (they touched the heading under them) */
html.pc-staged .pc-dash .pc-stg > .pc-steps3:not(.pc-steps3--one) .pc-steps3__art .pc-fanstill img{width:clamp(50px,8.6vh,100px)}
@media (min-width:861px) and (max-height:620px){ html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-fanstill img{width:37px} }

/* pc78B review fixes (independent reviewer, 26 Oct) */
/* stage 1: the hero grows with a tall window (the group filled ~55% of the frame at 1512x982) */
.pc-htu1 > .pc-htu1__coin.pc-coinspin{width:clamp(60px,12.4vh,132px);height:clamp(60px,12.4vh,132px)}
.pc-htu1__n > .num{font-size:clamp(52px,11.6vh,124px)}
.pc-htu1__n > i{font-size:clamp(19px,4.2vh,44px)}
@media (max-width:860px){ .pc-htu1 > .pc-htu1__coin.pc-coinspin{width:84px;height:84px} .pc-htu1__n > .num{font-size:clamp(44px,14vw,60px)} .pc-htu1__n > i{font-size:clamp(18px,5.4vw,22px)} }
/* progress: a little bigger in a tall window; the done tick sits at the start of its line, the line centred */
@media (min-width:861px) and (min-height:880px){
  html.pc-staged .pc-dash .pc-prog8 > .pc-prog__n > b{font-size:clamp(52px,11vh,116px)}
  html.pc-staged .pc-dash .pc-prog8 .pc-ubar{height:52px}
  .pc-prog8 > .pc-prog__bar{margin-top:clamp(28px,4vh,40px)}
}
html.pc-staged .pc-dash .pc-prog8 .pc-unl__t.pc-ks-done{display:block}
html.pc-staged .pc-dash .pc-prog8 .pc-ks-done > svg{display:inline-block;margin:0 6px 0 0;vertical-align:-3px}
html.pc-staged .pc-dash .pc-prog8 .pc-ks-done > span{display:inline}
/* last stage: the two big figures the same size (Q1 2027 was ~20% smaller than the dollars), so their chips line up */
html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-mintbig:not(.pc-leftbig){font-size:min(var(--lb,clamp(46px,6vh,60px)),calc(100cqi / (7 * .66)))}
@media (min-width:861px) and (max-height:760px){ html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art{--lb:clamp(36px,6vh,52px)} }
@media (min-width:861px) and (max-height:620px){
  html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art{--lb:32px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3:not(.pc-steps3--one) .pc-steps3__art .pc-fanstill img{width:36px}
}
@media (max-width:860px){
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-steps3__art{--lb:58px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-steps3__art{--lb:50px}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-mintbig:not(.pc-leftbig){font-size:var(--lb)}
  html.pc-staged .pc-dash .pc-stg > .pc-steps3--one .pc-mintchip{height:30px;padding:0 12px;font-size:13px;margin-top:10px}
}
/* the chips never squeeze (the last phone step's picture box is shorter: its chip was drawn 14px tall) */
html.pc-staged .pc-dash .pc-stg > .pc-steps3 .pc-steps3__art .pc-mintchip{flex:none}
@media (max-width:860px){ html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-steps3__art:not(:has(.pc-fanstill)){height:auto;margin-bottom:4px} }
@media (max-width:860px){
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-steps3__art{--lb:44px;gap:4px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-mintchip{margin-top:6px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one > li > .pc-badge{margin-bottom:8px}
}
/* shorter phones (375x812): the progress stage and the last step's stage a little tighter */
@media (max-width:860px) and (max-height:830px){
  html.pc-staged .pc-dash .pc-prog8 > .pc-prog__n > b{font-size:46px}
  .pc-prog8 > .pc-prog__bar{margin-top:12px}
  html.pc-staged .pc-dash .pc-prog8 .pc-unl__t{margin-top:8px}
  .pc-prog8 > .pc-prog__wait{margin-top:10px;padding-top:10px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one .pc-steps3__art{--lb:38px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one h2{margin:4px 0 4px;font-size:21px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-center) > .pc-steps3--one p{font-size:15px;line-height:1.38}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center{margin-top:12px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-btn{min-height:50px}
  html.pc-staged .pc-dash .pc-stg:has(> .pc-steps3) > .pc-center .pc-fine{margin-top:6px;font-size:12px;line-height:1.35}
}
/* the pictures sit on the bottom of their shared row, so the LEFT TO RIP and TARGET TGE chips line up whatever the figures' size */
@media (min-width:861px){ html.pc-staged .pc-dash .pc-stg > .pc-steps3:not(.pc-steps3--one) .pc-steps3__art{justify-content:flex-end} }

/* pc78 integration: the EVM amount ("$1.04") never wider than its column. At 1147x655 the column is ~120px inside its padding
   and the 52px amount was 147px wide (1-2px past the lane, evm-qa). The amount's own column is the size container on
   computers (the row's columns are fr-sized there, so the containment changes no column); "$1.0X" is ~2.8em wide,
   so 35cqi with the column's side padding given to it (1512x982: 77px, as before) */
@media (min-width:861px){
  .pc-tu .pc-stg > .pc-tu__pay > .pc-onedollar--evm{container-type:inline-size;padding:0}
  .pc-tu .pc-stg > .pc-tu__pay .pc-onedollar--evm b{font-size:min(clamp(52px,8vh,84px),35cqi)}
}
@media (min-width:861px) and (max-height:700px){ .pc-tu .pc-stg > .pc-tu__pay .pc-onedollar--evm b{font-size:min(clamp(44px,8vh,56px),35cqi)} }
/* pc78 integration (reviewer): the $1 steps' tile titles ("Open account") never run edge to edge in their tile: each tile is
   the size container and its title is at most 12.5cqi (Titan One: "Open account" is ~7.4em), at the pc78A sizes otherwise */
@media (min-width:861px) and (min-height:621px){
  .pc-tu .pc-stg > .pc-tiles > li{container-type:inline-size}
  .pc-tu .pc-stg > .pc-tiles b{font-size:min(clamp(16px,1.5vh + .3vw,21px),12.5cqi)}
}
@media (min-width:861px) and (min-height:701px){ .pc-tu .pc-stg > .pc-tiles b{font-size:min(clamp(18px,1.6vh + .4vw,23px),12.5cqi)} }

/* review fix 4 (rb/pc-ownwallet, 29 Oct): the player's own BlockRips wallets ("Also in this account": built-in deposit
   wallets, and an own wallet-mode wallet with nothing left) are part of the account card above them, not a second wallet
   to act on: indented under it on a thin rule, no box of their own, a small star, the title in the body face */
.pc-link .pc-stg > .pc-lrows--rest > .pc-lrow.pc-lrow--sub{margin-left:clamp(18px,3vw,34px);padding:4px 0 4px 14px;gap:2px;border:0;border-left:2px solid rgba(169,180,218,.32);border-radius:0;background:none;box-shadow:none;opacity:1}
.pc-link .pc-stg > .pc-lrows--rest > .pc-lrow--sub + .pc-lrow--sub{margin-top:-4px}
.pc-link .pc-stg > .pc-lrows--rest > .pc-lrow--sub .pc-lrow__main{gap:10px}
.pc-link .pc-stg > .pc-lrows--rest > .pc-lrow--sub .pc-wtile--acct{width:28px;height:28px;padding:0}
.pc-link .pc-stg > .pc-lrows--rest > .pc-lrow--sub .pc-lrow__who > b{font:700 15px/1.2 var(--ui);color:#DCE3FF}
.pc-link .pc-stg > .pc-lrows--rest > .pc-lrow--sub .pc-lrow__who > span,.pc-link .pc-stg > .pc-lrows--rest > .pc-lrow--sub .pc-lrow__note{font-size:13.5px}
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--rest > .pc-lrow--sub{padding-top:2px;padding-bottom:2px}
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--rest > .pc-lrow--sub .pc-lrow__who{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
.pc-link .pc-stg.pc-stg--acct.is-tight > .pc-lrows--rest > .pc-lrow--sub .pc-wtile--acct{width:24px;height:24px}

/* ---- rb/pc-confirm1-ui (Luke, 29 Oct): "later" is as big as Verify, side by side, on every wallet step (Connect, Verify,
   the $1 / $1.0X send step). .pc-pair holds the main button (.pc-pair__go) and the later button
   (.pc-pair__later, ghost): equal halves, the same height and font. The small text "later" under it stays only where the
   pair is not shown (the sign picker after Connect, a row in a list). */
.pc-pair{display:flex;justify-content:center;gap:12px;width:100%}
.pc-pair > .pc-btn{flex:1 1 0;min-width:0;white-space:nowrap}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-pair{width:min(100%,560px)}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-pair > .pc-btn{width:auto;flex:1 1 0;min-width:0;padding-left:16px;padding-right:16px}
.pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) > .pc-lrow:not(.is-signing) .pc-lrow__more .pc-lrow__later{display:none}
.pc-lrows--rest .pc-pair__later,.pc-later .pc-pair__later{display:none}
/* the send step: "I've sent it" and later, the same size */
.pc-tu .pc-stg > .pc-pair{align-self:center;width:min(100%,520px);margin-top:14px}
.pc-tu .pc-stg > .pc-pair > .pc-btn{min-height:clamp(44px,5.4vh,52px);font-size:clamp(15px,1.4vh + .2vw,18px);padding:0 14px}
.pc .pc-pair > .pc-sim{align-self:auto;margin-top:0}
.pc-pair--tu.is-done > .pc-pair__later{display:none}
.pc-pair--tu.is-done > .pc-sim{flex:0 1 auto;padding:0 24px}
@media (max-width:560px){
  .pc-pair{gap:8px}
  .pc-link .pc-stg > .pc-lrows:not(.pc-lrows--rest) .pc-lrow__act .pc-pair > .pc-btn{padding-left:6px;padding-right:6px;font-size:15px}
  .pc-tu .pc-stg > .pc-pair{margin-top:10px}
  .pc-tu .pc-stg > .pc-pair > .pc-btn{min-height:44px;padding:0 6px;font-size:15px}
}

/* ---- rb/pc-namex (Luke, 29 Oct; DECISIONS 4b): "Pick your name" for a nameless account whose X handle could not be saved
   as its name, on its first Connect / Verify press. A sheet over the wallet's stage (no X: the name or Later), on the
   page's own parts: the stage title, the wallet card's box, the add-in's field and error colours, the .pc-pair of a pink
   main button and a same-size ghost Later */
.pc-name{display:flex;flex-direction:column;align-items:center;width:100%}
.pc-name__form{display:flex;flex-direction:column;width:min(440px,100%);margin:clamp(14px,2.4vh,22px) auto 0;padding:clamp(14px,2vh,20px) clamp(16px,2vw,22px) clamp(16px,2.2vh,22px);
  border:2px solid rgba(169,180,218,.32);border-radius:20px;background:rgba(10,15,46,.65);box-sizing:border-box;text-align:left}
.pc-name__k{display:block;margin:0 0 8px;font:400 12px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--sky)}
.pc-name__row{display:flex;align-items:center;gap:2px;height:54px;padding:0 14px;border:2px solid rgba(169,180,218,.45);border-radius:14px;background:rgba(7,10,34,.75);box-sizing:border-box;
  transition:border-color .15s ease-out,box-shadow .15s ease-out}
.pc-name__row:focus-within{border-color:var(--sky);box-shadow:0 0 0 3px rgba(143,216,255,.25)}
.pc-name__row.is-bad{border-color:#FF8A9C;box-shadow:0 0 0 3px rgba(255,138,156,.18)}
.pc-name__at{flex:none;font:700 20px/1 var(--ui);color:#8F9AC8;user-select:none}
.pc-name__f{flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;outline:none;background:none;font:700 20px/1 var(--ui);color:#fff}
.pc-name__f:disabled{opacity:.6}
.pc-name__f:focus,.pc-name__f:focus-visible{outline:none}   /* the row carries the focus ring (:focus-within) */
.pc-name__msg{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;font:700 14px/1.35 var(--ui);color:#FF8A9C;text-wrap:pretty}
.pc-name__msg svg{flex:none;width:16px;height:16px;margin-top:1px}
.pc-name__pair{margin-top:clamp(12px,1.8vh,16px)}
.pc-name__pair > .pc-btn{padding-left:12px;padding-right:12px}
.pc-name__pair > .pc-btn svg{flex:none;width:20px;height:20px}
.pc-sheet--name .pc-sheet__p{width:min(580px,100%);padding:clamp(22px,3vh,30px) clamp(18px,2.4vw,28px) clamp(20px,2.6vh,26px)}
.pc-sheet--name .pc-sheet__p > .pc-name > .pc-ptitle{padding:0;font-size:clamp(26px,3.6vh,34px)}
@media (max-width:560px){
  .pc-name__form{padding:14px 14px 16px}
  .pc-name__row{height:52px}
  .pc-name__f,.pc-name__at{font-size:18px}   /* 16px+: iOS does not zoom into the field */
  .pc-name__pair > .pc-btn{padding-left:6px;padding-right:6px;font-size:15px}
  .pc-sheet--name .pc-sheet__p{padding:22px 16px calc(18px + env(safe-area-inset-bottom))}
}
@media (max-width:430px){ .pc-name__pair > .pc-btn{font-size:14px;letter-spacing:-.01em} }   /* "Save and connect" on one line with room either side, Later the same size */
@media (prefers-reduced-motion:reduce){ .pc-name__row{transition:none} }
/* pc-release-30oct: the EVM send's first stage on a platform wallet (the ID line, no address box beside the amount) at
   1000x570: the row is a centred flex row and the amount box is its own size container (pc78 integration, above), so it
   had no width of its own and folded to 0 (the words one per line, under the pager dots; worker notes 28 Oct §4).
   It gets its width from the row instead */
@media (min-width:861px){ .pc-tu .pc-stg > .pc-tu__pay:not(:has(> .pc-dep)) > .pc-onedollar--evm{width:min(100%,440px)} }
/* ==== rb/pc-sendfrom (Luke, 31 Oct): the $1 step names the wallet the $1 comes FROM, by its address only (never a platform
   name). The "Send from" pill sits under the title: mint, slim, so it reads as the source and never as the deposit box (the
   destination: the navy card with the gold Copy address). No Copy on it (rb/pc-ugc, Luke 31 Oct): only the TO address has one ==== */
.pc-tu__from{display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;max-width:100%;margin:12px auto 0;padding:9px 20px;border:2px solid rgba(110,231,168,.55);border-radius:999px;background:rgba(110,231,168,.08)}
.pc-tu__from .pc-k{display:inline;color:var(--mint);font-size:13px;white-space:nowrap}
.pc-tu__fromw{display:inline-flex;align-items:center;gap:7px;min-width:0;color:#fff}
.pc-tu__fromw svg{width:20px;height:20px;flex:none;color:var(--mint)}
.pc-tu__fromw code{font:700 17px/1 var(--mono);color:#fff;white-space:nowrap}
.pc-tu .pc-stg > .pc-tu__from{margin-top:clamp(8px,1.4vh,14px)}
.pc-tu .pc-stg > .pc-tu__from + .pc-plead{margin-top:clamp(8px,1.2vh,12px)}
.pc-tu__lshort{display:none}   /* the phone's short lines (app.js renders both; the laptop shows the full ones) */
@media (max-width:420px){
  .pc-tu__from{gap:9px;padding:8px 16px}
  .pc-tu__from .pc-k{font-size:12px}
  .pc-tu__fromw code{font-size:15px}
}
@media (max-width:380px){   /* a 375 phone (rb/pc-ugc: no Copy on the pill any more, so the wallet icon stays) */
  .pc-tu__from{gap:8px;padding:8px 14px}
  .pc-tu__from .pc-k{font-size:11px}
}

/* THE PHONE: ONE PAGE (Luke, 31 Oct: "needs to be on one page really"; on the SE: "turn that back button into a button on
   the left side, opposite to the next button, and move everything up"). Under the laptop line the Solana $1 step is one
   stage (app.js stageGroups / stagify add .pc-tu--one): from (the pill), how much (one line, not the giant $1), to (the
   deposit box without its QR: you can't scan your own phone), the short lead, the wait when it has news, the small print with
   and one bar on the frame's bottom edge: a compact round Back, then "Verify later" and the pink "I've sent it" as an equal
   pair (DECISIONS: Later is as big as Verify). No step tiles, no dots. Fits 390x844 and 375x667 with no scrolling; a long
   message scrolls inside the panel, above the bar */
@media (max-width:860px){
  .pc-tu--one.pc-pagerframe.pc-pagerframe{padding-top:10px;padding-bottom:30px}
  .pc-tu--one .pc-pager__dots{display:none}
  .pc-tu--one .pc-stg{align-self:stretch;justify-content:center;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}   /* the frame's full height, the groups spread down it by .pc-tu__sp (Luke, 1 Nov: "spread out nicely"); a short phone (SE) has no spare room and scrolls inside */
  .pc-tu--one .pc-stg > .pc-tu__sp{display:block;flex:1 1 0;min-height:0;max-height:clamp(16px,6vh,64px)}   /* equal shares of the spare height above, between and below the four groups; capped so a tall screen centres the rest */
  .pc-tu--one .pc-stg::-webkit-scrollbar{display:none}
  .pc-tu--one .pc-stg > .pc-ptitle{margin-top:0;font-size:26px;line-height:1.05}
  .pc-tu--one .pc-stg > .pc-punch{margin-top:2px;font-size:15px}
  .pc-tu--one .pc-stg > .pc-tu__from{margin-top:8px}
  .pc-tu--one .pc-stg > .pc-onedollar{flex-direction:row;align-items:baseline;justify-content:center;gap:8px;margin:6px auto 0}
  .pc-tu--one .pc-stg > .pc-onedollar b{font-size:30px;filter:drop-shadow(0 2px 0 var(--ink))}
  .pc-tu--one .pc-stg > .pc-onedollar span{font-size:14px}
  .pc-tu--one .pc-stg > .pc-dep{margin-top:4px;padding:11px 14px;gap:0}
  .pc-tu--one .pc-dep__qr{display:none}
  .pc-tu--one .pc-stg > .pc-dep .pc-dep__r{gap:6px}
  .pc-tu--one .pc-stg > .pc-dep .pc-dep__r code{font-size:14px}
  .pc-tu--one .pc-stg > .pc-dep .pc-k{font-size:11px;letter-spacing:.01em;white-space:nowrap}
  .pc-tu--one .pc-stg > .pc-dep .pc-btn{min-height:42px}
  .pc-tu--one .pc-stg > .pc-dep .pc-dep__net{font-size:14px}
  .pc-tu--one .pc-stg > .pc-plead{margin-top:8px;font-size:15px;line-height:1.35;white-space:nowrap}
  .pc-tu--one .pc-plead .pc-tu__lfull{display:none}
  .pc-tu--one .pc-plead .pc-tu__lshort{display:inline}
  /* pc99: the small print lives behind the (i) on the amount line (app.js pc-tu__note); "<token> on <network> only" goes
     (the amount line says it). A site's own how-to (.pc-plead--how) stays */
  .pc-tu--one .pc-stg > .pc-plead:not(.pc-plead--how),.pc-tu--one .pc-stg > .pc-pfoot,.pc-tu--one .pc-dline > .pc-dline__x,.pc-tu--one .pc-stg > .pc-dep .pc-dep__net{display:none}
  .pc-tu__ib{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0 0 0 7px;padding:0;vertical-align:2px;
    border:2px solid currentColor;border-radius:50%;background:transparent;color:var(--mint);font:700 12px/1 var(--ui);text-transform:none;cursor:pointer}
  .pc-tu__ib::after{content:"";position:absolute;inset:-12px}   /* a 44px tap area */
  .pc-tu__ib.is-on{background:var(--mint);color:var(--ink)}
  .pc-tu__note{margin:8px auto 0;max-width:34ch;font:600 13px/1.4 var(--ui);color:var(--muted);text-align:center;text-wrap:pretty}
  .pc-tu__note[hidden]{display:none}
  .pc-tu--one.pc-tu--evm .pc-stg > .pc-plead{white-space:normal;text-wrap:balance}   /* pc99: the EVM one page's line (or a site's how-to) wraps */
  .pc-tu--one .pc-stg > .pc-pfoot{margin-top:4px;font-size:13px;line-height:1.35}
  .pc-tu--one .pc-stg > .pc-tiles{display:none}
  .pc-tu--one .pc-stg > .pc-waitbox{margin-top:8px;padding:10px 14px}
  .pc-tu--one .pc-stg > .pc-waitbox:has(> .pc-wait--plain){display:none}   /* the plain wait: the Send from pill already says which wallet */
  .pc-tu--one .pc-stg > .pc-fine--late{display:none}   /* pc99: the Solana page's "Slow to arrive?" */
  /* rb/airdrop-2min (Luke, 4 Nov): the EVM page's "Usually locks in about 2 minutes..." DOES show on the phone: small, muted,
     centred, in the empty band between the address box and the bar. Absolute in the frame (the bar's own box), just above the
     bar, so nothing on the page moves. While the status box has news (.pc-tu--news) the box fills that band and says the time
     itself ("It locks in once Polygon confirms it..."), so the line goes */
  .pc-tu--one.pc-tu--evm .pc-stg > .pc-fine{position:absolute;left:10px;right:10px;bottom:calc(var(--arw) / 2 - 1.5px + 10px);margin:0;font:600 13px/1.35 var(--ui);text-wrap:balance;pointer-events:none}
  .pc-tu--one.pc-tu--evm.pc-tu--news .pc-stg > .pc-fine{display:none}
  /* the bar: the pager's own pill look (.pc-pager__btn: navy Back, pink Next with its glow), straddling the frame's edge */
  .pc-tu__bar{position:absolute;z-index:3;left:10px;right:10px;bottom:calc(var(--arw) / -2 - 1.5px);height:var(--arw);display:flex;align-items:stretch;gap:8px}
  .pc-tu__bar > .pc-tu__barl,.pc-tu__bar > .pc-tu__bargo{flex:1 1 0;min-width:0;display:flex}   /* the equal pair */
  .pc-tu__bar > .pc-tu__barback{flex:0 0 var(--arw);width:var(--arw);padding:0}
  .pc-tu__bar .pc-pager__btn{padding:0 10px}
  .pc-tu__bar .pc-pager__lbl{font-size:15px;overflow:hidden;text-overflow:ellipsis}
  .pc-tu__bargo{position:relative}
  .pc-tu__bargo::before{content:"";position:absolute;inset:-6px;border-radius:999px;pointer-events:none;
    background:radial-gradient(closest-side,rgba(255,95,162,.9) 0%,rgba(250,46,134,.45) 55%,rgba(250,46,134,0) 100%);animation:pcarwglowp 1.8s ease-in-out infinite}
  .pc-tu__barl > .pc-pager__btn,.pc-tu__bargo > .pc-pager__btn{flex:1 1 auto;width:auto;min-width:0;height:100%}
  .pc-tu__bar.is-done > .pc-tu__barl{visibility:hidden}   /* Verify later goes with the lock; the other keeps its size */
  .pc-tu__bar [data-act="sentcheck"]:disabled{filter:saturate(.5) brightness(.8);animation:none;cursor:default}
}
@media (max-width:420px){ .pc-tu__bar .pc-pager__lbl{font-size:14px} .pc-tu__bar .pc-pager__btn{padding:0 8px} }
@media (max-width:380px){ .pc-tu--one .pc-stg > .pc-ptitle{font-size:24px} }   /* one line on a 375 phone */
/* a short phone (the SE, 375x667): the small print as one short line, the title a step smaller, the steps between blocks a
   little tighter (with the compact header everything else fits, the lead and "USDC on Solana only" included) */
@media (max-width:860px) and (max-height:700px){
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one.pc-pagerframe.pc-pagerframe{padding-top:8px}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-pfoot .pc-tu__lfull{display:none}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-pfoot .pc-tu__lshort{display:inline}
  /* rb/airdrop-2min: the EVM line as ONE short line (the band over the bar is 34px here; the full line is two at 12px and
     touched the address box) */
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one.pc-tu--evm .pc-stg > .pc-fine{bottom:calc(var(--arw) / 2 - 1.5px + 8px);font-size:12px;white-space:nowrap}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one.pc-tu--evm .pc-fine .pc-tu__lfull{display:none}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one.pc-tu--evm .pc-fine .pc-tu__lshort{display:inline}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-ptitle{font-size:22px}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-dep{padding:9px 12px}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-tu__from{margin-top:6px}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-onedollar{margin-top:4px}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-onedollar b{font-size:28px}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-pfoot{margin-top:6px}
}
/* the status box on the one page: its sender sentence goes (the Send from pill says it), so "Not here yet" is one short line;
   a wrong-wallet line keeps both addresses (it is not that sentence). On a short phone, while the box has news, the lines
   least needed make room for it (.pc-tu--news, app.js tuNews), so nothing scrolls and the Send from pill and the deposit box
   stay in full view: the lead, "USDC on Solana only", the "$RIPS ride on this wallet" line, the box's own heading (its line
   says it) and, once locked in, the small print */
@media (max-width:860px){
  .pc-tu--one .pc-waitbox .pc-wait__who{display:none}
  /* the Back circle and "Verify later" (and the pager's Back on every phone stage) straddle the frame's edge: opaque, so the
     frame's line does not show through them (was rgba(11,16,48,.92)) */
  .pc-pager__prev{background:#0B1030}
}
@media (max-width:860px) and (max-height:700px){
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-plead,:where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-punch,:where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-dep .pc-dep__net{display:none}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-waitbox:not(.is-done) b{display:none}   /* the news line says it: no "Waiting for your $1…" over it */
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-waitbox.is-done ~ .pc-pfoot{display:none}   /* locked in: "only send from your own wallet" is done with */
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-waitbox{margin-top:6px;padding:7px 10px;gap:8px}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-waitbox > svg{width:16px;height:16px;flex:none}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-waitbox b{font-size:16px}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-waitbox > div{font-size:13px;line-height:1.25}   /* (the lines' strut, not only the span's) */
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-waitbox span{font-size:13px;line-height:1.25}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-tu__from{margin-top:4px}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-onedollar,:where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-dep{margin-top:3px}
  :where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-waitbox,:where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-pfoot{margin-top:5px}
}

/* ==== rb/pc-sendfrom (Luke, 31 Oct): THE PHONE HEADER, compact on every Pack Checker screen. The account's picture, small, with
   its @name on the logo's row at the top right (the logo is top left, .pc-corner), not a big PROFILE @NAME block above the
   page: that space goes to the page. Absolute inside .pc-head (positioned), so it moves with the screen's slide-in. The
   laptop keeps the big one. ==== */
@media (max-width:560px){
  .pc-head{position:relative;margin-top:0}
  .pc-head > .pc-prof{position:absolute;z-index:4;top:-44px;right:0;height:28px;gap:8px;max-width:calc(100% - 120px)}
  .pc-head > .pc-prof .pc-prof__av{width:28px;height:28px;border-radius:8px;border-width:2px;box-shadow:0 3px 8px rgba(0,0,0,.45);flex:none}
  .pc-head > .pc-prof .pc-prof__t{min-width:0}
  .pc-head > .pc-prof .pc-prof__t span{display:none}
  .pc-head > .pc-prof .pc-prof__t b{margin:0;font-size:17px;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:2px}
  .pc-head:has(> .pc-prof:only-child){margin:0;gap:0}
}
/* pc107: Start over back for team testing (Luke 2 Nov: 'until I say'), remove before launch. pc63's bar predates this phone
   header: the picture + @name (44px above .pc-head) and the dashboard's close X (dash.css, 52px above it, 44px tall) hang
   into the space above the screen's header, so on a phone the bar (not staged: those pin it in the logo row) keeps its own
   row and the screen starts 60px under it, clear of both */

/* ==== rb/pc-ugc (team + Surge, 31 Oct: "it's not meant to show the $510k"): How to unlock's "Your unlock progress" bar is the
   airdrop dashboard's (dash.js stageParts, dash.css .pcd-stages): the real % above its right end, "KICKSTART" above its left
   end while that runs (its stretch: .pcd-trk__ks), the real 25% figure and the total under its rings, then Still to unlock |
   Volume to hit N% at the dashboard's sizes (.pcd--st), centred under the bar. The stage's own gap above the bar is the only one. ==== */
html.pc-staged .pc-dash .pc-prog8 .pcd-bar{margin-top:0}
.pc-prog8 .pcd-pct{margin-left:auto}
.pc-ks-tag{font:400 clamp(13px,1.5vh,16px)/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--pink-hi);padding-bottom:.15em}
html.pc-staged .pc-dash .pc-prog8 .pcd-nums{justify-content:center;margin-top:clamp(12px,2.2vh,22px);text-align:left}
html.pc-staged .pc-dash .pc-prog8 .pcd-nums dt{font-size:clamp(14px,1.6vh,17px)}
html.pc-staged .pc-dash .pc-prog8 .pcd-nums dd{margin-top:4px;font-size:clamp(24px,3.8vh,38px)}
@media (max-width:860px){
  html.pc-staged .pc-dash .pc-prog8 .pcd-nums > div{padding:0 16px}
  html.pc-staged .pc-dash .pc-prog8 .pcd-nums > div:first-child{padding-left:0}
  html.pc-staged .pc-dash .pc-prog8 .pcd-nums dt{font-size:14px}
  html.pc-staged .pc-dash .pc-prog8 .pcd-nums dd{font-size:24px}
}
/* ==== rb/pc-ugc (Luke, 31 Oct: the $1 is small, "I've asked loads of times"): no big gold $1 on the Solana $1 step or the EVM
   $1.0X step. ONE small line in the label style ("USDC ON SOLANA"'s size): "DEPOSIT $1 USDC ON SOLANA" / "SEND EXACTLY $1.03
   USDC ON ABSTRACT", the amount in gold at the same size; the EVM's "Send EXACTLY this amount" under it in small print. On
   computers the line sits over the address box (app.js stagify: .pc-tu__pay--line, one column) and the box takes the width ==== */
.pc-dline{display:block;margin:12px auto 0;max-width:100%;font:400 14px/1.3 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--mint);text-align:center;text-wrap:balance}
.pc-dline > span,.pc-dline > b{display:inline;margin:0;padding:0;font:inherit;letter-spacing:inherit}
.pc-dline > b{color:var(--gold-2);white-space:nowrap}
.pc-dline[aria-busy="true"] > b{opacity:.55}
.pc-dline > .pc-dline__x{display:block;margin-top:2px;font:600 14px/1.4 var(--ui);font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted);text-wrap:balance}
@media (min-width:861px){
  .pc-dline{font-size:clamp(14px,1.6vh,18px)}
  .pc-dline > .pc-dline__x{font-size:clamp(13px,1.2vh + .1vw,15px)}
  .pc-tu .pc-stg > .pc-tu__pay.pc-tu__pay--line{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,14px)}
  .pc-tu .pc-stg > .pc-tu__pay--line > .pc-dline{margin:0}
  .pc-tu .pc-stg > .pc-tu__pay--line > .pc-dep{width:min(100%,600px);box-sizing:border-box}
}
@media (min-width:861px) and (max-height:700px){ .pc-tu .pc-stg > .pc-tu__pay.pc-tu__pay--line{gap:6px} }
@media (max-width:860px){
  .pc-tu .pc-stg > .pc-tu__pay.pc-tu__pay--line{gap:8px}
  .pc-tu .pc-stg > .pc-tu__pay--line > .pc-dline{margin:0}
  .pc-tu--one .pc-stg > .pc-dline{margin:6px auto 0}
}
@media (max-width:860px) and (max-height:700px){ :where(html:where(:not([data-inapp="x"]))) .pc-tu--one .pc-stg > .pc-dline{margin-top:4px} :where(html:where(:not([data-inapp="x"]))) .pc-tu--news .pc-stg > .pc-dline{margin-top:3px} }
/* the Send from pill names the wallet: its platform, a dot, its address (app.js walletPlat; a platform with no name is the address alone) */
.pc-tu__fromw .pc-tu__fromn{font:800 16px/1 var(--ui);color:#fff;white-space:nowrap}
.pc-tu__fromw > i{font-style:normal;color:var(--mint)}
@media (max-width:420px){ .pc-tu__fromw .pc-tu__fromn{font-size:14px} .pc-tu__fromw{gap:6px} }
@media (max-width:380px){ .pc-tu__fromw .pc-tu__fromn{font-size:13px} .pc-tu__fromw code{font-size:14px} }

/* rb/pc-ugc: the dashboard's bar is a row taller than the old one (its % above, its two figures under it), so the short
   windows give the room back from the gaps and the type: the SE (375x667) and the 1000x570 laptop fit the stage again */
@media (max-width:860px) and (max-height:700px){
  :where(html:where(:not([data-inapp="x"]))) .pc-prog8 > .pc-prog__k .pc-locktile{width:28px;height:28px}
  html.pc-staged:where(:not([data-inapp="x"])) .pc-dash .pc-prog8 > .pc-prog__n{margin-top:4px;font-size:17px}
  html.pc-staged:where(:not([data-inapp="x"])) .pc-dash .pc-prog8 > .pc-prog__n > b{font-size:40px}
  :where(html:where(:not([data-inapp="x"]))) .pc-prog8 > .pc-prog__bar{margin-top:10px}
  html.pc-staged:where(:not([data-inapp="x"])) .pc-dash .pc-prog8 .pcd-nums{margin-top:8px}
  html.pc-staged:where(:not([data-inapp="x"])) .pc-dash .pc-prog8 .pcd-nums dt{font-size:13px}
  html.pc-staged:where(:not([data-inapp="x"])) .pc-dash .pc-prog8 .pcd-nums dd{margin-top:2px;font-size:21px}
  html.pc-staged:where(:not([data-inapp="x"])) .pc-dash .pc-prog8 .pc-unl__t{margin-top:6px;font-size:13px;max-width:none}
  html.pc-staged:where(:not([data-inapp="x"])) .pc-dash .pc-prog8 .pc-dash__wait{font-size:14px}
  :where(html:where(:not([data-inapp="x"]))) .pc-prog8 > .pc-prog__wait{margin-top:8px;padding-top:8px}
  html.pc-staged:where(:not([data-inapp="x"])) .pc-dash .pc-prog8 .pc-prog__wait > .pc-btn{min-height:46px;font-size:18px;margin-top:8px}
  :where(html:where(:not([data-inapp="x"]))) .pc-prog8 .pcd-stages{--trk:24px;--mk:20px}
  :where(html:where(:not([data-inapp="x"]))) .pc-prog8 .pcd-cks{margin-top:4px}
}
@media (min-width:861px) and (max-height:620px){
  .pc-prog8 > .pc-prog__bar{margin-top:8px}
  html.pc-staged .pc-dash .pc-prog8 .pcd-nums{margin-top:6px}
  html.pc-staged .pc-dash .pc-prog8 .pcd-nums dt{font-size:13px}
  html.pc-staged .pc-dash .pc-prog8 .pcd-nums dd{margin-top:2px;font-size:22px}
  html.pc-staged .pc-dash .pc-prog8 .pc-unl__t{margin-top:6px}
}
/* ---- the reveal on a phone (rb/pc-share-sheet, 4 Nov 2026; Luke on his iPhone: "the rarity should be further up ... and
   the pack could then be bigger ... but don't want it to mess up the flow"). The copy band (the coin, the headline, two
   beat lines) starts right under the step dots and is a little tighter, so the band the pack is framed under (--rt, measured
   by fitStageBand) ends higher and stage3d.js frames the pack bigger into the space left. The rarity sits where the beat
   lines were (fitStageBand), just above the pack. Placement and size only: the rip, the shake and the flip are unchanged */
@media (max-width:560px){
  .pc-stage__copy{margin-top:0;gap:4px}
  .pc-stage__headline{gap:4px}
  .pc-stage__headline .pc-coinspin{width:52px;height:52px}
}
/* PLAYERS WHO DON'T VERIFY (rb/pc-share-sheet, 4 Nov 2026; docs/pack-checker/unverified/SCOPE.md).
   The Locked in figure while some of the total is not locked in: "0 / 2,472 $RIPS LOCKED IN" (Luke, answer 1). The
   "/ 2,472" is inside the gold figure (app.js lockFigNum), half its size, in the cream of the stage's smaller numbers, on
   the figure's baseline; with everything locked in it is not drawn and the figure is as before. */
.pc-lsum2 .pc-lsum2__n b > .pc-lsum2__of,.pc-vfig .pc-lsum2__n b > .pc-lsum2__of{margin-left:.16em;font:inherit;font-size:.5em;line-height:1;
  color:var(--cream);-webkit-text-fill-color:var(--cream);text-shadow:none;white-space:nowrap}
/* The Connect row's button in the middle of its row, top to bottom (Luke, answer 4: "there's plenty of space for that pink
   Connect button to move down"). The tag stays exactly where it is (row 1 keeps the button's 40px, so nothing below it
   moves); only the button moves, to the row's centre. app.js midLater sets .is-mid only on a row whose tag ends left of
   the button (it never runs under it), so the button never covers the tag. A row without .is-mid is as before. */
.pc-stg--sum .pc-later > .pc-lrow.is-mid{grid-template-rows:minmax(40px,auto) auto}
.pc-stg--sum .pc-later > .pc-lrow.is-mid .pc-lrow__act{grid-row:1 / span 2;align-self:center}

/* ==== X-SCROLL (4 Nov 2026; docs/home-iab/RESULTS.md). Inside X's in-app browser (app.js sets html[data-inapp="x"]) X's
   floating bar and post panel take the bottom third, and a staged screen pinned to the window (100dvh) squeezed: the
   intro's title rode up over the progress card and Next sat under X's bar (Luke's shot, 4 Nov 14:24). Luke: "the site
   should look the same but just scroll down ... make sure everything at the bottom of the site can be seen". So inside
   X on a phone the staged page is the 390x844 phone's height (scaled to the width, never less than the window), the
   short-window rules above skip X (:where, no specificity added), and 160px of page under everything lets the last
   control scroll clear of X's bar. No other browser gets the attribute. ==== */
@media (max-width:860px){
  html[data-inapp="x"].pc-staged .pc-main{height:max(100vh,calc(100vw * 844 / 390))}
  html[data-inapp="x"] body.pc::after{content:"";display:block;height:160px}
}

/* ==== rb/airdrop-signin (Luke, 4 Nov 2026; docs/airdrop-signin): THE LANDING'S TWO DOORS and the new-account screens.
   Signed out: the pink Continue with X (the one primary), under it "I already play on BlockRips" in the page's cream
   sticker face (the bubble's: cream, ink edge, white ring), then one line of small print. Both full width up to 460px,
   one under the other, 12-16px apart. The new-account screens (newcheck, newx) are Connect to X's layout with the same pair. */
.pc-btn--cream{background:linear-gradient(180deg,#FFFDF6,var(--cream));color:var(--ink);border-color:var(--ink);text-shadow:none;
  box-shadow:inset 0 -4px 0 rgba(14,17,22,.1),0 0 0 3px #fff,0 10px 22px -8px rgba(0,0,0,.6)}
.pc-doors{display:flex;flex-direction:column;align-items:center}
.pc-doors.is-two{gap:clamp(10px,1.6vh,16px);width:min(100%,460px)}
.pc-doors.is-two .pc-glowbtn,.pc-doors.is-two .pc-btn{width:100%}
.pc-doors.is-two .pc-btn{white-space:normal;text-align:center;line-height:1.05;padding:0 18px}
.pc-doors__note{max-width:42ch;margin:0;font:600 14px/1.4 var(--ui);color:#C9D2F5;text-wrap:balance}
.pc-doors__wallet{margin-top:-4px;color:#AEB9E6}
.pc-newacct .pc-lead b{color:#fff}
.pc-newacct__acts{display:flex;flex-direction:column;gap:14px;width:min(100%,460px);margin-top:22px}
.pc-newacct__acts .pc-glowbtn,.pc-newacct__acts .pc-btn{width:100%}
.pc-xconn .pc-newacct__acts .pc-btn{margin-top:0;white-space:normal;text-align:center;line-height:1.05;padding:0 18px}
/* the dashboard's optional "Add your X picture to your card" (dash.js), under the line */
.pcd-addx{margin-top:6px;min-height:44px;color:var(--sky);text-align:left;align-items:center;font-size:15px}
.pcd-addx svg{width:15px;height:15px}
/* a short window (375x667, 1147x655) keeps the whole landing on screen with the second door: the pack may get smaller */
@media (max-width:860px) and (max-height:760px){
  .pc-land:has(.pc-doors.is-two) .pc-hero.pc-3d{height:40vh;min-height:200px}
}
/* ==== X-LATER (4 Nov 2026; docs/x-later-fix/RESULTS.md). Still only inside X (html[data-inapp="x"]), on a phone:
   1. the dashboard's "Later" sits BESIDE "Connect wallet N" / "Verify wallet N" (as on computers, .pcd--st above), not
      under it: under it, it fell exactly under X's floating bar while the button above it showed (Luke, 4 Nov, in X:
      "it said connect wallet with no later option"). The reason line keeps the full width above the pair.
   2. the one-page $1 / EVM step is not a scroll box of its own in X (the frame is the 844 phone's, so the card never needs
      to scroll inside): with overflow-y:auto + overscroll-behavior:contain a finger on the card scrolled nothing.
   3. the Terms corner sits above the 160px spacer, so it can be scrolled clear of X's bar like the rest of the page. ==== */
@media (max-width:860px){
  html[data-inapp="x"] .pcd-act:not(.pcd-act--solo):not(.pcd-act--pair){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
  html[data-inapp="x"] .pcd-act:not(.pcd-act--solo):not(.pcd-act--pair) > .pcd-why{grid-column:1 / -1}
  html[data-inapp="x"] .pcd-act:not(.pcd-act--solo):not(.pcd-act--pair) > .pcd-cta{width:100%;min-width:0;padding:0 14px}
  html[data-inapp="x"] .pcd-act:not(.pcd-act--solo):not(.pcd-act--pair) > .pcd-later{margin:0;padding:0 8px;min-height:44px}
  html[data-inapp="x"] .pc-tu--one .pc-stg{overflow:visible;max-height:none;overscroll-behavior:auto}
  html[data-inapp="x"] .pc-terms--corner{bottom:calc(160px + clamp(6px,1.2vh,14px))}
}
/* ==== LATER EVERYWHERE (pc122; Luke, 4 Nov 2026: the "Rip to unlock" stage had no later, and "asks me like 50 times to
   connect wallet even though I already clicked later"). Every Connect / Verify button off the wallet steps now has its
   later beside it, the same size (.pc-pair, as the wallet steps; DECISIONS "Later is as big as Verify"):
   How to unlock's "Connect wallet" (.pc-prog__pair), Allocation confirmed's "Verify my wallets" (.pc-alloc__pair) and the
   success screen's "Connect wallet N" (.pc-ok__pair). The dashboard's pair is dash.css (.pcd-act--pair). ==== */
.pc-pair > .pc-btn--lg,.pc-pair > .pc-btn--xl{padding-left:14px;padding-right:14px}
html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-prog__pair{width:min(100%,560px);margin-top:var(--b-gap-s)}
html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-prog__pair > .pc-btn{min-height:var(--b-btnh);font-size:var(--b-btnf)}
@media (min-width:861px) and (max-height:760px){
  html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-prog__pair{flex:none;width:auto;margin-top:0}
  html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-prog__pair > .pc-btn{flex:1 1 0;min-width:190px}
}
@media (max-width:860px){
  html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-prog__pair{width:100%;margin-top:10px}
  html.pc-staged .pc-dash .pc-prog8 .pc-prog__wait > .pc-prog__pair > .pc-btn{min-height:52px;font-size:clamp(13px,3.6vw,17px);padding:0 4px}
}
@media (max-width:860px) and (max-height:700px){
  html.pc-staged:where(:not([data-inapp="x"])) .pc-dash .pc-prog8 .pc-prog__wait > .pc-prog__pair{margin-top:8px}
  html.pc-staged:where(:not([data-inapp="x"])) .pc-dash .pc-prog8 .pc-prog__wait > .pc-prog__pair > .pc-btn{min-height:46px}
}
.pc-alloc .pc-alloc__pair{width:min(100%,520px);margin-top:26px}
.pc-alloc .pc-alloc__pair > .pc-btn{margin-top:0}
@media (max-width:860px){ .pc-alloc .pc-alloc__pair{margin-top:12px} .pc-alloc .pc-alloc__pair > .pc-btn{font-size:clamp(13px,3.6vw,17px);padding:0 4px} }
.pc-ok .pc-ok__pair{width:min(100%,520px);margin-top:16px}
.pc-ok .pc-stg > .pc-unl + .pc-ok__pair{margin-top:clamp(16px,3.2vh,32px)}
.pc-ok .pc-ok__pair > .pc-btn{min-height:clamp(54px,6.6vh,62px)}
@media (max-width:860px){ .pc-ok .pc-ok__pair > .pc-btn{font-size:clamp(13px,3.6vw,17px);padding:0 4px} }
/* QA 5 Nov, Luke: "doesnt look like a button": See my airdrop is the pink main button (.pc-btn--pink, copied) when no Connect shares its stage */
.pc-link .pc-stg--sum:not(:has(.pc-connect)) .pc-lsum2__go > .pc-btn.pc-lsum2__see{background:linear-gradient(180deg,#FF7AB5 0%,#FA2E86 52%,#D8126A 100%);color:#fff;border-color:rgba(255,255,255,.22);text-shadow:0 2px 0 rgba(120,0,50,.45);box-shadow:0 0 0 2px rgba(255,170,205,.35) inset,0 0 26px rgba(250,46,134,.55),0 10px 22px -8px rgba(0,0,0,.6)}