/* Статья о защите зарплаты WPS. Общие детали статьи — в articles.css. */

.art-alarm.is-safe{background:#e6f6ee;color:#15754b}
.art-alarm.is-safe i{background:#1f9b64;animation-name:art-pulse-safe}
@keyframes art-pulse-safe{0%{box-shadow:0 0 0 0 rgba(31,155,100,.45)}100%{box-shadow:0 0 0 10px rgba(31,155,100,0)}}

/* ---------- обложка: календарь и карта ---------- */

.wps-hero{position:relative;display:grid;justify-items:center;gap:0;padding:clamp(20px,3vw,32px) clamp(16px,3vw,32px) clamp(28px,4vw,40px);border-radius:34px;background:linear-gradient(160deg,#eef6ff,#f7f8fa);box-shadow:0 30px 70px rgba(33,44,62,.1)}
.wps-month{position:relative;z-index:1;width:min(340px,100%);padding:16px;border-radius:24px;background:#fff;box-shadow:0 10px 30px rgba(33,44,62,.08)}
.wps-month__title{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--ink)}
.wps-month__week,.wps-month__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wps-month__week{margin-bottom:6px}
.wps-month__week span{color:var(--soft);font-size:11px;font-weight:700;text-align:center}
.wps-month__grid span{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:#f5f5f7;color:#8a8f98;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.wps-month__grid .is-empty{background:none}
.wps-month__grid .is-pay{background:#1f9b64;color:#fff;box-shadow:0 6px 14px rgba(31,155,100,.35)}
/* Пульс — внутри своей клетки: не наезжает на соседние числа. */
.wps-month__grid .is-pay:after{content:'';position:absolute;inset:3px;border:2px solid rgba(255,255,255,.85);border-radius:8px;animation:wps-ring 2.4s ease-in-out infinite}
@keyframes wps-ring{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}

.wps-bank{position:relative;width:min(300px,86%);height:150px;margin-top:-26px}
.wps-bank__card{
  position:absolute;inset:18px 0 0;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;
  padding:16px 18px;border-radius:20px;
  background:linear-gradient(135deg,#1f7ff2,#0a5fcf 60%,#0b3f8c);
  color:#fff;box-shadow:0 22px 40px rgba(10,95,207,.35);
  transform:rotate(-4deg);
  animation:wps-card 6s ease-in-out infinite;
}
@keyframes wps-card{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-6px)}}
.wps-bank__chip{width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,#ffe29a,#e3a21a)}
.wps-bank__wave{justify-self:end;font-size:22px;transform:rotate(90deg);opacity:.85}
.wps-bank__label{grid-column:1/-1;align-self:end;font-size:12px;font-weight:650;opacity:.8}
.wps-bank__number{font-size:16px;font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.wps-bank__badge{display:inline-flex;align-items:center;gap:5px;justify-self:end;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.2);font-size:12px;font-weight:800}
.wps-bank__coin{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#ffe29a,#e3a21a);color:#6b4a00;font-size:11px;font-weight:800;box-shadow:0 8px 18px rgba(160,110,0,.3);animation:wps-coin 3.2s cubic-bezier(.45,0,.55,1) infinite}
.wps-bank__coin.is-a{left:12%;top:-6px}
.wps-bank__coin.is-b{right:14%;top:-18px;animation-delay:-1.6s}
@keyframes wps-coin{0%{opacity:0;transform:translateY(-24px) scale(.7)}25%{opacity:1}70%{opacity:1;transform:translateY(46px) scale(.9)}100%{opacity:0;transform:translateY(62px) scale(.5)}}

.wps-card__toast{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:10px;
  width:max-content;max-width:100%;margin-top:-14px;
  padding:10px 14px;border-radius:18px;
  background:#fff;box-shadow:0 14px 34px rgba(33,44,62,.16);
}
.wps-card__toast i{font-size:26px;color:#1f9b64}
.wps-card__toast strong{display:block;font-size:14px}
.wps-card__toast span{display:block;color:var(--muted);font-size:12px}
.wps-hero.is-armed .wps-card__toast{transform:translateY(16px) scale(.94);opacity:0}
.wps-hero.is-played .wps-card__toast{transform:none;opacity:1;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}

/* ---------- путь денег ---------- */

.wps-flow{display:grid;grid-template-columns:auto minmax(24px,1fr) auto minmax(24px,1fr) auto minmax(24px,1fr) auto;align-items:center;gap:8px;margin-top:32px;padding:clamp(18px,3vw,30px);border-radius:32px;background:var(--surface)}
.wps-flow__node{display:grid;justify-items:center;gap:6px;text-align:center}
.wps-flow__node span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-size:27px}
.wps-flow__node strong{font-size:15px;line-height:1.2}
.wps-flow__node small{color:var(--muted);font-size:13px}
.wps-flow__node.is-watch span{box-shadow:0 0 0 6px #fff,0 0 0 8px rgba(199,137,18,.25)}
.wps-flow__line{position:relative;height:4px;border-radius:9px;background:rgba(29,29,31,.1);overflow:hidden}
.wps-flow__line b{position:absolute;top:0;left:-20%;width:20%;height:100%;border-radius:9px;background:#1f7ff2;animation:wps-pass 2.4s linear infinite}
.wps-flow__line b:nth-child(2){animation-delay:.8s}
.wps-flow__line b:nth-child(3){animation-delay:1.6s}
@keyframes wps-pass{to{left:100%}}

/* ---------- срок и 85% ---------- */

.wps-deadline{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,5vw,64px)}
.wps-gauge{position:relative;width:clamp(200px,24vw,260px);aspect-ratio:1}
.wps-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.wps-gauge circle{fill:none;stroke:#e9ecf1;stroke-width:12}
.wps-gauge .is-fill{stroke:#1f9b64;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:15}
.wps-gauge.is-armed .is-fill{stroke-dashoffset:100}
.wps-gauge.is-shown .is-fill{stroke-dashoffset:15;transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1)}
.wps-gauge__value{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.wps-gauge__value strong{font-size:clamp(44px,5vw,60px);font-weight:800;letter-spacing:-.05em;line-height:1}
.wps-gauge__value small{max-width:14ch;margin-top:4px;color:var(--muted);font-size:13px}

/* ---------- день задержки ---------- */

.wps-days{margin-top:28px;padding:clamp(18px,3vw,30px);border-radius:32px;background:var(--surface)}
.wps-days__head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 24px}
.wps-days__head p{display:grid;margin:0;grid-row:span 2}
.wps-days__head p span{color:var(--muted);font-size:13px;font-weight:650}
.wps-days__head p strong{font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--red)}
.wps-days__hint{display:flex;align-items:center;gap:9px;margin:2px 0 0;color:var(--muted);font-size:14px;font-weight:650;transition:opacity .3s ease}
.wps-days__hint i{color:#e5484d;font-size:20px;animation:wps-swipe 1.9s ease-in-out infinite}
@keyframes wps-swipe{0%,100%{transform:translateX(0)}55%{transform:translateX(8px)}}
.wps-days.is-touched .wps-days__hint{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.wps-days__hint i{animation:none}}
.wps-days__ticks{position:relative;height:16px;margin:0 10px}
.wps-days__ticks span{position:absolute;left:calc((var(--d) - 1) / 24 * 100%);transform:translateX(-50%);color:var(--soft);font-size:12px;font-weight:700}
.wps-days__list{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.wps-days__list li{
  display:grid;grid-template-columns:96px auto minmax(0,1fr);align-items:center;gap:14px;
  padding:14px 16px;border-radius:20px;background:#fff;
  opacity:.38;filter:grayscale(1);
  transition:opacity .35s ease,filter .35s ease,transform .5s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;
}
.wps-days__list li.is-on{opacity:1;filter:none;box-shadow:0 10px 24px rgba(229,72,77,.1)}
.wps-days__list li.is-new{transform:scale(1.02)}
.wps-days__day{color:var(--muted);font-size:13px;font-weight:700}
.wps-days__list li i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff0f0;color:#e5484d;font-size:22px}
.wps-days__list strong{display:block;font-size:16px}
.wps-days__list p{margin:2px 0 0;color:var(--muted);font-size:14px;line-height:1.4}

/* ---------- причины ---------- */

.wps-reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.wps-reasons article{padding:22px;border-radius:26px;background:var(--surface)}
.wps-reasons span{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:50%;font-size:25px}
.wps-reasons strong{display:block;font-size:18px;letter-spacing:-.02em;line-height:1.2}
.wps-reasons p{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.45}
.art-remember.is-light{background:#eef6ff}

/* ---------- шаги и контакт ---------- */

.wps-steps{display:grid;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.wps-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:18px;border-radius:24px;background:var(--surface)}
.wps-steps li>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#1f7ff2;color:#fff;font-weight:800}
.wps-steps strong{display:block;font-size:18px;letter-spacing:-.02em}
.wps-steps p{margin:4px 0 0;color:var(--muted);font-size:15px;line-height:1.5}
.wps-contact{display:flex;align-items:center;gap:16px;margin-top:12px;padding:18px 20px;border-radius:24px;background:#1D1D1F;color:#fff}
.wps-contact__icon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#1f9b64;font-size:25px}
.wps-contact strong{display:block;font-size:17px}
.wps-contact p{margin:3px 0 0;color:rgba(255,255,255,.75);font-size:15px}
.wps-contact a{color:#fff;font-weight:700}

/* ---------- кого касается ---------- */

.wps-scope{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;margin-top:24px}
.wps-scope__col{padding:22px;border-radius:26px}
.wps-scope__col.is-yes{background:#e6f6ee}
.wps-scope__col.is-no{background:var(--surface)}
.wps-scope__col p{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;font-size:16px;font-weight:700;line-height:1.35}
.wps-scope__col p i{flex:none;margin-top:1px;font-size:20px}
.wps-scope__col.is-yes p i{color:#1f9b64}
.wps-scope__col.is-no p i{color:var(--soft)}
.wps-scope__col ul{display:grid;gap:8px;margin:0;padding-left:20px}
.wps-scope__col li{font-size:15px;line-height:1.45}

@media (max-width:900px){
  .wps-flow{grid-template-columns:1fr;justify-items:center}
  .wps-flow__line{width:4px;height:28px}
  .wps-flow__line b{left:0;top:-20%;width:100%;height:20%;animation-name:wps-pass-y}
  .wps-deadline{grid-template-columns:1fr;justify-items:start}
  .wps-reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wps-scope{grid-template-columns:1fr}
}
@keyframes wps-pass-y{to{top:100%}}
@media (max-width:560px){
  .wps-reasons{grid-template-columns:1fr}
  .wps-days__head{grid-template-columns:1fr}
  .wps-days__head p{grid-row:auto;grid-template-columns:auto 1fr;align-items:baseline;gap:10px}
  .wps-days__list li{grid-template-columns:auto minmax(0,1fr);gap:10px 12px}
  .wps-days__day{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .wps-flow__line b,.wps-month__grid .is-pay:after,.wps-bank__card,.wps-bank__coin{animation:none}
}