/* Набор «язык J» для лендингов и шапки Методики (ТЗ docs/platform/ki-ri/tasks/2026-10-22-landing-unify.md, решение B).
   У Методики копии platform-ui нет (подключение через sync.py — отдельная архитектурная задача), поэтому нужные правила повторены
   здесь ОДИН В ОДИН из platform-ui/src/static/platform.css; совпадение сторожит diag/tests/test_platform_j_css.py: каждое правило
   до маркера «СВОЁ МЕТОДИКИ» обязано быть в platform.css дословно, токены — совпадать по значению. Новых hex нет.
   Подключается из _nav.html на каждой странице с общей шапкой (кабинет /app тоже), на лендингах — ещё и из <head> (обои не мигают до загрузки
   стилей), на /admin — из base.html. Поэтому здесь только классы pf-*, токены и правила body.pf-wall: правила, задевающие кабинет, сюда не
   добавлять. Анкеты и отчёты (PDF) этого файла не используют. Внешних ресурсов нет. */
/* ===== токены (значения как в :root platform.css; --warn и прочие токены Методики не трогаем) ===== */
:root{--g:#0b6e4f;--gl:#eef4f0;--ink:#18231f;--mut:#5b6b64;--bg:#f6f9f7;--pf-gap-hero:56px;
  --ink-2:#3e4b45;--pf-danger:#c0392b;--pf-amber:#b45309;
  --c-metodika:#2f6feb;--c-work:#4f46e5;--c-psy:#0e7490;--c-tools:#566476;
  --mat-thin:#fff;--mat-regular:#fff;--mat-thick:#fff;--edge:rgba(255,255,255,.7);--hair:rgba(24,35,31,.08);
  --wall:#eef1ee;--r-l:28px;--r-m:18px;--r-s:12px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--mat-thin:rgba(255,255,255,.55);--mat-regular:rgba(255,255,255,.72);--mat-thick:rgba(255,255,255,.86)}
}
@media (prefers-reduced-transparency:reduce){
  :root{--mat-thin:#fff;--mat-regular:#fff;--mat-thick:#fff}
}
@media (max-width:720px){:root{--pf-gap-hero:40px}}
/* ===== правила platform.css (дословно) ===== */
html[data-svc="methodika"]{--g:#2f6feb;--gl:#eef3fd}
.pf-c-metodika{--c:var(--c-metodika)}
body.pf-wall{background:var(--wall);position:relative}
.pf-ico-defs{position:absolute;width:0;height:0;overflow:hidden}
.pf-wallpaper{display:none}
body.pf-wall .pf-wallpaper{display:block;position:absolute;top:0;left:0;width:100%;height:420px;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 90%);mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 90%)}
.pf-wall-svg{width:100%;height:100%;display:block}
.pf-wall-svg .w-dom{display:none;fill:var(--c,var(--g));opacity:.45}
.pf-wall-svg .w-metodika{fill:#5f7fd1;opacity:.26}
.pf-wall-svg .w-work{fill:#8480c4;opacity:.26}
.pf-wall-svg .w-psy{fill:#3f8fa0;opacity:.26}
.pf-wall-svg .w-tools{fill:#566476;opacity:.24}
.pf-wall-svg .w-brand{fill:#0b6e4f;opacity:.26}
body.pf-wall[class*="pf-c-"] .pf-wall-svg .w-dom,body.pf-wall-soft[class*="pf-c-"] .pf-wall-svg .w-dom{display:inline}
body.pf-wall[class*="pf-c-"] .pf-wall-svg [class^="w-"]:not(.w-dom):not(.w-brand),body.pf-wall-soft[class*="pf-c-"] .pf-wall-svg [class^="w-"]:not(.w-dom):not(.w-brand){opacity:.14}
body.pf-wall[class*="pf-c-"] .pf-wall-svg .w-brand,body.pf-wall-soft[class*="pf-c-"] .pf-wall-svg .w-brand{opacity:.2}
body.pf-c-metodika .pf-wall-svg .w-metodika,body.pf-c-work .pf-wall-svg .w-work,body.pf-c-psy .pf-wall-svg .w-psy,body.pf-c-tools .pf-wall-svg .w-tools{display:none}
@media (max-width:720px){body.pf-wall .pf-wallpaper{height:360px}}
body.pf-wall-soft{background:var(--bg);position:relative}
body.pf-wall-soft .pf-wallpaper{display:block;position:absolute;top:0;left:0;width:100%;height:280px;opacity:.4;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 90%);mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 90%)}
@media (max-width:720px){body.pf-wall-soft .pf-wallpaper{height:220px}}
@media (prefers-reduced-transparency:reduce){body.pf-wall .pf-wallpaper,body.pf-wall-soft .pf-wallpaper{display:none}}
.pf-mat{border-radius:var(--r-l);background:#fff;background:var(--mat-thin);box-shadow:inset 0 1px 0 var(--edge)}
.pf-thick{background:#fff;background:var(--mat-thick)}
.pf-icon{position:relative;display:grid;place-items:center;flex:none;width:60px;height:60px;color:#fff}
.pf-icon::before,.pf-icon::after{content:'';position:absolute;inset:0;-webkit-clip-path:url(#squircle);clip-path:url(#squircle)}
.pf-icon::before{background:var(--c,var(--g));opacity:.25;filter:blur(6px);transform:translateY(6px)}
.pf-icon::after{background:var(--c,var(--g));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.pf-icon svg{position:relative;z-index:1;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pf-icon.s{width:40px;height:40px}
.pf-icon.s::before{filter:blur(4px);transform:translateY(3px)}
.pf-icon.s svg{width:22px;height:22px}
@supports (background:color-mix(in srgb,red 50%,white)){
  .pf-icon::after{background:radial-gradient(130% 70% at 50% -18%,rgba(255,255,255,.65),transparent 55%),linear-gradient(180deg,color-mix(in srgb,var(--c,var(--g)) 58%,#fff),var(--c,var(--g)))}
  .pf-icon.locked::after{background:color-mix(in srgb,var(--c,var(--g)) 14%,#fff)}
}
.pf-icon.locked{color:var(--c,var(--g))}
.pf-icon.locked::before{opacity:.16}
.pf-icon.locked::after{background:rgba(255,255,255,.92);box-shadow:none}
.pf-icon .pf-lockbadge{position:absolute;right:-5px;bottom:-5px;z-index:2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--c,var(--g));color:#fff;box-shadow:0 0 0 2px #fff}
.pf-icon .pf-lockbadge svg{width:11px;height:11px;stroke-width:2.1}
.pf-cap{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 'Onest',sans-serif;border:0;cursor:pointer;
  color:#fff;background:var(--c,var(--g));padding:10px 18px;border-radius:999px;white-space:nowrap;text-align:center;transition:transform .12s ease-out,filter .12s}
.pf-cap:hover{filter:brightness(1.07)}
.pf-cap:active{transform:scale(.96)}
.pf-cap:disabled,.pf-cap[aria-disabled="true"]{opacity:.5;cursor:default;transform:none;filter:none}
.pf-cap.ghost{color:var(--ink);background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),inset 0 0 0 1px var(--hair)}
.pf-cap.danger{color:var(--pf-danger);background:#fff;background:var(--mat-thick);box-shadow:inset 0 0 0 1px rgba(192,57,43,.25)}
.pf-cap.sm{font-size:14px;padding:7px 14px}
.pf-cap.lg{font-size:17px;padding:14px 24px}
.pf-badge{display:inline-block;font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap;color:var(--mut);background:rgba(24,35,31,.06)}
.pf-badge.ok{color:#0b6e4f;background:#d9efe6}
.pf-badge.warn{color:var(--pf-amber);background:#fbebd9}
.pf-alert{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-m);background:#fff4ea;box-shadow:inset 0 0 0 1px rgba(180,83,9,.2);margin-bottom:16px}
.pf-alert b{display:block}
.pf-alert p{color:var(--mut);font-size:15px;line-height:1.4}
.pf-gl{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;color:var(--c,var(--g));background:#eef4f0}
.pf-gl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pf-alert .pf-gl{color:var(--pf-amber);background:#fbebd9}
.pf-hero{padding-top:var(--pf-gap-hero);display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.pf-hero.art{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.pf-hero-main{max-width:760px}
.pf-hero-id{display:flex;align-items:center;gap:14px}
.pf-hero h1{font-size:64px;line-height:1.02;letter-spacing:-.04em;font-weight:800;margin:22px 0 14px}
.pf-hero-id .pf-badge,.hero-id .pf-badge{color:var(--ink-2);background:#fff;background:var(--mat-thick);box-shadow:inset 0 0 0 1px var(--hair)}
.pf-hero.art h1{font-size:56px}
.pf-hero .lead{font-size:19px;color:var(--ink-2)}
.pf-hero .lead.ink{color:var(--ink)}
.pf-hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.pf-hero-note{margin-top:12px;font-size:14px;color:var(--mut)}
.pf-hero-art{min-width:0}
.pf-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px;border-radius:var(--r-l);background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),0 1px 2px rgba(24,35,31,.04)}
.pf-steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pf-step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-content:start;padding:22px}
.pf-step+.pf-step{box-shadow:inset 1px 0 0 var(--hair)}
.pf-step-n{display:grid;place-items:center;grid-row:1/span 2;width:36px;height:36px;border-radius:10px;font-size:19px;font-weight:700;line-height:1;color:var(--c,var(--g));background:rgba(24,35,31,.06)}
@supports (background:color-mix(in srgb,red 13%,transparent)){.pf-step-n{background:color-mix(in srgb,var(--c,var(--g)) 13%,transparent)}}
.pf-steps+.pf-alert{margin-top:20px}
.pf-step b{display:block;grid-column:2;font-size:17px;font-weight:700;margin-bottom:4px}
.pf-step p{grid-column:2;color:var(--mut)}
@media (prefers-reduced-transparency:reduce){.pf-steps{background:#fff}}
@media (max-width:900px){
  .pf-hero.art{grid-template-columns:minmax(0,1fr)}.pf-hero.art h1,.pf-hero h1{font-size:44px}
  .pf-steps,.pf-steps.four{grid-template-columns:minmax(0,1fr)}.pf-step+.pf-step{box-shadow:inset 0 1px 0 var(--hair)}
}
@media (max-width:720px){
  .pf-hero.art h1,.pf-hero h1{font-size:36px}.pf-hero-acts{flex-direction:column}.pf-hero-acts .pf-cap{width:100%}
}

/* ===== СВОЁ МЕТОДИКИ (не из platform.css) ===== */
.pf-cap:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.pf-cap:hover{text-decoration:none}  /* a:hover{underline} из landing.css/methodology.css капсулы не задевает (ТЗ landing-polish, п. 1) */
@media (prefers-reduced-motion:reduce){.pf-cap{transition:none}.pf-cap:active{transform:none}}
/* пункты скрытой /admin — те же капсулы, что у меню шапки (platform_nav.css) */
.admin-nav{gap:4px}
.admin-nav a{padding:6px 12px;border-radius:999px;color:var(--ink-2)}
.admin-nav a:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.admin-nav a.active{color:var(--ink);font-weight:600;background:#fff;background:var(--mat-thick);box-shadow:inset 0 1px 0 var(--edge),0 2px 8px -6px rgba(24,35,31,.4)}