/* ===== WEB-SKILLS.md v1.0 tokens · §8 motion v1.1 ===== */
:root{
--ink-950:#0E0D0B;--ink-900:#1A1815;--ink-800:#221F1B;--ink-600:#4C463E;
/* ink-400 measured 4.14:1 on the page ground — below AA. ink-450 replaces it
   everywhere muted text appears; ink-400 is kept for hairlines only. */
--ink-450:#6C645A;--ink-400:#7E7668;
/* EDITORIAL: паперове тепло. Тло і чорнило зсунуті в теплий бік,
   чистий білий і чистий чорний скіл забороняє окремо. */
--bone-100:#FEFCF8;--bone-200:#FAF7F1;--bone-300:#F1EBDD;--bone-400:#E2DACA;--bone-500:#C9C0AC;--bone-600:#A79D88;
--red-900:#2E0906;--red-800:#45120D;--red-700:#651A13;--red-600:#9A2A21;--red-500:#C8392F;
/* red-500 gives only 2.88:1 on ink — this is the same hue lifted until it
   clears AA on dark grounds. Used on inverted surfaces only. */
--red-400:#DD555B;
--green-700:#2F5D4E;--green-100:#E7EFEA;
--indigo-900:#161127;--indigo-700:#2D2655;--indigo-500:#453BA0;
--color-bg:var(--bone-200);--color-bg2:var(--bone-300);--color-text:var(--ink-900);
--color-muted:var(--ink-450);--color-border:var(--bone-500);--color-primary:var(--red-800);
--color-primary-hover:var(--red-900);--color-accent:var(--red-500);--color-secondary:var(--indigo-700);
--color-focus:var(--red-500);
--color-rule:rgba(26,24,21,.12);
/* EDITORIAL: Fraunces зі скіла не має кирилиці — перевірено, віддає лише
   latin, latin-ext і vietnamese. Literata — той самий друкований характер,
   змінна вага, справжній курсив, і кирилиця на місці. */
--font-display:"Literata",Georgia,"Times New Roman",serif;
--font-body:"Inter",-apple-system,"Segoe UI",Helvetica,sans-serif;
--type-display-size:clamp(38px,5.4vw,152px);--type-display-lh:1.02;--type-display-track:-0.025em;
--type-h2-size:clamp(29px,3.9vw,72px);--type-h2-lh:1.08;
--type-h3-size:clamp(22px,2.5vw,46px);
--type-lede-size:clamp(20px,1.55vw,29px);--type-lede-lh:1.55;
--type-body-size:clamp(18px,1.1vw,21px);--type-body-lh:1.75;
--type-label-size:13px;--type-label-lh:16px;--type-label-track:0.14em;
--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--space-6:48px;
--space-8:64px;--space-10:80px;--space-12:96px;--space-16:128px;--space-20:160px;
/* full-bleed: the page is as wide as the display, only the gutter scales */
--gut:clamp(24px,2.8vw,64px);
--measure:min(68ch,54vw);
--radius-none:0;--radius-sm:4px;--radius-md:8px;--radius-full:999px;
/* one shared 200ms ease for every hover and focus state */
/* EDITORIAL — один словник руху замість п'яти тривалостей і трьох кривих.
   Було: 150/300/600/900/1600 ms. Стало: 220 на дотик, 700 на появу,
   1500 на кінематографічні винятки (штрихування героя, промальовування лого).
   Усі криві зведені до однієї — решта лишена як синоніми, щоб не переписувати
   двісті правил і не ризикувати зламати те, що вже вивірено. */
/* POLISH: усі стани дотику — рівно 0.2s ease. Крива появи (--ease-out)
   лишається редакційною, вона про інше. */
--motion-hover:200ms;--ease-hover:ease;
--motion-fast:220ms;--motion-base:380ms;--motion-slow:700ms;--motion-reveal:700ms;
--motion-cinematic:1500ms;--motion-marquee:52000ms;--stagger-tight:70ms;
--ease-out:cubic-bezier(0.22,1,0.36,1);--ease-mask:cubic-bezier(0.22,1,0.36,1);
--ease-inout:cubic-bezier(0.22,1,0.36,1);
--shadow-1:0 2px 8px rgba(15,12,11,.06);--shadow-2:0 8px 32px rgba(15,12,11,.10);
--shadow-3:0 24px 64px rgba(15,12,11,.14);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);

font-size:var(--type-body-size);line-height:var(--type-body-lh);overflow-x:hidden;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.025;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
background-size:260px 260px}

/* ===== LOADER — serotonin builds itself. No type, site palette only. ===== */
.load{position:fixed;inset:0;z-index:10000;background:var(--color-bg);
display:flex;align-items:center;justify-content:center;
transition:opacity var(--motion-slow) var(--ease-out),visibility 0s linear var(--motion-slow)}
.load.is-done{opacity:0;visibility:hidden}
.load svg{width:min(400px,60vw);height:auto;overflow:visible}
.load svg path{fill:none;stroke:var(--bone-600);stroke-width:2;stroke-linecap:round;
stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset 300ms var(--ease-mask)}
.load.is-drawing svg path{stroke-dashoffset:0}

/* ===== CURSOR — an open cradle holding a point. Closes into a ring
   where you may act: held, not hushed. ===== */
/* Курсор мусить бути над кожним оверлеєм. При рівному z-index виграє
   той, хто пізніше в DOM, а світлобокс оголошений нижче — саме так
   намальований курсор і зникав під ним, поки cursor:none ховав системний. */
.cur{position:fixed;top:0;left:0;z-index:10001;pointer-events:none;opacity:0;
transition:opacity var(--motion-base) var(--ease-out)}
.is-cursor .cur{opacity:1}
.is-cursor.cur-out .cur{opacity:0}
.cur__lead,.cur__trail{position:absolute;top:0;left:0;will-change:transform}
.cur__dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:var(--radius-full);
background:var(--color-accent);animation:breathe 3800ms var(--ease-inout) infinite;
transition:background-color var(--motion-base) var(--ease-out)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.7)}}
.cur__cradle{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:var(--radius-full);
border:1px solid var(--ink-400);
/* an open arc: three of four borders drawn, so it reads as a cupped hand */
border-top-color:transparent;border-right-color:transparent;transform:rotate(-45deg);
filter:drop-shadow(0 0 2px rgba(251,250,247,.9));
transition:width var(--motion-base) var(--ease-out),height var(--motion-base) var(--ease-out),
margin var(--motion-base) var(--ease-out),transform var(--motion-slow) var(--ease-mask),
border-color var(--motion-base) var(--ease-out)}
.cur-link .cur__cradle{width:64px;height:64px;margin:-32px 0 0 -32px;transform:rotate(135deg);
border-color:var(--color-primary)}
.cur-link .cur__dot{background:var(--color-primary)}
.cur-soft .cur__cradle{width:50px;height:50px;margin:-25px 0 0 -25px;transform:rotate(45deg);
border-color:var(--color-secondary);border-top-color:var(--color-secondary)}
@media (hover:hover) and (pointer:fine){
.is-cursor,.is-cursor a,.is-cursor button,.is-cursor .topic,.is-cursor summary{cursor:none}
.is-cursor input,.is-cursor textarea,.is-cursor select,.is-cursor [contenteditable]{cursor:auto}}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ===== reveal primitives ===== */
.w{display:inline-block;overflow:hidden;padding-bottom:.15em;margin-bottom:-.15em;vertical-align:bottom}
.w>span{display:inline-block;transform:translateY(112%);transition:transform var(--motion-slow) var(--ease-mask)}
.is-in .w>span{transform:translateY(0)}
[data-split] .w>span{transition-delay:calc(var(--i,0) * var(--stagger-tight))}
.m{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.m>*{display:block;transform:translateY(112%);transition:transform var(--motion-slow) var(--ease-mask)}
.is-in .m>*{transform:translateY(0)}
.f{opacity:0;transform:translateY(22px);
transition:opacity var(--motion-slow) var(--ease-out),transform var(--motion-slow) var(--ease-out)}
.is-in .f{opacity:1;transform:none}
.rule{display:block;height:1px;background:var(--color-border);transform:scaleX(0);transform-origin:left;
transition:transform var(--motion-reveal) var(--ease-mask)}
.is-in .rule{transform:scaleX(1)}

/* ===== scene ===== */
.scene{position:relative}

/* ===== layout — full bleed ===== */
.sec{position:relative;z-index:1;padding:var(--space-20) var(--gut)}
.inner{width:100%;margin:0 auto}
.grid3{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2.4fr) minmax(0,1.9fr);
gap:clamp(32px,4vw,110px);align-items:start}
/* рядок із вертикальною інфографікою вирівнюємо по висоті колонок */
#steps .inner{align-items:stretch}
.grid2{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,5fr);
gap:clamp(32px,4vw,110px);align-items:start}
.rail{position:relative;will-change:transform}
.rail__index{display:block;font-family:var(--font-display);font-size:clamp(64px,7vw,132px);
line-height:1;letter-spacing:-.04em;color:#8D8878}
.rail__label{display:block;margin-top:var(--space-3);font-size:var(--type-label-size);
letter-spacing:var(--type-label-track);text-transform:uppercase;font-weight:600;
color:var(--color-muted);transition-delay:160ms}
.rail .rule{margin-top:var(--space-4);width:100%;transition-delay:280ms}
.body{max-width:var(--measure)}
.h2{margin:0 0 var(--space-6);font-family:var(--font-display);font-size:var(--type-h2-size);
line-height:var(--type-h2-lh);letter-spacing:-.02em;font-weight:400}
.p{margin:0 0 var(--space-4);font-size:clamp(18px,1.22vw,24px);line-height:1.75;color:var(--ink-600)}
.p--lead{color:var(--color-text)}
.body .p:nth-of-type(1){transition-delay:220ms}
.body .p:nth-of-type(2){transition-delay:340ms}
.body .p:nth-of-type(3){transition-delay:460ms}
.cta{margin-top:var(--space-6);transition-delay:580ms}
.eyebrow{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-4);
font-size:var(--type-label-size);line-height:var(--type-label-lh);font-weight:600;
letter-spacing:var(--type-label-track);text-transform:uppercase;color:var(--color-accent)}
.eyebrow .rule{width:56px;background:var(--color-accent);transition-delay:200ms}

