/* ============================================================
   PROGRAM LANDING - premium selling page per school (.pl namespace)
   SHARED by program.html AND course.html - bump ?b= in BOTH on every
   edit. Reuses design tokens from style.css.
   ============================================================ */

/* ---------- HERO ---------- */
.pl-hero{ position:relative; z-index:1; padding:clamp(98px,13vh,150px) 0 clamp(40px,6vh,80px); overflow:hidden; }
.pl-hero__in{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,68px); align-items:center; }
.pl-back{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--text-2); text-decoration:none; margin-bottom:26px; transition:color .2s; }
.pl-back:hover{ color:var(--accent-ink); }
.pl-back svg{ transition:transform .3s var(--e-out); }
.pl-back:hover svg{ transform:translateX(-4px); }
/* eyebrow: без фон-плашки - только текст + анимированный кружочек (пульс). align-self:flex-start чтобы не растягивался в flex-колонке hero. */
.pl-hero__eyebrow{ display:inline-flex; align-self:flex-start; align-items:center; gap:9px; font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
.pl-hero__eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); animation:plEyeDot 2.4s ease-out infinite; }
@keyframes plEyeDot{ 0%{ box-shadow:0 0 0 0 rgba(45,127,249,.4); } 70%{ box-shadow:0 0 0 9px rgba(45,127,249,0); } 100%{ box-shadow:0 0 0 0 rgba(45,127,249,0); } }
@media (prefers-reduced-motion:reduce){ .pl-hero__eyebrow::before{ animation:none; box-shadow:0 0 0 4px rgba(45,127,249,.18); } }
.pl-hero__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,1.1rem + 4vw,4rem); line-height:1.02; letter-spacing:-.035em; color:var(--text); margin:22px 0 0; }
.pl-hero__title em{ font-style:normal; color:var(--accent); }
.pl-hero__lead{ margin:20px 0 0; max-width:560px; color:var(--text-2); font-size:clamp(1.02rem,1.1vw,1.18rem); line-height:1.62; }
.pl-hero__meta{ display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; }
.pl-chip{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; color:var(--text-2); background:var(--raised); padding:10px 16px; border-radius:var(--pill); box-shadow:var(--nm-sm); }
.pl-chip svg{ color:var(--accent-ink); flex:none; }
.pl-hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin:32px 0 0; }
/* hero CTA: основная кнопка "нажимаемая" (как на главной) + вторичная "Тарифы и даты" ghost.
   «Оплатить» из hero убрана (13.07, A·164): касса живёт в блоке тарифов у каждого пакета -
   оплата на верху воронки была преждевременной, «Тарифы и даты» ведёт туда же смуф-скроллом. */
.pl-hero__cta .btn--primary{ box-shadow:0 6px 0 #0B4FB8, 0 16px 30px rgba(45,127,249,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.pl-hero__cta .btn--primary:hover{ transform:translateY(-2px); box-shadow:0 8px 0 #0B4FB8, 0 20px 34px rgba(45,127,249,.48), inset 0 1px 0 rgba(255,255,255,.45); }
.pl-hero__cta .btn--primary:active{ transform:translateY(4px); box-shadow:0 2px 0 #0B4FB8, 0 6px 14px rgba(45,127,249,.35), inset 0 2px 6px rgba(11,79,184,.42); }
/* мобайл: hero-кнопки в столбик на всю ширину - чистый стек, ровные тач-таргеты, без рваного ряда */
@media (max-width:640px){
  .pl-hero__cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .pl-hero__cta .btn{ width:100%; }
}

/* hero visual */
.pl-hero__visual{ position:relative; }
.pl-hero__visual::before{ content:''; position:absolute; inset:-12% -6% -6% -6%; background:radial-gradient(60% 55% at 60% 42%, rgba(45,127,249,.34), transparent 70%); filter:blur(18px); z-index:-1; }
.pl-hero__frame{ position:relative; border-radius:30px; overflow:hidden; background:linear-gradient(155deg,#EFF4FF,var(--raised)); box-shadow:0 30px 70px rgba(43,80,160,.20), var(--nm-lg); aspect-ratio:5/4; animation:plFloat 7s ease-in-out infinite; }
.pl-hero__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
/* floating accent element (separate animated layer, e.g. coaching plasma orb) */
.pl-orb{ position:absolute; transform:translate(-50%,-50%); z-index:3; pointer-events:none; will-change:transform; animation:plOrbFloat 5.4s ease-in-out infinite; }
.pl-orb img{ width:100%; height:auto; display:block; position:relative; z-index:2; filter:drop-shadow(0 0 16px rgba(255,196,110,.6)); }
.pl-orb__glow{ position:absolute; left:50%; top:50%; width:200%; height:200%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,212,140,.6) 0%, rgba(255,180,90,.22) 42%, transparent 66%); filter:blur(6px); z-index:1; animation:plOrbPulse 5.4s ease-in-out infinite; }
@keyframes plOrbFloat{ 0%,100%{ transform:translate(-50%,-50%) translateY(-7px); } 50%{ transform:translate(-50%,-50%) translateY(9px); } }
@keyframes plOrbPulse{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .pl-orb{ animation:none; } .pl-orb__glow{ animation:none; } }
.pl-hero__frame.is-fallback img{ display:none; }
/* premium glass-scene fallback (shown only when a hero photo is missing) */
.pl-scene{ display:none; }
.pl-hero__frame.is-fallback .pl-scene{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pl-scene__glow{ position:absolute; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 36%, rgba(255,255,255,.95), rgba(45,127,249,.34) 46%, rgba(43,80,160,.10) 72%, transparent 78%); filter:blur(2px); animation:plPulse 6s ease-in-out infinite; }
.pl-scene__ring{ position:absolute; border-radius:50%; border:1.5px solid rgba(45,127,249,.18); }
.pl-scene__ring--1{ width:74%; aspect-ratio:1; }
.pl-scene__ring--2{ width:92%; aspect-ratio:1; border-style:dashed; opacity:.55; }
.pl-scene__orb{ position:relative; width:44%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg,#fff,#DCE8FF 62%,#BBD0F5); box-shadow:0 26px 56px rgba(45,127,249,.30), inset 0 4px 14px rgba(255,255,255,.9), inset 0 -12px 30px rgba(45,127,249,.22); }
.pl-scene__orb svg{ width:46%; height:46%; color:var(--accent); }
.pl-scene__num{ position:absolute; right:8%; bottom:6%; font-family:var(--font-display); font-weight:800; font-size:clamp(44px,7vw,72px); color:var(--accent); opacity:.12; line-height:1; }
@keyframes plPulse{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.06); opacity:1; } }
@keyframes plFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.pl-badge{ position:absolute; display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.62), rgba(232,240,255,.34));
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 20px 44px rgba(43,60,110,.20), inset 0 1px 1px rgba(255,255,255,.95); }
.pl-badge > div{ display:flex; flex-direction:column; gap:3px; }
.pl-badge b{ display:block; font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--text); line-height:1; }
.pl-badge span{ display:block; font-size:11.5px; color:var(--text-2); line-height:1.2; }
/* glowing glass orb-emblem (matches the hero's plasma sphere) */
.pl-badge__ico{ position:relative; width:44px; height:44px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  background:radial-gradient(circle at 42% 36%, rgba(255,251,235,.97) 0%, rgba(255,214,140,.92) 20%, rgba(120,165,255,.85) 56%, rgba(45,108,233,.95) 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.85), inset 0 -7px 13px rgba(18,58,150,.42), 0 6px 16px rgba(45,127,249,.30), 0 0 9px 2px rgba(255,196,110,.5);
  animation:plOrbPulse 3.4s ease-in-out infinite; }
.pl-badge__ico::after{ content:''; position:absolute; left:24%; top:14%; width:30%; height:22%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.96), rgba(255,255,255,0) 70%); pointer-events:none; }
.pl-badge__ico svg{ display:block; position:relative; z-index:1; filter:drop-shadow(0 1px 1.5px rgba(28,40,80,.55)); }
@keyframes plOrbPulse{ 0%,100%{ box-shadow: inset 0 2px 3px rgba(255,255,255,.85), inset 0 -7px 13px rgba(18,58,150,.42), 0 6px 16px rgba(45,127,249,.30), 0 0 8px 1px rgba(255,196,110,.4); } 50%{ box-shadow: inset 0 2px 3px rgba(255,255,255,.85), inset 0 -7px 13px rgba(18,58,150,.42), 0 6px 16px rgba(45,127,249,.30), 0 0 18px 5px rgba(255,196,110,.72); } }
@media (prefers-reduced-motion:reduce){ .pl-badge__ico{ animation:none; } }
.pl-badge--tl{ top:-22px; left:14px; animation:plFloat 7s ease-in-out infinite .6s; }
.pl-badge--br{ bottom:-22px; right:14px; animation:plFloat 7s ease-in-out infinite 1.4s; }
@media (prefers-reduced-motion:reduce){ .pl-hero__frame,.pl-badge--tl,.pl-badge--br{ animation:none; } }

