/* WELLEX BUNDLE — собран из 15 файлов, порядок каскада значим.
Правьте источники, затем: node tools/bundle-css.mjs
Ручные правки здесь будут затёрты. */
/* ═══ wellex.css ═══════════════════════════════════ */
/* ============================================================
WELLEX PAGE STANDARD v1 — getwellex.io deep pages
One canon: cream surface, Space Grotesk display, violet + gold.
Every page links this file and adds only page-specific rules.
Contrast: every token pair below passes WCAG 2.1 AA (4.5:1).
============================================================ */
@font-face{
font-family:"Space Grotesk";
src:url("/fonts/space-grotesk-var.woff2") format("woff2");
font-weight:300 700;
font-display:swap;
}
/* ЕДИНИЦА ХОЛСТА. Слайд колоды — коробка шириной ровно 1280px (FIXED CANVAS в
wellex-deck2.css), а кегль до 2026-08-03 был привязан к `vw`, то есть к окну
браузера. Коробка упиралась в 1280px при вьюпорте ~1362px и дальше не росла,
а текст продолжал расти до потолка `clamp` — на 1600px он оказывался на 20%
крупнее в той же коробке. Отсюда переполнения, которые росли с шириной окна
и совпадали по языкам до пикселя: 32:+6 → +21 → +23 → +22.
`--cw` = один процент холста. Ниже точки холста он остаётся процентом окна,
поэтому мобильная вёрстка не меняется ни на пиксель.
Объявлено ИМЕННО ЗДЕСЬ, а не в wellex-deck.css: переменную использует
wellex-deck4.css, который входит в бандл спичей, а wellex-deck.css — нет.
При объявлении в deck.css размеры в спичах остались бы без font-size. */
:root{ --cw:1vw }
@media(min-width:861px){ :root{ --cw:12.8px } }
:root{
/* surface */
--bg:#FBF8F2;
--surface:#FFFFFF;
--surface2:#F6F1E7;
--soft:#F3EEE3;
--line:#ECE5D6;
/* ink */
--text:#221B34;
--muted:#6E6780;
/* brand */
--v:#5E50B8; /* Violet Dim (canon) — every violet TEXT/icon on light */
--v2:#7B6CE7; /* Violet (canon accent) — decorative only: glows, fills, gradients */
--vd:#4A3E9E; /* violet deep — button/segment fills carrying white text */
--gold:#876520; /* gold, text-safe on white and on --soft */
--gold2:#E4B858; /* gold light, decorative / gradients only */
/* state */
--good:#2E9E6B;
--warn:#9A5C1A;
--bad:#B4382F;
/* type */
--display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
--body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
/* motion + depth */
--ease:cubic-bezier(.22,1,.36,1);
--sh:0 10px 34px rgba(40,28,72,.07);
--shx:0 18px 50px rgba(40,28,72,.10);
/* geometry */
--r-sm:12px; --r-md:16px; --r-lg:20px; --r-pill:999px;
--wrap:960px;
}
/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.66;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--v);text-decoration:none}
::selection{background:rgba(106,90,224,.22)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* ---------- type scale ---------- */
h1{font-family:var(--display);font-size:clamp(34px,5.6vw,60px);font-weight:700;letter-spacing:-.025em;line-height:1.03;max-width:20ch}
h2{font-family:var(--display);font-size:clamp(25px,3.6vw,36px);font-weight:700;letter-spacing:-.02em;margin-bottom:12px;color:var(--text)}
h3{font-family:var(--display);font-size:18px;font-weight:700;margin:26px 0 10px;color:var(--text)}
h4{font-family:var(--display);font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text)}
h1 em{font-style:normal;background:linear-gradient(95deg,var(--v),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
p.lead{color:var(--muted);max-width:670px;font-size:16px}
p.lead b,.sub b{color:var(--text)}
.sub{color:var(--muted);max-width:660px;margin-top:18px;font-size:17px}
.note{font-size:12px;color:#797163;margin-top:16px;line-height:1.7}
/* ---------- section rhythm ---------- */
section{padding:60px 0 14px;border-top:1px solid var(--line)}
.kicker{font-family:var(--display);font-size:12px;font-weight:650;letter-spacing:.2em;color:var(--v);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:14px}
.kicker::after{content:"";flex:1;max-width:72px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold2),transparent)}
.subhead{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.4vw,25px);margin:44px 0 14px;color:var(--text)}
/* ---------- shell ---------- */
nav{position:sticky;top:0;z-index:20;background:rgba(251,248,242,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:60px;gap:14px}
/* Logo — master asset only (brand-assets/logos). Never regenerate, never skew.
Solid W mark is the canon variant below 48px; the full wordmark lockup needs
a wordmark height of 32px+, so it belongs on hero surfaces, not in a 60px bar.
Clear space = apex W height (18/31 of the mark width) on all sides. */
.logo{text-decoration:none;display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.04em;white-space:nowrap;color:var(--text);padding:8px 0}
.logo .lockup-nav{height:26px;width:auto;display:block;flex:none}
@media(max-width:520px){.logo .lockup-nav{height:22px}}
.logo .mark{width:31px;height:18px;display:block;flex:none}
.logo .logo-tag{align-self:center;display:flex;align-items:center;height:18px;line-height:18px;font-weight:400;color:var(--muted);letter-spacing:.06em;font-size:13px;text-transform:none}
.logo,.logo *{line-height:1}
.logo b{color:var(--v)}
.nl{display:flex;gap:18px;font-size:13px;overflow-x:auto}
.nl a{color:var(--muted);white-space:nowrap}
.nl a:hover,.nl a.active{color:var(--text)}
header{padding:82px 0 54px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.glow{position:absolute;width:760px;height:440px;left:50%;top:-42%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(142,124,242,.22),transparent 68%),radial-gradient(closest-side,rgba(228,184,88,.14),transparent 70%);filter:blur(20px);pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold-deep);text-transform:uppercase;margin-bottom:18px;background:#fff;border:1px solid rgba(135,101,32,.5);border-radius:var(--r-pill);padding:8px 16px;box-shadow:0 4px 14px rgba(40,28,72,.07)}
footer{border-top:1px solid var(--line);padding:32px 0 56px;color:var(--muted);font-size:13px;margin-top:44px}
footer a{color:var(--v)}
footer .legal{max-width:840px;line-height:1.7;color:#797163;margin-top:12px}
/* ---------- controls ---------- */
.btn{display:inline-block;padding:12px 24px;border-radius:var(--r-pill);font-weight:650;font-size:14px;background:linear-gradient(135deg,var(--v),#5646C8);color:#fff;white-space:nowrap;box-shadow:0 8px 22px rgba(106,90,224,.32);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(106,90,224,.4)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--text);border:1.5px solid var(--line);box-shadow:none}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--sh)}
.card h3,.card h4{font-family:var(--display);font-size:16px;margin-bottom:8px;color:var(--text)}
.card h3 i,.card h4 i{font-style:normal;color:var(--gold);font-family:var(--mono);font-size:12px;margin-right:8px}
.card p{color:var(--muted);font-size:14px}
.card p b{color:var(--text)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 16px;text-align:center;box-shadow:var(--sh)}
.kpi b{display:block;font-family:var(--display);font-size:25px;font-weight:700;background:linear-gradient(120deg,var(--v),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi span{font-size:12px;color:var(--muted)}
/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:13px;margin-top:24px;background:var(--surface)}
th,td{padding:12px 15px;border-bottom:1px solid var(--line);text-align:left}
th{font-family:var(--display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface2)}
td{color:var(--muted)}
td b{color:var(--text)}
td.r{font-family:var(--mono);color:var(--v)}
tr:last-child td{border-bottom:0}
th[scope="row"]{font-family:var(--body);font-weight:400;text-transform:none;letter-spacing:0;background:transparent;color:var(--muted);font-size:13px}
th[scope="row"] b{color:var(--text)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md);box-shadow:var(--sh);margin-top:22px}
.tscroll table{border:1px solid var(--line);margin:0;min-width:560px}
/* ---------- disclosure ---------- */
.qa{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh);margin-top:12px;overflow:hidden}
.qa summary{cursor:pointer;padding:18px 22px;font-family:var(--display);font-weight:650;font-size:15px;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background .18s var(--ease)}
.qa summary:hover{background:var(--soft)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--v);font-size:22px;line-height:1;flex:none}
.qa[open] summary::after{content:"\2013"}
.qa .a{padding:0 22px 18px;color:var(--muted);font-size:14px;line-height:1.62}
.qa .a b{color:var(--text)}
/* ---------- imagery ---------- */
figure.fig{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shx)}
figure.fig img{display:block;width:100%;height:auto}
figure.fig figcaption{padding:12px 18px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);background:var(--soft);line-height:1.55}
figure.fig figcaption b{color:var(--text)}
.figsplit{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center;margin-top:30px}
.figsplit.rev{grid-template-columns:1.2fr .8fr}
.figsplit .ft p{color:var(--muted);font-size:15px;max-width:60ch}
.figsplit .ft p+p{margin-top:12px}
.figsplit .ft b{color:var(--text)}
.figsplit .ft h3{margin-top:0}
/* ---------- utility ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- accessibility ---------- */
a:focus-visible,summary:focus-visible,button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--v);outline-offset:3px;border-radius:8px
}
/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.reveal{opacity:1!important;transform:none!important}
}
@media(prefers-reduced-motion:no-preference){
.reveal{opacity:0;transform:translateY(18px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.reveal.in{opacity:1;transform:none}
.card,figure.fig,.kpi{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
}
@media(hover:hover) and (pointer:fine){
.card:hover,.kpi:hover{transform:translateY(-2px);box-shadow:var(--shx)}
figure.fig:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(40,28,72,.14)}
}
/* ---------- responsive ---------- */
@media(max-width:860px){.figsplit,.figsplit.rev{grid-template-columns:1fr}}
@media(max-width:760px){
.grid,.kpis{grid-template-columns:1fr}
section{padding:48px 0 12px}
header{padding:60px 0 40px}
/* Section nav must stay reachable on a phone. Pages that ship a burger keep it;
the rest get a horizontally scrollable row with a fade so it reads as swipeable. */
.nl,.navlinks{display:flex;gap:14px;font-size:12px;flex:1 1 0;min-width:0;padding:2px 0;
overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);
mask-image:linear-gradient(90deg,#000 78%,transparent)}
.nl::-webkit-scrollbar,.navlinks::-webkit-scrollbar{display:none}
.nl a,.navlinks a{padding:6px 0}
nav:has(.burger) .nl{display:none} /* pages with a burger keep their own menu */
nav .wrap{gap:10px}
nav .btn{flex:none;padding:10px 16px;font-size:13px}
/* legibility floor: nothing on a phone below 11.5px */
.note,.legal,footer,footer .legal,small,.meta-line,.fineprint,
.kpi span,.stat span,.nx span,.lv span,.pfoot,.purl{font-size:11px!important;line-height:1.55}
.card p,.qa .a,td,th,li,p.lead{font-size:14px}
.tr,.lx,.status,.tag,.pill,.gl,.tseg .tr,.bg .st,.rank-no,.side,.fk,.k,.ch,.st span,.fnode .ch,.wn,.dn{font-size:11px!important}
.strip .st span,.statgrid .stat span{font-size:11px!important}
figure.fig figcaption{font-size:12px}
/* thumb-sized targets */
.btn,.btn2,a.chip,.readmore a,.jump .chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.qa summary{min-height:52px}
}
/* ---------- print ---------- */
@media print{
.reveal,.rv,.pre{opacity:1!important;transform:none!important}
nav,.skip,.glow,.ctarow,.btn{display:none!important}
html,body{background:#fff!important;color:#000!important;font-size:10.5pt}
a{color:#000!important;text-decoration:underline}
.wrap{max-width:100%!important;padding:0 6mm!important}
h1,h2,h3,h4,.kicker,.subhead{break-after:avoid}
.card,.kpi,figure.fig,table,.qa,.figsplit{break-inside:avoid;box-shadow:none!important}
.figsplit,.figsplit.rev,.grid,.kpis{grid-template-columns:1fr!important}
figure.fig img{max-height:7cm;width:auto;object-fit:contain}
}
/* ═══ wellex-graphite.css ═══════════════════════════════════ */
/* ============================================================
ГРАФИТНАЯ НЕЙТРАЛЬ — общий слой презентационных артефактов
Лежит отдельным файлом и подключается ко ВСЕМ трём бандлам: колодам,
руму и спичам. Первый заход положил эти токены в wellex-deck3.css —
и колоды стали графитными, а рум со спичами остались кремовыми, потому
что deck3 в их бандлы не входит. Портфель разъезжался по температуре.
В wellex.css класть тоже нельзя: его грузят страницы маркетингового
сайта, а их владелец менять не просил.
============================================================ */
/* ============================================================
ГРАФИТНАЯ НЕЙТРАЛЬ (03.08, решение владельца «делай более графитной»)
Колода жила в тёплой кремовой гамме: подложка #FBF8F2, линии #ECE5D6,
чернила #221B34 с фиолетовым подтоном. Рыжий цвет плетёного ремешка
на креме звучал приглушённо — два тёплых цвета спорили за одну роль.
Нейтраль уводится в графит: подложка холоднее и темнее, слайд остаётся
светлым и читаемым, чернила становятся графитовыми без фиолета.
Рыжий НЕ трогаем — он единственный акцент и на графите читается резче.
Переопределяется только в слое колод: сайт и рум грузят другие бандлы.
Контраст проверен `tools/axe.mjs` — 0 нарушений на всех девяти колодах.
============================================================ */
:root{
--bg:#EDECEA; /* графитовая подложка страницы */
--surface:#FAFAFA; /* слайд — светлый лист на графите */
--surface2:#E4E3E0; /* фон за слайдами */
--soft:#E9E8E6; /* карточки и заливки */
--line:#D7D6D2; /* линии по графиту, а не по крему */
--text:#1B1B19; /* графитовые чернила без фиолетового подтона */
--muted:#5C5C58; /* серый графит, AA на --soft */
--ink:#171715;
--sh:0 10px 34px rgba(24,24,22,.08);
--shx:0 18px 50px rgba(24,24,22,.12);
}
/* ═══ wellex-deck.css ═══════════════════════════════════ */
/* ============================================================
WELLEX DECK STANDARD v1 — slide decks on the page standard
Loads AFTER brand/wellex.css and reuses its tokens.
One deck = one self-contained HTML file. Scrolls on the web,
prints one slide per landscape page, drives from the keyboard.
============================================================ */
:root{ --slide-w:1280px; --slide-pad:72px; }
/* Единица холста `--cw` объявлена в brand/wellex.css — она нужна и в бандле
спичей, куда этот файл не входит, а wellex-deck4.css входит и её использует. */
body{background:var(--surface2);overflow-x:hidden}
/* ---------- deck chrome ---------- */
.deckbar{position:fixed;top:0;left:0;right:0;height:52px;z-index:60;display:flex;align-items:center;gap:16px;
padding:0 22px;background:rgba(251,248,242,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.deckbar .lock{height:22px;width:auto;display:block}
.deckbar .dt{font-family:var(--display);font-weight:650;font-size:13px;color:var(--text);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.deckbar .conf{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep);
background:rgba(228,184,88,.16);border:1px solid rgba(135,101,32,.35);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}
.deckbar .sp{flex:1}
.deckbar .pos{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.deckbar .pbtn{font-family:var(--display);font-size:12px;font-weight:650;color:var(--v);background:none;border:1px solid var(--line);
border-radius:var(--r-pill);padding:7px 14px;cursor:pointer;white-space:nowrap}
.deckbar .pbtn:hover{border-color:var(--v)}
@media screen and (max-width:720px){.deckbar .dt,.deckbar .pbtn{display:none}}
#deckprog{position:fixed;top:52px;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--v),var(--gold));z-index:61;transition:width .12s linear}
/* ---------- the slide ---------- */
.deck{padding:76px 0 60px}
.slide{position:relative;width:min(var(--slide-w),94vw);aspect-ratio:16/9;margin:0 auto 26px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:var(--slide-pad);
display:flex;flex-direction:column;justify-content:center;overflow:hidden;scroll-margin-top:70px}
.slide .no{position:absolute;right:26px;bottom:20px;font-family:var(--mono);font-size:11px;color:#797163}
.slide .kick{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--v);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.slide .kick::after{content:"";flex:0 0 54px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold2),transparent)}
.slide h2{font-size:clamp(26px,calc(2.6 * var(--cw)),40px);line-height:1.06;letter-spacing:-.025em;margin:0 0 16px;max-width:22ch}
.slide h3{font-size:18px;margin:0 0 6px}
.slide p{font-size:18px;line-height:1.6;color:var(--muted);max-width:60ch;margin:0 0 12px}
.slide p b,.slide li b{color:var(--text)}
.slide .big{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:clamp(38px,calc(5 * var(--cw)),74px);line-height:1.02;max-width:18ch}
.slide .lede{font-size:19.5px;color:var(--muted);max-width:56ch}
/* cover */
.slide.cover{justify-content:space-between;background:linear-gradient(160deg,#fff,var(--soft))}
.slide.cover .lock{height:34px;width:auto;display:block;margin-bottom:auto}
.slide.cover h1{font-size:clamp(34px,calc(4.4 * var(--cw)),62px);line-height:1.03;letter-spacing:-.03em;max-width:17ch;margin:0 0 14px}
.slide.cover .sub{font-size:18px;color:var(--muted);max-width:52ch}
.slide.cover .meta{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:26px;
padding-top:18px;border-top:1px solid var(--line)}
.slide.cover .meta b{color:var(--text);display:block;font-family:var(--display);font-size:14px}
/* statement */
.slide.statement{background:linear-gradient(150deg,#241C48,#3A2E6E);border-color:transparent}
.slide.statement .kick{color:var(--gold2)}
.slide.statement .big,.slide.statement h2{color:#fff}
.slide.statement p{color:#C9C4E8}
.slide.statement .no{color:rgba(255,255,255,.4)}
/* columns + lists */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.cols.c3{grid-template-columns:repeat(3,1fr);gap:20px}
.cols.wide{grid-template-columns:1.25fr .75fr;gap:36px}
.slide ul{list-style:none;display:grid;gap:11px;margin:6px 0 0}
.slide li{position:relative;padding-left:24px;font-size:16.5px;line-height:1.5;color:var(--muted)}
.slide li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--v)}
.slide ol.num{list-style:none;counter-reset:s;display:grid;gap:13px;margin:6px 0 0}
.slide ol.num li{counter-increment:s;padding-left:38px;font-size:16.5px}
.slide ol.num li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--gold);
background:none;width:auto;height:auto;top:2px;border-radius:0}
/* cards + metrics */
/* align-content:start обязателен. Блок карточек стоит во flex-колонке слайда
и забирает всю свободную высоту; без этого строка сетки растягивалась под
неё, и карточка высотой 398px несла 132px содержимого — две трети пустоты
ВНУТРИ карточки. Пустое место под компактным рядом читается как воздух,
пустота внутри карточки — как недоделанный слайд. `.cols` так стоял всегда. */
.dcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px;
align-content:start}
.dcards.c2{grid-template-columns:1fr 1fr}
.dcards.c4{grid-template-columns:repeat(4,1fr);gap:13px}
.dcard{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.dcard h3{font-size:16.5px;margin-bottom:6px}
.dcard p{font-size:14px;margin:0}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px}
.metrics.m3{grid-template-columns:repeat(3,1fr)}
.metric-b{text-align:left}
.metric-b b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(30px,calc(3.4 * var(--cw)),50px);letter-spacing:-.03em;
background:linear-gradient(120deg,var(--v),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.metric-b span{display:block;font-size:13px;color:var(--muted);margin-top:8px;line-height:1.4}
.slide.statement .metric-b b{background:none;-webkit-text-fill-color:#fff;color:#fff}
.slide.statement .metric-b span{color:#C9C4E8}
/* table */
.slide table{margin-top:8px;font-size:14px}
.slide th{font-size:11px}
.slide td,.slide th{padding:10px 13px}
/* image */
.slide.img{padding:0;justify-content:stretch}
.slide.img img{width:100%;height:100%;object-fit:cover;display:block}
.slide.img figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 26px;font-size:14px;color:#fff;
background:linear-gradient(0deg,rgba(20,14,36,.86),transparent)}
.slide.img figcaption b{color:#fff}
.split-img{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;height:100%}
.split-img img{width:100%;border-radius:var(--r-md);display:block;max-height:64%;object-fit:cover}
/* quote */
.slide.quote-s .q{font-family:var(--display);font-weight:500;font-size:clamp(24px,calc(2.9 * var(--cw)),40px);line-height:1.32;
letter-spacing:-.02em;color:var(--text);max-width:24ch;border-left:5px solid var(--gold2);padding-left:26px}
.slide.quote-s .by{margin-top:22px;font-size:14px;color:var(--muted);padding-left:31px}
/* footnote / legal on a slide */
/* СНОСКА НЕ ПРИЖАТА К НИЗУ (03.08). `margin-top:auto` забирал ВЕСЬ свободный
ход слайда: содержимое вставало вверху, сноска внизу, а между ними полоса
пустоты — после того как карточки перестали растягиваться, 90-й перцентиль
этой полосы вырос до 92px, максимум до 144px. Автополе к тому же отменяет
`justify-content:center` самого слайда: распределять ему было нечего.
С фиксированным отступом слайд центрирует всю группу — заголовок, блок и
сноску, — и воздух расходится сверху и снизу поровну. На плотных слайдах
не меняется ничего: там свободного хода нет. */
.fnote{margin-top:14px;padding-top:16px;font-size:11px;line-height:1.55;color:#797163;border-top:1px solid var(--line)}
.slide.statement .fnote{color:#B9B3D6;border-top-color:rgba(255,255,255,.16)}
/* ---------- responsive: stop pretending to be 16:9 on a phone ---------- */
@media screen and (max-width:860px){
:root{--slide-pad:30px}
.slide{aspect-ratio:auto;min-height:auto;width:94vw;padding:var(--slide-pad);margin-bottom:16px}
.cols,.cols.c3,.cols.wide,.dcards,.dcards.c2,.dcards.c4,.metrics,.metrics.m3,.split-img{grid-template-columns:1fr;gap:16px}
.slide h2{font-size:25px;max-width:none}
.slide .big{font-size:31px}
.slide p,.slide li{font-size:15.5px}
.slide .lede{font-size:16.5px}
.split-img img{max-height:none}
.slide .no{position:static;margin-top:14px}
}
/* ---------- print: one slide per landscape page ---------- */
@page{size:297mm 167mm;margin:0}
@media print{
.deckbar,#deckprog{display:none!important}
body{background:#fff!important}
.deck{padding:0}
.slide{width:100%;aspect-ratio:auto;height:auto;min-height:172mm;page-break-after:always;break-after:page;
box-shadow:none!important;border:0;border-radius:0;margin:0;padding:14mm}
.slide:last-child{page-break-after:auto}
.slide.statement{background:#241C48!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.slide.cover{background:#fff!important}
.metric-b b{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.reveal,.rv{opacity:1!important;transform:none!important}
a{text-decoration:none;color:inherit!important}
}
/* ============================================================
INFOGRAPHIC LAYER — charts, flows, dials, timelines
All CSS/SVG, no libraries. Animate on slide entry.
============================================================ */
/* --- animated counter --- */
.count{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* --- horizontal bars --- */
.bars{display:grid;gap:14px;margin-top:8px}
.bar-r{display:grid;grid-template-columns:150px 1fr 76px;align-items:center;gap:14px;font-size:14px}
.bar-r .bl{color:var(--text);font-weight:600}
.bar-r .bt{height:12px;border-radius:6px;background:var(--soft);overflow:hidden;border:1px solid var(--line)}
.bar-r .bf{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--v),var(--v2));
transition:width .9s cubic-bezier(.22,1,.36,1)}
.bar-r.gold .bf{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.bar-r .bv{text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted)}
.slide.statement .bar-r .bl{color:#fff}
.slide.statement .bar-r .bt{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
.slide.statement .bar-r .bv{color:#C9C4E8}
/* --- column chart --- */
.colchart{display:flex;align-items:flex-end;gap:12px;height:230px;margin-top:14px;padding:0 2px}
.colchart .cc{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:9px;height:100%}
.colchart .cb{width:100%;height:0;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,var(--v2),var(--v));
transition:height 1s cubic-bezier(.22,1,.36,1);box-shadow:0 6px 18px rgba(94,80,184,.2)}
.colchart .cc.hi .cb{background:linear-gradient(180deg,var(--gold2),var(--gold))}
.colchart .cv{font-family:var(--display);font-weight:700;font-size:14px;color:var(--text)}
.colchart .cl{font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
/* --- flow: step → step → step --- */
.flowd{display:flex;align-items:stretch;gap:0;margin-top:12px;flex-wrap:wrap}
.flowd .fn{flex:1 1 150px;min-width:130px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);
padding:16px 15px;margin:0 5px}
.flowd .fn.hot{border-color:rgba(135,101,32,.45);background:rgba(228,184,88,.13)}
.flowd .fn b{display:block;font-family:var(--display);font-size:14px;color:var(--text);margin-bottom:5px}
.flowd .fn span{font-size:12px;color:var(--muted);line-height:1.45;display:block}
.flowd .fa{display:flex;align-items:center;color:var(--v);font-size:18px;flex:none;padding:0 1px}
@media screen and (max-width:860px){.flowd .fa{transform:rotate(90deg);justify-content:center;width:100%;padding:5px 0}}
/* --- dial / donut --- */
.dialg{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;margin-top:6px}
.dialg svg{width:min(230px,calc(32 * var(--cw)));height:auto;display:block}
.dialg .darc{transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
@media screen and (max-width:860px){.dialg{grid-template-columns:1fr}.dialg svg{width:190px;margin:0 auto}}
/* --- timeline --- */
.tl{position:relative;display:grid;gap:18px;margin-top:14px;padding-left:6px}
.tl::before{content:"";position:absolute;left:15px;top:12px;bottom:12px;width:2px;border-radius:2px;
background:linear-gradient(180deg,var(--v),var(--gold))}
.tl .ti{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start;position:relative}
.tl .td{width:32px;height:32px;border-radius:11px;background:var(--surface);border:2px solid var(--v);display:flex;
align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:12px;color:var(--v);z-index:1}
.tl .ti.gold .td{border-color:var(--gold);color:var(--gold)}
.tl .tc b{display:block;font-family:var(--display);font-size:16px;color:var(--text);margin-bottom:3px}
.tl .tc span{font-size:14px;color:var(--muted);line-height:1.5}
/* --- versus / before-after --- */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin-top:10px}
.vs .vc{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.vs .vc.dead{background:rgba(180,56,47,.06);border-color:rgba(180,56,47,.28)}
.vs .vc.alive{background:rgba(46,158,107,.07);border-color:rgba(46,158,107,.3)}
.vs .vh{font-family:var(--display);font-weight:700;font-size:15px;margin-bottom:10px;color:var(--text)}
.vs .vc.dead .vh{color:#9c3129}.vs .vc.alive .vh{color:#1A7550}
.vs .vc li{font-size:14px;padding-left:20px}
.vs .vc.dead li::before{background:var(--bad)}.vs .vc.alive li::before{background:var(--good)}
.vs .vmid{align-self:center;font-family:var(--display);font-weight:700;font-size:13px;color:var(--muted);
letter-spacing:.12em;text-transform:uppercase}
@media screen and (max-width:860px){.vs{grid-template-columns:1fr}.vs .vmid{text-align:center;padding:2px 0}}
/* --- allocation ladder --- */
.alloc{display:flex;height:54px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);margin-top:12px}
.alloc div{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:650;font-size:13px}
.alloc .core{flex:3;background:linear-gradient(90deg,#4A3E9E,var(--v));color:#fff}
.alloc .act{flex:1;background:linear-gradient(90deg,var(--gold2),var(--gold));color:var(--rust-ink)}
/* --- pill row --- */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pills span{font-size:var(--z-cap,12px);color:var(--text);background:var(--soft);border:1px solid var(--line);
border-radius:var(--r-pill);padding:7px 14px}
/* --- entry animation, per slide --- */
@media(prefers-reduced-motion:no-preference){
.slide [data-anim]{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.slide.seen [data-anim]{opacity:1;transform:none}
.slide.seen [data-anim="1"]{transition-delay:.05s}
.slide.seen [data-anim="2"]{transition-delay:.13s}
.slide.seen [data-anim="3"]{transition-delay:.21s}
.slide.seen [data-anim="4"]{transition-delay:.29s}
.slide.seen [data-anim="5"]{transition-delay:.37s}
}
@media print{
.slide [data-anim]{opacity:1!important;transform:none!important}
.bar-r .bf,.colchart .cb{transition:none!important}
}
/* ═══ wellex-deck2.css ═══════════════════════════════════ */
/* ============================================================
WELLEX DECK — ART DIRECTION LAYER v2
Loads after wellex.css + wellex-deck.css.
Editorial scale, full-bleed photography, code-drawn data-art.
Principle: the conclusion lives in the headline, one idea per slide,
and every mark on the slide either explains or leaves.
============================================================ */
/* ---------- bigger, braver type ---------- */
.slide h2{font-size:clamp(30px,calc(3.3 * var(--cw)),52px);letter-spacing:-.035em;line-height:1.02;max-width:19ch}
.slide .kick{font-size:11px;letter-spacing:.26em}
.slide .lede{font-size:clamp(17px,calc(1.5 * var(--cw)),21px);line-height:1.55}
/* hero number — the whole slide is one figure */
.hero-n{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:46px;align-items:center}
.hero-n .nbig{font-family:var(--display);font-weight:700;letter-spacing:-.055em;line-height:.82;
font-size:clamp(96px,calc(14 * var(--cw)),210px);background:linear-gradient(150deg,var(--text) 8%,var(--vd) 40%,var(--v2) 74%,var(--gold) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.hero-n .nsub{font-family:var(--display);font-weight:650;font-size:clamp(17px,calc(1.7 * var(--cw)),23px);color:var(--text);margin-top:10px}
.hero-n .ncap{font-size:15.5px;color:var(--muted);max-width:34ch;margin-top:10px;line-height:1.55}
.slide.statement .hero-n .nbig,.slide.mesh .hero-n .nbig,.slide.bleed .hero-n .nbig{
background:linear-gradient(155deg,#fff 20%,#C9B6FF 60%,var(--gold2) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.slide.statement .hero-n .nsub,.slide.mesh .hero-n .nsub,.slide.bleed .hero-n .nsub{color:#fff}
.slide.statement .hero-n .ncap,.slide.mesh .hero-n .ncap,.slide.bleed .hero-n .ncap{color:#C9C4E8}
@media screen and (max-width:860px){.hero-n{grid-template-columns:1fr;gap:18px}.hero-n .nbig{font-size:88px}}
/* ---------- full-bleed photography ---------- */
.slide.bleed{padding:0;justify-content:flex-end;overflow:hidden}
.slide.bleed>picture,.slide.bleed>img{position:absolute;inset:0}
.slide.bleed img{width:100%;height:100%;object-fit:cover;display:block}
.slide.bleed .scrim{position:absolute;inset:0;
background:linear-gradient(72deg,rgba(18,13,32,.94) 0%,rgba(18,13,32,.74) 34%,rgba(18,13,32,.12) 66%,transparent 100%)}
.slide.bleed .on{position:relative;padding:var(--slide-pad);max-width:60%}
.slide.bleed .kick{color:var(--gold2)}
.slide.bleed h2,.slide.bleed .big{color:#fff}
.slide.bleed p{color:#DED9F0}
.slide.bleed .no{color:rgba(255,255,255,.45)}
@media screen and (max-width:860px){.slide.bleed{min-height:74vh}.slide.bleed .on{max-width:100%}
.slide.bleed .scrim{background:linear-gradient(0deg,rgba(18,13,32,.95) 30%,rgba(18,13,32,.35) 100%)}}
/* ---------- mesh backdrop for statement slides ---------- */
.slide.mesh{position:relative;background:#1B1533;border-color:transparent;overflow:hidden}
.slide.mesh::before,.slide.mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none}
.slide.mesh::before{width:62%;aspect-ratio:1;left:-12%;top:-34%;background:radial-gradient(closest-side,rgba(123,108,231,.75),transparent 70%)}
.slide.mesh::after{width:54%;aspect-ratio:1;right:-10%;bottom:-40%;background:radial-gradient(closest-side,rgba(228,184,88,.42),transparent 70%)}
.slide.mesh>*{position:relative;z-index:1}
.slide.mesh .kick{color:var(--gold2)}
.slide.mesh h2,.slide.mesh .big{color:#fff}
.slide.mesh p{color:#C9C4E8}
.slide.mesh .no{color:rgba(255,255,255,.4)}
.slide.mesh .fnote{color:#B9B3D6;border-top-color:rgba(255,255,255,.16)}
/* ---------- isotype grid: one dot = one unit ---------- */
.iso{display:flex;flex-wrap:wrap;gap:5px;max-width:640px;margin-top:6px}
.iso i{width:11px;height:11px;border-radius:3px;background:var(--line);display:block;
transform:scale(.4);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.slide.seen .iso i{transform:none;opacity:1}
.iso i.on{background:linear-gradient(150deg,var(--v),var(--v2))}
.iso i.gold{background:linear-gradient(150deg,var(--gold),var(--gold2))}
.isokey{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted)}
.isokey span{display:inline-flex;align-items:center;gap:8px}
.isokey i{width:11px;height:11px;border-radius:3px;display:block}
/* ---------- ridge / waveform ---------- */
.ridge{width:100%;height:auto;display:block;margin-top:8px}
.ridge path.rl{fill:none;stroke-width:2.2;stroke-linecap:round;
stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 1.5s var(--ease)}
.slide.seen .ridge path.rl{stroke-dashoffset:0}
.ridge path.rf{opacity:0;transition:opacity .9s var(--ease) .35s}
.slide.seen .ridge path.rf{opacity:1}
/* ---------- radial signal wheel ---------- */
.wheel{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.wheel svg{width:min(320px,calc(40 * var(--cw)));height:auto}
.wheel .seg{transform-origin:center;opacity:0;transition:opacity .6s var(--ease)}
.slide.seen .wheel .seg{opacity:1}
.wheel .lab{font-family:var(--display);font-size:10px;letter-spacing:.06em;fill:var(--muted);text-transform:uppercase}
@media screen and (max-width:860px){.wheel{grid-template-columns:1fr}.wheel svg{width:78%;margin:0 auto}}
/* ---------- stacked comparison bar ---------- */
.stackbar{display:flex;height:76px;border-radius:var(--r-md);overflow:hidden;margin-top:14px;border:1px solid var(--line)}
.stackbar div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
font-family:var(--display);width:0;transition:width 1.1s var(--ease);overflow:hidden;white-space:nowrap}
.slide.seen .stackbar div{width:var(--w)}
.stackbar b{font-size:16px;font-weight:700}
.stackbar span{font-size:11px;opacity:.85;letter-spacing:.05em}
/* ---------- big pull quote ---------- */
.slide.pull .q{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.08;
font-size:clamp(30px,calc(4 * var(--cw)),64px);max-width:19ch;color:var(--text)}
.slide.pull.mesh .q,.slide.pull.bleed .q{color:#fff}
.slide.pull .qs{font-size:16px;color:var(--muted);margin-top:22px;max-width:44ch}
.slide.pull.mesh .qs{color:#C9C4E8}
/* ---------- index / agenda ---------- */
.agenda{display:grid;gap:0;margin-top:6px;border-top:1px solid var(--line)}
.agenda a,.agenda div{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:baseline;
padding:15px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.agenda .an{font-family:var(--mono);font-size:12px;color:var(--gold)}
.agenda .at{font-family:var(--display);font-weight:650;font-size:18px;color:var(--text)}
.agenda .ad{font-size:14px;color:var(--muted);text-align:right;max-width:34ch}
@media screen and (max-width:860px){.agenda a,.agenda div{grid-template-columns:38px 1fr}.agenda .ad{display:none}}
/* ---------- footnote sits tighter ---------- */
.slide .fnote{font-size:11px}
/* ---------- dark-slide corrections ---------- */
.slide.mesh .iso i{background:rgba(255,255,255,.14)}
.slide.mesh .iso i.on{background:linear-gradient(150deg,#9F8FFF,#E4B858)}
.slide.mesh .isokey{color:#C9C4E8}
.slide.mesh .dcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.slide.mesh .dcard h3{color:#fff}
.slide.mesh .dcard p{color:#C9C4E8}
.slide.mesh li,.slide.bleed li{color:#C9C4E8}
.slide.bleed .kick::after{background:linear-gradient(90deg,var(--gold2),transparent)}
/* ---------- print: art direction must survive PDF ---------- */
@media print{
.slide.mesh{background:#1B1533!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.slide.bleed .scrim,.slide.bleed img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.iso i,.stackbar div,.wheel .seg,.ridge path{opacity:1!important;transform:none!important}
.stackbar div{width:var(--w)!important}
.ridge path.rl{stroke-dashoffset:0!important}
}
/* slide number must stay pinned even inside a mesh stacking context */
.slide.mesh>.no,.slide.bleed .no{position:absolute}
/* long strings ($120K) need a smaller step than a bare integer */
.hero-n .nbig.long{font-size:clamp(64px,calc(9.4 * var(--cw)),146px)}
/* ---------- defence-in-depth layers ---------- */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.layerc{position:relative;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px 20px;
background:var(--soft);overflow:hidden;opacity:0;transform:translateY(12px);
transition:opacity .6s var(--ease),transform .6s var(--ease)}
.slide.seen .layerc{opacity:1;transform:none}
.slide.seen .layerc:nth-child(2){transition-delay:.12s}
.slide.seen .layerc:nth-child(3){transition-delay:.24s}
.layerc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:linear-gradient(180deg,var(--v),var(--v2))}
.layerc.deep{background:linear-gradient(155deg,#241C46,#1B1533);border-color:transparent}
.layerc.deep::before{background:linear-gradient(180deg,var(--gold2),var(--gold))}
.layerc .ln{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.layerc b{display:block;font-family:var(--display);font-size:18px;color:var(--text);margin:8px 0 5px}
.layerc span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}
.layerc.deep b{color:#fff}.layerc.deep span{color:#C9C4E8}.layerc.deep .ln{color:var(--gold2)}
@media print{.layerc{opacity:1!important;transform:none!important}}
@media screen and (max-width:860px){.layers{grid-template-columns:1fr}}
.hero-n .nbig.long{letter-spacing:-.028em}
.ridge .axis{stroke:rgba(255,255,255,.16);stroke-width:1}
.ridge .today{stroke:rgba(228,184,88,.5);stroke-width:1;stroke-dasharray:3 5}
/* ============================================================
V3 — CINEMA LAYER
Film grain, duotone grade, parallax, chapter numerals,
a slide rail, and two new data-art figures.
============================================================ */
/* ---------- film grain over dark slides ---------- */
.slide.mesh::after{z-index:0}
.grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.30;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:160px 160px}
@media print{.grain{opacity:.16}}
/* ---------- photography grade: one brand look across every shot ---------- */
.slide.bleed .duo{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(150deg,rgba(94,80,184,.42),rgba(228,184,88,.14));mix-blend-mode:soft-light}
.slide.bleed img{filter:saturate(.92) contrast(1.04)}
@media(prefers-reduced-motion:no-preference){
.slide.bleed.kb img{transform:scale(1.06);transition:transform 14s linear}
.slide.bleed.kb.seen img{transform:scale(1.0)}
}
/* a hairline that anchors the text block to the frame */
.slide.bleed .on::before{content:"";position:absolute;left:calc(var(--slide-pad) - 22px);top:calc(var(--slide-pad) + 4px);
bottom:calc(var(--slide-pad) + 4px);width:2px;border-radius:2px;
background:linear-gradient(180deg,var(--gold2),rgba(228,184,88,0))}
@media screen and (max-width:860px){.slide.bleed .on::before{display:none}}
/* ---------- chapter numeral, sitting behind the type ---------- */
.ghostn{position:absolute;right:calc(2.2 * var(--cw));bottom:calc(-3.2 * var(--cw));font-family:var(--display);font-weight:700;
font-size:clamp(180px,calc(26 * var(--cw)),420px);line-height:.7;letter-spacing:-.06em;pointer-events:none;z-index:0;
color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.10)}
.slide:not(.mesh):not(.bleed) .ghostn{-webkit-text-stroke-color:rgba(34,27,52,.055)}
/* ---------- slide rail ---------- */
.rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:60;display:grid;gap:9px}
.rail a{display:block;width:9px;height:9px;border-radius:50%;background:rgba(34,27,52,.20);
transition:background .3s var(--ease),transform .3s var(--ease)}
.rail a:hover{background:var(--v);transform:scale(1.35)}
.rail a.on{background:linear-gradient(150deg,var(--v),var(--gold));transform:scale(1.5)}
.rail a:focus-visible{outline:2px solid var(--v);outline-offset:3px}
.rail .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media screen and (max-width:860px){.rail{display:none}}
@media print{.rail{display:none}}
/* ---------- trade-off table: what an incumbent must give up ---------- */
.tradeoff{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-top:14px;
border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.tradeoff .th{padding:14px 20px;font-family:var(--display);font-weight:700;font-size:13px;
letter-spacing:.12em;text-transform:uppercase;background:var(--soft);color:var(--muted)}
.tradeoff .th.b{background:linear-gradient(120deg,#241C46,#1B1533);color:#fff}
.tradeoff .sp{background:var(--soft);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.tradeoff .tc{padding:16px 20px;font-size:15px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line)}
.tradeoff .tc.b{color:var(--text);background:rgba(94,80,184,.05)}
.tradeoff .tc b{color:var(--text)}
.tradeoff .ar{display:flex;align-items:center;justify-content:center;color:var(--v);font-size:15px;
border-top:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line);
background:var(--soft);padding:0 12px}
@media screen and (max-width:860px){.tradeoff{grid-template-columns:1fr}.tradeoff .ar,.tradeoff .sp{display:none}}
/* ---------- interlocking triad (the moat) ---------- */
.triad{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;margin-top:8px}
.triad svg{width:min(380px,calc(44 * var(--cw)));height:auto}
.triad circle.tr{fill-opacity:.17;stroke-width:2;opacity:0;transform:scale(.86);transform-origin:center;
transition:opacity .7s var(--ease),transform .7s var(--ease)}
.slide.seen .triad circle.tr{opacity:1;transform:none}
.slide.seen .triad circle.tr:nth-of-type(2){transition-delay:.14s}
.slide.seen .triad circle.tr:nth-of-type(3){transition-delay:.28s}
.triad .tlab{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.05em;
text-transform:uppercase;fill:var(--text)}
.triad .tmid{font-family:var(--display);font-weight:700;font-size:15px;fill:var(--gold-deep)}
.triad ul{margin-top:0}
@media screen and (max-width:860px){.triad{grid-template-columns:1fr;gap:20px}.triad svg{width:80%;margin:0 auto}}
/* ---------- agenda gets a hover state worth having ---------- */
.agenda a{transition:background .25s var(--ease),padding-left .25s var(--ease)}
.agenda a:hover{background:var(--soft);padding-left:14px}
.agenda a:hover .at{color:var(--v)}
.agenda a:focus-visible{outline:2px solid var(--v);outline-offset:-2px}
@media print{
.slide{height:172mm!important;max-height:172mm!important;overflow:hidden!important;
padding:12mm 12mm 16mm!important}
.folio{left:12mm;right:12mm;bottom:7mm}
.slide.split>.sc{padding:12mm 10mm 16mm!important}
.slide.split .folio{right:calc(47% + 8mm)}
.slide.bleed .on{padding:12mm 12mm 16mm!important}
}
/* ---------- print: cinema layer must survive ---------- */
@media print{
.slide.bleed .duo,.ghostn{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.slide.bleed.kb img{transform:none!important}
.triad circle.tr,.layerc{opacity:1!important;transform:none!important}
}
/* ---------- pills on photography ---------- */
.slide.bleed .pills span{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24);color:#fff}
/* ---------- parallax base state ---------- */
@media(prefers-reduced-motion:no-preference){
.slide.bleed:not(.kb) img{transform:scale(1.12);will-change:transform}
}
/* ---------- why-now conditions ---------- */
.conds{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.cond{position:relative;padding:22px 22px 24px;border:1px solid var(--line);border-radius:var(--r-md);
background:var(--soft);overflow:hidden}
.cond::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
background:linear-gradient(90deg,var(--v),var(--v2))}
.cond:nth-child(3)::before{background:linear-gradient(90deg,var(--v2),var(--gold))}
.cond .cn{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.18em;color:var(--gold);
display:block;margin-bottom:12px}
.cond b{display:block;font-family:var(--display);font-size:18px;line-height:1.2;color:var(--text);margin-bottom:9px}
.cond .cd{display:block;font-size:14px;line-height:1.55;color:var(--muted)}
.cbar{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:26px;align-items:center;margin-top:22px;
padding:18px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.cbar svg{width:100%;height:auto}
.cbar p{margin:0;font-size:15px}
@media screen and (max-width:860px){.conds{grid-template-columns:1fr}.cbar{grid-template-columns:1fr}}
.cbar .cv{fill:none;stroke:url(#cg);stroke-width:2.6;stroke-linecap:round;
stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.3s var(--ease)}
.slide.seen .cbar .cv{stroke-dashoffset:0}
.slide.seen .cbar .cv:nth-of-type(2){transition-delay:.1s}
.slide.seen .cbar .cv:nth-of-type(3){transition-delay:.2s}
.cbar .cdot{fill:var(--v2)}
.cbar .cnode{fill:var(--gold);opacity:0;transform:scale(.4);transform-origin:240px 38px;
transition:opacity .5s var(--ease) .9s,transform .5s var(--ease) .9s}
.slide.seen .cbar .cnode{opacity:1;transform:none}
.clist{margin-top:0}
.clist li{font-size:15.5px;line-height:1.55;margin-bottom:14px}
/* ---------- ridge axis label ---------- */
.ridge .rlab{font-family:var(--mono);font-size:10px;fill:rgba(228,184,88,.75);letter-spacing:.08em}
/* ---------- status timeline ---------- */
.tl.status .ti.done .td{border-color:var(--good);color:var(--good)}
.tl.status .tc b{display:block}
.st{display:inline-block;margin-left:10px;vertical-align:2px;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
padding:3px 9px;border-radius:var(--r-pill);border:1px solid}
.st.ok{color:#1A7550;border-color:rgba(26,117,80,.4);background:rgba(46,158,107,.09)}
.st.go{color:var(--v);border-color:rgba(94,80,184,.38);background:rgba(94,80,184,.08)}
.st.wait{color:#876520;border-color:rgba(135,101,32,.42);background:rgba(228,184,88,.13)}
@media screen and (max-width:860px){.deckbar .conf{font-size:11px}}
/* ---------- mobile: keep the pairing legible when the table collapses ---------- */
@media screen and (max-width:860px){
.tradeoff{border-radius:var(--r-md)}
.tradeoff .th{display:none}
.tradeoff .tc{padding:32px 18px 16px;position:relative}
.tradeoff .tc::before{content:"A tracker company today";position:absolute;top:11px;left:18px;
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tradeoff .tc.b{background:rgba(94,80,184,.09);border-left:3px solid var(--v);border-bottom:2px solid var(--line)}
.tradeoff .tc.b::before{content:"What it would have to become";color:var(--v)}
.wheel svg{width:96%}
.wheel .lab{font-size:12px}
.triad svg{width:92%}
}
/* ============================================================
V4 — PHOTOGRAPHY LAYER
The library carries the deck: colourway strip, context trio,
community mosaic, and split photo slides.
============================================================ */
/* ---------- shared photo card treatment ---------- */
.pc{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--soft);
opacity:0;transform:translateY(16px) scale(.985);
transition:opacity .7s var(--ease),transform .7s var(--ease)}
.slide.seen .pc{opacity:1;transform:none}
.pc img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) contrast(1.03)}
.pc .cap{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;
background:linear-gradient(0deg,rgba(18,13,32,.86),rgba(18,13,32,0));
font-family:var(--display);font-weight:650;font-size:14px;color:#fff;letter-spacing:.01em}
.pc .cap i{display:block;font-style:normal;font-weight:400;font-size:11px;color:#CFC9E6;margin-top:2px}
/* ---------- colourway strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.strip .pc{aspect-ratio:4/3}
.strip .pc:nth-child(2){transition-delay:.06s}.strip .pc:nth-child(3){transition-delay:.12s}
.strip .pc:nth-child(4){transition-delay:.18s}.strip .pc:nth-child(5){transition-delay:.24s}
.strip .pc:nth-child(6){transition-delay:.30s}.strip .pc:nth-child(7){transition-delay:.36s}
.strip .pc:nth-child(8){transition-delay:.42s}
@media screen and (max-width:860px){.strip{grid-template-columns:repeat(2,1fr);gap:10px}}
/* ---------- context trio ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.trio .pc{aspect-ratio:4/3}
.trio .pc:nth-child(2){transition-delay:.1s}.trio .pc:nth-child(3){transition-delay:.2s}
.trio .tx{margin-top:12px}
.trio h3{font-size:18px;margin:0 0 5px}
.trio p{font-size:14px;margin:0}
@media screen and (max-width:860px){.trio{grid-template-columns:1fr}}
/* ---------- community mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:104px;gap:10px;margin-top:12px}
.mosaic .pc:nth-child(1){grid-column:span 2;grid-row:span 2}
.mosaic .pc:nth-child(2){grid-column:span 2;grid-row:span 1}
.mosaic .pc:nth-child(3){grid-column:span 2;grid-row:span 2}
.mosaic .pc:nth-child(4){grid-column:span 1;grid-row:span 1}
.mosaic .pc:nth-child(5){grid-column:span 1;grid-row:span 1}
.mosaic .pc:nth-child(6){grid-column:span 2;grid-row:span 1}
.mosaic .pc:nth-child(7){grid-column:span 2;grid-row:span 1}
.mosaic .pc:nth-child(8){grid-column:span 2;grid-row:span 1}
.mosaic .pc:nth-child(n+2){transition-delay:calc(var(--i,0) * 1ms)}
@media screen and (max-width:860px){
.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:94px}
.mosaic .pc:nth-child(n){grid-column:span 1;grid-row:span 1}
.mosaic .pc:nth-child(1){grid-column:span 2;grid-row:span 2}
}
/* ---------- split: photography holds one half of the slide ---------- */
.slide.split{display:grid;grid-template-columns:1.05fr .95fr;gap:0;padding:0;overflow:hidden;align-items:stretch}
.slide.split>.sc{padding:var(--slide-pad);display:flex;flex-direction:column;justify-content:center;min-width:0}
.slide.split>.sp{position:relative;overflow:hidden}
.slide.split>.sp img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) contrast(1.03)}
.slide.split>.sp .duo{position:absolute;inset:0;background:linear-gradient(150deg,rgba(94,80,184,.34),rgba(228,184,88,.12));
mix-blend-mode:soft-light;pointer-events:none}
.slide.split .no{right:auto;left:calc(var(--slide-pad) - 2px)}
@media screen and (max-width:860px){
.slide.split{grid-template-columns:1fr}
.slide.split>.sp{height:440px;order:-1}
}
@media print{.pc{opacity:1!important;transform:none!important}}
/* ============================================================
V5 — REFINEMENT
Editorial folio, fixed title zone, deeper ink, real card craft.
============================================================ */
/* ---------- title zone: every slide starts its headline on the same line ---------- */
.slide{justify-content:flex-start}
.slide.pull,.slide.bleed,.slide.cover{justify-content:center}
.slide>.fnote{margin-top:14px}
.slide h2,.slide .big,.slide.pull .q{text-wrap:balance}
.slide h2{margin-bottom:22px}
/* ---------- folio ---------- */
.folio{position:absolute;left:var(--slide-pad);right:var(--slide-pad);bottom:22px;display:flex;align-items:center;gap:14px;
padding-top:11px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);pointer-events:none;z-index:2}
.folio .fm{flex:1}
.folio .fc{color:var(--v)}
.folio .fp{font-variant-numeric:tabular-nums}
.slide .no{display:none}
.slide.mesh .folio{border-top-color:rgba(255,255,255,.14);color:#B9B3D6}
.slide.mesh .folio .fc{color:var(--gold2)}
.slide.bleed .folio{border-top-color:rgba(255,255,255,.22);color:rgba(255,255,255,.82);
left:var(--slide-pad);right:var(--slide-pad)}
.slide.bleed .folio .fc{color:var(--gold2)}
.slide.split .folio{left:var(--slide-pad);right:calc(47% + 20px)}
@media screen and (max-width:860px){.folio{font-size:11px;letter-spacing:.08em;gap:10px}.folio .fm{display:none}}
/* ---------- deeper ink for the dark slides ---------- */
.slide.mesh{background:radial-gradient(126% 120% at 14% -10%,#2C2358 0%,#191234 52%,#120C24 100%)}
.slide.mesh::after{opacity:.9}
.slide.mesh{box-shadow:var(--sh),inset 0 0 140px rgba(8,5,18,.55)}
/* ---------- card craft: lift the surfaces off the cream ---------- */
.dcard,.cond,.layerc,.flowd .fn,.cbar,.tradeoff,.slide table{
background:var(--surface);box-shadow:0 1px 0 rgba(34,27,52,.03),0 10px 26px rgba(40,28,72,.055)}
.flowd .fn.hot{background:linear-gradient(160deg,rgba(228,184,88,.16),rgba(228,184,88,.06))}
.slide.mesh .dcard{background:rgba(255,255,255,.055);box-shadow:none}
.pc{box-shadow:0 10px 26px rgba(40,28,72,.10)}
.pc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(34,27,52,.07)}
/* ---------- motion: a touch of focus pull ---------- */
@media(prefers-reduced-motion:no-preference){
.slide [data-anim]{filter:blur(6px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease)}
.slide.seen [data-anim]{filter:none}
}
@media print{.slide [data-anim]{filter:none!important}}
/* reserve the folio's band so nothing sits on top of it */
.slide{padding-bottom:calc(var(--slide-pad) + 30px)}
.slide.bleed .on{padding-bottom:calc(var(--slide-pad) + 34px)}
.slide.split>.sc{padding-bottom:calc(var(--slide-pad) + 30px)}
/* ---------- lookbook: photography fills the split panel ---------- */
.lookbook{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px;padding:8px;height:100%}
.lookbook .pc{border-radius:var(--r-sm);box-shadow:none}
.lookbook .cap{padding:24px 12px 10px;font-size:12px}
.lookbook .cap i{font-size:11px}
@media screen and (max-width:860px){.lookbook{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;padding:10px;gap:8px}
.lookbook .cap{padding:20px 10px 8px;font-size:11px}}
/* ============================================================
V6 — GRID DISCIPLINE + MORE FIGURES
One gutter, one card padding, one radius. Every figure snaps.
============================================================ */
:root{ --g:16px; --cardpad:20px 22px; }
.cols,.dcards,.conds,.layers,.trio,.strip,.metrics{gap:var(--g)}
.dcard,.cond,.layerc{padding:var(--cardpad)}
.dcards,.cols{margin-top:var(--g)}
.flowd{gap:var(--g);margin-top:var(--g)}
.flowd .fn{margin:0;padding:16px 18px;flex:1 1 0}
.flowd .fa{padding:0}
.metrics{margin-top:var(--g)}
/* ---------- ratio bar: two magnitudes on one baseline ---------- */
.ratio{display:grid;gap:10px;margin-top:var(--g)}
.ratio .rr{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:14px;align-items:center}
.ratio .rk{font-family:var(--display);font-weight:650;font-size:14px;color:var(--text)}
.ratio .rt{height:26px;border-radius:7px;background:var(--soft);border:1px solid var(--line);overflow:hidden}
.ratio .rf{height:100%;width:0;border-radius:6px;transition:width 1.2s var(--ease)}
.slide.seen .ratio .rf{width:var(--w)}
.ratio .rr.a .rf{background:linear-gradient(90deg,var(--vd),var(--v2))}
.ratio .rr.b .rf{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.ratio .rv{font-family:var(--display);font-weight:700;font-size:15px;color:var(--text);
font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.ratio .rn{font-size:12px;color:var(--muted);margin-top:2px}
/* ---------- fan-in: many chains, one balance ---------- */
.fanin{width:100%;aspect-ratio:1120/120;height:auto;flex:none;display:block;margin-top:2px;margin-bottom:2px}
.fanin .fl{fill:none;stroke:var(--v2);stroke-width:1.6;opacity:.55;
stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.2s var(--ease)}
.slide.seen .fanin .fl{stroke-dashoffset:0}
.fanin .fnode{fill:var(--surface);stroke:var(--line);stroke-width:1}
.fanin .fhub{fill:url(#hubg)}
.fanin .ft{font-family:var(--mono);font-size:10px;fill:var(--muted);letter-spacing:.04em}
.fanin .fh{font-family:var(--display);font-weight:700;font-size:12px;fill:#fff}
/* ---------- the wall: what is ring-fenced from what ---------- */
.wall{display:grid;grid-template-columns:1fr 46px 1fr;align-items:stretch;margin-top:var(--g)}
.wall .wc{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--cardpad);background:var(--surface);
box-shadow:0 1px 0 rgba(34,27,52,.03),0 10px 26px rgba(40,28,72,.055)}
.wall .wc.deposits{background:linear-gradient(155deg,rgba(94,80,184,.07),rgba(123,108,231,.03));border-color:rgba(94,80,184,.28)}
.wall .wh{font-family:var(--display);font-weight:700;font-size:15px;color:var(--text);margin-bottom:8px}
.wall .wc p{font-size:14px;margin:0;color:var(--muted)}
.wall .wb{position:relative;display:flex;align-items:center;justify-content:center}
.wall .wb::before{content:"";position:absolute;top:8px;bottom:8px;width:3px;border-radius:3px;
background:repeating-linear-gradient(180deg,var(--gold) 0 8px,transparent 8px 15px)}
.wall .wl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
background:var(--surface);padding:5px 8px;white-space:nowrap}
@media screen and (max-width:860px){.wall{grid-template-columns:1fr}.wall .wb{height:44px}
.wall .wb::before{top:auto;left:8px;right:8px;bottom:auto;width:auto;height:3px;
background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 15px)}
.wall .wl{transform:translate(-50%,-50%);font-size:11px}}
/* ---------- payment bars: what a member actually pays ---------- */
.paybar{display:grid;grid-template-columns:repeat(13,1fr);gap:6px;align-items:end;height:180px;margin-top:var(--g)}
.paybar .pb{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
.paybar .pv{font-family:var(--display);font-weight:700;font-size:11px;color:var(--text);font-variant-numeric:tabular-nums}
.paybar .pbar{width:100%;height:0;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--v2),var(--v));
transition:height 1s var(--ease)}
.slide.seen .paybar .pbar{height:var(--h)}
.paybar .pb.first .pbar{background:linear-gradient(180deg,var(--gold2),var(--gold))}
.paybar .pl{font-family:var(--mono);font-size:10px;color:var(--muted)}
@media screen and (max-width:860px){.paybar{height:150px;gap:4px;grid-template-columns:repeat(7,1fr)}
.paybar .pb:nth-child(n+8){display:none}
.paybar .pv{font-size:11px}.paybar .pl{font-size:11px}}
@media print{.ratio .rf{width:var(--w)!important}.paybar .pbar{height:var(--h)!important}}
/* content must not be silently squashed — it either fits or the gate catches it */
.slide>*{flex:none}
.slide.split>*{flex:1 1 auto}
/* ---------- fit discipline: the grid has to hold 16:9, so tune the scale once ---------- */
:root{ --slide-pad:64px; --g:14px; }
.slide h2{font-size:clamp(28px,calc(3 * var(--cw)),46px);line-height:1.04;margin-bottom:18px}
.slide .kick{margin-bottom:12px}
.slide{padding-bottom:calc(var(--slide-pad) + 26px)}
.slide.bleed .on{padding-bottom:calc(var(--slide-pad) + 30px)}
.slide.split>.sc{padding-bottom:calc(var(--slide-pad) + 26px)}
.slide li{font-size:15px}
.dcard p,.cond .cd,.layerc span,.wall .wc p{font-size:14px;line-height:1.5}
.dcard h3,.layerc b,.cond b{font-size:16.5px}
.slide .fnote{padding-top:9px;margin-top:13px}
.folio{bottom:19px;padding-top:9px}
/* per-figure fit */
.iso i{width:10px;height:10px;gap:4px}
.iso{gap:4px;max-width:600px}
.ratio .rr{grid-template-columns:118px minmax(0,1fr) auto}
.ratio .rt{height:22px}
.ratio{gap:8px}
.agenda a,.agenda div{padding:12px 4px}
.trio .pc{aspect-ratio:16/10}
.trio h3{font-size:16px}
.trio p{font-size:13px}
.mosaic{grid-auto-rows:92px}
.tl{gap:14px}
.tl .tc span{font-size:14px}
.triad svg{width:min(320px,calc(38 * var(--cw)))}
.metric-b b{font-size:40px}
.paybar{height:158px}
.alloc{height:46px;margin-top:12px}
.tl .td{width:28px;height:28px;border-radius:9px;font-size:11px}
.tl .ti{grid-template-columns:30px 1fr;gap:14px}
.tl::before{left:13px}
.slide ol.num li{margin-bottom:10px}
.wall .wc{padding:16px 18px}
.wall .wh{margin-bottom:6px}
.cols .dcard p{font-size:13.8px}
.slide ol.num li{font-size:14.6px;margin-bottom:9px}
.tl .tc b{font-size:15px}
.cols.wide .dcard{padding:16px 18px}
.cols.wide .dcard h3{font-size:15.6px}
.cols.wide .tl{margin-top:8px}
.cols.wide ol.num{margin-top:0}
.cols.wide .dcard{margin-top:20px!important}
/* ---------- yield streams: one hundred per cent, eight named sources ---------- */
.streams{display:grid;gap:10px;margin-top:var(--g)}
.sbar{display:flex;height:44px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line)}
.sbar div{width:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);
font-weight:700;font-size:12px;color:#fff;transition:width 1s var(--ease);white-space:nowrap;overflow:hidden}
.slide.seen .sbar div{width:var(--w)}
.sbar .r1{background:linear-gradient(180deg,#4A3E9E,#3D3382)}
.sbar .r2{background:linear-gradient(180deg,#6A5AE0,#5546C4)}
.sbar .r3{background:linear-gradient(180deg,#9A8BF0,#7B6CE7);color:#1c1636}
.sbar .r4{background:linear-gradient(180deg,#E4B858,var(--gold-mid));color:var(--rust-ink)}
.slegend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.slegend span{display:inline-flex;align-items:center;gap:7px}
.slegend i{width:11px;height:11px;border-radius:3px;display:block}
.stable{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:4px}
.scard{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface)}
.scard b{display:block;font-family:var(--display);font-size:14px;color:var(--text);margin-bottom:3px}
.scard .sa{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.08em}
.scard span.sd{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:4px}
@media screen and (max-width:860px){.stable{grid-template-columns:1fr 1fr}
.sbar{height:34px}
/* labels do not fit at this width; the legend and the cards carry the numbers */
.sbar div{text-indent:-9999px}}
@media print{.sbar div{width:var(--w)!important}}
/* ============================================================
V7 — MOTION & LIGHT
Pointer-reactive glow, masked type reveals, radial sweeps,
card lift, photo zoom. All of it opt-out under reduced motion,
all of it frozen for print.
============================================================ */
/* ---------- pointer-reactive light on the dark slides ---------- */
.slide.mesh .glow{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
transition:opacity .5s var(--ease);
background:radial-gradient(420px 420px at var(--mx,50%) var(--my,40%),
rgba(159,143,255,.20),rgba(159,143,255,0) 68%)}
.slide.mesh:hover .glow{opacity:1}
/* ---------- masked type reveal ---------- */
@media(prefers-reduced-motion:no-preference){
.reveal-mask{display:block;overflow:hidden}
.reveal-mask>span{display:block;transform:translateY(112%);
transition:transform .85s cubic-bezier(.16,1,.3,1)}
.slide.seen .reveal-mask>span{transform:none}
.slide.seen .reveal-mask:nth-of-type(2)>span{transition-delay:.09s}
.slide.seen .reveal-mask:nth-of-type(3)>span{transition-delay:.18s}
}
/* ---------- the gold rule draws itself ---------- */
@media(prefers-reduced-motion:no-preference){
.slide .kick::after{flex-basis:0;transition:flex-basis .8s var(--ease) .15s}
.slide.seen .kick::after{flex-basis:54px}
}
/* ---------- the wheel sweeps out from the centre ---------- */
@media(prefers-reduced-motion:no-preference){
.wheel .seg{transform:scale(.72);transform-box:view-box;transform-origin:150px 150px;
transition:opacity .5s var(--ease),transform .8s cubic-bezier(.16,1,.3,1)}
.slide.seen .wheel .seg{transform:none}
.wheel svg{filter:drop-shadow(0 10px 26px rgba(94,80,184,.18))}
}
/* ---------- the venn breathes at its intersection ---------- */
.triad .tmid{opacity:0;transition:opacity .6s var(--ease) .55s}
.slide.seen .triad .tmid{opacity:1}
/* ---------- cards lift, photographs breathe ---------- */
@media(prefers-reduced-motion:no-preference) and (hover:hover){
.dcard,.cond,.layerc,.scard,.wall .wc,.tradeoff,.flowd .fn{
transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.dcard:hover,.cond:hover,.layerc:hover,.scard:hover,.wall .wc:hover{
transform:translateY(-3px);box-shadow:0 1px 0 rgba(34,27,52,.03),0 18px 40px rgba(40,28,72,.10)}
.pc img{transition:transform .8s var(--ease),filter .5s var(--ease)}
.pc:hover img{transform:scale(1.05)}
.pc:hover .cap{background:linear-gradient(0deg,rgba(18,13,32,.92),rgba(18,13,32,0))}
}
/* ---------- isotype fills as a wave of light ---------- */
@media(prefers-reduced-motion:no-preference){
.iso i.on{box-shadow:0 0 0 0 rgba(123,108,231,.55)}
.slide.seen .iso i.on{animation:isopop .9s var(--ease) both}
@keyframes isopop{
0%{transform:scale(.3);opacity:0;box-shadow:0 0 0 0 rgba(123,108,231,.5)}
55%{transform:scale(1.18);opacity:1;box-shadow:0 0 0 5px rgba(123,108,231,0)}
100%{transform:none;opacity:1;box-shadow:0 0 0 0 rgba(123,108,231,0)}
}
}
/* ---------- mesh blobs drift with the scroll ---------- */
.slide.mesh::before{transform:translate3d(0,calc(var(--drift,0) * 1px),0)}
.slide.mesh::after{transform:translate3d(0,calc(var(--drift,0) * -1.4px),0)}
/* ---------- the hero number gets a slow sheen ---------- */
@media(prefers-reduced-motion:no-preference){
.hero-n .nbig{background-size:190% 100%;background-position:0% 0%}
.slide.seen .hero-n .nbig{animation:sheen 3.6s var(--ease) .35s both}
@keyframes sheen{from{background-position:78% 0%}to{background-position:0% 0%}}
}
@media print{
.reveal-mask>span{transform:none!important}
.slide .kick::after{flex-basis:54px!important}
.wheel .seg{transform:none!important;opacity:1!important}
.triad .tmid{opacity:1!important}
.slide.mesh .glow{display:none}
.iso i.on{animation:none!important;transform:none!important;opacity:1!important}
.hero-n .nbig{animation:none!important;background-position:0 0!important}
}
.slide.mesh>.ghostn,.slide.mesh>.grain,.slide.mesh>.glow{position:absolute}
.slide.pull{padding-bottom:calc(var(--slide-pad) + 52px)}
/* ============================================================
V8 — FIXED CANVAS
A slide is 1280x720, always. The whole canvas is scaled to fit
the viewport, so nothing reflows and nothing can be clipped —
what you see at any width is what prints.
============================================================ */
@media(min-width:861px){
.slide{width:1280px;height:720px;aspect-ratio:auto;flex:none;zoom:var(--scale,1)}
.deck{padding:76px 0 60px;overflow-x:hidden}
}
/* ---------- print: one design canvas, one A4 landscape page ---------- */
@page{ size:297mm 167mm; margin:0; } /* 16:9, so the canvas fills the page exactly */
@media print{
html,body{background:#fff!important}
.deck{padding:0!important;margin:0!important}
.slide{width:1280px!important;height:720px!important;min-height:0!important;max-height:none!important;
zoom:.8769!important;margin:0!important;padding:var(--slide-pad)!important;
padding-bottom:calc(var(--slide-pad) + 26px)!important;
border:0!important;border-radius:0!important;box-shadow:none!important;
break-after:page;page-break-after:always;break-inside:avoid;page-break-inside:avoid}
.slide.bleed .on{padding-bottom:calc(var(--slide-pad) + 30px)!important}
.slide.split>.sc{padding:var(--slide-pad)!important;padding-bottom:calc(var(--slide-pad) + 26px)!important}
.slide.pull{padding-bottom:calc(var(--slide-pad) + 52px)!important}
.slide:last-child{break-after:auto;page-break-after:auto}
.folio{bottom:19px}
}
.cols.wide .dcard{margin-top:14px!important}
.cols.wide .tl{gap:12px}
.cols.wide ol.num li{margin-bottom:8px}
.ratio .rt{display:block}
.ratio .rf{display:block}
.ratio .rk{display:block}
/* ═══ wellex-deck3.css ═══════════════════════════════════ */
/* ============================================================
WELLEX DECK — MLM LAYER
Components that only the field decks need: the ecosystem
diagram, the rank ladder, the objection grid, the journey.
Loads after wellex-deck2.css.
============================================================ */
/* ---------- language switch ---------- */
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;flex:none}
.langsw button{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 12px;
background:none;border:0;color:var(--muted);cursor:pointer}
.langsw button[aria-pressed="true"]{background:var(--v);color:#fff}
.langsw button:focus-visible{outline:2px solid var(--v);outline-offset:2px}
/* ---------- one ecosystem, four products ---------- */
.eco{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);margin-top:var(--g);position:relative}
.eco::before{content:"";position:absolute;left:6%;right:6%;top:34px;height:2px;
background:linear-gradient(90deg,var(--v),var(--v2),var(--gold));opacity:.35}
.ecoc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
padding:18px;box-shadow:0 1px 0 rgba(34,27,52,.03),0 10px 26px rgba(40,28,72,.055);
opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.slide.seen .ecoc{opacity:1;transform:none}
.slide.seen .ecoc:nth-child(2){transition-delay:.1s}
.slide.seen .ecoc:nth-child(3){transition-delay:.2s}
.slide.seen .ecoc:nth-child(4){transition-delay:.3s}
.ecoc .en{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-weight:700;font-size:15px;color:#fff;margin-bottom:12px;
background:linear-gradient(150deg,var(--vd),var(--v2))}
.ecoc:nth-child(4) .en{background:linear-gradient(150deg,var(--gold),var(--gold2));color:var(--rust-ink)}
.ecoc b{display:block;font-family:var(--display);font-size:16.5px;color:var(--text);margin-bottom:6px}
.ecoc span{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.ecoc i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--gold);margin-top:10px}
@media screen and (max-width:860px){.eco{grid-template-columns:1fr}.eco::before{display:none}}
/* ---------- rank ladder ---------- */
.ranks{width:100%;border-collapse:separate;border-spacing:0;margin-top:var(--g);font-variant-numeric:tabular-nums}
.ranks th{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);text-align:right;padding:0 10px 8px;border-bottom:1px solid var(--line)}
.ranks th:first-child{text-align:left}
.ranks td{font-size:13px;color:var(--text);text-align:right;padding:6px 10px;border-bottom:1px solid var(--line)}
.ranks td:first-child{text-align:left;font-family:var(--display);font-weight:650}
.ranks tr:last-child td{border-bottom:0}
.ranks tr.hi td{background:rgba(94,80,184,.06)}
.ranks tr.gold td{background:rgba(228,184,88,.12)}
.ranks .rd{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:9px;vertical-align:1px;
background:linear-gradient(150deg,var(--vd),var(--v2))}
.ranks tr.gold .rd{background:linear-gradient(150deg,var(--gold),var(--gold2))}
.ranks td.pct{color:var(--v);font-family:var(--display);font-weight:700}
.ranks td.money{color:var(--gold);font-family:var(--display);font-weight:700}
@media screen and (max-width:860px){.ranks th:nth-child(3),.ranks td:nth-child(3){display:none}}
/* ---------- seven income streams ---------- */
.sev{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:var(--g)}
.sevc{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--surface);
box-shadow:0 1px 0 rgba(34,27,52,.03),0 8px 20px rgba(40,28,72,.05)}
.sevc.wide{grid-column:span 2}
.sevc .sn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.sevc b{display:block;font-family:var(--display);font-size:15.5px;color:var(--text);margin:6px 0 4px}
.sevc span{display:block;font-size:13px;line-height:1.45;color:var(--muted)}
.sevc .rate{display:inline-block;margin-top:8px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--v);
background:rgba(94,80,184,.08);border:1px solid rgba(94,80,184,.22);border-radius:var(--r-pill);padding:3px 10px}
@media screen and (max-width:860px){.sev{grid-template-columns:1fr}.sevc.wide{grid-column:span 1}}
/* ---------- worked example ---------- */
.calc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:var(--g)}
.calcs{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:var(--soft);position:relative}
.calcs.res{background:linear-gradient(155deg,#241C46,#1B1533);border-color:transparent}
.calcs .cl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.calcs .cv{font-family:var(--display);font-weight:700;font-size:25px;color:var(--text);margin:6px 0 2px;
font-variant-numeric:tabular-nums}
.calcs .cd{font-size:12px;color:var(--muted);line-height:1.45}
.calcs.res .cl{color:var(--gold2)}.calcs.res .cv{color:#fff}.calcs.res .cd{color:#C9C4E8}
@media screen and (max-width:860px){.calc{grid-template-columns:1fr 1fr}}
/* ---------- objection grid ---------- */
.obj{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--g)}
.objc{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--surface)}
.objc q{display:block;font-family:var(--display);font-weight:700;font-size:14px;color:var(--text);
quotes:none;margin-bottom:6px}
.objc q::before{content:"— "}
.objc span{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.objc b{color:var(--text)}
@media screen and (max-width:860px){.obj{grid-template-columns:1fr}}
/* ---------- ninety-day journey ---------- */
.jrn{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--g);position:relative}
.jrn::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;
background:linear-gradient(90deg,var(--v),var(--v2) 60%,var(--gold))}
.jrnc{position:relative;padding:0 14px 0 0}
.jrnc .jd{width:40px;height:40px;border-radius:14px;background:var(--surface);border:2px solid var(--v);
display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;
font-size:12px;color:var(--v);position:relative;z-index:1}
.jrnc:last-child .jd{border-color:var(--gold);color:var(--gold)}
.jrnc b{display:block;font-family:var(--display);font-size:15.5px;color:var(--text);margin:12px 0 5px}
.jrnc span{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
@media screen and (max-width:860px){.jrn{grid-template-columns:1fr;gap:14px}.jrn::before{display:none}}
/* ---------- fit tuning against the 1280x720 canvas ---------- */
.sev{grid-template-columns:repeat(4,1fr);gap:10px}
.sevc{padding:11px 13px}
.sevc b{font-size:14px;margin:5px 0 3px}
.sevc span{font-size:12.2px;line-height:1.4}
.sevc .rate{margin-top:6px;font-size:12px;padding:2px 9px}
.obj{grid-template-columns:repeat(3,1fr);gap:10px}
.objc{padding:11px 13px}
.objc q{font-size:13px;margin-bottom:4px}
.objc span{font-size:12.2px;line-height:1.42}
.ranks td{padding:4px 9px;font-size:12px}
.ranks th{padding:0 9px 6px;font-size:10px}
.eco{gap:12px}
.ecoc{padding:15px 16px}
.ecoc .en{width:32px;height:32px;border-radius:11px;font-size:14px;margin-bottom:9px}
.ecoc b{font-size:15.5px}
.ecoc span{font-size:13px;line-height:1.45}
.jrnc b{font-size:15px;margin:10px 0 4px}
.jrnc span{font-size:12.6px;line-height:1.45}
.calcs{padding:13px 15px}
.calcs .cv{font-size:22px;margin:5px 0 2px}
.slide.pull .q{font-size:clamp(26px,calc(3.2 * var(--cw)),46px)}
.slide.pull .qs{font-size:15px;margin-top:16px;max-width:52ch}
.obj{gap:9px}
.objc{padding:10px 12px}
.objc q{font-size:13px}
.objc span{font-size:11.8px;line-height:1.4}
.cols.wide .tl .tc span{font-size:13.2px}
.cols.wide ol.num li{font-size:14px;margin-bottom:7px}
.cols.wide .tl .ti{align-items:start}
.cols.wide .tl{gap:10px}
.cols.wide .dcard{margin-top:12px!important}
.slide .fnote{padding-top:8px}
/* ============================================================
V2 — THE LOOP, THE ASSISTANT, AND MOTION FOR EVERYTHING NEW
============================================================ */
/* ---------- the ecosystem loop ---------- */
.loop{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:38px;align-items:center;margin-top:10px}
.loop svg{width:100%;height:auto}
.loop .ring{fill:none;stroke:var(--line);stroke-width:1.5}
.loop .arc{fill:none;stroke-width:3;stroke-linecap:round;
stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset .9s var(--ease)}
.slide.seen .loop .arc{stroke-dashoffset:0}
.slide.seen .loop .arc:nth-of-type(2){transition-delay:.18s}
.slide.seen .loop .arc:nth-of-type(3){transition-delay:.36s}
.slide.seen .loop .arc:nth-of-type(4){transition-delay:.54s}
.loop .nd{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;
transition:opacity .5s var(--ease),transform .5s var(--ease)}
.slide.seen .loop .nd{opacity:1;transform:none}
.slide.seen .loop .nd:nth-of-type(2){transition-delay:.12s}
.slide.seen .loop .nd:nth-of-type(3){transition-delay:.24s}
.slide.seen .loop .nd:nth-of-type(4){transition-delay:.36s}
.loop .nl{font-family:var(--display);font-weight:700;font-size:12px;fill:var(--text)}
.loop .nn{font-family:var(--mono);font-size:10px;fill:var(--gold);letter-spacing:.1em}
.loop .ctr{font-family:var(--display);font-weight:700;font-size:13px;fill:var(--v)}
.loop .ctrs{font-family:var(--mono);font-size:10px;fill:var(--muted);letter-spacing:.14em}
.loopl{display:grid;gap:11px}
.loopr{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;
opacity:0;transform:translateX(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.slide.seen .loopr{opacity:1;transform:none}
.slide.seen .loopr:nth-child(2){transition-delay:.12s}
.slide.seen .loopr:nth-child(3){transition-delay:.24s}
.slide.seen .loopr:nth-child(4){transition-delay:.36s}
.loopr i{font-style:normal;width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-weight:700;font-size:12px;color:#fff;background:linear-gradient(150deg,var(--vd),var(--v2))}
.loopr:nth-child(4) i{background:linear-gradient(150deg,var(--gold),var(--gold2));color:var(--rust-ink)}
.loopr b{display:block;font-family:var(--display);font-size:15px;color:var(--text);margin-bottom:2px}
.loopr span{display:block;font-size:13.2px;line-height:1.45;color:var(--muted)}
@media screen and (max-width:860px){.loop{grid-template-columns:1fr;gap:18px}}
/* ---------- the assistant: signal in, sentence out ---------- */
.asst{display:grid;grid-template-columns:1fr auto 1.15fr;gap:18px;align-items:center;margin-top:var(--g)}
.sigs{display:grid;gap:8px}
.sig{display:grid;grid-template-columns:74px 1fr auto;gap:10px;align-items:center;
border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;background:var(--surface);
opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.slide.seen .sig{opacity:1;transform:none}
.slide.seen .sig:nth-child(2){transition-delay:.08s}
.slide.seen .sig:nth-child(3){transition-delay:.16s}
.slide.seen .sig:nth-child(4){transition-delay:.24s}
.sig .sk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sig .sm{height:6px;border-radius:4px;background:var(--soft);overflow:hidden}
.sig .sm i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--vd),var(--v2));
transition:width .9s var(--ease) .3s}
.slide.seen .sig .sm i{width:var(--w)}
.sig .sv{font-family:var(--display);font-weight:700;font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
.sig.down .sm i{background:linear-gradient(90deg,var(--warn),#E4B858)}
.asst .arrw{font-size:22px;color:var(--v);opacity:0;transition:opacity .4s var(--ease) .5s}
.slide.seen .asst .arrw{opacity:1}
.say{border-radius:var(--r-md);padding:20px 22px;background:linear-gradient(155deg,#241C46,#1B1533);
color:#fff;position:relative;opacity:0;transform:translateY(10px);
transition:opacity .6s var(--ease) .55s,transform .6s var(--ease) .55s}
.slide.seen .say{opacity:1;transform:none}
.say .sh{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);margin-bottom:10px}
.say p{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.35;color:#fff;margin:0 0 10px}
.say small{display:block;font-size:12px;line-height:1.5;color:#C9C4E8}
@media screen and (max-width:860px){.asst{grid-template-columns:1fr}.asst .arrw{transform:rotate(90deg);justify-self:center}}
/* ---------- motion for every new component ---------- */
@media(prefers-reduced-motion:no-preference){
.sevc,.objc,.jrnc,.calcs,.scard{opacity:0;transform:translateY(12px);
transition:opacity .5s var(--ease),transform .5s var(--ease)}
.slide.seen .sevc,.slide.seen .objc,.slide.seen .jrnc,.slide.seen .calcs,.slide.seen .scard{opacity:1;transform:none}
.slide.seen .sevc:nth-child(2),.slide.seen .objc:nth-child(2),.slide.seen .jrnc:nth-child(2),
.slide.seen .calcs:nth-child(2),.slide.seen .scard:nth-child(2){transition-delay:.06s}
.slide.seen .sevc:nth-child(3),.slide.seen .objc:nth-child(3),.slide.seen .jrnc:nth-child(3),
.slide.seen .calcs:nth-child(3),.slide.seen .scard:nth-child(3){transition-delay:.12s}
.slide.seen .sevc:nth-child(4),.slide.seen .objc:nth-child(4),.slide.seen .jrnc:nth-child(4),
.slide.seen .calcs:nth-child(4),.slide.seen .scard:nth-child(4){transition-delay:.18s}
.slide.seen .sevc:nth-child(5),.slide.seen .objc:nth-child(5){transition-delay:.24s}
.slide.seen .sevc:nth-child(6),.slide.seen .objc:nth-child(6){transition-delay:.30s}
.slide.seen .sevc:nth-child(7),.slide.seen .objc:nth-child(7){transition-delay:.36s}
.slide.seen .objc:nth-child(8){transition-delay:.42s}
/* the rank ladder fills in row by row */
.ranks tbody tr{opacity:0;transform:translateX(-8px);
transition:opacity .4s var(--ease),transform .4s var(--ease)}
.slide.seen .ranks tbody tr{opacity:1;transform:none}
.slide.seen .ranks tbody tr:nth-child(1){transition-delay:.02s}
.slide.seen .ranks tbody tr:nth-child(2){transition-delay:.07s}
.slide.seen .ranks tbody tr:nth-child(3){transition-delay:.12s}
.slide.seen .ranks tbody tr:nth-child(4){transition-delay:.17s}
.slide.seen .ranks tbody tr:nth-child(5){transition-delay:.22s}
.slide.seen .ranks tbody tr:nth-child(6){transition-delay:.27s}
.slide.seen .ranks tbody tr:nth-child(7){transition-delay:.32s}
.slide.seen .ranks tbody tr:nth-child(8){transition-delay:.37s}
.slide.seen .ranks tbody tr:nth-child(9){transition-delay:.42s}
.slide.seen .ranks tbody tr:nth-child(10){transition-delay:.47s}
.ranks tbody tr:hover td{background:rgba(94,80,184,.09)}
}
@media print{
.sevc,.objc,.jrnc,.calcs,.scard,.ranks tbody tr,.loopr,.sig,.say{opacity:1!important;transform:none!important}
.loop .arc{stroke-dashoffset:0!important}
.loop .nd{opacity:1!important;transform:none!important}
.sig .sm i{width:var(--w)!important}
}
.loop{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:30px;margin-top:4px}
.loopr b{font-size:14.2px}
.loopr span{font-size:12.6px;line-height:1.42}
.loopl{gap:9px}
.asst{gap:16px;margin-top:10px}
.sig{padding:7px 11px;grid-template-columns:66px 1fr auto}
.sigs{gap:6px}
.say{padding:16px 18px}
.say p{font-size:16.5px;margin-bottom:8px}
.say small{font-size:12px;line-height:1.45}
.say .sh{margin-bottom:8px}
/* ============================================================
FOUNDING LEADERSHIP — equity, the race, the council
============================================================ */
.eqbar{display:flex;height:52px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);margin-top:var(--g)}
.eqbar div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:0;
font-family:var(--display);transition:width 1s var(--ease);overflow:hidden;white-space:nowrap}
.slide.seen .eqbar div{width:var(--w)}
.eqbar b{font-size:15px;font-weight:700}
.eqbar span{font-size:11px;opacity:.9;letter-spacing:.04em}
.eqbar .e1{background:linear-gradient(180deg,#4A3E9E,#3D3382);color:#fff}
.eqbar .e2{background:linear-gradient(180deg,#6A5AE0,#5546C4);color:#fff}
.eqbar .e3{background:linear-gradient(180deg,#9A8BF0,#7B6CE7);color:#1c1636}
.eqbar .e4{background:linear-gradient(180deg,#E4B858,var(--gold-mid));color:var(--rust-ink)}
.tranche{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:var(--g);position:relative}
.tranche::before{content:"";position:absolute;left:0;right:0;top:16px;height:2px;
background:linear-gradient(90deg,var(--v),var(--v2) 62%,var(--gold))}
.trn{position:relative;padding-right:10px;opacity:0;transform:translateY(10px);
transition:opacity .5s var(--ease),transform .5s var(--ease)}
.slide.seen .trn{opacity:1;transform:none}
.slide.seen .trn:nth-child(2){transition-delay:.1s}
.slide.seen .trn:nth-child(3){transition-delay:.2s}
.slide.seen .trn:nth-child(4){transition-delay:.3s}
.trn .tp{width:34px;height:34px;border-radius:12px;background:var(--surface);border:2px solid var(--v);
display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;
font-size:11px;color:var(--v);position:relative;z-index:1}
.trn:last-child .tp{border-color:var(--gold);color:var(--gold)}
.trn b{display:block;font-family:var(--display);font-size:14px;color:var(--text);margin:11px 0 4px}
.trn span{display:block;font-size:12.6px;line-height:1.45;color:var(--muted)}
@media screen and (max-width:860px){.tranche{grid-template-columns:1fr}.tranche::before{display:none}}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:var(--g);align-items:end}
.pod{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:var(--surface);text-align:center;
opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.slide.seen .pod{opacity:1;transform:none}
.slide.seen .pod:nth-child(2){transition-delay:.1s}.slide.seen .pod:nth-child(3){transition-delay:.2s}
.pod.g1{background:linear-gradient(160deg,rgba(228,184,88,.22),rgba(228,184,88,.06));border-color:rgba(135,101,32,.42);padding-top:24px}
.pod .pm{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pod .pe{font-family:var(--display);font-weight:700;font-size:30px;color:var(--text);margin:6px 0 2px}
.pod.g1 .pe{color:var(--gold-deep)}
.pod .pc{font-family:var(--display);font-weight:650;font-size:14px;color:var(--v)}
.pod .px{display:block;font-size:12.2px;color:var(--muted);margin-top:6px;line-height:1.4}
.formula{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:var(--g);
border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:14px 18px}
.formula .fq{font-family:var(--display);font-weight:700;font-size:14px;color:var(--text)}
.formula .op{font-family:var(--display);font-weight:700;font-size:15px;color:var(--v)}
.formula .fb{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--soft);
border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px}
.formula .fw{font-family:var(--display);font-weight:700;font-size:13px;color:var(--gold)}
.seats{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:var(--g)}
.seat{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 10px;background:var(--surface);text-align:center;
opacity:0;transform:scale(.94);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.slide.seen .seat{opacity:1;transform:none}
.slide.seen .seat:nth-child(2){transition-delay:.06s}.slide.seen .seat:nth-child(3){transition-delay:.12s}
.slide.seen .seat:nth-child(4){transition-delay:.18s}.slide.seen .seat:nth-child(5){transition-delay:.24s}
.slide.seen .seat:nth-child(6){transition-delay:.30s}.slide.seen .seat:nth-child(7){transition-delay:.36s}
.seat.chair{background:linear-gradient(155deg,#241C46,#1B1533);border-color:transparent}
.seat .si{width:26px;height:26px;border-radius:9px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-weight:700;font-size:11px;color:#fff;background:linear-gradient(150deg,var(--vd),var(--v2))}
.seat.chair .si{background:linear-gradient(150deg,var(--gold),var(--gold2));color:var(--rust-ink)}
.seat b{display:block;font-family:var(--display);font-size:12px;color:var(--text);line-height:1.25}
.seat span{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.35}
.seat.chair b{color:#fff}.seat.chair span{color:#C9C4E8}
@media screen and (max-width:860px){.seats{grid-template-columns:repeat(2,1fr)}}
@media print{.trn,.pod,.seat{opacity:1!important;transform:none!important}.eqbar div{width:var(--w)!important}}
.podium{gap:10px;margin-top:12px}
.pod{padding:13px 15px}
.pod.g1{padding-top:19px}
.pod .pe{font-size:25px;margin:5px 0 1px}
.pod .px{font-size:11px;margin-top:5px}
.formula{padding:11px 15px;gap:8px;margin-top:12px}
.formula .fb{font-size:11px;padding:4px 10px}
.seats{gap:7px}
.seat{padding:10px 8px}
.seat .si{width:24px;height:24px;margin-bottom:6px}
.tranche{margin-top:12px}
.trn b{font-size:14px;margin:9px 0 3px}
.trn span{font-size:12.2px}
.seats+.dcards{margin-top:12px}
.slide .dcards.c3 .dcard p{font-size:13px}
/* ============================================================
DARK VARIANTS — every field component has to survive a mesh slide
============================================================ */
.slide.mesh .formula{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.slide.mesh .formula .fq{color:#fff}
.slide.mesh .formula .op{color:var(--gold2)}
.slide.mesh .formula .fb{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#CFC9E6}
.slide.mesh .formula .fw{color:var(--gold2)}
.slide.mesh .pod{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)}
.slide.mesh .pod .pm{color:#B9B3D6}
.slide.mesh .pod .pe{color:#fff}
.slide.mesh .pod .pc{color:#C9B6FF}
.slide.mesh .pod .px{color:#B9B3D6}
.slide.mesh .pod.g1{background:linear-gradient(165deg,rgba(228,184,88,.30),rgba(228,184,88,.08));
border-color:rgba(228,184,88,.55);box-shadow:0 0 0 1px rgba(228,184,88,.18),0 22px 60px rgba(228,184,88,.18)}
.slide.mesh .pod.g1 .pm{color:var(--gold2);letter-spacing:.2em}
.slide.mesh .pod.g1 .pe{color:#FFDFA0}
.slide.mesh .pod.g1 .pc{color:#fff}
.slide.mesh .pod.g1 .px{color:var(--rust-paper)}
.slide.mesh .seat{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)}
.slide.mesh .seat b{color:#fff}.slide.mesh .seat span{color:#B9B3D6}
.slide.mesh .sevc,.slide.mesh .objc,.slide.mesh .calcs,.slide.mesh .scard,.slide.mesh .trn,
.slide.mesh .wall .wc,.slide.mesh .cond{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)}
.slide.mesh .sevc b,.slide.mesh .objc q,.slide.mesh .calcs .cv,.slide.mesh .trn b{color:#fff}
.slide.mesh .sevc span,.slide.mesh .objc span,.slide.mesh .calcs .cd,.slide.mesh .trn span{color:#B9B3D6}
.slide.mesh .trn .tp{background:rgba(255,255,255,.08);color:#C9B6FF;border-color:#7B6CE7}
.slide.mesh .eqbar{border-color:rgba(255,255,255,.16)}
.slide.mesh .ranks th{color:#B9B3D6;border-bottom-color:rgba(255,255,255,.16)}
.slide.mesh .ranks td{color:#EDEAF6;border-bottom-color:rgba(255,255,255,.10)}
.slide.mesh .ranks td.pct{color:#C9B6FF}
.slide.mesh .ranks td.money{color:var(--gold2)}
/* ---------- the podium, made worth looking at ---------- */
.podium{align-items:end;gap:14px}
.pod{position:relative;overflow:hidden;border-radius:var(--r-md)}
.pod::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,transparent,var(--v2),transparent);opacity:.7}
.pod.g1{transform:translateY(-14px)}
.slide.seen .pod.g1{transform:translateY(-14px)}
.pod.g1::before{background:linear-gradient(90deg,transparent,var(--gold2),transparent);opacity:1;height:4px}
.pod.g1::after{content:"";position:absolute;inset:-40% -20% auto;height:120%;pointer-events:none;
background:radial-gradient(60% 50% at 50% 0%,rgba(228,184,88,.30),transparent 70%)}
.pod .pm{position:relative;z-index:1}
.pod .pe{position:relative;z-index:1;letter-spacing:-.03em}
.pod .pc{position:relative;z-index:1;display:inline-block;margin-top:2px;
background:rgba(94,80,184,.10);border:1px solid rgba(94,80,184,.24);border-radius:var(--r-pill);padding:3px 12px}
.slide.mesh .pod .pc{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.slide.mesh .pod.g1 .pc{background:rgba(228,184,88,.22);border-color:rgba(228,184,88,.5)}
.pod .px{position:relative;z-index:1}
@media print{.pod.g1{transform:translateY(-14px)!important}}
.slide .fnote{margin-bottom:8px}
/* ============================================================
CHAPTER DIVIDERS — the deck needs to breathe every five slides
============================================================ */
.slide.chap{justify-content:center;overflow:hidden;position:relative}
.slide.chap .cwrap{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.slide.chap .cnum{font-family:var(--display);font-weight:700;font-size:200px;line-height:.78;letter-spacing:-.06em;
background:linear-gradient(155deg,#fff 10%,#C9B6FF 55%,var(--gold2) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.slide.chap.seen .cnum{opacity:1;transform:none}
.slide.chap .ct{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.04;
font-size:clamp(28px,calc(3.2 * var(--cw)),46px);color:#fff;max-width:18ch}
.slide.chap .cs{font-size:15.5px;color:#C9C4E8;margin-top:12px;max-width:46ch;line-height:1.55}
.slide.chap .crule{height:2px;width:0;border-radius:2px;margin:18px 0 0;
background:linear-gradient(90deg,var(--gold2),rgba(228,184,88,0));
transition:width .9s var(--ease) .25s}
.slide.chap.seen .crule{width:210px}
.slide.chap .cbg{position:absolute;inset:0;z-index:0;overflow:hidden}
.slide.chap .cbg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.05) brightness(.55)}
.slide.chap .cbg::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(18,13,32,.95) 0%,rgba(18,13,32,.82) 46%,rgba(18,13,32,.55) 100%)}
/* Светлая типографика фолио — только под фотографией: без неё заставка
белая, и белый текст на ней исчезает. */
.slide.chap:has(.cbg) .folio{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.72)}
.slide.chap:has(.cbg) .folio .fc{color:var(--gold2)}
@media screen and (max-width:860px){
.slide.chap .cwrap{grid-template-columns:1fr;gap:14px}
.slide.chap .cnum{font-size:96px}
}
@media print{.slide.chap .cnum{opacity:1!important;transform:none!important}.slide.chap .crule{width:210px!important}}
/* ---------- icon system ---------- */
.ico{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,rgba(94,80,184,.12),rgba(123,108,231,.06));
border:1px solid rgba(94,80,184,.20);flex:none}
.ico svg{width:19px;height:19px;fill:none;stroke:var(--v);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico.gold{background:linear-gradient(150deg,rgba(228,184,88,.20),rgba(228,184,88,.07));border-color:rgba(135,101,32,.32)}
.ico.gold svg{stroke:var(--gold)}
.slide.mesh .ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.slide.mesh .ico svg{stroke:#C9B6FF}
.sevc .ico,.objc .ico{width:28px;height:28px;border-radius:9px;margin-bottom:8px}
.sevc .ico svg,.objc .ico svg{width:16px;height:16px}
/* ---------- journey: unit above, number inside ---------- */
.jrnc .ju{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold);margin-bottom:5px}
.jrnc .jd{font-size:14px}
.jrn::before{top:41px}
/* ---------- chapter photography must be readable, not a dark rectangle ---------- */
.slide.chap .cbg img{filter:saturate(.82) contrast(1.06) brightness(.82)}
.slide.chap .cbg::after{background:linear-gradient(100deg,rgba(18,13,32,.93) 0%,rgba(18,13,32,.72) 44%,rgba(18,13,32,.30) 100%)}
/* ---------- colour discipline: no inline hex on data figures ---------- */
:root{--soft-bad:#B4382F;--soft-bad2:#d4736b;--soft-neutral:#6E6780;--soft-neutral2:#9c94ad}
.ratio .rr.warn .rf{background:linear-gradient(90deg,var(--soft-bad),var(--soft-bad2))}
.ratio .rr.flat .rf{background:linear-gradient(90deg,var(--soft-neutral),var(--soft-neutral2))}
.slide .fnote{font-size:11px;line-height:1.5}
.ranks td{padding:3px 9px}
.ranks th{padding:0 9px 5px}
.ratio .rt{height:20px}
.ratio{gap:7px}
.dcards.c3 .dcard{padding:15px 17px}
.dcards.c3 .dcard h3{font-size:15px;margin-bottom:5px}
.dcards.c3 .dcard p{font-size:12.8px;line-height:1.45}
/* ---------- compression: an inactive upline does not block the line ---------- */
.comp{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;margin-top:var(--g)}
.chain{display:grid;gap:7px}
.lvl{display:grid;grid-template-columns:26px 1fr auto;gap:11px;align-items:center;
border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;background:var(--surface);
opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.slide.seen .lvl{opacity:1;transform:none}
.slide.seen .lvl:nth-child(2){transition-delay:.07s}.slide.seen .lvl:nth-child(3){transition-delay:.14s}
.slide.seen .lvl:nth-child(4){transition-delay:.21s}.slide.seen .lvl:nth-child(5){transition-delay:.28s}
.lvl i{font-style:normal;width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-weight:700;font-size:11px;color:#fff;background:linear-gradient(150deg,var(--vd),var(--v2))}
.lvl b{font-family:var(--display);font-weight:650;font-size:13px;color:var(--text)}
.lvl .st2{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
border-radius:var(--r-pill);border:1px solid;padding:2px 8px}
.lvl.on .st2{color:#1A7550;border-color:rgba(26,117,80,.4);background:rgba(46,158,107,.09)}
/* Пунктир заменён на приём поверхности: выключенный уровень отличается
заливкой и приглушённым чернилом, а не штриховой рамкой (сетка и
разделители в этом языке только сплошные). */
.lvl.off{background:var(--soft);border-color:var(--line)}
.lvl.off i{background:var(--line);color:var(--muted)}
.lvl.off .st2{color:var(--muted);border-color:#D9D2C4;background:transparent}
.lvl.off b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.comp .cmid{font-family:var(--display);font-weight:700;font-size:22px;color:var(--v)}
@media screen and (max-width:860px){.comp{grid-template-columns:1fr}.comp .cmid{transform:rotate(90deg)}}
.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.iconbox{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;
color:var(--v);background:linear-gradient(150deg,rgba(94,80,184,.13),rgba(123,108,231,.05));
border:1px solid rgba(94,80,184,.20)}
.iconbox.gold{color:var(--gold);background:linear-gradient(150deg,rgba(228,184,88,.22),rgba(228,184,88,.07));
border-color:rgba(135,101,32,.34)}
.slide.mesh .iconbox{color:#C9B6FF;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.dcard>.iconbox,.sevc>.iconbox,.objc>.iconbox,.scard>.iconbox{margin-bottom:9px}
.dcard h3{display:flex;align-items:center;gap:10px}
/* icons sit in the corner so they cost no vertical rhythm */
.sevc,.objc,.scard,.dcard{position:relative}
.sevc>.iconbox,.objc>.iconbox{position:absolute;right:11px;top:10px;margin:0;width:26px;height:26px;border-radius:9px}
.sevc>.iconbox .i,.objc>.iconbox .i{width:15px;height:15px}
.sevc b,.objc q{padding-right:32px}
.objc span{font-size:11.6px}
.objc q{font-size:12.8px}
/* ============================================================
REAL FIGURES — a staircase, a donut, a round table
============================================================ */
/* ---------- rank staircase: height = team turnover (log), fill = rates ---------- */
.stair{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;align-items:end;height:250px;margin-top:var(--g)}
.stp{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;position:relative}
.stp .sbar2{width:100%;height:0;border-radius:7px 7px 3px 3px;position:relative;overflow:hidden;
background:linear-gradient(180deg,var(--v2),var(--vd));transition:height 1s var(--ease)}
.slide.seen .stp .sbar2{height:var(--h)}
.stp:nth-child(9) .sbar2,.stp:nth-child(10) .sbar2{background:linear-gradient(180deg,var(--gold2),var(--gold))}
.stp .sv2{font-family:var(--display);font-weight:700;font-size:11px;color:var(--text);font-variant-numeric:tabular-nums}
.stp .sn2{font-family:var(--display);font-size:10px;color:var(--muted);letter-spacing:.02em;
writing-mode:vertical-rl;transform:rotate(180deg);height:74px;text-align:right;white-space:nowrap}
.stp .srate{position:absolute;left:0;right:0;bottom:0;height:var(--r);border-radius:0 0 3px 3px;
background:rgba(255,255,255,.22)}
.stairkey{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted);align-items:center}
.stairkey i{width:11px;height:11px;border-radius:3px;display:block}
@media screen and (max-width:860px){.stair{height:180px;gap:3px}.stp .sn2{font-size:8px;height:56px}.stp .sv2{font-size:8px}}
/* ---------- equity donut ---------- */
.eqwrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:34px;align-items:center;margin-top:8px}
.eqwrap svg{width:100%;height:auto}
.eqwrap .seg2{opacity:0;transform:scale(.9);transform-box:fill-box;transform-origin:center;
transition:opacity .6s var(--ease),transform .6s var(--ease)}
.slide.seen .eqwrap .seg2{opacity:1;transform:none}
.slide.seen .eqwrap .seg2:nth-of-type(2){transition-delay:.12s}
.slide.seen .eqwrap .seg2:nth-of-type(3){transition-delay:.24s}
.slide.seen .eqwrap .seg2:nth-of-type(4){transition-delay:.36s}
.slide.seen .eqwrap .seg2:nth-of-type(5){transition-delay:.48s}
.eqwrap .dc{font-family:var(--display);font-weight:700;font-size:40px;fill:var(--text)}
.eqwrap .ds{font-family:var(--mono);font-size:10px;fill:var(--muted);letter-spacing:.16em}
.eqlist{display:grid;gap:9px}
.eqr{display:grid;grid-template-columns:14px auto 1fr;gap:12px;align-items:baseline;
opacity:0;transform:translateX(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.slide.seen .eqr{opacity:1;transform:none}
.slide.seen .eqr:nth-child(2){transition-delay:.1s}.slide.seen .eqr:nth-child(3){transition-delay:.2s}
.slide.seen .eqr:nth-child(4){transition-delay:.3s}
.eqr i{width:12px;height:12px;border-radius:4px;display:block;transform:translateY(2px)}
.eqr b{font-family:var(--display);font-weight:700;font-size:18px;color:var(--text);font-variant-numeric:tabular-nums}
.eqr span{font-size:13px;color:var(--muted);line-height:1.45}
.eqr span em{font-style:normal;color:var(--text);font-weight:600}
@media screen and (max-width:860px){.eqwrap{grid-template-columns:1fr;gap:16px}}
/* ---------- round table ---------- */
.table7{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:34px;align-items:center;margin-top:8px}
.table7 svg{width:100%;height:auto}
.table7 .tseat{opacity:0;transform:scale(.7);transform-box:fill-box;transform-origin:center;
transition:opacity .45s var(--ease),transform .45s var(--ease)}
.slide.seen .table7 .tseat{opacity:1;transform:none}
.slide.seen .table7 .tseat:nth-of-type(2){transition-delay:.07s}
.slide.seen .table7 .tseat:nth-of-type(3){transition-delay:.14s}
.slide.seen .table7 .tseat:nth-of-type(4){transition-delay:.21s}
.slide.seen .table7 .tseat:nth-of-type(5){transition-delay:.28s}
.slide.seen .table7 .tseat:nth-of-type(6){transition-delay:.35s}
.slide.seen .table7 .tseat:nth-of-type(7){transition-delay:.42s}
.table7 .tl2{font-family:var(--display);font-weight:700;font-size:10px;fill:var(--text)}
.table7 .tn2{font-family:var(--mono);font-size:10px;fill:var(--muted);letter-spacing:.1em}
.table7 .tcenter{font-family:var(--display);font-weight:700;font-size:13px;fill:var(--v)}
@media screen and (max-width:860px){.table7{grid-template-columns:1fr;gap:16px}}
.ranks.compact td{padding:2px 8px;font-size:11.4px}
.ranks.compact th{padding:0 8px 4px;font-size:10px}
.ranks.compact .rd{width:7px;height:7px;margin-right:7px}
.stair{height:190px}
.stp .sn2{height:64px;font-size:10px}
.table7 .dcard{padding:12px 14px}
.table7 .dcard h3{font-size:14px}
.table7 .dcard p{font-size:12px}
.table7{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px}
.table7 .dcard{padding:11px 13px}
.table7 .dcard h3{font-size:13px;margin-bottom:4px}
.table7 .dcard p{font-size:12px;line-height:1.42}
.eqwrap{gap:28px}
.eqr b{font-size:18px}
.eqr span{font-size:12px}
.table7 svg{width:88%}
.table7 .dcards{gap:8px}
/* ============================================================
BRAND ALIGNMENT — the deck now lives in the product's own palette:
cream ground, charcoal ink, and the rust of the woven band.
Violet stays only where data needs a cool counterweight.
============================================================ */
:root{
--rust:#B4531F; /* text-safe on cream */
--rust2:#E0793C; /* decorative, gradients only */
--rust-deep:#7E3712;
--ink:#1A1614; /* charcoal from the product photography */
}
.slide .kick{color:var(--rust)}
.slide .kick::after{background:linear-gradient(90deg,var(--rust2),transparent)}
.slide.mesh .kick,.slide.bleed .kick,.slide.chap .kick{color:var(--rust2)}
.slide.mesh{background:radial-gradient(126% 120% at 14% -10%,#332318 0%,#211815 52%,#141010 100%)}
.slide.mesh::before{background:radial-gradient(closest-side,rgba(224,121,60,.55),transparent 70%)}
.slide.mesh::after{background:radial-gradient(closest-side,rgba(94,80,184,.30),transparent 70%)}
.slide.mesh .glow{background:radial-gradient(420px 420px at var(--mx,50%) var(--my,40%),
rgba(224,121,60,.20),rgba(224,121,60,0) 68%)}
.slide.bleed .duo,.slide.split>.sp .duo{background:linear-gradient(150deg,rgba(180,83,31,.34),rgba(26,22,20,.16))}
.slide.bleed .scrim{background:linear-gradient(72deg,rgba(20,16,14,.94) 0%,rgba(20,16,14,.74) 34%,rgba(20,16,14,.12) 66%,transparent 100%)}
.slide.chap .cbg::after{background:linear-gradient(100deg,rgba(20,16,14,.93) 0%,rgba(20,16,14,.72) 44%,rgba(20,16,14,.28) 100%)}
.slide.chap .cnum{background:linear-gradient(155deg,#fff 10%,var(--rust-tint) 52%,var(--rust2) 100%);
-webkit-background-clip:text;background-clip:text}
.slide.chap .crule{background:linear-gradient(90deg,var(--rust2),rgba(224,121,60,0))}
.hero-n .nbig{background:linear-gradient(150deg,var(--text) 8%,var(--rust-deep) 42%,var(--rust) 74%,var(--rust2) 100%);
-webkit-background-clip:text;background-clip:text}
.slide.mesh .hero-n .nbig,.slide.bleed .hero-n .nbig{
background:linear-gradient(155deg,#fff 18%,var(--rust-tint) 58%,var(--rust2) 100%);-webkit-background-clip:text;background-clip:text}
.iso i.on{background:linear-gradient(150deg,var(--rust),var(--rust2))}
.ratio .rr.b .rf{background:linear-gradient(90deg,var(--rust-deep),var(--rust2))}
.sevc .rate{color:var(--rust);background:rgba(180,83,31,.09);border-color:rgba(180,83,31,.24)}
.scard .sa,.sevc .sn,.layerc .ln,.trn .tp,.jrnc .ju{color:var(--rust)}
.ranks td.money,.eqr b{color:var(--rust)}
.ranks tr.gold td{background:rgba(224,121,60,.12)}
.ranks tr.gold .rd{background:linear-gradient(150deg,var(--rust),var(--rust2))}
.pod.g1{background:linear-gradient(160deg,rgba(224,121,60,.22),rgba(224,121,60,.06));border-color:rgba(126,55,18,.42)}
.pod.g1 .pe{color:var(--rust-deep)}
.slide.mesh .pod.g1{background:linear-gradient(165deg,rgba(224,121,60,.32),rgba(224,121,60,.08));
border-color:rgba(224,121,60,.6);box-shadow:0 0 0 1px rgba(224,121,60,.2),0 22px 60px rgba(224,121,60,.20)}
.slide.mesh .pod.g1 .pe{color:var(--rust-tint)}
.eqbar .e4,.sbar .r4{background:linear-gradient(180deg,var(--rust2),var(--rust))}
.iconbox.gold{color:var(--rust);background:linear-gradient(150deg,rgba(224,121,60,.20),rgba(224,121,60,.06));
border-color:rgba(126,55,18,.32)}
.tl .ti.gold .td{border-color:var(--rust);color:var(--rust)}
.jrnc:last-child .jd{border-color:var(--rust);color:var(--rust)}
.folio .fc{color:var(--rust)}
.slide.mesh .folio .fc,.slide.bleed .folio .fc,.slide.chap .folio .fc{color:var(--rust2)}
.wall .wb::before{background:repeating-linear-gradient(180deg,var(--rust) 0 8px,transparent 8px 15px)}
.wall .wl{color:var(--rust)}
.fanin .fhub{fill:url(#hubg)}
.lookbook .pc,.mosaic .pc,.strip .pc{background:var(--ink)}
/* the cover lockup needs a guaranteed dark patch behind it */
.slide.bleed .scrim{background:linear-gradient(72deg,rgba(20,16,14,.96) 0%,rgba(20,16,14,.86) 26%,rgba(20,16,14,.42) 58%,rgba(20,16,14,.06) 100%)}
.slide.bleed .on img[alt="Wellex"]{filter:drop-shadow(0 2px 12px rgba(0,0,0,.6))}
/* a photograph beside the payout figure */
.paysplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:24px;align-items:center}
.paysplit .pshot{border-radius:var(--r-md);overflow:hidden;position:relative;aspect-ratio:3/4;
box-shadow:0 14px 34px rgba(26,22,20,.18)}
.paysplit .pshot img{width:100%;height:100%;object-fit:cover;display:block}
.paysplit .pshot::after{content:"";position:absolute;inset:0;border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(26,22,20,.10)}
.paysplit .pcap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
background:linear-gradient(0deg,rgba(20,16,14,.88),transparent);
font-family:var(--display);font-weight:650;font-size:12px;color:#fff}
@media screen and (max-width:860px){.paysplit{grid-template-columns:1fr}.paysplit .pshot{aspect-ratio:16/10}}
.paysplit{grid-template-columns:minmax(0,1fr) minmax(0,210px);gap:18px;margin-top:var(--g)}
/* Три слоя + схема цепей не помещались: нижняя карточка упиралась в полосу
фолио на всех четырёх ширинах. Отыгрываем высоту зазором и полями
карточек, а не текстом — текст здесь описывает защиту от двойного
списания, и резать его нельзя. Поля самих карточек трогать бесполезно:
их задаёт более позднее правило в wellex-deck4.css. */
.paysplit .layers{grid-template-columns:1fr;gap:5px}
.paysplit .layerc{padding:11px 14px}
.paysplit .layerc b{font-size:14px;margin:4px 0 3px}
.paysplit .layerc span{font-size:12px;line-height:1.42}
.paysplit .pshot{aspect-ratio:3/4}
.sevc .rate{color:var(--gold);background:rgba(180,83,31,.10);border-color:rgba(180,83,31,.30)}
.ranks tr.gold td.money{color:var(--vd)}
.ranks td.money{color:var(--gold)}
.paysplit .pshot{aspect-ratio:1/1}
.paysplit{grid-template-columns:minmax(0,1fr) minmax(0,190px)}
.fanin{aspect-ratio:1120/96}
.paysplit .pshot{aspect-ratio:4/5}
.paysplit .layerc span{font-size:12px}
.paysplit{gap:16px;margin-top:10px}
.paysplit .layerc{padding:10px 13px}
.paysplit .layerc b{font-size:14px}
.slide .fnote{font-size:10px}
.paysplit .pshot{aspect-ratio:1/1}
/* ============================================================
ILLUSTRATION LAYER — decorative, out of flow, cannot push text
============================================================ */
.illmark{position:absolute;right:calc(var(--slide-pad) - 10px);bottom:calc(var(--slide-pad) + 4px);
width:19%;max-width:210px;height:auto;opacity:.34;pointer-events:none;z-index:0;
transform:translateY(10px) scale(.96);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.slide.seen .illmark{opacity:.34;transform:none}
.slide.mesh .illmark,.slide.bleed .illmark{opacity:.34}
.slide.mesh>.illmark{position:absolute}
.slide.pull .illmark{width:24%;max-width:270px;right:6%;bottom:12%;opacity:.34}
/* raise real content above the decorative layer without touching positioning */
.slide>*:not(.illmark){z-index:1}
.slide>.illmark{z-index:0}
.slide>.folio{position:absolute}
@media print{.illmark{opacity:.30!important;transform:none!important;
-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media screen and (max-width:860px){.illmark{width:34%;opacity:.28}}
/* ============================================================
PALETTE CLOSE-OUT — every decorative violet becomes rust.
Violet survives only where a chart genuinely needs a second
dimension: the ten-signal wheel, the risk legend, the multiplier.
============================================================ */
.paybar .pbar{background:linear-gradient(180deg,var(--rust2),var(--rust))}
.paybar .pb.first .pbar{background:linear-gradient(180deg,var(--gold2),var(--rust-deep))}
.stair .sbar2{background:linear-gradient(180deg,var(--rust2),var(--rust))}
.stair .stp:nth-child(9) .sbar2,.stair .stp:nth-child(10) .sbar2{background:linear-gradient(180deg,var(--gold2),var(--rust-deep))}
.lvl i,.ecoc .en,.loopr i,.seat .si,.jrnc .jd,.tl .td{--c1:var(--rust-deep);--c2:var(--rust2)}
.lvl i{background:linear-gradient(150deg,var(--rust-deep),var(--rust2))}
.ecoc .en{background:linear-gradient(150deg,var(--rust-deep),var(--rust2))}
.loopr i{background:linear-gradient(150deg,var(--rust-deep),var(--rust2))}
.seat .si{background:linear-gradient(150deg,var(--rust-deep),var(--rust2))}
.tl .td{border-color:var(--rust);color:var(--rust)}
.tl::before{background:linear-gradient(180deg,var(--rust),var(--rust2))}
.jrnc .jd{border-color:var(--rust);color:var(--rust)}
.jrn::before{background:linear-gradient(90deg,var(--rust),var(--rust2) 60%,var(--gold2))}
.tranche::before{background:linear-gradient(90deg,var(--rust),var(--rust2) 62%,var(--gold2))}
.trn .tp{border-color:var(--rust);color:var(--rust)}
.layerc::before,.cond::before{background:linear-gradient(180deg,var(--rust-deep),var(--rust2))}
.cond:nth-child(3)::before{background:linear-gradient(90deg,var(--rust2),var(--gold2))}
.layerc.deep{background:linear-gradient(155deg,#2A1D16,#1A1614)}
.layerc.deep::before{background:linear-gradient(180deg,var(--gold2),var(--rust))}
.calcs.res{background:linear-gradient(155deg,#2A1D16,#1A1614)}
.sig .sm i{background:linear-gradient(90deg,var(--rust-deep),var(--rust2))}
.ratio .rr.a .rf{background:linear-gradient(90deg,var(--rust-deep),var(--rust))}
.iconbox{color:var(--rust);background:linear-gradient(150deg,rgba(180,83,31,.12),rgba(224,121,60,.05));
border-color:rgba(180,83,31,.20)}
.eco::before{background:linear-gradient(90deg,var(--rust),var(--rust2),var(--gold2))}
.loop .ring{stroke:var(--line)}
.eqbar .e1{background:linear-gradient(180deg,var(--vd),#5E2A0E)}
.eqbar .e2{background:linear-gradient(180deg,var(--rust),var(--gold))}
.eqbar .e3{background:linear-gradient(180deg,var(--rust2),#C05F2A)}
.fanin .fl{stroke:var(--rust2)}
.fanin .fnode{stroke:var(--rust)}
.wheel svg{filter:drop-shadow(0 10px 26px rgba(180,83,31,.16))}
.pc::after{box-shadow:inset 0 0 0 1px rgba(26,22,20,.08)}
.dcard,.cond,.layerc,.scard,.wall .wc,.tradeoff,.sevc,.objc,.calcs,.trn,.pod,.seat,.lvl,.ecoc,.sig{
box-shadow:0 1px 0 rgba(26,22,20,.03),0 10px 26px rgba(60,34,18,.055)}
.slide.seen .pod.g1{box-shadow:0 0 0 1px rgba(224,121,60,.18),0 22px 60px rgba(180,83,31,.16)}
/* ---------- multiplier: a diverging scale centred on ×1.00, not on zero ---------- */
.ratio .rt.div{position:relative;background:var(--soft)}
.ratio .rt.div::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--muted);opacity:.5}
.ratio .rt.div .rf{position:absolute;top:0;bottom:0;width:0;border-radius:5px}
.slide.seen .ratio .rt.div .rf{width:calc(var(--w,0%) / 2)}
.ratio .rt.div .rf.neg{right:50%;background:linear-gradient(270deg,var(--warn),#C98A45)}
.ratio .rt.div .rf.pos{left:50%;background:linear-gradient(90deg,var(--rust),var(--rust2))}
.ratio .rt.div .rf.zero{left:calc(50% - 2px);width:4px!important;background:var(--muted);opacity:.55}
/* ============================================================
COUNCIL FIXES — the violet foundation the rebrand never repointed
============================================================ */
:root{--text:#1A1614;--muted:#6E6558}
.ranks .rd{background:linear-gradient(150deg,var(--rust-deep),var(--rust2))}
.ranks td.pct{color:var(--rust)}
.ranks tr.hi td{background:rgba(180,83,31,.06)}
.slide.mesh::after{background:radial-gradient(closest-side,rgba(224,121,60,.24),transparent 70%)}
.pod::before{background:linear-gradient(90deg,transparent,var(--rust2),transparent)}
.slide.mesh .pod::before{background:linear-gradient(90deg,transparent,var(--rust2),transparent)}
.ranks td.pct{color:var(--gold)}
.ranks tr.gold td.pct{color:var(--vd)}
/* ТЁМНЫЕ ПОВЕРХНОСТИ — ТОЖЕ ГРАФИТ.
После перевода нейтрали светлые слайды стали графитовыми, а тёмные
остались тёплой сепией (#332318 → #141010): колода читалась наполовину
графитом, наполовину коричневой. Уводим в графит и их. Рыжее свечение
остаётся — это единственный акцент; фиолетовое второе свечение снято,
на графите оно спорило с рыжим за роль цвета. */
.slide.mesh{background:radial-gradient(126% 120% at 14% -10%,#2B2B29 0%,#1D1D1B 52%,#121211 100%)}
.slide.mesh::after{background:radial-gradient(closest-side,rgba(120,120,116,.22),transparent 70%)}
.slide.bleed .scrim{background:linear-gradient(72deg,rgba(17,17,16,.94) 0%,rgba(17,17,16,.74) 34%,rgba(17,17,16,.12) 66%,transparent 100%)}
.slide.chap .cbg::after{background:linear-gradient(100deg,rgba(17,17,16,.93) 0%,rgba(17,17,16,.72) 44%,rgba(17,17,16,.28) 100%)}
.slide.bleed .duo,.slide.split>.sp .duo{background:linear-gradient(150deg,rgba(180,83,31,.34),rgba(22,22,21,.18))}
/* Рыжее свечение приглушено с .55 до .30: на графите оно заливало верхнюю
треть слайда тёплым и переставало быть акцентом, становясь фоном. */
.slide.mesh::before{background:radial-gradient(closest-side,rgba(224,121,60,.30),transparent 70%)}
.slide.mesh .glow{background:radial-gradient(420px 420px at var(--mx,50%) var(--my,40%),
rgba(224,121,60,.12),rgba(224,121,60,0) 68%)}
/* ═══ wellex-deck4.css ═══════════════════════════════════ */
/* ============================================================
WELLEX DECK — SYSTEM CLOSE-OUT
One modular type scale, one spacing scale, one drawing idiom.
Loads last. Everything here is a token, not a tuned literal.
============================================================ */
:root{
/* type — a 1.20 minor-third scale, rounded to whole pixels */
--fs-1:11px; /* folio, footnote, micro-label */
--fs-2:13px; /* card body, table cell */
--fs-3:15px; /* body copy, list item */
--fs-4:18px; --fs-4b:20px; /* card title, lede */
--fs-5:22px; /* section subhead */
--fs-6:30px; --fs-6b:38px; /* small headline; cover sub-line */
--fs-7:44px; /* slide headline */
/* ОБЛОЖКА — жидкий кегль, но живёт В ШКАЛЕ, а не в разметке.
06.08: один и тот же блок обложки был скопирован в три презентации
(founders, product, leaders) вместе с сырыми значениями — 38px, 14px,
26px, 13px. Ни одной такой ступени в шкале нет, то есть эти размеры
жили мимо системы: поменяй шкалу — обложки за ней не пойдут.
Половинные ступени здесь уже приняты (`--fs-4b`), поэтому 38px стал
`--fs-6b`, а жидкий кегль заголовка — именованным токеном. */
--fs-cover:clamp(32px,4vw,56px);
--fs-8:64px; /* statement */
--fs-9:150px; /* hero numeral */
/* line height — one rule: tighter as the type grows */
--lh-display:.85; --lh-tight:1.06; --lh-snug:1.25; --lh-body:1.5;
/* tracking — three values, no more */
--tr-display:-.03em; --tr-body:0; --tr-label:.14em;
/* space — a 4px base */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
--sp-6:24px; --sp-7:32px; --sp-8:40px;
--g:var(--sp-4);
/* radius — five steps, nothing between */
--r-tag:9px; --r-sm:12px; --r-md:16px; --r-lg:20px;
/* elevation — one recipe */
--sh-card:0 1px 0 rgba(26,22,20,.04), 0 10px 26px rgba(60,34,18,.06);
/* line tints — three, applied over the palette */
--line-weak:rgba(26,22,20,.10); --line-mid:rgba(26,22,20,.16);
}
/* ---------- type: collapse the 90-value cluster onto the scale ---------- */
.slide h2{font-size:clamp(var(--fs-6),calc(3 * var(--cw)),var(--fs-7));line-height:var(--lh-tight);letter-spacing:var(--tr-display)}
.slide .big,.slide.pull .q{font-size:clamp(var(--fs-6),calc(3.2 * var(--cw)),var(--fs-8));line-height:var(--lh-tight);letter-spacing:var(--tr-display)}
.slide h3,.dcard h3,.layerc b,.cond b,.sevc b,.trn b,.jrnc b,.loopr b,.wall .wh,.scard b,.lvl b{
font-size:var(--fs-4);line-height:var(--lh-snug);letter-spacing:var(--tr-body)}
.slide p,.slide li,.trio p,.loopr span,.jrnc span{font-size:var(--fs-3);line-height:var(--lh-body)}
.dcard p,.cond .cd,.layerc span,.sevc span,.objc span,.scard .sd,.wall .wc p,.trn span,.seat span,.eqr span,
.tl .tc span,.pod .px,.calcs .cd{font-size:var(--fs-2);line-height:var(--lh-body)}
.objc q,.tl .tc b,.calcs .cv,.eqr b{letter-spacing:var(--tr-body)}
.ranks td{font-size:var(--fs-2)}
.slide .fnote,.folio,.ranks th,.sevc .sn,.scard .sa,.layerc .ln,.calcs .cl,.pod .pm,.seat b,
.trn .tp,.jrnc .ju,.stp .sv2,.stp .sn2,.lvl .st2,.isokey,.slegend,.stairkey{
font-size:var(--fs-1);line-height:var(--lh-snug)}
.slide .kick,.deckbar .conf,.ranks th,.cond .cn,.tradeoff .th,.sevc .sn,.scard .sa,.layerc .ln,
.calcs .cl,.pod .pm,.jrnc .ju,.folio,.lvl .st2,.wall .wl{letter-spacing:var(--tr-label)}
.slide .kick{font-size:var(--fs-1)}
.hero-n .nbig{font-size:clamp(88px,calc(13 * var(--cw)),var(--fs-9))}
.hero-n .nsub{font-size:var(--fs-5)}
.hero-n .ncap,.slide .lede,.trio h3{font-size:var(--fs-4b)}
.metric-b b{font-size:var(--fs-6)}
.slide.chap .ct{font-size:clamp(var(--fs-6),calc(3 * var(--cw)),var(--fs-7))}
.slide.chap .cs,.slide.pull .qs{font-size:var(--fs-3)}
/* ---------- space: everything on the 4px base ---------- */
.cols,.dcards,.conds,.layers,.trio,.strip,.metrics,.sev,.obj,.stable,.calc,.tranche,.podium,.seats,.eco{gap:var(--sp-4)}
.dcard,.cond,.layerc,.scard,.sevc,.objc,.calcs,.trn,.wall .wc,.lvl,.ecoc,.seat,.pod{padding:var(--sp-4) var(--sp-5)}
.slide h2{margin-bottom:var(--sp-5)}
.slide .kick{margin-bottom:var(--sp-3)}
.ranks td{padding:var(--sp-1) var(--sp-3)}
.ratio{gap:var(--sp-2)}
.chain,.sigs,.eqlist,.loopl,.streams{gap:var(--sp-2)}
/* ---------- one drawing idiom: flat fills, no gradients, no shadows ---------- */
.dcard,.cond,.layerc,.scard,.sevc,.objc,.calcs,.trn,.wall .wc,.lvl,.ecoc,.seat,.pod,.tradeoff,.pc,.flowd .fn{
box-shadow:var(--sh-card);border-color:var(--line-weak)}
.iconbox{background:rgba(180,83,31,.10);border-color:rgba(180,83,31,.22);box-shadow:none}
.layerc::before,.cond::before,.pod::before{background:var(--rust)}
.cond:nth-child(3)::before{background:var(--rust2)}
.pod.g1::before{background:var(--rust2)}
.lvl i,.ecoc .en,.loopr i,.seat .si{background:var(--rust);box-shadow:none}
.eqbar .e1{background:var(--rust-deep)}.eqbar .e2{background:var(--rust)}
.eqbar .e3{background:var(--rust2)}.eqbar .e4{background:var(--gold2)}
.paybar .pbar{background:var(--rust2)}.paybar .pb.first .pbar{background:var(--rust-deep)}
.stair .sbar2{background:var(--rust2)}
.stair .stp:nth-child(9) .sbar2,.stair .stp:nth-child(10) .sbar2{background:var(--rust-deep)}
.sbar .r1{background:var(--rust-deep)}.sbar .r2{background:var(--rust)}
.sbar .r3{background:var(--rust2)}.sbar .r4{background:var(--gold2)}
.ratio .rr.a .rf{background:var(--rust)}.ratio .rr.b .rf{background:var(--rust-deep)}
.ratio .rt.div .rf.pos{background:var(--rust)}.ratio .rt.div .rf.neg{background:var(--rust-soft)}
.sig .sm i{background:var(--rust)}
.alloc .core{background:var(--rust)}.alloc .act{background:var(--gold2);color:#4A2308}
.wheel svg,.paysplit .pshot{filter:none}
.layerc.deep,.calcs.res{background:var(--ink)}
.slide.mesh .pod.g1{box-shadow:none;border-color:rgba(224,121,60,.55)}
/* ---------- one documented density exception, not a tuned literal ----------
Two slides carry 7 and 8 cards on a 1280x720 canvas. They step down
exactly one rung on the same scale rather than inventing new sizes. */
.sev,.obj{gap:var(--sp-3)}
.sevc,.objc{padding:var(--sp-3) var(--sp-4)}
.objc q{font-size:var(--fs-3)}
.sevc span,.objc span{font-size:12px;line-height:1.42}
.sevc .rate{font-size:var(--fs-1);padding:var(--sp-1) var(--sp-3)}
.obj{grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.objc{padding:var(--sp-3)}
.objc q{font-size:13px;margin-bottom:var(--sp-1)}
.objc span{font-size:11px;line-height:1.4}
.objc>.iconbox{display:none}
.sevc span{font-size:11.8px}
.stair{height:180px}
.stp .sn2{height:58px}
.ranks{margin-top:var(--sp-3)}
.comp{margin-top:var(--sp-3)}
.comp .dcard{padding:var(--sp-3) var(--sp-4)}
.ranks td{padding:3px var(--sp-3)}
/* ---------- final normalisation: snap every straggler onto the scale ---------- */
.wheel .lab,.fanin .ft,.loop .nn,.table7 .tn2,.converge .cend.s,.ridge .rlab,.pc .cap i{font-size:var(--fs-1)}
.loop .nl,.table7 .tl2,.loop .ctrs,.stp .sv2,.stp .sn2,.isokey,.slegend,.stairkey,
.eqr span,.sig .sk,.sig .sv,.say small,.lookbook .cap{font-size:12px}
.objc span,.sevc span,.dcard p,.cond .cd,.layerc span,.scard .sd,.wall .wc p,.trn span,.seat span,
.tl .tc span,.pod .px,.calcs .cd,.trio p,.jrnc span,.loopr span,.ranks td{font-size:13px}
.slide li,.slide p:not(.fnote),.clist li,.say p{font-size:15px}
.pc .cap,.formula .fq,.formula .fb,.formula .fw{font-size:13px}
.stackbar b,.eqbar b,.sbar div{font-size:12px}
/* the seven-stream slide is the densest on the canvas: one further rung down */
.sev{gap:var(--sp-2)}
.sevc{padding:var(--sp-2) var(--sp-3)}
.sevc b{margin:var(--sp-1) 0 2px}
.sevc span{font-size:12px;line-height:1.4}
.sevc .rate{margin-top:var(--sp-1)}
/* radius: five steps only */
.iconbox,.loopr i,.seat .si,.tl .td,.jrnc .jd,.trn .tp,.lvl i,.ecoc .en,.ico{border-radius:var(--r-tag)}
.sbar,.stackbar,.alloc,.ratio .rt,.stp .sbar2,.paybar .pbar,.sig,.lvl,.scard,.seat,.pc,.lookbook .pc{border-radius:var(--r-sm)}
.dcard,.cond,.layerc,.sevc,.objc,.calcs,.trn,.wall .wc,.ecoc,.pod,.tradeoff,.eqbar,.say,.formula,.cbar{border-radius:var(--r-md)}
.slide{border-radius:var(--r-lg)}
.dcards.c2 .dcard{padding:var(--sp-4) var(--sp-5)}
.dcards.c2 .dcard p{font-size:13px;line-height:1.5}
.dcards.c2 .dcard h3{font-size:18px}
.dcards.c2 .iconbox{width:26px;height:26px;margin-bottom:var(--sp-2)}
.dcards.c2 .iconbox .i{width:15px;height:15px}
.dcards.c2{gap:var(--sp-3)}
.dcards.c2 .dcard{padding:var(--sp-3) var(--sp-4)}
/* ---------- the last five selectors the scale had not reached ---------- */
.langsw button{font-size:var(--fs-1);letter-spacing:var(--tr-label)}
.slide table{font-size:var(--fs-2)}
.pod .pe,.eqwrap .dc{font-size:var(--fs-6)}
.agenda .ad{font-size:var(--fs-2);line-height:var(--lh-body)}
.hero-n .nbig{line-height:var(--lh-display)}
.sevc b{font-size:14px}
/* ============================================================
TOKEN RETIREMENT — the violet/gold pair is repointed at the root.
Three reviewers traced every remaining leak to these five tokens
still being live. Nothing consumes violet as a second data
dimension any more, so they simply become the rust family.
============================================================ */
:root{
--v:#B4531F; --v2:#E0793C; --vd:#7E3712;
--gold:#8E3F16; --gold2:#F0A867;
/* ── ПРЕЗЕНТАЦИОННАЯ ПАЛИТРА ────────────────────────────────
Владелец подтвердил 06.08: тёплый ряд — это стиль презентаций,
отдельная поверхность поверх базового бренда из `wellex.css`
(там `--v2` остаётся каноническим Violet #7B6CE7). Блок выше
и есть переключатель поверхности; ниже — остальные тона ряда,
которые до сих пор жили в CSS шестнадцатеричными числами без
имени: пятнадцать штук на девять презентаций.
Именуем ПОВТОРЯЮЩИЕСЯ (два и более употребления). Палитра из
двадцати трёх имён — не палитра, а список; единичные тона
оставлены как есть и перечислены в `tools/palette-guard.py`
поимённо, с местом. Так новый случайный оттенок будет пойман,
а существующие не притворяются несуществующими.
06.08 из ряда убраны семь почти-дублей: #9C4519→#8E3F16,
#D06A2E→#D2691E, #A85A2E→#A96A2E, #F5CDA8 и #FFD3AC→#F0C9A8,
#6B4F14→#6A480D, #F7DCC2→#E8DFC6. Разница меньше 25 по сумме
RGB — глазом неразличима, а в файле это был один и тот же
цвет, написанный дважды. Было 30 тонов, стало 23. */
--rust-ink:#3A2A06; /* самые тёмные чернила тёплого ряда */
--rust-tint:#F0C9A8; /* светлый персиковый: заливки, стопы градиентов */
--rust-mid:#D2691E; /* средний рыжий: маркеры, ступени */
--rust-soft:#A96A2E; /* приглушённый рыжий: вторые метки */
--rust-paper:#E8DFC6; /* тёплая бумага: текст на тёмном */
--gold-deep:#6A480D; /* тёмная охра: надзаголовки */
--gold-mid:#C79B37; /* приглушённое золото */
}
.slide li::before{background:var(--rust)}
.slide.mesh .iconbox{color:var(--gold2);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.sig.down .sm i{background:var(--rust2)}
.wall .wc.deposits{background:rgba(180,83,31,.06);border-color:rgba(180,83,31,.26)}
.tranche::before,.layerc.deep::before,.pod.g1::before{background:var(--rust2)}
.loop .ctr{fill:var(--rust)}
.i,.ico svg{stroke-width:2}
.pod .pc{color:var(--rust)}
.slide.mesh .pod .pc{color:var(--gold2)}
/* ---------- dark-slide text tones were still violet-grey ---------- */
.slide.mesh p,.slide.mesh li,.slide.chap .cs,.slide.pull.mesh .qs,.slide.mesh .dcard p,
.slide.mesh .layerc span,.slide.mesh .sevc span,.slide.mesh .objc span,.slide.mesh .calcs .cd,
.slide.mesh .trn span,.slide.mesh .seat span,.slide.mesh .pod .px,.say small{color:var(--d2,#DCD5CC)}
.slide.mesh .folio,.slide.mesh .no,.slide.mesh .fnote,.slide.bleed p,.slide.bleed .folio{color:var(--d2,#C6BEB4)}
.slide.bleed .on p small,.slide.bleed .on p[style*="11px"]{color:var(--d2,#C6BEB4)}
.layerc.deep span,.calcs.res .cd{color:var(--d2,#DCD5CC)}
.slide.mesh .pod .pm,.slide.bleed .on p[style]{color:var(--d2,#C6BEB4)}
.slide.mesh .pod.g1 .pm{color:var(--gold2)}
/* the only remaining off-brand hue was a semantic green; meaning now rides on fill, not hue */
.lvl.on .st2{color:var(--rust);border-color:rgba(180,83,31,.38);background:rgba(180,83,31,.08)}
.tl.status .st.ok{color:var(--rust);border-color:rgba(180,83,31,.38);background:rgba(180,83,31,.08)}
.vs .vc.alive .vh{color:var(--rust)}
/* ============================================================
BAR GEOMETRY — bars were flex-shrunk, so the encoded height
never reached the screen: 8 of 10 ranks rendered identical.
The track is now a fixed box and the fill can never be squeezed.
============================================================ */
.stair{height:190px;align-items:stretch}
.stp{position:relative;justify-content:flex-end;gap:0}
.stp .sv2{flex:none;margin-bottom:4px}
.stp .sn2{flex:none;height:56px;margin-top:6px}
.stp .sbar2{flex:none;min-height:0;height:0;transition:height 1s var(--ease)}
.slide.seen .stp .sbar2{height:var(--h)}
.stairtrack{position:relative;flex:1 1 auto;display:flex;align-items:flex-end;width:100%}
.paybar{height:170px;align-items:stretch}
.paybar .pb{justify-content:flex-end;gap:0}
.paybar .pv{flex:none;margin-bottom:4px}
.paybar .pl{flex:none;margin-top:6px}
.paybar .pbar{flex:none;min-height:0}
.stairtrack{width:100%}
.stp .sbar2,.paybar .pbar{width:100%;align-self:flex-end}
.cols.wide .tl{gap:var(--sp-2)}
.cols.wide .dcard{margin-top:var(--sp-2)!important;padding:var(--sp-3) var(--sp-4)}
.cols.wide ol.num li{margin-bottom:var(--sp-2)}
.cols.wide .tl .tc span{font-size:12px}
/* ============================================================
MOTION CLOSE-OUT
Bars animate the compositor, not layout. Durations collapse to
six tokens. Dead motion code and redundant parallax removed.
============================================================ */
:root{
--d-micro:.25s; /* hover, lift */
--d-enter:.5s; /* cards, rows */
--d-enter-lead:.6s; /* headline block */
--d-draw:.85s; /* strokes, reveals */
--d-fill:1s; /* bar and arc fills */
--d-fill-long:1.3s; /* the longest single arc */
}
/* bars: scale the compositor instead of reflowing height/width */
@media(prefers-reduced-motion:no-preference){
.stp .sbar2,.paybar .pbar{height:var(--h);transform:scaleY(0);transform-origin:bottom;
transition:transform var(--d-fill) var(--ease)}
.slide.seen .stp .sbar2,.slide.seen .paybar .pbar{transform:none}
.ratio .rf,.sbar div,.eqbar div,.stackbar div{transform:scaleX(0);transform-origin:left;
transition:transform var(--d-fill) var(--ease)}
.slide.seen .ratio .rf,.slide.seen .sbar div,.slide.seen .eqbar div,.slide.seen .stackbar div{transform:none}
.ratio .rt.div .rf.neg{transform-origin:right}
.sbar div{width:var(--w)}.eqbar div{width:var(--w)}.stackbar div{width:var(--w)}
.ratio .rf{width:var(--w)}
.ratio .rt.div .rf{width:calc(var(--w,0%) / 2)}
.ratio .rt.div .rf.zero{transform:none}
}
/* every duration snaps to a token */
.dcard,.cond,.layerc,.scard,.sevc,.objc,.calcs,.trn,.pod,.seat,.lvl,.ecoc,.sig,.pc,.wall .wc,.trio .pc,
.eqr,.loopr,.jrnc,.stp,.tl .ti{transition-duration:var(--d-enter)}
.slide [data-anim]{transition-duration:var(--d-enter-lead)}
.reveal-mask>span,.loop .arc,.cbar .cv,.ridge path.rl,.wheel .seg{transition-duration:var(--d-draw)}
.iso i,.triad circle.tr{transition-duration:var(--d-enter)}
.agenda a,.rail a,.pc img{transition-duration:var(--d-micro)}
/* dead motion: nothing in this deck uses .hero-n */
.hero-n .nbig{animation:none}
.slide.bleed:not(.kb) img{transform:scale(1.06)}
.comp .dcards{gap:var(--sp-2)}
.comp .dcard{padding:var(--sp-2) var(--sp-3)}
.comp .dcard h3{font-size:15px}
.comp .dcard p{font-size:12px;line-height:1.42}
/* ---------- remaining council items ---------- */
/* the decorative mark is anchored to the frame, identical on every slide */
.illmark{right:var(--slide-pad);bottom:calc(var(--slide-pad) + 34px);width:19%;max-width:200px}
.slide.pull .illmark{right:var(--slide-pad);bottom:calc(var(--slide-pad) + 40px);width:22%;max-width:230px}
/* round caps turn sub-1% donut arcs into detached pills */
.eqwrap .seg2{stroke-linecap:butt}
/* two cards in a row share a bottom edge regardless of copy length */
.cols,.dcards,.wall,.tradeoff,.trio,.sev,.obj,.stable,.conds{align-items:stretch}
/* icon stroke now matches the illustration canon exactly */
.i,.ico svg{stroke-width:2}
.sig{grid-template-columns:1fr auto;gap:var(--sp-3)}
.sig .sv{font-size:15px;color:var(--rust);font-weight:700}
/* ---------- substantive caveats must not look like boilerplate ---------- */
.fnote.hard{color:var(--text);border-top-color:rgba(180,83,31,.34);padding-left:var(--sp-4);position:relative}
.fnote.hard::before{content:"";position:absolute;left:0;top:calc(var(--sp-2) + 2px);bottom:2px;width:3px;
border-radius:2px;background:var(--rust)}
.fnote.hard b{color:var(--rust-deep)}
.slide.mesh .fnote.hard{color:#F2EBE2;border-top-color:rgba(240,168,103,.4)}
.slide.mesh .fnote.hard::before{background:var(--rust2)}
.slide.mesh .fnote.hard b{color:var(--gold2)}
/* ---------- phone: two figures were illegible below 860px ---------- */
@media screen and (max-width:860px){
.stp .sn2{font-size:11px;height:64px}
.stp .sv2{font-size:11px}
.stair{height:200px}
.fanin{aspect-ratio:auto;height:auto}
.fanin .ft{font-size:16px}
.fanin .fh{font-size:20px}
.illmark{display:none}
}
/* ============================================================
FIELD-REPORT FIXES — collisions, dead space, broken figures
============================================================ */
/* Содержимое не должно висеть вверху слайда. Прежняя схема добивалась этого
в два приёма: слайд выравнивался по верху, блок центрировался в остатке
собственными автополями, а сноска прижималась к низу своим `margin-top:auto`.
Три механизма держали равновесие втроём.
03.08 прижатие сноски снято (она забирала весь свободный ход, и после того
как карточки перестали растягиваться, полоса над ней доходила до 144px).
Оставлять автополя блокам после этого нельзя: они разводили блок и сноску
на сто с лишним пикселей — на слайде 2 лидерской зазор был 123px при
собственном отступе сноски в 20px.
Теперь механизм ОДИН: слайд центрирует всю группу — заголовок, блок и
сноску. Воздух расходится сверху и снизу, между блоками его нет.
`safe` обязателен. Простое `center` на переполненных слайдах выталкивает
группу за ВЕРХНИЙ край: прогон дал `kick(top)` +4…+8px на start s06,
ecosystem s03 и всех четырнадцати языках yield. `safe center` центрирует,
пока содержимое влезает, и откатывается к выравниванию по началу, когда
нет, — то есть срезаться может только низ, но не заголовок. */
.slide:not(.chap):not(.bleed):not(.pull):not(.split){justify-content:safe center}
/* the rank staircase reads as a staircase again: labels under the bars, honest heights */
.stair{height:250px;gap:8px;align-items:end}
.stp{justify-content:flex-end}
.stp .sv2{font-size:12px;margin-bottom:6px;color:var(--text)}
.stp .sn2{writing-mode:horizontal-tb;transform:none;height:auto;font-size:11px;margin-top:8px;
text-align:center;white-space:nowrap;overflow:visible;color:var(--muted)}
.stairtrack{height:170px;align-items:flex-end}
.stp .sbar2{border-radius:6px 6px 2px 2px}
/* the ecosystem loop labels collided with the centre lockup */
.loop svg{width:100%;max-width:390px}
.loop .nl{font-size:11px}
.loop .ctr{font-size:12px}
.loop .ctrs{font-size:10px}
/* the council table was cramped into a corner */
.table7{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:34px}
.table7 svg{width:100%}
.table7 .tl2{font-size:11px}
.table7 .dcard{padding:var(--sp-3) var(--sp-4)}
.table7 .dcard p{font-size:12px}
.table7{gap:28px}
/* the price bars were overrunning the card row below them */
.paybar{height:auto;align-items:end;gap:var(--sp-2)}
.paybar .pb{height:auto;justify-content:flex-end}
.paybar .stairtrack{height:130px}
.paybar .pv{font-size:11px;margin-bottom:5px}
.paybar .pl{font-size:11px;margin-top:6px}
.paybar .pbar{border-radius:6px 6px 2px 2px}
.table7 .dcards{gap:var(--sp-2)}
.table7 .dcard{padding:var(--sp-2) var(--sp-3)}
.table7 .dcard h3{font-size:14px}
.table7 .dcard p{font-size:12px;line-height:1.42}
.table7 svg{max-width:300px}
.table7{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
/* ============================================================
THE CYCLE — the deck's central idea gets the whole canvas.
Four products in the corners, the loop drawn behind them,
the closing statement in the middle where the eye lands.
============================================================ */
.cycle{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;grid-template-rows:auto 92px auto;
gap:0;margin-top:auto;margin-bottom:auto;width:100%}
.cycle svg.ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.cycle .ring path{fill:none;stroke:var(--rust2);stroke-width:1.6;stroke-linecap:round;opacity:.42;
stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset var(--d-draw) var(--ease)}
.slide.seen .cycle .ring path{stroke-dashoffset:0}
.slide.seen .cycle .ring path:nth-of-type(2){transition-delay:.12s}
.slide.seen .cycle .ring path:nth-of-type(3){transition-delay:.24s}
.slide.seen .cycle .ring path:nth-of-type(4){transition-delay:.36s}
.cyc{position:relative;z-index:1;display:grid;grid-template-columns:44px 1fr;gap:var(--sp-3);
align-items:start;background:var(--surface);border:1px solid var(--line-weak);border-radius:var(--r-md);
padding:var(--sp-4) var(--sp-5);box-shadow:var(--sh-card);
opacity:0;transform:translateY(12px);transition:opacity var(--d-enter) var(--ease),transform var(--d-enter) var(--ease)}
.slide.seen .cyc{opacity:1;transform:none}
.slide.seen .cyc:nth-of-type(2){transition-delay:.10s}
.slide.seen .cyc:nth-of-type(3){transition-delay:.20s}
.slide.seen .cyc:nth-of-type(4){transition-delay:.30s}
.cyc .cn2{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
background:var(--rust);color:#fff}
.cyc .cn2 svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.cyc:nth-of-type(4) .cn2{background:var(--rust-deep)}
.cyc .cstep{font-family:var(--mono);font-size:10px;letter-spacing:var(--tr-label);color:var(--rust);
text-transform:uppercase;display:block}
.cyc b{display:block;font-family:var(--display);font-size:18px;color:var(--text);margin:3px 0 5px;line-height:1.2}
.cyc span.cd2{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.cychub{grid-column:2;grid-row:2;z-index:2;align-self:center;justify-self:center;text-align:center;
background:var(--ink);color:#fff;border-radius:50%;width:96px;height:96px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
opacity:0;transform:scale(.8);transition:opacity var(--d-enter) var(--ease) .4s,transform var(--d-enter) var(--ease) .4s}
.slide.seen .cychub{opacity:1;transform:none}
.cychub b{font-family:var(--display);font-weight:700;font-size:13px;line-height:1.05}
.cychub span{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--gold2);text-transform:uppercase}
@media screen and (max-width:860px){
.cycle{grid-template-columns:1fr;grid-template-rows:auto;gap:var(--sp-3)}
.cycle svg.ring{display:none}
.cychub{grid-column:1;grid-row:auto;width:auto;border-radius:var(--r-md);padding:var(--sp-3)}
}
.cycle{grid-template-columns:1fr 128px 1fr;grid-template-rows:auto 108px auto}
.cychub{width:112px;height:112px;gap:0}
.cychub b{font-size:15px;line-height:1.12;letter-spacing:.01em}
.cycle .ring path{opacity:.55;stroke-width:1.8}
/* ---------- the cover lockup sat detached from the composition ---------- */
.slide.bleed .on::before{top:calc(var(--slide-pad) - 4px)}
.slide.bleed .on img[alt="Wellex"]{height:22px!important;margin-bottom:var(--sp-5)!important;opacity:.92}
.slide.bleed .on .kick{margin-bottom:var(--sp-4)}
/* ---------- cover: the rule fought the lockup, so the type block carries it alone ---------- */
.slide.bleed .on::before{display:none}
.slide.bleed .on img[alt="Wellex"]{height:24px!important;margin-bottom:auto!important;opacity:1}
.slide.bleed .on{display:flex;flex-direction:column;padding-top:var(--slide-pad);
padding-bottom:calc(var(--slide-pad) + 30px)}
.slide.bleed .on>.kick{margin-top:auto}
.slide.bleed .on .big{margin-bottom:var(--sp-4)}
/* the flex column stretched the lockup to full width — pin it */
.slide.bleed .on img[alt="Wellex"]{align-self:flex-start;flex:none;width:auto;height:24px!important;
margin:0 0 auto!important;object-fit:contain}
.slide.bleed .on{align-items:flex-start}
/* masthead at the top, the message sitting on the baseline — one clear gap, not two */
.slide.bleed .on>.kick{margin-top:0}
.slide.bleed .on img[alt="Wellex"]{margin:0 0 auto!important}
.slide.bleed .on .kick{margin-bottom:var(--sp-4)}
/* there was no free space to distribute, so the auto margin did nothing — give it a real gap */
.slide.bleed .on img[alt="Wellex"]{margin:0 0 var(--sp-8)!important}
.slide.bleed .on{justify-content:center}
.slide.bleed .on .big{margin-bottom:var(--sp-5)}
/* ═══ wellex-deck5.css ═══════════════════════════════════ */
/* ============================================================
WELLEX DECK — EDITORIAL PITCH LAYER
The device set the references share, rebuilt on our palette:
oversized stats, pill rows, icon chips, solid accent callouts,
numbered cards, photo-with-block. Loads last.
============================================================ */
/* ---------- oversized stat ---------- */
.stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--sp-6);margin-top:var(--sp-5)}
.stat2{display:block}
.stat2 b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.9;
font-size:clamp(38px,calc(4.6 * var(--cw)),64px);color:var(--rust);font-variant-numeric:tabular-nums}
.stat2 b em{font-style:normal;font-size:.52em;letter-spacing:-.02em}
.stat2 span{display:block;font-size:12px;color:var(--muted);margin-top:var(--sp-2);line-height:1.4;max-width:22ch}
.stat2.ink b{color:var(--ink)}
.slide.mesh .stat2 b{color:var(--gold2)}.slide.mesh .stat2 span{color:var(--d2,#DCD5CC)}
.slide.mesh .stat2.ink b{color:#fff}
/* ---------- pill row ---------- */
.pillrow{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.pillrow span{font-family:var(--display);font-weight:650;font-size:var(--z-cap,12px);padding:7px 16px;
border-radius:var(--r-pill);background:#EFE9E0;color:var(--text);white-space:nowrap}
.pillrow span.on{background:var(--rust);color:#fff}
.pillrow span.ink{background:var(--ink);color:#fff}
.slide.mesh .pillrow span{background:rgba(255,255,255,.10);color:#F2EBE2}
.slide.mesh .pillrow span.on{background:var(--rust2);color:#241A12}
/* ---------- icon chips ---------- */
.chips{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.chip2{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.chip2 svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip2.a{background:var(--ink);color:#fff}
.chip2.b{background:var(--rust);color:#fff}
.chip2.c{background:#EFE9E0;color:var(--rust)}
.slide.mesh .chip2.c{background:rgba(255,255,255,.12);color:var(--gold2)}
/* ---------- solid accent callout ---------- */
.callout{position:relative;background:var(--rust);color:#fff;border-radius:var(--r-md);
padding:var(--sp-5) var(--sp-5) var(--sp-5);overflow:hidden}
.callout b{display:block;font-family:var(--display);font-size:25px;line-height:1.05;letter-spacing:-.02em;margin-bottom:var(--sp-2)}
.callout span{display:block;font-size:13px;line-height:1.5;color:#FBEFE6}
.callout .arw{position:absolute;right:var(--sp-4);top:var(--sp-4);width:30px;height:30px;border-radius:50%;
background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
.callout.ink{background:var(--ink)}
.callout.ink span{color:var(--d2,#DCD5CC)}
/* ---------- numbered mini-cards ---------- */
.numcards{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--sp-3);margin-top:var(--sp-4)}
.numc{border-radius:var(--r-md);padding:var(--sp-4);background:var(--surface);border:1px solid var(--line-weak);
box-shadow:var(--sh-card)}
.numc .nz{font-family:var(--display);font-weight:700;font-size:22px;color:var(--rust);display:block;line-height:1}
.numc span{display:block;font-size:12px;line-height:1.45;color:var(--muted);margin-top:var(--sp-2)}
.numc.on{background:var(--rust);border-color:transparent}
.numc.on .nz{color:#fff}.numc.on span{color:#FBEFE6}
/* ---------- photo with an offset block ---------- */
.photoblock{position:relative;border-radius:var(--r-md);overflow:hidden}
.photoblock img{width:100%;height:100%;object-fit:cover;display:block}
.photoblock::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
background:linear-gradient(0deg,rgba(20,16,14,.72),transparent)}
.photoblock .pbtag{position:absolute;left:var(--sp-4);bottom:var(--sp-4);z-index:1;
font-family:var(--display);font-weight:650;font-size:13px;color:#fff}
/* ---------- deck chrome: the small nav row the references all carry ---------- */
.slide:not(.bleed):not(.chap) .navmark{position:absolute;right:var(--slide-pad);top:var(--slide-pad);
display:flex;flex-direction:column;gap:3px;z-index:2}
.navmark i{display:block;width:17px;height:2px;border-radius:2px;background:var(--rust);opacity:.85}
.navmark i:nth-child(2){width:12px}
.navmark i:nth-child(3){width:14px}
@media screen and (max-width:860px){
.stats,.numcards{grid-auto-flow:row}
.navmark{display:none}
}
@media print{.navmark i{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.comp{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:var(--sp-3)}
.comp .dcards{gap:var(--sp-2)}
.comp .dcard{padding:var(--sp-2) var(--sp-3)}
.comp .dcard p{font-size:12px;line-height:1.4}
.chain{gap:6px}
.lvl{padding:var(--sp-2) var(--sp-3)}
/* ═══ wellex-deck6.css ═══════════════════════════════════ */
/* WELLEX DECK 6 — инфографические полосы и приборная рама.
Палитра не меняется: всё берётся из канона rust/cream deck1–5. */
/* ── зачистка остатков холодной палитры ────────────────────── *
* Литералы #C9C4E8 / #CFC9E6 / #1c1636 живут в deck1–3 и никакая
* правка токенов до них не дотягивается — гасим адресно. */
.slide.statement p,.slide.statement .metric-b span,.slide.statement .bar-r .bv,
.slide.statement .hero-n .ncap,.slide.mesh .hero-n .ncap,.slide.bleed .hero-n .ncap,
.slide.mesh p,.slide.pull.mesh .qs,.slide.mesh .isokey,.slide.mesh .dcard p,
.slide.mesh li,.slide.bleed li,.layerc.deep span,
.slide.mesh .formula .fb,.formula .fb{color:var(--d2,#D9D1C7)}
.slide .r3{color:#1A1614;border-top-color:#E6DCCC}
.steps3 li,.slide.close .on .vcard a{color:var(--d2,#D9D1C7)}
.steps3 b,.slide.close .on .vcard b{color:#fff}
/* ── слайд целиком занят схемой ─────────────────────────────── */
.slide.igs{padding:0;overflow:hidden}
.slide.igs .ig{display:block;width:1280px;height:720px;object-fit:contain}
@media screen and (max-width:860px){
.slide.igs{padding:0}
.slide.igs .ig{width:100%;height:auto}
}
/* фолио на схемном слайде мешает — схема несёт свою подпись */
.slide.igs .folio{display:none}
/* ── измерительная рама: приборный приём в тёплой палитре ───── */
.rbar{position:absolute;left:0;right:0;height:6px;pointer-events:none;z-index:3;
background-image:repeating-linear-gradient(90deg,var(--rust) 0 1px,transparent 1px 32px);
opacity:.24}
.rbar.t{top:0}
.rbar.b{bottom:0;transform:scaleY(-1)}
.slide.bleed .rbar,.slide.mesh .rbar,.slide.chap .rbar{opacity:.4;filter:brightness(1.6)}
@media screen and (max-width:860px){.rbar{display:none}}
@media print{.rbar{opacity:.18}}
/* ── цикл четырёх продуктов: узел в цвете бренда, стрелки видны ── */
.cychub{background:var(--rust);width:104px;height:104px;
box-shadow:0 0 0 8px rgba(180,83,31,.10),0 10px 30px rgba(60,34,18,.20)}
.cychub b{font-size:14px;letter-spacing:.01em}
.cycle .ring path{stroke:var(--rust);stroke-width:2.4;opacity:.9}
.cycle .ring marker path{fill:var(--rust);stroke:none}
/* карточки цикла: та же кромка, что и везде — связка приёмов */
.cyc{position:relative}
.cyc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
border-radius:2px;background:var(--rust);opacity:.85}
.cyc:nth-of-type(2)::before{background:var(--rust2)}
.cyc:nth-of-type(3)::before{background:var(--rust-mid)}
.cyc:nth-of-type(4)::before{background:var(--vd)}
/* ── семь потоков: 4 + 3 на общей 12-колоночной сетке ──────── */
.sev{grid-template-columns:repeat(12,1fr);align-items:stretch;grid-auto-rows:1fr}
.sevc{grid-column:span 3;display:flex;flex-direction:column;position:relative;overflow:hidden}
/* акцентная кромка — тот же приём, что в схемах */
.sevc::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--rust);opacity:.9}
.sevc:nth-child(2)::before{background:var(--rust2)}
.sevc:nth-child(3)::before{background:var(--rust-mid)}
.sevc:nth-child(4)::before{background:var(--vd)}
.sevc:nth-child(6)::before{background:var(--rust-soft)}
.sevc:nth-child(7)::before{background:var(--gold2)}
.sevc:nth-child(n+5){grid-column:span 4}
.sevc.wide{grid-column:span 4}
.sevc span{flex:1 1 auto}
.sevc .rate{flex:none;align-self:flex-start;margin-top:auto}
@media screen and (max-width:860px){
.sev{grid-template-columns:1fr}
.sevc,.sevc:nth-child(n+5),.sevc.wide{grid-column:span 1}
}
/* ── иконки: крупнее, строго по центру фрейма, единый вес ───── */
.iconbox{width:34px;height:34px;border-radius:11px;
display:flex;align-items:center;justify-content:center;line-height:1;overflow:hidden}
.iconbox .i{width:20px;height:20px;stroke-width:1.8;display:block;flex:none;
vector-effect:non-scaling-stroke;overflow:hidden}
.sevc>.iconbox,.objc>.iconbox{position:absolute;right:12px;top:12px;margin:0;
width:32px;height:32px;border-radius:10px}
.sevc>.iconbox .i,.objc>.iconbox .i{width:19px;height:19px}
.dcards.c2 .iconbox{width:32px;height:32px}
.dcards.c2 .iconbox .i{width:19px;height:19px}
/* заголовок карточки не должен подлезать под иконку.
В .sevc заголовок — это , а в .objc — : раньше отступ висел на
и разрывал полужирный зачин ответа сорокапиксельной дырой. */
.sevc b,.objc q{padding-right:40px}
/* ── совет: диаграмма и карточки одной высоты, низ не провисает ── */
/* Колонка колеса ужата 430 → 388px (03.08). Высоту слайда задаёт именно
колесо: после того как сноска перестала быть прижатой, на длинных языках
(de/fr/tr/vi) она выходила за полосу фолио на +16px. Колесо квадратное,
поэтому минус 42px по ширине — это минус 42px по высоте слайда. */
.table7{align-items:stretch;grid-template-columns:minmax(0,388px) minmax(0,1fr);gap:36px}
.table7 svg{align-self:center;width:100%;max-width:none}
.table7 .dcards{display:flex;flex-direction:column;justify-content:center;height:100%}
/* 2026-08-03: `flex:1 1 0` делил высоту колонки между карточками поровну,
а высоту задавало колесо на 430px — карточка 160px несла 56px текста.
Пустота оказывалась ВНУТРИ каждой (по ~50px сверху и снизу от текста),
тот же класс, что у `.dcards` 02.08 и `.fx-c` на слайде 6.
Карточки держат свой размер, а пара целиком центрируется рядом с
колесом — воздух уходит наружу блока. */
.table7 .dcard{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.table7 .dcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rust);opacity:.9}
.table7 .dcard:last-child::before{background:var(--vd)}
/* ── финальный слайд: три шага + визитка ───────────────────── */
.slide.close{padding-top:36px;padding-bottom:28px}
.slide.close .on{max-width:60%;justify-content:flex-start}
/* фото красивое, но текст важнее — гасим правую границу скрима сильнее */
.slide.close .scrim{background:linear-gradient(78deg,
rgba(18,14,12,.97) 0%,rgba(18,14,12,.93) 34%,rgba(18,14,12,.72) 56%,
rgba(18,14,12,.24) 78%,rgba(18,14,12,0) 100%)}
.steps3{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:2px;
background:rgba(224,121,60,.34);border:1px solid rgba(224,121,60,.34);
border-radius:var(--r-sm);grid-template-columns:repeat(3,1fr);overflow:hidden}
.slide.close .on .steps3 li{background:#171210;padding:12px 16px 13px;position:relative}
.slide.close .on .steps3 i{font-style:normal;font-family:var(--mono);font-size:var(--z-micro,10px);letter-spacing:.18em;color:var(--gold2)}
.slide.close .on .steps3 b{display:block;font-family:var(--display);font-size:var(--z-sub,14px);color:#fff;margin:8px 0 5px;letter-spacing:-.01em}
.slide.close .on .steps3 span{display:block;font-size:var(--z-cap,12px);line-height:1.52;color:var(--d2,#CFC6BA)}
.vcard{margin-top:13px;display:grid;grid-template-columns:1.15fr 1fr;gap:2px;
background:rgba(224,121,60,.34);border:1px solid rgba(224,121,60,.34);
border-radius:var(--r-sm);overflow:hidden}
.slide.close .on .vcard>div{background:#171210;padding:13px 17px 14px}
.slide.close .on .vcard>div+div{background:#1E1714}
.slide.close .on .vc-k{display:block;font-family:var(--mono);font-size:var(--z-micro,10px);letter-spacing:.2em;
text-transform:uppercase;color:var(--gold2);margin-bottom:9px}
.vcard b{display:block;font-family:var(--display);font-weight:650;font-size:18px;color:#fff;margin-bottom:4px}
.vcard a{display:block;font-size:13px;color:#EFE5D8;text-decoration:none;line-height:1.62}
.vcard a:hover{color:#fff;text-decoration:underline}
.slide.close .legal{font-size:var(--z-micro,10px);color:var(--d3,#B7ADA1);margin-top:10px;max-width:88ch;line-height:1.45;
border-top:1px solid rgba(255,255,255,.12);padding-top:10px}
@media screen and (max-width:860px){
.slide.close .on{max-width:100%}
.steps3,.vcard{grid-template-columns:1fr}
}
/* ── угловые метки ─────────────────────────────────────────── */
.cnr{position:absolute;width:14px;height:14px;border:1px solid var(--rust);opacity:.4;pointer-events:none}
.cnr.tl{left:26px;top:26px;border-right:0;border-bottom:0}
.cnr.tr{right:26px;top:26px;border-left:0;border-bottom:0}
.cnr.bl{left:26px;bottom:26px;border-right:0;border-top:0}
.cnr.br{right:26px;bottom:26px;border-left:0;border-top:0}
@media screen and (max-width:860px){.cnr{display:none}}
@media print{.cnr{display:none}}
/* ── доли: две группы вместо одного плоского списка ────────── */
.eqlist .eqh{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--rust);padding-bottom:8px;margin-bottom:4px;
border-bottom:1px solid var(--line)}
.eqlist .eqh.mt{margin-top:16px}
.eqlist .eqr.d i{background:transparent;border:0;position:relative}
.eqlist .eqr.d i::before{content:"→";position:absolute;inset:0;display:grid;place-items:center;
font-size:12px;color:var(--rust2);line-height:1}
.eqlist .eqr.d b{color:var(--rust)}
/* ── повествовательные слайды: три крупные карточки по центру ── */
.slide.argue .dcards{margin-top:var(--sp-6);gap:var(--sp-4)}
/* `min-height:300px` держал «три крупные карточки по центру», но при
содержимом в 122px давал по ~170px пустоты под текстом в каждой —
30 карточек в семи колодах. Владелец 03.08: отдаём содержимому.
Крупность остаётся за паддингом и типографикой, а не за пустой высотой. */
.slide.argue .dcard{padding:30px 28px 26px;position:relative;overflow:hidden;
display:flex;flex-direction:column;justify-content:flex-start}
.slide.argue .dcard::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--rust)}
.slide.argue .dcard:nth-child(2)::after{background:var(--rust2)}
.slide.argue .dcard:nth-child(3)::after{background:var(--vd)}
.slide.argue .dcard .dn{display:block;font-style:normal;font-family:var(--mono);
font-size:var(--z-micro,10px);letter-spacing:.2em;color:var(--rust);margin-bottom:12px}
.slide.argue .dcard h3{font-size:18px;line-height:1.22;margin-bottom:10px;letter-spacing:-.012em}
.slide.argue .dcard p{font-size:13px;line-height:1.58}
.slide.argue h2{max-width:19ch}
/* ── слайд «наша камера»: мозаика во всю площадь слайда ────── */
.slide.gal{padding:0;overflow:hidden;position:relative}
/* коллаж без швов и рамок: фотографии стыкуются встык, как в футаже */
.slide.gal .mosaic{position:absolute;inset:0;margin:0;gap:0;
grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;background:none}
.slide.gal .mosaic .pc{border-radius:0;overflow:hidden;background:none;
border:0;box-shadow:none;outline:0;margin:0}
.slide.gal .mosaic .pc::before,.slide.gal .mosaic .pc::after{display:none}
.slide.gal .mosaic .pc img{width:100%;height:100%;object-fit:cover;display:block}
/* заголовок ложится поверх мозаики на затемнении */
.slide.gal .galtop{position:absolute;left:0;right:0;top:0;z-index:3;
padding:44px 56px 90px;
background:linear-gradient(180deg,rgba(20,16,14,.86) 0%,rgba(20,16,14,.55) 55%,transparent 100%)}
.slide.gal .galtop .kick{color:var(--rust2)}
.slide.gal .galtop h2{color:#fff;max-width:20ch;margin:10px 0 0}
.slide.gal .galfoot{position:absolute;left:0;right:0;bottom:0;z-index:3;
padding:96px 56px 58px;
background:linear-gradient(0deg,rgba(16,12,10,.96) 0%,rgba(16,12,10,.75) 48%,transparent 100%)}
.slide.gal .galfoot .fnote{color:var(--d2,#D9D1C7);margin:0;max-width:70ch}
.slide.gal .folio{z-index:4}
.slide.gal .folio .fm,.slide.gal .folio .fp{color:rgba(255,255,255,.72)}
.slide.gal .folio .fc{color:var(--rust2)}
.slide.gal .rbar,.slide.gal .cnr{z-index:4}
@media screen and (max-width:860px){
.slide.gal{padding:0}
.slide.gal .mosaic{position:static;grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}
.slide.gal .galtop,.slide.gal .galfoot{position:static;background:none;padding:16px}
.slide.gal .galtop h2{color:var(--text)}
}
/* ── фолио: всегда на одной высоте, независимо от языка ────── */
.slide > .folio{position:absolute;left:var(--slide-pad,56px);right:var(--slide-pad,56px);
bottom:26px;margin:0;z-index:2}
.slide.bleed > .folio,.slide.mesh > .folio,.slide.chap > .folio,.slide.gal > .folio{bottom:24px}
.slide.igs > .folio{display:none}
/* ── аудит 31.07: читаемость ────────────────────────────────── */
/* h1 обложки визуально не отличается от .big — семантика без смены вида */
.slide h1.big{font-family:var(--display);font-weight:700;letter-spacing:-.03em;margin:0}
/* длинные юридические строки: 252ch на слайде 34 не читаются */
.slide.close .legal{max-width:92ch}
/* нижняя граница кегля: 9px было ниже порога комфортного чтения */
.slide .fnote,.slide .legal,.folio,.qrurl,.rc-st{font-size:11px}
/* моно-метки капсом читаются иначе, но ниже 10px не опускаемся */
.slide .wl,.slide .eqh,.slide .rc-k,.slide .rf-k,.slide .vc-k,.slide .pm,
.slide .sn,.slide .ju,.slide .tn2{font-size:10px}
/* ⚠️ 02.08: интерлиньяж НЕ помогает и делает хуже. Сноска прижата к низу
`margin-top:auto`: укоротив её, мы только опускаем её ниже, и она глубже
заходит на полосу фолио — замер вырос с +6 до +12. Лечится зазором снизу,
а не высотой текста. Проверено и откачено. */
.slide.race .fnote.wide,.slide.close .legal{font-size:11px;line-height:1.5}
/* на телефоне мелкий текст поднимаем: 263 узла были меньше 12px */
@media screen and (max-width:860px){
.slide p,.slide span,.slide li,.slide td{font-size:13px;line-height:1.55}
.slide .fnote,.slide .legal{font-size:12px;line-height:1.5}
.slide .kick{font-size:11px}
}
/* юридический текст в две колонки: строка вдвое короче, читается глазом,
а не сканируется по 135 символов */
.slide.race .fnote.wide,.slide.close .legal{
columns:2;column-gap:34px;max-width:none}
/* ⚠️ 2026-08-02, слайд 34 «Гонка основателей»: юридическая сноска прижата
к низу (`margin-top:auto`), а полоса фолио лежит поверх той же области —
зазор между ними −4px. Столкновения текста нет (знак слева, номер справа,
сноска между ними), но тесно. Пробовал: три колонки — CSS всё равно
балансирует в две; нижний паддинг слайда — меняет замер, но не картинку,
холст фиксированный 1280×720. Настоящее решение — сократить сноску,
а она вся юридическая. Оставляю как есть и записываю, чтобы не искать
заново. */
.slide.race .fnote.wide{column-rule:1px solid rgba(255,255,255,.10)}
/* 02.08 — доведено. Сноске не хватало 47px до нижней границы содержимого:
она заходила на полосу фолио на 7px. Интерлиньяж не помогает (см. выше).
Забираем высоту там, где она ничего не значит: три колонки вместо двух
(юридический текст читается блоками, а не строками) и сжатые зазоры
между блоками гонки. */
.slide.race .fnote.wide{column-count:3;column-gap:26px}
.slide.race .rscore{margin-top:8px}
.slide.race .prizes{margin-top:8px}
.slide.race .pz-foot{margin-bottom:6px}
.slide.close .legal{column-rule:1px solid rgba(255,255,255,.12)}
@media screen and (max-width:860px){
.slide.race .fnote.wide,.slide.close .legal{columns:1}
}
@media print{
.slide.race .fnote.wide,.slide.close .legal{columns:2}
}
/* ═══ wellex-deck7.css ═══════════════════════════════════ */
/* WELLEX DECK 7 — вау-слой.
Всё построено на трёх правилах:
1. Ни один эффект не меняет расположение — только раскрывает то, что уже на месте.
2. Всё гаснет под prefers-reduced-motion и на печати.
3. Палитра не трогается: движение, свет и время — не цвет. */
/* ── схемы: видимы всегда, анимация только украшает ──────────
Раньше базовым состоянием был clip-path: inset(0 100% 0 0) — схема
пряталась целиком и ждала класс .seen. Если наблюдатель не срабатывал,
слайд оставался пустым. Контент такого объёма прятать нельзя. */
.slide.igs .ig{opacity:1;filter:saturate(.92);
transition:filter .7s ease,transform .7s cubic-bezier(.16,.84,.28,1);
transform:scale(.995)}
.slide.igs.seen .ig{filter:none;transform:none}
/* световая кромка пробегает один раз при появлении */
.slide.igs::after{
content:"";position:absolute;top:0;bottom:0;width:2px;left:0;z-index:4;
background:linear-gradient(180deg,transparent,var(--rust),transparent);
opacity:0;pointer-events:none}
.slide.igs.seen::after{animation:igsweep 1.05s cubic-bezier(.16,.84,.28,1) forwards}
@keyframes igsweep{
0%{opacity:0;transform:translateX(0)}
12%{opacity:.7}
88%{opacity:.7}
100%{opacity:0;transform:translateX(1278px)}}
/* ── ключевые числа: свет пробегает по цифре один раз ───────── */
.count,.pct,.rate,.sv2,.dc,.gseg,.money{position:relative}
.slide.seen .count,.slide.seen .pct,.slide.seen .money{
background-image:linear-gradient(100deg,
currentColor 0 42%,rgba(240,168,103,.95) 50%,currentColor 58% 100%);
background-size:260% 100%;background-position:120% 0;
-webkit-background-clip:text;background-clip:text;
animation:numshine 1.5s cubic-bezier(.3,.7,.2,1) .35s 1 forwards}
@keyframes numshine{to{background-position:-30% 0}}
/* ── карточки: подъём по очереди, а не все разом ────────────── */
.slide .dcard,.slide .sevc,.slide .objc,.slide .cyc,.slide .eqr,.steps3 li{
transition:opacity .5s var(--ease),transform .5s var(--ease)}
.slide:not(.seen) .dcard,.slide:not(.seen) .sevc,
.slide:not(.seen) .objc,.slide:not(.seen) .eqr{opacity:0;transform:translateY(14px)}
.slide.seen .dcard:nth-child(1),.slide.seen .sevc:nth-child(1){transition-delay:.06s}
.slide.seen .dcard:nth-child(2),.slide.seen .sevc:nth-child(2){transition-delay:.13s}
.slide.seen .dcard:nth-child(3),.slide.seen .sevc:nth-child(3){transition-delay:.20s}
.slide.seen .dcard:nth-child(4),.slide.seen .sevc:nth-child(4){transition-delay:.27s}
.slide.seen .sevc:nth-child(5){transition-delay:.34s}
.slide.seen .sevc:nth-child(6){transition-delay:.41s}
.slide.seen .sevc:nth-child(7){transition-delay:.48s}
.slide.seen .eqr:nth-child(2){transition-delay:.08s}
.slide.seen .eqr:nth-child(3){transition-delay:.14s}
.slide.seen .eqr:nth-child(4){transition-delay:.20s}
.slide.seen .eqr:nth-child(5){transition-delay:.26s}
/* ── акцентная кромка карточки прочерчивается ───────────────── */
.sevc::before,.slide.argue .dcard::after,.table7 .dcard::before,.cyc::before{
transform-origin:left center;transition:transform .55s cubic-bezier(.2,.8,.3,1) .25s}
.table7 .dcard::before,.cyc::before{transform-origin:center top}
.slide:not(.seen) .sevc::before,.slide:not(.seen) .argue .dcard::after{transform:scaleX(0)}
.slide:not(.seen) .table7 .dcard::before,.slide:not(.seen) .cyc::before{transform:scaleY(0)}
/* ── параллакс: контейнер должен уметь двигать картинку ─────── */
.slide.bleed:not(.kb) img{will-change:transform;transform:scale(1.09)}
/* ── измерительная линейка втягивается, а не появляется ─────── */
.rbar{transform-origin:left center;transition:transform .9s cubic-bezier(.16,.84,.28,1) .1s}
.slide:not(.seen) .rbar{transform:scaleX(0)}
.slide:not(.seen) .rbar.b{transform:scaleX(0) scaleY(-1)}
.slide.seen .rbar.b{transform:scaleY(-1)}
/* ── угловые скобки раскрываются из точки ───────────────────── */
.cnr{transition:opacity .45s var(--ease) .3s,transform .45s var(--ease) .3s}
.slide:not(.seen) .cnr{opacity:0;transform:scale(.4)}
/* ── визитка финала: мягкое свечение по кромке ──────────────── */
.slide.close .vcard{box-shadow:0 0 0 1px rgba(224,121,60,.16),0 18px 46px rgba(0,0,0,.42)}
.slide.close .steps3{box-shadow:0 18px 46px rgba(0,0,0,.38)}
/* ── тише, если человек просил тише ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
.slide.igs .ig{filter:none;transform:none;transition:none}
.slide.igs.seen::after{animation:none}
.slide.seen .count,.slide.seen .pct,.slide.seen .money{animation:none;background:none;
-webkit-background-clip:border-box;background-clip:border-box}
.slide .dcard,.slide .sevc,.slide .objc,.slide .cyc,.slide .eqr,.steps3 li,
.rbar,.cnr,.sevc::before,.slide.argue .dcard::after,.table7 .dcard::before,.cyc::before{
transition:none;opacity:1;transform:none}
.slide:not(.seen) .rbar.b,.slide.seen .rbar.b{transform:scaleY(-1)}
.slide.bleed:not(.kb) img{transform:none}
}
@media print{
.slide.igs .ig{filter:none;transform:none}
.slide.igs::after{display:none}
.slide .dcard,.slide .sevc,.slide .objc,.slide .cyc,.slide .eqr,.steps3 li,
.rbar,.cnr,.sevc::before,.slide.argue .dcard::after,.table7 .dcard::before,.cyc::before{
opacity:1!important;transform:none!important}
.slide:not(.seen) .rbar.b,.slide.seen .rbar.b{transform:scaleY(-1)!important}
.slide.seen .count,.slide.seen .pct,.slide.seen .money{animation:none;background:none;
-webkit-background-clip:border-box;background-clip:border-box}
.slide.bleed:not(.kb) img{transform:none!important}
}
/* ── слайд «что уже правда»: число и его статус в одной карточке ──
Раньше четыре числа стояли одной строкой, а четыре статуса — другой,
и связь между ними не читалась: чипы выглядели отдельным списком.
Префикс fx-, потому что короткие имена в общем бандле уже заняты. */
.fx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:var(--g)}
/* карточки занимают всю свободную высоту: раньше содержимое жалось
к верхней трети слайда, а нижняя половина стояла пустой */
/* 2026-08-03, третий заход. Первый: `flex:1` + `space-between` + `margin:auto`
у числа — карточка 500px под 110px содержимого, дыра ВНУТРИ каждой.
Второй: центрирование содержимого — дыра разошлась на два поля, а
`align-items:center` ещё и развалил верхнюю линию ряда: карточки с
двухстрочной подписью вставали выше соседних.
Итог: ряд НЕ растягивается, карточки равной высоты по самой высокой
(штатное поведение грида), содержимое прижато к верху карточки, а весь
ряд центрируется между заголовком и сноской автополями. Воздух один и
снаружи блока. */
.fx-grid{flex:0 1 auto;min-height:0}
/* 2026-08-03. Карточка растягивалась на всю высоту ряда (`.fx-grid{flex:1}`),
и содержимое разводило ДВА распора сразу: `justify-content:space-between`
гнал чип вверх, а `margin:auto` у числа добавлял второй. Карточка 290px
несла 110px содержимого — дыра в полтораста пикселей ВНУТРИ каждой из
четырёх. Тот же класс дефекта, что у `.dcards` 02.08, только механизм иной.
Ряд по-прежнему занимает высоту слайда, но чип, число и подпись стоят
одной группой по центру карточки: пустота уходит в поля, а не в разрыв. */
.fx-c{display:flex;flex-direction:column;align-items:flex-start;
justify-content:flex-start;gap:13px;padding:22px 22px 20px;
border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.fx-tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);
padding:5px 11px;background:var(--bg)}
.fx-tag.on{color:#fff;background:var(--rust);border-color:var(--rust)}
.fx-tag.ink{color:#fff;background:var(--ink);border-color:var(--ink)}
.fx-n{font-family:var(--display);font-weight:700;font-size:72px;line-height:1;
letter-spacing:-.04em;color:var(--rust);margin:0}
.fx-c.ink .fx-n{color:var(--ink)}
.fx-t{font-size:13.5px;line-height:1.45;color:var(--muted)}
@media screen and (max-width:860px){.fx-grid{grid-template-columns:1fr 1fr}}
/* ── доходность: из чего складывается каждая группа ───────────────
Полоса даёт восемь источников, карточки — четыре группы. Без явного
состава читатель видел три несвязанных набора процентов. */
.smix{display:block;font-family:var(--mono);font-size:11px;line-height:1.4;
color:var(--rust);margin:2px 0 6px;letter-spacing:.01em}
/* вывод — отдельной строкой, а не четвёртым пунктом легенды */
.sconc{margin-top:8px;font-weight:650;font-size:13px;color:var(--text)}
/* ── лестница рангов: у чисел появилась единица измерения ────────
Раньше «100 · 500 · 3K» висели без подписи, и что это за величина
можно было понять только из сноски под графиком. */
.stair-ax{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted);margin-top:var(--g)}
.stair-lg{display:flex;align-items:center;gap:8px;margin-top:10px;
font-size:12px;color:var(--muted)}
.stair-lg i{width:12px;height:12px;border-radius:3px;background:var(--vd);flex:none}
/* ── выплаты: три слоя получили общий заголовок ──────────────────
Без него читатель видел три технических карточки и не понимал,
от чего они защищают: слово «дубль» появлялось только в третьей. */
.lay-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--rust);margin-bottom:10px}
/* Заголовок над слоями добавил строку, и по-французски с итальянским
блок упирался в низ слайда. Возвращаем высоту, не трогая читаемость. */
.slide .paysplit .lay-k{margin-bottom:6px}
.slide .paysplit .layerc{padding:10px 14px 9px}
.slide .paysplit{gap:16px}
.slide .fanin{height:96px}
.slide .paysplit .layers{gap:6px}
.slide .paysplit .layerc b{font-size:13.5px;margin:3px 0 2px}
.slide .paysplit .layerc>span:last-child{font-size:11.5px;line-height:1.4}
.slide .paysplit .layerc{padding:9px 14px 8px}
.slide.facts6{display:flex;flex-direction:column}
/* ═══ wellex-deck8.css ═══════════════════════════════════ */
/* WELLEX DECK 8 — экраны приложения на слайде.
*
* Добавлено 2026-08-01: колодам понадобилось показывать НАСТОЯЩЕЕ приложение,
* а не описывать его словами. Кадры лежат в /media/app/ — это снимки сборки,
* прошедшей ревью App Store, с обрезанными вшитыми английскими подписями:
* подпись обязана приходить из словаря, иначе на тринадцати языках из
* четырнадцати слайд наполовину английский.
*
* Две раскладки:
* .appsplit — текст слева, один экран справа (разбор одного экрана)
* .approw — ряд экранов с подписями (обзор пути по приложению)
*
* Рамка нарочно условная: тонкий кант и радиус, без «стеклянных» бликов,
* скевоморфных вырезов и теней под наклоном — они спорят с плоским
* рисовальным идиомом остальной колоды.
*/
.appshot{
display:block;
border-radius:var(--r-lg);
border:1px solid var(--line);
background:#0B0A12; /* совпадает с фоном самого приложения */
overflow:hidden;
box-shadow:var(--sh-card);
}
.appshot img{display:block;width:100%;height:auto}
/* тёмные слайды: кремовый кант на тёмном фоне выглядит как наклейка */
.slide.bleed .appshot,
.slide.statement .appshot{
border-color:rgba(255,255,255,.14);
box-shadow:0 18px 44px rgba(0,0,0,.34);
}
/* ── разбор одного экрана ───────────────────────────────────── */
.appsplit{
display:grid;
grid-template-columns:1fr minmax(168px,208px);
gap:var(--sp-7);
align-items:center;
margin-top:var(--sp-4);
}
.appsplit > .appshot{align-self:center}
/* Экран телефона в четыре раза выше своей ширины и в полный рост на слайд
не помещается. Подрезаем снизу, а не сжимаем: сжатый скриншот читается
как ошибка вёрстки, подрезанный — как кадр. Высота задаёт ЗАПАС на длинные
языки: испанский примерно на пятую часть длиннее английского, французский
ещё длиннее. Подгонять высоту под каждый язык — тупик; запас берётся один
раз здесь. */
.appsplit .appshot{max-height:268px}
.appsplit .appshot img{margin-bottom:-1px}
.appnote{
display:flex;flex-direction:column;gap:var(--sp-3);
}
.appnote li{
list-style:none;
display:grid;grid-template-columns:var(--sp-6) 1fr;gap:var(--sp-3);
align-items:start;
font-size:var(--fs-3);line-height:1.5;color:var(--text);
}
.appnote li b{display:block;font-weight:600;margin-bottom:2px}
.appnote li span{color:var(--muted);font-size:var(--fs-2);line-height:1.5}
.appnote li i{
font-style:normal;font-family:var(--mono,ui-monospace,monospace);
font-size:var(--fs-1);letter-spacing:.06em;
color:var(--rust);padding-top:3px;
}
.slide.bleed .appnote li,
.slide.statement .appnote li{color:var(--d1,#F3EDE4)}
.slide.bleed .appnote li span,
.slide.statement .appnote li span{color:var(--d2,#C9BFB2)}
.slide.bleed .appnote li i,
.slide.statement .appnote li i{color:var(--rust2)}
/* ── ряд экранов ────────────────────────────────────────────── */
.approw{
display:grid;
grid-template-columns:repeat(var(--n,4),1fr);
gap:var(--sp-6);
margin-top:var(--sp-4);
align-items:start;
}
.approw figure{margin:0;display:grid;grid-template-columns:150px 1fr;gap:var(--sp-5);align-items:center}
/* Кадры разной высоты рвут нижнюю линию ряда — режем все к одной. */
.approw .appshot{max-height:224px}
.approw figcaption{font-size:var(--fs-2);line-height:1.45;color:var(--muted)}
.approw figcaption b{display:block;color:var(--text);font-weight:600;font-size:var(--fs-2);margin-bottom:3px}
.slide.bleed .approw figcaption,
.slide.statement .approw figcaption{color:var(--d2,#C9BFB2)}
.slide.bleed .approw figcaption b,
.slide.statement .approw figcaption b{color:var(--d1,#F3EDE4)}
/* ── цепочка «как это работает» ─────────────────────────────── */
.chain4{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
margin-top:var(--sp-6);
border:1px solid var(--line);
border-radius:var(--r-lg);
overflow:hidden;
}
.chain4 > div{
padding:22px 20px 24px;
border-right:1px solid var(--line);
display:flex;flex-direction:column;gap:var(--sp-2);
position:relative;
}
.chain4 > div:last-child{border-right:0}
.chain4 .cn{
font-family:var(--mono,ui-monospace,monospace);
font-size:var(--fs-1);letter-spacing:.08em;color:var(--rust);
}
.chain4 b{font-size:var(--fs-4);line-height:1.3;font-weight:600;color:var(--text)}
.chain4 span{font-size:var(--fs-2);line-height:1.5;color:var(--muted)}
/* стрелка между звеньями: рисуется бордюром, отдельного узла не заводим —
пустой div попал бы в словарь и в проверку переполнения */
.chain4 > div:not(:last-child)::after{
content:"";position:absolute;right:-7px;top:50%;
width:12px;height:12px;
border-top:1px solid var(--line);border-right:1px solid var(--line);
transform:translateY(-50%) rotate(45deg);
background:var(--bg,#FBF8F2);
}
.slide.bleed .chain4,
.slide.statement .chain4{border-color:rgba(255,255,255,.16)}
.slide.bleed .chain4 > div,
.slide.statement .chain4 > div{border-right-color:rgba(255,255,255,.16)}
.slide.bleed .chain4 b,
.slide.statement .chain4 b{color:var(--d1,#F3EDE4)}
.slide.bleed .chain4 span,
.slide.statement .chain4 span{color:var(--d2,#C9BFB2)}
.slide.bleed .chain4 .cn,
.slide.statement .chain4 .cn{color:var(--rust2)}
.slide.bleed .chain4 > div:not(:last-child)::after,
.slide.statement .chain4 > div:not(:last-child)::after{
border-color:rgba(255,255,255,.16);background:transparent;
}
/* ── RTL: ряд и цепочка читаются справа налево ──────────────── */
body.rtl .chain4 > div{border-right:0;border-left:1px solid var(--line)}
body.rtl .chain4 > div:last-child{border-left:0}
body.rtl .chain4 > div:not(:last-child)::after{
right:auto;left:-7px;
transform:translateY(-50%) rotate(-135deg);
}
/* ── телефон: экраны в один столбец, ряд прокручивается ─────── */
@media screen and (max-width:860px){
.appsplit{grid-template-columns:1fr;gap:var(--sp-6)}
.appsplit .appshot{max-width:280px;margin:0 auto;max-height:none}
.approw{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.approw .appshot{max-height:none}
.chain4{grid-template-columns:1fr}
.chain4 > div{border-right:0;border-bottom:1px solid var(--line)}
.chain4 > div:last-child{border-bottom:0}
.chain4 > div:not(:last-child)::after{display:none}
}
/* ── печать: кадры обязаны попасть в PDF ────────────────────── */
@media print{
.appshot{box-shadow:none;break-inside:avoid}
.approw,.appsplit,.chain4{break-inside:avoid}
}
/* ── тёмный statement с чуть меньшей цитатой ─────────────────
`.mesh.pull` общий с лидерской колодой, а её трогать нельзя: она живая.
Поэтому запас на длинные языки берём отдельным модификатором. Без него
слайд переполнялся на 3 px на самой широкой раскладке в четырёх языках —
мелочь, но подрезать под каждый язык вручную это тупик. */
.slide.mesh.pull.tight .q{font-size:clamp(26px,calc(3.1 * var(--cw)),42px);line-height:1.24}
.slide.mesh.pull.tight .qs{max-width:62ch}
/* ── тёмное утверждение поверх кадра ─────────────────────────
`.mesh` рисует свой фон CSS-свечением. Когда под цитату кладётся
фотография, свечение и кадр спорят: добавляем `.shot`, оно гасит
градиент и включает ту же схему затемнения, что у `.bleed`. */
.slide.mesh.shot{background:#0F0C0A}
.slide.mesh.shot > .glow{display:none}
.slide.mesh.shot > picture{position:absolute;inset:0;z-index:0}
.slide.mesh.shot > picture img{width:100%;height:100%;object-fit:cover;display:block}
.slide.mesh.shot > .scrim{
position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,rgba(15,12,10,.94) 0%,rgba(15,12,10,.86) 42%,rgba(15,12,10,.42) 72%,rgba(15,12,10,.25) 100%);
}
.slide.mesh.shot > .grain{z-index:2}
.slide.mesh.shot > .kick,
.slide.mesh.shot > .q,
.slide.mesh.shot > .qs{position:relative;z-index:3}
/* ── цена крупными числами ───────────────────────────────────
Три карточки с мелким «$49» читались как список, а не как оффер.
Число ведёт, подпись объясняет. Счётчик оживает при появлении
слайда — компонент `.count` уже был в бандле и не использовался. */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-6)}
.pcard{
border:1px solid var(--line);border-radius:var(--r-lg);
padding:var(--sp-6) var(--sp-6) var(--sp-6);background:#FFF;
display:flex;flex-direction:column;gap:var(--sp-2);
}
.pcard.on{background:var(--ink,#1A1614);border-color:transparent}
.pbig{
display:flex;align-items:baseline;gap:2px;
font-family:var(--display);font-weight:700;letter-spacing:-.04em;
font-size:clamp(52px,calc(6.4 * var(--cw)),86px);line-height:.94;color:var(--rust);
}
.pcard.on .pbig{color:var(--rust2)}
.pbig .cur{font-size:.46em;font-weight:600;transform:translateY(-.5em)}
.pbig .per{font-size:var(--z-lede,.2em);font-weight:600;letter-spacing:.02em;color:var(--muted);margin-left:10px;align-self:flex-end;padding-bottom:.35em}
.pcard.on .pbig .per{color:var(--d2,#C9BFB2)}
.pcard b{font-size:var(--fs-4);font-weight:600;color:var(--text);margin-top:6px}
/* только ПРЯМОЙ потомок: `.pcard span` перебивал размер самой суммы внутри
`.pbig` — доллар оставался крупным, а число падало до 13 px. */
.pcard > span{font-size:var(--fs-2);line-height:1.5;color:var(--muted)}
.pbig .count{font-size:1em;line-height:.94;color:inherit}
.pcard.on b{color:var(--d1,#F3EDE4)}
.pcard.on > span{color:var(--d2,#C9BFB2)}
@media screen and (max-width:860px){
.prices{grid-template-columns:1fr;gap:var(--sp-4)}
}
@media print{ .prices{break-inside:avoid} }
/* ── экран приложения героем ─────────────────────────────────
`.appsplit` держит телефон в 298 px справа: аналитично, но робко для
слайда, который должен впечатлять. `.apphero` — тот же проверенный
`.appsplit`, но на тёмном, с более крупным экраном и тёплым свечением.
Собственный грид тут не годится: базовая раскладка слайда — колонка,
и сквозная строка выносила экран выше верхнего паддинга на 244 px. */
.slide.apphero{background:var(--ink,#1A1614);color:var(--d1,#F3EDE4);position:relative;overflow:hidden}
.slide.apphero > *{position:relative;z-index:2}
.slide.apphero::before{
content:"";position:absolute;z-index:0;
right:-4%;top:52%;transform:translateY(-50%);
width:46%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(224,121,60,.30) 0%,rgba(224,121,60,.10) 42%,transparent 68%);
}
.slide.apphero .kick{color:var(--rust2)}
.slide.apphero h2{color:var(--d1,#F7F2EA)}
.slide.apphero .appsplit{grid-template-columns:1fr minmax(200px,248px);gap:var(--sp-8)}
.slide.apphero .appshot{
max-height:318px;border-radius:26px;
border-color:rgba(255,255,255,.14);
box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.slide.apphero .appnote li{color:var(--d1,#F3EDE4)}
.slide.apphero .appnote li b{color:var(--d1,#F7F2EA)} /* иначе жирный заголовок остаётся ink-цветом и тонет в тёмном слайде */
.slide.apphero .appnote li span{color:var(--d2,#C9BFB2)}
.slide.apphero .appnote li i{color:var(--rust2)}
.slide.apphero .fnote{color:var(--d3,#8E8579);border-top-color:rgba(255,255,255,.14)}
@media screen and (max-width:860px){
.slide.apphero::before{display:none}
}
@media print{ .slide.apphero::before{display:none} }
/* ── корпусная гарнитура: Literata ────────────────────────────
Заголовки остаются Space Grotesk, корпус уходит в засечки — контраст
двух гарнитур и даёт «издание» вместо «интерфейса». До этого корпус
набирался системным стеком, то есть San Francisco на маке.
⚠️ ОБЛАСТЬ ДЕЙСТВИЯ: только `body.serif-body`. Токен `--body` общий,
и глобальная замена задела бы отгруженную лидерскую колоду и рум —
а они живые для 208 человек. Две новые колоды объявляют класс сами.
Выбрана Literata, а не Source Serif 4: прирост высоты текста +4,5%
против +9,4% (немецкий и французский и так впритык), вес 215 КБ
против 353 КБ, и больший x-height — мелкий кегль читается лучше. */
@font-face{font-family:'Literata';src:url('/fonts/literata-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';src:url('/fonts/literata-latin-ext.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';src:url('/fonts/literata-cyrillic.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Literata';src:url('/fonts/literata-cyrillic-ext.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;
unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
body.serif-body{--body:'Literata',Georgia,'Times New Roman',serif}
/* Правило иерархии: ВСЕ заголовки — Space Grotesk, весь корпус — Literata.
Без этого `.pcard b` и `.appnote li b` наследовали корпус и уходили в
засечки, хотя по роли это подзаголовки, а не текст. Два одинаковых по
назначению элемента набирались бы разными гарнитурами. */
body.serif-body .pcard b,
body.serif-body .appnote li b,
body.serif-body .chain4 b,
body.serif-body .approw figcaption b,
body.serif-body .steps3 b,
body.serif-body .vcard b{font-family:var(--display)}
/* ── интерлиньяж под засечки ─────────────────────────────────
Literata при том же line-height, что системный гротеск, набирается
свободнее и даёт +4,5% высоты. Засечкам меньше ведущего и нужно —
уменьшаем там, где текст мелкий и плотный. Это дешевле, чем резать
формулировки на шести языках, и типографически честнее. */
/* ⚠️ у `.fnote` и `.legal` база уже плотная — `--lh-snug` = 1.25.
Первая попытка поставила им 1.45 и УВЕЛИЧИЛА высоту: четыре чистых
языка стали одним. Трогаем только то, где база свободная (1.5). */
body.serif-body .objc span{line-height:1.44}
body.serif-body .appnote li span{line-height:1.44}
body.serif-body .dcard p{line-height:1.46}
body.serif-body .steps3 span{line-height:1.42}
body.serif-body .objc span{line-height:1.4}
/* экран в герое отдаёт 16 px под подросший корпус */
body.serif-body .slide.apphero .appshot{max-height:306px}
/* закрывающий слайд: засечки прибавили высоту, блок перестал помещаться
между паддингами и уехал вверх. Отдаём немного из отбивок, а не из
размера — юридическая строка и так на минимальном кегле. */
/* Финальный слайд — самый плотный в обеих колодах: заголовок, три шага,
визитка и правовая строка в одной колонке. Приведение кеглей к шкале
(10→11, 12→13, 14→15) прибавило ему 17px, и на ru/de он полез за верхний
паддинг. Забираю ровно эти 17px из отбивок, а не из текста: набор внутри
плиток был свободнее, чем везде в колоде, — сжатие ему на пользу. */
body.serif-body .slide.close .steps3{margin-top:8px}
body.serif-body .slide.close .on .steps3 li{padding:10px 16px 11px}
body.serif-body .slide.close .on .steps3 b{margin:6px 0 4px}
body.serif-body .slide.close .vcard{margin-top:9px}
body.serif-body .slide.close .on .vcard>div{padding:11px 17px 12px}
body.serif-body .slide.close .on .vc-k{margin-bottom:7px}
body.serif-body .slide.close .legal{line-height:1.34;margin-top:7px;padding-top:7px}
/* ── ШКАЛА ЦВЕТА И КЕГЛЯ — только у двух новых колод ───────────────────────
Замер 2026-08-01: продуктовая рендерила ВОСЕМНАДЦАТЬ цветов текста и
ПЯТНАДЦАТЬ кеглей. Восемь из цветов — тёплые серые на тёмных слайдах,
неразличимые глазом поодиночке (#C6BEB4 · #C9BFB2 · #CFC6BA · #D9D1C7 ·
#DCD5CC …), но именно такой разнобой читается как «собрано», а не «сделано».
⚠️ ПОЧЕМУ ЧЕРЕЗ var(--tok, СТАРОЕ ЗНАЧЕНИЕ), а не прямой заменой:
правила живут в deck.css/deck4/deck5/deck6/present — их же грузит
ОТГРУЖЕННАЯ лидерская колода (208 человек) и рум. Токены объявлены
только здесь, под `body.serif-body`; там, где токена нет, срабатывает
запасное значение и старый вид сохраняется байт в байт.
Проверка: гистограмма цветов leaders до и после правки обязана совпасть. */
body.serif-body{
--d1:#F7F2EA; /* заголовок и акцентный текст на тёмном */
--d2:#C9C1B6; /* корпус на тёмном — вобрал пять прежних серых */
--d3:#9A9184; /* сноска, правовая строка (контраст 5,6:1 на #1A1614) */
--z-micro:11px; /* было 10 — микролейбл, правовая строка, ссылка QR */
--z-cap:13px; /* было 12 — подпись, описание шага, пилюля */
--z-sub:15px; /* было 14 — подзаголовок шага */
--z-lede:18px; /* было .2em ≈ 17,2 — «/месяц» у цены */
}
/* Лейбл карточки вне `.slide.argue` не имел правила вообще и наследовал
браузерные 16px — на Founders это был единственный кегль без места в шкале. */
body.serif-body .dcard .dn{display:block;font-style:normal;font-family:var(--mono);
font-size:var(--z-micro);letter-spacing:.2em;color:var(--rust);margin-bottom:12px}
/* ── .slide.split — заметка о столкновении имён ────────────────────────────
* 2026-08-01 я написал собственный `.slide.split` и полдня ловил разъехавшуюся
* вёрстку: класс УЖЕ существовал (wellex-deck2.css), это грид на две колонки
* с детьми `.sc` (текст) и `.sp` (панель со снимком), и его использует
* `deck-advisors-v2`. Мои прямые дети раскладывались по ячейкам через одного.
* Своя реализация снята, обе новые колоды используют штатную. Проверять
* занятость класса ДО того, как писать компонент, а не после.
*/
/* Штатный `.split` делит слайд почти пополам (1.05fr / .95fr) — так он
задуман для колоды советников, где слева короткий абзац. В продуктовой и
Founders слева живут две карточки И сноска: на 47% ширины сноска
разрасталась на строку-две и перелезала полосу фолио на всех шести языках.
Текстовой колонке отдано 62%: снимок остаётся полноценной панелью, а не
полоской, и запас держится вплоть до немецкого. */
body.serif-body .slide.split{grid-template-columns:1.34fr .66fr}
/* ── Корпус телефона вокруг снимка экрана — только у двух новых колод ──────
*
* До 2026-08-01 экран приложения лежал на слайде как прямоугольник со скруглением
* и волосяным кантом. Читалось это как картинка, а не как телефон в руке.
*
* Кадры теперь снимаются целиком — от статус-бара до нижней черты (симулятор
* iPhone 16 Pro, тёмная тема, 9:41), поэтому вокруг них уместен настоящий
* корпус: тёмный кант в 5px, радиус в тон реальному, светлая грань сверху и
* мягкая тень под низом. Динамический остров рисовать не нужно — он уже
* внутри снимка.
*
* Радиус подобран к пропорции кадра 1206×2622: у iPhone 16 Pro скругление
* экрана ≈ 62/1206 ширины, поэтому берём проценты, а не пиксели, — иначе при
* любом другом размере угол перестаёт совпадать с углом на самом снимке.
*/
body.serif-body .appshot{
border:none;padding:5px;background:linear-gradient(160deg,#3A3632,#15120F 42%,#2A2622);
border-radius:calc(5.6% + 5px);
box-shadow:0 1px 0 rgba(255,255,255,.13) inset, 0 22px 48px -12px rgba(20,12,6,.5),
0 2px 6px rgba(20,12,6,.24);
}
body.serif-body .appshot img{border-radius:5.6%}
/* На тёмных слайдах тень под корпусом не видна — вместо неё тонкий тёплый
ореол, иначе телефон сливается с фоном и «плавает». */
body.serif-body .slide.bleed .appshot,
body.serif-body .slide.statement .appshot,
body.serif-body .slide.apphero .appshot{
box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 0 0 1px rgba(240,168,103,.16),
0 26px 60px -14px rgba(0,0,0,.7);
}
/* Кадры пересняты целиком (1206×2622 вместо обрезанных 1284×2448), и мелкий
телефон перестал быть оправданным: раньше подрезка снизу съедала половину
экрана, теперь на слайде виден весь путь от статус-бара до таб-бара.
Высоту поднимаю до предела, который держат все шесть языков — потолок
выясняется гейтом вёрстки, а не на глаз. */
/* ⚠️ ГЛАВНОЕ ПРО ЭТИ КАДРЫ: экран телефона — 1206×2622, то есть выше своей
ширины в 2,17 раза. Ограничение ПО ВЫСОТЕ при широкой колонке даёт не
маленький телефон, а ОБРЕЗАННЫЙ: на слайде 12 при 306px было видно верхние
40% экрана и кольцо уезжало за край. Поэтому у слайдов-героев задаётся
ШИРИНА, а высота считается сама — экран виден целиком, от статус-бара до
таб-бара, ради чего кадры и переснимались. */
/* Слайд-герой: раскладку даёт ШТАТНЫЙ `.split` (текст в `.sc`, телефон в
`.sp`), а не собственное абсолютное позиционирование. Свой вариант через
position:absolute + top/bottom я написал и выбросил: телефон вставал по
левому краю поверх текста, потому что контейнером для него оказывался не
тот предок. Компонент, который уже работает, надёжнее нового.
Почему вообще колонка: экран 1206×2622 — выше своей ширины в 2,17 раза.
В общем потоке над ним живут рубрика и заголовок, и на телефон остаётся
~374px высоты; показать при этом ВЕСЬ экран — значит показать полоску в
172px шириной. Отдельная колонка даёт все 582px, то есть 268px ширины. */
body.serif-body .slide.apphero.split > .sp{display:flex;align-items:center;justify-content:center;
padding:var(--slide-pad) var(--sp-6) calc(var(--slide-pad) + 30px)}
body.serif-body .slide.apphero.split > .sp .appshot{height:100%;width:auto;max-height:none}
body.serif-body .slide.apphero.split > .sp .appshot img{height:100%;width:auto}
/* В ряду из двух экранов (слайд 20) высота на двоих делится, и полный рост
не помещается под заголовок с подписями — здесь подрезка осознанная. */
body.serif-body .approw .appshot{max-height:224px}
body.serif-body .appsplit .appshot{max-height:288px}
/* ── .bdg — решётка из десяти бейджей ─────────────────────────────────────
Существующие сетки рассчитаны на два-четыре элемента: `.cols` даёт две
колонки, `.dcards.c3` — три, `.obj` — шесть. Десять в них не ложатся
никак, а разбивать список на два слайда значило бы потерять ровно то,
что этот слайд утверждает: их можно прочесть все сразу, за один экран.
Пять на два, плитки без рамок — рамка вокруг каждой из десяти превращает
спокойный список в таблицу. */
body.serif-body .bdg{
display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
background:var(--line-weak);border:1px solid var(--line-weak);
border-radius:var(--r-sm);overflow:hidden;margin-top:var(--sp-5)}
body.serif-body .bdg > div{background:var(--surface);padding:var(--sp-4) var(--sp-4) var(--sp-5)}
body.serif-body .bdg b{display:block;font-family:var(--display);font-size:var(--fs-3);
color:var(--text);letter-spacing:-.01em;margin-bottom:var(--sp-2)}
body.serif-body .bdg span{display:block;font-size:var(--fs-2);line-height:1.44;color:var(--muted)}
/* На тёмном слайде та же решётка живёт на своей подложке */
body.serif-body .slide.bleed .bdg,body.serif-body .slide.statement .bdg{
background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
body.serif-body .slide.bleed .bdg > div,body.serif-body .slide.statement .bdg > div{background:#171210}
@media screen and (max-width:860px){
body.serif-body .bdg{grid-template-columns:repeat(2,1fr)}
}
/* Решётка забирает свободную высоту, содержимое плиток центрируется. Здесь
это уместно, в отличие от слайда с двумя карточками (там растяжение я
откатил): десять коротких плиток, выросших со ста пятидесяти до двухсот
пикселей, читаются как просторный список, а не как пустые коробки —
пустота делится на десять, а не на две. */
body.serif-body .slide > .bdg{flex:1 1 auto;max-height:420px}
body.serif-body .bdg > div{display:flex;flex-direction:column;justify-content:center}
/* ── Знак в фолио — на каждом слайде ──────────────────────────────────────
*
* В подвале и так стояло слово «WELLEX», набранное моноширинным с разрядкой.
* Рядом с ним встаёт фирменный знак W — то есть на КАЖДОМ слайде логотип есть,
* а не только на обложке. Это и есть «органично»: знак занимает место, где
* взгляд его и ждёт, и не спорит ни с заголовком, ни с фотографией.
*
* ⚠️ Ставится ЗНАК, а не логотип целиком. Первая версия подставляла в подвал
* полный lockup (266×80) высотой 13px — это 43px ширины на шесть букв плюс
* символ, и буквы превращались в кашу. Знак нарисован так, чтобы читаться
* мелким; слово рядом набирается шрифтом колоды и остаётся разборчивым.
*
* Два файла вместо перекраски: `-dark` — вариант для светлого фона (заливка
* Void), обычный — белый для тёмных слайдов. Имена сбивают с толку, поэтому
* записано здесь: `-dark` = ТЁМНЫЙ ЗНАК, то есть для СВЕТЛОГО слайда.
*/
/* Правило БЕЗ `body.serif-body`: знак нужен на каждом слайде каждой колоды.
Со скоупом в лидерской колоде в фолио стояло одно слово без глифа, и рум
выглядел как две разные компании — знак на четырёх колодах и слово на пятой.
Отдельного риска для лидерской нет: добавляется только 27px левого поля,
которое фолио и так держит. */
.folio .fm{
padding-left:27px;
background:url("/brand/logo/wellex-w-mark-dark.svg") left center/auto 11px no-repeat}
/* Заставка тёмная только тогда, когда под ней лежит фотография (.cbg).
В трёх колодах этого слоя не было — слайд оставался белым, а знак и
слово «WELLEX» на нём белые: пропадали целиком, и logo-guard молчал,
потому что считал заставку тёмной по типу, а не по фону. Условие
привязано к слою, а не к типу, и работает в обе стороны. */
.slide.chap:has(.cbg) .folio .fm{background-image:url("/brand/logo/wellex-w-mark.svg")}
.slide.bleed .folio .fm,
.slide.mesh .folio .fm,
.slide.close .folio .fm,
.slide.gal .folio .fm,
.slide.apphero .folio .fm,
.slide.statement .folio .fm{
background-image:url("/brand/logo/wellex-w-mark.svg")}
/* ── .split.flip — снимок слева, текст справа ─────────────────────────────
Пустоту под карточками закрывает фотопанель, но если КАЖДАЯ такая панель
стоит справа, десяток слайдов выстраивается в один и тот же кадр и
разнообразие, ради которого всё затевалось, снова теряется.
Зеркальный вариант позволяет ставить панели чаще: два соседних слайда с
разных сторон читаются как разворот, а не как повтор. */
body.serif-body .slide.split.flip > .sc{order:2}
body.serif-body .slide.split.flip > .sp{order:1}
body.serif-body .slide.split.flip{grid-template-columns:.66fr 1.34fr}
/* Фолио и номер слайда живут в текстовой колонке — при зеркале они обязаны
переехать вместе с ней, иначе подпись окажется поверх фотографии. */
body.serif-body .slide.split.flip .folio{left:auto;right:var(--slide-pad);width:calc(67% - var(--slide-pad) * 2)}
@media print{
body.serif-body .slide.split.flip .folio{left:auto;right:10mm}
}
/* ── Многоячеечные решётки забирают свободную высоту ──────────────────────
*
* Где фотопанель не поставить (соседний слайд уже с фотографией, и три подряд
* читались бы как один разворот), пустоту снизу закрывает сам блок.
*
* ⚠️ ТОЛЬКО там, где ячеек три и больше. Ровно это правило я откатывал
* 2026-08-01 на `.cols`: две карточки, выросшие до шестисот пикселей, — это
* та же пустота, только переехавшая ВНУТРЬ карточки, где она заметнее.
* На четырёх и шести ячейках свободная высота делится на четыре и на шесть,
* прибавка на ячейку мелкая, и решётка читается просторной, а не пустой.
* Потолок держит правило от вырождения на слайдах, где текста и правда мало.
*/
body.serif-body .slide > .chain4,
body.serif-body .slide > .dcards.c3,
body.serif-body .slide > .obj{flex:1 1 auto;max-height:430px}
body.serif-body .slide > .chain4 > div,
body.serif-body .slide > .dcards.c3 > .dcard{display:flex;flex-direction:column;justify-content:flex-start}
/* Ряд экранов приложения НЕ увеличиваю. Свободные 92px на двадцатом слайде
выглядят приглашением, но подписи под экранами длиннее в русском и немецком,
и любая прибавка выше 224px роняет вёрстку то на одной ширине, то на другой.
Проверено на 252 и 262 — оба раза переполнение всплывало в другом месте. */
/* ── .obj из шести карточек: три колонки, а не четыре ─────────────────────
Общая сетка задаёт `.obj` четыре колонки — она рассчитана на восемь
ячеек лидерской колоды, где 4×2 сходится ровно. Во всех четырёх новых
колодах возражений ШЕСТЬ, и в четыре колонки они ложатся 4+2: во втором
ряду две карточки и половина слайда пустая. Три колонки дают 3+3 без
дыры и заодно делают карточку шире, а строку — длиннее.
Условие по числу ячеек, а не по колоде: восьмёрка лидеров остаётся 4×2. */
body.serif-body .obj:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
/* ── две карточки в текстовой колонке .split растягиваются ────────────────
На слайдах-сплитах пара карточек занимала свою высоту по тексту, а под
ними оставалось до 200px белого до сноски — на фоне полноразмерной
фотопанели справа это читалось как незавёрстанный слайд.
Растягиваем САМУ пару, а текст внутри держим у верхнего края: иначе
пустота просто переезжает внутрь карточки и становится хуже (эту ошибку
уже делали на .dcards и откатывали дважды). */
body.serif-body .slide.split > .sc{display:flex;flex-direction:column}
body.serif-body .slide.split > .sc > .cols{flex:1 1 auto;align-content:stretch}
/* Сноска прижата `margin-top:auto`, а автоматические поля забирают весь
свободный запас РАНЬШЕ, чем flex-grow, — поэтому пара карточек не росла
ни на пиксель, сколько ей ни ставь `flex:1`. Фиксируем отступ сноски,
и запас достаётся карточкам. */
body.serif-body .slide.split > .sc > .fnote{margin-top:var(--sp-5)}
body.serif-body .slide.split > .sc > .cols > .dcard{display:flex;flex-direction:column;justify-content:flex-start}
/* ── .mband — лестница полос множителя ────────────────────────────────────
Слайд назывался «четыре полосы» и показывал две текстовые карточки. Самый
важный механизм всего портфеля был описан прозой там, где он по природе
визуальный: полосу видно, а не вычитывают.
Базовая линия — середина. Нижняя полоса уходит ВЛЕВО от неё: именно так
читается «режет в обе стороны», и это единственный способ сказать это без
цифр множителя, которые в колодах не называются принципиально. */
body.serif-body .mband{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-4);
flex:1 1 auto;justify-content:center;position:relative;padding:6px 0}
/* Подпись стоит вплотную к своей полосе: при полной ширине трека между ними
зияло полэкрана и связь «подпись → полоса» терялась. */
body.serif-body .mband .mrow{display:grid;grid-template-columns:128px minmax(0,1fr);
align-items:center;gap:16px;max-width:980px}
body.serif-body .mband .mlab{font-family:var(--mono);font-size:var(--z-cap,12px);letter-spacing:.06em;
color:var(--muted);text-align:right;white-space:nowrap}
body.serif-body .mband .mtrack{position:relative;height:38px}
/* базовая линия — там, где множитель ничего не меняет */
body.serif-body .mband .mtrack::before{content:"";position:absolute;left:38%;top:-6px;bottom:-6px;
width:1px;background:var(--line);z-index:0}
body.serif-body .mband .mbar{position:absolute;top:0;bottom:0;border-radius:var(--r-sm);
background:linear-gradient(90deg,rgba(180,83,31,.16),rgba(180,83,31,.34));
border:1px solid rgba(180,83,31,.30);display:flex;align-items:center;padding:0 14px;z-index:1}
body.serif-body .mband .mbar b{font-family:var(--display);font-weight:650;font-size:var(--z-sub,14px);
color:var(--text);white-space:nowrap}
/* ниже базовой — уходит влево и гасится по цвету: вычитает, а не прибавляет */
body.serif-body .mband .mrow.below .mbar{left:14%;right:62%;
background:linear-gradient(90deg,rgba(120,110,100,.10),rgba(120,110,100,.18));
border-color:rgba(120,110,100,.28)}
body.serif-body .mband .mrow.base .mbar{left:38%;right:40%}
body.serif-body .mband .mrow.up1 .mbar{left:38%;right:22%}
body.serif-body .mband .mrow.up2 .mbar{left:38%;right:2%}
/* подпись под лестницей — обычным текстом: моноширинный во всю ширину читался
как строка кода и спорил с самой лестницей за внимание */
body.serif-body .mband .mnote{font-size:var(--z-cap,13px);line-height:1.5;
color:var(--muted);max-width:62ch;margin-top:10px}
@media screen and (max-width:860px){
body.serif-body .mband .mrow{grid-template-columns:1fr;gap:4px}
body.serif-body .mband .mlab{text-align:left}
}
/* ── .solo — слайд из одной строки ────────────────────────────────────────
Замер 02.08: три схемы (kick→карточки→сноска) покрывали три четверти
слайдов портфеля, карточек на слайде всегда 2, 3 или 6, и у КАЖДОГО из 94
заголовков стояла точка. Идеальная равномерность — главный признак того,
что колоду собирала машина: живой дизайнер ломает сетку там, где смысл
этого требует, и оставляет воздух там, где нужна пауза.
Здесь нет ни карточек, ни сноски, ни подзаголовка. Одна строка во весь
разворот и очень много пустоты вокруг неё. Ставить редко: два-три раза на
всю колоду, иначе приём перестаёт быть приёмом. */
/* `.on` на mesh-слайдах — блок, а не флекс: `justify-content` на нём ничего
не делал, строка висела у верхнего края, и измерительная линейка проходила
ровно под ней, читаясь как случайное подчёркивание. */
body.serif-body .slide.solo > .on{display:flex;flex-direction:column;
justify-content:center;max-width:none;height:100%}
body.serif-body .slide.solo .sline{
font-family:var(--display);font-weight:700;
font-size:clamp(38px,calc(5.4 * var(--cw)),70px);line-height:1.02;letter-spacing:-.028em;
max-width:19ch;color:var(--text);margin:0;position:relative;z-index:2}
body.serif-body .slide.solo .sline em{font-style:normal;color:var(--rust)}
body.serif-body .slide.solo .rbar,
body.serif-body .slide.solo .cnr{display:none}
body.serif-body .slide.solo .stag{
font-family:var(--mono);font-size:var(--z-micro,11px);letter-spacing:.2em;
text-transform:uppercase;color:var(--muted);margin:0 0 var(--sp-5)}
/* на тёмном — свои цвета, без переопределения каждого узла */
body.serif-body .slide.solo.mesh .sline,
body.serif-body .slide.solo.bleed .sline{color:var(--d1,#F7F2EA)}
body.serif-body .slide.solo.mesh .stag,
body.serif-body .slide.solo.bleed .stag{color:var(--d3,#9A9184)}
/* ── карточки на слайде с фотофоном ───────────────────────────────────────
`.bleed` переключает текстовые токены на «светлое по тёмному», а `.dcard`
при этом остаётся белой плашкой. Получалось светло-серое по белому —
вторую и третью карточку было физически не прочесть.
Ставим карточкам тёмное стекло: фотография проступает сквозь них, текст
снова контрастен, и слайд перестаёт распадаться на два разных слайда. */
body.serif-body .slide.hfbg .dcard,
body.serif-body .slide.hfbg .objc{
background:rgba(26,20,16,.62);
backdrop-filter:blur(14px) saturate(1.05);
-webkit-backdrop-filter:blur(14px) saturate(1.05);
border-color:rgba(247,242,234,.14);
box-shadow:0 18px 40px rgba(0,0,0,.28)}
body.serif-body .slide.hfbg .dcard h3,
body.serif-body .slide.hfbg .objc q{color:var(--d1,#F7F2EA)}
body.serif-body .slide.hfbg .dcard p,
body.serif-body .slide.hfbg .objc span{color:var(--d2,#C9C1B6)}
body.serif-body .slide.hfbg .dcard .dn{color:var(--rust2,var(--gold2))}
body.serif-body .slide.hfbg .dcard .iconbox{
background:rgba(240,168,103,.14);border-color:rgba(240,168,103,.26)}
/* верхняя ржавая полоска карточки на тёмном светится, а не темнеет */
body.serif-body .slide.hfbg .dcard::before{background:var(--rust2,var(--gold2));opacity:.55}
/* ── .hflight — светлый фотофон ───────────────────────────────────────────
На тёмном кадре работает тёмное стекло (.hfbg выше). На ярком дневном
кадре тот же приём даёт грязное пятно посреди солнечной кухни: тёмная
плашка на светлом фото читается как дырка.
Здесь наоборот: слайд остаётся светлым, фотография уходит вправо и
растворяется в фоне градиентом, а текст живёт на чистом кремовом поле
слева. Скрим не нужен — за текстом нет фотографии вообще. */
body.serif-body .slide.hflight{position:relative;overflow:hidden}
body.serif-body .slide.hflight > picture{position:absolute;inset:0 0 0 auto;
width:62%;z-index:0}
/* Кадрируем к ГЕРОЮ, а не к правому краю. Панель занимает правые 62% слайда,
и `center right` показывал правый край фотографии — на обоих снимках это
пустая стена: на слайде «Горизонты» вместо пары людей была штукатурка.
Герой на этих кадрах слева, поэтому по умолчанию тянемся влево;
отдельный слайд может переопределить через --imgpos. */
body.serif-body .slide.hflight > picture img{width:100%;height:100%;
object-fit:cover;object-position:var(--imgpos,left center);display:block}
/* растворение в кремовый: фотография не обрывается краем, а сходит на нет */
/* Кремовое поле закрывает фотографию слева, а градиент обязан стоять РОВНО
на шве, где она из-под него выходит: в первой версии он лежал на сплошном
креме, и фото обрывалось вертикальной линейкой. */
body.serif-body .slide.hflight::before{content:"";position:absolute;
inset:0 42% 0 0;background:var(--bg);z-index:1}
body.serif-body .slide.hflight::after{content:"";position:absolute;
top:0;bottom:0;left:50%;width:14%;z-index:1;
background:linear-gradient(90deg,var(--bg) 0%,rgba(246,241,231,0) 100%)}
body.serif-body .slide.hflight > .on,
body.serif-body .slide.hflight > .kick,
body.serif-body .slide.hflight > h2,
body.serif-body .slide.hflight > .dcards,
body.serif-body .slide.hflight > .cols,
body.serif-body .slide.hflight > .fnote{position:relative;z-index:2;
max-width:52%}
body.serif-body .slide.hflight > .fnote{max-width:46%}
@media screen and (max-width:860px){
body.serif-body .slide.hflight > picture{display:none}
body.serif-body .slide.hflight::before,
body.serif-body .slide.hflight::after{display:none}
body.serif-body .slide.hflight > *{max-width:none}
}
/* ── .hfwash — фотоподложка во весь слайд ─────────────────────────────────
`.hflight` отдаёт фотографии правые 60% и оставляет тексту чуть больше
половины ширины. Для двух карточек это ровно то, что нужно; на трёх
карточках колонки становятся узкими и высокими, и слайд перестаёт
помещаться — замер дал до +94px.
Здесь фотография занимает слайд целиком, но выбелена почти до фона:
она читается как воздух и свет, а не как картинка, и ширину у текста не
отнимает. Карточки остаются светлыми — контраст под ними сохраняется. */
body.serif-body .slide.hfwash{position:relative;overflow:hidden}
body.serif-body .slide.hfwash > picture{position:absolute;inset:0;z-index:0}
body.serif-body .slide.hfwash > picture img{width:100%;height:100%;
object-fit:cover;display:block;opacity:.30;
filter:saturate(.85) contrast(.94)}
/* к левому краю выбеливаем сильнее: там живёт заголовок */
body.serif-body .slide.hfwash::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,var(--bg) 0%,var(--bg) 26%,rgba(246,241,231,.72) 58%,rgba(246,241,231,.46) 100%)}
body.serif-body .slide.hfwash > *:not(picture){position:relative;z-index:2}
body.serif-body .slide.hfwash .dcard,
body.serif-body .slide.hfwash .objc{background:rgba(255,253,249,.90);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media screen and (max-width:860px){
body.serif-body .slide.hfwash > picture{display:none}
body.serif-body .slide.hfwash::before{display:none}
}
/* ============================================================
ПОТОЛОК ПУЛА — .pcap
Слайд 22 нёс три утверждения о лидерском пуле («не больше 20%
одной организации», «излишек не перераспределяется», «зашито
в движке выплат») — и ни одного визуала. Замер 03.08: это был
единственный слайд механики в лидерской колоде совсем без схемы.
Полоса показывает обе мысли разом: доля, срезанная потолком, и
остаток, который НИКОМУ не уходит — соседние доли не растут.
Сверено с кодом `capped_pool_shares(volumes, pool, dec!(0.20))`
в wellex-mlm-core: доля пропорциональна объёму, режется на 20%,
остальные сохраняют естественную долю и не раздуваются.
Вёрсткой, а не SVG: подписи в четырнадцати языках не имеют шанса
вылезти за viewBox (см. tools/svg-label-check.mjs).
============================================================ */
.pcap{display:grid;gap:6px;margin-top:2px}
.pcap .pchead{display:flex;justify-content:space-between;align-items:baseline;
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pcap .pchead b{color:var(--rust-deep);font-weight:700;letter-spacing:.1em}
/* БЕЗ overflow:hidden. Первая версия резала им углы — и заодно срезала
линию потолка и скобу «естественной доли», которые выходят за дорожку
вверх: на снимке их не было вовсе. Скругление даём крайним сегментам,
а обрезку подписей каждый сегмент делает сам. */
.pcap .pctrack{position:relative;display:flex;height:26px;margin-top:9px;border-radius:6px;
background:var(--soft);border:1px solid var(--line)}
.pcap .pcseg:first-child{border-radius:5px 0 0 5px}
.pcap .pcseg:nth-last-child(3){border-radius:0 5px 5px 0}
.pcap .pcseg{position:relative;display:flex;align-items:center;justify-content:center;
width:0;transition:width .7s cubic-bezier(.22,.61,.36,1);
font-family:var(--mono);font-size:10.5px;color:#fff;white-space:nowrap;overflow:hidden}
.slide.seen .pcap .pcseg{width:var(--w)}
.pcap .pcseg+.pcseg{border-left:1px solid rgba(255,255,255,.28)}
.pcap .pcseg.a{background:linear-gradient(90deg,var(--rust-deep),var(--rust))}
.pcap .pcseg.b{background:linear-gradient(90deg,var(--rust),var(--rust2))}
/* Нераспределённый остаток — штриховка: он не принадлежит никому.
Заливка читалась бы как ещё одна чья-то доля, а это ровно та ошибка,
которую слайд и разбирает. */
.pcap .pcseg.off{color:var(--muted);border-left:1px solid var(--line);
background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(120,110,98,.16) 5px 10px)}
.pcap .pcline{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px solid var(--rust-deep);
z-index:3;pointer-events:none}
/* Скоба над первой долей и срезом: вместе они и есть её естественные 32%.
Без неё пунктир потолка читается как случайная граница сегментов. */
.pcap .pcspan{position:absolute;left:0;width:var(--x);top:-9px;height:5px;z-index:2;
border:1px solid var(--rust-deep);border-bottom:0;opacity:.55;pointer-events:none}
.pcap .pcfoot{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted);line-height:1.4}
.pcap .pcfoot i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.pcap .pcfoot i::before{content:"";width:10px;height:10px;border-radius:2px;flex:none}
.pcap .pcfoot i.k1::before{background:linear-gradient(90deg,var(--rust-deep),var(--rust))}
.pcap .pcfoot i.k2::before{background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(120,110,98,.34) 3px 6px);
border:1px solid var(--line)}
/* ============================================================
РАСЧЁТ КАК ФОРМУЛА — .calc.flow
Слайд 21 показывал Rank / Event / Rate / Result четырьмя
одинаковыми карточками, стоящими рядом. Арифметика в них есть,
но её не видно: читатель должен сам догадаться, что второе
умножается на третье и даёт четвёртое. Замер 03.08 дал этому
слайду худший в колоде разрыв верх/низ (39.1 против 12.8).
Знаки операций ставим МЕЖДУ карточками — они универсальны и
не требуют перевода, то есть ни одного нового ключа на 14 языков.
Скобу «ранг задаёт ставку» пробовал и убрал: между рангом и ставкой
стоит карточка события, и скоба читалась бы как группировка трёх.
Ставка и так подписана «the direct referral rate at Director».
============================================================ */
.calc.flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:0 10px;align-items:stretch}
.calc.flow .op{display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-weight:700;font-size:20px;color:var(--rust);
opacity:0;transform:scale(.7);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.slide.seen .calc.flow .op{opacity:1;transform:none}
.calc.flow .op.eq{color:var(--rust-deep)}
/* СТРЕЛКА ЗЕРКАЛИТСЯ В RTL. Карточки в арабском переворачиваются сами
(`body.rtl .slide{direction:rtl}`), а знак «→» — нет: он оставался
указывающим вправо там, где читают справа налево, то есть показывал
ход расчёта в обратную сторону. Знаки «×» и «=» симметричны и правки
не требуют — зеркалим только направленный. Масштаб появления при этом
должен сохраниться, поэтому обе трансформации складываются здесь же. */
body.rtl .calc.flow .op.dir{transform:scaleX(-1) scale(.7)}
.slide.seen body.rtl .calc.flow .op.dir,
body.rtl .slide.seen .calc.flow .op.dir{transform:scaleX(-1)}
/* ============================================================
ОСЬ РЕАЛЬНОГО ВРЕМЕНИ ДЛЯ ПУТИ 90 ДНЕЙ — .jrnax
Слайд 36 обещает заголовком «первое окно шириной в тридцать
дней», а показывал четыре узла, стоящих РАВНОМЕРНО: день 1,
неделя 2, день 30 и день 90 выглядели одинаково удалёнными.
Само окно не было нарисовано нигде. Плюс замер 03.08 дал
этому слайду самый большой в портфеле зазор до сноски — 117px.
Ось ставит отметки пропорционально времени ((d-1)/89) и
закрашивает первые тридцать дней. Карточки ниже остаются
равномерными — их работа читаться, а не хронометрировать.
============================================================ */
.jrnax{position:relative;height:38px;margin-top:6px;margin-bottom:24px}
/* Зазор под осью не декоративный: сноска прижата книзу (`margin-top:auto`),
поэтому весь свободный ход слайда копился ОДНОЙ пустой полосой над ней —
117px на этом слайде, самый большой в портфеле. Часть хода уходит сюда,
в воздух между осью и карточками, и полоса внизу сокращается. */
.jrnax .jline{position:absolute;left:0;right:0;top:22px;height:3px;border-radius:2px;background:var(--soft);
border:1px solid var(--line)}
.jrnax .jwin{position:absolute;left:0;top:17px;height:13px;width:0;border-radius:3px;
background:linear-gradient(90deg,var(--rust-deep),var(--rust2));opacity:.9;
transition:width .8s cubic-bezier(.22,.61,.36,1)}
.slide.seen .jrnax .jwin{width:var(--w)}
.jrnax .jt{position:absolute;top:14px;left:var(--x);transform:translateX(-50%);
width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--rust);z-index:2}
.jrnax .jn{position:absolute;top:0;left:var(--x);transform:translateX(-50%);
font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
.jrnax .jwlab{position:absolute;top:26px;left:0;width:var(--w);text-align:center;
font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--rust-deep);white-space:nowrap}
/* В RTL ось обязана идти справа налево вместе со всем слайдом,
иначе окно фаст-старта окажется в конце пути вместо начала. */
body.rtl .jrnax .jwin,body.rtl .jrnax .jwlab{left:auto;right:0}
body.rtl .jrnax .jt,body.rtl .jrnax .jn{left:auto;right:var(--x);transform:translateX(50%)}
/* ============================================================
.cols.wide.airy — распределение свободного хода на разрежённом слайде
Слайд 39 «Если вы лидер» несёт шесть коротких пунктов в двух
колонках: содержимого по природе мало, и весь свободный ход
слайда копился одной пустой полосой над прижатой книзу сноской
(98px — крупнейший остаток в портфеле после правки s36).
Пустоту не набиваем содержимым — его нельзя выдумывать. Отдаём
её межстрочным интервалам списка: слайд перестаёт быть блоком,
висящим вверху, а пункты читаются свободнее. Модификатор точечный,
общие .tl и ol.num не трогаем — они стоят ещё на девяти слайдах.
============================================================ */
.cols.wide.airy .tl{gap:20px;margin-top:20px}
.cols.wide.airy ol.num{gap:22px;margin-top:14px}
.cols.wide.airy ol.num li{line-height:1.55}
/* Ряд ИЗ ДВУХ кадров может позволить себе кадры крупнее. Потолок 224px
выставлен под ряд из четырёх, чтобы не рвать нижнюю линию; при двух
он оставлял 108px пустоты над прижатой книзу сноской — крупнейший
остаток в портфеле (product s20). Считаем фигуры селектором, а не
классом: разметка задаёт число через inline `--n`, а на значение
custom property CSS выбирать не умеет.
Величина подобрана замером, а не на глаз: 300px роняли русский на +10,
282px — на +12 после того, как сноска перестала быть прижатой и группа
стала центрироваться целиком. 266px проходит все четырнадцать языков. */
.approw:has(figure:nth-child(2)):not(:has(figure:nth-child(3))) .appshot{max-height:266px}
/* ============================================================
ДВА КОНТУРА ДЕНЕГ — .flowchips внутри .wall
Слайд 14 несёт главное структурное утверждение колоды:
«комиссии платятся из выручки компании, никогда из депозита
другого участника». Показывал он это двумя панелями с пунктиром
«never crosses» — утверждение есть, движения денег не видно.
Сверено с контрактами в wellex-mlm-core: разделение держится не
«движком выплат», а ДВУМЯ РАЗНЫМИ контрактами.
• WellixGateway — deposit / withdraw / totalPrincipal: тело
участника входит и возвращается ему;
• WellixStandaloneRewarder — fund(amount) компанией, claim()
партнёром; в шапке файла дословно «does not custody staking
principal».
Полоска чипов показывает каждый контур замкнутым на своей стороне
стены. Стрелки направленные, поэтому зеркалятся в RTL.
============================================================ */
.flowchips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px;
padding-top:10px;border-top:1px solid var(--line)}
.flowchips .fc{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--text);background:var(--soft);border:1px solid var(--line);border-radius:var(--r-pill);
padding:3px 9px;white-space:nowrap}
.flowchips .fc.acc{background:linear-gradient(90deg,var(--rust-deep),var(--rust));color:#fff;border-color:transparent}
.flowchips .fa{font-size:12px;color:var(--rust);line-height:1}
body.rtl .flowchips .fa{transform:scaleX(-1);display:inline-block}
.wall .wc.deposits .flowchips{border-top-color:rgba(94,80,184,.28)}
.wall .wc.deposits .flowchips .fc.acc{background:linear-gradient(90deg,#5E50B8,#7B6CE7)}
/* ============================================================
КАРТОЧКИ НЕ РАСТЯГИВАЮТСЯ ПОД КОНТЕЙНЕР
Замер 03.08 (`tools/card-fill.mjs`): 190 карточек в восьми колодах
из девяти выше самого длинного содержимого своих соседей более чем
на треть — некоторые вдвое. Причина не в карточках, а в контейнерах:
сетка тянется на свободную высоту слайда и растягивает ряды, а текст
внутри остаётся прежним. Глазами это ровно то, что владелец 02.08
назвал «дизайн пустой»: карточка 460px под 270px текста.
Ряды становятся по содержимому. Внутри ряда карточки по-прежнему
равной высоты — это штатное выравнивание грида и выглядит верно
(проверено на слайде 28 лидерской: 215px под 205px, трогать нечего).
============================================================ */
.cols,.obj,.calc,.stable,.sigs,.chain,.dcards{align-content:start}
/* `align-content:stretch` здесь стоял явно и был главным источником:
46 карточек в восьми колодах на слайдах `.split`. */
body.serif-body .slide.split > .sc > .cols{align-content:start}
/* `flex:1 1 auto` заставлял сетку возражений забирать свободную высоту,
после чего её ряды растягивались: 66 карточек в шести колодах. */
body.serif-body .slide > .obj{flex:0 1 auto}
/* ============================================================
ПУТЬ ДЕНЕГ — .mpath
Колода доходности описывала путь УЧАСТНИКА (отправил → подтвердилось →
позиция → начисление → забрал → попросил тело). Путь самих ДЕНЕГ —
что с ними происходит между депозитом и доходом — не показан нигде,
а это первый вопрос серьёзного лидера: «откуда доход берётся».
Источник — канонические страницы протокола Mage Yield (/founding/, /rails/).
Три зоны: деньги участника · казначейство · возврат. Семь узлов на дорожке,
зоны подписаны сверху. Без единой цифры, кроме порядковых номеров шагов:
гейт `claim-check` запрещает колоде доходности называть ставки и суммы,
и порядковый номер он вырезает перед проверкой (см. комментарий там же).
============================================================ */
.mpath{display:grid;gap:0;margin-top:4px}
.mp-zones{display:grid;grid-template-columns:2fr 3fr 2fr;gap:10px;margin-bottom:9px}
.mp-z{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);padding-bottom:6px;border-bottom:2px solid var(--line)}
.mp-z.mid{color:var(--rust-deep);border-bottom-color:var(--rust)}
.mp-track{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;position:relative}
.mp-track::before{content:"";position:absolute;left:4%;right:4%;top:15px;height:2px;
background:linear-gradient(90deg,var(--line) 0 12%,var(--rust) 22% 74%,var(--line) 86% 100%)}
.mp-s{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.mp-s i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
font-family:var(--mono);font-size:11px;font-style:normal;background:var(--surface);
border:2px solid var(--line);color:var(--muted);z-index:2;
opacity:0;transform:scale(.7);transition:opacity .4s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.slide.seen .mp-s i{opacity:1;transform:none}
.mp-s.on i{border-color:var(--rust);color:var(--rust-deep);background:var(--surface)}
.mp-s.acc i{border-color:transparent;color:#fff;background:linear-gradient(150deg,var(--rust-deep),var(--rust))}
.mp-s b{font-family:var(--display);font-size:13px;font-weight:650;color:var(--text);line-height:1.25}
.mp-s span{font-size:11.5px;line-height:1.45;color:var(--muted)}
.slide.seen .mp-s:nth-child(2) i{transition-delay:.06s}
.slide.seen .mp-s:nth-child(3) i{transition-delay:.12s}
.slide.seen .mp-s:nth-child(4) i{transition-delay:.18s}
.slide.seen .mp-s:nth-child(5) i{transition-delay:.24s}
.slide.seen .mp-s:nth-child(6) i{transition-delay:.30s}
.slide.seen .mp-s:nth-child(7) i{transition-delay:.36s}
body.rtl .mp-track::before{background:linear-gradient(270deg,var(--line) 0 12%,var(--rust) 22% 74%,var(--line) 86% 100%)}
/* ============================================================
ПЛАН ВЫПЛАТ — .plan8
Слайд 17 перечислял семь потоков плоским списком, а каноническая
страница /founding/ говорит о ВОСЬМИ: восьмым она считает множитель WVI.
Множитель не поток, он модификатор — колода права по существу, но лидер,
прочитавший обе, видит расхождение в счёте. Схема снимает его: семь
потоков сгруппированы по природе выплаты, а множитель показан полосой
ровно под теми тремя, на которые он действует (прямой, командный,
матчинг). Ранговый бонус вне полосы — он exempt по канону.
============================================================ */
.plan8{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:14px;margin-top:6px;align-items:start}
.p8g{display:grid;gap:7px;align-content:start}
.p8h{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);padding-bottom:6px;border-bottom:2px solid var(--line)}
.p8g.mid .p8h{color:var(--rust-deep);border-bottom-color:var(--rust)}
.p8r{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;
background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px}
.p8r b{font-family:var(--display);font-weight:650;font-size:13.5px;color:var(--text);line-height:1.2}
.p8r i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--rust-deep);white-space:nowrap}
.p8r span{grid-column:1/-1;font-size:11.5px;line-height:1.4;color:var(--muted)}
/* Полоса множителя: он не восьмой поток, он ставится ПОВЕРХ трёх первых. */
.p8mult{grid-column:1/2;margin-top:9px;display:flex;align-items:center;gap:9px;
border:1px solid var(--rust);border-radius:var(--r-md);padding:8px 11px;
background:linear-gradient(90deg,rgba(180,83,31,.07),transparent)}
.p8mult b{font-family:var(--display);font-weight:650;font-size:12.5px;color:var(--rust-deep);white-space:nowrap}
.p8mult span{font-size:11.5px;line-height:1.35;color:var(--muted)}
/* ── СХЕМА ПЛАНА ВЫПЛАТ .planmap ─────────────────────────────
Настоящий чертёж вместо списка карточек: источник, три ветви по
природе выплаты, семь узлов, скоба множителя над теми тремя,
на которые он действует. */
/* Ширина ограничена намеренно: схема сохраняет пропорции, поэтому уже —
значит ниже. На 1280×900 в пяти языках заголовок берёт четвёртую строку,
и полной ширины схемы не хватало на 9px. */
.planmap{width:100%;max-width:1046px;height:auto;display:block;margin-top:2px}
.planmap .pm-src{fill:url(#pmsrc)}
.planmap .pm-st{font-family:var(--display);font-weight:700;font-size:15px;fill:#fff}
.planmap .pm-sd{font-family:var(--mono);font-size:11px;fill:var(--rust-tint)}
.planmap .pm-l{fill:none;stroke:var(--rust);stroke-width:1.6;opacity:.55}
.planmap .pm-g{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
text-transform:uppercase;fill:var(--muted)}
.planmap .pm-n rect{fill:var(--soft);stroke:var(--line);stroke-width:1}
.planmap .pm-nt{font-family:var(--display);font-weight:650;font-size:14px;fill:var(--text)}
.planmap .pm-nr{font-family:var(--mono);font-size:12.5px;fill:var(--rust-deep)}
.planmap .pm-nd{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.planmap .pm-br{fill:none;stroke:var(--rust);stroke-width:1.4;stroke-dasharray:4 3;opacity:.75}
.planmap .pm-mb{fill:var(--rust-deep)}
.planmap .pm-mt{font-family:var(--display);font-weight:650;font-size:12.5px;fill:#fff}
.planmap .pm-n rect,.planmap .pm-src{opacity:0;transition:opacity .5s var(--ease)}
.slide.seen .planmap .pm-n rect,.slide.seen .planmap .pm-src{opacity:1}
/* ── СХЕМА ДВУХ КОНТУРОВ ДЕНЕГ .cashmap ──────────────────────
Слайд 14 показывал два контура полосками чипов. Здесь настоящий
чертёж: два замкнутых кольца по разные стороны стены, каждое со
своими стрелками. Видно, что деньги участника возвращаются к нему,
а комиссия приходит из другого кольца и первого не касается. */
/* Ширина ограничена намеренно: чертёж сохраняет пропорции, уже — значит ниже.
На 1280×900 сноска слайда в шести языках длиннее английской и упиралась
в полосу фолио. Величина подобрана прогоном, а не на глаз. */
.cashmap{width:100%;max-width:840px;height:auto;display:block;margin-top:2px}
.cashmap .cm-w{stroke:var(--rust);stroke-width:2;stroke-dasharray:5 4;opacity:.85}
.cashmap .cm-wl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;fill:var(--rust-deep)}
.cashmap .cm-b{fill:var(--soft);stroke:var(--line);stroke-width:1}
.cashmap .cm-b.acc{fill:url(#cmg);stroke:none}
.cashmap .cm-b.dep{fill:rgba(94,80,184,.10);stroke:rgba(94,80,184,.34)}
.cashmap .cm-t{font-family:var(--display);font-weight:650;font-size:13.5px;fill:var(--text)}
.cashmap .cm-t.on{fill:#fff}
.cashmap .cm-s{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.cashmap .cm-s.on{fill:var(--rust-tint)}
.cashmap .cm-a{fill:none;stroke:var(--rust);stroke-width:1.7}
.cashmap .cm-a.vio{stroke:#5E50B8}
.cashmap .cm-g{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
text-transform:uppercase;fill:var(--muted)}
/* RTL И SVG. Слайд в арабском получает `direction:rtl`, и подпись с якорем
`start` начинала расти ВЛЕВО от своей точки — арабское «ودائع الأعضاء»
вылезало за левый край viewBox на 76 единиц (поймал svg-label-check).
Геометрия чертежа задана координатами и в зеркалении не нуждается:
принудительно возвращаем тексту направление слева направо. Само арабское
письмо при этом отображается верно — за порядок глифов отвечает шрифт. */
body.rtl .cashmap text,body.rtl .planmap text{direction:ltr;unicode-bidi:isolate}
.cashmap .cm-b{opacity:0;transition:opacity .5s var(--ease)}
.slide.seen .cashmap .cm-b{opacity:1}
/* ── СХЕМА КОМПРЕССИИ .compmap ───────────────────────────────
Механика, которую словами объяснить труднее всего: бонус
перепрыгивает неактивные уровни, и уровни считаются ПОСЛЕ
схлопывания. Чертёж показывает обе колонки рядом — как выглядит
структура и как её видит движок выплат, — и дугу перескока. */
/* Ширина = высота: чертёж пропорционален, и это единственный рычаг против
переполнения. Величина подобрана прогоном по четырнадцати языкам. */
.compmap{width:100%;max-width:772px;height:auto;display:block;margin-top:0}
.compmap .co-g{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
text-transform:uppercase;fill:var(--muted)}
.compmap .co-g.on{fill:var(--rust-deep)}
.compmap .co-b{fill:var(--soft);stroke:var(--line);stroke-width:1}
.compmap .co-b.dim{fill:transparent;stroke-dasharray:4 3;opacity:.6}
.compmap .co-b.acc{fill:url(#cog);stroke:none}
.compmap .co-t{font-family:var(--display);font-weight:650;font-size:13px;fill:var(--text)}
.compmap .co-t.mut{fill:var(--muted)}
.compmap .co-t.on{fill:#fff}
.compmap .co-s{font-family:var(--mono);font-size:9.5px;fill:var(--muted)}
.compmap .co-s.on{fill:var(--rust-tint)}
.compmap .co-l{fill:none;stroke:var(--line);stroke-width:1.6}
.compmap .co-j{fill:none;stroke:var(--rust);stroke-width:2}
.compmap .co-n{font-family:var(--mono);font-size:10px;fill:var(--rust-deep)}
.compmap .co-b{opacity:0;transition:opacity .5s var(--ease)}
.slide.seen .compmap .co-b{opacity:1}
.slide.seen .compmap .co-b.dim{opacity:.6}
body.rtl .compmap text{direction:ltr;unicode-bidi:isolate}
/* ── ИЛЛЮСТРАЦИЯ КОМПРЕССИИ .compill ─────────────────────────
Строгая геометрия. Прошлая версия была раскритикована за кривую
ленту: сужающийся безье выглядит вручную нарисованным и неровным.
Здесь соединитель ортогональный, одной толщины, со скруглёнными
углами — читается как чертёж, а не как мазок. Шаг сетки единый
(66 единиц), правая колонка отцентрована относительно левой. */
.compill{width:100%;max-width:624px;height:auto;display:block;margin:0 auto}
.compill .fig-body{fill:var(--rust-deep)}
.compill .fig-body.off{fill:var(--line)}
.compill .fig-halo{fill:url(#chalo)}
.compill .fig-band{fill:none;stroke:var(--rust-paper);stroke-width:3.6;stroke-linecap:round}
.compill .fig-band-d{fill:var(--gold2)}
.compill .fig-mute{fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;opacity:.5}
.compill .ci-t{font-family:var(--display);font-weight:650;font-size:13.5px;fill:var(--text)}
.compill .ci-t.mut{fill:var(--muted)}
.compill .ci-s{font-family:var(--mono);font-size:9.5px;fill:var(--muted)}
.compill .ci-spine{fill:none;stroke:var(--line);stroke-width:2}
.compill .fig-plate{fill:var(--surface)}
/* Линия выплаты — ОДИН прямой штрих от активного к активному. Она проходит
ЗА погасшими фигурами (у каждой белая подложка), поэтому компрессия видна
без обходов и стрелок: линия просто не касается тех, кто молчит. */
.compill .ci-pay{fill:none;stroke:url(#cpay);stroke-width:3.4;stroke-linecap:round}
.compill .ci-dot{fill:var(--rust)}
.compill .ci-tag{font-family:var(--display);font-weight:650;font-size:12px;fill:var(--rust-deep)}
.compill .ci-g{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
text-transform:uppercase;fill:var(--muted)}
.compill .ci-g.on{fill:var(--rust-deep)}
.compill .ci-sep{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}
/* Координаты держит внешняя группа, анимацию — внутренняя: CSS-свойство
`transform` перебивает одноимённый атрибут, и на одном элементе фигуры
схлопывались в начало координат. */
.compill .fig > g{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.88);
transition:opacity .5s var(--ease),transform .5s var(--ease)}
.slide.seen .compill .fig > g{opacity:1;transform:none}
.slide.seen .compill .fig:nth-of-type(2) > g{transition-delay:.06s}
.slide.seen .compill .fig:nth-of-type(3) > g{transition-delay:.12s}
.slide.seen .compill .fig:nth-of-type(4) > g{transition-delay:.18s}
.slide.seen .compill .fig:nth-of-type(5) > g{transition-delay:.24s}
.compill .ci-pay{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .9s var(--ease) .25s}
.slide.seen .compill .ci-pay{stroke-dashoffset:0}
body.rtl .compill text{direction:ltr;unicode-bidi:isolate}
/* ── ЦЕПОЧКА КОМПРЕССИИ НА СВОЕЙ СЪЁМКЕ .cchain ──────────────
Иконка-силуэт человека — это сток, и выглядит стоково. Узлами
становятся реальные кадры из брендовой съёмки: запястье с
браслетом. Активные в цвете, молчащие обесцвечены и притушены —
разница читается мгновенно и не нуждается в подписи.
Линия выплаты идёт ЗА кружками: у каждого своя подложка. */
.cchain{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:start;margin-top:0;max-width:940px}
.cch-col{position:relative;display:grid;gap:3px}
.cch-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin-bottom:2px}
.cch-h.on{color:var(--rust-deep)}
/* линия структуры и линия выплаты — обе позади кружков */
.cch-col::before{content:"";position:absolute;left:21px;top:34px;bottom:34px;width:2px;
background:var(--line);border-radius:2px;z-index:0}
/* Линия выплаты ОБЯЗАНА быть под кружками: иначе она чертит поверх лиц.
z-index:0 у линий, z-index:1 у рядов — снимки всегда сверху. */
.cch-col.pay::after{content:"";position:absolute;z-index:0;left:20px;top:34px;height:var(--payh,0);width:4px;
border-radius:3px;background:linear-gradient(180deg,var(--rust-deep),var(--rust));
transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ease) .25s}
.slide.seen .cch-col.pay::after{transform:none}
.cch-r{position:relative;z-index:1;display:grid;grid-template-columns:40px 1fr;gap:11px;align-items:center}
.cch-ph{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;
background:var(--surface);box-shadow:0 0 0 4px var(--surface),0 6px 16px rgba(24,24,22,.14);
opacity:0;transform:scale(.88);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.slide.seen .cch-ph{opacity:1;transform:none}
.cch-r:nth-child(3) .cch-ph{transition-delay:.06s}
.cch-r:nth-child(4) .cch-ph{transition-delay:.12s}
.cch-r:nth-child(5) .cch-ph{transition-delay:.18s}
.cch-r:nth-child(6) .cch-ph{transition-delay:.24s}
.cch-ph img{width:100%;height:100%;object-fit:cover;display:block}
.cch-r.off .cch-ph img{filter:grayscale(1) contrast(.9);opacity:.42}
.cch-r.off .cch-ph{box-shadow:0 0 0 4px var(--surface),0 2px 6px rgba(24,24,22,.08)}
/* Обводка снята совсем: разницу несут обесцвечивание и приглушённая тень.
Рамка вокруг метки — то, что спецификация прямо запрещает. */
.cch-r.off .cch-ph{filter:saturate(0)}
.cch-t{font-family:var(--display);font-weight:650;font-size:12.5px;color:var(--text);line-height:1.25}
.cch-r.off .cch-t{color:var(--muted)}
.cch-s{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:3px}
.cch-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
align-self:stretch;padding-top:34px}
.cch-mid i{display:block;width:1px;flex:1;background:repeating-linear-gradient(180deg,var(--line) 0 3px,transparent 3px 8px)}
.cch-mid b{font-family:var(--display);font-weight:650;font-size:11.5px;color:var(--rust-deep);
writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.02em;white-space:nowrap}
/* ── .mband: смысловая правка + цвет (03.08) ─────────────────────────────
ДЕФЕКТ: полоса «средняя — ничего не меняет» тянулась ВПРАВО так же, как
«добавляет». Схема показывала прибавку там, где её нет, — это ошибка не
оформления, а смысла: заголовок слайда буквально говорит «средняя ничего
не меняет». Теперь у неё нулевая длина и метка на самой оси.
ЦВЕТ: полосы были выцветшими и одинаковыми, разница между «добавляет» и
«добавляет больше всего» не читалась. Убывающая полоса уходит в холодный
серый — она про потерю, а прибавка идёт по рыжей шкале с нарастанием. */
body.serif-body .mband .mtrack::before{background:var(--rust);opacity:.9;width:2px}
body.serif-body .mband .mrow.base .mbar{left:38%;right:auto;width:0;
background:none;box-shadow:none;border:0}
body.serif-body .mband .mrow.base .mbar b{position:absolute;left:14px;top:50%;
transform:translateY(-50%);white-space:nowrap;color:var(--rust-deep)}
body.serif-body .mband .mrow.below .mbar{
background:linear-gradient(270deg,#8E8579,#C3BBB0);box-shadow:none}
body.serif-body .mband .mrow.below .mbar b{color:#fff}
body.serif-body .mband .mrow.up1 .mbar{background:linear-gradient(90deg,var(--rust),var(--rust-mid))}
body.serif-body .mband .mrow.up2 .mbar{background:linear-gradient(90deg,var(--rust-deep),var(--rust2))}
body.serif-body .mband .mrow.up1 .mbar b,body.serif-body .mband .mrow.up2 .mbar b{color:#fff}
/* ═══ wellex-schema.css ═══════════════════════════════════ */
/* ============================================================
WELLEX SCHEMA LANGUAGE — библиотека типовых схем
------------------------------------------------------------
Один визуальный язык для всех девяти колод. Правила, из которых
он собран (методика информационного дизайна + спецификации
графиков), а не вкус:
1. МОДУЛЬ. Всё кратно 8px. Ни одного значения «на глаз».
2. ПОЛОЖЕНИЕ СИЛЬНЕЕ ЦВЕТА. Разницу состояний кодируем сдвигом
по сетке, а цвет добавляем вторым слоем. Так схема читается
и в чёрно-белой печати, и при дальтонизме.
3. НИ ОДНОЙ ОБВОДКИ. Метки разделяет зазор поверхности и кольцо,
а не рамка. Рамка добавляет чернил, которые не являются данными.
4. СЕТКА ТОЛЬКО СПЛОШНАЯ И ВОЛОСЯНАЯ. Пунктир запрещён.
5. ТЕКСТ НЕ НОСИТ ЦВЕТ ДАННЫХ. Рыжий живёт на метках; подписи —
в чернильных токенах. Иначе светлый акцент нечитаем.
6. АСИММЕТРИЯ. Две равные колонки — это таблица, а не композиция.
Пропорция 7:5 или 8:4, воздух работает признаком важности.
7. МАКЕТ СТРОИТСЯ ВОКРУГ ВЫВОДА, а не вокруг диаграммы: справа
итог, а не вторая копия той же схемы.
Архетипы: .sq-path (последовательность) · .sq-split (две силы) ·
.sq-prop (пропорция) · .sq-matrix (поле фактов) · .sq-ladder
(восходящая лестница) · .sq-out (итог крупной цифрой).
============================================================ */
:root{ --squ:8px }
/* ── общий каркас: асимметричная пара «схема + вывод» ───────── */
.sq{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
column-gap:calc(var(--squ)*7);align-items:center;margin-top:calc(var(--squ)*2)}
.sq.wide{grid-template-columns:minmax(0,1fr)}
.sq.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
/* ── ВЫВОД: крупная цифра, а не вторая таблица ──────────────── */
.sq-out .cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted);margin-bottom:calc(var(--squ)*1.5)}
.sq-out .big{font-family:var(--display);font-size:64px;line-height:.86;font-weight:700;
letter-spacing:-.05em;color:var(--rust)}
.sq-out .big em{font-style:normal;font-size:22px;letter-spacing:-.02em;
color:var(--text);margin-left:calc(var(--squ)*1)}
.sq-out p{margin:calc(var(--squ)*2) 0 0;font-size:13.5px;line-height:1.55;
color:var(--muted);max-width:28ch}
.sq-out .rule{height:1px;background:var(--line);margin:calc(var(--squ)*2.5) 0}
.sq-out .fine{font-family:var(--mono);font-size:10px;line-height:1.7;color:var(--muted)}
/* ── АРХЕТИП 1 · ПУТЬ: шаги на прямой оси ───────────────────── */
.sq-path{position:relative}
.sq-path .ax{position:absolute;left:calc(var(--squ)*2);top:calc(var(--squ)*2);
bottom:calc(var(--squ)*2);width:2px;background:var(--line);border-radius:2px}
.sq-path .on{position:absolute;left:calc(var(--squ)*2 - 1px);top:calc(var(--squ)*2);
height:var(--onh,50%);width:4px;border-radius:3px;
background:linear-gradient(180deg,var(--rust-deep),var(--rust2))}
.sq-step{position:relative;display:grid;grid-template-columns:calc(var(--squ)*5) 1fr;
align-items:baseline;min-height:calc(var(--squ)*7)}
.sq-step i{position:relative;z-index:2;font-style:normal;font-family:var(--mono);
font-size:11px;color:var(--surface);background:var(--rust);
width:calc(var(--squ)*4);height:calc(var(--squ)*4);border-radius:50%;
display:grid;place-items:center;box-shadow:0 0 0 4px var(--surface)}
.sq-step b{font-family:var(--display);font-weight:650;font-size:15px;letter-spacing:-.01em}
.sq-step span{display:block;font-family:var(--mono);font-size:10px;font-weight:400;
color:var(--muted);letter-spacing:.03em;margin-top:3px}
/* выключенный шаг ВЫХОДИТ из оси — разница по положению, не по цвету */
.sq-step.off{padding-left:calc(var(--squ)*4)}
.sq-step.off i{background:var(--soft);color:var(--muted);box-shadow:none}
.sq-step.off b{font-weight:500;color:var(--muted)}
/* ── АРХЕТИП 2 · ДВЕ СИЛЫ: контур слева, контур справа ──────── */
.sq-split{display:grid;grid-template-columns:1fr 1px 1fr;column-gap:calc(var(--squ)*4);
align-items:start}
.sq-split .wall{background:var(--line);align-self:stretch}
.sq-side .h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted);margin-bottom:calc(var(--squ)*2)}
.sq-side .h.acc{color:var(--rust-deep)}
.sq-node{display:grid;grid-template-columns:calc(var(--squ)*1.5) 1fr;
column-gap:calc(var(--squ)*2);align-items:start;padding:calc(var(--squ)*1.5) 0}
.sq-node u{text-decoration:none;width:calc(var(--squ)*1);height:calc(var(--squ)*1);
border-radius:50%;background:var(--rust);margin-top:6px}
.sq-node.mute u{background:var(--line)}
.sq-node b{font-family:var(--display);font-weight:650;font-size:14px;display:block}
.sq-node span{font-size:12.5px;line-height:1.5;color:var(--muted);display:block;margin-top:3px}
/* ── АРХЕТИП 3 · ПРОПОРЦИЯ: одна полоса, сегменты, зазор ───── */
.sq-prop{display:grid;gap:calc(var(--squ)*1.5)}
.sq-prop .bar{display:flex;height:calc(var(--squ)*4);gap:2px}
.sq-prop .seg{border-radius:2px;display:grid;place-items:center;
font-family:var(--mono);font-size:10.5px;color:#fff;min-width:0;overflow:hidden;
width:0;transition:width .8s var(--ease,cubic-bezier(.22,1,.36,1))}
.slide.seen .sq-prop .seg{width:var(--w)}
.sq-prop .seg:first-child{border-radius:6px 2px 2px 6px}
.sq-prop .seg:last-child{border-radius:2px 6px 6px 2px}
.sq-prop .seg.s1{background:var(--rust-deep)}
.sq-prop .seg.s2{background:var(--rust)}
.sq-prop .seg.s3{background:var(--rust2)}
/* «ничей» сегмент — без заливки, только штриховка поверхности */
.sq-prop .seg.none{background:repeating-linear-gradient(135deg,
transparent 0 5px,rgba(120,110,98,.18) 5px 10px);color:var(--muted)}
.sq-prop .key{display:flex;gap:calc(var(--squ)*3);flex-wrap:wrap;
font-family:var(--mono);font-size:10px;color:var(--muted)}
.sq-prop .key i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.sq-prop .key i::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--rust)}
.sq-prop .key i.n::before{background:repeating-linear-gradient(135deg,
transparent 0 3px,rgba(120,110,98,.34) 3px 6px)}
/* ── АРХЕТИП 4 · ПОЛЕ ФАКТОВ: сетка на модуле, без рамок ───── */
.sq-matrix{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);
column-gap:calc(var(--squ)*3);row-gap:calc(var(--squ)*3)}
.sq-cell{border-top:1px solid var(--line);padding-top:calc(var(--squ)*1.5)}
.sq-cell.acc{border-top-color:var(--rust);border-top-width:2px}
.sq-cell i{font-style:normal;display:block;font-family:var(--display);font-weight:700;
font-size:30px;line-height:1;letter-spacing:-.035em;color:var(--rust)}
.sq-cell.mute i{color:var(--line)}
.sq-cell b{display:block;font-family:var(--display);font-weight:650;font-size:13.5px;
margin-top:calc(var(--squ)*1.25);line-height:1.25}
/* Моно здесь была ошибкой: в ячейку приходит абзац, а не короткая метка.
Моноширинный набор длинного текста читается тяжело и выглядит служебным. */
.sq-cell span{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);
margin-top:calc(var(--squ)*0.75)}
.sq-cell span.cap{font-family:var(--mono);font-size:9.5px;line-height:1.4}
/* ── АРХЕТИП 5 · ЛЕСТНИЦА: восходящие плоскости ────────────── */
.sq-ladder{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
column-gap:calc(var(--squ)*1.5);align-items:end;height:calc(var(--squ)*20)}
.sq-rung{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.sq-rung .pl{border-radius:4px 4px 2px 2px;background:var(--rust);
height:0;transition:height .7s var(--ease,cubic-bezier(.22,1,.36,1))}
.slide.seen .sq-rung .pl{height:var(--h)}
.sq-rung.top .pl{background:linear-gradient(180deg,var(--rust-deep),var(--rust))}
.sq-rung b{font-family:var(--display);font-weight:650;font-size:12px;
margin-top:calc(var(--squ)*1.25);line-height:1.2}
.sq-rung span{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:2px}
/* ── тёмные слайды: тот же язык, инвертированные чернила ───── */
.slide.mesh .sq-step b,.slide.bleed .sq-step b,
.slide.mesh .sq-node b,.slide.mesh .sq-cell b,.slide.mesh .sq-rung b{color:#fff}
.slide.mesh .sq-step span,.slide.mesh .sq-node span,
.slide.mesh .sq-cell span,.slide.mesh .sq-rung span{color:#C6BEB4}
.slide.mesh .sq-step i{box-shadow:0 0 0 4px #1D1D1B}
.slide.mesh .sq-path .ax,.slide.mesh .sq-split .wall,
.slide.mesh .sq-cell{border-color:rgba(255,255,255,.16)}
.slide.mesh .sq-path .ax{background:rgba(255,255,255,.16)}
/* ── RTL: геометрия зеркалится, числа остаются числами ─────── */
body.rtl .sq-path .ax,body.rtl .sq-path .on{left:auto;right:calc(var(--squ)*2)}
body.rtl .sq-step{grid-template-columns:1fr calc(var(--squ)*5)}
body.rtl .sq-step i{order:2}
body.rtl .sq-step.off{padding-left:0;padding-right:calc(var(--squ)*4)}
@media screen and (max-width:860px){
.sq,.sq.flip{grid-template-columns:1fr;row-gap:calc(var(--squ)*3)}
.sq-split{grid-template-columns:1fr;row-gap:calc(var(--squ)*3)}
.sq-split .wall{display:none}
.sq-matrix{grid-template-columns:repeat(2,1fr)}
}
/* ── карточка на ровном фоне переодета в язык схем ────────────────
`.dcard` была коробкой: заливка, рамка, скругление, 20px внутрь.
По правилу 3 этого языка рамка — чернила, которые не являются
данными: ячейку отделяет волосяная линия сверху и зазор.
ИМЯ КЛАССА НЕ МЕНЯЕМ НАМЕРЕННО. На `.dcard` завязано два десятка
правил в четырёх таблицах — плотность по колодам, тёмная тема,
ограничение ширины на фото-слайдах, анимация. Переименование в
`.sq-cell` молча выбивает их все: в первой попытке 04.08 третья
колонка на слайде «Горизонты» уехала на фотографию, потому что
правило `max-width:52%` перечисляет `.dcards` по имени. Диалект —
это вид, а не имя класса.
ФОТО-СЛАЙДЫ ИСКЛЮЧЕНЫ. На `.hfbg` и `.hfwash` плашка держит текст
поверх фотографии — там она скрим, а не украшение, и снятие её
ломает читаемость. Исключение здесь функциональное, не вкусовое. */
.slide:not(.hfbg):not(.hfwash) .dcard{
background:none;border:0;border-radius:0;box-shadow:none;
border-top:1px solid var(--line);
padding:calc(var(--squ)*1.5) 0 0}
.slide:not(.hfbg):not(.hfwash) .dcard.acc{
border-top-color:var(--rust);border-top-width:2px}
/* тёмный слайд: та же волосяная линия, инвертированные чернила */
.slide.mesh:not(.hfbg):not(.hfwash) .dcard,
.slide.bleed:not(.hfbg):not(.hfwash) .dcard{
background:none;border-top-color:rgba(255,255,255,.16)}
/* Иконка становится знаком, а не плашкой: коробка 30×30 с градиентом
и рамкой вокруг глифа — тот же лишний контур, что и рамка карточки. */
.slide:not(.hfbg):not(.hfwash) .dcard>.iconbox{
background:none;border:0;border-radius:0;width:auto;height:auto;
display:block;margin:0 0 calc(var(--squ)*1);color:var(--rust)}
.slide:not(.hfbg):not(.hfwash) .dcard>.iconbox .i{width:20px;height:20px}
.slide.mesh:not(.hfbg):not(.hfwash) .dcard>.iconbox{color:var(--rust2)}
/* заголовок больше не флекс-строка с иконкой: иконка ушла над ним */
.slide:not(.hfbg):not(.hfwash) .dcard h3{display:block}
/* На фото-слайде плашку получают ВСЕ карточки, а не только `.dcard`.
На слайде «один этаж» первая ячейка была `sq-cell`, а две другие —
`.dcard`: два диалекта стояли рядом в одной строке, и после снятия
коробок разница стала видна в упор — одна колонка на волосяной
линии, две на плитах. Плита здесь несёт функцию (текст поверх
фотографии), поэтому равняем вверх, а не вниз. */
body.serif-body .slide.hfwash .sq-cell,
body.serif-body .slide.hfbg .sq-cell{
background:rgba(255,253,249,.90);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border-top:0;border-radius:var(--r-md,14px);
padding:var(--sp-4,18px) var(--sp-5,20px)}
/* ── остальные карточные семейства — тем же правилом ──────────────
Переодев только `.dcard`, я создал новое рассогласование: на
leaders#22 верхний ряд встал на волосяные линии, а нижний остался
коробками с тенями — один слайд, два вида одного и того же.
Список семейств взят из общего правила `wellex-deck3.css`, где они
уже перечислены вместе как «карточки». Фото-слайды исключены по
той же причине, что и раньше: там плита — скрим. */
.slide:not(.hfbg):not(.hfwash) .layerc,
.slide:not(.hfbg):not(.hfwash) .objc,
.slide:not(.hfbg):not(.hfwash) .sevc,
.slide:not(.hfbg):not(.hfwash) .cond,
.slide:not(.hfbg):not(.hfwash) .scard,
.slide:not(.hfbg):not(.hfwash) .ecoc{
background:none;border:0;border-radius:0;box-shadow:none;
border-top:1px solid var(--line);
padding:calc(var(--squ)*1.5) 0 0}
/* акцент несёт линия, а не тёмная плита: одна выделенная из трёх
читается сильнее, чем три плиты подряд */
.slide:not(.hfbg):not(.hfwash) .layerc.acc,
.slide:not(.hfbg):not(.hfwash) .objc.acc,
.slide:not(.hfbg):not(.hfwash) .sevc.acc,
.slide:not(.hfbg):not(.hfwash) .cond.acc{
border-top-color:var(--rust);border-top-width:2px}
.slide:not(.hfbg):not(.hfwash) .layerc>.iconbox,
.slide:not(.hfbg):not(.hfwash) .objc>.iconbox,
.slide:not(.hfbg):not(.hfwash) .sevc>.iconbox,
.slide:not(.hfbg):not(.hfwash) .scard>.iconbox{
background:none;border:0;border-radius:0;width:auto;height:auto;
position:static;margin:0 0 calc(var(--squ)*1);color:var(--rust)}
.slide:not(.hfbg):not(.hfwash) .layerc>.iconbox .i,
.slide:not(.hfbg):not(.hfwash) .objc>.iconbox .i,
.slide:not(.hfbg):not(.hfwash) .sevc>.iconbox .i,
.slide:not(.hfbg):not(.hfwash) .scard>.iconbox .i{width:20px;height:20px}
/* заголовок больше не резервирует место под угловую иконку */
.slide:not(.hfbg):not(.hfwash) .sevc b,
.slide:not(.hfbg):not(.hfwash) .objc q{padding-right:0}
.slide.mesh:not(.hfbg):not(.hfwash) .layerc,
.slide.mesh:not(.hfbg):not(.hfwash) .objc,
.slide.mesh:not(.hfbg):not(.hfwash) .sevc{
background:none;border-top-color:rgba(255,255,255,.16)}
/* `.layerc` несла ДВА носителя выделения помимо коробки: вертикальную
полоску `::before` слева и тёмный вариант `.deep` с белым текстом.
Сняв плиту, я оставил и то и другое: полоска повисла и налезла на
буквы, а белый текст `.deep` стал белым по белому — карточка
«излишек сверх потолка не перераспределяется» исчезла со слайда.
Полоску гасим (её роль забрала линия сверху), а чернила `.deep`
возвращаем к обычным токенам, оставив выделение линии. */
.slide:not(.hfbg):not(.hfwash) .layerc::before{display:none}
.slide:not(.hfbg):not(.hfwash) .layerc.deep{
border-top-color:var(--rust);border-top-width:2px}
.slide:not(.hfbg):not(.hfwash) .layerc.deep b{color:var(--text)}
.slide:not(.hfbg):not(.hfwash) .layerc.deep span{color:var(--muted)}
.slide:not(.hfbg):not(.hfwash) .layerc.deep .ln{color:var(--rust-deep)}
.slide.mesh:not(.hfbg):not(.hfwash) .layerc.deep b{color:#fff}
.slide.mesh:not(.hfbg):not(.hfwash) .layerc.deep span{color:#C6BEB4}
/* ══ RTL: раскладки с боковой фотографией ═════════════════════════
Найдено съёмкой арабского 04.08. Посадка этого не видит — она
меряет вертикаль, а здесь ломается горизонталь: фотография
закреплена физически справа (`inset:0 0 0 auto`), а арабский текст
течёт справа налево, и весь текст ложился НА фотографию, оставляя
левую половину слайда пустой. Гейт был зелёный, слайд — нечитаем.
Зеркалим сами панели, а не текст: содержимое встаёт правильно само,
как только кремовое поле окажется с нужной стороны. */
body.rtl .slide.hflight > picture{inset:0 auto 0 0}
/* КАДР НЕ ТРОГАЕМ. Первая версия ставила здесь `right center` — и на
слайде «Горизонты» вместо пары людей показалась штукатурка: ровно
тот дефект, о котором предупреждает комментарий в wellex-deck8.css.
Герой на этих кадрах слева независимо от того, с какой стороны
слайда стоит панель, поэтому кадрирование остаётся общим. */
body.rtl .slide.hflight::before{inset:0 0 0 42%}
body.rtl .slide.hflight::after{left:auto;right:50%;
background:linear-gradient(270deg,var(--bg) 0%,rgba(246,241,231,0) 100%)}
/* Фолио на `split` тоже стоит на физических сторонах: оно прижато к
ЛЕВОЙ половине, потому что там текст. В арабском текстовая половина
правая, и номер страницы уезжал на фотографию — серым по тёмному. */
body.rtl .slide.split .folio{left:calc(47% + 20px);right:var(--slide-pad)}
body.rtl .slide.split.flip .folio{left:var(--slide-pad);right:auto}
@media print{
body.rtl .slide.split .folio{left:calc(47% + 8mm);right:12mm}
}
/* ── ПЛОТНОСТЬ РАЗБОРА ЭКРАНА (`.apphero`) ─────────────────────────────
Два слайда колоды лидеров ставят рядом с фотографией телефона колонку
из трёх разборов и сноски. По-английски она садится; по-польски тот же
смысл длиннее почти в полтора раза и вылезал за слайд на 47 px, по-русски,
по-немецки и по-вьетнамски — на 5–25 px.
Правим не языком, а плотностью: токены шкалы переопределяются НА КОЛОНКЕ,
поэтому вниз идут все дочерние размеры разом, а остальная колода не
трогается. Языкового условия здесь нет намеренно — колонка одинаково
плотная на всех четырнадцати, и английский от этого только выигрывает. */
.slide.apphero .sc{ --fs-2:12px; --fs-3:14px }
/* Заголовок разбора экрана — на ступень ниже общего: рядом с ним стоит
фотография телефона, три разбора и сноска, и во вьетнамском он занимал
четыре строки против трёх английских — ровно те 25 px, на которые
колонка вылезала за слайд. Ступень вниз тут не уступка длине, а признание,
что на слайде со снимком заголовок делит внимание, а не держит его один. */
.slide.apphero h2{ font-size:32px; line-height:1.18 }
.slide.apphero .appnote{ gap:calc(var(--sp-3) * .6) }
.slide.apphero .appnote li span{ line-height:1.4 }
.slide.apphero .appsplit{ margin-top:calc(var(--sp-6) * .7) }
.slide.apphero .appnote li b{ margin-bottom:1px }
.slide.apphero .fnote{ margin-top:8px; padding-top:9px; line-height:1.5 }
/* Нижний запас колонки на слайдах со снимком экрана. Общее правило держит
`--slide-pad + 30px` под фолио; на `.apphero` сноска сама закрывает колонку
линией, и тридцати пикселей сверх поля там не нужно — фолио стоит в поле и
остаётся нетронутым. Двенадцать пикселей запаса и были той разницей, на
которую польский, немецкий и французский разборы вылезали за слайд. */
.slide.apphero > .sc{ padding-top:calc(var(--slide-pad) * .88);
padding-bottom:calc(var(--slide-pad) + 18px) }
/* ── ПЛОТНОСТЬ ЦЕНОВОГО СЛАЙДА (`.prices`) ─────────────────────────────
Три карточки цены с подписями рядом с фотографией. По-английски садятся;
по-польски те же подписи длиннее, и колонка вылезала за слайд на 34 px
(по-немецки 26, по-русски 20). Правится не языком, а полем и междустрочьем
подписи — сумма остаётся ровно того же кегля, потому что она и есть слайд. */
.slide.split .pcard{ padding:calc(var(--sp-6) * .72) }
.slide.split .pcard > span{ line-height:1.45 }
.slide.split .prices{ gap:calc(var(--sp-6) * .8); margin-top:calc(var(--sp-6) * .75) }
/* ── ФОЛИО НА ТЁМНЫХ СЛАЙДАХ СО СНИМКОМ ЭКРАНА ─────────────────────────
`.apphero` красит слайд в `--ink`, но в списке тёмных семейств, которым
меняется цвет фолио (`.mesh`, `.bleed`, `.chap:has(.cbg)`, `.gal`), его
не было: подпись и номер оставались тёплым серым для СВЕТЛОГО фона —
rgb(110,101,88) на #1A1614, то есть почти невидимы. Найдено глазами на
вьетнамском снимке колоды лидеров-основателей 04.08; axe этого не ловил.
Берём ту же пару, что у `.bleed`: подпись светлая, счётчик ржавый. */
.slide.apphero .folio{ border-top-color:rgba(255,255,255,.22); color:rgba(255,255,255,.82) }
.slide.apphero .folio .fc{ color:var(--rust2) }
.slide.apphero .folio .fm,
.slide.apphero .folio .fp{ color:rgba(255,255,255,.72) }
/* ── ПЛОТНОСТЬ: слайды, недобирающие высоту ───────────────────────────
Замер 04.08 (`tools/slide-fill.mjs`, максимум по en/de/ru): девять
содержательных слайдов занимают 52–60% рабочей высоты. Это не нехватка
слов — набор во всём портфеле рассчитан на самый плотный слайд, и там,
где колонка несёт один короткий абзац, под ней остаётся треть холста.
Класс `fill` ставится ТОЧЕЧНО и только тем девяти: слайды, полные
по-немецки и воздушные по-английски, не трогаем — поднятый набор
переполнил бы их на длинном языке. Порог отбора — недобор во ВСЕХ
трёх мерных языках.
Колонка получает вторую волосяную линию снизу: она замыкает столбец,
и оставшийся воздух читается как поле, а не как обрыв слайда. */
.slide.fill .sq-matrix{margin-top:calc(var(--squ)*4.5);
column-gap:calc(var(--squ)*4);row-gap:calc(var(--squ)*4)}
.slide.fill .sq-cell{display:flex;flex-direction:column;
padding-top:calc(var(--squ)*2);padding-bottom:calc(var(--squ)*2.5);
border-bottom:1px solid var(--line)}
.slide.fill .sq-cell i{font-size:38px}
.slide.fill .sq-cell b{font-size:16.5px;margin-top:calc(var(--squ)*2)}
.slide.fill .sq-cell span{font-size:15px;line-height:1.62;
margin-top:calc(var(--squ)*1.5)}
/* Карточка с рамкой растягиваться не должна: пустота ВНУТРИ рамки
читается хуже пустоты рядом с ней. Растёт не высота, а поле и набор. */
.slide.fill .obj{gap:16px;margin-top:calc(var(--g)*1.45)}
.slide.fill .objc{padding:24px 26px}
.slide.fill .objc q{font-size:16px;margin-bottom:9px}
.slide.fill .objc span{font-size:15px;line-height:1.6}
/* Дорожка пути денег: семь станций по одному-двум предложениям. На языках
короче немецкого ряд занимал чуть больше половины высоты. Растут станция
и просвет между строками, сетка из семи колонок не трогается. */
.slide.fill .mpath{margin-top:calc(var(--sp-3, 12px) * 1.2)}
.slide.fill .mp-zones{margin-bottom:16px}
.slide.fill .mp-s{gap:11px}
.slide.fill .mp-s i{width:38px;height:38px;border-radius:12px}
.slide.fill .mp-track::before{top:18px}
.slide.fill .mp-s b{font-size:14.5px;line-height:1.28}
.slide.fill .mp-s span{font-size:13px;line-height:1.55}
/* ── ПОДПИСЬ НА ОБЛОЖКЕ-ФОТОГРАФИИ ───────────────────────────────────
Заголовок на `.bleed` переносится сам — он крупный и упирается в свою
ширину. Абзац под ним ширины не имел и тянулся до правого поля, а
затемнение (`.scrim`) к 66% кадра уже сходит на нет: хвост строки
ложился на светлый текстиль браслета и читался с трудом. Найдено
глазами 04.08 на обложке колоды экосистемы; axe этого не видит —
контраст текста поверх фотографии он не считает.
Ограничиваем абзац зоной, где скрим ещё держит фон. Слайды, где ширина
задана в разметке (`style="max-width:42ch"` на слайде сигналов),
не затрагиваются: инлайн сильнее. */
.slide.bleed .on > p:not([class]){ max-width:46% }
@media screen and (max-width:860px){ .slide.bleed .on > p:not([class]){ max-width:none } }
/* ── СНОСКА ЗАКРЫВАЮЩЕГО СЛАЙДА ПРОТИВ ФОЛИО ─────────────────────────
Замер 04.08 (`tools/legal-clear.mjs`, новый): на слайде 16 колоды
значков юридическая сноска заходила на полосу фолио — до 36px, на
одиннадцати языках из четырнадцати. `fitcheck` этого не видит: элемент
не выходит за слайд, он лишь ложится на соседа.
ПРИЧИНА ОКАЗАЛАСЬ В РАЗМЕТКЕ, а не в стилях, и на это ушло два ложных
захода. Сначала третья колонка (как лечили сноску «Гонки основателей»
02.08) — не помогло. Потом нижний отступ слайда, чтобы «прижать к низу»
означало «прижать к фолио» — помогло, но лечило симптом. Замер
родителя показал главное: у восьми колод `p.legal` лежит ВНУТРИ `.on`,
а у значков — снаружи, прямым потомком слайда. Оттого она шла во всю
ширину кадра от края до края и садилась на подвал.
Исправлено в разметке (`pages/deck-badges.html`): сноска внесена в `.on`,
как в остальных восьми. Оба стилевых захода сняты — держать обходной
путь после того, как найдена причина, значит прятать её от следующего.
Сторож остаётся: `tools/legal-clear.mjs` в наборе гейтов. */
/* ── карточка с боковой кромкой: текст обязан её обходить ─────────
Язык схем раздевает карточки до «волосяная линия СВЕРХУ + зазор» и
ради этого обнуляет БОКОВЫЕ отступы: `padding: calc(--squ*1.5) 0 0`.
Для семейств, у которых разделитель сверху, это верно.
Но у части из них осталась кромка ПРЕЖНЕГО оформления — вертикальная
полоса `::before` на `left:0`, с прочерчиванием при появлении и своим
цветом. Два правила складываются в дефект: полоса на нуле и текст на
нуле. 05.08 измерено на слайде 35 лидерской колоды — зазор между
кромкой и буквами −2px, то есть строка лежит НА полосе; на снимке это
читается как брак печати. Гейт `edge-clear.mjs`, написанный по этому
случаю, тут же нашёл ещё восемь таких мест на `.layerc`.
Чиним отступом, а не удалением кромки: у неё есть смысл (цветовое
различие блоков) и анимация. Одна величина на все семейства: самая
широкая кромка 4px плюс полный модуль сетки. */
.slide:not(.hfbg):not(.hfwash) .table7 .dcard,
.slide:not(.hfbg):not(.hfwash) .layerc,
.slide:not(.hfbg):not(.hfwash) .cond{
padding-left:calc(var(--squ)*1.5 + 4px)}
/* ═══ wellex-room.css ═══════════════════════════════════ */
/* WELLEX ROOM — презентационный рум.
Хаб, из которого открываются все колоды. Профиль лидера общий:
заполнил один раз — стоит в каждой презентации. */
/* Рум подключает базовый wellex.css, где --text ещё фиолетовый, а
rust-токенов нет вовсе, — объявляем канон явно.
03.08: нейтрали переведены в графит вместе со всем портфелем. Правится
ИМЕННО ЗДЕСЬ: объявление висит на `body.room`, и общий графитовый слой
с его `:root` проиграл бы по специфичности — рум остался бы кремовым
рядом с графитными колодами. */
body.room{--rust:#B4531F;--rust2:#E0793C;--rust3:#7E3712;
--text:#1B1B19;--muted:#5C5C58;--line:#D7D6D2;--surface:#FAFAFA;
--bg:#EDECEA;--soft:#E9E8E6;
background:var(--bg);color:var(--text);margin:0;
font-family:"Space Grotesk",-apple-system,system-ui,sans-serif}
body.room .idwrap{--rust:var(--rust);--rust2:var(--rust2);--text:#1B1B19;--muted:#5C5C58;
--line:#D7D6D2;--surface:#FAFAFA;--bg:#EDECEA;--soft:#E9E8E6}
/* ── шапка ─────────────────────────────────────────────────── */
body.room .rbar{position:sticky;top:0;z-index:120;overflow:visible;display:flex;align-items:center;gap:16px;
padding:14px 30px;background:rgba(251,248,242,.88);backdrop-filter:blur(10px);
border-bottom:1px solid var(--line)}
body.room .rlogo{height:22px;width:auto;display:block}
body.room .rtitle{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--muted)}
body.room .rsp{flex:1}
.ridb{display:flex;flex-direction:column;align-items:flex-end;gap:2px;cursor:pointer;
background:transparent;border:1px solid var(--line);border-radius:12px;padding:7px 13px}
.ridb:hover{border-color:var(--rust)}
.rid-k{font-family:var(--mono,monospace);font-size:8.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--rust)}
.ridb b{font-size:12px;font-weight:650;color:var(--text)}
/* ── герой ─────────────────────────────────────────────────── */
.rmain{max-width:1180px;margin:0 auto;padding:52px 30px 80px}
.rhero h1{font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.03em;
margin:0 0 16px;max-width:20ch}
.rhero p{font-size:15.5px;line-height:1.62;color:var(--muted);max-width:62ch;margin:0}
.rprof[hidden]{display:none}
.rprof{margin-top:26px;display:inline-flex;align-items:center;gap:18px;
background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 18px 14px 14px}
.rp-q{width:76px;height:76px;flex:none;background:#fff;border-radius:9px;display:grid;place-items:center;padding:4px}
.rp-q svg{width:100%;height:100%;display:block}
.rp-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.rp-k{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--rust)}
.rp-t b{font-size:18px;font-weight:650;letter-spacing:-.01em}
.rp-t span{font-family:var(--mono,monospace);font-size:11px;color:var(--muted);
max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-e{align-self:center;margin-left:6px;font-size:12px;color:var(--rust);
background:none;border:1px solid rgba(180,83,31,.34);border-radius:999px;padding:6px 14px;cursor:pointer}
.rp-e:hover{background:rgba(180,83,31,.07)}
/* ── фильтр ────────────────────────────────────────────────── */
.rfilter{display:flex;gap:8px;margin:44px 0 20px;flex-wrap:wrap}
.rfilter button{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;background:transparent;border:1px solid var(--line);
border-radius:999px;padding:9px 17px;color:var(--muted);cursor:pointer}
.rfilter button:hover{border-color:var(--rust);color:var(--rust)}
.rfilter button[aria-pressed="true"]{background:var(--rust);border-color:var(--rust);color:#fff}
/* ── карточки ──────────────────────────────────────────────── */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.rcard{display:flex;flex-direction:column;gap:11px;padding:22px 22px 18px;
background:var(--surface);border:1px solid var(--line);border-radius:18px;
text-decoration:none;color:inherit;position:relative;overflow:hidden;
transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s}
.rcard::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:var(--rust);transform:scaleX(0);transform-origin:left;transition:transform .3s}
/* Карточка перестала быть ссылкой (внутри их две — колода и спич),
поэтому наведение ловим по наличию основной ссылки, а не по тегу. */
.rcard:has(.rc-main):hover{transform:translateY(-3px);border-color:rgba(180,83,31,.36);
box-shadow:0 14px 34px rgba(60,34,18,.10)}
.rcard:has(.rc-main):hover::before{transform:scaleX(1)}
/* Основная ссылка растянута на всю карточку: клик в любом месте открывает
колоду. Поднимать над ней НАДО ТОЛЬКО спич — если поднять всё содержимое,
тело карточки перестаёт кликаться, а это и есть основное действие. */
.rc-main{position:absolute;inset:0;z-index:0;border-radius:inherit}
.rc-notes{position:relative;z-index:1;margin-left:auto;font-family:var(--mono,monospace);font-size:11px;
letter-spacing:.04em;color:var(--muted);text-decoration:none;
border-bottom:1px solid rgba(110,101,88,.34);padding-bottom:1px;transition:color .18s,border-color .18s}
.rc-notes:hover{color:var(--rust);border-color:var(--rust)}
.rc-notes + .rc-go{margin-left:14px}
.rc-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rc-top i{font-style:normal;font-family:var(--mono,monospace);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--rust);background:rgba(180,83,31,.09);
border-radius:999px;padding:4px 9px}
.rc-st{margin-left:auto;font-family:var(--mono,monospace);font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted)}
.rcard b{font-size:20px;font-weight:650;letter-spacing:-.018em;line-height:1.2}
.rcard p{font-size:13px;line-height:1.55;color:var(--muted);margin:0;flex:1}
.rc-foot{display:flex;align-items:center;gap:14px;padding-top:12px;border-top:1px solid var(--line)}
.rc-foot em{font-style:normal;font-family:var(--mono,monospace);font-size:11px;color:var(--muted)}
.rc-go{margin-left:auto;font-size:12px;font-weight:650;color:var(--rust)}
.rcard.soon{cursor:default;background:#FAF6EF;border-style:dashed}
.rcard.soon .rc-st{color:#6E6558}
.rcard.soon .rc-top i{color:#7E6A57;background:rgba(110,101,88,.10)}
.rcard.soon b{color:#4A4239}
.rcard.soon p{color:#6E6558}
.rcard.soon .rc-foot em{color:#6E6558}
.rnote{margin-top:30px;font-size:12px;color:var(--muted);line-height:1.55}
@media screen and (max-width:720px){
body.room .rbar{padding:11px 16px;gap:10px}
body.room .rtitle{display:none}
.rmain{padding:32px 16px 60px}
.rprof{flex-wrap:wrap}
.rgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.rcard,.rcard::before{transition:none}
a.rcard:hover{transform:none}
}
/* ── рум не является колодой: снимаем слайдовые правила ─────── */
body.room .deck,body.room .slide{all:unset}
body.room .idwrap{font-family:inherit}
body.room .idcard h3{font-family:inherit}
/* ── языковой селектор: рассчитан на список, а не на две кнопки ── */
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:8px;cursor:pointer;
background:transparent;border:1px solid var(--line);border-radius:12px;padding:8px 12px;
font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--text)}
.lang-btn:hover{border-color:var(--rust);color:var(--rust)}
.lang-btn .chev{font-size:10px;color:var(--muted);transition:transform .2s}
.lang[data-open="1"] .chev{transform:rotate(180deg)}
/* шапка создаёт свой слой и режет выпадашку — выносим её из потока */
/* четырнадцать языков в один столбец не помещаются на ноутбуке —
раскладываем в две колонки, скролл не нужен */
.lang-menu{position:fixed;right:26px;top:58px;z-index:200;display:none;
width:min(420px,calc(100vw - 52px));
background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;
box-shadow:0 20px 50px rgba(60,34,18,.18)}
.lang[data-open="1"] .lang-menu{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-content:start}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;
background:none;border:0;border-radius:9px;padding:9px 11px;cursor:pointer;
font-size:13px;color:var(--text);text-align:left}
.lang-menu button:hover{background:var(--soft)}
.lang-menu button[aria-selected="true"]{background:rgba(180,83,31,.09);color:var(--rust);font-weight:650}
.lang-menu .code{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.1em;
color:var(--muted);margin-left:auto}
.lang-menu button[aria-selected="true"] .code{color:var(--rust)}
.lang-menu .soon{opacity:.5;cursor:not-allowed}
.lang-menu .soon:hover{background:none}
.lang-sep{grid-column:1/-1;margin:7px 4px 3px;padding-top:8px;border-top:1px solid var(--line);
font-family:var(--mono,monospace);font-size:8.5px;letter-spacing:.16em;
text-transform:uppercase;color:#A2988A}
/* ═══ wellex-i18n.css ═══════════════════════════════════ */
/* Шрифт и зеркалирование для нелатинских языков. */
/* подставляется рантаймом только для ar/hi/zh/ja/ko */
:root{--i18n-font:none}
html[lang="ar"] body,html[lang="hi"] body,html[lang="zh"] body,
html[lang="ja"] body,html[lang="ko"] body,
html[lang="ar"] .slide,html[lang="hi"] .slide,html[lang="zh"] .slide,
html[lang="ja"] .slide,html[lang="ko"] .slide{
font-family:var(--i18n-font),"Space Grotesk",system-ui,sans-serif}
/* ── RTL: зеркалим то, что несёт направление, и только это ── */
body.rtl .slide{direction:rtl;text-align:right}
body.rtl .kick,body.rtl .fnote,body.rtl .legal{text-align:right}
body.rtl .folio{flex-direction:row-reverse}
/* «04 / 41» — это число, а не текст: держим его слева направо */
body.rtl .folio .fp{direction:ltr;unicode-bidi:embed}
body.rtl .rbar,body.rtl .deckbar{flex-direction:row-reverse}
body.rtl .sevc>.iconbox,body.rtl .objc>.iconbox{right:auto;left:12px}
body.rtl .sevc b,body.rtl .objc q{padding-right:0;padding-left:40px}
body.rtl .sevc::before,body.rtl .slide.argue .dcard::after{transform-origin:right center}
body.rtl .cyc::before,body.rtl .table7 .dcard::before{left:auto;right:0}
body.rtl .cyc{padding-left:0;padding-right:14px}
body.rtl .steps3 li,body.rtl .vcard>div{text-align:right}
body.rtl .eqlist .eqr.d i::before{content:"←"}
body.rtl .rc-go{margin-left:0;margin-right:auto}
body.rtl .rc-st{margin-left:0;margin-right:auto}
body.rtl .lang-menu{right:auto;left:26px}
body.rtl .pnav{right:auto;left:22px}
/* числа и латинские вставки внутри RTL остаются слева направо */
body.rtl .count,body.rtl .rate,body.rtl .pe,body.rtl .money,
body.rtl .tbl td,body.rtl .tbl th{direction:ltr;unicode-bidi:embed}
body.rtl .tbl td:first-child,body.rtl .tbl th:first-child{text-align:right}
/* схемы SVG зеркалить нельзя — там текст внутри картинки:
для RTL собирается отдельный файл cycle-map.ar.svg */
body.rtl .slide.igs .ig{transform:none}
/* ═══ wellex-present.css ═══════════════════════════════════ */
/* WELLEX PRESENT — визитка лидера, окно настройки и режим показа.
Ничего из этого не влияет на печать: PDF остаётся прежним. */
/* ── визитка финала: контакты · ссылки · QR ─────────────────── */
/* контакты и QR — две равные половины с одинаковыми полями */
.slide.close .on .vcard{grid-template-columns:1fr 1fr}
.slide.close .on .vcard .vc-a{display:flex;flex-direction:column;justify-content:center;
padding:16px 20px}
.slide.close .on .vcard .vc-q{background:#fff;display:flex;align-items:center;gap:16px;
padding:16px 20px;justify-content:flex-start}
.qrbox{width:92px;height:92px;flex:none;display:grid;place-items:center}
.qrbox svg{width:100%;height:100%;display:block}
.qrtx{display:flex;flex-direction:column;gap:6px;min-width:0}
.slide.close .on .qrcap{font-family:var(--display);font-weight:650;font-size:var(--z-cap,12px);
line-height:1.3;color:#1A1614}
.slide.close .on .qrurl{font-family:var(--mono);font-size:var(--z-micro,10px);letter-spacing:0;color:#6E6558;
line-height:1.35;word-break:break-all;text-decoration:none;
border-top:1px solid #EDE5D9;padding-top:6px}
.slide.close .on a.qrurl:hover,.slide.close .on a.qrurl:focus-visible{color:var(--rust,#B4531F);text-decoration:underline}
/* ── кнопка «моя карточка» в шапке ──────────────────────────── */
.idbtn{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
background:transparent;border:1px solid var(--line);color:var(--muted);
border-radius:var(--r-tag);padding:6px 11px;cursor:pointer}
.idbtn:hover{border-color:var(--rust);color:var(--rust)}
/* Атрибут hidden обязан побеждать класс с display: пустая карточка
предпросмотра висела в модалке именно из-за .idprev{display:flex}.
Правило живёт здесь, а не в общем wellex.css, — рум и колоды его
получают через свои бандлы, остальные шестнадцать страниц не трогаем. */
[hidden]{display:none!important}
/* ── окно настройки ────────────────────────────────────────── */
.idwrap{position:fixed;inset:0;z-index:200;display:none;place-items:center;
background:rgba(20,16,14,.62);backdrop-filter:blur(6px);padding:24px}
.idwrap.on{display:grid}
.idcard{width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--bg);
border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 32px 26px;
box-shadow:0 30px 90px rgba(40,22,10,.34);animation:idin .34s cubic-bezier(.2,.8,.3,1)}
@keyframes idin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.idcard h3{font-family:var(--display);font-size:22px;letter-spacing:-.02em;margin-bottom:6px;color:var(--text)}
.idcard .idsub{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:20px}
.idgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.idf{display:flex;flex-direction:column;gap:5px}
.idf.full{grid-column:1/-1}
.idf label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.idf input{font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;width:100%}
.idf input:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px rgba(180,83,31,.12)}
/* Подсказка должна быть заметно бледнее набранного текста: владелец принял
placeholder за сохранённые данные, потому что цвет наследовался от input. */
.idf input::placeholder{color:#A79E92;opacity:1}
.idf .hint{font-size:11px;color:var(--muted)}
/* язык колоды: все четырнадцать в одном списке — две кнопки RU/EN здесь
врали, потому что языков давно больше и выбор не запоминался */
.idlang{margin-top:4px}
.idlang select{width:100%;font-family:inherit;font-size:14px;color:var(--text);
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
padding:10px 34px 10px 12px;cursor:pointer;appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E6780' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:11px}
.idlang select:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px rgba(180,83,31,.12)}
body.rtl .idlang select{padding:10px 12px 10px 34px;background-position:left 12px center}
.idrow{display:flex;gap:10px;align-items:center;margin-top:22px}
.idsave{flex:1;font-family:var(--display);font-weight:650;font-size:14px;
background:var(--rust);color:#fff;border:0;border-radius:var(--r-sm);padding:13px;cursor:pointer}
.idsave:hover{background:var(--gold)}
.idskip{font-size:12px;color:var(--muted);background:none;border:0;cursor:pointer;text-decoration:underline}
.idnote{margin-top:14px;font-size:11px;color:var(--muted);line-height:1.5;
border-top:1px solid var(--line);padding-top:12px}
.idprev{margin-top:16px;display:flex;gap:14px;align-items:center;
background:var(--soft);border-radius:var(--r-sm);padding:12px 14px}
.idprev .pq{width:66px;height:66px;flex:none;background:#fff;border-radius:6px;display:grid;place-items:center;padding:4px}
.idprev .pq svg{width:100%;height:100%}
.idprev b{display:block;font-family:var(--display);font-size:14px;color:var(--text)}
.idprev span{display:block;font-size:11px;color:var(--muted);word-break:break-all}
/* ── режим показа: слайд занимает весь экран, без полей ────── */
html:has(body.present){overflow:hidden;scrollbar-gutter:auto}
body.present{overflow:hidden;background:#0E0B0A;width:100vw}
body.present .rail,body.present #deckprog{display:none}
/* в показе на экране остаётся только презентация: шапка убирается
совсем, иначе она и высоту ест, и внимание отвлекает */
body.present .deckbar{display:none}
body.present .rbar{display:none}
/* zoom масштабирует после раскладки, поэтому браузерное центрирование
промахивается. Отступы считает JS и кладёт в --pres-x/--pres-y
уже в координатах ДО зума. */
body.present main.deck{height:100vh;width:100vw;overflow:hidden;padding:0!important;margin:0;
display:block;position:relative}
body.present .slide{left:var(--pres-x,0px);top:var(--pres-y,0px);
transform:translateX(34px) scale(.99);transform-origin:center center}
body.present .slide.live{transform:none}
body.present .slide.prev{transform:translateX(-34px) scale(.99)}
body.present .slide{position:absolute;margin:0;opacity:0;pointer-events:none;
border-radius:0;box-shadow:none;
transform:translateX(34px) scale(.99);
transition:opacity .38s cubic-bezier(.2,.8,.3,1),transform .38s cubic-bezier(.2,.8,.3,1)}
body.present .slide.live{opacity:1;pointer-events:auto;transform:none;z-index:2}
body.present .slide.prev{transform:translateX(-34px) scale(.99)}
/* декоративная рамка слайда мешает, когда экран и слайд совпали */
body.present .cnr{display:none}
/* фолио дублирует счётчик навигации и лезет под кнопки — гасим в показе */
body.present .folio{opacity:0;transition:opacity .2s}
body.present.ui .folio{opacity:.55}
/* навигация всплывает по движению мыши и уходит сама */
/* навигация уходит в правый нижний угол: по центру она садится
ровно на подпись слайда */
.pnav{position:fixed;right:22px;bottom:20px;z-index:130;display:none;
align-items:center;gap:9px;
opacity:0;transition:opacity .25s;pointer-events:none}
body.present .pnav{display:flex}
body.present.ui .pnav{opacity:1;pointer-events:auto}
.pnav button{font-family:var(--mono);font-size:12px;width:36px;height:36px;border-radius:50%;
background:rgba(20,16,14,.72);color:#fff;border:1px solid rgba(255,255,255,.14);
cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
.pnav button:hover{background:var(--rust);border-color:var(--rust)}
.pnav .pcount{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#EFE5D8;
background:rgba(20,16,14,.72);border:1px solid rgba(255,255,255,.14);
border-radius:999px;padding:8px 14px;backdrop-filter:blur(6px)}
.pdots{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:120;display:none;
background:rgba(255,255,255,.10)}
body.present .pdots{display:block}
.pdots i{display:block;height:100%;background:var(--rust);width:0;transition:width .3s var(--ease)}
@media screen and (max-width:860px){
.idgrid{grid-template-columns:1fr}
.slide.close .on .vcard{grid-template-columns:1fr}
}
@media print{.idwrap,.idbtn,.pnav,.pdots{display:none!important}}
@media (prefers-reduced-motion:reduce){
.idcard{animation:none}
body.present .slide{transition:opacity .18s linear;transform:none}
body.present .slide.prev{transform:none}
}
/* ── послайдовое переключение вместо непрерывной прокрутки ─── */
html:not(.no-snap){scroll-snap-type:y mandatory}
.slide{scroll-snap-align:center;scroll-snap-stop:always}
/* доводка совпадает с клавиатурной навигацией */
/* в показе снап не нужен — там своя навигация */
body.present .slide{scroll-snap-align:none;scroll-snap-stop:normal}
body.present{scroll-snap-type:none}
@media print{html{scroll-snap-type:none}.slide{scroll-snap-align:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ── обычный режим: слайд занимает экран целиком ────────────── */
@media screen and (min-width:861px){
.deck{padding:var(--barh,56px) 0 0}
.slide{margin:0 auto;scroll-margin:0}
/* каждый слайд — ровно один экран, доводка снапа попадает точно */
.slide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0}
main.deck > .slide{margin-bottom:var(--gap-v,0px)}
}
/* ═══ wellex-race.css ═══════════════════════════════════ */
/* Имена классов с префиксом pz-: короткие .pc / .pe / .pm уже заняты
фотокарточкой в wellex-deck2.css и подиумом в deck3, а общий бандл
склеивает всё в один каскад — чужая кремовая подложка приезжала на
плашку с деньгами. Та же ловушка, что когда-то была с .rbar. */
/* WELLEX RACE — слайд Founders Race.
Слайд отвечает по порядку на три вопроса: что считаем, до какого срока,
что получает победитель. Раньше он отвечал на них вперемешку: формула
висела сноской, места шли 2–1–3, а «+0,5 %» не говорил, процент чего. */
.slide.race{display:flex;flex-direction:column}
/* ── шапка: заголовок слева, часы справа ───────────────────── */
.rhead{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:start}
.slide.race h2{max-width:22ch;margin-top:5px;font-size:35px;line-height:1.10}
.rclock{text-align:right;padding:14px 20px 13px;border:1px solid rgba(240,168,103,.30);
border-radius:var(--r-md);background:rgba(240,168,103,.06);min-width:212px}
.rc-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--rust2)}
.rclock b{display:block;font-family:var(--display);font-weight:700;font-size:40px;
line-height:1.02;color:#fff;letter-spacing:-.03em;margin:5px 0 3px}
.rclock b em{font-style:normal;font-size:18px;font-weight:650;color:var(--gold2);letter-spacing:0}
.rc-s{display:block;font-size:11px;color:#C6BCB0}
/* ── счёт гонки ────────────────────────────────────────────────
Это главное, что лидер уносит со слайда, поэтому блок крупный:
два слагаемых, вес отдельной цифрой, и пример живыми числами. */
.rscore{margin-top:15px;padding:12px 18px 11px;border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-md);background:rgba(255,255,255,.035)}
.rs-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
text-transform:uppercase;color:var(--rust2);margin-bottom:10px}
.rs-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.rs-t{display:flex;align-items:center;gap:11px;min-width:0;
padding:10px 14px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);
background:rgba(255,255,255,.04)}
/* вес — крупной цифрой: множитель важнее подписи и должен читаться первым */
.rs-t i{font-style:normal;font-family:var(--display);font-weight:700;font-size:24px;
line-height:1;color:var(--gold2);letter-spacing:-.03em;flex:none}
.rs-t b{font-weight:500;font-size:13px;line-height:1.35;color:#E6DED4;min-width:0}
.rs-p{font-family:var(--display);font-weight:700;font-size:20px;color:var(--rust2)}
.rs-ex{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.10);
display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rs-ex span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:#9A9086;flex:none}
.rs-ex em{font-style:normal;font-family:var(--mono);font-size:12px;color:#CFC5B9;
letter-spacing:.01em}
/* ── призы: первое место первым, у всех одна структура ───────── */
.prizes{margin-top:16px;display:grid;grid-template-columns:1.28fr 1fr 1fr;gap:14px;
align-items:stretch}
/* содержимое распределено по высоте: у второго и третьего места текста
меньше, и без этого низ карточки выглядел бы забытым, а не пустым */
.prz{position:relative;display:flex;flex-direction:column;justify-content:space-between;
padding:16px 20px 15px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012))}
/* место — крупной цифрой в углу, вместо ступеней, которые читались как шкала */
.pz-n{position:absolute;top:11px;right:16px;font-family:var(--display);font-weight:700;
font-size:40px;line-height:1;color:rgba(255,255,255,.16);letter-spacing:-.04em}
.pz-m{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:#B9AEA2;padding-right:34px}
/* число и расшифровка стоят рядом: «процент чего» больше не теряется */
.pz-e{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:10px 0 12px}
.pz-pe{font-family:var(--display);font-weight:700;letter-spacing:-.035em;color:#fff;
font-size:33px;line-height:1}
.pz-pe small{font-size:.5em;font-weight:650;letter-spacing:0;margin-left:1px}
.pz-of{font-size:12px;color:#C2B8AC;line-height:1.3}
.pz-cash{display:inline-block;align-self:flex-start;font-family:var(--display);font-weight:700;
font-size:13px;color:var(--gold2);border:1px solid rgba(240,168,103,.36);
border-radius:999px;padding:4px 12px}
.pz-x{display:block;font-size:11.5px;line-height:1.45;color:#C2B8AC;margin-top:13px}
/* победитель: теплее и шире, но без крика */
.prz.win{border-color:rgba(240,168,103,.5);
background:linear-gradient(180deg,rgba(180,83,31,.34),rgba(180,83,31,.09));
box-shadow:0 18px 44px rgba(120,50,14,.28)}
.prz.win .pz-n{color:rgba(255,214,178,.34);font-size:52px}
.prz.win .pz-m{color:var(--gold2)}
.prz.win .pz-pe{font-size:42px}
.prz.win .pz-cash{background:rgba(240,168,103,.14);border-color:rgba(240,168,103,.55)}
/* одна строка на все три карточки вместо повтора под каждой */
.pz-foot{margin-top:12px;font-size:11.5px;line-height:1.5;color:#B5AB9F;
padding-left:12px;border-left:2px solid rgba(240,168,103,.45);max-width:92ch}
/* ── дисклеймер ──────────────────────────────────────────────
Три колонки, а не две: французский — самый длинный из четырнадцати,
и на двух колонках он упирался в низ слайда. Колонка уже — строк
меньше, а сам текст трогать нельзя, он юридический. */
.slide.race .fnote.wide{max-width:none;margin:auto auto 0;padding-top:11px;
font-size:11px;line-height:1.5}
@media screen and (min-width:1000px){
.slide.race .fnote.wide{columns:3;column-gap:26px}
}
/* ── появление ─────────────────────────────────────────────── */
.slide.race .prz{transition:opacity .5s var(--ease),transform .55s cubic-bezier(.2,.85,.3,1)}
.slide.race:not(.seen) .prz{opacity:0;transform:translateY(18px)}
.slide.race.seen .prz:nth-child(1){transition-delay:.08s}
.slide.race.seen .prz:nth-child(2){transition-delay:.18s}
.slide.race.seen .prz:nth-child(3){transition-delay:.28s}
.slide.race .rclock{transition:opacity .5s var(--ease) .12s,transform .5s var(--ease) .12s}
.slide.race:not(.seen) .rclock{opacity:0;transform:translateY(-8px)}
/* RTL: цифра места уходит в левый угол, полоска подписи — на правый край */
body.rtl .pz-n{right:auto;left:16px}
body.rtl .pz-m{padding-right:0;padding-left:34px}
body.rtl .pz-foot{padding-left:0;padding-right:12px;
border-left:0;border-right:2px solid rgba(240,168,103,.45)}
body.rtl .pz-cash{align-self:flex-end}
@media screen and (max-width:860px){
.rhead{grid-template-columns:1fr}
.rclock{text-align:left;min-width:0}
.rs-row{grid-template-columns:1fr}
.rs-p{display:none}
.prizes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.slide.race .prz,.slide.race .rclock{transition:none;opacity:1;transform:none}
}
@media print{
.slide.race .prz,.slide.race .rclock{opacity:1!important;transform:none!important}
}