/* ===== buttons ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:56px;padding:0 34px;border:0;border-radius:var(--radius-md);font-family:var(--font-body);
font-size:17px;line-height:24px;font-weight:600;text-decoration:none;overflow:hidden;isolation:isolate;
transition:color var(--motion-hover) var(--ease-hover),
transform var(--motion-hover) var(--ease-hover)}
/* наведення піднімає, натискання втискає; :active мусить
   переписати translateY, інакше трансформи не складуться */
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn--text:hover{transform:none}
.btn--text:active{transform:scale(.98)}
.btn__sweep{position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;
transition:transform var(--motion-hover) var(--ease-hover)}
.btn:hover .btn__sweep,.btn:focus-visible .btn__sweep{transform:scaleX(1)}
.btn__arrow{display:inline-block;transition:transform var(--motion-hover) var(--ease-hover)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn--primary{background:var(--color-accent);color:var(--bone-100)}
.btn--primary .btn__sweep{background:var(--color-primary)}
/* другорядна повертається як окремий рівень, але без обведення:
   у спокої — прозора з червоним текстом (5.91:1 на тлі),
   при ховері та сама заливка наїжджає sweep-ом */
.btn--secondary{background:transparent;color:var(--color-accent)}
/* темна заливка, а не червона: інакше на ховері вторинна
   ставала близнюком первинної і рівні знову злипались */
.btn--secondary .btn__sweep{background:var(--color-text)}
.btn--secondary:hover,.btn--secondary:focus-visible{color:var(--bone-100)}
.btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.btn--text{position:relative;min-height:44px;padding:0 0 8px;background:none;color:var(--color-text);
font-size:17px;font-weight:600;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.btn--text::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
background:var(--color-text);transform:scaleX(0);transform-origin:left;
transition:transform var(--motion-hover) var(--ease-hover)}
.btn--text:hover::after,.btn--text:focus-visible::after{transform:scaleX(1)}

/* ===== HERO — wide type, large photo, tight vertical rhythm ===== */
/* position:relative is load-bearing — .marquee and .cue are absolute children
   and without it they resolved against .scene, landing at the very bottom of
   the page instead of the bottom of the hero */
.hero{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;align-items:center;
padding:var(--space-10) var(--gut) var(--space-8)}
/* Full bleed. The left track takes everything the photograph does not, and
   the headline scales with the viewport to fill it — growing the content is
   what fills a wide screen; spreading two fixed columns just reopens the
   void in the middle. */
.hero__inner{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;
gap:clamp(28px,3.2vw,80px);align-items:center}
.hero__text{max-width:none}
.hero__title{margin:0 0 var(--space-3);font-family:var(--font-display);font-size:var(--type-display-size);
line-height:var(--type-display-lh);letter-spacing:var(--type-display-track);font-weight:400}
.hero__lede{margin:0 0 var(--space-5);font-size:var(--type-lede-size);line-height:1.45;
color:var(--ink-600);max-width:58ch;transition-delay:540ms}
.hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);transition-delay:640ms}
.hero .eyebrow{margin-bottom:var(--space-3)}
.hero .btn{min-height:52px;padding:0 26px;font-size:16px}
.hero__visual{position:relative;justify-self:end;width:100%;perspective:1300px}

/* Sized by HEIGHT, not width. At 687×1300 a width-driven column drives the
   photo past the viewport; here the width derives from the aspect ratio. */
/* width-led with a height cap: aspect-ratio + max-height shrinks the width
   automatically, so the column can never push the headline off-screen */
.frame{position:relative;width:min(42vw,720px);max-height:84vh;aspect-ratio:4/5;margin-left:auto}
.frame .sketch{position:relative;z-index:2;width:100%;height:100%;aspect-ratio:auto}
/* a tone of the page behind her, an offset hairline in front — she breaks both */
.frame__block{position:absolute;left:14%;right:-13%;top:11%;bottom:7%;background:var(--bone-400);
transform:scaleY(0);transform-origin:bottom;
transition:transform var(--motion-reveal) var(--ease-mask) 60ms}
.is-in .frame__block{transform:scaleY(1)}
.frame__line{position:absolute;left:-13%;right:16%;top:5%;bottom:15%;
border:1px solid var(--color-accent);clip-path:inset(0 100% 0 0);
transition:clip-path var(--motion-cinematic) var(--ease-mask) 420ms}
.is-in .frame__line{clip-path:inset(0 0 0 0)}
.par{will-change:transform}
.tilt{transform-style:preserve-3d;
transform:rotateY(calc(var(--mx,0) * 5deg)) rotateX(calc(var(--my,0) * -4deg));
transition:transform var(--motion-base) var(--ease-out);will-change:transform}

/* the portrait is hatched into being — 16 diagonal strokes, fast, like sketching */
.sketch{position:relative;aspect-ratio:4/5;overflow:hidden;box-shadow:var(--shadow-2)}
.sketch__s{position:absolute;inset:0;opacity:0;
transform:translate3d(var(--sx,-26px),var(--sy,18px),0);
transition:opacity 420ms var(--ease-out),transform 620ms var(--ease-mask)}
.sketch__s img{display:block;width:100%;height:100%;object-fit:cover}
.is-in .sketch__s{opacity:1;transform:translate3d(0,0,0)}
/* a pencil line travels down the frame while the strokes land */
.sketch::after{content:"";position:absolute;left:-6%;right:-6%;top:0;height:1px;
background:var(--color-accent);opacity:0;transform-origin:left}
.is-in .sketch::after{animation:nib 1500ms var(--ease-inout) 120ms 1}
@keyframes nib{0%{opacity:0;top:0}8%{opacity:.85}92%{opacity:.85}100%{opacity:0;top:100%}}

.marquee{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--space-3) 0;
border-top:1px solid var(--color-border);overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
opacity:0;transition:opacity var(--motion-slow) var(--ease-out) 1400ms}
.is-in .marquee{opacity:1}
.marquee__track{display:flex;width:max-content;animation:slide var(--motion-marquee) linear infinite}
.marquee__group{display:flex;flex-shrink:0}
.marquee__item{display:flex;align-items:center;gap:var(--space-5);padding:0 var(--space-5);
font-size:var(--type-label-size);letter-spacing:var(--type-label-track);text-transform:uppercase;
font-weight:600;color:var(--color-muted);white-space:nowrap}
.marquee__item::after{content:"";width:5px;height:5px;background:var(--color-accent)}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.cue{position:absolute;left:var(--gut);bottom:var(--space-12);z-index:2;display:flex;
align-items:center;gap:var(--space-2);font-size:11px;letter-spacing:var(--type-label-track);
text-transform:uppercase;font-weight:600;color:var(--color-muted);opacity:0;
transition:opacity var(--motion-slow) var(--ease-out) 1600ms}
.is-in .cue{opacity:1}.cue.is-gone{opacity:0;transition-delay:0ms}
.cue__track{position:relative;display:block;width:1px;height:40px;background:var(--bone-500);overflow:hidden}
.cue__track::after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;
background:var(--color-accent);animation:cueDrop 2s var(--ease-inout) infinite}
@keyframes cueDrop{0%{transform:translateY(-14px)}60%{transform:translateY(40px)}100%{transform:translateY(40px)}}

/* ===== mosaic ===== */
.mosaic{position:relative;display:flex;box-shadow:var(--shadow-2);background:var(--color-bg2)}
.mosaic__slice{position:relative;width:25%;overflow:hidden;opacity:0;
transform:translate3d(var(--ox,0),var(--oy,60px),0) rotate(var(--rot,0)) scale(var(--sc,1.1));
transition:opacity var(--motion-reveal) var(--ease-out),transform var(--motion-cinematic) var(--ease-mask)}
.mosaic__slice img{display:block;width:400.4%;height:auto;aspect-ratio:4/5;object-fit:cover;
transform:translateX(calc(var(--n) * -24.975%))}
.is-in .mosaic__slice{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
.mosaic__slice:nth-child(1){--n:0;--oy:96px;--ox:-40px;--rot:-5deg;--sc:1.16;transition-delay:100ms}
.mosaic__slice:nth-child(2){--n:1;--oy:-84px;--ox:22px;--rot:4deg;--sc:1.12;transition-delay:260ms}
.mosaic__slice:nth-child(3){--n:2;--oy:110px;--ox:-18px;--rot:-3deg;--sc:1.14;transition-delay:420ms}
.mosaic__slice:nth-child(4){--n:3;--oy:-70px;--ox:44px;--rot:6deg;--sc:1.1;transition-delay:580ms}
.aside__cap{margin:var(--space-2) 0 0;font-size:var(--type-label-size);
letter-spacing:var(--type-label-track);text-transform:uppercase;color:var(--color-muted);transition-delay:820ms}

/* ===== topics ===== */
.topics__list{margin-top:var(--space-8);border-top:1px solid var(--color-border)}
.topic{position:relative;display:grid;grid-template-columns:clamp(48px,5vw,96px) minmax(0,1fr) auto;
gap:var(--space-4);align-items:center;padding:clamp(24px,2.4vw,52px) 0;
border-bottom:1px solid transparent;text-decoration:none;color:inherit;clip-path:inset(0 100% 0 0);
transition:clip-path var(--motion-reveal) var(--ease-mask),border-color var(--motion-hover) var(--ease-hover),
padding-left var(--motion-hover) var(--ease-hover),
background-color var(--motion-hover) var(--ease-hover),
color var(--motion-hover) var(--ease-hover)}
.is-in .topic{clip-path:inset(0 0 0 0);border-bottom-color:var(--color-border)}
.topic:nth-of-type(1){transition-delay:120ms}.topic:nth-of-type(2){transition-delay:260ms}
.topic:nth-of-type(3){transition-delay:400ms}.topic:nth-of-type(4){transition-delay:540ms}
.topic:nth-of-type(5){transition-delay:680ms}
/* той самий ховер, що на питаннях: заливка на всю ширину рядка,
   від'ємні поля компенсують падінг, інакше підсвітка обірветься по тексту */
/* без заливки: лишається зсув і акцентний колір */
.topic:hover{color:var(--color-accent);padding-left:var(--space-4);transition-delay:0ms}
.topic:hover .topic__num{color:var(--color-accent)}
.topic:hover .topic__sub{color:var(--ink-600)}
.topic::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
background:var(--color-text);transform:scaleX(0);transform-origin:left;
transition:transform var(--motion-hover) var(--ease-hover)}
.topic:hover::before,.topic:focus-visible::before{transform:scaleX(1)}
.topic:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
.topic__num{font-size:var(--type-label-size);letter-spacing:var(--type-label-track);
font-weight:600;color:var(--color-muted)}
.topic__name{font-family:var(--font-display);font-size:var(--type-h3-size);line-height:1.14;letter-spacing:-.015em}
.topic__sub{display:block;margin-top:8px;font-family:var(--font-body);
font-size:clamp(15px,1vw,19px);line-height:1.6;color:var(--ink-600);max-width:62ch}
.topic__go{font-size:clamp(20px,1.7vw,30px);color:var(--color-muted);
transition:transform var(--motion-hover) var(--ease-hover),color var(--motion-hover) var(--ease-hover)}
.topic:hover .topic__go{transform:translateX(10px);color:var(--color-accent)}

/* ===== explanatory diagram: what leaves the room and what does not ===== */
.diag{position:relative;width:100%;max-width:440px;isolation:isolate}
/* Ця діаграма вертикальна: її розмір задає висота, а не ширина.
   Прив'язуємо висоту до колонки тексту поруч, інакше вона визначає
   висоту всього рядка сітки й лишає під собою порожнечу. */
.diag--narrow{max-width:none;width:auto;align-self:stretch;
display:flex;flex-direction:column;justify-content:flex-start}
.diag--narrow svg{width:auto;height:100%;max-height:clamp(340px,46vh,520px);
align-self:flex-start}
@media(max-width:1099px){
.diag--narrow{align-self:auto}
.diag--narrow svg{height:auto;width:min(300px,100%);max-height:none}}
.diag svg{display:block;width:100%;height:auto;overflow:visible}
.diag text{font-family:var(--font-body);font-size:12px;letter-spacing:.12em;
text-transform:uppercase;font-weight:600;fill:var(--color-muted)}
.diag .t-in{fill:var(--color-text);letter-spacing:.06em}
.diag .t-accent{fill:var(--color-accent)}
/* підпис живе всередині SVG — інакше він відривається від графіки
   і висить у порожнечі окремим абзацом */