/* ---------- STATS BAND ---------- */
.pl-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:linear-gradient(120deg,var(--accent),var(--accent-h)); border-radius:24px; overflow:hidden; box-shadow:0 24px 54px rgba(45,127,249,.30); }
.pl-stat{ padding:30px 26px; text-align:center; }
.pl-stat b{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,2.4vw,2.3rem); color:#fff; line-height:1; letter-spacing:-.02em; }
.pl-stat span{ display:block; margin-top:8px; font-size:13px; color:rgba(255,255,255,.82); }

/* ---------- SECTION HEAD ---------- */
/* unified standard: every section head centered, no eyebrow kicker (per client) */
.pl-head{ max-width:840px; margin:0 auto 38px; text-align:center; } /* wider so long section titles/subs stay one line on desktop (client 03.07); still < .wrap 1240, wraps naturally on tablet/mobile */
.pl-head--c{ margin-left:auto; margin-right:auto; text-align:center; }
.pl-eyebrow{ display:none; }
.pl-h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,1rem + 1.6vw,2.15rem); line-height:1.1; letter-spacing:-.028em; color:var(--text); margin:0; } /* меньше hero программы (client R3) */
.pl-sub{ margin:15px 0 0; color:var(--text-2); font-size:1.06rem; line-height:1.6; }
/* анти-висяк: балансируем строки заголовков/подзаголовков, чтобы на последней строке не висело одно слово */
.pl-h2, .pl-sub, .pl-hero__title, .pl-hero__sub{ text-wrap:balance; }

/* ---------- PAINS ---------- */
.pl-pains{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
/* единый стиль (client 29.06): фавиконка СЛЕВА + текст справа (как pl-feat/pl-learn) */
.pl-pain{ position:relative; background:var(--raised); border-radius:20px; padding:24px 24px; box-shadow:var(--nm-sm); overflow:hidden; display:flex; gap:16px; align-items:flex-start; }
.pl-pain::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(#E89A3C,#D9663A); }
.pl-pain__d{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#FBEAD9; color:#C9722B; margin-bottom:0; flex:none; }
.pl-pain p{ margin:0; flex:1; min-width:0; color:var(--text); font-weight:500; font-size:1.01rem; line-height:1.52; }

/* ---------- METHOD (image + features) ---------- */
.pl-method{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,60px); align-items:center; }
.pl-method__media{ position:relative; }
.pl-method__media::before{ content:''; position:absolute; inset:-8%; background:radial-gradient(60% 60% at 50% 50%, rgba(45,127,249,.26), transparent 70%); filter:blur(16px); z-index:-1; }
.pl-method__media img{ width:100%; border-radius:26px; box-shadow:0 24px 56px rgba(43,80,160,.18); display:block; }
.pl-feat{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:18px; }
.pl-feat li{ display:flex; gap:16px; }
.pl-feat__n{ flex:none; width:42px; height:42px; border-radius:13px; background:var(--accent-soft); color:var(--accent-ink); font-family:var(--font-display); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; }
.pl-feat b{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.06rem; color:var(--text); margin-bottom:4px; }
.pl-feat span{ color:var(--text-2); font-size:.96rem; line-height:1.5; }

/* ---------- VALUE (learn + result) ---------- */
.pl-value{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3vw,48px); align-items:start; }
.pl-learn{ list-style:none; display:grid; gap:15px; margin:0; padding:0; }
.pl-learn li{ display:flex; align-items:flex-start; gap:14px; color:var(--text); font-size:1.04rem; line-height:1.45; font-weight:500; }
.pl-learn__ck{ flex:none; width:28px; height:28px; border-radius:50%; background:linear-gradient(150deg,var(--accent),var(--accent-h)); color:#fff; display:flex; align-items:center; justify-content:center; margin-top:1px; box-shadow:0 6px 14px rgba(45,127,249,.32); }
/* маркер пунктов детальной программы курса: без «галочки», нейтральная точка (client 07.07) */
.pl-learn__dot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-top:10px; opacity:.85; }
/* Блок-шапка модуля/дня в детальной программе (единый стандарт, client 08.07): ЯРЛЫК
   («1 ДЕНЬ»/«1 МОДУЛЬ»), НАЗВАНИЕ и, если он есть, ВВОДНЫЙ АБЗАЦ - разными строками,
   жирным, БЕЗ галочки/кружка; полоска-разделитель ПОД всем жирным блоком. Затем
   неотмеченная подпись «Основные рассматриваемые вопросы» и только ниже темы с галочками.
   Точка в конце названия снята. */
.pl-learn li.pl-learn__hd{ display:block; margin-top:18px; padding-bottom:10px; border-bottom:1px solid var(--line, rgba(20,40,80,.12)); color:var(--text); }
.pl-learn li.pl-learn__hd:first-child{ margin-top:0; }
.pl-learn__lbl{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.14rem; line-height:1.35; color:var(--text); }
.pl-learn__nm{ display:block; font-weight:700; font-size:1.03rem; line-height:1.5; margin-top:5px; color:var(--text); }
.pl-learn__intro{ display:block; font-weight:700; font-size:1.03rem; line-height:1.5; margin-top:5px; color:var(--text); }
.pl-learn li.pl-learn__questions{ display:block; margin:0; color:var(--text-2); font-size:1rem; line-height:1.45; font-weight:500; }
.pl-result{ position:relative; background:linear-gradient(160deg,var(--accent),var(--accent-h)); color:#fff; border-radius:24px; padding:34px 30px; box-shadow:0 24px 54px rgba(45,127,249,.32); overflow:hidden; }
.pl-result::after{ content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.12); }
.pl-result h3{ font-family:var(--font-display); font-weight:700; font-size:1.28rem; margin:0 0 14px; position:relative; }
.pl-result p{ margin:0 0 22px; font-size:1rem; line-height:1.55; opacity:.95; position:relative; }
.pl-result .btn{ width:100%; position:relative; }

/* ---------- COURSES ---------- */
.pl-courses{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.pl-course{ position:relative; display:flex; flex-direction:column; gap:9px; background:var(--raised); border-radius:20px; padding:26px 26px 24px; box-shadow:var(--nm-sm); transition:transform .28s var(--e-out), box-shadow .28s var(--e-out); overflow:hidden; }
.pl-course::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-h)); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--e-out); }
.pl-course:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(43,80,160,.16); }
.pl-course:hover::before{ transform:scaleX(1); }
.pl-course__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pl-course h3{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--text); margin:0; line-height:1.25; letter-spacing:-.01em; }
.pl-course__tag{ flex:none; font-weight:600; font-size:11.5px; color:var(--accent-ink); background:var(--accent-soft); padding:5px 11px; border-radius:var(--pill); white-space:nowrap; }
.pl-course p{ margin:0; color:var(--text-2); font-size:.93rem; line-height:1.5; }
.pl-course__go{ margin-top:auto; padding-top:10px; font-weight:600; font-size:13.5px; color:var(--accent-ink); display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; text-align:left; }
.pl-course__go svg{ transition:transform .25s var(--e-out); }
.pl-course:hover .pl-course__go svg{ transform:translateX(4px); }
.pl-course--link{ text-decoration:none; color:inherit; }
.pl-course--link .pl-course__go{ color:var(--accent-ink); }
/* Client 07.07: название курса = активная ссылка (без отдельной кнопки). Карточка-ссылка
   и карточка-заглушка кликабельны целиком; заголовок подсвечивается акцентом на hover. */
