/* ========== PROMO & LOYALTY PAGE ========== */
/* Подключается ПОСЛЕ main.css. Общие: .container, .pretitle, .title, .section__text, .btn */
/* Визуальный язык страницы — купон-билет: вырезы по бокам, линия отрыва, моно-код.
   Ритм блоков намеренно отличается от «Сценариев»: full-bleed лента билетов → контрастная пара →
   нумерованный таймлайн → лестница уровней → спека правил. */

:root{--pl-ink:#002033;--pl-accent:#FB685B;--pl-bg:#FAF9F7}

/* ---------- hero: заголовок + счёт клиента ---------- */
@property --heroTint{syntax:'<color>';inherits:true;initial-value:#C3BBB4}
/* hero по стандарту .pageHero (main.css), здесь только своё: фон-градиент и
   ширина колонки. Внутренний низ сетки — 8px вместо стандартных 32px: под ней
   идёт полоса интеграций со своим отступом и линией. */
.plHero{--heroAside:470px;--heroAccent:var(--pl-accent);padding-bottom:88px;background:linear-gradient(160deg,color-mix(in srgb,var(--heroTint) 14%,#fff) 0%,color-mix(in srgb,var(--heroTint) 5%,#fff) 45%,#fff 78%);transition:--heroTint 1.8s cubic-bezier(.4,0,.2,1)}
.plHero .pageHero__top{padding-bottom:8px}
/* строка интеграций под hero: подпись + перечень платформ через точки-разделители */
.plHero__integr{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 0 6px;border-top:1px solid rgba(0,32,51,.1)}
.plHero__integrLabel{color:rgba(0,32,51,.5);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.plHero__integrList{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.plHero__integrList li{position:relative;color:var(--pl-ink);font-size:17px;font-weight:600;line-height:1.2}
.plHero__integrList li+li::before{content:'';position:absolute;left:-10px;top:50%;width:3px;height:3px;translate:0 -50%;border-radius:50%;background:rgba(0,32,51,.25)}
@media (max-width:767px){.plHero__integr{gap:12px;padding-top:18px}.plHero__integrList{gap:16px}}
/* hero-сцена без подложки: анимация живёт прямо на светлом фоне секции */
.plHero__stage{position:relative;padding:18px 0}
.plHero__stage .client{aspect-ratio:1/1.16}
/* светлая версия: пилюля из белого стекла, тёмный текст, мягкие тени вместо свечения */
.plHero__stage .client__ava{background:rgba(255,255,255,.42);backdrop-filter:blur(11px) saturate(1.8) contrast(.96);-webkit-backdrop-filter:blur(11px) saturate(1.8) contrast(.96);border-color:var(--tier,rgba(0,32,51,.1));box-shadow:0 30px 60px -34px rgba(88,16,10,.35)}
.plHero__stage .client__balance{color:rgba(0,32,51,.5)}
.plHero__stage .client__balance b{color:var(--pl-ink)}
/* пока цифры пересчитываются — подсветка знака операции */
.client__balance b{transition:color .6s cubic-bezier(.4,0,.2,1)}
.plHero__stage .client__balance.is-up b{color:#2F8F68}
.plHero__stage .client__balance.is-down b{color:rgba(0,32,51,.4)}
.plHero__stage .client__ava::after{background:rgba(88,16,10,.22)}
.plHero__stage .clientBubble:not(.clientBubble--lvl){background:rgba(255,255,255,.72);box-shadow:0 20px 40px -24px rgba(88,16,10,.45),0 0 0 1.5px color-mix(in srgb,var(--tier,#FB685B) 55%,transparent);transition:box-shadow 1.6s cubic-bezier(.4,0,.2,1)}
.plHero__stage .clientBubble--lvl{background:color-mix(in srgb,var(--lvl) 26%,rgba(255,255,255,.62));backdrop-filter:blur(11px) saturate(1.5);-webkit-backdrop-filter:blur(11px) saturate(1.5);color:rgba(0,32,51,.55);box-shadow:0 20px 40px -26px color-mix(in srgb,var(--lvl) 55%,#000),0 0 0 1.5px color-mix(in srgb,var(--lvl) 62%,transparent)}
.plHero__stage .clientBubble--lvl b{color:color-mix(in srgb,var(--lvl) 42%,#002033)}

/* account: счёт клиента — баланс, уровень и лента операций */
.account{border-radius:20px;background:#fff;border:1px solid rgba(0,32,51,.07);box-shadow:0 40px 80px -40px rgba(88,16,10,.3);padding:24px;display:flex;flex-direction:column;gap:20px}
.account__bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.account__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.account__name{color:var(--pl-ink);font-size:15px;font-weight:600;line-height:1.3}
.account__mail{color:rgba(0,32,51,.45);font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.account__tier{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:100px;color:#A9762C;background:rgba(232,185,60,.16)}
.account__tier::before{content:'';width:7px;height:7px;border-radius:50%;background:#E8B93C}
.account__balance{display:flex;align-items:flex-end;gap:10px}
.account__num{color:var(--pl-ink);font-size:48px;font-weight:700;line-height:1;letter-spacing:-1.4px;font-variant-numeric:tabular-nums}
.account__unit{color:rgba(0,32,51,.5);font-size:14px;line-height:1.8}
.account__progress{display:flex;flex-direction:column;gap:8px}
.account__track{height:6px;border-radius:100px;background:rgba(0,32,51,.08);overflow:hidden}
.account__fill{display:block;height:100%;width:72%;border-radius:100px;background:var(--pl-accent)}
.account__note{color:rgba(0,32,51,.55);font-size:13px;line-height:1.45}
.account__feed{border-top:1px solid rgba(0,32,51,.08);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.account__feedHead{color:rgba(0,32,51,.45);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.op{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;animation:opIn .5s both;animation-delay:calc(var(--i) * .12s + .1s)}
@keyframes opIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.op{animation:none}}
.op__ico{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;line-height:1}
.op__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.op__name{color:var(--pl-ink);font-size:14px;line-height:1.35}
.op__name b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:600;letter-spacing:.04em}
.op__meta{color:rgba(0,32,51,.45);font-size:12px;line-height:1.35}
.op__val{font-size:15px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.op--plus .op__ico{color:#1E9E6A;background:rgba(30,158,106,.12)}
.op--plus .op__val{color:#1E9E6A}
.op--minus .op__ico{color:rgba(0,32,51,.55);background:rgba(0,32,51,.07)}
.op--minus .op__val{color:rgba(0,32,51,.6)}
.op--code .op__ico{color:var(--pl-accent);background:rgba(251,104,91,.12)}
.op--code .op__val{color:var(--pl-accent)}

/* ---------- plCodes: блок про промокоды с лентой билетов ---------- */
.plCodes{padding:88px 0}
.plCodes__head{max-width:760px}
.plCodes__title{margin:12px 0 0;color:var(--pl-ink);font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.6px}
.plCodes__title span{color:var(--pl-accent)}
.plCodes__text{margin-top:16px;color:rgba(0,32,51,.65);font-size:17px;line-height:1.6}

/* лента билетов: бесконечная медленная карусель из двух одинаковых групп (сдвиг на 50% = ровно одна группа) */
.plStrip{margin-top:36px;padding:0 0 22px;overflow:hidden}
.plStrip__track{display:flex;width:max-content;padding:26px 0;animation:plMarquee 64s linear infinite}
.plStrip__group{display:flex;gap:22px;padding-right:22px}
@keyframes plMarquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.plStrip__track{animation:none}}
.ticket{position:relative;flex:none;width:268px;background:#fff;border-radius:18px;padding:22px 24px 20px;box-shadow:0 26px 50px -34px rgba(88,16,10,.45)}
.ticket::before,.ticket::after{content:'';position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--pl-bg)}
.ticket::before{left:-11px}
.ticket::after{right:-11px}
.ticket__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ticket__label{color:rgba(0,32,51,.45);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.ticket__gift{color:var(--pl-accent);font-size:26px;font-weight:700;line-height:1;letter-spacing:-.5px}
.ticket__code{margin-top:18px;padding-top:16px;border-top:1.5px dashed rgba(0,32,51,.18);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:600;letter-spacing:.09em;color:var(--pl-ink)}
.ticket__meta{margin-top:6px;color:rgba(0,32,51,.45);font-size:12px;line-height:1.4}
.ticket--dark{background:var(--pl-ink)}
.ticket--dark .ticket__label{color:rgba(255,255,255,.45)}
.ticket--dark .ticket__code{color:#fff;border-top-color:rgba(255,255,255,.22)}
.ticket--dark .ticket__meta{color:rgba(255,255,255,.45)}
.ticket--used{opacity:.55}
.ticket--used .ticket__gift{color:rgba(0,32,51,.35)}
.ticket__stamp{position:absolute;right:20px;bottom:18px;color:rgba(0,32,51,.3);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid rgba(0,32,51,.18);border-radius:4px;padding:3px 7px;transform:rotate(-6deg)}
.plStrip__hint{max-width:1320px;margin:8px auto 0;padding:0 max(24px,calc((100vw - 1320px) / 2));display:flex;align-items:center;gap:10px;color:rgba(0,32,51,.5);font-size:14px}
.plMask{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600;color:var(--pl-accent);padding:5px 9px;border-radius:6px;background:rgba(251,104,91,.1);border:1px dashed rgba(251,104,91,.45);white-space:nowrap}

/* ---------- plPoints: бонусные баллы (тёмная секция) ---------- */
.plPoints{padding:88px 0;background:linear-gradient(180deg,#FFF6EA 0%,#FFEFE0 100%);border-radius:32px;margin:0}
.plPoints__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.plPoints__top .account{box-shadow:0 40px 90px -40px rgba(88,16,10,.45);order:-1}
.plPoints__head{display:flex;flex-direction:column;align-items:flex-start}
.plPoints__title{margin:12px 0 0;color:var(--pl-ink);font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.6px}
.plPoints__title span{color:var(--pl-accent)}
.plPoints__text{margin-top:20px;color:rgba(0,32,51,.62);font-size:19px;line-height:1.6;max-width:30ch}
/* ---------- поток операций лояльности: пилюля с эмодзи + вылетающие баблы ---------- */
.client{--tier:#C3BBB4;position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;container-type:inline-size}
/* волна: круг из акцентного цвета под кольцевой маской; --wave фиксирует скрипт в момент запуска */
.client__wave{position:absolute;top:50%;left:50%;width:92%;aspect-ratio:1/1;height:auto;border-radius:50%;translate:-50% -50%;pointer-events:none;opacity:0;will-change:transform,opacity;background:radial-gradient(circle at center,var(--wave,#FB685B),var(--wave,#FB685B));filter:blur(6px);-webkit-mask-image:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.55) 52%,#000 60%,rgba(0,0,0,.7) 68%,rgba(0,0,0,.34) 78%,rgba(0,0,0,.1) 88%,transparent 96%);mask-image:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.55) 52%,#000 60%,rgba(0,0,0,.7) 68%,rgba(0,0,0,.34) 78%,rgba(0,0,0,.1) 88%,transparent 96%)}
.client__wave.is-on{animation:waveFirst 4.6s cubic-bezier(.16,.7,.3,1) forwards}
@keyframes waveFirst{0%{scale:.3;opacity:0}6%{scale:.5}10%{opacity:.36}26%{scale:.52;opacity:.32}44%{opacity:.24}72%{opacity:.12}100%{scale:1.14;opacity:0}}
/* пилюля: слева эмодзи, справа баланс; рамка держит цвет текущего уровня */
.client__ava{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding:12px 26px 12px 12px;border-radius:100px;border:1.5px solid var(--tier,rgba(255,255,255,.14));background:rgba(255,255,255,.07);box-shadow:0 24px 50px -30px rgba(0,0,0,.55);transition:border-color 1.6s cubic-bezier(.4,0,.2,1)}
.client.is-run .client__ava{animation:avaNod 3s ease-in-out}
@keyframes avaNod{0%,58%,100%{translate:0 0}12%{translate:0 -14px}26%{translate:0 2px}38%{translate:0 -5px}}
.client__ava::before{content:'';position:absolute;inset:-38px;border-radius:50%;background:radial-gradient(circle at center,color-mix(in srgb,var(--tier,#FB685B) 26%,transparent),transparent 64%);z-index:-1;transition:background 1.6s cubic-bezier(.4,0,.2,1)}
.client__ava::after{content:'';position:absolute;left:50%;bottom:-14px;width:80%;height:14px;translate:-50% 0;border-radius:50%;background:rgba(0,0,0,.34);filter:blur(9px);z-index:-1}
.client.is-run .client__ava::after{animation:avaShadow 3s ease-in-out}
@keyframes avaShadow{0%,58%,100%{scale:1;opacity:.7}12%{scale:.86;opacity:.4}26%{scale:1.02;opacity:.75}38%{scale:.95;opacity:.6}}
/* два кадра эмодзи: спокойный и радостный — переключаются прозрачностью на кивке */
.client__faces{position:relative;flex:0 0 auto;width:96px;height:96px}
.client__face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.client__face--happy{opacity:0}
.client.is-run .client__face--calm{animation:faceOut 3s ease-in-out}
.client.is-run .client__face--happy{animation:faceIn 3s ease-in-out}
@keyframes faceOut{0%,4%{opacity:1}12%,40%{opacity:0}56%,100%{opacity:1}}
@keyframes faceIn{0%,4%{opacity:0}12%,40%{opacity:1}56%,100%{opacity:0}}
/* сердечки разлетаются в момент радостного кадра */
.client__hearts{position:absolute;left:50%;top:6px;translate:-50% 0;pointer-events:none;z-index:3}
.client__hearts i{position:absolute;left:0;top:0;font-size:17px;line-height:1;opacity:0;font-style:normal}
.client.is-run .client__hearts i{animation:heartFly 1.9s cubic-bezier(.2,.7,.3,1);animation-delay:var(--hd,0s)}
@keyframes heartFly{0%{opacity:0;transform:translate(-50%,0) scale(.5) rotate(0)}18%{opacity:1;transform:translate(calc(-50% + var(--hx,0px) * .4),-34px) scale(1) rotate(var(--hr,0))}100%{opacity:0;transform:translate(calc(-50% + var(--hx,0px)),-104px) scale(.9) rotate(var(--hr,0))}}
.client__balance{display:flex;flex-direction:column;gap:2px;color:rgba(255,255,255,.55);font-size:13px;line-height:1.3;white-space:nowrap}
.client__balance b{color:#fff;font-size:32px;font-weight:600;line-height:1.1;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
/* баблы операций: вылетают из-за пилюли вверх и растворяются; --x задаёт дорожку, скрипт чередует */
.clientBubble{position:absolute;display:flex;flex-direction:column;gap:1px;padding:11px 17px;border-radius:16px;background:#fff;color:rgba(0,32,51,.55);font-size:12px;line-height:1.3;white-space:nowrap;z-index:1;box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}
.clientBubble b{color:var(--pl-ink);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.2px}
.clientBubble--plus b{color:#2F8F68}
.clientBubble--minus b{color:var(--pl-ink)}
.clientBubble--code b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.clientBubble--lvl{background:linear-gradient(135deg,color-mix(in srgb,var(--lvl,#fff) 82%,#fff) 0%,var(--lvl,#fff) 46%,color-mix(in srgb,var(--lvl,#fff) 78%,#5A1408) 100%)}
.clientBubble--lvl b,.clientBubble--lvl{color:#fff}
.clientBubble--lvl.is-light b{color:var(--pl-ink)}
.clientBubble--lvl.is-light{color:rgba(0,32,51,.6)}
.clientBubble--op{--x:0px;top:50%;left:50%;opacity:0;transform:translate(-50%,-50%) translate(var(--x),70px);animation:opFly 7s cubic-bezier(.08,.72,.28,1) paused,opFade 7s linear paused}
.clientBubble--op.is-on{animation-play-state:running,running}
@keyframes opFly{from{transform:translate(-50%,-50%) translate(var(--x),70px)}to{transform:translate(-50%,-50%) translate(var(--x),-260px)}}
@keyframes opFade{0%{opacity:0}7%{opacity:1}72%{opacity:1}100%{opacity:0}}
/* без анимации: раскладываем операции статично, чтобы блок не выглядел пустым */
.client.is-static{flex-wrap:wrap;gap:10px;aspect-ratio:auto}
.client.is-static .client__wave{display:none}
.client.is-static .clientBubble--op{position:static;transform:none;opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){.client__ava,.client__ava::after,.client__face,.client__hearts i{animation:none!important}.client__face--happy{display:none}}

/* ---------- экосистема: пункты слева, графика каналов справа ---------- */
.plEco{padding:88px 0}
.plEco__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:56px;align-items:center}
.plEco__title{margin:12px 0 0;color:var(--pl-ink);font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.6px}
.plEco__title span{color:var(--pl-accent)}
.plEco__text{margin:20px 0 0;color:rgba(0,32,51,.62);font-size:19px;line-height:1.6;max-width:34ch}
.ecoList{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.ecoList li{position:relative;padding-left:30px;color:rgba(0,32,51,.65);font-size:16px;line-height:1.5}
.ecoList li b{color:var(--pl-ink);font-weight:600}
.ecoList li::before{content:'';position:absolute;left:2px;top:6px;width:13px;height:7px;border-left:2px solid var(--pl-accent);border-bottom:2px solid var(--pl-accent);rotate:-45deg;border-radius:1px}
/* графика: акцентная пилюля хаба над сеткой плиток-каналов */
.ecoArt{display:flex;flex-direction:column;align-items:center;gap:0;padding:32px;border-radius:22px;background:linear-gradient(170deg,#fff 0%,#FFF4F2 100%);border:1px solid rgba(251,104,91,.18)}
.ecoArt__hub{display:flex;align-items:center;padding:14px 26px;border-radius:100px;background:var(--pl-accent);box-shadow:0 20px 38px -20px rgba(251,104,91,.75)}
/* лого сервиса вместо иконки: перекрашиваем в белый, чтобы читалось на акценте */
.ecoArt__hub img{height:22px;width:auto;display:block;filter:brightness(0) invert(1)}
/* место под провода: сами линии рисует LeaderLine (eco-lines.js) */
.ecoArt__wires{width:100%;height:42px}
.ecoArt__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 12px;width:100%;margin-top:18px}
.ecoTile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px 10px;border-radius:14px;background:#fff;border:1px solid rgba(0,32,51,.08);box-shadow:0 16px 30px -26px rgba(88,16,10,.5);color:var(--pl-ink);font-size:13px;font-weight:500;line-height:1.2;text-align:center}
.ecoTile__ico svg{width:22px;height:22px;display:block;fill:none;stroke:var(--pl-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:991px){.plEco{padding:64px 0}.plEco__inner{grid-template-columns:1fr;gap:32px}.plEco__title{font-size:30px}.ecoArt{padding:24px}}
@media (max-width:520px){.ecoArt__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- правила и нюансы: самостоятельный тёмный блок ---------- */
.plRules{padding:88px 0;background:linear-gradient(150deg,#0E2A3D 0%,var(--pl-ink) 55%,#001019 100%)}
.plRules__head{max-width:820px;margin-bottom:44px}
.plRules__title{margin:12px 0 0;color:#fff;font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.6px}
.plRules__title span{color:var(--pl-accent)}
.plRules__text{margin-top:16px;color:rgba(255,255,255,.6);font-size:17px;line-height:1.6;max-width:62ch}
.plRules__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ruleCard{padding:24px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);transition:background .25s ease,border-color .25s ease}
.ruleCard:hover{background:rgba(255,255,255,.06);border-color:rgba(251,104,91,.35)}
.ruleCard__ico{width:40px;height:40px;border-radius:12px;background:rgba(251,104,91,.12);border:1px solid rgba(251,104,91,.24);display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;margin-bottom:14px}
.ruleCard__name{color:#fff;font-size:16px;font-weight:600;line-height:1.35;margin-bottom:8px}
.ruleCard__tag{display:inline-block;margin-left:8px;color:rgba(255,255,255,.5);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:100px;border:1px solid rgba(255,255,255,.16);vertical-align:2px}
.ruleCard__text{color:rgba(255,255,255,.62);font-size:14px;line-height:1.55}

/* ---------- лестница уровней (тёмная) ---------- */
.plTiers{padding:88px 0;background:var(--pl-ink)}
.plTiers__head{max-width:760px;margin-bottom:44px}
.plTiers__title{margin:12px 0 0;color:#fff;font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.6px}
.plTiers__title span{color:var(--pl-accent)}
.plTiers__text{margin-top:14px;color:rgba(255,255,255,.62);font-size:17px;line-height:1.55}
.plTiers__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:end}
.tier{border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);padding:24px;display:flex;flex-direction:column;gap:14px;min-height:var(--h,220px)}
.tier__name{display:flex;align-items:center;gap:9px;color:#fff;font-size:19px;font-weight:600;line-height:1.2}
.tier__dot{width:9px;height:9px;border-radius:50%;background:var(--dot,rgba(255,255,255,.35))}
.tier__cond{color:rgba(255,255,255,.5);font-size:13px;line-height:1.45}
.tier__perks{margin:auto 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.tier__perks li{color:rgba(255,255,255,.75);font-size:14px;line-height:1.45}
.tier--top{background:linear-gradient(160deg,#FF8A72 0%,var(--pl-accent) 52%,#E4483F 100%);border-color:transparent}
.tier--top .tier__name{color:#fff}
.tier--top .tier__cond{color:rgba(255,255,255,.75)}
.tier--top .tier__perks li{color:#fff}
.tier--top .tier__dot{background:var(--dot,#fff)}
.plTiers__note{margin-top:26px;color:rgba(255,255,255,.45);font-size:14px;line-height:1.5;text-align:center}

/* ========== ADAPTIVE ========== */
@media (max-width:1180px){
.plHero{--heroAside:420px}
.plCodes__title,.plTiers__title,.plPoints__title{font-size:34px}
.plRules__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.plPoints__top{gap:36px}
.plTiers__row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.tier{min-height:0}
}
@media (max-width:991px){
.plRules{padding:64px 0}
.plRules__title{font-size:30px}
.plRules__head,.plTiers__head{margin-bottom:32px}
.plHero{padding-bottom:64px}
.plHero .pageHero__top{padding-bottom:4px}
.plHero__stage{max-width:520px;width:100%}
.account{max-width:520px;margin:0 auto;width:100%}
.plCodes{padding:64px 0}
.plPoints{padding:64px 0}
.plPoints__top{grid-template-columns:1fr;gap:36px}
.plTiers{padding:64px 0}
}
@media (max-width:767px){
.plPoints{border-radius:0}
.plRules__grid{grid-template-columns:1fr}
.plTiers{border-radius:0}
.plTiers__row{grid-template-columns:1fr}
}
@media (max-width:575px){
.account{padding:20px 18px}
.account__num{font-size:40px}
.ticket{width:238px}
/* мобильный: орбиты не вмещают баблы — обычный поток вместо абсолютных позиций */
.client,.plHero__stage .client{aspect-ratio:1/1.15}
.plHero__stage{padding:12px}
.client__wave{display:none}
.client__ava{flex:none;padding:10px 20px 10px 10px;gap:12px;margin-bottom:6px}
.client__faces{width:80px;height:80px}
.client__balance b{font-size:26px}
.clientBubble{position:static;top:auto;left:auto;transform:none;padding:9px 14px;font-size:11px;box-shadow:0 12px 24px -20px rgba(0,0,0,.6)}
.clientBubble b{font-size:14px}
.clientBubble--op{opacity:1;animation:none}
}

/* ---------- подарочные карты: светлый блок, слева смысл, справа макет ваучера ---------- */
.plGift{padding:88px 0}
.plGift__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:center}
.plGift__title{margin:12px 0 0;color:var(--pl-ink);font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.6px}
.plGift__title span{color:var(--pl-accent)}
.plGift__text{margin-top:16px;color:rgba(0,32,51,.6);font-size:17px;line-height:1.6;max-width:56ch}
.plGift__list{margin-top:26px}
/* карта: пластик с балансом — номинал, шкала расхода, код и срок */
.giftCard{position:relative;display:flex;flex-direction:column;gap:24px;aspect-ratio:1.6/1;padding:28px;border-radius:20px;background:linear-gradient(150deg,#FF8A72 0%,var(--pl-accent) 55%,#E4483F 100%);color:#fff;box-shadow:0 40px 70px -40px rgba(228,72,63,.7);overflow:hidden}
.giftCard::after{content:'';position:absolute;right:-70px;top:-80px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.13)}
.giftCard__top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px}
.giftCard__label{color:rgba(255,255,255,.8);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
/* знак бренда без словесной части, перекрашен в белый */
.giftCard__logo img{width:28px;height:28px;display:block;filter:brightness(0) invert(1);opacity:.95}
.giftCard__balance{position:relative;margin-top:auto;display:flex;flex-direction:column;gap:8px}
.giftCard__sum{font-size:40px;font-weight:600;line-height:1.05;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.giftCard__cap{color:rgba(255,255,255,.8);font-size:14px;line-height:1.4}
.giftCard__bar{margin-top:4px;height:5px;border-radius:100px;background:rgba(255,255,255,.28);overflow:hidden}
.giftCard__bar i{display:block;height:100%;border-radius:100px;background:#fff}
.giftCard__foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.85);font-size:14px;line-height:1.4}
.giftCard__code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.06em;color:#fff}
@media (max-width:991px){.plGift{padding:64px 0}.plGift__inner{grid-template-columns:1fr;gap:32px}.plGift__title{font-size:30px}.giftCard{max-width:440px}}

/* ========== ПРАВКИ САЙТА ПОВЕРХ ВЕРСТКИ ==========
   Блок ниже добавлен на стороне сайта, в исходнике дизайна его нет.
   При ре-импорте promo.css из дизайн-проекта — перенести сюда заново. */

/* Подложки секций приводим к трём цветам сайта (токены в main.css).
   В макете было два разных тёмных: градиент #0E2A3D→#001019 у «Правил»
   и плоский #002033 у «Уровней». Переменная --pl-ink не трогается:
   она же задаёт цвет текста и карточек внутри секций. */
.plRules,
.plTiers {
	background: var(--surface-dark);
}

/* Промо-блок в макете подкрашивался под цвет текущего уровня (--heroTint),
   из-за чего фон страницы «плыл» между светлым и бежевым. Оставляем светлую
   подложку сайта; свечение вокруг аватара цвет уровня по-прежнему показывает. */
.plHero {
	background: var(--surface-light);
	transition: none;
}

/* Подарочная карта: aspect-ratio 1.6/1 привязывает высоту к ширине, а содержимое
   по высоте не сжимается. Как только колонка уже ~510px (мобильные, планшеты
   и десктоп до 1344px), воздуха остаётся 15px против 59px на широком экране —
   карта выглядит задушенной. Нижняя граница высоты снимает это на всех ширинах:
   там, где карта широкая, пропорция по-прежнему больше и выигрывает она. */
.giftCard {
	min-height: 320px;
}