/* підпис — не сірий шепіт, а помітна нота: плашка, іконка, акцентний текст.
   green-700 на green-100 дає 6.41:1 — спокійніше за червоний */
.diag .cap{font-family:var(--font-body);font-size:13.5px;letter-spacing:0;
text-transform:none;font-weight:500;fill:var(--green-700)}
/* pathLength="1" normalises every stroke: a 40px tick and a 600px circle
   draw over the same span. A fixed dasharray made short paths snap and
   also overrode the outer ring's own dash pattern, killing the dots. */
.diag [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;
transition:stroke-dashoffset var(--motion-cinematic) var(--ease-mask)}
.diag.is-in [data-draw]{stroke-dashoffset:0}
/* the dashed ring keeps its pattern, so it arrives by scale instead */
.diag [data-ring]{transform-box:fill-box;transform-origin:center;
transform:scale(.82);opacity:0;
transition:transform var(--motion-cinematic) var(--ease-mask),
opacity var(--motion-reveal) var(--ease-out)}
.diag.is-in [data-ring]{transform:scale(1);opacity:1}
.diag.is-in [data-draw="1"]{transition-delay:240ms}
.diag.is-in [data-draw="2"]{transition-delay:620ms}
.diag.is-in [data-draw="3"]{transition-delay:1180ms}
.diag [data-fade]{opacity:0;transition:opacity var(--motion-slow) var(--ease-out)}
.diag.is-in [data-fade]{opacity:1}
/* bars grow from their own left edge — fill-box is required or the origin
   resolves against the whole SVG viewBox and they slide instead of grow */
.diag [data-grow]{transform-box:fill-box;transform-origin:left center;
transform:scaleX(0);transition:transform var(--motion-reveal) var(--ease-mask)}
.diag.is-in [data-grow]{transform:scaleX(1)}
.diag [data-pop]{transform-box:fill-box;transform-origin:center;
transform:scale(0);transition:transform var(--motion-base) var(--ease-out)}
.diag.is-in [data-pop]{transform:scale(1)}
.diag.is-in [data-grow="1"],.diag.is-in [data-pop="1"]{transition-delay:260ms}
.diag.is-in [data-grow="2"],.diag.is-in [data-pop="2"]{transition-delay:520ms}
.diag.is-in [data-grow="3"],.diag.is-in [data-pop="3"]{transition-delay:780ms}
.diag.is-in [data-grow="4"],.diag.is-in [data-pop="4"]{transition-delay:1040ms}

.diag.is-in [data-fade="1"]{transition-delay:700ms}
.diag.is-in [data-fade="2"]{transition-delay:900ms}
.diag.is-in [data-fade="3"]{transition-delay:1100ms}
.diag.is-in [data-fade="4"]{transition-delay:1300ms}
/* Плашка переїхала з SVG у HTML: текст у <text> не переноситься, тож
   будь-який довший переклад вилазив за межу прямокутника. Тут він
   переноситься сам і плашка тягнеться за ним у будь-якій мові. */
.diag__cap{display:block;
margin:var(--space-3) 0 0;padding:14px 16px;border-radius:8px;
background:var(--green-100);color:var(--green-700);
font-size:14px;line-height:1.5;font-weight:500;max-width:100%;
opacity:0;transform:translateY(16px);
transition:opacity var(--motion-slow) var(--ease-out) 1400ms,transform var(--motion-slow) var(--ease-out) 1400ms}
.diag.is-in .diag__cap{opacity:1;transform:none}

/* ===== credentials: table + document slots ===== */
/* capped and left-aligned: right-aligning the last column across a full-bleed
   row threw the dates to the far edge, miles from the text they belong to */
.cred{width:100%;max-width:74ch;border-collapse:collapse;margin-top:var(--space-4);table-layout:fixed}
.cred th,.cred td{text-align:left;padding:clamp(16px,1.4vw,28px) var(--space-4) clamp(16px,1.4vw,28px) 0;
border-bottom:1px solid var(--color-border);vertical-align:top}
.cred th{font-size:var(--type-label-size);letter-spacing:var(--type-label-track);
text-transform:uppercase;color:var(--color-muted);font-weight:600;padding-top:0;padding-bottom:var(--space-3)}
.cred tbody tr{opacity:0;transform:translateY(20px);
transition:opacity var(--motion-reveal) var(--ease-out),transform var(--motion-reveal) var(--ease-out)}
.is-in .cred tbody tr{opacity:1;transform:none}
.is-in .cred tbody tr:nth-child(1){transition-delay:180ms}
.is-in .cred tbody tr:nth-child(2){transition-delay:270ms}
.is-in .cred tbody tr:nth-child(3){transition-delay:360ms}
.is-in .cred tbody tr:nth-child(4){transition-delay:450ms}
.is-in .cred tbody tr:nth-child(5){transition-delay:540ms}
.is-in .cred tbody tr:nth-child(6){transition-delay:630ms}
/* same width as the table above, and exactly five per row so ten documents
   fill two complete rows instead of leaving a ragged tail */
/* скан живе в рядку таблиці, а не в окремій сітці — одне джерело правди */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cred td:first-child,.cred th:first-child{width:96px;padding-right:var(--space-4)}
.cred td:nth-child(2),.cred th:nth-child(2){width:36%}
.cred td:nth-child(3),.cred th:nth-child(3){width:30%}
.cred td:last-child,.cred th:last-child{width:auto;padding-right:0}
.cred td:nth-child(2){font-family:var(--font-display);font-size:clamp(19px,1.4vw,27px);line-height:1.25}
.cred td:nth-child(3){color:var(--ink-600);font-family:var(--font-body);font-size:inherit}
.cred__scan a{display:block;aspect-ratio:4/3;background:var(--bone-100);
border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;
transition:transform var(--motion-hover) var(--ease-hover),
border-color var(--motion-hover) var(--ease-hover)}
.cred__scan a:hover{transform:translateY(-2px);border-color:var(--color-text)}
/* Клікабельний тепер увесь рядок. Фокус показуємо на ньому ж, інакше рамка
   обводила б саму мініатюру і не пояснювала, що спрацює насправді. */
.cred__scan a:focus-visible{outline:0}
.cred tbody tr{cursor:pointer;
transition:background-color var(--motion-hover) var(--ease-hover)}
.cred tbody tr:hover{background:var(--bone-300)}
.cred tbody tr:hover .cred__scan a{transform:translateY(-2px);border-color:var(--color-text)}
.cred tbody tr:hover td:nth-child(2){color:var(--color-accent)}
.cred tbody tr:focus-within{outline:3px solid var(--color-focus);outline-offset:-2px}
html[data-mode="tru"] .cred tbody tr:hover{background:var(--kich-ground-2)}
html[data-mode="tru"] .cred tbody tr:hover td:nth-child(2){color:var(--kich-gold)!important}
.cred__scan picture{display:block;width:100%;height:100%}
.cred__scan img{display:block;width:100%;height:100%;object-fit:contain;padding:5px}
@media(max-width:767px){
.cred td:first-child,.cred th:first-child{width:64px}
.cred td:nth-child(3),.cred th:nth-child(3){display:none}}
.faq{margin-top:var(--space-4);border-top:1px solid var(--color-border)}
.faq details{border-bottom:1px solid var(--color-border)}
.faq summary{list-style:none;cursor:pointer;position:relative;
padding:clamp(20px,1.8vw,38px) 0;
font-family:var(--font-display);
font-size:clamp(20px,1.7vw,32px);line-height:1.3;display:flex;justify-content:space-between;
gap:var(--space-4);align-items:baseline;
transition:color var(--motion-hover) var(--ease-hover),
padding-left var(--motion-hover) var(--ease-hover)}
.faq summary::-webkit-details-marker{display:none}
/* заливка йде на всю ширину рядка, тому від'ємні поля компенсують падінг —
   інакше підсвітка обривалася б по краю тексту */
.faq summary:hover{color:var(--color-accent);padding-left:var(--space-3)}
.faq summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:-3px;border-radius:2px}
.faq details[open] summary{color:var(--color-text)}
/* .faq details[open] summary важить більше за .faq summary:hover,
   тому відкритому пункту потрібне власне правило наведення */
.faq details[open] summary:hover{color:var(--color-accent)}
.faq summary::after{content:"+";font-family:var(--font-body);font-size:22px;
color:var(--color-muted);line-height:1;
transition:transform var(--motion-base) var(--ease-out),
color var(--motion-hover) var(--ease-hover)}
.faq summary:hover::after{color:var(--color-accent);transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--color-accent)}
.faq details[open] summary:hover::after{transform:rotate(45deg)}
.faq p{margin:0 0 var(--space-4);color:var(--ink-600);max-width:70ch}

/* ===== reviews carousel — wide cards, native scroll-snap ===== */


/* ===== карусель статей ===== */
/* .list зник тим самим зрізом, що й .steps — обидва лежали між
   .docs і .posts. Повертаю. */
.list{margin:0;padding:0;list-style:none}
.list li{position:relative;padding-left:var(--space-4);margin-bottom:var(--space-3);
font-size:clamp(17px,1.1vw,21px);line-height:1.66;color:var(--ink-600)}
.list li::before{content:"";position:absolute;left:0;top:.75em;width:14px;height:1px;background:var(--color-accent)}
.list li strong{color:var(--color-text);font-weight:600}
/* Стилі цієї таблиці я випадково вирізав разом із сіткою .docs —
   вона лежала між .docs і .posts. Повертаю з правками під новий вигляд. */
.steps{width:100%;border-collapse:collapse;margin-top:var(--space-4);table-layout:fixed}
.steps td,.steps th{text-align:left;vertical-align:top;
padding:var(--space-3) var(--space-3) var(--space-3) 0;
border-bottom:1px solid var(--color-border)}
.steps th{font-size:var(--type-label-size);letter-spacing:var(--type-label-track);
text-transform:uppercase;color:var(--color-muted);font-weight:600;
padding-bottom:var(--space-2);border-bottom-color:var(--color-text)}
.steps td:first-child,.steps th:first-child{width:clamp(52px,5vw,86px)}
.steps td:first-child{font-family:var(--font-display);
font-size:clamp(20px,1.7vw,30px);line-height:1.1;color:var(--bone-600)}
.steps td:nth-child(2){line-height:1.6;color:var(--ink-600)}
.steps td:last-child,.steps th:last-child{width:clamp(72px,7vw,110px);
padding-right:0;text-align:right}
.steps td:last-child{white-space:nowrap;color:var(--color-muted);
font-size:15px;font-variant-numeric:tabular-nums}
.steps tr:last-child td{border-bottom:0}
@media(max-width:640px){
.steps,.steps tbody,.steps tr,.steps td{display:block;width:auto}
.steps thead,.steps tr:first-child{display:none}
.steps tr{position:relative;padding:var(--space-3) 0 var(--space-3) clamp(52px,14vw,72px);
border-bottom:1px solid var(--color-border)}
.steps td{border:0;padding:0}
.steps td:first-child{position:absolute;left:0;top:var(--space-3);width:auto}
.steps td:last-child{margin-top:6px;text-align:left}}