.pl-course--action{ cursor:pointer; }
.pl-course--link h3, .pl-course--action h3{ transition:color .2s var(--e-out); }
.pl-course--link:hover h3, .pl-course--action:hover h3,
.pl-course--link:focus-visible h3, .pl-course--action:focus-visible h3{ color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.pl-course--action:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- LIVE SESSIONS ---------- */
.pl-ses{ display:grid; gap:12px; max-width:940px; margin-inline:auto; } /* суженная плашка дат (client R3), центрирована под заголовком */
.pl-ses__row{ display:grid; grid-template-columns:auto 1fr auto auto; gap:22px; align-items:center; background:var(--raised); border-radius:18px; padding:18px 24px; box-shadow:var(--nm-sm); transition:transform .2s var(--e-out); }
.pl-ses__row:hover{ transform:translateX(4px); }
.pl-ses__date{ font-family:var(--font-display); font-weight:700; color:#fff; background:linear-gradient(150deg,var(--accent),var(--accent-h)); padding:9px 14px; border-radius:12px; font-size:.92rem; white-space:nowrap; text-align:center; min-width:148px; box-shadow:0 8px 18px rgba(45,127,249,.28); } /* 148 = самый широкий кейс «14–16 сентября» (139px) + запас: чипы дат одного размера (client 06.07) */
/* подпись «Модуль N» внутри синей плашки даты (модульные курсы) - белая, дата под ней */
.pl-ses__mod{ display:block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.92); margin-bottom:2px; }
.pl-ses__name{ font-weight:600; color:var(--text); font-size:1rem; min-width:0; overflow-wrap:anywhere; }
a.pl-ses__link{ text-decoration:none; transition:color .2s var(--e-out); }
a.pl-ses__link:hover{ color:var(--accent-ink); }
.pl-ses__city{ font-size:12.5px; color:var(--text-2); margin-top:3px; }
.pl-ses__price{ font-family:var(--font-display); font-weight:800; color:var(--text); font-size:1.05rem; white-space:nowrap; }
/* подпись у цены модульного курса: цена одна за весь курс, не за модуль */
.pl-ses__full{ display:block; font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--text-3); margin-top:3px; }
/* 2 кнопки в строке даты: «Оплатить» + «Нужна консультация?» (client 29.06) */
.pl-ses__acts{ display:flex; flex-direction:row; gap:8px; align-items:center; flex:none; } /* кнопки горизонтально, не в столбик (client R3) */
.pl-ses__btn{ white-space:nowrap; }
.pl-ses__btn--consult{ background:transparent; box-shadow:var(--nm-sm); color:var(--accent-ink); }
.pl-ses__btn--consult:hover{ box-shadow:var(--nm); }
.pl-ses__empty{ text-align:center; color:var(--text-2); padding:22px; background:var(--raised); border-radius:18px; box-shadow:var(--nm-sm); }
@media (max-width:680px){ .pl-ses__row{ grid-template-columns:auto 1fr; gap:10px 16px; padding:14px 16px; } .pl-ses__row > *{ min-width:0; } .pl-ses__date{ min-width:148px; } /* чипы дат одного размера и на мобиле (min-width:0 выше их расравнивал) */ .pl-ses__price{ grid-column:2; grid-row:2; justify-self:start; } .pl-ses__acts{ grid-column:1/-1; flex-direction:row; flex-wrap:wrap; } .pl-ses__acts .pl-ses__btn{ flex:1 1 130px; } }
/* Очень узкие экраны (≤430): кнопки «Оплатить»/«Нужна консультация?» в столбик на всю ширину,
   иначе «Нужна консультация?» не помещается в половину и уезжает за экран. */
@media (max-width:430px){ .pl-ses__acts{ flex-direction:column; } .pl-ses__acts .pl-ses__btn{ flex:1 1 auto; width:100%; } }

/* ---------- TRANSFORMATION BAND ---------- */
.pl-band{ position:relative; border-radius:30px; overflow:hidden; min-height:340px; display:flex; align-items:center; box-shadow:0 30px 70px rgba(43,80,160,.22); }
.pl-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pl-band__overlay{ position:relative; z-index:1; max-width:560px; padding:clamp(34px,5vw,64px); background:linear-gradient(90deg, rgba(232,236,242,.96) 35%, rgba(232,236,242,.55) 75%, transparent); align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.pl-band h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,1.1rem + 1.8vw,2.3rem); line-height:1.1; letter-spacing:-.025em; color:var(--text); margin:0; }
.pl-band p{ margin:14px 0 22px; color:var(--text-2); font-size:1.04rem; line-height:1.55; }
.pl-band .btn{ align-self:flex-start; }
@media (max-width:600px){ .pl-band__overlay{ background:rgba(232,236,242,.92); max-width:none; } }
/* glass band (no photo) - gradient panel with achievement stats on the right */
.pl-band--glass{ background:linear-gradient(120deg,#16224a,#2D7FF9 62%,#6aa8ff); display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch; min-height:300px; }
.pl-band--glass .pl-band__overlay{ background:linear-gradient(90deg, rgba(232,236,242,.97) 58%, rgba(232,236,242,.5) 88%, transparent); max-width:none; }
.pl-band__stats{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:clamp(26px,3.5vw,48px) clamp(24px,3vw,46px); }
.pl-band__stat{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:16px; padding:16px 20px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:inset 0 1px 1px rgba(255,255,255,.25); }
.pl-band__stat b{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.2vw,2rem); color:#fff; line-height:1; letter-spacing:-.01em; }
.pl-band__stat span{ display:block; margin-top:5px; font-size:13px; color:rgba(255,255,255,.85); }
@media (max-width:760px){ .pl-band--glass{ grid-template-columns:1fr; } .pl-band--glass .pl-band__overlay{ background:rgba(232,236,242,.95); } .pl-band__stats{ padding-top:4px; } }
/* method as text-only premium grid (photo removed) */
.pl-feat--grid{ grid-template-columns:1fr 1fr; gap:18px; max-width:940px; margin:clamp(28px,4vh,46px) auto 0; }
.pl-feat--grid li{ background:var(--raised); border-radius:20px; padding:24px 24px; box-shadow:var(--nm-sm); margin:0; }
@media (max-width:680px){ .pl-feat--grid{ grid-template-columns:1fr; } }

/* ---------- AUDIENCE ---------- */
.pl-aud{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pl-aud__i{ background:var(--raised); border-radius:20px; padding:28px 26px; box-shadow:var(--nm-sm); transition:transform .25s var(--e-out); }
.pl-aud__i:hover{ transform:translateY(-4px); }
.pl-aud__ic{ width:48px; height:48px; border-radius:14px; background:linear-gradient(150deg,var(--accent),var(--accent-h)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 10px 22px rgba(45,127,249,.3); }
.pl-aud__i b{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--text); margin-bottom:7px; }
.pl-aud__i span{ color:var(--text-2); font-size:.95rem; line-height:1.5; }

/* white button (on accent gradient / image) */
.btn--white{ background:#fff; color:var(--accent-ink); }
.btn--white:hover{ background:#fff; filter:brightness(1.02); transform:translateY(-2px); }
.btn--white span{ color:var(--accent-ink); }

/* ---------- DOCUMENTS ---------- (reuse prog__docs from style.css) */

/* ---------- REVIEWS ---------- */
.pl-revs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pl-rev{ background:var(--raised); border-radius:20px; padding:26px 24px; box-shadow:var(--nm-sm); display:flex; flex-direction:column; }
.pl-rev__stars{ color:#F5A623; letter-spacing:2px; font-size:15px; margin-bottom:12px; }
.pl-rev__text{ color:var(--text); font-size:.94rem; line-height:1.55; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }
.pl-rev__by{ margin-top:16px; font-weight:600; font-size:13.5px; color:var(--text-2); }
.pl-rev__src{ font-weight:500; color:var(--text-3); }

/* ---------- FAQ ---------- */
.pl-faq{ max-width:780px; margin:0 auto; display:grid; gap:12px; }
.pl-faq__i{ background:var(--raised); border-radius:18px; box-shadow:var(--nm-sm); overflow:hidden; }
.pl-faq__q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:20px 24px; font-family:var(--font-display); font-weight:600; font-size:1.04rem; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pl-faq__q svg{ flex:none; color:var(--accent-ink); transition:transform .3s var(--e-out); }
.pl-faq__i.open .pl-faq__q svg{ transform:rotate(45deg); }
.pl-faq__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--e-out); }
.pl-faq__a p{ margin:0; padding:0 24px 22px; color:var(--text-2); font-size:.98rem; line-height:1.6; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .pl-hero__in{ grid-template-columns:1fr; gap:40px; }
  .pl-hero__visual{ max-width:400px; }
  .pl-method{ grid-template-columns:1fr; }
  .pl-method__media{ max-width:440px; }
  .pl-value{ grid-template-columns:1fr; }
  .pl-stats{ grid-template-columns:repeat(2,1fr); }
  .pl-pains,.pl-aud,.pl-revs{ grid-template-columns:1fr 1fr; }
  .pl-courses{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .pl-stats,.pl-pains,.pl-aud,.pl-revs{ grid-template-columns:1fr; }
  .pl-badge--tl{ left:-8px; }
  .pl-badge--br{ right:-8px; }
}

/* ============================================================
   BEAUTY PASS - motion, atmosphere, depth
   ============================================================ */
/* atmosphere: drifting aurora + faint grain */
.aurora .a1{ animation:plAur1 26s ease-in-out infinite; }
.aurora .a2{ animation:plAur2 32s ease-in-out infinite; }
.aurora .a4{ animation:plAur1 23s ease-in-out infinite reverse; }
@keyframes plAur1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(4vmax,3vmax) scale(1.08); } }
@keyframes plAur2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-5vmax,2vmax) scale(1.1); } }
.pl-grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* hero: pulsing glow behind card; GSAP owns float+tilt when active */
.pl-hero__visual{ perspective:1100px; }
.pl-hero__frame{ transform-style:preserve-3d; }
.pl-hero__visual::before{ animation:plGlowPulse 6.5s ease-in-out infinite; }
@keyframes plGlowPulse{ 0%,100%{ opacity:.82; transform:scale(1); } 50%{ opacity:1; transform:scale(1.07); } }
.gsap-on .pl-hero__frame{ animation:none; }
.gsap-on .reveal{ opacity:1; transform:none; }
.reveal{ will-change:opacity, transform; }

