/* The claim pattern: sign-up as claiming something that already exists (a receipt, a result, a saved note).
   Used by apply-flow.html and by every tool that ends in "save this". Lilac = you speak; lime = ready.
   Markup: <div class="claim" data-claim="apply"> ... see apply-flow.html. Behaviour: claim.js. */
.claim{background:var(--lav);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px 24px;color:var(--ink);position:relative}
.claim .c-head{display:flex;gap:16px;align-items:center;margin-bottom:14px}.claim .c-head b{font:800 1.7rem/1 var(--f-d);font-stretch:62%;text-transform:uppercase;display:block}.claim .c-head span{color:var(--ink2);font-size:.95rem}
.claim .c-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.claim .m{display:flex;gap:10px;align-items:center;justify-content:center;padding:14px 12px;border:2px solid var(--ink);background:var(--base);font:700 .95rem var(--f-d);color:var(--ink);cursor:pointer;transition:transform .15s,background .15s}
.claim .m:hover{transform:translate(-2px,-2px);background:var(--lime);color:#111827}.claim .m i{width:18px;height:18px;border-radius:50%;display:inline-block;flex:none}
.claim .m.g i{background:conic-gradient(#2448E8 0 25%,#FF5A4F 0 50%,#EFA00C 0 75%,#DFFF68 0)}.claim .m.p i{background:var(--ink);clip-path:polygon(50% 0,100% 40%,80% 100%,20% 100%,0 40%)}.claim .m.e i{background:var(--cobalt);clip-path:polygon(0 15%,100% 15%,100% 85%,0 85%)}
.claim .c-email{display:none;margin-top:12px;gap:0}.claim.email .c-email{display:flex}.claim .c-email input{border-right:0}.claim .c-email .btn{clip-path:none}
.claim .c-skip{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:.85rem;color:var(--ink2);flex-wrap:wrap}.claim .c-skip button{background:none;border:0;color:var(--ink);font:600 .85rem var(--f-d);text-decoration:underline;cursor:pointer}
.claim .c-fine{font:500 .68rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-top:10px}
.claim .c-done,.claim .c-wait{display:none}.claim.done .c-body,.claim.wait .c-body{display:none}.claim.done .c-done{display:block}.claim.wait .c-wait{display:block}
.claim.done{background:var(--lime);color:#111827}
.rcpt{background:var(--base);color:var(--ink);border:2px solid var(--ink);padding:22px 24px 30px;font-family:var(--f-m);font-size:.82rem;position:relative;max-width:420px;box-shadow:8px 8px 0 var(--ink);transform:rotate(-1.2deg)}
.rcpt .rl{border-top:2px dashed var(--rule);margin:12px 0}.rcpt b.t{display:block;font:800 1.7rem/1 var(--f-d);font-stretch:62%;text-transform:uppercase;margin:6px 0;letter-spacing:0}
.rcpt .ri{display:grid;grid-template-columns:84px 1fr;gap:8px;padding:3px 0}.rcpt .ri span:first-child{color:var(--ink2)}
.rcpt .stamp{position:absolute;right:16px;top:16px;font:800 1rem var(--f-d);font-stretch:66%;text-transform:uppercase;border:3px solid var(--ink);color:#111827;padding:3px 10px;transform:rotate(7deg);background:var(--lime);animation:rcpt-thud .52s .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes rcpt-thud{from{transform:rotate(7deg) scale(1.9);opacity:0}}
@media(prefers-reduced-motion:reduce){.rcpt .stamp{animation:none}}
.rcpt:after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(-45deg,transparent 6px,var(--base) 0) 0 0/12px 12px,linear-gradient(45deg,transparent 6px,var(--base) 0) 0 0/12px 12px;transform:scaleY(-1)}
.stagerail{display:flex;gap:0;border:2px solid var(--ink);background:var(--base)}.stagerail span{flex:1;padding:8px 6px;text-align:center;font:600 .62rem var(--f-m);letter-spacing:.07em;text-transform:uppercase;border-right:1.5px solid var(--ink)}.stagerail span:last-child{border:0}.stagerail .on{background:var(--cobalt);color:#fff}
@media(max-width:700px){.claim .c-methods{grid-template-columns:1fr}}

/* mobile */
@media(max-width:700px){.claim .c-fine{font-size:.72rem}.claim .c-skip button{min-height:44px;padding:0 6px}.claim .c-head b{font-size:1.5rem}}