.posts{display:flex;gap:var(--space-3);overflow-x:auto;
scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
-webkit-overflow-scrolling:touch;padding:2px 2px var(--space-3);margin:0 -2px;
/* без min-width:0 flex-контейнер у grid-колонці розпирає трек
   замість того, щоб прокручуватись усередині нього */
min-width:0}
.posts::-webkit-scrollbar{display:none}
.posts:focus-visible{outline:3px solid var(--color-focus);outline-offset:6px}
.post{flex:0 0 clamp(240px,22vw,300px);scroll-snap-align:start;
display:flex;flex-direction:column;padding:var(--space-3);
background:var(--bone-100);border:1px solid var(--color-border);
border-radius:var(--radius-md);text-decoration:none;color:inherit;
opacity:0;transform:translateY(26px);
transition:opacity var(--motion-slow) var(--ease-out),
transform var(--motion-hover) var(--ease-hover),
border-color var(--motion-hover) var(--ease-hover)}
.is-in .post{opacity:1;transform:none}
.is-in .post:hover{transform:translateY(-2px);border-color:var(--color-text)}
.post:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
/* каскад обмежуємо шістьма — далі картки все одно поза екраном,
   а довгі затримки читались би як підвисання */
.post:nth-child(1){transition-delay:200ms}.post:nth-child(2){transition-delay:280ms}
.post:nth-child(3){transition-delay:360ms}.post:nth-child(4){transition-delay:440ms}
.post:nth-child(5){transition-delay:520ms}.post:nth-child(n+6){transition-delay:600ms}
.post__cat{display:block;font-size:var(--type-label-size);
letter-spacing:var(--type-label-track);text-transform:uppercase;
color:var(--color-accent);font-weight:600}
.post__t{display:block;margin:var(--space-2) 0 var(--space-3);
font-family:var(--font-display);font-size:clamp(17px,1.35vw,22px);line-height:1.28}
.post__m{display:block;margin-top:auto;padding-top:var(--space-2);
border-top:1px solid var(--color-border);font-size:13px;color:var(--color-muted)}
@media(max-width:767px){.post{flex-basis:74vw}}

/* ===== фінальний банер ===== */
.cta-band{position:relative;z-index:1;background:var(--ink-900);color:var(--bone-200);
padding:clamp(56px,7vw,132px) var(--gut);overflow:hidden}
/* Банер стоїть у тій самій сітці, що й секції: перша колонка порожня
   (там у секцій живе рейка з номером), текст починається з тієї самої
   вертикалі. Інакше він тулився до самого поля сторінки. */
.cta-band__in{position:relative;align-items:start}
.cta-band__col{min-width:0;max-width:var(--measure)}
.cta-band__eyebrow{display:block;font-size:var(--type-label-size);
letter-spacing:var(--type-label-track);text-transform:uppercase;color:var(--bone-500)}
.cta-band__t{margin:var(--space-4) 0 var(--space-5);font-family:var(--font-display);
font-size:clamp(32px,4.6vw,86px);line-height:1.06;letter-spacing:-.02em;
font-weight:400;color:var(--bone-100);max-width:18ch}
.cta-band__p{margin:0;max-width:54ch;font-size:clamp(16px,1.05vw,19px);
line-height:1.75;color:var(--bone-400)}
/* --space-7 у шкалі немає (1·2·3·4·5·6·8·10·12·16·20). Невалідна змінна
   робила margin-top нульовим — саме тому відступ над кнопкою зникав. */
.cta-band__act{display:flex;align-items:center;flex-wrap:wrap;margin-top:var(--space-10)}
/* умови — не список збоку від кнопки, а смуга специфікацій під нею:
   лінія на всю ширину, пункти розділені хайрлайнами. Читається як
   технічний рядок під офертою, а не як буліти */
.cta-band__terms{list-style:none;margin:var(--space-6) 0 0;padding:var(--space-4) 0 0;
display:flex;flex-wrap:wrap;width:100%;
border-top:1px solid rgba(251,250,247,.16);
font-size:12px;letter-spacing:var(--type-label-track);text-transform:uppercase;
font-weight:600;color:var(--bone-500)}
.cta-band__terms li{padding:0 clamp(18px,2.2vw,36px);
border-left:1px solid rgba(251,250,247,.16)}
.cta-band__terms li:first-child{padding-left:0;border-left:0}
@media(max-width:767px){
.cta-band__act{align-items:flex-start}
.cta-band__terms{display:grid;gap:10px;margin-top:var(--space-5);padding-top:var(--space-3)}
.cta-band__terms li{padding:0;border-left:0}
.cta-band .btn{width:100%}}



/* ===== монограма ===== */
.top__mark{display:inline-flex;align-items:center;text-decoration:none}
/* Hurricane — рукописний, тож потрібен більший кегль і компенсація нахилу:
   у скриптових шрифтів права межа глифа виходить далеко за метрику */
.mark{font-family:"Hurricane","Segoe Script",cursive;
font-size:52px;line-height:.8;padding-right:.12em;
color:var(--color-text);
transition:color var(--motion-hover) var(--ease-hover)}
.top__mark:hover .mark{color:var(--color-accent)}
.top__mark:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px;border-radius:4px}
@media(max-width:520px){.mark{font-size:44px}}


/* ==================================================================
   EDITORIAL — журнальний шар поверх WEB-SKILLS.md
   Патерни зі скіла: буквиця, винесена цитата, маргінальні метадані,
   великі номери розділів, хайрлайни між секціями, курсив як акцент.
   ================================================================== */

/* курсив як наголос — головний прийом скіла */
.h2 em,.hero__title em,.big-quote em,.foot__lead em,.w>em{
font-style:italic;font-weight:500;color:var(--color-accent)}

/* хайрлайн між секціями замість порожнечі */
.sec + .sec::before{content:"";display:block;height:1px;background:var(--color-rule);
margin:0 0 var(--space-12)}

/* буквиця — тільки на першому абзаці розділу */
.dropcap::first-letter{float:left;font-family:var(--font-display);
font-weight:600;font-size:4.6em;line-height:.82;
margin:.06em .09em 0 0;color:var(--color-accent);
-webkit-font-smoothing:antialiased}

/* винесена цитата */
.pullquote{margin:var(--space-8) 0;padding:var(--space-5) 0;
border-top:2px solid var(--color-text);border-bottom:2px solid var(--color-text);
font-family:var(--font-display);font-style:italic;font-weight:500;
font-size:clamp(21px,2.1vw,32px);line-height:1.32;max-width:26ch}

/* номер розділу — журнальна, а не інтерфейсна деталь */
.rail__index{font-family:var(--font-display);font-weight:600;
color:var(--color-accent);letter-spacing:-.04em}
.rail__label{font-style:italic;font-family:var(--font-display);
text-transform:none;letter-spacing:0;font-size:15px;color:var(--color-muted)}

/* маргінальні метадані в таблиці дипломів */
.cred td:last-child{font-family:var(--font-display);font-style:italic;
font-size:15px;color:var(--color-muted)}
.cred th{font-family:var(--font-body)}

/* статті: список із хайрлайнами замість карткового гриду —
   скіл прямо забороняє card-grid для контенту */
.posts{display:block;overflow:visible;padding:0;margin:0;
border-top:1px solid var(--color-rule)}
.post{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr);
gap:var(--space-4);align-items:baseline;flex:none;
padding:var(--space-4) 0;border:0;border-bottom:1px solid var(--color-rule);
background:none;border-radius:0}
.is-in .post:hover{transform:none;border-color:var(--color-rule)}
.is-in .post:hover .post__t{color:var(--color-accent)}
.post__cat{font-family:var(--font-display);font-style:italic;
text-transform:none;letter-spacing:0;font-size:15px;
color:var(--color-muted);font-weight:400}
.post__t{margin:0;font-size:clamp(20px,1.7vw,28px);line-height:1.24;
transition:color var(--motion-hover) var(--ease-hover)}
.post__m{grid-column:2;margin-top:6px;padding-top:0;border:0;
font-family:var(--font-display);font-style:italic;font-size:14px}
@media(max-width:640px){
.post{grid-template-columns:1fr;gap:6px}
.post__m{grid-column:1}}

/* фінальний банер — велика цитата на теплому тлі, а не темна плита */
.cta-band{background:var(--bone-300);color:var(--color-text);
border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule)}
.cta-band__eyebrow{color:var(--color-muted)}
.cta-band__t{color:var(--color-text);font-style:italic;font-weight:500;
letter-spacing:-.02em;max-width:20ch}
.cta-band__p{color:var(--ink-600)}
.cta-band__terms{color:var(--color-muted);
border-top-color:var(--color-rule)}
.cta-band__terms li{border-left-color:var(--color-rule)}

/* ритм: скіл просить 96–140px між секціями */
.sec{padding-top:clamp(72px,8vw,132px);padding-bottom:clamp(72px,8vw,132px)}


/* ==================================================================
   POLISH — production-прохід
   ================================================================== */
/* Пропуск навігації: єдина обов'язкова допомога клавіатурним користувачам,
   якої тут бракувало. Видима лише у фокусі. */
.skip{position:fixed;top:8px;left:8px;z-index:10002;
transform:translateY(-160%);
display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
background:var(--color-text);color:var(--bone-100);
border-radius:var(--radius-md);text-decoration:none;
font-size:14px;font-weight:600;
transition:transform var(--motion-hover) var(--ease-hover)}
.skip:focus{transform:translateY(0);outline:3px solid var(--color-focus);outline-offset:3px}

/* тач-таргети: усе, що натискається, має мати 44×44 незалежно від кегля */
.lang__btn{min-height:44px;min-width:44px}
.top__link{display:inline-flex;align-items:center;min-height:44px}
.top__cta{min-height:44px}
.sheet__x{min-width:44px;min-height:44px}
.cred__scan a{min-height:44px}
.faq summary{min-height:44px;align-items:center}
.fld__i{min-height:56px}
.pager__b{min-height:44px;min-width:44px}
@media (hover:none),(pointer:coarse){
/* на дотику дрібні службові посилання теж мають набрати площу */
.btn--text{min-height:48px}
.post{padding-top:var(--space-3);padding-bottom:var(--space-3)}}

/* видимий фокус в акцентному кольорі на всьому, що фокусується.
   Кільце малюємо через box-shadow там, де outline ріже композицію —
   контраст той самий, а форма підлаштовується під радіус елемента. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;
border-radius:2px}
.fld__i:focus-visible{outline:0;
box-shadow:0 3px 0 0 var(--color-accent)}
.cred tbody tr:focus-within{outline:3px solid var(--color-focus);outline-offset:-2px}

/* нічого не виходить за viewport на 375px */
@media(max-width:420px){
.frame{width:min(340px,86vw)}
.post{grid-template-columns:1fr}
.cta-band__act{flex-direction:column;align-items:stretch}
.cta-band__act .btn{width:100%}
.lbox__act{flex-direction:column;width:100%}
.lbox__act .btn{width:100%}
.sheet__in{padding-left:var(--space-3);padding-right:var(--space-3)}}

/* ==================================================================
   РЕЖИМ «БАГІНЯ» — стримано: темне тло і золотий текст, без орнаменту,
   нахилів, подвійних рамок і блиску. Золото на світлому тлі дає 2.2:1,
   тобто читати неможливо — тому під нього потрібна темна основа.
   Усе під html[data-mode="tru"], оригінальні селектори не переписані.
   ================================================================== */