/* bigger, more dramatic headings */
.pl-hero__title{ font-size:clamp(2.3rem,1.05rem + 4.4vw,4.4rem); }
.pl-h2{ font-size:clamp(1.5rem,1.05rem + 1.9vw,2.35rem); } /* меньше hero программы (client R3) */

/* course cards: hover glow + crisp edge */
.pl-course{ border:1px solid rgba(255,255,255,.5); }
.pl-course::after{ content:''; position:absolute; inset:0; border-radius:20px; opacity:0; pointer-events:none; transition:opacity .3s var(--e-out);
  background:radial-gradient(120% 80% at 50% 0%, rgba(45,127,249,.10), transparent 60%); }
.pl-course:hover::after{ opacity:1; }
.pl-course:hover{ box-shadow:0 26px 56px rgba(43,80,160,.18), 0 0 0 1px rgba(45,127,249,.18); }
.pl-stat b{ font-variant-numeric:tabular-nums; }
/* oversize cover images so parallax never reveals a seam */
.pl-band img{ height:130%; top:-15%; bottom:auto; }

/* tighter vertical rhythm - less airy (program.css loads only on landing pages) */
.sec{ padding:clamp(44px,5.5vh,78px) 0; }
.sec--tight{ padding:clamp(32px,4vh,56px) 0; }
.pl-hero{ padding:clamp(112px,13vh,144px) 0 clamp(16px,2.5vh,34px); }
.pl-head{ margin:0 auto 30px; }

/* ---------- LOADING SKELETON (course.html, while /api/sheet + hero load) ---------- */
@keyframes clShimmer { to { background-position:-200% 0; } }
#cFrame.is-empty::after,
.c-loading #cEyebrow,
.c-loading #cTitle,
.c-loading #cTagline,
.c-loading #cLead,
.c-loading #cPriceFrom,
.c-loading #cMeta::before{
  background:linear-gradient(100deg, rgba(202,212,228,.5) 28%, rgba(236,241,248,.95) 50%, rgba(202,212,228,.5) 72%);
  background-size:200% 100%; animation:clShimmer 1.5s ease-in-out infinite; border-radius:12px;
}
/* hero image: fade in once loaded; shimmer fills the frame until then */
#cFrame.is-empty img{ opacity:0; }
#cFrame img{ opacity:1; transition:opacity .55s var(--e-out); }
#cFrame.is-empty::after{ content:''; position:absolute; inset:0; border-radius:inherit; }
/* hero text: placeholder bars while loading, real text fades in when c-loading is removed */
.c-loading #cEyebrow{ color:transparent; display:inline-block; width:172px; height:30px; box-shadow:none; }
.c-loading #cTitle{ color:transparent; min-height:2.1em; border-radius:16px; }
.c-loading #cTagline{ color:transparent !important; display:block; width:78%; height:24px; margin-top:18px; }
.c-loading #cLead{ color:transparent; display:block; width:94%; height:50px; margin-top:12px; }
.c-loading #cMeta{ position:relative; min-height:30px; margin-top:14px; }
.c-loading #cMeta::before{ content:''; position:absolute; left:0; top:0; width:240px; height:30px; }
.c-loading #cPriceFrom{ color:transparent; display:inline-block; width:132px; height:26px; margin-top:14px; }
.c-loading #cTitle, #cTitle, #cEyebrow, #cTagline, #cLead, #cPriceFrom{ transition:color .4s var(--e-out); }

@media (prefers-reduced-motion:reduce){
  .aurora .a1,.aurora .a2,.aurora .a4,.pl-hero__visual::before{ animation:none; }
  #cFrame.is-empty::after,.c-loading #cEyebrow,.c-loading #cTitle,.c-loading #cTagline,.c-loading #cLead,.c-loading #cPriceFrom,.c-loading #cMeta::before{ animation:none; }
}

/* ============================================================
   HERO KIT - gated by COPY.heroKind (course.js). One visual grammar,
   three archetypes: emblem / structure / person. Built in code
   (SVG + CSS + GSAP), no stock imagery. Scoped to .pl-hero--kit.
   ============================================================ */
.pl-hero--kit .pl-hero__frame{ display:none; }
.pl-hero--kit .pl-hero__visual{ perspective:none; }
.pl-hero--kit .pl-hero__visual::before{ /* soften the default cobalt glow for the kit */
  inset:-6% 0 -2% 0; background:radial-gradient(56% 52% at 56% 48%, rgba(45,127,249,.20), transparent 70%); }

