/* Kindware — страницы программ (/ryadom/, /tetrad/ …): обычная статья для чтения.
   Подключается после tokens.css и site.css. Цвет программы задаётся на <body>: --bg, --fg, --fg2, --tint.
   Коралл — только точки и маркеры (BRAND.md, раздел 5). */

.pg{--bg:#333;--fg:#fff;--fg2:rgba(255,255,255,.84);--tint:#eee}
.pg.light{--fg:#0F1A2E;--fg2:rgba(15,26,46,.84)}

/* верхняя строка: знак и путь на главную */
.pg-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:72px}
.pg-top .logo{display:flex;align-items:center;min-height:44px}
.pg-back{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-small);font-weight:700;color:var(--ink-2);text-decoration:none}
@media (hover:hover) and (pointer:fine){.pg-back:hover{color:var(--ink)}}

/* первый экран — цвет программы, как её экран на главной */
.pg-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--fg)}
.pg-hero .wrap{position:relative;padding-block:var(--s6) var(--s7);display:grid;gap:var(--s3);justify-items:start}
.pg-icon{width:72px;height:72px;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.pg-who{font:700 var(--t-label)/1.4 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.pg-hero h1{font-size:clamp(30px,4.6vw,56px);line-height:1.08;letter-spacing:-.04em;max-width:18ch}
.pg-lead{font-size:var(--t-lead);line-height:1.45;max-width:46ch;color:var(--fg)}
.pg-hero .row{margin-top:var(--s1)}
.pg-facts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:var(--t-small);color:var(--fg2)}
.pg-facts li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:var(--s1);vertical-align:2px}
/* огромное имя программы сбоку — только на широком экране */
.pg-vname{position:absolute;top:50%;right:var(--gutter);z-index:-1;writing-mode:vertical-rl;white-space:nowrap;transform:translateY(-50%);
  font:400 min(calc(120vh / (var(--len) * .72)), 260px)/.82 var(--f-display);letter-spacing:-.05em;color:var(--tint);opacity:.9;pointer-events:none}
@media (max-width:1100px){.pg-vname{display:none}}

/* кнопки на цвете программы */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 var(--s4);border-radius:999px;background:var(--fg);color:var(--bg);font:700 17px/1 var(--f-text);text-decoration:none;
  transition:transform var(--t-fast) var(--ease),gap var(--t-fast) var(--ease)}
@media (hover:hover) and (pointer:fine){.pill:hover{gap:16px}}
.pill:active{transform:scale(.97)}
.pill-ghost{background:transparent;color:var(--fg);border:1px solid color-mix(in srgb,var(--fg) 50%,transparent)}
.pill{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* статья */
.pg-body .wrap{max-width:calc(760px + var(--gutter) * 2)}
.pg-body article{display:grid;gap:var(--s6);padding-block:var(--s7) var(--s6)}
.pg-body section{display:grid;gap:var(--s3)}
.pg-body h2{font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.03em}
.pg-body p{color:var(--ink-2);max-width:62ch}
.pg-body p + p{margin-top:calc(var(--s1) * -1)}
.pg-body b{color:var(--ink);font-weight:700}
.pg-body .ul{color:var(--ink)}
.pg-list{display:grid;gap:var(--s2);max-width:62ch}
.pg-list li{position:relative;padding-left:var(--s4);color:var(--ink-2)}
.pg-list li::before{content:"";position:absolute;left:4px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--coral)}
.pg-steps{display:grid;gap:var(--s3);counter-reset:st;max-width:62ch}
.pg-steps li{counter-increment:st;display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s2);color:var(--ink-2)}
.pg-steps li::before{content:counter(st);font:400 24px/1.1 var(--f-display);color:var(--ink)}
.pg-note{border-left:2px solid var(--coral);padding-left:var(--s3);display:grid;gap:var(--s2)}

/* ещё раз «Открыть» и «Написать нам» */
.pg-cta{display:grid;gap:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:16px;background:var(--night-2)}
.pg-cta .btn{min-height:56px;font-size:17px}

/* другие программы */
.pg-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.pg-more a{display:flex;align-items:baseline;gap:var(--s2);min-height:56px;padding:var(--s2) var(--s2) var(--s2) 0;border-bottom:1px solid var(--line);text-decoration:none}
.pg-more a::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted));transform:translateY(-1px)}
.pg-more b{font:400 18px/1.3 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.pg-more em{font-style:normal;font-size:var(--t-small);color:var(--muted)}
.pg-more span{display:grid;gap:2px}
@media (hover:hover) and (pointer:fine){.pg-more a:hover b{color:#fff;text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:5px;text-decoration-thickness:1px}}
@media (max-width:620px){.pg-more{grid-template-columns:minmax(0,1fr)}}

/* подвал */
.pg-foot{border-top:1px solid var(--line);padding-block:var(--s5) var(--s6)}
.pg-foot .wrap{max-width:calc(760px + var(--gutter) * 2);display:grid;gap:var(--s3);font-size:var(--t-small);color:var(--muted)}
.pg-foot nav{display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.pg-foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none}
@media (hover:hover) and (pointer:fine){.pg-foot nav a:hover{color:var(--ink)}}

@media (max-width:620px){
  .pg-hero .wrap{padding-block:var(--s5) var(--s6)}
  .pg-icon{width:64px;height:64px;border-radius:16px}
  .pg-body article{padding-block:var(--s6) var(--s5);gap:var(--s5)}
  .pg-cta{padding:var(--s3)}
  .pg-hero .row{justify-self:stretch}
  .pg-cta .btn,.pg-hero .pill{width:100%;justify-content:center}
}

/* Второй — вид «Стекло», как его экран на главной */
.pg-vtoroy .pg-hero{background:radial-gradient(60% 50% at 18% 10%, rgb(70 74 86 / .85) 0%, transparent 70%),radial-gradient(45% 55% at 72% 52%, rgb(255 107 90 / .42) 0%, transparent 70%),radial-gradient(60% 45% at 30% 100%, rgb(52 56 68 / .9) 0%, transparent 70%),#0c0d10}
.pg-vtoroy .pg-vname{color:rgb(243 243 245 / .9)}
.pg-vtoroy .pill{background:#f3f3f5;color:#0c0d10}