html[data-mode="tru"]{
--kich-ground:#31090F;--kich-ground-2:#250609;
--kich-gold:#D9BC5A;--kich-gold-dim:#A98F3E}

html[data-mode="tru"] body{background:var(--kich-ground);color:var(--kich-gold)}
html[data-mode="tru"] .cur{display:none!important}
html[data-mode="tru"] *{cursor:auto}

/* весь текст — золото; окремі рівні різняться лише насиченістю */
html[data-mode="tru"] .p,html[data-mode="tru"] .list li,
html[data-mode="tru"] .topic__sub,html[data-mode="tru"] .post__t,
html[data-mode="tru"] .cred td,html[data-mode="tru"] .steps td,
html[data-mode="tru"] .faq summary,html[data-mode="tru"] .faq p,
html[data-mode="tru"] .cta-band__p,html[data-mode="tru"] .cta-band__terms,
html[data-mode="tru"] .foot,html[data-mode="tru"] .foot a,
html[data-mode="tru"] .sheet__p,html[data-mode="tru"] .sheet__ok p,
html[data-mode="tru"] .fld__i,html[data-mode="tru"] .diag__cap{color:var(--kich-gold)!important}
html[data-mode="tru"] .hero__title,html[data-mode="tru"] .h2,
html[data-mode="tru"] .final__t,html[data-mode="tru"] .cta-band__t,
html[data-mode="tru"] .topic__name,html[data-mode="tru"] .list li strong,
html[data-mode="tru"] .foot__lead,html[data-mode="tru"] .sheet__t,
html[data-mode="tru"] .sheet__ok h3{color:var(--kich-gold)!important;
background:none;-webkit-text-fill-color:currentColor}
html[data-mode="tru"] .rail__index,html[data-mode="tru"] .rail__label,
html[data-mode="tru"] .post__cat,html[data-mode="tru"] .post__m,
html[data-mode="tru"] .topic__num,html[data-mode="tru"] .topic__go,
html[data-mode="tru"] .cred th,html[data-mode="tru"] .steps th,
html[data-mode="tru"] .foot h3,html[data-mode="tru"] .cta-band__eyebrow,
html[data-mode="tru"] .fld__l,html[data-mode="tru"] .sheet__eyebrow,
html[data-mode="tru"] .marquee__item,html[data-mode="tru"] .fld__h,
html[data-mode="tru"] .sheet__fine{color:var(--kich-gold-dim)!important}

/* лінії й межі — приглушене золото, без подвійних рамок */
html[data-mode="tru"] .rule,html[data-mode="tru"] .topic,
html[data-mode="tru"] .cred td,html[data-mode="tru"] .steps td,
html[data-mode="tru"] .faq,html[data-mode="tru"] .faq details,
html[data-mode="tru"] .foot__cols,html[data-mode="tru"] .post__m,
html[data-mode="tru"] .fld__i{border-color:rgba(217,188,90,.28)!important}
html[data-mode="tru"] .cred th,html[data-mode="tru"] .steps th{border-bottom-color:var(--kich-gold-dim)!important}

/* шапка, панелі, картки — те саме темне тло */
html[data-mode="tru"] .top{background:var(--kich-ground-2);
border-bottom:1px solid rgba(217,188,90,.28);backdrop-filter:none}
html[data-mode="tru"] .top__mark .mark,html[data-mode="tru"] .top__link.is-here,
html[data-mode="tru"] .top__link:hover{color:var(--kich-gold)}
html[data-mode="tru"] .top__link{color:var(--kich-gold-dim)}
html[data-mode="tru"] .top__link::after{background:var(--kich-gold)}
html[data-mode="tru"] .lang{background:var(--kich-ground-2);border-color:rgba(217,188,90,.28)}
html[data-mode="tru"] .lang__btn{color:var(--kich-gold-dim)}
html[data-mode="tru"] .lang__btn[aria-pressed="true"]{background:var(--kich-gold);color:var(--kich-ground-2)}
html[data-mode="tru"] .post,html[data-mode="tru"] .cred__scan a,
html[data-mode="tru"] .cta-band,html[data-mode="tru"] .foot,
html[data-mode="tru"] .sheet__in,html[data-mode="tru"] .diag__cap{
background:var(--kich-ground-2)!important;border-color:rgba(217,188,90,.28)!important}
html[data-mode="tru"] .p--lead{background:none;border:0;padding:0}

/* кнопки: золото як заливка, темне як текст */
html[data-mode="tru"] .btn--primary,html[data-mode="tru"] .btn--secondary,
html[data-mode="tru"] .pager__b,html[data-mode="tru"] .sheet__x{
background:var(--kich-gold)!important;color:var(--kich-ground-2)!important;border:0!important}
html[data-mode="tru"] .btn__sweep{background:var(--kich-gold-dim)!important}
html[data-mode="tru"] .btn--text{background:none!important;color:var(--kich-gold)!important}
html[data-mode="tru"] .btn--text::after{background:var(--kich-gold)}

/* графіка */
html[data-mode="tru"] .diag text{fill:var(--kich-gold)!important}
html[data-mode="tru"] .diag .t-accent{fill:var(--kich-gold)!important}
html[data-mode="tru"] .diag [stroke="var(--color-text)"],
html[data-mode="tru"] .diag [stroke="var(--color-border)"]{stroke:var(--kich-gold-dim)!important}
/* Червоний акцент на бордо дає 1.7:1, темні смуги — 1.3:1, тобто зникають
   зовсім. Тому в цьому режимі вся графіка перекладається в золото. */
html[data-mode="tru"] .diag [fill="var(--bone-100)"],
html[data-mode="tru"] .diag [fill="var(--bone-300)"],
html[data-mode="tru"] .diag [fill="var(--color-bg)"]{fill:var(--kich-ground-2)!important}
html[data-mode="tru"] .diag [fill="var(--color-text)"],
html[data-mode="tru"] .diag [fill="var(--color-accent)"]{fill:var(--kich-gold)!important}
html[data-mode="tru"] .diag [fill="var(--bone-500)"]{fill:var(--kich-gold-dim)!important}
html[data-mode="tru"] .diag [stroke="var(--color-accent)"]{stroke:var(--kich-gold)!important}
html[data-mode="tru"] html[data-mode="tru"] .faq summary::after{color:var(--kich-gold)}


/* ===== світлобокс сканів ===== */
.lbox[hidden]{display:none}
.lbox{position:fixed;inset:0;z-index:9999;display:grid;
grid-template-columns:1fr;place-items:center;
padding:clamp(56px,7vh,88px) clamp(56px,7vw,110px);
background:rgba(22,17,15,.92);opacity:0;
transition:opacity var(--motion-base) var(--ease-out)}
.lbox.is-open{opacity:1}
.lbox__in{margin:0;display:grid;gap:var(--space-4);
grid-template-columns:minmax(0,1fr);justify-items:center;max-width:100%;
opacity:0;transform:scale(.97);
transition:opacity var(--motion-slow) var(--ease-out) 60ms,transform var(--motion-slow) var(--ease-out) 60ms}
.lbox.is-open .lbox__in{opacity:1;transform:none}
.lbox__img{display:block;max-width:100%;max-height:66vh;object-fit:contain;
background:var(--bone-100);border-radius:4px}
.lbox__cap{display:grid;gap:6px;justify-items:center;text-align:center;max-width:64ch}
.lbox__count{font-size:var(--type-label-size);letter-spacing:var(--type-label-track);
text-transform:uppercase;color:var(--bone-500);font-variant-numeric:tabular-nums}
.lbox__t{font-family:var(--font-display);font-size:clamp(19px,1.7vw,28px);
line-height:1.25;color:var(--bone-100)}
.lbox__m{font-size:14px;color:var(--bone-400)}
.lbox__act{display:flex;align-items:center;gap:var(--space-3);
flex-wrap:wrap;justify-content:center;margin-top:var(--space-3)}
.lbox__act .btn{min-height:48px;padding:0 26px;font-size:15px}
.lbox .btn--secondary{color:var(--bone-100)}
.lbox__note{font-size:14px;color:var(--bone-500);min-height:1em}
.lbox__x,.lbox__nav{position:fixed;border:0;cursor:pointer;
width:56px;height:56px;border-radius:var(--radius-full);
background:var(--bone-100);color:var(--color-text);
display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;
transition:background-color var(--motion-hover) var(--ease-hover),
color var(--motion-hover) var(--ease-hover),transform var(--motion-hover) var(--ease-hover)}
.lbox__x{top:clamp(14px,2.4vh,26px);right:clamp(14px,2.4vw,26px)}
.lbox__x:hover{transform:rotate(90deg)}
.lbox__nav{top:50%;transform:translateY(-50%)}
.lbox__nav--prev{left:clamp(10px,1.8vw,22px)}
.lbox__nav--next{right:clamp(10px,1.8vw,22px)}
.lbox__nav:hover{background:var(--color-accent);color:var(--bone-100)}
.lbox__nav:disabled{opacity:.28;cursor:default}
.lbox__nav:disabled:hover{background:var(--bone-100);color:var(--color-text)}
.lbox__x:focus-visible,.lbox__nav:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
@media(max-width:767px){
.lbox{padding:76px var(--space-3) var(--space-4)}
.lbox__img{max-height:48vh}
.lbox__nav{top:auto;bottom:14px;transform:none;width:48px;height:48px}
.lbox__nav--prev{left:14px}.lbox__nav--next{right:14px}
.lbox__act .btn{width:auto}}
@media (prefers-reduced-motion:reduce){
.lbox,.lbox__in{transition:none}.lbox__in{transform:none}
.lbox__x:hover{transform:none}}
html[data-mode="tru"] .lbox__t{color:var(--kich-gold)}
html[data-mode="tru"] .lbox__x,html[data-mode="tru"] .lbox__nav{background:var(--kich-gold);color:var(--kich-ground-2)}

/* ===== перемикач мов ===== */
/* Перемикач винесений із шапки й прибитий до вікна: він не мова сторінки,
   а керування нею, тож не має їхати разом із меню при зміні довжини слів. */
.lang{position:fixed;right:var(--gut);bottom:var(--space-4);z-index:9997;
display:inline-flex;align-items:center;gap:2px;padding:3px;
border:1px solid var(--color-border);border-radius:var(--radius-full);
background:color-mix(in srgb,var(--color-bg) 92%,transparent);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
opacity:0;transition:opacity var(--motion-slow) var(--ease-out) 600ms}
.is-lit .lang{opacity:1}
.lang__btn{appearance:none;border:0;cursor:pointer;background:transparent;
min-height:34px;padding:0 13px;border-radius:var(--radius-full);
font-family:var(--font-body);font-size:11px;font-weight:600;
letter-spacing:var(--type-label-track);text-transform:uppercase;
color:var(--color-muted);white-space:nowrap;
transition:background-color var(--motion-hover) var(--ease-hover),
color var(--motion-hover) var(--ease-hover)}
.lang__btn:hover{color:var(--color-text)}
.lang__btn:active{transform:scale(.97)}
.lang__btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.lang__btn[aria-pressed="true"]{background:var(--color-text);color:var(--bone-100)}
.lang__btn--tru[aria-pressed="true"]{background:var(--color-accent);color:#FFF}
@media(max-width:560px){.top__cta{display:none}
.lang{right:auto;left:50%;transform:translateX(-50%)}
.lang__btn{padding:0 10px}}

/* ===== стікі-шапка ===== */
.top{position:fixed;top:0;left:0;right:0;z-index:9996;
display:flex;align-items:center;gap:var(--space-5);
padding:var(--space-3) var(--gut);
background:color-mix(in srgb,var(--color-bg) 88%,transparent);
backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid transparent;opacity:0;
transition:opacity var(--motion-slow) var(--ease-out) 400ms,
border-color var(--motion-base) var(--ease-out)}
.is-lit .top{opacity:1}
.top.is-stuck{border-bottom-color:var(--color-border)}
.top__mark{flex:0 0 auto;text-decoration:none;color:var(--color-text)}
.top__mark:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
.top__nav{display:flex;align-items:center;gap:var(--space-4);min-width:0;margin-right:auto;
overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0}
.top__nav::-webkit-scrollbar{display:none}
.top__link{position:relative;flex:0 0 auto;text-decoration:none;padding:6px 0;
font-size:12px;font-weight:600;letter-spacing:var(--type-label-track);
text-transform:uppercase;color:var(--color-muted);white-space:nowrap;
transition:color var(--motion-hover) var(--ease-hover)}
.top__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--color-accent);transform:scaleX(0);transform-origin:left center;
transition:transform var(--motion-base) var(--ease-out)}
.top__link:hover{color:var(--color-text)}
.top__link:hover::after,.top__link.is-here::after{transform:scaleX(1)}
.top__link.is-here{color:var(--color-text)}
.top__link:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px;border-radius:2px}
.top__cta{flex:0 0 auto;min-height:42px;padding:0 22px;font-size:14px}
.hero,.sec{scroll-margin-top:76px}
@media(max-width:900px){
.top{flex-wrap:wrap;padding-bottom:8px}
.top__nav{order:3;flex-basis:100%;gap:var(--space-3);margin-top:6px;
padding-top:6px;border-top:1px solid var(--color-border)}
.hero,.sec{scroll-margin-top:112px}}
@media(max-width:520px){.top__cta{padding:0 16px}.top__mark{font-size:15px}}