.plk{ position:relative; width:100%; aspect-ratio:1.08/1; max-height:560px; overflow:visible;
  transform:translate(var(--kx,0), var(--ky,0)); transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.plk-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* shared signature: golden light sweep across the visual zone */
.plk-sweep{ position:absolute; inset:-4% auto -4% 0; width:34%; pointer-events:none; opacity:.85;
  background:linear-gradient(78deg, transparent 0%, rgba(255,214,150,.0) 28%, rgba(255,214,150,.38) 50%, rgba(255,255,255,.22) 58%, transparent 78%);
  filter:blur(6px); mix-blend-mode:plus-lighter; transform:translateX(-130%); }
.plk--static .plk-sweep{ display:none; }

/* ---- emblem ---- */
.plk-line{ stroke:#2D7FF9; stroke-width:5.5; stroke-linecap:round; fill:none;
  filter:drop-shadow(0 6px 16px rgba(45,127,249,.25)); }
.plk-line--b{ stroke:rgba(45,127,249,.32); stroke-width:3; filter:none; }
.plk-tick{ stroke:rgba(226,164,85,.85); stroke-width:3; stroke-linecap:round; }
.plk-gold{ stroke:#E2A455; stroke-width:6; stroke-linecap:round; fill:none;
  filter:drop-shadow(0 6px 18px rgba(226,164,85,.5)); }
.plk-ripple{ stroke:rgba(76,108,160,.13); stroke-width:1.2; fill:none; }
.plk-core{ fill:#E2A455; filter:drop-shadow(0 0 20px rgba(226,164,85,.85)); }
.plk-dot{ fill:#2D7FF9; }
.plk-dot--gold{ fill:#E2A455; filter:drop-shadow(0 0 12px rgba(226,164,85,.7)); }
.plk--static .plk-line,.plk--static .plk-gold,.plk--static .plk-link,
.plk--static .plk-ringline,.plk--static .plk-ringtick{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }

/* ---- structure (module constellation) ---- */
.plk-svg--net{ z-index:0; }
.plk-link{ stroke:rgba(45,127,249,.5); stroke-width:2; vector-effect:non-scaling-stroke; }
.plk-node{ position:absolute; z-index:1; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%;
  background:var(--raised,#EFF3F9); box-shadow:var(--nm-sm,0 10px 24px rgba(43,80,160,.16)), inset 0 1px 0 rgba(255,255,255,.8);
  display:grid; place-items:center; cursor:default; }
.plk-node__n{ font-family:var(--font-display,inherit); font-weight:800; font-size:15px; color:var(--accent-ink,#1D5FD0); letter-spacing:.02em; }
.plk-node--gold{ background:linear-gradient(160deg,#F4C476,#E2A455); box-shadow:0 14px 30px rgba(226,164,85,.45); }
.plk-node--gold .plk-node__n{ color:#fff; }
.plk-node__tip{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px); width:max-content; max-width:230px;
  font-size:12.5px; line-height:1.4; font-weight:600; color:var(--text,#1C2433); text-align:center;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.7);
  padding:8px 12px; border-radius:12px; box-shadow:0 14px 34px rgba(43,80,160,.18);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
.plk-node:hover .plk-node__tip,.plk-node:focus .plk-node__tip{ opacity:1; transform:translateX(-50%) translateY(0); }
.pl-hero--kit-structure .plk{ aspect-ratio:1.12/1; }

/* ---- person (real photo) ---- */
.pl-hero--kit-person .plk{ aspect-ratio:1/1.04; max-height:580px; }
.plk-svg--ring{ z-index:0; }
.plk-ringline{ stroke:rgba(226,164,85,.55); stroke-width:1.6; fill:none; }
.plk-ringtick{ stroke:rgba(226,164,85,.8); stroke-width:2.4; stroke-linecap:round; }
.pl-hero--kit-person .pl-hero__visual::before{
  background:radial-gradient(54% 50% at 52% 56%, rgba(255,206,140,.34), rgba(45,127,249,.12) 58%, transparent 75%); }
.plk-portrait{ position:absolute; left:50%; bottom:4%; transform:translateX(-50%); height:86%; width:auto; z-index:1;
  filter:drop-shadow(0 28px 50px rgba(43,80,160,.28)); }
.plk-person-chip{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); z-index:2; width:max-content; max-width:92%;
  display:flex; flex-direction:column; gap:1px; text-align:center;
  background:rgba(255,255,255,.88); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.7);
  padding:10px 22px; border-radius:16px; box-shadow:0 18px 40px rgba(43,80,160,.20); }
.plk-person-chip b{ font-family:var(--font-display,inherit); font-weight:800; font-size:15px; color:var(--text,#1C2433); }
.plk-person-chip span{ font-size:12px; color:var(--text-2,#5B6578); }

/* fit the whole first screen into the viewport - tighten the kit hero */
.pl-hero--kit{ padding-top:clamp(86px,10vh,112px); padding-bottom:clamp(12px,2.4vh,28px); }
/* text always sits ABOVE the glass scene; the scene can bleed left without covering the headline */
.pl-hero--kit .pl-hero__text{ position:relative; z-index:5; }
.pl-hero--kit .pl-hero__visual{ z-index:1; }
.pl-hero--kit .pl-back{ margin-bottom:13px; }
.pl-hero--kit .pl-hero__title{ font-size:clamp(1.9rem,1rem + 2.6vw,3.3rem); margin-top:12px; line-height:1.0; }
.pl-hero--kit .pl-hero__lead{ margin-top:13px; font-size:clamp(.98rem,.95vw,1.08rem); line-height:1.54; }
.pl-hero--kit .pl-hero__meta{ margin-top:16px; gap:9px; }
.pl-hero--kit .cr-pricefrom{ margin-top:13px; }
.pl-hero--kit .pl-hero__cta{ margin-top:18px; }

/* ---- scene (cohesive glass objects, no panel, dissolved into soft cloud, floating) ---- */
.pl-hero--kit-scene .plk{ aspect-ratio:1.3/1; max-height:520px; overflow:visible; }
.pl-hero--kit-scene .pl-hero__visual::before{ inset:0;
  background:radial-gradient(56% 50% at 52% 46%, rgba(45,127,249,.16), transparent 72%); }
/* soft white cloud bed - dissolves panel edges and grounds the glass in haze */
.plk-clouds{ position:absolute; inset:-26%; z-index:0; pointer-events:none; transform:translateY(-2%);
  background:
    radial-gradient(40% 36% at 40% 40%, rgba(255,255,255,.92), transparent 70%),
    radial-gradient(44% 40% at 66% 52%, rgba(255,255,255,.88), transparent 72%),
    radial-gradient(40% 36% at 60% 80%, rgba(255,255,255,.94), transparent 72%),
    radial-gradient(38% 34% at 82% 74%, rgba(255,255,255,.9), transparent 72%),
    radial-gradient(32% 30% at 72% 30%, rgba(246,249,255,.85), transparent 70%),
    radial-gradient(30% 28% at 30% 66%, rgba(246,249,255,.82), transparent 70%);
  filter:blur(24px); }
.plk-scene{ position:absolute; inset:-12% -8%; z-index:1; transform:translateY(-2%); will-change:transform; }
.plk-scene img{ width:100%; height:100%; object-fit:contain; display:block;
  -webkit-mask-image:radial-gradient(78% 64% at 51% 50%, #000 56%, transparent 90%);
          mask-image:radial-gradient(78% 64% at 51% 50%, #000 56%, transparent 90%); }
/* foreground haze - softly melts the image rectangle edges into the page (objects only, no panel) */
.plk-fog{ position:absolute; inset:-4%; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(232,236,242,0) 18%),
    linear-gradient(to left, var(--bg) 1%, rgba(232,236,242,0) 12%); }
@media (max-width:760px){ .pl-hero--kit-scene .plk{ max-width:430px; margin:0 auto; } }

/* ---- cluster (separate glass parts floating over glass panels - Stitch look, alive) ---- */
.pl-hero--kit-cluster .plk{ aspect-ratio:1.2/1; max-height:560px; overflow:visible; }
.plk-panel{ position:absolute; z-index:1; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.72), rgba(232,238,248,.40));
  border:1px solid rgba(255,255,255,.85); border-radius:26px;
  box-shadow:0 30px 60px rgba(43,80,160,.16), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.plk-part{ position:absolute; pointer-events:none;
  transform:translate(calc(-50% + var(--px,0px)), calc(-50% + var(--py,0px)));
  transition:transform .55s cubic-bezier(.2,.7,.3,1); will-change:transform; }
.plk-part__img{ display:block; width:100%; height:auto; will-change:transform;
  filter:drop-shadow(0 20px 30px rgba(43,80,160,.22)) drop-shadow(0 5px 12px rgba(43,80,160,.14)); }
.plk--static .plk-part,.plk--static .plk-panel{ opacity:1; }

@media (max-width:760px){
  .pl-hero--kit-cluster .plk{ max-width:380px; margin:0 auto; max-height:360px; }
}

/* ---- object (floating 3D glass element with alpha) ---- */
.pl-hero--kit-object .plk{ aspect-ratio:1/1; max-height:580px; }
.plk-glow{ position:absolute; inset:6% 2% 10% 2%; border-radius:50%; pointer-events:none;
  background:radial-gradient(52% 50% at 50% 52%, rgba(255,202,130,.32), rgba(45,127,249,.14) 55%, transparent 74%);
  filter:blur(30px); animation:plkGlow 7s ease-in-out infinite; }
@keyframes plkGlow{ 0%,100%{ opacity:.85; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } }
.plk-obj{ position:absolute; inset:4% 6% 14% 6%; display:grid; place-items:center; }
.plk-obj img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 34px 54px rgba(43,80,160,.30)) drop-shadow(0 8px 18px rgba(43,80,160,.18)); }
/* premium floor: mirrored reflection fading out fast */
.plk-obj .plk-refl{ position:absolute; top:99%; left:0; transform:scaleY(-1); opacity:.15; filter:blur(3px) saturate(.9);
  -webkit-mask-image:linear-gradient(0deg, transparent 52%, #000 98%); mask-image:linear-gradient(0deg, transparent 52%, #000 98%); }
.plk-shadow{ position:absolute; left:50%; bottom:5%; transform:translateX(-50%); width:50%; height:22px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(43,80,160,.22), transparent 72%); filter:blur(6px); }
/* golden dust drifting up through the glow */
.plk-dust{ position:absolute; bottom:10%; width:4px; height:4px; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 35% 30%, #fff, #F0C27D 55%, rgba(226,164,85,.6));
  box-shadow:0 0 8px rgba(240,194,125,.8); animation:plkRise 8s linear infinite; }
@keyframes plkRise{
  0%{ transform:translateY(0) scale(.7); opacity:0; }
  12%{ opacity:.85; }
  70%{ opacity:.5; }
  100%{ transform:translateY(-330px) scale(1.1); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .plk-dust{ animation:none; display:none; } }
.plk-orb{ position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(120% 120% at 32% 26%, rgba(255,255,255,.95), rgba(214,228,255,.55) 38%, rgba(45,127,249,.25) 72%, rgba(45,127,249,.12));
  box-shadow:inset 0 -4px 10px rgba(45,127,249,.25), 0 10px 22px rgba(43,80,160,.18); }
.plk-orb--a{ width:46px; height:46px; left:6%; top:16%; }
.plk-orb--b{ width:26px; height:26px; right:4%; top:36%;
  background:radial-gradient(120% 120% at 32% 26%, #fff, rgba(255,222,168,.75) 40%, rgba(226,164,85,.45) 75%, rgba(226,164,85,.2)); /* gold twin */
  box-shadow:inset 0 -3px 8px rgba(226,164,85,.35), 0 8px 18px rgba(226,164,85,.22); }
.plk-orb--c{ width:18px; height:18px; left:16%; bottom:14%; }

/* ---- material (premium studio glass render, full-bleed right) ---- */
.pl-hero--kit-material{ min-height:clamp(560px,82vh,800px); display:flex; align-items:center; }
.pl-hero--kit-material .wrap{ position:relative; z-index:3; width:100%; }
.pl-hero--kit-material .pl-hero__in{ grid-template-columns:1fr; }
.pl-hero--kit-material .pl-hero__visual{ display:none; }
.pl-hero--kit-material .pl-hero__text{ max-width:600px; }
.pl-hero--kit-material .pl-hero__lead{ max-width:520px; }
.pl-hero--kit-material .plk{ position:absolute; inset:0 0 0 auto; width:62%; max-height:none; aspect-ratio:auto;
  transform:none; transition:none; z-index:1; overflow:hidden; pointer-events:none; }
.plk-mat{ position:absolute; inset:-2.5%; transform:translate(var(--kx,0), var(--ky,0));
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
  -webkit-mask-image:linear-gradient(100deg, transparent 0 10%, #000 40%);
          mask-image:linear-gradient(100deg, transparent 0 10%, #000 40%); }
.plk-mat img{ width:100%; height:100%; object-fit:cover; object-position:58% 45%; display:block; will-change:transform; }
.pl-hero--kit-material .plk-sweep{ z-index:2; }
/* readability scrim over the feathered edge */
.pl-hero--kit-material::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(97deg, var(--bg,#E8ECF2) 30%, rgba(232,236,242,.34) 46%, transparent 58%); }

@media (max-width:960px){
  .pl-hero--kit-material .plk{ width:74%; }
  .pl-hero--kit-material .pl-hero__text{ max-width:540px; }
}
@media (max-width:760px){
  .plk{ max-width:340px; margin:0 auto; max-height:380px; }
  .plk-node{ width:42px; height:42px; }
  .plk-node__n{ font-size:12.5px; }
  .plk-node__tip{ display:none; }
  .pl-hero--kit-person .plk{ max-height:420px; }
  .plk-person-chip{ padding:8px 16px; }
  .pl-hero--kit-material{ min-height:auto; }
  .pl-hero--kit-material .plk{ width:100%; max-width:none; margin:0; opacity:.5; }
  .plk-mat{ -webkit-mask-image:linear-gradient(185deg, transparent 0 8%, #000 52%); mask-image:linear-gradient(185deg, transparent 0 8%, #000 52%); }
  .pl-hero--kit-material::before{ background:linear-gradient(180deg, rgba(232,236,242,.62), rgba(232,236,242,.86)); }
  .pl-hero--kit-material .pl-hero__text{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .plk{ transform:none; transition:none; }
  .plk-sweep{ display:none; }
}

/* ============================================================
   FULL-BLEED HERO (course.html only) - one studio image per
   program covers the whole first screen, text overlaid on the
   left. Scoped to .pl-hero--full so program.html (school hubs)
   keep the classic two-column hero.
   ============================================================ */
.pl-hero--full{ min-height:min(56svh,520px); display:flex; align-items:center; padding:clamp(165px,17vh,188px) 0 clamp(6px,1vh,14px); background:var(--bg); }
/* секция сразу после full-hero курса прижата к hero - убираем лишнюю пустую полосу до заголовка */
.pl-hero--full + .sec{ padding-top:clamp(8px,1.5vh,18px); }
/* hero social-proof note (как на странице курса) - наполняет hero, чтобы контент не "висел" */
.pl-hero--full .cr-hero-note{ display:inline-flex; align-items:center; gap:9px; margin:18px 0 0; font-size:14px; font-weight:600; color:var(--text-2); }
.pl-hero--full .cr-hero-note svg{ flex:none; color:var(--accent-ink); }
.pl-hero--full .pl-hero__bg{ position:absolute; inset:0; z-index:0; background:linear-gradient(150deg,#EEF3FB,#E2E8F2); }
/* The asset is shown honestly as a full-bleed scene: no oval mask, no fog overlay.
   Those tricks half-erased the asset's own baked background (smudgy "shadows") and
   left a tonal seam at the section edge. object-position keeps the subject (which
   sits right-of-centre in every hero asset) in the right half, clear of the text. */
.pl-hero--full .pl-hero__bg img{ position:absolute; top:50%; right:0; transform:translateY(-50%); width:100%; height:108%;
  object-fit:cover; object-position:40% 42%; display:block; opacity:0; transition:opacity .6s var(--e-out); }
.pl-hero--full.is-ready .pl-hero__bg img{ opacity:1; }
/* Two asset ratios share this hero. The school hero (#pHeroBg, program.html) is 4:3 (1100×825),
   for which the 108% height above frames well. The course & catalog heroes (#cHeroBg on
   course.html / programs.html) are 16:9 studio scenes (3840×2143) - there the 108% zoom over-
   crops and clips the metaphor object's right edge (client 07.07, PR-028). Fit the wide assets
   to the full scene so the object sits complete on its podium, subject still right-of-centre. */
#cHeroBg{ height:100%; object-position:50% 50%; }
/* Per-program nudge mechanism: a 16:9 asset whose baked object placement fights the default
   crop can get an individual override here, e.g.
     @media (min-width:761px){ [data-prog="PR-XXX"] #cHeroBg{ height:116%; object-position:6% 46%; } }
   data-prog is set on <html> by course.js. Desktop only (≥761) - mobile keeps the faint
   72% 30% backdrop from the @media below. The PR-028 nudge (07.07) was retired 21.07:
   the asset was regenerated with the object placed per canon, the old override clipped it. */
.pl-hero--full.is-fallback .pl-hero__bg{ background:radial-gradient(70% 80% at 76% 45%, var(--accent-soft), var(--bg) 72%); }
/* readability scrim: bright on the left (under the text) → clear on the right (the subject) */
.pl-hero--full .pl-hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(96deg, rgba(232,236,242,.96) 0%, rgba(232,236,242,.86) 30%, rgba(232,236,242,.45) 54%, rgba(232,236,242,0) 72%); }
/* Bottom fade: tall + many-stop so the image's darker/lighter floor melts to the page tone
   over a long ramp - no perceptible band - and lands on SOLID var(--bg) before the section edge. */
.pl-hero--full .pl-hero__fade{ position:absolute; left:0; right:0; bottom:0; height:clamp(300px,42vh,520px); z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(232,236,242,0) 0%, rgba(232,236,242,.28) 34%, rgba(232,236,242,.62) 60%, rgba(232,236,242,.9) 82%, var(--bg) 96%, var(--bg) 100%); }
.pl-hero--full .wrap{ position:relative; z-index:2; }
.pl-hero--full .pl-back{ position:relative; z-index:2; margin-bottom:16px; }
/* widen the text column so the headline uses the free width on the left before the object instead of breaking early */
.pl-hero--full .pl-hero__text{ max-width:clamp(600px,60vw,880px); }
/* размер подобран так, чтобы самая длинная смысловая строка названия (напр. "Обучение
   фундаментальному коучингу") умещалась в одну строку рядом с переносом формата */
.pl-hero--full .pl-hero__title{ font-size:clamp(1.95rem,0.75rem + 3.1vw,2.85rem); line-height:1.08; margin-top:16px; }
.pl-hero--full .pl-hero__sub{ margin:16px 0 0; max-width:540px; color:var(--text-2); font-weight:600; font-size:clamp(1.04rem,1.05vw,1.18rem); line-height:1.55; }
.pl-hero--full .pl-hero__meta{ margin-top:20px; }
.pl-hero--full .cr-pricefrom{ margin-top:20px; }
.pl-hero--full .cr-pricefrom b{ font-size:2rem; }
.pl-hero--full .pl-hero__cta{ margin-top:24px; }
/* low-height laptops: compress so the whole first screen fits without scroll */
@media (min-width:761px) and (max-height:860px){
  .pl-hero--full{ padding-top:132px; padding-bottom:14px; }
  .pl-hero--full .pl-back{ margin-bottom:10px; }
  .pl-hero--full .pl-hero__title{ font-size:clamp(1.6rem,2.7vw,2.55rem); line-height:1.03; margin-top:11px; }
  .pl-hero--full .pl-hero__sub{ margin-top:10px; font-size:1rem; line-height:1.42; }
  .pl-hero--full .pl-hero__meta{ margin-top:14px; gap:8px; }
  .pl-hero--full .cr-pricefrom{ margin-top:13px; }
  .pl-hero--full .cr-pricefrom b{ font-size:1.7rem; }
  .pl-hero--full .pl-hero__cta{ margin-top:16px; }
  .pl-hero--full .pl-hero__eyebrow{ font-size:12px; }
}
@media (max-width:760px){
  .pl-hero--full{ min-height:auto; padding:clamp(96px,15vh,124px) 0 44px; }
  .pl-hero--full .pl-hero__bg img{ object-position:72% 30%; }
  #cHeroBg{ object-position:72% 30%; }   /* keep the mobile framing for the 16:9 course/catalog hero (id beats the class rule above) */
  .pl-hero--full .pl-hero__scrim{ background:linear-gradient(180deg, rgba(238,241,246,.42) 0%, rgba(238,241,246,.8) 42%, rgba(238,241,246,.97) 74%); }
  .pl-hero--full .pl-hero__text, .pl-hero--full .pl-hero__sub{ max-width:none; }
  .pl-hero--full .cr-pricefrom b{ font-size:1.75rem; }
}

/* ============================================================
   PROGRAM LANDING (course.html, .pl-hero--course): заполняем первый
   экран ВОЗДУХОМ МЕЖДУ ЭЛЕМЕНТАМИ (не центрированной пустотой),
   top-выравнивание = стабильный отступ под шапкой на всех вьюпортах.
   Хабы школ (#pHero) и каталог (programs.html) — тоже full-screen
   через .pl-hero--course + .pl-hero--fill (см. ниже): у них меньше
   контента, поэтому верхний кластер прижат к верху, а последний
   элемент (trust-нота / промо-карусель) прижат к низу через
   margin-top:auto — экран заполняется без воздуха на любой высоте.
   ============================================================ */
.pl-hero--course{ min-height:100svh; align-items:flex-start; padding-top:clamp(140px,15.5vh,168px); padding-bottom:clamp(44px,6vh,72px); }
.pl-hero--course .pl-back{ margin-bottom:clamp(22px,3.4vh,36px); }
.pl-hero--course .pl-hero__title{ margin-top:clamp(20px,3vh,30px); }
.pl-hero--course .pl-hero__sub{ margin-top:clamp(18px,2.6vh,28px); }
.pl-hero--course .pl-hero__meta{ margin-top:clamp(26px,3.6vh,42px); }
.pl-hero--course .cr-pricefrom{ margin-top:clamp(26px,3.6vh,42px); }
.pl-hero--course .pl-hero__cta{ margin-top:clamp(34px,4.8vh,54px); }
.pl-hero--course .cr-herodates{ margin-top:clamp(40px,5.6vh,62px); }
/* Карусель акций и пилюля второго формата на первом экране программы (31.07).
   flex:none обязателен: базовый .promo{flex:1} внутри flex-колонки .pl-hero__text
   растянул бы карусель на весь остаток высоты 100svh-экрана. */
.pl-hero--course .promo{ flex:none; max-width:520px; margin-top:clamp(28px,4vh,40px); }
/* The program-page carousel has no campaign heading. On desktop the shared
   154px card minimum left an empty lower half, so let content define height.
   Mobile already uses its own compact grid in style.css. */
@media (min-width:681px){
  .pl-hero--course .promo--nocap .promo__card{
    min-height:0;
    padding-top:18px;
    padding-bottom:18px;
  }
}
.pl-hero--course .cr-alt{ margin-top:clamp(18px,2.6vh,26px); }
@media (max-width:760px){
  .pl-hero--course .promo{ margin-top:22px; }
  .pl-hero--course{ min-height:auto; align-items:stretch; padding-top:clamp(96px,15vh,124px); padding-bottom:44px; }
  .pl-hero--course .pl-hero__cta{ margin-top:24px; }
  .pl-hero--course .cr-herodates{ margin-top:28px; }
}
/* ------------------------------------------------------------
   Мобильный первый экран лендинга программы: цена, кнопки и даты над сгибом.
   82% рекламного трафика — смартфоны (Метрика 22-29.07), а на 390x844 первая
   кнопка «Записаться» стояла на y=906: человек с рекламы видел заголовок,
   абзац и cookie-плашку, без цены и без действия (отказы 55%, глубина 1,03).
   Меняем ПОРЯДОК блоков, контент весь на месте: чипы-мета и длинный лид
   уезжают под цену/CTA/даты. Якорь html[data-prog] ставит course.js только на
   странице программы, поэтому хабы школ и каталог (тот же .pl-hero--course)
   не затронуты. Порядок детей .pl-hero__text фиксированный (12 элементов),
   элементов без order здесь нет — иначе order:0 выбросил бы их наверх.
   ------------------------------------------------------------ */
@media (max-width:600px){
  html[data-prog] .pl-hero--course .pl-hero__text{ display:flex; flex-direction:column; }
  html[data-prog] .pl-hero--course .pl-hero__eyebrow{ order:1; }
  html[data-prog] .pl-hero--course .pl-hero__title{ order:2; font-size:clamp(1.75rem,1rem + 3.2vw,2.2rem); line-height:1.06; margin-top:14px; }
  html[data-prog] .pl-hero--course .pl-hero__sub{ order:3; margin-top:12px; }
  html[data-prog] .pl-hero--course .cr-pricefrom{ order:4; margin-top:16px; }
  html[data-prog] .pl-hero--course .pl-hero__cta{ order:5; margin-top:18px; }
  /* Даты ВЫШЕ карусели акций: на 360x780 акция между кнопками и датами уводила
     чипы потоков за сгиб (замер 31.07: даты 785 при экране 780), а решение
     «цена, кнопки и даты над сгибом» принято под 82% мобильного трафика. */
  html[data-prog] .pl-hero--course .cr-herodates{ order:6; margin-top:18px; }
  html[data-prog] .pl-hero--course .promo{ order:7; margin-top:18px; }
  html[data-prog] .pl-hero--course .pl-hero__meta{ order:8; margin-top:20px; }
  html[data-prog] .pl-hero--course .pl-hero__lead{ order:9; }
  html[data-prog] .pl-hero--course .cr-guide{ order:10; }
  html[data-prog] .pl-hero--course .cr-alt{ order:11; }
  html[data-prog] .pl-hero--course .cr-hero-note{ order:12; }
  html[data-prog] .pl-hero--course{ padding-top:clamp(84px,12vh,104px); }
  html[data-prog] .pl-hero--course .pl-back{ margin-bottom:clamp(14px,2.4vh,22px); }
}

/* ------------------------------------------------------------
   .pl-hero--fill (только каталог #cHero на programs.html, НЕ лендинги
   программ и НЕ хабы школ): меньше контента -> распределяем по высоте.
   Верхний кластер держится у верха (flex-start из pl-hero--course),
   последний элемент (промо-карусель) прижимается к низу margin-top:auto.
   На мобиле pl-hero--course = min-height:auto, поэтому pin безвредно схлопывается.
   Хабы школ (#pHero) намеренно БЕЗ --fill: рендерятся 1-в-1 как course.html
   (full-screen 100svh, контент у верха, trust-линия сразу под CTA).
   ------------------------------------------------------------ */
.pl-hero--fill{ align-items:stretch; }
.pl-hero--fill .wrap{ display:flex; flex-direction:column; }
.pl-hero--fill .pl-hero__text{ display:flex; flex-direction:column; flex:1 1 auto; }
.pl-hero--fill .evp{ margin-top:auto; }            /* каталог: промо-карусель к низу */

/* ============================================================
   ЛЕНТА «ТРЕНИНГ ПО ВАШЕМУ ЗАПРОСУ» (.pl-custom--hero / .cst)
   Живёт ВНУТРИ первого экрана: слой поверх «воздуха» внизу hero
   на хабах школ (program.html) и лендингах курсов (course.html).
   Прижим к низу: .pl-hero--band растягивает .wrap на всю высоту
   hero (flex-колонка), лента получает margin-top:auto - при
   нехватке места hero просто растёт, наложение на контент
   исключено (урок A·52: текст-блок при этом НЕ растягиваем).
   Каталог programs.html (--fill) ленты не имеет - --band туда
   не вешать. CTA открывает единую форму-заявку с видимым полем
   «Опишите задачу» (data-lead-ask, логика в landings.js,
   стиль поля в style.css .field--area).
   ============================================================ */
.pl-hero--band{ flex-direction:column; align-items:stretch; overflow:visible; z-index:2;
  padding-bottom:0; margin-bottom:clamp(96px,11vh,120px); }
.pl-hero--band > .wrap{ flex:1 1 auto; }   /* контент занимает высоту, лента уходит к низу */
/* отрицательный нижний margin РЕАЛЬНО выдвигает ленту за кромку hero (на 72px) - лента
   седлает границу секций и перекрывает линию стыка фона. Запас под выступ даёт
   margin-bottom самого hero (см. выше), чужие секции не трогаем. Лента - прямой ребёнок
   hero (вне .wrap), поэтому плашка тянется на всю ширину экрана без 100vw-хаков,
   а содержимое возвращает в сетку внутренний .wrap (.cst__in). */
.pl-custom--hero{ position:relative; z-index:2; margin-bottom:-72px; padding-top:clamp(28px,4.2vh,48px); }
/* мягкий «фартук» ниже кромки hero: растворяет остаток линии стыка слева/справа от ленты */
.pl-hero--band::after{ content:''; position:absolute; left:0; right:0; bottom:-88px; height:88px;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(232,236,242,.55) 45%, rgba(232,236,242,0) 100%);
  pointer-events:none; }
.cst{ position:relative; padding:clamp(24px,3.4vw,36px) 0;
  background:var(--raised); border-radius:0; box-shadow:var(--nm-lg);
  overflow:hidden; isolation:isolate; }
.cst__in{ display:flex; align-items:center; gap:clamp(20px,3vw,36px); }
/* поверх фонового изображения hero панель читается «стеклом» */
.pl-custom--hero .cst{ background:rgba(236,239,244,.58);
  -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15); }
/* мягкая «аврора» внутри панели: медленный дрейф в канон синего акцента.
   overflow:hidden на .cst - блобы наружу не выходят (урок about: без гор. скролла) */
.cst::before{ content:''; position:absolute; inset:-45% -25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 58% at 16% 32%, rgba(45,127,249,.14), transparent 70%),
    radial-gradient(34% 50% at 86% 72%, rgba(30,111,255,.10), transparent 72%),
    radial-gradient(28% 44% at 62% 8%, rgba(255,255,255,.85), transparent 70%);
  filter:blur(26px); animation:cstDrift 16s ease-in-out infinite alternate; }
@keyframes cstDrift{
  from{ transform:translate3d(-2%,0,0) rotate(-1.5deg) scale(1); }
  to{ transform:translate3d(2.5%,1.5%,0) rotate(2deg) scale(1.08); } }
/* тонкий «стеклянный» кант по периметру панели */
.cst::after{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.5px;
  background:linear-gradient(115deg, rgba(45,127,249,.5), rgba(255,255,255,.95) 42%, rgba(45,127,249,.22) 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; opacity:.55; pointer-events:none; }
/* периодический «блик» стекла: узкая световая полоса раз в ~6с проходит по панели */
.cst__sheen{ position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden; pointer-events:none; }
.cst__sheen::before{ content:''; position:absolute; top:-60%; bottom:-60%; left:0; width:26%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38) 50%, transparent);
  transform:skewX(-16deg) translateX(-190%); animation:cstSheen 6.2s ease-in-out infinite; }
@keyframes cstSheen{
  0%{ transform:skewX(-16deg) translateX(-190%); }
  44%{ transform:skewX(-16deg) translateX(580%); }
  100%{ transform:skewX(-16deg) translateX(580%); } }
.cst__ic{ flex:none; display:grid; place-content:center; width:76px; height:76px; border-radius:50%;
  background:var(--bg); box-shadow:var(--nm-sm); color:var(--accent-ink);
  animation:cstFloat 5.2s ease-in-out infinite; }
@keyframes cstFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.cst__txt{ flex:1 1 auto; min-width:0; }
.cst__eyebrow{ display:inline-flex; align-items:center; gap:8px; font:600 11.5px/1 var(--font-body);
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.cst__eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--live);
  animation:cstPulse 2.6s ease-out infinite; }
@keyframes cstPulse{
  0%{ box-shadow:0 0 0 0 rgba(52,199,89,.45); }
  70%{ box-shadow:0 0 0 9px rgba(52,199,89,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,199,89,0); } }
.cst__title{ margin:9px 0 7px; font:800 clamp(22px,2.7vw,33px)/1.14 var(--font-display);
  color:var(--text); letter-spacing:-.01em; }
.cst__title em{ font-style:normal; color:var(--accent-ink); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cst__title em{ background:linear-gradient(90deg, var(--accent), var(--accent-h));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } }
.cst__sub{ margin:0; font-size:15.5px; line-height:1.55; color:var(--text-2); max-width:58ch; }
.cst__cta{ flex:none; display:flex; flex-direction:column; align-items:center; gap:10px; }
.cst__note{ font-size:12.5px; font-weight:600; color:var(--text-3); }
@media (max-width:880px){
  .cst__in{ flex-direction:column; align-items:center; text-align:center; }
  .cst__sub{ margin-inline:auto; }
  .cst__cta{ width:100%; max-width:360px; margin-inline:auto; }
  .cst__cta .btn{ width:100%; justify-content:center; } }
@media (max-width:680px){
  .pl-custom--hero{ padding-top:24px; }
  .cst{ padding:26px 0; }
  .cst__ic{ width:64px; height:64px; } }
@media (prefers-reduced-motion:reduce){
  .cst::before, .cst__eyebrow::before, .cst__sheen::before, .cst__ic{ animation:none; } }
/* ЛЕНТА В НИЗУ РАЗДЕЛА КУРСОВ (перенос из hero, client 07.07): контейнерная скруглённая
   панель внутри .wrap школы - не стекло-на-hero, а сплошной неоморф-блок. */
.pl-custom--band{ margin-top:clamp(30px,4vh,50px); }
.pl-custom--band .cst{ border-radius:26px; padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,40px); }

/* ============ БЫСТРЫЙ ПЕРЕХОД К ГАЙДУ С ПЕРВОГО ЭКРАНА ============
   Пилюля под кнопками hero: клиент видит бесплатный гайд сразу и попадает
   к форме одним кликом, не прокручивая лендинг. Появляется только у программ,
   которым назначен гайд (реестр GUIDES в course.js). */
.cr-guide{ position:relative; display:inline-flex; align-items:center; gap:14px; margin:20px 0 0; padding:11px 16px 11px 11px;
  background:var(--raised); border-radius:var(--pill); box-shadow:var(--nm-sm); text-decoration:none; color:inherit;
  overflow:hidden; max-width:100%; transition:transform .28s var(--e-out), box-shadow .28s var(--e-out); }
.cr-guide[hidden]{ display:none; } /* display:inline-flex перебивает UA [hidden] - без этого пилюля-заглушка видна у программ без гайда */
.cr-guide:hover{ transform:translateY(-3px); box-shadow:var(--nm); }
.cr-guide:active{ transform:translateY(0); }
.cr-guide__ico{ flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,var(--accent),var(--accent-h)); box-shadow:0 8px 18px rgba(45,127,249,.4); }
.cr-guide__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.cr-guide__k{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); }
.cr-guide__t{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-guide__go{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color:var(--accent-ink); background:var(--accent-soft); animation:crGuideBob 2.6s ease-in-out infinite; }
.cr-guide:hover .cr-guide__go{ color:#fff; background:var(--accent); }
@keyframes crGuideBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
/* блик пробегает раз в 6 секунд: заметно, но не мельтешит */
.cr-guide::after{ content:''; position:absolute; top:0; bottom:0; left:-45%; width:36%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent); transform:skewX(-18deg);
  animation:crGuideShine 6s ease-in-out infinite; }
@keyframes crGuideShine{ 0%,74%{ left:-45%; } 90%,100%{ left:125%; } }
@media (prefers-reduced-motion:reduce){ .cr-guide__go{ animation:none; } .cr-guide::after{ display:none; } }
/* Пилюля «второй формат программы» (онлайн ↔ офлайн). Тот же язык, что у пилюли
   гайда, но спокойнее: это навигация, а не оффер - без блика и без подпрыгивания.
   ⛔ Парное правило [hidden] обязательно: display:inline-flex перебивает
   атрибут hidden, и у программ без второго формата висела бы заглушка (A·262). */
.cr-alt{ position:relative; display:inline-flex; align-items:center; gap:13px; margin:20px 0 0; padding:10px 15px 10px 10px;
  background:var(--raised); border-radius:var(--pill); box-shadow:var(--nm-sm); text-decoration:none; color:inherit;
  max-width:100%; transition:transform .28s var(--e-out), box-shadow .28s var(--e-out); }
.cr-alt[hidden]{ display:none; }
.cr-alt:hover{ transform:translateY(-3px); box-shadow:var(--nm); }
.cr-alt:active{ transform:translateY(0); }
.cr-alt__ico{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--accent-ink);
  background:var(--accent-soft); }
.cr-alt__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.cr-alt__k{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.cr-alt__t{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-alt__go{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  color:var(--accent-ink); background:transparent; transition:color .2s, background .2s; }
.cr-alt:hover .cr-alt__go{ color:#fff; background:var(--accent); }
@media (max-width:560px){
  .cr-alt{ width:100%; margin-top:14px; padding:9px 12px 9px 9px; gap:10px; }
  .cr-alt__ico{ width:34px; height:34px; }
  .cr-alt__t{ font-size:14px; white-space:normal; }
  .cr-alt__go{ margin-left:auto; }
}
@media (max-width:560px){
  .cr-guide{ width:100%; margin-top:14px; padding:10px 13px 10px 10px; gap:11px; }
  .cr-guide__ico{ width:38px; height:38px; }
  .cr-guide__t{ font-size:14px; }
  /* на всю ширину стрелка уходит к правому краю - иначе висит в середине строки */
  .cr-guide__go{ margin-left:auto; }
}