/* live*digest: сторінки /get і /pay/done (частина M1). Лише токени й компоненти з app.css. */
.pay [hidden],.done [hidden]{display:none !important}

.pay{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6);align-items:center;padding:var(--sp-5) 0 var(--sp-7)}
.pay-hero{position:relative;max-width:580px}
.pay-hero .eyebrow{margin:0}
.pay-hero .disp{margin:var(--sp-3) 0 var(--sp-4);font-size:clamp(34px,9vw,64px);line-height:1.02;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.pay-hero .lead{margin:0;max-width:30ch;font-size:clamp(17px,2.2vw,20px);line-height:1.45;color:var(--soft)}
.pay-star{position:absolute;right:0;top:-.32em;z-index:-1;font-family:"Unbounded",sans-serif;font-weight:800;font-size:clamp(170px,30vw,400px);line-height:1;color:var(--pink);opacity:.08;pointer-events:none;user-select:none}

.pay-card{position:relative;width:100%;max-width:460px;justify-self:center;padding:var(--sp-5);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);background:radial-gradient(120% 60% at 100% 0%,var(--pink-soft) 0%,transparent 62%),var(--card)}
.pay-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.pay-amount{font-family:"Unbounded",sans-serif;font-weight:800;font-size:clamp(46px,13vw,64px);line-height:1;letter-spacing:-.045em;color:var(--ink)}
.pay-per{font-size:16px;font-weight:600;color:var(--soft)}
.pay-list{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:12px}
.pay-list li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;line-height:1.3;color:var(--body)}
.pay-list li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--pink-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0117E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px 13px no-repeat}
.pay-coins{display:flex;align-items:center;flex-wrap:wrap;gap:8px 6px;margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.pay-coin{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.pay-any{padding-left:2px;font-size:14px;color:var(--soft)}
.pay-form{margin-top:var(--sp-5);--gap:14px}
.pay-form .opt{margin-left:4px;font-weight:400;font-size:12px;color:var(--soft)}
.pay-form .btn-lg{margin-top:var(--sp-1)}
.pay-err{margin:0;font-size:14px;color:var(--crit)}
.pay-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-size:13px;color:var(--soft)}
.pay-secure svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pay-ok{display:grid;justify-items:center;gap:var(--sp-3);margin-top:var(--sp-5);padding:var(--sp-5) 0 var(--sp-2);text-align:center;outline:none}
.pay-ok h2{margin:var(--sp-2) 0 0;font-family:"Unbounded",sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.pay-ok p{margin:0;max-width:28ch;color:var(--soft)}
.pay-foot{display:flex;justify-content:center;gap:var(--sp-5);padding:0 16px var(--sp-6);font-size:13px}
.pay-foot a{color:var(--soft);text-decoration:none}
.pay-foot a:hover{color:var(--pink)}

.mark{position:relative;display:grid;place-items:center;flex:none;width:72px;height:72px;border-radius:50%;background:var(--pink-soft);color:var(--pink)}
.mark.big{width:96px;height:96px}
.mark svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mark .draw{stroke-dasharray:24;stroke-dashoffset:24;animation:pay-draw .55s var(--ease) .2s forwards}
.mark.pop{animation:pay-pop .5s var(--ease) both}
.mark.wait,.mark.info,.mark.crit,.mark.dim{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.mark.info{color:var(--s2)}
.mark.crit{color:var(--crit)}
.mark.dim{color:var(--dim);font-family:"Unbounded",sans-serif;font-weight:800;font-size:46px;line-height:1;padding-top:14px}
@keyframes pay-draw{to{stroke-dashoffset:0}}
@keyframes pay-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

.done-wrap{display:grid;place-items:center;min-height:calc(100svh - 180px);padding:var(--sp-6) 0}
.done{width:100%;max-width:440px;padding:var(--sp-7) var(--sp-5) var(--sp-6);text-align:center;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.done-state{display:grid;justify-items:center;gap:var(--sp-3)}
.done-state .disp{margin:var(--sp-3) 0 0;font-size:clamp(24px,6.8vw,30px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.done-state p{margin:0}
.done-mail{font-weight:600;color:var(--body)}
.done-state .btn{margin-top:var(--sp-4)}

@media (min-width:900px){
  .pay{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-8);min-height:calc(100svh - 200px);padding:var(--sp-7) 0}
  .pay-card{justify-self:end;padding:var(--sp-6)}
  /* Над заголовком, а не на ньому: зірка лише знак бренду, текст читається без неї. */
  .pay-star{right:-24px;top:-.5em;font-size:320px}
}
@media (prefers-reduced-motion:reduce){
  .mark .draw{animation:none;stroke-dashoffset:0}
  .mark.pop{animation:none}
}