/* ===== повноекранна форма запису ===== */
/* display:flex перебиває атрибут hidden — без цього правила модалка
   лишається розтягнутою на весь екран при opacity:0 і з'їдає всі
   наведення та кліки на сторінці */
.sheet[hidden]{display:none}
.sheet[hidden]{display:none}
/* Панель висувається зліва й займає три чверті екрана. Права чверть лишається
   видимою — на її межі й живе хрестик, тобто він падає приблизно в центр вікна. */
.sheet{position:fixed;inset:0;z-index:9998;display:block;
background:rgba(22,17,15,.34);opacity:0;
transition:opacity var(--motion-base) var(--ease-out)}
.sheet.is-open{opacity:1}
.sheet__in{position:absolute;top:0;left:0;bottom:0;width:75vw;max-width:none;
overflow-y:auto;overscroll-behavior:contain;
padding:clamp(48px,7vh,104px) clamp(32px,5vw,96px) var(--space-10);
background:#EAE6DA;
transform:translateX(-100%);
transition:transform var(--motion-slow) var(--ease-mask)}
.sheet.is-open .sheet__in{transform:none}
.sheet__x{position:fixed;top:50%;left:75vw;transform:translate(-50%,-50%);
width:64px;height:64px;border:0;border-radius:var(--radius-full);
background:var(--bone-100);color:var(--color-text);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
transition:background-color var(--motion-hover) var(--ease-hover),
color var(--motion-hover) var(--ease-hover),transform var(--motion-hover) var(--ease-hover)}
.sheet__x:hover{background:var(--color-text);color:var(--bone-100);
transform:translate(-50%,-50%) rotate(90deg)}
.sheet__x:active{transform:translate(-50%,-50%) rotate(90deg) scale(.95)}
.sheet__x:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.sheet__eyebrow{display:block;font-size:var(--type-label-size);
letter-spacing:var(--type-label-track);text-transform:uppercase;color:var(--color-accent)}
.sheet__t{margin:var(--space-3) 0 var(--space-3);max-width:22ch;font-family:var(--font-display);
font-size:clamp(28px,3.4vw,52px);line-height:1.1;letter-spacing:-.02em;font-weight:400;max-width:20ch}
.sheet__p{margin:0 0 var(--space-8);max-width:50ch;color:var(--ink-600);line-height:1.75}
.fld{margin-bottom:var(--space-5)}
.fld__l{display:block;margin-bottom:10px;font-size:var(--type-label-size);
letter-spacing:var(--type-label-track);text-transform:uppercase;color:var(--color-muted);font-weight:600}
.fld__i{width:100%;min-height:56px;padding:0 18px;border:0;border-bottom:1px solid var(--color-border);
background:transparent;font-family:var(--font-body);font-size:19px;color:var(--color-text);
border-radius:0;transition:border-color var(--motion-hover) var(--ease-hover)}
.fld__i::placeholder{color:var(--bone-600)}
.fld__i:hover{border-bottom-color:var(--color-accent)}
/* Прямокутна рамка фокуса тут зайва: поле і так у полі зору, а рамка
   ріже композицію. Видимість стану дає підкреслення 3px акцентом —
   5.9:1 на тлі панелі, чого достатньо за вимогами до фокуса. */
.fld__i:focus,.fld__i:focus-visible{outline:0;
border-bottom-color:var(--color-accent);border-bottom-width:3px}
.fld__i:focus~.fld__l,.fld__i:focus-visible~.fld__l{color:var(--color-accent)}
.fld:focus-within .fld__l{color:var(--color-accent)}
.fld__i[aria-invalid="true"]{border-bottom-color:var(--color-primary);border-bottom-width:3px}
.fld__h{display:block;margin-top:10px;font-size:14px;color:var(--color-muted)}
.fld__e{display:block;margin-top:10px;font-size:14px;color:var(--color-primary);font-weight:600}
.sheet__go{margin-top:var(--space-3)}
.sheet__fine{margin:var(--space-4) 0 0;font-size:14px;color:var(--color-muted)}
.sheet__ok h3{margin:0 0 var(--space-3);font-family:var(--font-display);
font-size:clamp(26px,3vw,44px);font-weight:400}
.sheet__ok p{margin:0 0 var(--space-6);max-width:44ch;color:var(--ink-600);line-height:1.75}
/* блокування прокрутки треба і на html: у частині браузерів скролить
   саме кореневий елемент, і overflow лише на body нічого не дає */
/* Приховування смуги прокрутки робить сторінку ширшою на її товщину, і в
   момент відкриття весь макет смикається. Компенсуємо рівно на цю величину. */
html.is-locked,html.is-locked body{overflow:hidden;overscroll-behavior:none}
html.is-locked{padding-right:var(--sbw,0px)}
@media(max-width:640px){.sheet{padding:var(--space-5) var(--space-4)}
.sheet__in{width:100vw}
.sheet__x{top:14px;left:auto;right:14px;transform:none;width:52px;height:52px}
.sheet__x:hover,.sheet__x:active{transform:rotate(90deg)}
.sheet .btn{width:100%}}
@media (prefers-reduced-motion:reduce){
.sheet{transition:none}
.sheet__in{transition:none}
.sheet.is-open .sheet__in{transform:none}}

/* ===== final, footer ===== */
.final__t{margin:0 0 var(--space-4);font-family:var(--font-display);font-size:var(--type-h2-size);
line-height:var(--type-h2-lh);letter-spacing:-.02em;font-weight:400;max-width:22ch}
/* Темний футер під темним банером давав контраст 1.10:1 — око такої
   сходинки не бачить. Світлий футер дає 15.57:1: банер лишається
   закривальною заявою, футер стає тихою службовою зоною. */
.foot{position:relative;z-index:1;background:var(--bone-300);color:var(--ink-600);
padding:var(--space-16) var(--gut) var(--space-8)}
.foot__lead{margin:0 0 var(--space-10);font-family:var(--font-display);font-size:var(--type-h3-size);
line-height:1.2;color:var(--color-text);max-width:26ch}
.foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);
padding-bottom:var(--space-8);border-bottom:1px solid var(--bone-500)}
.foot h3{margin:0 0 var(--space-3);font-size:var(--type-label-size);letter-spacing:var(--type-label-track);
text-transform:uppercase;font-weight:600;color:var(--color-muted)}
.foot ul{margin:0;padding:0;list-style:none}
.foot li{margin-bottom:2px}
.foot a{display:inline-flex;align-items:center;min-height:44px}
.foot a{color:var(--color-text);text-decoration:none;font-size:16px}
.foot a:hover{color:var(--color-accent);text-decoration:underline;text-underline-offset:4px}
.foot a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.foot__bot{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
padding-top:var(--space-5);font-size:15px;color:var(--bone-600)}

/* ===== indicator ===== */

/* ===== snap =====
   The footer must be a snap target too. Without it the browser oscillates
   between the last section's snap point and the end of the document —
   that is the shake. The final section also opts out, so the tail of the
   page scrolls freely into the footer. */
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
html{scroll-snap-type:y proximity}
.hero,.sec{scroll-snap-align:start;scroll-snap-stop:normal}
#final{scroll-snap-align:none}
.foot{scroll-snap-align:start;scroll-snap-stop:normal}}

/* ===== breakpoints ===== */
@media (max-width:1099px){
:root{--measure:none}
.hero__inner,.grid3,.grid2{grid-template-columns:1fr;gap:var(--space-6)}
.hero__text{max-width:none}
.hero__visual{justify-self:start}
.frame{width:min(440px,78vw);max-height:none;margin-left:0}
.cue{display:none}
.cred{max-width:none}

.foot__cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
.hero{padding:var(--space-10) var(--gut) var(--space-12);align-items:flex-start}
.frame{width:100%}
.hero__actions{flex-direction:column;align-items:stretch}
.btn{width:100%;padding:0 var(--space-3)}.btn--text{width:auto}
.sec{padding-top:var(--space-12);padding-bottom:var(--space-12)}
.topic{grid-template-columns:1fr auto;gap:var(--space-2)}
.topic__num{display:none}
.foot__cols{grid-template-columns:1fr}
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
.w>span,.m>*{transform:none}
.f,.marquee,.cue,.post,.sketch__s,.doc,.cred tbody tr{opacity:1;transform:none}
.frame__block{transform:scaleY(1)}.frame__line{clip-path:none}
.mosaic__slice{opacity:1;transform:none}
.diag [data-grow]{transform:scaleX(1)}.diag [data-pop]{transform:scale(1)}
.topic{clip-path:none;border-bottom-color:var(--color-border)}
.rule{transform:scaleX(1)}.cue__track::after,.sketch::after{display:none}
.cur,.load{display:none!important}
.tilt{transform:none!important}
.is-cursor,.is-cursor a,.is-cursor button,.is-cursor .topic{cursor:auto!important}}

/* ===== no JS ===== */
.no-js .w>span,.no-js .m>*{transform:none}
.no-js .f,.no-js .marquee,.no-js .cue,.no-js .post,.no-js .sketch__s,
.no-js .doc,.no-js .cred tbody tr{opacity:1;transform:none}
.no-js .frame__block{transform:scaleY(1)}.no-js .frame__line{clip-path:none}
.no-js .mosaic__slice{opacity:1;transform:none}
.no-js .diag [data-grow]{transform:scaleX(1)}.no-js .diag [data-pop]{transform:scale(1)}
.no-js .topic{clip-path:none;border-bottom-color:var(--color-border)}
.no-js .rule{transform:scaleX(1)}
.no-js .cur,.no-js .nav,.no-js .load{display:none}
.no-js .tilt{transform:none}

/* ==================================================================
   ВНУТРІШНІ СТОРІНКИ
   Додано при добудові сайту. Головна цими правилами не користується —
   жоден селектор нижче не перетинається з її класами.
   ================================================================== */

