/* ===== токены шаблона: меняй здесь, изменится везде ===== */
:root{
  --bg:#f5f5f7;--ink:#1c1c1e;--mut:#8a8a90;--mid:#5f5f66;--card:#262626;--line:#cfcfd4;--acc:#8b5cf6;
  --fs:14px;--lh:1.5;
  --wrap:1180px;--pad-x:clamp(16px,4vw,52px);
  --sec-pad:80px;--cols:1fr 2.2fr;--gap:24px;
  --radius:14px;--sub-pad:20px;--label-w:140px;--sol-pad:36px;--text-max:46em;
  color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs)/var(--lh) "SF Pro Display","SF Pro",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;text-transform:lowercase;-webkit-font-smoothing:antialiased}
b,strong{font-weight:400}
button{font:inherit;text-transform:inherit}
a{color:inherit;text-decoration:none}
p{margin:0}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
small{font-size:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x) 60px}
nav{display:flex;justify-content:space-between;padding:10px 0 0}
nav a{margin-right:14px}nav>a:last-child{margin-right:0}
.head{display:grid;grid-template-columns:1fr 2.2fr auto;gap:var(--gap);align-items:start;margin:34px 0 56px}
.who{display:flex;gap:10px}
.who i{width:20px;height:20px;border:1px solid #d9534f;border-radius:50%;flex:none;margin-top:2px}
.who small{display:block;color:var(--mut)}
.head .go{justify-self:end}
.sec{display:grid;grid-template-columns:var(--cols);gap:var(--gap);padding:var(--sec-pad) 0}
.sec.first{padding-top:0}
.sec+.sec{border-top:1px dashed var(--line)}
.lab{position:sticky;top:24px;align-self:start;display:flex;gap:var(--gap)}
.lab .n{width:24px;flex:none}
.r{min-width:0}
.r>p,.sub p{max-width:var(--text-max)}
.r>p+p,.sub p+p{margin-top:12px}
.r>*+*{margin-top:var(--gap)}
.sub{display:grid;grid-template-columns:var(--label-w) 1fr;gap:var(--gap);padding:var(--sub-pad) 0;border-top:1px solid var(--line);margin-top:0!important}
.r>.sub:first-child,.sub:first-child{border-top:0;padding-top:0}
.sub .k{color:var(--mut)}
.ph{background:var(--card);color:#8d8d94;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;min-height:200px}
.ph.v{aspect-ratio:16/9}
.fig img{border-radius:var(--radius)}
.fig figcaption{margin-top:10px;color:var(--mut)}
.cards{display:grid;grid-template-columns:1fr 1.86fr;gap:10px}
.card{display:block;border:0;padding:0;background:none;text-align:left;cursor:zoom-in;color:inherit}
.card.wide{grid-column:1/-1}
.card .box{background:var(--card);border-radius:var(--radius);padding:18px;display:flex;align-items:center}
.card .box img{width:100%;border-radius:8px}
.card .cap{display:block;margin-top:10px;color:var(--mut)}
.hint{display:block;color:var(--mut)}
.sol{padding:var(--sol-pad) 0;border-top:1px solid var(--line);margin-top:0!important}
.r>.sol:first-child{padding-top:0;border-top:0}
.sol .t{margin-bottom:10px}
.sol .d{color:var(--mid);max-width:var(--text-max)}
.sol .d+.d{margin-top:12px}
.shots{margin-top:22px;display:grid;gap:10px}
.shots.two{grid-template-columns:1fr 1fr}
.shot img{border-radius:var(--radius);width:100%}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.stat{background:var(--card);color:#a2a2a8;border-radius:var(--radius);min-height:170px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px}
.stat b{color:#f2f2f4}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s6{grid-column:span 6}
.flow{display:grid;gap:10px}
.flowrow{background:var(--card);color:#d6d6db;border-radius:var(--radius);padding:22px;display:grid;gap:12px}
.who2{color:#8d8d94}
.steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.steps span{border:1px solid #4a4a50;border-radius:999px;padding:6px 14px}
.steps i{font-style:normal;color:#6c6c72}
.flowrow.me .steps span{border-color:var(--acc);color:#fff}
.more{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.more p{margin-bottom:10px;color:var(--mid)}
.lock{background:var(--card);color:#c9c9ce;border-radius:var(--radius);min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px}
.lock svg{width:26px;height:26px;opacity:.85}
.lock small{color:#8d8d94;font-size:inherit}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 0 var(--sec-pad)}
.tile{background:var(--card);color:#c9c9ce;border-radius:var(--radius);aspect-ratio:1.45;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px}
.tile svg{width:30px;height:30px;margin-bottom:8px}
.tile small{color:#8d8d94}
.tile:hover:not(.locked){background:#303033}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:28px}
dialog{border:0;padding:0;background:transparent;max-width:min(96vw,1500px);width:96vw}
dialog::backdrop{background:rgba(0,0,0,.78)}
dialog img{width:100%;border-radius:var(--radius)}
dialog button{position:absolute;top:10px;right:14px;border:0;background:#f5f5f7;border-radius:50%;width:32px;height:32px;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (max-width:820px){
  .head,.sec{grid-template-columns:1fr;gap:12px}.head .go{justify-self:start}
  .sec{padding:48px 0}.lab{position:static}.sub{grid-template-columns:1fr;gap:6px}
  .cards,.shots.two,.more{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}.s2,.s3,.s6{grid-column:auto}.grid{grid-template-columns:1fr 1fr}}