/* шапка сторінки: рейка з номером не потрібна, замість неї eyebrow */
.page-head{padding-top:clamp(104px,10vw,168px);padding-bottom:clamp(24px,2.4vw,44px)}
.page-head .h1{margin:0 0 var(--space-3);font-family:var(--font-display);
font-size:clamp(34px,4.6vw,76px);line-height:1.04;letter-spacing:-.025em;font-weight:600;
max-width:18ch}
.page-head .h1 em{font-style:italic;font-weight:500;color:var(--color-accent)}
.page-head .lede{margin:0;font-size:var(--type-lede-size);line-height:1.5;
color:var(--ink-600);max-width:62ch}

/* проза: юридичні сторінки, довгі пояснення */
.prose{max-width:68ch}
.prose h2{margin:var(--space-6) 0 var(--space-3);font-family:var(--font-display);
font-size:clamp(24px,2.2vw,34px);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.prose h3{margin:var(--space-5) 0 var(--space-2);font-family:var(--font-display);
font-size:clamp(19px,1.5vw,24px);line-height:1.3;font-weight:600}
.prose p{margin:0 0 var(--space-3);font-size:var(--type-body-size);
line-height:var(--type-body-lh);color:var(--ink-600)}
.prose p strong{color:var(--color-text);font-weight:600}
.prose ul{margin:0 0 var(--space-3);padding:0;list-style:none}
.prose ul li{position:relative;padding-left:28px;margin-bottom:10px;
font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--ink-600)}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:1px;
background:var(--color-accent)}
.prose .note{margin:var(--space-4) 0;padding:var(--space-3);background:var(--color-bg2);
border-left:2px solid var(--color-accent);font-size:17px;line-height:1.7;color:var(--color-text)}

/* стаття: маргінальні метадані ліворуч, текст праворуч */
.article{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,3fr);
gap:clamp(32px,4vw,80px);align-items:start}
.article__meta{position:sticky;top:120px;border-top:2px solid var(--color-text);
padding-top:var(--space-2);font-family:var(--font-display);font-style:italic;font-size:15px;
color:var(--color-muted)}
.article__meta dt{font-style:normal;font-family:var(--font-body);font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);
margin-top:var(--space-2);margin-bottom:4px}
.article__meta dd{margin:0;color:var(--color-text);font-size:15px}
.article__body{max-width:68ch}
.article__body > p:first-of-type::first-letter{float:left;font-family:var(--font-display);
font-weight:600;font-size:4.6em;line-height:.82;margin:.04em .09em 0 0;color:var(--color-accent)}
.pullquote{margin:var(--space-6) 0;padding:var(--space-4) 0;
border-top:2px solid var(--color-text);border-bottom:2px solid var(--color-text);
font-family:var(--font-display);font-style:italic;font-weight:500;
font-size:clamp(21px,2vw,30px);line-height:1.32;color:var(--color-text)}
.article__end{margin-top:var(--space-6);padding-top:var(--space-3);
border-top:1px solid var(--color-rule);font-size:15px;color:var(--color-muted)}

/* блок .price прибрано разом зі сторінкою цін */

/* сітка карток: блог і медіа */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:var(--space-3);margin-top:var(--space-4)}
.cards .post{flex:none;opacity:1;transform:none}

/* карта сайту */
.sitemap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--space-5);margin-top:var(--space-4)}
.sitemap h2{font-size:var(--type-label-size);letter-spacing:var(--type-label-track);
text-transform:uppercase;color:var(--color-muted);font-family:var(--font-body);
font-weight:600;margin:0 0 var(--space-2)}
.sitemap ul{margin:0;padding:0;list-style:none}
.sitemap li{margin-bottom:var(--space-1)}
.sitemap a{color:var(--color-text);text-decoration:none;font-size:17px;
border-bottom:1px solid transparent;transition:border-color var(--motion-hover) var(--ease-hover)}
.sitemap a:hover{border-bottom-color:var(--color-accent)}

@media(max-width:880px){
.article{grid-template-columns:1fr}
.article__meta{position:static;top:auto}
}


/* ==================================================================
   ФІЛЬТРИ КАТАЛОГІВ (блог і питання)
   ================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:var(--space-4) 0 var(--space-5);
padding:0;list-style:none}
.filters__btn{appearance:none;cursor:pointer;background:transparent;
border:1px solid var(--color-border);border-radius:var(--radius-full);
padding:10px 18px;min-height:44px;
font-family:var(--font-body);font-size:13px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);
text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);
transition:color var(--motion-hover) var(--ease-hover),
border-color var(--motion-hover) var(--ease-hover),
background-color var(--motion-hover) var(--ease-hover)}
.filters__btn:hover{color:var(--color-text);border-color:var(--color-text)}
.filters__btn[aria-pressed="true"]{background:var(--color-text);
border-color:var(--color-text);color:var(--bone-100)}
.filters__btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.filters__n{font-weight:400;opacity:.7}

/* лічильник результатів */
.filters__count{margin:0 0 var(--space-3);font-size:15px;color:var(--color-muted)}

/* картка питання */
.qa{display:grid;gap:0;border-top:1px solid var(--color-border)}
.qa__item{display:block;padding:clamp(20px,1.8vw,30px) 0;
border-bottom:1px solid var(--color-border);text-decoration:none;color:inherit;
transition:padding-left var(--motion-hover) var(--ease-hover),
color var(--motion-hover) var(--ease-hover)}
.qa__item:hover{color:var(--color-accent);padding-left:var(--space-3)}
.qa__item:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
.qa__cat{display:block;font-size:var(--type-label-size);
letter-spacing:var(--type-label-track);text-transform:uppercase;
color:var(--color-muted);font-weight:600;margin-bottom:var(--space-1)}
.qa__item:hover .qa__cat{color:var(--color-accent)}
.qa__q{display:block;font-family:var(--font-display);
font-size:clamp(19px,1.6vw,27px);line-height:1.25;letter-spacing:-.015em}
.qa__a{display:block;margin-top:var(--space-1);font-size:16px;line-height:1.6;
color:var(--ink-600);max-width:72ch}
.qa__item:hover .qa__a{color:var(--ink-600)}

/* порожній стан фільтра */
.filters__empty{padding:var(--space-5) 0;color:var(--color-muted);font-size:17px}
.filters__empty[hidden]{display:none}

/* приховані фільтром елементи */
/* правило перенесено в кінець файлу — див. коментар там */


/* Редакційний шар (див. вище) перевизначає .post на двоколонкову сітку
   «категорія | заголовок» — це список для головної. У каталозі потрібна
   картка, тому тут повертаємо flex-колонку і власну обгортку.
   Слабший селектор .cards .post{flex:none} цього не перебивав: проблема
   була не у flex, а в grid-template-columns. */
.cards .post{display:flex;flex-direction:column;flex:none;
grid-template-columns:none;gap:0;
opacity:1;transform:none;
padding:var(--space-3);
background:var(--bone-100);
border:1px solid var(--color-border);
border-radius:var(--radius-md)}
.cards .post:hover{border-color:var(--color-text)}
.cards .post__cat{grid-column:auto;margin:0;
font-family:var(--font-body);font-style:normal;font-weight:600;
font-size:var(--type-label-size);letter-spacing:var(--type-label-track);
text-transform:uppercase;color:var(--color-accent)}
.cards .post__t{grid-column:auto;
margin:var(--space-2) 0 var(--space-3);
font-family:var(--font-display);font-style:normal;
font-size:clamp(17px,1.35vw,22px);line-height:1.28;color:var(--color-text)}
.cards .post__m{grid-column:auto;margin-top:auto;
padding-top:var(--space-2);border-top:1px solid var(--color-border);
font-family:var(--font-body);font-style:normal;
font-size:13px;color:var(--color-muted)}


/* Хайрлайн ".sec + .sec::before" розділяє секції на головній і несе 96px
   нижнього відступу. Одразу після шапки сторінки він ділить те, що й так
   розділене заголовком, і дає ~250px порожнечі. */
.page-head + .sec::before{display:none}
.page-head + .sec{padding-top:0}


/* ==================================================================
   ХЛІБНІ КРИХТИ
   ================================================================== */
.crumbs{margin:0 0 var(--space-3);font-size:13px;line-height:1.5;
display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-1);
font-family:var(--font-body);color:var(--color-muted)}
.crumbs a{color:var(--color-muted);text-decoration:none;
border-bottom:1px solid transparent;padding-bottom:1px;
transition:color var(--motion-hover) var(--ease-hover),
border-color var(--motion-hover) var(--ease-hover)}
.crumbs a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}
.crumbs a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:2px}
.crumbs__sep{color:var(--bone-600);user-select:none}
.crumbs [aria-current="page"]{color:var(--color-text)}
/* шапка сторінки з крихтами піднімається: крихти вже дають верхній відступ */
.page-head .crumbs{margin-top:0}
@media(max-width:560px){.crumbs{font-size:12px;gap:0 var(--space-1)}}


/* Явне повернення. Крихти орієнтують, але не читаються як дія —
   і гола стрілка теж не читається. Тому підпис словом. */
.crumbs__back{display:inline-flex;align-items:center;gap:10px;
min-height:44px;margin-bottom:4px;
font-family:var(--font-body);font-size:14px;font-weight:600;
color:var(--color-text);text-decoration:none;
transition:color var(--motion-hover) var(--ease-hover)}
.crumbs__back:hover{color:var(--color-accent)}
.crumbs__back:focus-visible{outline:3px solid var(--color-focus);
outline-offset:4px;border-radius:2px}
.crumbs__arrow{display:inline-block;font-size:17px;line-height:1;
transition:transform var(--motion-hover) var(--ease-hover)}
.crumbs__back:hover .crumbs__arrow{transform:translateX(-5px)}


/* тема в метаданих веде у відфільтрований каталог */
.article__meta a{color:var(--color-text);text-decoration:none;
border-bottom:1px solid var(--color-rule);
transition:color var(--motion-hover) var(--ease-hover),
border-color var(--motion-hover) var(--ease-hover)}
.article__meta a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}
.article__meta a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}


/* Батьківський пункт крихт — він же кнопка «назад»: підписаний, жирніший,
   із стрілкою. Окремий рядок «Назад до …» вів туди ж і дублював сам себе. */
.crumbs__up{display:inline-flex;align-items:center;gap:7px;
min-height:44px;font-weight:600;color:var(--color-text)!important;
border-bottom:0!important}
.crumbs__up:hover{color:var(--color-accent)!important}
.crumbs__up .crumbs__arrow{display:inline-block;font-size:16px;line-height:1;
transition:transform var(--motion-hover) var(--ease-hover)}
.crumbs__up:hover .crumbs__arrow{transform:translateX(-4px)}
.crumbs__up > span:last-child{border-bottom:1px solid transparent;
transition:border-color var(--motion-hover) var(--ease-hover)}
.crumbs__up:hover > span:last-child{border-bottom-color:var(--color-accent)}
/* попередній окремий рядок більше не генерується */
.crumbs__back{display:none}


/* Стрілка в крихтах прибрана: шлях орієнтує сам, а стрілка на середньому
   пункті читалась як окрема дія і плутала. Усі пункти однакові. */
.crumbs__up,.crumbs__arrow,.crumbs__back{all:unset}
.crumbs__arrow{display:none}
.crumbs__up{color:var(--color-muted);text-decoration:none;cursor:pointer}
.crumbs__up:hover{color:var(--color-accent)}


/* ==================================================================
   ПРИХОВУВАННЯ ФІЛЬТРОМ — має бути останнім і з !important.

   Було: [data-cat][hidden]{display:none} стояло вище за
   .cards .post{display:flex}. Вага однакова (0,2,0), тож перемагало
   пізніше правило — і картки блогу не ховалися зовсім. На питаннях
   фільтр працював, бо .qa__item має меншу вагу.

   display — примітив видимості: будь-яке компонентне правило
   розкладки має йому поступатися, інакше порядок рядків у файлі
   мовчки вирішує, працює фільтр чи ні.
   ================================================================== */
[data-cat][hidden]{display:none!important}


/* ==================================================================
   ПОЛЕ ВВЕДЕННЯ — за компонентом Input із дизайн-системи.

   Було: border:0 + border-bottom:1px, а на фокусі лінія товщала до 3px
   на всю ширину поля. Звідси й широкий червоний ховер.

   Компонент у Figma описує інше: коробка з рамкою 1px, радіус 4
   (radius/sm — навмисно менший за кнопкові 8, бо поле читається як
   заглиблення, а кнопка як обʼєкт), висота 56 (size/control/lg),
   відступ 16, кільце фокуса 3px зі зсувом 2px.

   Правила стоять у кінці файлу, щоб перебити старі .fld__i вище.
   ================================================================== */
.fld__i{width:100%;min-height:56px;padding:0 var(--space-2);
background:var(--bone-100);
border:1px solid var(--color-border);
border-bottom:1px solid var(--color-border);
border-radius:var(--radius-sm);
font-family:var(--font-body);font-size:var(--type-body-size);
line-height:1.5;color:var(--color-text);
box-shadow:none;
transition:border-color var(--motion-hover) var(--ease-hover)}
.fld__i::placeholder{color:var(--bone-600)}
.fld__i:hover{border-color:var(--color-text);border-bottom-color:var(--color-text)}
.fld__i:focus,.fld__i:focus-visible{
outline:3px solid var(--color-focus);outline-offset:2px;
border-color:var(--color-focus);border-bottom-color:var(--color-focus);
border-bottom-width:1px;box-shadow:none}
.fld__i[aria-invalid="true"]{border-color:var(--color-primary);
border-bottom-color:var(--color-primary);border-bottom-width:1px}
textarea.fld__i{padding-top:var(--space-2);padding-bottom:var(--space-2);
min-height:128px;line-height:1.6;resize:vertical}


/* ==================================================================
   КОНТАКТИ — дві колонки: реквізити й форма. Без рейок і секцій:
   сторінка має бути коротшою за одне прокручування.
   Значення — з DESIGN-SYSTEM.md, сирих пікселів тут немає.
   ================================================================== */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(32px,4vw,96px);align-items:start}
.contact__col{min-width:0}
.contact__h{margin:0 0 var(--space-3);font-family:var(--font-display);
font-size:var(--type-h3-size);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.contact__list{margin:0 0 var(--space-4);padding:0;list-style:none;
border-top:1px solid var(--color-border)}
.contact__list li{display:flex;flex-wrap:wrap;gap:var(--space-2);
align-items:baseline;padding:var(--space-2) 0;
border-bottom:1px solid var(--color-rule);
font-size:17px;color:var(--color-text)}
.contact__list li > span{flex:0 0 108px;font-size:var(--type-label-size);
letter-spacing:var(--type-label-track);text-transform:uppercase;
color:var(--color-muted);font-weight:600}
.contact__list a{color:var(--color-text);text-decoration:none;
border-bottom:1px solid var(--color-border);
transition:color var(--motion-hover) var(--ease-hover),
border-color var(--motion-hover) var(--ease-hover)}
.contact__list a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}
.contact__list a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.contact__fine{margin:0 0 var(--space-2);font-size:15px;line-height:1.6;
color:var(--color-muted);max-width:46ch}
.contact__form{margin:0}
@media(max-width:860px){.contact{grid-template-columns:1fr}}


/* ==================================================================
   КОНТАКТИ — два блоки. Форма на другій поверхні.

   Поверхня: --color-bg2 (bone-300) — у ДС це саме «друга поверхня»,
   окремий відтінок не вигадується.

   Виміряно на bone-300:
     --color-text   14.90:1   ok
     --ink-600       7.84:1   ok
     --color-muted   4.90:1   ok
     --color-accent  4.33:1   НИЖЧЕ AA -> усередині панелі замінений
                              на --color-primary (13.13:1)
     кільце фокуса   4.33:1   ok (нетекстовий елемент, норма 3.0)

   Поле на панелі дає лише 1.16:1 різниці поверхонь, тож межу тримає
   рамка --color-text на ховері (14.90:1), а не сама заливка.
   ================================================================== */
.contact__panel{background:var(--color-bg2);
border-radius:var(--radius-md);
padding:var(--space-4)}
.contact__panel .fld:last-of-type{margin-bottom:var(--space-3)}
/* акцент на bone-300 не дотягує до AA — беремо глибший токен */
.contact__panel .fld__i:focus~.fld__l,
.contact__panel .fld:focus-within .fld__l{color:var(--color-primary)}
@media(max-width:860px){.contact__panel{padding:var(--space-3)}}


/* ==================================================================
   ПЕРЕХІД У ТЕЛЕГРАМ — замість форм.
   Значення з DESIGN-SYSTEM.md: друга поверхня --color-bg2,
   радіус --radius-md, відступ --space-4.
   ================================================================== */
.tg{max-width:56ch}
.tg--panel{background:var(--color-bg2);border-radius:var(--radius-md);
padding:var(--space-4);max-width:none}
.tg__h{margin:0 0 var(--space-2);font-family:var(--font-display);
font-size:var(--type-h3-size);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.tg__p{margin:0 0 var(--space-3);font-size:17px;line-height:1.7;color:var(--ink-600)}
.tg__btn{margin-bottom:var(--space-2)}
.tg__note{margin:0;font-size:15px;line-height:1.6;color:var(--color-muted);max-width:46ch}
/* на другій поверхні акцентний текст не дотягує до AA — див. розрахунок у
   блоці КОНТАКТИ вище; тут акцентного тексту немає, лише кнопка */
@media(max-width:860px){.tg--panel{padding:var(--space-3)}}


/* дія в бічній панелі замість форми */
.sheet__tg{display:block}
.sheet__tg .btn{width:100%;margin-bottom:var(--space-2)}


/* ==================================================================
   КАНАЛИ ЗВʼЯЗКУ — простий список. Токени з DESIGN-SYSTEM.md.
   ================================================================== */
.chan{margin:0;padding:0;list-style:none}
/* Без горизонтальних роздільників: усередині панелі вони ріжуть і без того
   невеликий блок на смуги. Розділяє відстань, а не лінія. */
.chan__item{display:grid;grid-template-columns:minmax(96px,auto) 1fr;
gap:var(--space-1) var(--space-2);align-items:baseline}
.chan__item + .chan__item{margin-top:var(--space-3)}
.chan__k{font-size:var(--type-label-size);letter-spacing:var(--type-label-track);
text-transform:uppercase;color:var(--color-muted);font-weight:600}
.chan__v{font-size:19px;color:var(--color-text);text-decoration:none;
border-bottom:1px solid var(--color-border);justify-self:start;
transition:color var(--motion-hover) var(--ease-hover),
border-color var(--motion-hover) var(--ease-hover)}
a.chan__v:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}
a.chan__v:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.chan__v:not(a){border-bottom:0}
.chan__m{grid-column:2;font-size:15px;color:var(--color-muted)}
.chan__todo{color:var(--color-muted);font-style:italic}
.chan__note{margin:var(--space-2) 0 0;font-size:15px;line-height:1.6;
color:var(--color-muted);max-width:46ch}


/* другий канал під основною дією */
.tg__alt{margin:0 0 var(--space-1);font-size:16px;color:var(--ink-600)}
.tg__alt a{color:var(--color-text);text-decoration:none;
border-bottom:1px solid var(--color-border)}
.tg__alt a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}


/* Портрет на контактах прибрано на вимогу. */



/* ==================================================================
   КАТАЛОГ ПИТАНЬ — акордіони, згруповані за темою.
   Компонент .faq узятий із головної без змін: він уже описаний
   у DESIGN-SYSTEM.md (маркер «+», поворот на 45° у відкритому стані).
   ================================================================== */
.qa-all{margin:0}
.qa-group + .qa-group{margin-top:var(--space-6)}
.qa-group__h{margin:0;display:flex;align-items:baseline;gap:var(--space-2);
font-family:var(--font-body);font-size:var(--type-label-size);
letter-spacing:var(--type-label-track);text-transform:uppercase;
font-weight:600;color:var(--color-muted)}
.qa-group__n{font-weight:400;color:var(--bone-600);letter-spacing:0}
.qa-group .faq{margin-top:var(--space-2)}


/* ==================================================================
   КАТАЛОГИ на всю ширину. Рейка з номером прибрана — див. sec_tight().
   ================================================================== */
.catalogue{width:100%}
/* картки: ширший мінімум, щоб заголовок не ламався на кожному слові,
   і auto-fill сам добирає кількість колонок під екран */
/* Чотири в рядок максимум. auto-fill на широкому екрані давав вісім —
   картки ставали дрібними, а обкладинка з китом потребує місця. */
.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
@media(max-width:1180px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
/* акордіони навпаки тримають міру: рядок питання на 1360px не читається */
.qa-all{max-width:82ch}


/* ==================================================================
   КАРТКА КАТАЛОГУ З ОБКЛАДИНКОЮ

   Обкладинка раніше виносилась за межі картки негативними полями
   calc(100% + padding*2). Це трималось на припущенні, що паддінг картки
   рівно --space-3, а він перевизначається ще в трьох місцях, зокрема
   в медіазапитах. Варто було одному розійтись — і обкладинка вилізала
   за рамку на пів пікселя, а висоти карток переставали збігатися.

   Тепер структурно: у картки паддінга немає зовсім, текст лежить
   у .post__body з власним паддінгом. Виносити нічого не треба.
   ================================================================== */
.cards .post{padding:0;overflow:hidden;height:100%}
.cards{align-items:stretch}
.post__cover{display:block;width:100%;aspect-ratio:16/9;
object-fit:cover;background:var(--color-bg2);
transition:opacity var(--motion-hover) var(--ease-hover)}
.post:hover .post__cover{opacity:.92}
.post__body{display:flex;flex-direction:column;flex:1;
padding:var(--space-3)}
.cards .post__cat{margin-top:0}

/* ==================================================================
   ДРУГОРЯДНИЙ РЯДОК НА КАРТЦІ КАТАЛОГУ

   Заголовок відповідає «про що», ця строчка — «чому варто». Вона
   обрізана двома рядками: без обмеження один довгий лід розсував би
   картку, і сітка в чотири колонки знову б розʼїхалась по висоті.
   Обрізання робить line-clamp, а не JS — тоді без стилів текст просто
   лишається повним, а не зникає.
   ================================================================== */
.cards .post__t{margin-bottom:var(--space-1)}
.post__d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
overflow:hidden;margin:0 0 var(--space-3);
font-family:var(--font-body);font-style:normal;font-size:15px;line-height:1.5;
color:var(--color-muted)}