/* LEXERY landing v4 — concept B «Контраст», multi-page. One motion system (SPEC §5): 5 curves, 7 durations, masks not fades. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(f/inter-400.woff2?v=200c81773f) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(f/inter-500.woff2?v=ca0037cf6d) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(f/inter-600.woff2?v=a3cabc0d0d) format("woff2")}
:root{--paper:#fff;--ink:#0a0a0a;--ink-2:#404040;--ink-3:#6b6b6b;--line:#e6e6e6;--line-2:#d0d0d0;--plate:#f6f6f5;--blue:#297acc;
  --band:#0a0a0a;--band-ink:#fafafa;--band-ink-2:#a3a3a3;--band-rule:transparent;--btn:#0a0a0a;--btn-ink:#fff;--btn-h:#262626;
  --e-out:cubic-bezier(.19,1,.22,1);--e-move:cubic-bezier(.65,0,.35,1);--e-std:cubic-bezier(.4,0,.2,1);--e-exit:cubic-bezier(.4,0,1,1);--e-tick:cubic-bezier(.34,1.2,.64,1);
  --t-press:120ms;--t-micro:180ms;--t-ui:240ms;--t-panel:400ms;--t-camera:600ms;--t-title:900ms;--t-draw:1400ms;--stagger:70ms;--t-exit:140ms;
  --pad:40px;--gap:24px;--st:160px;--sb:120px;--h1:64px;--h2:48px;--hdr:64px;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--paper:#0b0b0b;--ink:#ededed;--ink-2:#bdbdbd;--ink-3:#909090;--line:#222;--line-2:#383838;--plate:#121212;
  --band:#000;--band-ink:#ededed;--band-ink-2:#9a9a9a;--band-rule:#2a2a2a;--btn:#ededed;--btn-ink:#0b0b0b;--btn-h:#fff}}
*,*::before,*::after{box-sizing:border-box}
/* scrollbars (founder B-F14): quiet, on the page tokens, light + dark; Safari/old Chromium get the same via ::-webkit-scrollbar */
html{scrollbar-color:var(--line-2) var(--paper)}
@supports not (scrollbar-color:auto){::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--paper)}
  ::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--paper);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}}
.lg table{scrollbar-width:thin}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
/* realclick 05.10: Android Chrome painted its default tap highlight (Holo blue, 40 %) as a rectangle over every tapped link and
   button; the controls have their own pressed states, text links dim while pressed */
@media (hover:none){a:not(.btn):active{opacity:.6}}
/* realclick 05.10: the sticky-header offset lives on what is scrolled to (anchors, focused fields), not on html: with
   html{scroll-padding-top} every focus() on a header control (Esc closing the menu, the focus trap, Shift+Tab) scrolled the
   page up by half a screen, because the sticky header always sits inside that padding */
main,main [id],main :is(a,button,input,select,textarea,summary),.foot a{scroll-margin-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/28px Inter,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern","cv11"}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}fieldset{border:0;min-width:0}
p,li,dd{text-wrap:pretty}h1,h2,h3{text-wrap:balance}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button,input{font:inherit;color:inherit}
abbr{text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:6px;font-size:15px}
.skip:focus{top:12px}
.wrap{max-width:calc(1240px + 2 * var(--pad));margin:0 auto;padding:0 max(var(--pad),env(safe-area-inset-right)) 0 max(var(--pad),env(safe-area-inset-left))}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.h1{font-size:var(--h1);line-height:1.04;font-weight:600;letter-spacing:-.025em}
.h1 .dd{letter-spacing:0}  /* realclick 05.10 (O-04): at -.025em the descenders of «дд» («Віддай») ran into one block */
.h2{font-size:var(--h2);line-height:1.08;font-weight:600;letter-spacing:-.022em}
.h3{font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.008em}
.lead,.sub{font-size:20px;line-height:30px;color:var(--ink-2)}
.meta{font-size:14px;line-height:20px;color:var(--ink-3)}
.logo{display:inline-flex;align-items:center;height:40px;color:var(--ink)}
.logo svg{height:22px;width:auto}
.cube-s{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.wm{fill:currentColor}

/* links: underline draws in from the left, leaves to the right; the arrow moves, it is never underlined */
.u{background:linear-gradient(currentColor,currentColor) no-repeat 100% 100%/0 1px;padding-bottom:2px;transition:background-size var(--t-exit) var(--e-exit)}
a:focus-visible .u{background-position:0 100%;background-size:100% 1px;transition:background-size var(--t-ui) var(--e-out)}@media (hover:hover){a:hover .u{background-position:0 100%;background-size:100% 1px;transition:background-size var(--t-ui) var(--e-out)}}
.ar{display:inline-block;transition:transform var(--t-micro) var(--e-std)}
@media (hover:hover){a:hover .ar{transform:translateX(3px)}}
.more{display:inline-flex;align-items:baseline;width:fit-content;font-size:16px;line-height:24px;font-weight:500;color:var(--ink);padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px,linear-gradient(var(--line-2),var(--line-2)) no-repeat 0 100%/100% 1px;
  transition:background-size var(--t-ui) var(--e-out)}
.more:focus-visible{background-size:100% 1px,100% 1px}@media (hover:hover){.more:hover{background-size:100% 1px,100% 1px}}
.priv .more{background-image:linear-gradient(currentColor,currentColor),linear-gradient(#3a3a3a,#3a3a3a)}
p a:not(.more):not(.btn),.consent a,.meta a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line-2);transition:text-decoration-color var(--t-micro) var(--e-std)}
@media (hover:hover){p a:not(.more):not(.btn):hover,.consent a:hover,.meta a:hover{text-decoration-color:currentColor}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border:0;border-radius:6px;background:var(--btn);color:var(--btn-ink);font-size:16px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color var(--t-micro) var(--e-std),transform var(--t-micro) var(--e-std)}
@media (hover:hover){.btn:hover{background:var(--btn-h)}}.btn:active{transform:scale(.97);transition-duration:var(--t-press)}
.btn-s{height:38px;padding:0 16px;font-size:15px}.btn-l{height:52px;padding:0 26px}
.btn[disabled]{cursor:progress}

/* header (founder B-F13): the product's wordmark, a segmented nav whose highlight follows the pointer, smart sticky */
.top{position:sticky;top:0;z-index:50;view-transition-name:header;transition:transform 420ms var(--e-out),background-color var(--t-ui) var(--e-std)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);opacity:1;transition:opacity var(--t-ui) var(--e-std)}
.top.sc::before{opacity:.82;-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.top.sc::before{opacity:1}}
.lite .top.sc::before{-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1}.lite .endc{-webkit-backdrop-filter:none;backdrop-filter:none}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity var(--t-micro) var(--e-std)}
.top.sc::after{opacity:1}
.top.hid{transform:translateY(-100%);transition:transform 320ms var(--e-move)}
.top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hdr);column-gap:24px}
.brand{justify-self:start;display:inline-flex;align-items:center;height:40px;font-size:20px;line-height:22px;font-weight:600;letter-spacing:.02em;color:var(--ink);font-feature-settings:normal}
.brand-f{height:auto}
.nav{position:relative;display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;font-size:15px;line-height:20px;font-weight:500}
.nav a{position:relative;z-index:1;display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:999px;color:var(--ink-2);transition:color var(--t-micro) var(--e-std)}
.nav a[aria-current=page]{color:var(--ink)}@media (hover:hover){.nav a:hover{color:var(--ink)}}
.nav-hl{position:absolute;left:0;top:3px;height:34px;width:0;border-radius:999px;background:var(--plate);opacity:0;view-transition-name:nav-mark;
  transition:transform 380ms var(--e-out),width 380ms var(--e-out),opacity var(--t-micro) var(--e-std)}
.nav-hl.on{opacity:1}
@media (prefers-color-scheme:dark){.nav-hl{background:#1c1c1c}}
.top-a{justify-self:end;display:flex;align-items:center;gap:22px;font-size:15px}
.top-a .link{display:inline-flex;align-items:center;height:40px;color:var(--ink-2);font-weight:500;transition:color var(--t-micro) var(--e-std)}
@media (hover:hover){.top-a .link:hover{color:var(--ink)}}
.t-home .top-cta{max-width:0;padding-left:0;padding-right:0;margin-left:-22px;overflow:hidden;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(-6px);transition:max-width var(--t-ui) var(--e-out),padding var(--t-ui) var(--e-out),margin var(--t-ui) var(--e-out),opacity var(--t-ui) var(--e-std),transform var(--t-ui) var(--e-out),visibility 0s var(--t-ui),background-color var(--t-micro) var(--e-std)}
.t-home.cta-on .top-cta{max-width:240px;padding-left:16px;padding-right:16px;margin-left:0;opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* realclick 05.10: with the menu open the sheet lists «Подати заявку»; the header button next to ✕ made two at once (B-F13: never two) */
html.menu .top-a .top-cta{opacity:0;visibility:hidden;pointer-events:none}
.m-btn{display:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.m-btn i,.m-btn i::before{position:absolute;left:12px;width:20px;height:1.5px;background:var(--ink);transition:transform var(--t-ui) var(--e-move)}
.m-btn i{top:18px}.m-btn i::before{content:"";left:0;top:7px}
.m-btn[aria-expanded=true] i{transform:translateY(3.5px) rotate(45deg)}.m-btn[aria-expanded=true] i::before{transform:translateY(-7px) rotate(-90deg)}
.sheet{position:fixed;inset:var(--hdr) 0 0;z-index:49;background:var(--paper);opacity:0;transform:translateY(-16px);transition:opacity calc(var(--t-panel) * .65) var(--e-exit),transform calc(var(--t-panel) * .65) var(--e-exit)}
.sheet.open{opacity:1;transform:none;transition:opacity 320ms var(--e-out),transform 320ms var(--e-out)}
.sheet-in{padding-top:24px;padding-bottom:32px;min-height:100%;display:flex;flex-direction:column;justify-content:space-between}
/* realclick 05.10: a phone on its side (800×360) has 296 px under the header; the five 63 px links did not fit and the page is
   scroll-locked, so «Увійти» and the e-mail were out of reach. The sheet scrolls itself, and short screens get compact links (≥ 44 px) */
.sheet{overflow-y:auto;overscroll-behavior:contain}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line);clip-path:inset(0);opacity:0;transform:translateY(16px);transition:opacity var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out)}
.sheet.open nav a{opacity:1;transform:none;transition-duration:var(--t-panel)}
.sheet.open nav a:nth-child(2){transition-delay:40ms}.sheet.open nav a:nth-child(3){transition-delay:80ms}.sheet.open nav a:nth-child(4){transition-delay:120ms}.sheet.open nav a:nth-child(5){transition-delay:160ms}
.sheet nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
@media (max-height:520px){.sheet-in{padding-top:8px;padding-bottom:16px}.sheet nav a{font-size:24px;padding:8px 0}}

/* line-mask headings (JS splits lines, then restores the original markup) */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.li{display:block;transform:translateY(105%)}
.in .li{transform:none;transition:transform var(--t-title) var(--e-out);transition-delay:calc(var(--i) * 90ms)}
.js [data-mask]:not(.split):not(.done){visibility:hidden;animation:unhide 0s .3s forwards}
[data-rise] .w{display:inline-block}
/* LCP: hidden states in the first viewport (H1 words, the demo stage and its first question) start at opacity .001, not 0.
   Chrome then reports them for LCP at first paint; at 0 they are not painted and LCP waits for the fade-in (6 s on mobile). Looks the same. */
.js:not(.calm) [data-rise] .w{animation:rise 820ms var(--e-out) both;animation-delay:calc(60ms + var(--i) * 55ms)}
@keyframes rise{from{opacity:.001;transform:translateY(.38em)}}
@media (prefers-reduced-motion:reduce){[data-rise] .w{animation:none!important}}
@keyframes unhide{to{visibility:visible}}

/* hero (founder B-F5): H1 + sub + CTA, then the film; from 768 px the whole hero is one screen — the frame takes the height
   that is left (flex), so the window and the rail «Питання · Відповідь · Звірка · Документ» are always in view on laptops */
.hero{padding:24px 0 12px}
/* 04.10 17:35 (founder: «все дуже на купі»): two calm columns on one axis with the demo. Left: H1 + one sub-line.
   Right: the one primary action with the «безоплатно» note directly under it. Phones/tablets: one column, same order */
.hero-g{align-items:end;row-gap:12px}
.hero-g.g{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h c" "s c";column-gap:48px}
.hero .h1{grid-area:h}
.hero .sub{grid-area:s;max-width:62ch;font-size:17px;line-height:26px}
.hero .cta{grid-area:c;flex-direction:column;align-items:flex-end;align-self:end;gap:10px}
.hero .note{margin:0;font-size:13px;line-height:18px;white-space:nowrap}
.hero .btn-l{height:48px}
.cta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
.note{font-size:14px;line-height:20px;color:var(--ink-3)}
.vt-apply{view-transition-name:apply}
/* retest 05.10 (R-01): a sheet link keeps the menu up until the next page (O-06), so the named groups under it (hero CTA, form
   card, footer) would be captured on their own and painted above the menu for the whole cross-page fade (text over text) */
html.menu :is(.vt-apply,.foot){view-transition-name:none}
.stage{margin-top:24px;position:relative}
.stage figcaption,.wk-c{margin-top:16px;font-size:13px;line-height:18px;color:var(--ink-3)}
.stage .frame{height:clamp(440px,calc(100svh - var(--hdr) - 84px),600px)}
@media (min-width:768px){
  .p-home .hero{display:flex;flex-direction:column;min-height:calc(100svh - var(--hdr))}
  .p-home .hero-g{flex:none;width:100%}
  .p-home .stage{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;width:100%}
  .p-home .st-box,.p-home .st-w{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;position:relative}
  .p-home .stage .frame{flex:1 1 auto;height:auto;min-height:340px;max-height:760px}
  .p-home .stage figcaption{position:absolute;left:0;top:100%;margin-top:12px}}
/* portrait tablets (r5 art M11, iPad 768-1079 px): the stage is at most 0.85 x its width, the hero no longer stretches to the
   screen height, so the window is never a tall, mostly empty box */
@media (min-width:768px) and (max-width:1079px) and (orientation:portrait){
  .p-home .hero{min-height:0}
  .p-home .stage .frame{flex:none;height:auto;aspect-ratio:20/17;min-height:0;max-height:760px}}
/* laptops (founder 04.10: «на маку … дуже широко і по висоті дуже мало»): the stage is the largest 1240:720 box that fits
   the space left under the headline (container units), the rail takes the window's width; the window inside is one
   logical 1240 × 720 portal scaled by v4.js, so MacBook 13/14/16 and 1280 × 800 see the same composition */
@media (min-width:1080px){
  .p-home{--hp:28px;--sm:40px;--ht:110px}
  .p-home .hero{--stw:min(1240px,calc((100svh - var(--hdr) - var(--hp) - var(--ht) - var(--sm) - 84px) * 1.7222));padding-top:var(--hp)}
  .p-home .stage{margin-top:var(--sm)}
  .p-home .st-w{flex:none;width:min(100%,var(--stw));margin:0 auto}
  .p-home .stage .frame{flex:none;width:100%;height:auto;aspect-ratio:1240/720;min-height:0;max-height:none}}
@media (min-width:1080px) and (max-height:840px){.p-home{--hp:20px;--sm:32px;--ht:100px;--h1:54px}.hero .sub{font-size:16px;line-height:24px}}
@media (min-width:1080px) and (max-height:760px){.p-home{--hp:14px;--sm:24px;--ht:92px;--h1:46px}.p-home .hero{--stw:min(1240px,calc((100svh - var(--hdr) - var(--hp) - var(--ht) - var(--sm) - 92px) * 1.7222))}}
@media (min-width:1024px) and (max-height:840px){:root{--h1:56px}.hero{padding-top:18px}.stage{margin-top:20px}}
@media (min-width:1024px) and (max-height:760px){:root{--h1:48px}.hero{padding-top:14px}.stage{margin-top:16px}.hero .sub{font-size:16px;line-height:24px}}

/* ── product window = the real LEXERY portal, 1:1 at 1240 px. Source of every value: apps/portal @ origin/integration/next —
   WorkspaceSidebar, ChatMessage, MessageMarkdown, MessageActions, AnswerSourcesList, VerifyQuotes, NormPracticePopover, ChatInput,
   DocumentResultCard, DocumentWorkspace; colours = globals.css lxp/lx tokens (light = approved 9ad45e39 hexes, dark = lx dark). ── */
.ui,.frame{--d-bg:#fff;--d-side:#fff;--d-q:#f5f5f5;--d-comp:#f4f4f4;--d-comp0:#f7f7f7;--d-tool:#ededed;--d-hov:#f4f4f4;--d-line:#e5e5e5;--d-line-2:#e0e0e0;--d-line-3:#d6d6d6;
  --d-ink-0:#000;--d-ink:#171717;--d-ink-1:#1f1f1f;--d-ink-2:#2a2a2a;--d-ink-3:#575757;--d-ink-4:#737373;--d-ink-5:#8a8a8a;--d-ink-6:#9a9a9a;--d-pill:#f4f4f4;
  --d-cite:#1527c7;--d-acc:21,39,199;--d-mark:rgba(41,122,204,.16);--d-qbg:#f6f7fc;--d-court:#171717;--d-court-ink:#fff;--d-reg:#f3f3f3;--d-btn:#141414;--d-btn-ink:#fff;
  --d-desk:#f5f5f5;--d-paper:#fff;--d-send:#ededed;--d-send-a:#ababab;--d-av:#1f4fd1;--d-pop:0 12px 32px -12px rgba(0,0,0,.18),0 2px 6px -2px rgba(0,0,0,.06);
  --d-serif:ui-serif,Georgia,"Times New Roman",serif;--d-doc:"Times New Roman",Times,ui-serif,serif}
@media (prefers-color-scheme:dark){.ui,.frame{--d-bg:#111;--d-side:#111;--d-q:#1a1a1a;--d-comp:#222;--d-comp0:#1a1a1a;--d-tool:#222;--d-hov:#222;--d-line:#2a2a2a;--d-line-2:#2a2a2a;--d-line-3:#3a3a3a;
  --d-ink-0:#ededed;--d-ink:#ededed;--d-ink-1:#ededed;--d-ink-2:#c8c8c8;--d-ink-3:#a3a3a3;--d-ink-4:#8f8f8f;--d-ink-5:#6b6b6b;--d-ink-6:#6b6b6b;--d-pill:#222;
  --d-cite:#7db4ec;--d-acc:90,160,230;--d-mark:rgba(90,160,230,.24);--d-qbg:#16202b;--d-court:#f3f3f3;--d-court-ink:#171717;--d-reg:#222;--d-btn:#ededed;--d-btn-ink:#111;
  --d-desk:#1a1a1a;--d-paper:#1a1a1a;--d-send:#222;--d-send-a:#6b6b6b;--d-av:#3b6fe0;--d-pop:none}}
.ui{color:var(--d-ink);font-size:14px;line-height:1.45;letter-spacing:0}
.frame{position:relative;border:1px solid var(--d-line);border-radius:12px;overflow:hidden;background:var(--d-bg);isolation:isolate}
.fit{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
/* the stage stays at opacity 0 (not .001) until Film has sized it: at .001 the pre-fit layout counts as painted and the fit
   (compact window at 1280, reduced-motion still) is a layout shift: CLS .06–.08 on Home desktop. LCP is the H1, which keeps .001. */
/* LCP (speed lane): hidden until sized = visibility (no paint, no shift), then fades from .001 so Chrome scores the film text at its first paint, not when each beat appears; .001 is a quarter of one colour level */
.js .fit{opacity:.001;visibility:hidden;transition:opacity var(--t-ui) var(--e-std)}.js .fit.ok{opacity:1;visibility:visible}
.cam{width:100%;height:100%;transform-origin:0 0;will-change:transform}
.win{position:relative;display:grid;grid-template-columns:250px minmax(0,1fr);height:100%;background:var(--d-bg);overflow:hidden;contain:layout paint;transition:transform 900ms var(--e-move);
  -webkit-user-select:none;user-select:none}  /* realclick 05.10: a double click in the playing film selected a word of it (aria-hidden picture; the transcript is the text) */
/* sidebar */
.w-side{position:relative;border-right:1px solid var(--d-line);background:var(--d-side);padding:8px;display:flex;flex-direction:column;min-width:0;color:var(--d-ink-0)}
.sb-h{display:flex;align-items:center;justify-content:space-between;height:42px;padding:10px 11px 0 15px}
.sb-wm{font-size:20px;line-height:22px;font-weight:600;letter-spacing:.02em}
.sb-tg svg{width:18px;height:18px;color:var(--d-ink-3)}
.sb-n{display:flex;flex-direction:column;gap:2px;margin-top:9px}
.sb-n i{font-style:normal;display:flex;align-items:center;gap:12px;height:32px;padding:0 16px 0 12px;border-radius:8px;font-size:14px;font-weight:500;letter-spacing:.14px}
.sb-n svg{width:18px;height:18px;flex:none}
.sb-l{margin:28px 0 6px;padding:0 12px;font-size:13px;line-height:18px;font-weight:500;color:var(--d-ink-4)}
.sb-hl li{height:32px;margin-bottom:2px;padding:0 12px;border-radius:8px;display:block;line-height:32px;font-size:14px;color:var(--d-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-new{background:var(--d-hov)}
.js .win .sb-hl{transform:translateY(-34px);transition:transform var(--t-ui) var(--e-move)}.js .win .sb-hl.on{transform:none}
.js .win .sb-new{opacity:.001;transition:opacity var(--t-ui) var(--e-out) 120ms}.js .win .sb-new.on{opacity:1}
.sb-u{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px}
.sb-av{width:36px;height:36px;border-radius:50%;background:var(--d-av);box-shadow:0 0 0 2px var(--d-bg),0 0 0 3.5px var(--d-av);color:#fff;font-size:20px;line-height:36px;text-align:center;font-weight:500;flex:none}
.sb-nm{flex:1;font-size:15px;font-weight:500}
.sb-b{border:1px solid var(--d-line);border-radius:4px;padding:1px 6px;font-size:11px;line-height:15px;font-weight:500;color:var(--d-ink-3)}
/* main + chat column */
.w-main{position:relative;z-index:1;overflow:hidden;min-width:0;background:var(--d-bg);transition:opacity var(--t-ui) var(--e-std)}
.win.fade .w-main,.win.fade .w-doc{opacity:0;transition:opacity var(--t-ui) var(--e-exit)}
.w-chat{position:absolute;top:0;bottom:0;left:50%;width:720px;margin-left:-360px}
.w-hi{position:absolute;left:0;right:0;top:calc(36% - 58px);text-align:center;font-size:22px;line-height:28px;font-weight:600;color:var(--d-ink-0);transition:opacity var(--t-micro) var(--e-exit)}
.sent .w-hi{opacity:0}
.w-view{position:absolute;left:-12px;right:-12px;top:0;bottom:178px;overflow:hidden;padding:0 12px;-webkit-mask-image:linear-gradient(#000 calc(100% - 44px),transparent);mask-image:linear-gradient(#000 calc(100% - 44px),transparent)}
.w-scroll{position:relative;padding:72px 0 28px;transition:transform var(--t-panel) var(--e-move)}
.m-q{margin-left:auto;width:fit-content;max-width:min(100%,600px);background:var(--d-q);border-radius:16px;padding:12px 14px;font-size:15px;line-height:20px;letter-spacing:.13px;color:var(--d-ink-0)}
.m-a{position:relative;margin-top:40px;font-size:15.5px;line-height:1.7;letter-spacing:.005em;color:var(--d-ink-1)}
.m-a p+p{margin-top:16px}.m-a .m-st+p{margin-top:0}
.m-st{position:absolute;left:0;top:0;height:26px;width:100%;color:var(--d-ink-4);font-size:14px;line-height:26px}
.m-st i{position:absolute;left:1px;top:10px;width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1s var(--e-std) infinite alternate}
.m-st .sm{position:absolute;left:16px;top:0;height:26px;overflow:hidden;width:calc(100% - 16px)}
.m-st .sm span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity var(--t-micro) var(--e-out),transform var(--t-ui) var(--e-out)}
.m-st .sm span.on{opacity:1;transform:none}
.m-st .sm span.gone{opacity:0;transform:translateY(-6px);transition-duration:var(--t-exit);transition-timing-function:var(--e-exit)}
@keyframes pulse{from{opacity:.25}to{opacity:1}}
/* NormCitationLink */
.ct{color:var(--d-cite);font-weight:500;text-decoration:underline 1px;text-decoration-color:rgba(var(--d-acc),.3);text-underline-offset:3px;transition:text-decoration-color var(--t-micro) var(--e-std)}
.ct.hv{text-decoration-color:var(--d-cite)}
.ci{display:inline}
/* VerifyQuotes claim underline */
.stm{border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-decoration:underline dotted 1.5px;text-decoration-color:transparent;text-underline-offset:4px;transition:background-color var(--t-micro) var(--e-std),text-decoration-color var(--t-ui) var(--e-out)}
.stm.ul{text-decoration-color:rgba(var(--d-acc),.45)}
.stm.op{background:rgba(var(--d-acc),.07);text-decoration-color:var(--d-cite)}
/* «Звірка цитат» panel (VerifyQuotes) — opens between the answer and the actions */
/* r6: out of flow at its static place under the answer; the clip window (.vq-o) slides down while the panel (.vq-in) stays put,
   and everything after it (.aft) is pushed by the same distance on the same curve: the panel seems to grow, layout never moves */
.vq{position:absolute;left:0;right:0}
.vq-o{overflow:hidden;transform:translateY(calc(-1 * var(--vqh,0px)));transition:transform var(--t-panel) var(--e-move)}
.vq-in{display:block;margin-top:20px;border:1px solid rgba(var(--d-acc),.15);background:rgba(var(--d-acc),.025);border-radius:12px;padding:14px 16px;opacity:.001;transform:translateY(var(--vqh,0px));transition:opacity var(--t-ui) var(--e-out),transform var(--t-panel) var(--e-move)}
.vq-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.aft{transition:transform var(--t-panel) var(--e-move)}
.ver .vq-o,.ver .vq-in{transform:none}.ver .vq-in{opacity:1}.ver .aft{transform:translateY(var(--vqh,0px))}
.vq-h{font-size:13.5px;line-height:20px;font-weight:600;color:var(--d-ink)}
.vq-t{margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--d-ink-3)}
.vq-x{flex:none;font-size:12.5px;line-height:18px;padding:4px 8px;color:var(--d-ink-3)}
.vq-l{margin-top:12px;display:flex;flex-direction:column;gap:14px}
/* SupportQuote (panel + popover): 18 px avatar, «title, label», serif quote, host line */
.sq{display:flex;flex-direction:column;gap:6px;min-width:0}
.sq-lb{color:var(--d-ink-3);font-weight:500}
.sq .q{margin:0;padding:2px 0 2px 12px;border-left:2px solid rgba(var(--d-acc),.35);font-size:13.5px;line-height:1.55;color:var(--d-ink-2)}
.sq-m{padding-left:26px;font-size:11.5px;line-height:16px;color:var(--d-ink-6)}
.js .win .vq .sq{opacity:.001;transform:translateY(6px);transition:opacity var(--t-ui) var(--e-out),transform var(--t-panel) var(--e-out)}
.js .win .vq .sq.on{opacity:1;transform:none}
/* MessageActions */
.m-act{display:flex;align-items:center;gap:8px;margin-top:20px;color:var(--d-ink-3)}
.ab{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ab svg{width:16px;height:16px}.ab:nth-child(2) svg,.ab:nth-child(3) svg{width:14px;height:14px}.ab:nth-child(4) svg{width:15px;height:15px}
.m-pr{padding:4px 8px;font-size:14px;line-height:20px;color:var(--d-ink-6);white-space:nowrap}
.m-avs{display:inline-flex;align-items:center;height:32px;padding:0 8px 0 4px;border-radius:999px;gap:0;font-size:12px;color:var(--d-ink-4)}
.m-avs .av{box-shadow:0 0 0 2px var(--d-bg);border-radius:7px}.m-avs .av+.av{margin-left:-6px}
.m-avs b{font-weight:500;margin-left:6px}.m-avs svg{width:12px;height:12px;margin-left:2px}
/* VerifyToggle (both labels share one cell in the portal; here each place shows its own) */
.vt{display:inline-flex;align-items:center;gap:6px;height:32px;margin-left:4px;padding:0 12px;border:1px solid var(--d-line);border-radius:999px;background:var(--d-bg);color:var(--d-ink-2);font-size:13px;line-height:1;font-weight:500;white-space:nowrap;flex:none;
  transition:color 150ms var(--e-std),background-color 150ms var(--e-std),border-color 150ms var(--e-std),transform var(--t-press) var(--e-std)}
.vt .tick{width:14px;height:14px;flex:none}
.tick path{stroke-dasharray:1;stroke-dashoffset:0}
.vt-l{display:grid}.vt-l>span{grid-area:1/1}.vt-b{visibility:hidden}
.ver .vt{border-color:rgba(var(--d-acc),.3);background:rgba(var(--d-acc),.07);color:var(--d-cite)}.ver .vt-a{visibility:hidden}.ver .vt-b{visibility:visible}
.prs{transform:scale(.94)}
/* AnswerSourcesList */
.src{margin-top:20px;border-top:1px solid var(--d-line);padding-top:14px}
.src-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;min-height:32px}
.src h4,.src .src-t{margin:0;font-size:13px;line-height:1.3;font-weight:500;color:var(--d-ink-4)}
.src li{display:flex;gap:10px;align-items:flex-start}.src li+li{margin-top:10px}
.src li>div{min-width:0;flex:1}
.av{width:20px;height:20px;border-radius:6px;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-top:1px}
.av.s16{width:16px;height:16px;border-radius:5px;margin-top:0}.av.s18{width:18px;height:18px;border-radius:6px;margin-top:0}.av-c.s18{font-size:7.5px}
.av img{width:100%;height:100%;object-fit:cover}
.av-r{background:#1527c7}
.av-c{background:var(--d-court);color:var(--d-court-ink);font-size:8px;line-height:1;font-weight:600;letter-spacing:.02em}.av-c.s16{font-size:6.5px}
.av-o{background:var(--d-reg);color:var(--d-ink-3)}.av-o svg{width:12px;height:12px}
.s-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.s-t{font-size:14px;line-height:20px;font-weight:500;color:var(--d-ink)}
.pill{display:inline-flex;width:fit-content;border-radius:999px;padding:1px 8px;font-size:12px;line-height:1.45;background:var(--d-pill);color:var(--d-ink-3);white-space:nowrap;font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.s-ex{margin-top:6px;font-size:13px;line-height:1.45;color:var(--d-ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pill-w{background:#fbedeb;color:#c03a2b}
@media (prefers-color-scheme:dark){.pill-w{background:rgba(192,58,43,.22);color:#f2a196}}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px solid var(--d-line-2);border-radius:6px;background:var(--d-bg);font-size:12.5px;font-weight:500;color:var(--d-ink-2);white-space:nowrap}
/* second turn: question in «Документ» mode → DocumentResultCard */
.m-q2{margin-top:36px}
.m-a2{margin-top:36px;font-size:15.5px;line-height:1.7;color:var(--d-ink-1)}
.dcard{display:flex;align-items:center;gap:12px;margin-top:20px;border:1px solid var(--d-line);border-radius:10px;padding:14px;background:var(--d-bg)}
.dc-i{width:36px;height:36px;border-radius:6px;background:var(--d-reg);color:var(--d-ink);display:flex;align-items:center;justify-content:center;flex:none}.dc-i svg{width:18px;height:18px}
.dc-b{flex:1;min-width:0}.dc-t{font-size:14px;line-height:20px;font-weight:500;color:var(--d-ink)}.dc-m{margin-top:2px;font-size:12px;line-height:16px;color:var(--d-ink-4)}
.dc-x{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--d-line);border-radius:999px;color:var(--d-ink-2);flex:none}.dc-x svg{width:15px;height:15px}
.dc-o{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--d-btn);color:var(--d-btn-ink);font-size:13px;font-weight:500;flex:none;transition:transform var(--t-press) var(--e-std)}
.src2{margin-top:20px}
/* popovers */
.pop-at{position:absolute;left:0;top:0;width:min(400px,100%);z-index:6;pointer-events:none}
.pop-at[data-k=p1]{width:min(420px,100%)}.pop-at[data-k=p2]{width:min(380px,100%)}
.pop{background:var(--d-bg);border:1px solid var(--d-line);border-radius:12px;box-shadow:var(--d-pop);font-size:13px;line-height:1.45}
.pop-at .pop{opacity:.001;transform:scale(.98);transform-origin:16px 0;transition:opacity calc(var(--t-ui) * .65) var(--e-exit),transform calc(var(--t-ui) * .65) var(--e-exit)}
.pop-at .pop.on{opacity:1;transform:none;transition:opacity var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out)}
mark{color:inherit;border-radius:2px;background:linear-gradient(var(--d-mark),var(--d-mark)) no-repeat 0 0/0 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.hl{background-size:100% 100%;transition:background-size 500ms var(--e-out)}
mark.hl+mark.hl{transition-delay:120ms}
.q{margin-top:6px;border-left:2px solid rgba(var(--d-acc),.35);padding:2px 0 2px 12px;font-family:var(--d-serif);font-size:13.5px;line-height:1.55;color:var(--d-ink-2)}
/* NormPracticePopover */
.np-h{position:relative;padding:14px 48px 10px 16px}
.np-k{font-size:12.5px;line-height:16px;color:var(--d-ink-3)}
.np-t{margin:4px 0 8px;font-size:15px;line-height:1.4;font-weight:600;color:var(--d-ink)}
.np-b{display:flex;flex-wrap:wrap;gap:6px}
.np-x{position:absolute;right:10px;top:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--d-ink-4)}.np-x svg{width:16px;height:16px}
.np-tabs{display:flex;gap:18px;padding:0 16px;border-bottom:1px solid var(--d-line)}
.tb{margin-bottom:-1px;padding:8px 0 9px;border-bottom:1.5px solid transparent;font-size:13px;color:var(--d-ink-4);transition:color var(--t-micro) var(--e-std),border-color var(--t-micro) var(--e-std)}
.np .tb-t,.np.pr .tb-p{border-color:var(--d-ink);color:var(--d-ink);font-weight:500}.np.pr .tb-t{border-color:transparent;color:var(--d-ink-4);font-weight:400}
.np-p{display:grid;position:relative}
[data-film=hero] .np:not(.pr) .np-pr{position:absolute;left:0;right:0;top:0}  /* the hero never opens «Практика»: the card is as tall as its text */.np-txt,.np-pr{grid-area:1/1;padding:12px 16px 14px;transition:opacity var(--t-ui) var(--e-std)}
.np-txt{font-size:14px;line-height:1.6;color:var(--d-ink)}.np-txt p+p{margin-top:6px}.np-txt b{font-weight:600;color:var(--d-ink-2);margin-right:2px}
.np-pr{opacity:0}.np.pr .np-pr{opacity:1}.np.pr .np-txt{opacity:0}
.np-l{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:12.5px;color:var(--d-ink-3)}.np-l svg{width:10px;height:10px}
.np-f{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.fc{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--d-line);border-radius:999px;font-size:12px;color:var(--d-ink-3)}.fc.on{background:var(--d-pill);border-color:transparent;color:var(--d-ink);font-weight:500}
.np-m{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:12px;line-height:16px;color:var(--d-ink-4)}.np-m b{font-size:11.5px;font-weight:500;color:var(--d-ink-2)}
.np-i .q{margin:8px 0 0;padding-left:10px;border-left-color:rgba(var(--d-acc),.3)}
/* VerifyQuotes popover */
.vp{padding:14px}
.pv-l{margin-bottom:10px;font-size:11.5px;line-height:16px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--d-ink-4)}
.sq-h{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;font-weight:500;color:var(--d-ink)}
.vp ul{display:flex;flex-direction:column;gap:14px}
/* ChatInput */
.comp{position:absolute;left:-9px;right:-9px}
.comp-c{top:36%;transition:opacity var(--t-ui) var(--e-std),transform var(--t-panel) var(--e-move)}
.comp-b{bottom:16px;opacity:0;transform:translateY(12px);transition:opacity var(--t-ui) var(--e-std),transform var(--t-panel) var(--e-out)}
.sent .comp-c{opacity:0;transform:translateY(160px);pointer-events:none;transition:opacity 160ms var(--e-exit),transform var(--t-panel) var(--e-move)}
.sent .comp-b{opacity:1;transform:none;transition-delay:60ms}
.cbox{position:relative;border-radius:20px;background:var(--d-comp);padding:13px 16px 66px;min-height:152px;transition:box-shadow var(--t-micro) var(--e-std)}
.comp-c .cbox{background:var(--d-comp0);min-height:166px;padding-bottom:72px}
.ph0{position:absolute;left:16px;top:13px;font-size:15px;line-height:22px;color:var(--d-ink-5);transition:opacity var(--t-press) var(--e-std)}
.ph-d{opacity:0}.cbox.dm .ph0{opacity:0}.cbox.dm .ph-d{opacity:1}.cbox.ty .ph0,.cbox.ty .ph-d{opacity:0}
.tx{display:block;position:relative;min-height:22px;font-size:15px;line-height:22px;color:var(--d-ink-0)}
.js .tc{opacity:0}.js .tc.on{opacity:1}
/* before v4.js splits the typed text (slow network) show only the placeholder; without JS show only the text — never both */
.js .tx:not(:has(.tc)){visibility:hidden}html:not(.js) .ph0{opacity:0}
.js .comp .tx.clr .tc{opacity:0;transition:none}
.tc.last{position:relative}
.tc.last::after{content:"";position:absolute;right:-1px;top:.18em;bottom:.12em;width:1.5px;background:var(--d-ink);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.c-row{position:absolute;left:13px;right:13px;bottom:13px;display:flex;align-items:center;justify-content:space-between}
.c-tools{display:flex;align-items:center;gap:2px;height:40px;padding:0 6px;border-radius:9px;background:var(--d-tool);color:var(--d-ink-3)}
.c-tools i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:30px;height:30px;border-radius:7px;transition:background-color var(--t-micro) var(--e-std),color var(--t-micro) var(--e-std)}
.c-tools svg{width:14px;height:14px;flex:none}.c-tools i:first-child svg{width:10px}
.cm-doc b{display:none;font-weight:400;font-size:14px;line-height:1;white-space:nowrap}
.cbox.dm .cm-doc{background:var(--d-btn);color:var(--d-btn-ink);padding:0 10px}.cbox.dm .cm-doc b{display:inline}
.send{display:block;width:38px;height:38px;transition:transform var(--t-press) var(--e-std)}.send svg{width:38px;height:38px}
.sd-t{fill:var(--d-send);transition:fill var(--t-micro) var(--e-std)}.sd-a{fill:var(--d-send-a);transition:fill var(--t-micro) var(--e-std)}
.cbox.has .sd-t{fill:var(--d-btn)}.cbox.has .sd-a{fill:var(--d-btn-ink)}
/* DocumentWorkspace (full-window editor) */
.w-doc{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;background:var(--d-bg);opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity var(--t-panel) var(--e-out),transform var(--t-panel) var(--e-out),visibility 0s var(--t-panel)}
.win.doc .w-doc{opacity:1;transform:none;visibility:visible;transition-delay:110ms,110ms,0s}
.w-side{transition:opacity var(--t-ui) var(--e-std)}
.win.doc .w-main,.win.doc .w-side{opacity:0;transition:opacity var(--t-exit) var(--e-exit)}
.e-top{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 24px;flex:none}
.e-back{font-size:13.5px;color:var(--d-ink-3)}.eb-p{display:none;align-items:center;gap:6px}.eb-p svg{width:14px;height:14px}
.win.cmp .eb-f{display:none}.win.cmp .eb-p{display:inline-flex}
.dc-x{transition:transform var(--t-press) var(--e-std)}
.e-acts{display:flex;align-items:center;gap:8px}
.e-b{display:inline-flex;align-items:center;height:32px;padding:0 13px;border:1px solid var(--d-line-2);border-radius:999px;font-size:13.5px;font-weight:500;color:var(--d-ink);white-space:nowrap}
.e-x{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--d-ink-3)}.e-x svg{width:16px;height:16px}
.e-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 24px 14px;flex:none}
.e-t{font-size:18px;line-height:24px;font-weight:600;color:var(--d-ink-0)}
.e-s{margin-top:6px;font-size:12.5px;line-height:16px;color:var(--d-ink-3)}
.e-seg{display:inline-flex;align-items:center;gap:2px;height:30px;padding:2px;border:1px solid var(--d-line);border-radius:999px;font-size:12.5px;color:var(--d-ink-3);flex:none}
.e-seg b,.e-seg span{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-weight:500}.e-seg b{background:var(--d-btn);color:var(--d-btn-ink)}
.e-tb{display:flex;align-items:center;gap:6px;height:46px;padding:0 16px;border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);font-size:13px;color:var(--d-ink-3);flex:none;overflow:hidden}
.e-sel{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 10px;border-radius:6px;white-space:nowrap}.e-sel svg{width:14px;height:14px;color:var(--d-ink-5)}
.e-sep{width:1px;height:20px;background:var(--d-line);margin:0 4px}
.e-tb i{font-style:normal;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:var(--d-ink-2);flex:none}
.e-tb .b{font-weight:700}.e-tb .it{font-style:italic;font-family:var(--d-serif)}.e-tb .un{text-decoration:underline}.e-tb .st{text-decoration:line-through}
.e-ag{margin-left:auto;display:inline-flex;align-items:center;height:32px;padding:0 13px;border:1px solid var(--d-line-2);border-radius:999px;font-size:13.5px;font-weight:500;color:var(--d-ink);white-space:nowrap}
.e-c{flex:1;min-height:0;overflow:hidden;background:var(--d-desk);padding:28px 24px 0}
.paper{transition:transform 1800ms var(--e-move);--pg:1;width:calc(794px * var(--pg));margin:0 auto;min-height:100%;background:var(--d-paper);border:1px solid var(--d-line);border-bottom:0;padding:calc(64px * var(--pg)) calc(94px * var(--pg)) 24px;font-family:var(--d-doc);font-size:calc(18.67px * var(--pg));line-height:1.3;color:var(--d-ink-0)}
.b-to,.b-from{margin-left:50%}
.b-from{margin-top:.7em}
.lb{font-weight:700}
.b-no{margin-top:1em}
.b-title{margin:1.1em 0 .8em;text-align:center;font-weight:700}
.b-p{text-indent:2.2em;text-align:justify}
.b-p+.b-p{margin-top:.25em}
.b-sign{display:flex;justify-content:space-between;margin-top:1.2em}
.r1{background:linear-gradient(var(--d-mark),var(--d-mark)) no-repeat 0 0/0 100%;width:fit-content}
.r1.hl{background-size:100% 100%;transition:background-size 600ms var(--e-out)}
.r1.fd{background-size:100% 100%;background-image:linear-gradient(transparent,transparent);transition:background-image 1200ms var(--e-std)}
.e-f{display:flex;align-items:center;gap:20px;height:52px;padding:0 16px 0 24px;border-top:1px solid var(--d-line);font-size:13px;color:var(--d-ink-3);flex:none;white-space:nowrap}
.e-f .e-sel{padding:0;gap:4px}
.e-r{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--d-ink)}
.e-r>span:first-child{font-size:13.5px;font-weight:500;padding:0 6px}
.e-w{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;background:var(--d-btn);color:var(--d-btn-ink);font-size:13.5px;font-weight:500;transition:transform var(--t-press) var(--e-std)}
/* reveal states */
.js .win .blk{opacity:.001;transform:translateY(8px);transition:opacity var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out)}
.js .win .blk.on{opacity:1;transform:none}
.js .win .m-q,.js .win .m-act,.js .win .m-a2>p,.js .win .dcard,.js .win .src2{opacity:.001;transform:translateY(8px);transition:opacity var(--t-ui) var(--e-out),transform var(--t-panel) var(--e-move)}
.js .win .m-q.on,.js .win .m-act.on,.js .win .m-a2>p.on,.js .win .dcard.on,.js .win .src2.on{opacity:1;transform:none}
.js .win .m-q.fl{transform:var(--flip);opacity:1;transition:none}
.js .win .src{opacity:.001;transition:opacity var(--t-micro) var(--e-std)}.js .win .src.on{opacity:1}
.js .win .src li{opacity:.001;transform:translateY(8px);transition:opacity var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out)}
.js .win .src li.on,.js .win .src2.on li{opacity:1;transform:none}
.js .win .m-st{opacity:.001;transition:opacity var(--t-micro) var(--e-std)}.js .win .m-st.on{opacity:1}
.js .win .ph{opacity:.001;transition:opacity var(--t-micro) var(--e-std)}.js .win .ph.on{opacity:1}
.js .win .ci{opacity:.001;transition:opacity 160ms var(--e-out)}.js .win .ci.on{opacity:1}
.cur{position:absolute;left:0;top:0;width:0;height:0;z-index:9;pointer-events:none;opacity:0;will-change:transform;transition:opacity var(--t-micro) var(--e-std)}
.cur.on{opacity:1}
.cur-z{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--ci,1))}
.cur-a{position:absolute;left:-6px;top:-4px;width:28px;height:28px;overflow:visible;transform-origin:6px 4px}
.cu{fill:#111;stroke:#fff;stroke-width:2.1;stroke-linejoin:round;paint-order:stroke}
.cu-s{fill:rgba(0,0,0,.3)}
.cur-rp{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;background:rgba(var(--d-acc),.16);box-shadow:inset 0 0 0 1px rgba(var(--d-acc),.4);opacity:0;transform:scale(.3)}
/* idle loops stop while the film is paused or off-screen */
.win:not(.run) .m-st i,.win:not(.run) .tc.last::after{animation-play-state:paused}
.win.instant,.win.instant *,.win.instant *::before,.win.instant *::after,.cam.instant{transition:none!important}
.still .cur{display:none}
/* narrow stage (/product, tablets, phones): no sidebar, the chat column fills the window (portal < 1024 px) */
.win.cmp{grid-template-columns:minmax(0,1fr)}.win.cmp .w-side{display:none}
.win.cmp .w-chat{width:min(720px,calc(100% - 48px));margin-left:calc(min(720px,calc(100% - 48px)) / -2)}
.win.cmp .e-acts .e-b,.win.cmp .e-tb .e-sel:nth-child(2),.win.cmp .e-ag,.win.cmp .e-f .e-sel,.win.cmp .dc-x{display:none}
/* same compact layout before JS runs: v4.js adds .cmp when the frame is < 1000 px wide, i.e. viewport < 1080 px
   (2 × 40 px page padding); pre-applying it removes the 768–1079 px layout shift of the hero stage (CLS 0.13–0.29) */
@media (max-width:1079px){.win{grid-template-columns:minmax(0,1fr)}.win .w-side{display:none}
  .win .w-chat{width:min(720px,calc(100% - 48px));margin-left:calc(min(720px,calc(100% - 48px)) / -2)}
  .win .e-acts .e-b,.win .e-tb .e-sel:nth-child(2),.win .e-ag,.win .e-f .e-sel,.win .dc-x{display:none}.win .eb-f{display:none}.win .eb-p{display:inline-flex}}

/* closing card (founder B-F12): the window steps back under a veil, the mark draws, one clear action */
.frame.ended .win{transform:scale(.985)}
.endc{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;
  background:color-mix(in srgb,var(--d-bg) 80%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity 600ms var(--e-std)}
.endc[hidden]{display:none}.endc.on{opacity:1}.endc.out{pointer-events:none}.endc.on.out .endc-in{opacity:0;transition:opacity var(--t-micro) var(--e-exit)}.endc.on.gone{opacity:0;transition:opacity var(--t-ui) var(--e-std)}
.endc-in{display:flex;flex-direction:column;align-items:center;max-width:560px}
.endc-m{display:flex;align-items:center;gap:14px}
.endc .cube-e{width:40px;stroke-width:5}
.endc-w{font-size:28px;line-height:30px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.endc-t{margin-top:18px;font-size:21px;line-height:30px;font-weight:500;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.endc-a{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px}
.endc-r{height:44px;padding:0 2px;border:0;background:none;cursor:pointer;font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line-2);text-underline-offset:5px;transition:color var(--t-micro) var(--e-std),text-decoration-color var(--t-micro) var(--e-std)}
@media (hover:hover){.endc-r:hover{color:var(--ink);text-decoration-color:currentColor}}
.js:not(.calm) .endc .cube-e path{stroke-dashoffset:1}
.js:not(.calm) .endc.on .cube-e path{stroke-dashoffset:0;transition:stroke-dashoffset 700ms var(--e-move);transition-delay:calc(200ms + var(--i) * 60ms)}
.js:not(.calm) .endc .endc-w,.js:not(.calm) .endc .endc-t,.js:not(.calm) .endc .endc-a{opacity:0;transform:translateY(12px)}
.js:not(.calm) .endc.on .endc-w,.js:not(.calm) .endc.on .endc-t,.js:not(.calm) .endc.on .endc-a{opacity:1;transform:none;transition:opacity 600ms var(--e-out),transform 700ms var(--e-out)}
.endc.on .endc-w{transition-delay:420ms!important}.endc.on .endc-t{transition-delay:560ms!important}.endc.on .endc-a{transition-delay:720ms!important}

/* rail */
/* 04.10 17:35: a lighter rail: hairline progress, quieter labels, a small borderless pause */
.rail{display:flex;align-items:center;gap:20px;margin-top:16px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;flex:1}
.step{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:0;border:0;background:none;cursor:pointer;font-size:13px;line-height:18px;color:var(--ink-3);text-align:left;min-height:32px;transition:color var(--t-micro) var(--e-std)}
.step i{display:block;width:100%;height:1px;background:var(--line);position:relative;overflow:hidden}
.step b{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 0}
.step[aria-current=step]{color:var(--ink)}.step.done{color:var(--ink-2)}
.step[aria-current=step] b{background:var(--ink)}
@media (hover:hover){.step:hover{color:var(--ink)}}
.pause{flex:none;width:36px;height:36px;border:1px solid transparent;border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color var(--t-micro) var(--e-std)}
@media (hover:hover){.pause:hover{border-color:var(--line-2)}}.pause:focus-visible{border-color:var(--ink)}.pause[hidden]{display:none}
.pause svg{width:13px;height:13px;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pause .i-play{display:none;fill:var(--ink-2);stroke:none}.pause.paused .i-play{display:block}.pause.paused .i-pause{display:none}.pause .i-rep{display:none}.pause.rep .i-rep{display:block}.pause.rep .i-play,.pause.rep .i-pause{display:none}  /* the film has ended: the button replays it, so it shows a replay mark */
/* realclick 05.10: touch screens get 44 px hit areas on the small controls (rail steps 32 px, pause 36 px, «Докладніше» 20 px);
   the boxes are invisible, nothing moves */
@media (pointer:coarse){.step,.pause,.dd summary{position:relative}.step::before,.pause::before,.dd summary::before{content:"";position:absolute}
  .step::before{inset:-6px -5px}.pause::before{inset:-4px}.dd summary::before{inset:-12px -10px}}

/* per-index custom properties as classes (CSP: no inline style attributes) */
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}.i7{--i:7}.i8{--i:8}.i9{--i:9}.i10{--i:10}.i11{--i:11}.v0{--v:0}.v1{--v:1}.v2{--v:2}.v3{--v:3}.v4{--v:4}.v5{--v:5}.v6{--v:6}.v7{--v:7}.v8{--v:8}.v9{--v:9}

/* sections */
section{position:relative}
.outc,.num,.story,.sup,.lim,.docs,.tline,.contact,.sec{padding:var(--st) 0 var(--sb)}
.outc .h2{max-width:14ch}
.o-l{margin-top:72px}
.o-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:32px 0 36px;position:relative;align-items:start}
.o-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 0}
.o-row:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.o-n{grid-column:1/2;padding-top:6px;font-size:14px;line-height:20px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.o-h{grid-column:2/7;font-size:24px;line-height:30px;font-weight:500;letter-spacing:-.012em}
.o-t{grid-column:7/11;padding-top:1px;color:var(--ink-2)}
.o-m{grid-column:11/13;justify-self:end;padding-top:3px;font-size:15px}
.o-n,.o-h{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}.mi{display:inline-block}
.js:not(.calm) .o-row.pre::before{transform:scaleX(0)}
.js:not(.calm) .o-row.pre .mi{transform:translateY(110%)}
.js:not(.calm) .o-row.pre .o-t,.js:not(.calm) .o-row.pre .o-m{opacity:0}
.o-row.in::before{transform:none;transition:transform var(--t-panel) var(--e-out)}
.o-row.in .mi{transform:none;transition:transform 600ms var(--e-out) 80ms}
.o-row.in .o-n .mi{transition-delay:0ms}
.o-row.in .o-t,.o-row.in .o-m{opacity:1;transition:opacity 600ms var(--e-out) 200ms}
.o-n{display:block}
.num-h{grid-column:1/7}
.num-h .meta{margin-top:20px;max-width:34ch}
.num-l{grid-column:7/13}
.n-row{display:grid;grid-template-columns:4.7em minmax(0,1fr);column-gap:var(--gap);align-items:baseline;padding:22px 0;border-top:1px solid var(--line);font-size:64px}
.n-row:last-child{border-bottom:1px solid var(--line)}
.nm{font-size:64px;line-height:1;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.n-row dd{font-size:18px}
.roll{display:inline-block}
.dg{position:relative;display:inline-block;clip-path:inset(0 -4px)}
.dg>i{font-style:normal;visibility:hidden}
.dc{position:absolute;left:0;top:0;display:flex;flex-direction:column;transform:translateY(calc(var(--v) * -1em))}
.dc span{display:block;height:1em;line-height:1}
.sp{display:inline-block;width:.18em}
.js:not(.calm) [data-roll].pre .dc{transform:none}.js:not(.calm) [data-roll].pre .roll{opacity:0}
.js:not(.calm) [data-roll].in .roll{opacity:1;transition:opacity var(--t-micro) var(--e-std)}
.js:not(.calm) [data-roll].in .dc{transform:translateY(calc(var(--v) * -1em));transition:transform var(--t-title) var(--e-out);transition-delay:calc(var(--r,0) * 120ms + var(--i) * 40ms)}
.n-row:nth-child(2){--r:1}.n-row:nth-child(3){--r:2}.n-row:nth-child(4){--r:3}
.js:not(.calm) [data-roll].pre dd{opacity:0}
.js:not(.calm) [data-roll].in dd{opacity:1;transition:opacity var(--t-ui) var(--e-out) 200ms}
.n-l{display:block;font-size:17px;line-height:26px}
.n-d{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.num-f{grid-column:7/13;margin-top:16px;font-size:13px}
/* privacy: the only inverted band; curtain unclips from the centre line, scrubbed by scroll */
.priv{background:var(--band);color:var(--band-ink);padding:var(--st) 0 var(--sb);border-top:1px solid var(--band-rule);border-bottom:1px solid var(--band-rule)}
@media (min-width:1024px){.js:not(.calm):not(.lite) .priv{clip-path:inset(calc((1 - var(--p,1)) * 50%) 0)}}
.priv-h{grid-column:1/6}
.priv-h .more{margin-top:28px;color:var(--band-ink)}
.priv-lead{grid-column:7/13;font-size:20px;line-height:30px;color:var(--band-ink-2)}
.priv .vault{grid-column:1/-1}
/* security infographic (founder 04.10): browser → servers → logs → model, one dot travels the rail, each station plays once */
.vault{--v-ink:var(--ink);--v-ink-2:var(--ink-2);--v-ink-3:var(--ink-3);--v-line:var(--line);--v-plate:var(--plate);--v-bub:var(--paper);--v-acc:#1f5fa8;margin-top:64px}
.priv .vault{--v-ink:var(--band-ink);--v-ink-2:var(--band-ink-2);--v-ink-3:#8c8c8c;--v-line:#2a2a2a;--v-plate:#111;--v-bub:#1b1b1b;--v-acc:#8fbdf0}
@media (prefers-color-scheme:dark){.vault{--v-acc:#8fbdf0;--v-bub:#181818}}
/* dark: the privacy band gets its own raised surface (judge r6), token mapping only: band above paper, plates above band */
@media (prefers-color-scheme:dark){.priv{--band:#151515;--band-rule:#262626}.priv .vault{--v-plate:#1c1c1c;--v-bub:#232323;--v-line:#2e2e2e}}
.vl-rail{position:relative;height:9px;margin-bottom:28px;container-type:inline-size}
.vl-rail::before,.vl-rail::after{content:"";position:absolute;left:4px;right:calc(25% - var(--gap) * .75);top:4px;height:1px;background:var(--v-line)}
.vl-rail::after{background:var(--v-ink);transform-origin:0 0;transform:scaleX(calc(var(--k,0) / 3));transition:transform 1100ms var(--e-move)}
.vl-dot{position:absolute;left:0;top:0;width:9px;height:9px;transform:translateX(calc(var(--k,0) * (25cqw + var(--gap) / 4)));transition:transform 1100ms var(--e-move)}
.vl-dot::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--v-ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--v-ink) 12%,transparent)}
.vl-s{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
.vs{display:flex;flex-direction:column;min-width:0;transition:opacity 600ms var(--e-std)}
.js:not(.calm) .vs .va{transition:border-color 600ms var(--e-std),box-shadow 600ms var(--e-std)}
.vault.a0 .i0 .va,.vault.a1 .i1 .va,.vault.a2 .i2 .va,.vault.a3 .i3 .va{border-color:color-mix(in srgb,var(--v-ink) 42%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--v-ink) 6%,transparent)}
.vs-n{transition:color 600ms var(--e-std)}.vault.a0 .i0 .vs-n,.vault.a1 .i1 .vs-n,.vault.a2 .i2 .vs-n,.vault.a3 .i3 .vs-n{color:var(--v-ink)}
/* without JS the infographic shows its composed final state */
html:not(.js) .va-p{opacity:0}html:not(.js) .vk circle,html:not(.js) .vk path{stroke-dashoffset:0}
html:not(.js) .vlk{opacity:1;stroke:var(--v-acc)}html:not(.js) .vlk-s{transform:none}html:not(.js) .va-done{opacity:1}
.vs-k{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:18px;color:var(--v-ink-3)}
.vs-n{font-variant-numeric:tabular-nums}
.vs-h{margin-top:12px;font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.008em;color:var(--v-ink)}
.vl-band .vs-h{flex:1}
.vs-t{flex:1;margin-top:8px;font-size:15px;line-height:23px;color:var(--v-ink-2)}
.va{position:relative;margin-top:22px;min-height:100px;padding:14px;border:1px solid var(--v-line);border-radius:10px;background:var(--v-plate);overflow:hidden;font-size:13px;line-height:18px;color:var(--v-ink-2)}
.va-c,.va-r b,.va-l{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:18px;font-weight:400}
.va-c{color:var(--v-acc);word-break:break-all}
.va-1{display:flex;align-items:center;gap:12px}
.va-k{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--v-line);color:var(--v-ink)}
.vk{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.vk circle,.vk path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 800ms var(--e-move)}
.vault.v0 .vk circle,.vault.v0 .vk path{stroke-dashoffset:0}
.va-b{position:relative;display:grid;flex:1;min-width:0;padding:8px 30px 8px 10px;border-radius:8px;background:var(--v-bub);border:1px solid var(--v-line)}
.va-p,.va-b .va-c{grid-area:1/1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.va-p{color:var(--v-ink);transition:opacity 260ms var(--e-std)}
.vault.v1 .va-p{opacity:0}
.vlk{position:absolute;right:9px;top:50%;width:15px;height:15px;margin-top:-8px;fill:none;stroke:var(--v-ink-3);stroke-width:1.4;opacity:0;transition:opacity var(--t-ui) var(--e-std)}
.vlk-s{transform:translateY(-2.5px);transition:transform 380ms var(--e-tick)}
.vault.v1 .vlk{opacity:1;stroke:var(--v-acc)}.vault.v1 .vlk-s{transform:none}
.va-r{display:flex;gap:12px}.va-r+.va-r{margin-top:4px}
.va-r span{flex:none;width:40px;color:var(--v-ink-3)}
.va-r b{min-width:0;white-space:nowrap;overflow:hidden;color:var(--v-ink-2)}.va-z b{color:var(--v-acc)}
.va-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.va-l+.va-l{margin-top:6px}.va-l span{color:var(--v-ink-3)}.va-l.va-z{color:var(--v-acc)}
.va-m{display:flex;align-items:center;gap:10px;color:var(--v-ink)}
.va-t{position:relative;flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--v-acc)}
.va-t::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--v-acc);transform:scale(0);transition:transform 400ms var(--e-out)}
.vault.v4 .va-t::after{transform:scale(1)}.vault.v5 .va-t::after{transform:scale(0)}
.va-x{display:grid;margin-top:10px}
.va-mp,.va-done{grid-area:1/1;transition:opacity 400ms var(--e-std),filter 400ms var(--e-std)}
.va-mp{color:var(--v-ink);opacity:0}.vault.v4 .va-mp{opacity:1}.vault.v5 .va-mp{opacity:0;filter:blur(3px)}
.va-done{color:var(--v-acc);opacity:0}.vault.v5 .va-done{opacity:1}
.js:not(.calm) .vault .va-2 .va-r,.js:not(.calm) .vault .va-3 .va-l{opacity:0;transform:translateY(4px);transition:opacity 320ms var(--e-out),transform 420ms var(--e-out)}
.js:not(.calm) .vault.v2 .va-2 .va-r,.js:not(.calm) .vault.v3 .va-3 .va-l{opacity:1;transform:none}
.vault .va-r:nth-child(2),.vault .va-l:nth-child(2){transition-delay:110ms}.vault .va-r:nth-child(3){transition-delay:220ms}
.vl-lim{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:56px;padding-top:24px;border-top:1px solid var(--v-line)}
.vl-lh{grid-column:1/4;font-size:15px;line-height:22px;font-weight:500;color:var(--v-ink)}
.vl-lim ul{grid-column:4/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);font-size:14px;line-height:21px;color:var(--v-ink-2)}
.vsec{padding:112px 0 0}
@media (min-width:1024px){.p-sec .intro{padding-top:72px}.p-sec .vsec{padding-top:48px}.p-sec .vsec-h{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--gap);align-items:end}.p-sec .vsec-h .lead{margin-top:0}}
.vsec-h .h2{max-width:16ch}.vsec-h .lead{margin-top:24px;max-width:48ch}
.story-h{grid-column:1/6}
.story-h .more{margin-top:28px}
.story-t{grid-column:7/13;display:flex;flex-direction:column;gap:12px;font-size:20px;line-height:30px;color:var(--ink-2)}
.mini{grid-column:1/-1;margin-top:88px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;padding-top:28px}
.mini::before,.mini::after{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:var(--line)}
.mini::after{background:var(--ink);transform-origin:0 0;transform:scaleX(var(--p,1))}
.mini li{position:relative;font-size:14px;line-height:20px;color:var(--ink-3);padding-right:16px}
.mini span{display:block;margin-top:4px;color:var(--ink-2)}
.mini i{position:absolute;left:0;top:-28px;width:7px;height:7px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);z-index:1;transition:background-color var(--t-micro) var(--e-std)}
.mini li.on i{background:var(--ink)}
.sup{padding-top:0}
.sup-h{grid-column:1/-1;font-size:14px;line-height:20px;font-weight:500;color:var(--ink-3)}
.sup-l{grid-column:1/-1;margin-top:24px}
/* supporters wall (B-F19): eight official marks in a 4 x 2 hairline grid (2 x 4 under 720 px). One 72 px mark zone per cell:
   every mark is centred on the same line, captions sit on one baseline. Marks are the brands' own files at their own colours
   (light file / official dark file); each is sized for equal visible area (--h = image box height, --k = breakpoint scale). */
.sw{--k:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.sw-i{min-width:0;border-bottom:1px solid var(--line)}
.sw-i:not(:nth-child(4n)){border-right:1px solid var(--line)}
.sw-a{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;height:100%;padding:32px 20px 26px;text-align:center;transition:background-color var(--t-ui) var(--e-std)}
.sw-a:focus-visible{outline-offset:-2px}
.sw-m{display:flex;align-items:center;justify-content:center;width:100%;height:calc(72px * var(--k));transition:transform 420ms var(--e-out)}
.sw-m b{font-size:18px;line-height:22px;font-weight:600;letter-spacing:-.014em;color:var(--ink)}
.sw-c{min-height:36px;text-wrap:balance;font-size:13px;line-height:18px;color:var(--ink-3);transition:color var(--t-micro) var(--e-std)}
.sw-x{position:absolute;right:14px;top:14px;width:12px;height:12px;color:var(--ink-3);opacity:0;transform:translate(-4px,4px);transition:opacity var(--t-micro) var(--e-std),transform var(--t-ui) var(--e-out)}
.sw-x svg{width:12px;height:12px}
.sw-c .nw{white-space:nowrap}
@media (hover:hover){.sw-a:hover{background:var(--plate)}.sw-a:hover .sw-x{opacity:1;transform:none}.sw-a:hover .sw-c{color:var(--ink-2)}.sw-a:hover .sw-m{transform:translateY(-2px)}}
.bdg,.bdg img{display:block}
.bdg img{width:auto;max-width:none;height:calc(var(--h) * var(--k))}
.bdg-aws{--h:34px}.bdg-gfs{--h:18px}.bdg-cf{--h:33px}.bdg-mdb{--h:27px}.bdg-ant{--h:16px}.bdg-skh{--h:17px}
.bdg-oai{--h:55px}.bdg-oai img{transform:translateY(calc(-2.4px * var(--k)))} /* OpenAI's file carries its clear space; visible mark 23 px, centred */
.bdg-elsa{--h:83px} /* 50 px visible + the «e» height of clear space on every side (inside the file) */
@media (prefers-color-scheme:dark){.bdg-cf{--h:21px}}
.fin{padding:var(--st) 0;border-top:1px solid var(--line)}
.fin-l{grid-column:1/8}
.fin .sub{margin-top:20px}
.fin-a{margin-top:36px}
.fin-r{grid-column:9/13;display:flex;align-items:center;justify-content:center}
.cube-d{width:min(160px,100%);height:auto;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.cube-d path{stroke-dasharray:1;stroke-dashoffset:0}
.js:not(.calm) [data-draw]:not(.in) .cube-d path{stroke-dashoffset:1}
.js:not(.calm) [data-draw].in .cube-d path{transition:stroke-dashoffset 700ms var(--e-move);transition-delay:calc(var(--i) * 60ms)}
.js:not(.calm) .logo.draw .cube-s{stroke-dasharray:1;animation:draw 700ms var(--e-out) both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* «Для команд» (founder B-F15) */
.team{padding:var(--st) 0 var(--sb)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;margin-bottom:20px;border:1px solid var(--line-2);border-radius:999px;font-size:12.5px;line-height:1;font-weight:500;color:var(--ink-2)}
.team-h{grid-column:1/6}
.team-lead{margin-top:24px;font-size:20px;line-height:30px;color:var(--ink-2)}
.team-a{margin-top:36px}
.team-r{grid-column:7/13}
.team-l li{padding:24px 0;border-top:1px solid var(--line)}
.team-l h3{font-size:20px;line-height:1.3;font-weight:500}
.team-l p{margin-top:8px;color:var(--ink-2);font-size:17px;line-height:26px}
.team-p{padding:22px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);font-size:17px;line-height:26px;font-weight:500;color:var(--ink)}
.team-n{margin-top:16px}
.seats{margin-top:44px}
.seats ol{display:flex;gap:10px}
.seats li{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;font-weight:500}
.st-on{background:var(--ink);color:var(--paper)}.st-inv{border:1.5px dashed var(--ink-3)}.st-free{border:1px solid var(--line-2)}
.seats p{margin-top:14px;font-size:14px;line-height:20px;color:var(--ink-3)}
.js:not(.calm) [data-seats]:not(.in) li{opacity:0;transform:scale(.6)}
.js:not(.calm) [data-seats].in li{transition:opacity 400ms var(--e-out),transform 560ms var(--e-tick);transition-delay:calc(var(--i) * 90ms)}
.js:not(.calm) [data-seats].in .st-inv{animation:seat 1.6s var(--e-std) 900ms 2}
@keyframes seat{50%{border-color:var(--ink)}}
.team-s .team-lead{margin-top:0}.team-s .team-p{margin-top:24px}.team-s .meta{margin-top:16px}.team-s .team-a{margin-top:24px}
.f-st{scroll-margin-bottom:24px}  /* realclick 05.10: brought into view after a failed send (v4.js), with air under it */
.form .fld-s,.form .fld-t{display:none}.l-t{display:none}
.form:has(input[name=applicant][value=team]:checked) :is(.fld-s,.fld-t){display:flex}
.form:has(input[name=applicant][value=team]:checked) .l-1{display:none}
.form:has(input[name=applicant][value=team]:checked) .l-t{display:inline}
.fld-s input{width:120px}

/* footer */
.foot{view-transition-name:footer;padding:72px 0 calc(48px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:15px;line-height:22px}
.f-b{grid-column:1/5}.f-b .brand{height:auto}.f-b p{margin-top:16px;color:var(--ink-3);max-width:34ch}
.f-c{grid-column:span 2;display:flex;flex-direction:column;gap:8px;color:var(--ink-2)}
.f-c a{width:fit-content;min-height:24px;display:inline-flex;align-items:center}
/* realclick 05.10 (O-14): on touch screens a footer link's hit area covers its whole row (24 px + the 8 px gap, 38 px for the last
   one), invisible, nothing moves; 44 px would need wider rows (a look change, left to the founder) */
@media (pointer:coarse){.f-c a{position:relative}.f-c a::before{content:"";position:absolute;inset:-4px -8px}.f-c a:last-child::before{bottom:-10px}}
.f-l{grid-column:10/13}
.f-c:nth-of-type(1){grid-column:6/8}.f-c:nth-of-type(2){grid-column:8/10}
.f-h{font-size:13px;line-height:18px;color:var(--ink-3);margin-bottom:6px}
.f-n{grid-column:1/-1;margin-top:40px;font-size:13px;line-height:18px;color:var(--ink-3)}.f-n+.f-x{margin-top:24px}  /* /en: one «in Ukrainian» note */
.nf-k{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px}  /* design review 13.10: 404, three ways on */
.f-x{grid-column:1/-1;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;line-height:18px;color:var(--ink-3)}
.f-tm{grid-column:1/-1;margin-top:8px;font-size:12px;line-height:17px;color:var(--ink-3)}

/* inner pages */
.intro{padding:120px 0 0}
.intro .h1{grid-column:1/10}
.intro .lead{grid-column:1/8;margin-top:32px}
.walk{padding:120px 0 40px}
.wk-l{grid-column:1/6}
.wk{min-height:80vh;padding:24px 0 0;position:relative}
.wk:last-child{min-height:100vh}
.wk-n{display:block;font-size:14px;line-height:20px;color:var(--ink-3);font-variant-numeric:tabular-nums;transition:color var(--t-micro) var(--e-std)}
.wk-h{margin-top:12px;font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-.018em;color:var(--ink-3);transition:color var(--t-ui) var(--e-std)}
.wk p{margin-top:16px;color:var(--ink-3);max-width:40ch;transition:color var(--t-ui) var(--e-std)}
.wk.act .wk-n,.wk.act .wk-h{color:var(--ink)}.wk.act p{color:var(--ink-2)}
.wk-r{grid-column:6/13;position:relative}
.wk-stick{position:sticky;top:96px;height:calc(100vh - 160px);min-height:560px;display:flex;flex-direction:column;justify-content:center}
.wk-p{position:absolute;left:-20px;top:0;bottom:0;width:1px;background:var(--line)}
.wk-p i{position:absolute;inset:0;background:var(--ink);transform-origin:0 0;transform:scaleY(var(--p,0))}
.wk-r .frame{height:562px}
.wk-slot{display:none}
.lim-h{grid-column:1/6}
.lim-l{grid-column:7/13}
.lim-l li,.sx{padding:28px 0;border-top:1px solid var(--line)}
.lim-l li:last-child,.sx:last-child{border-bottom:1px solid var(--line)}
.lim-l h3{font-size:20px;line-height:1.3;font-weight:500}
.lim-l p{margin-top:8px;color:var(--ink-2)}
.sec{padding-top:96px}
.sx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline}
.sx .h3{grid-column:1/5;font-size:24px;line-height:1.25}
.sx p{grid-column:6/12;color:var(--ink-2)}
.sx .more{margin-left:4px;font-size:16px}
.docs-h{grid-column:1/6}
.docs-l{grid-column:7/13;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.docs-l .meta{margin-top:12px}
.ab-h{grid-column:1/7}
.lead-q{grid-column:7/13;font-size:26px;line-height:1.36;font-weight:500;letter-spacing:-.012em;color:var(--ink);align-self:end}
.lead-q p{text-wrap:pretty;text-indent:-.42em}.lead-q p::before{content:"«"}.lead-q p::after{content:"»"}
.lead-q footer{margin-top:24px;font-size:15px;line-height:22px;font-weight:400;letter-spacing:0;color:var(--ink-3)}.lead-q footer b{display:block;font-weight:600;color:var(--ink)}
.lead-q.pending{border:1px dashed var(--line-2);border-radius:10px;padding:20px 24px}
.pend{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.tl{margin-top:72px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);row-gap:56px;position:relative}
.tl li::before,.tl li::after{content:"";position:absolute;left:0;right:calc(var(--gap) * -1);top:3px;height:1px;background:var(--line)}
.tl li:nth-child(4n)::before,.tl li:nth-child(4n)::after,.tl li:last-child::before,.tl li:last-child::after{right:0}
.tl li::after{background:var(--ink);transform-origin:0 0;transform:scaleX(0);transition:transform var(--t-panel) var(--e-out)}.tl li.on::after{transform:none}
.tl li{position:relative;padding-top:32px;padding-right:8px;font-size:16px;line-height:24px}
.tl i{position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);z-index:1;transition:background-color var(--t-micro) var(--e-std),border-color var(--t-micro) var(--e-std)}
.tl li.on i{background:var(--ink);border-color:var(--ink)}
.tl time{display:block;font-size:13px;line-height:18px;color:var(--ink-3);clip-path:inset(0 0 -.2em)}
.tl p{margin-top:6px;color:var(--ink-2)}
.js:not(.calm) .tl li:not(.on) time,.js:not(.calm) .tl li:not(.on) p{opacity:0;transform:translateY(8px)}
.tl li.on time,.tl li.on p{opacity:1;transform:none;transition:opacity var(--t-panel) var(--e-out),transform var(--t-panel) var(--e-out)}
.sup-p{padding-top:var(--st)}
.sup-p .sup-h{grid-column:1/-1;font-size:var(--h2);line-height:1.08;font-weight:600;letter-spacing:-.022em;color:var(--ink);padding:0}
.sup-p .sup-l{grid-column:1/-1;margin-top:48px}
.ct-h{grid-column:1/6}
.ct-l{grid-column:7/13;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.big{font-size:32px;line-height:1.2;font-weight:500;letter-spacing:-.02em}
/* apply */
.apply{padding:96px 0 var(--sb)}
.ap-l{grid-column:1/6}
.ap-h{font-size:56px}
.ap-l .lead{margin-top:24px}
.nx-h{margin-top:56px;font-size:15px;line-height:20px;font-weight:500;color:var(--ink-3)}
.nx{margin-top:16px;counter-reset:n}
.nx li{display:grid;grid-template-columns:32px 1fr;padding:14px 0;border-top:1px solid var(--line);font-size:17px;line-height:26px}
.nx li:last-child{border-bottom:1px solid var(--line)}
.nx-n{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fqs{margin-top:16px}
.fq{border-top:1px solid var(--line)}.fq:last-child{border-bottom:1px solid var(--line)}
.fq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;cursor:pointer;list-style:none;font-size:17px;line-height:24px;font-weight:500}
.fq summary::-webkit-details-marker{display:none}
.fq summary i{position:relative;width:12px;height:12px;flex:none}
.fq summary i::before,.fq summary i::after{content:"";position:absolute;left:0;top:5.25px;width:12px;height:1.5px;background:var(--ink);transition:transform var(--t-ui) var(--e-move)}
.fq summary i::after{transform:rotate(90deg)}
.fq[open] summary i::after{transform:rotate(0)}
.fq-a{padding:0 0 16px;color:var(--ink-2);font-size:16px;line-height:25px}
.fq-a .more{font-size:15px}
.ap-r{grid-column:7/13}
.card{border:1px solid var(--line);border-radius:14px;padding:40px;background:var(--paper)}
.ap-r .card{position:sticky;top:96px}
.form{display:flex;flex-direction:column;gap:24px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label,.fld legend{font-size:15px;line-height:20px;font-weight:500}
.fld legend{margin-bottom:10px}
.opt{color:var(--ink-3);font-weight:400}
.fld input[type=text],.fld input[type=email],.fld input[type=number]{height:52px;padding:0 16px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);font-size:17px;outline:0;transition:border-color var(--t-micro) var(--e-std),box-shadow var(--t-micro) var(--e-std)}
@media (hover:hover){.fld input:hover{border-color:var(--ink-3)}}
.fld input:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--blue)}
.fld input[aria-invalid=true]{border-color:#b42318}
.hint{font-size:13px;line-height:18px;color:var(--ink-3)}
.err-w{display:grid;grid-template-rows:0fr;transition:grid-template-rows 220ms var(--e-out)}
.err-w.on{grid-template-rows:1fr}
.err{overflow:hidden;min-height:0;font-size:14px;line-height:20px;color:#b42318}
.sel{position:relative}
.sel select{width:100%;height:52px;padding:0 44px 0 16px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:17px;line-height:normal;outline:0;cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color var(--t-micro) var(--e-std),box-shadow var(--t-micro) var(--e-std)}
.sel select:has(option[value=""]:checked){color:var(--ink-3)}
@media (max-width:400px){.sel select{padding-right:40px;font-size:16px}.sel-i{right:14px}}
.sel option{color:var(--ink);background:var(--paper)}
.sel-i{position:absolute;right:16px;top:50%;width:14px;height:14px;margin-top:-7px;color:var(--ink-3);pointer-events:none}
@media (hover:hover){.sel select:hover{border-color:var(--ink-3)}}
.sel select:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--blue)}
.sel select[aria-invalid=true]{border-color:#b42318}
@media (prefers-color-scheme:dark){.err{color:#f97066}.fld input[aria-invalid=true],.sel select[aria-invalid=true]{border-color:#f97066}}
.rls{display:flex;flex-wrap:wrap;gap:8px}
.rl{position:relative}
.rl input{position:absolute;opacity:0;width:1px;height:1px}
.rl span{display:inline-flex;align-items:center;gap:0;height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;font-size:15px;cursor:pointer;transition:background-color var(--t-press) var(--e-std),color var(--t-press) var(--e-std),border-color var(--t-press) var(--e-std),gap var(--t-micro) var(--e-std)}
.rl .tick{width:0;height:14px;transition:width var(--t-micro) var(--e-std)}
.rl .tick path{stroke-dashoffset:1}
@media (hover:hover){.rl span:hover{border-color:var(--ink)}}
.rl input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper);gap:6px}
.rl input:checked+span .tick{width:14px}
.rl input:checked+span .tick path{stroke-dashoffset:0;transition:stroke-dashoffset 200ms var(--e-out)}
.rl input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
.cf-turnstile:empty{display:none}
/* realclick 05.10 (D9): below 340 px the card is narrower than the Turnstile box (300 px minimum): it spreads into the card padding,
   centred, so the page never scrolls sideways (WCAG 1.4.10) */
.cf-turnstile{margin-inline:min(0px,calc((100% - 300px) / 2))}
/* realclick 05.10 (O-09): below 1024 px «Що далі» and the FAQ come before the form in the markup but are shown after it, so Chrome
   anchored the scroll to them and, when the Turnstile box opened under the button, scrolled the button 96 px up under the finger */
@media (max-width:1023px){.ap-l .nx-h,.ap-l .nx,.ap-l .nxt,.ap-l .nx-t,.ap-l .fqs{overflow-anchor:none}}
.f-act{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
/* retest 05.10 (R-03): the Turnstile box sits under the consent line (O-09); the resting card keeps 48 px above the button.
   QA 06.10 (L1): the box (0 px until Cloudflare asks for a tick, then 73 px, often 10 s after load) pushed the footer down
   (desktop CLS 0.20–0.25). .ts-slot always holds that height, 24 px under the consent line, so nothing below it moves
   whether the box stays hidden, fails or asks for a tick; taller content overflows the slot instead of moving the page */
.form>.f-act{margin-top:24px}.ts-slot{height:73px}
.f-act .btn{min-width:220px}
.consent{font-size:13px;line-height:19px;color:var(--ink-3)}
.f-st{font-size:15px;line-height:22px}.f-st:empty{display:none}.f-st.bad{color:#b42318}
.thanks,.nf{padding:120px 0 var(--sb)}
.th-c{grid-column:3/11;text-align:left;padding:56px}
svg.ok{width:48px;height:48px;color:var(--ink)}
svg.ok path{stroke-dasharray:1;stroke-dashoffset:0}
.js:not(.calm) svg.ok path{animation:draw 400ms var(--e-tick) 200ms both}
.th-h{margin-top:28px;font-size:56px}
.th-c .lead{margin-top:20px}
.th-a{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.th-test{margin-top:28px}
.nf-l{grid-column:1/8}.nf-l .h1{margin-top:12px}.nf-l .lead{margin-top:24px}
.nf-r{grid-column:9/13;display:flex;align-items:center;justify-content:center}
/* legal */
.legal{padding:72px 0 var(--sb)}
.lg{grid-column:3/11;font-size:17px;line-height:28px;color:var(--ink-2)}
.lg-k{margin-bottom:32px}.lg-k .more{font-size:15px}
.lg .lg-h{font-size:48px;color:var(--ink)}
.lg>.meta{margin-top:16px}
.lg .draft{margin-top:12px;font-size:14px;line-height:20px;color:var(--ink-3);border-left:2px solid var(--line-2);padding-left:12px}
.lg .toc{margin-top:40px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;font-size:15px;line-height:22px}
@media (hover:hover){.lg .toc a:hover{color:var(--ink)}}
.lg h2{margin-top:56px;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:var(--ink);scroll-margin-top:96px}
.lg h3{margin-top:28px;font-size:18px;line-height:1.4;font-weight:600;color:var(--ink)}
.lg h2.lg-s{margin-top:28px;font-size:18px;line-height:1.4;letter-spacing:0}  /* a one-section page's heading: h2 in the outline, h3 on the page */
.lg p,.lg ul,.lg ol,.lg table{margin-top:14px}
.lg ul,.lg ol{padding-left:22px}.lg ul{list-style:disc}.lg ol{list-style:decimal}.lg li+li{margin-top:6px}
.lg a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.lg .lg-k a{text-decoration:none}
.lg table{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.lg th,.lg td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);min-width:96px}
.lg th{color:var(--ink);font-weight:500}
/* UIFIX-01: a cookie name (v4.py ck_cells) breaks only at its <wbr> (after _ - ,), never inside a word; looks like the cell text */
.lg td code.ck{font:inherit;color:inherit;overflow-wrap:normal;word-break:normal;white-space:normal}
@media (min-width:768px){.lg td code.ck wbr{display:none}}  /* wide screens keep the old column widths (no extra break points) */
.lg strong{color:var(--ink);font-weight:600}

/* page transitions (MPA): header stays, content moves 8 px, exit 65 % of enter */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 160ms var(--e-exit) both}
::view-transition-new(root){animation:vt-in 320ms var(--e-out) both}
::view-transition-group(apply),::view-transition-group(stage),::view-transition-group(nav-mark){animation-duration:var(--t-panel);animation-timing-function:var(--e-move)}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* responsive */
@media (max-width:1279px){:root{--pad:40px;--st:128px;--sb:96px;--h1:56px;--h2:40px}
  .wk-r .frame{height:542px}
  .tl{grid-template-columns:1fr;row-gap:28px;padding:0 0 0 28px}.tl li{padding-top:0}
  .tl li::before,.tl li::after{left:-25px;right:auto;top:6px;bottom:-34px;width:1px;height:auto}.tl li:last-child::before,.tl li:last-child::after{bottom:0}
  .tl li::after{transform:scaleY(0)}.tl li.on::after{transform:none}.tl i{left:-28px;top:6px}
  .n-row,.nm{font-size:56px}}
@media (max-width:1023px){:root{--h1:48px;--h2:36px}
  /* mini timeline: vertical below 1024 (names never collide) */
  .mini{grid-template-columns:1fr;row-gap:14px;margin-top:56px;padding:0 0 0 24px}.mini::before,.mini::after{left:3px;right:auto;top:6px;bottom:6px;width:1px;height:auto}.mini::after{transform:scaleY(var(--p,1))}.mini li{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:12px;font-size:14px;line-height:20px;padding-right:0}.mini span{margin-top:0}.mini i{left:-24px;top:6px}
  .nav,.top-a .link{display:none}.m-btn{display:block;margin-right:-10px}.top-a{gap:12px}.top-in{grid-template-columns:1fr auto}
  .hero-g.g{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "s" "c";row-gap:16px}.hero .sub{max-width:40ch}
  .hero .cta{justify-self:start;align-items:flex-start;margin-top:12px}.hero .note{white-space:normal}
  .team-h,.team-r{grid-column:1/-1}.team-r{margin-top:48px}
  .o-h{grid-column:2/7}.o-t{grid-column:7/13}.o-m{grid-column:7/13;justify-self:start;margin-top:12px}
  .num-h,.num-l,.num-f,.priv-h,.priv-l,.story-h,.story-t,.lim-h,.lim-l,.docs-h,.docs-l,.ct-h,.ct-l,.ab-h,.lead-q,.ap-l,.ap-r,.th-c,.lg,.fin-l,.nf-l,.sup-h,.sup-l,.sup-p .sup-h,.sup-p .sup-l{grid-column:1/-1}
  .num-l,.priv-l,.story-t,.lim-l,.docs-l,.ct-l,.lead-q,.ap-r,.sup-p .sup-l{margin-top:40px}
  .fin-r,.nf-r{display:none}
  .wk-l,.wk-r{grid-column:1/-1}.wk-r{display:none}.wk{min-height:0;padding:56px 0 0}.wk:last-child{min-height:0}.wk-slot{display:block;margin-top:28px;height:522px}
  .wk-slot .frame{height:522px}
  .f-b{grid-column:1/-1}.f-c:nth-of-type(1),.f-c:nth-of-type(2),.f-l{grid-column:span 6;margin-top:40px}}
@media (max-width:1023px){.sw{--k:.9}.sw-a{padding:30px 14px 22px}}
@media (max-width:719px){.sw{--k:.8;grid-template-columns:repeat(2,minmax(0,1fr))}.sw-i:not(:nth-child(4n)){border-right:0}.sw-i:nth-child(odd){border-right:1px solid var(--line)}
  .sw-a{gap:12px;padding:26px 10px 20px}.sw-x{top:10px;right:10px}}
@media (max-width:767px){:root{--pad:16px;--gap:16px;--st:96px;--sb:72px;--h1:40px;--h2:30px;--hdr:56px}
  body{font-size:17px;line-height:26px}
  .lead,.sub{font-size:18px;line-height:28px}
  .g{grid-template-columns:repeat(4,minmax(0,1fr))}
  .top-a .btn-s{height:44px}
  .hero{padding-top:40px}.stage{margin-top:36px}
  .cta{flex-direction:column;align-items:stretch}.cta .btn{width:100%}
  .ui{font-size:15px}.m-a,.m-a2{font-size:15px;line-height:1.65}.pop{font-size:14px}.q{font-size:14.5px}.np-txt{font-size:14.5px}
  .w-chat{left:0!important;right:0;width:auto!important;margin:0!important;padding:0 12px}.w-view{left:0;right:0;padding:0 12px;bottom:150px}.w-scroll{padding-top:60px}
  .comp{left:8px;right:8px}.cbox,.comp-c .cbox{min-height:132px;padding-bottom:62px}.comp-c{top:34%}.w-hi{top:calc(34% - 50px);font-size:20px}
  .w-docs{right:12px;top:12px}
  .m-pr,.m-avs,.ab:nth-child(n+4){display:none}
  .e-top{padding:0 14px}.e-head{padding:0 14px 12px}.e-seg,.e-acts .e-b,.e-tb .e-sel,.e-ag,.e-sep,.e-f .e-sel{display:none}.e-t{font-size:16px;line-height:22px}
  .e-c{padding:12px 10px 0}.paper{width:auto;padding:20px 18px;font-size:13px}.e-f{padding:0 12px}
  .steps{gap:10px}.step{font-size:13px}.rail{gap:12px}
  .o-l{margin-top:48px}.o-row{grid-template-columns:32px 1fr;row-gap:10px;padding:24px 0 28px}
  .o-n{grid-column:1;padding-top:4px}.o-h,.o-t,.o-m{grid-column:2}.o-h{font-size:21px;line-height:27px}.o-m{margin-top:4px}
  .n-row{grid-template-columns:1fr;row-gap:8px;font-size:48px}.nm{font-size:48px;text-align:left}
  .mini{margin-top:40px}
  .intro{padding-top:56px}.walk{padding-top:56px}.wk-h{font-size:24px}
  .wk-slot{height:562px}.wk-slot .frame{height:562px}
  .sx{grid-template-columns:1fr;row-gap:10px}.sx .h3,.sx p{grid-column:1}.sx .h3{font-size:21px}
  .lead-q{font-size:19px;line-height:29px}
  .card{padding:24px 20px}.ap-r .card{position:static}.ap-h,.th-h{font-size:36px}.th-c{padding:32px 20px}
  .apply{padding-top:48px}.f-act .btn{width:100%}
  .ap-l{display:contents}.ap-l>*{grid-column:1/-1}.ap-h{order:1}.ap-l .lead{order:2}.ap-r{order:3;margin-top:32px}.ap-l .nx-h,.ap-l .nx,.ap-l .fqs{order:4}
  .lg .lg-h{font-size:32px}.lg .toc{grid-template-columns:1fr}.lg{font-size:16px;line-height:26px}
  .lg table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.lg td,.lg th{overflow-wrap:anywhere;min-width:88px}.p-kb .lg td{white-space:nowrap;font-variant-numeric:tabular-nums}
  .big{font-size:24px}
  .f-c:nth-of-type(1),.f-c:nth-of-type(2){grid-column:span 2}.f-l{grid-column:span 2}}
/* phones (judge r6): the hero window fits the screen under the headline (stage top ≈ 388 px at 360–430 px wide), so the
   composer and every click of the film play in view; it is never smaller than the 440 px working height + borders (iPhone SE scrolls a little) */
@media (max-width:767px){.p-home .stage .frame{height:clamp(442px,calc(100svh - 410px),600px)}}
/* realclick 05.10 (O-03): a real iPhone shows the page with Safari's toolbars (390 × 664, SE 375 × 553), not 390 × 844; there the
   hero is a little tighter and the new-chat greeting + composer sit higher in the window, so act 1 (typing, «Надіслати») plays in view */
@media (max-width:767px) and (max-height:760px){.p-home .hero{padding-top:24px}.p-home .stage{margin-top:24px}
  [data-film=hero] .comp-c{top:22%}[data-film=hero] .w-hi{top:calc(22% - 50px)}}
/* phones (audit-demo #11): .top carries view-transition-name, so it is a backdrop root and the ::before blur never reaches the
   page; at .82 the hero text read through, unblurred, next to «LEXERY». Phones get the solid paper header (hairline unchanged) */
.top.sc::before{opacity:1}   /* every width (judge-final P1): the blur never reaches the page behind a backdrop root, so translucency only let text show through */
@media (max-width:359px){.top-a .btn{display:none}}

@media (max-width:1023px){.priv-lead{grid-column:1/-1;margin-top:28px}.vl-rail{display:none}
  .vl-s{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}.vault{margin-top:48px}
  .vl-lh,.vl-lim ul{grid-column:1/-1}.vl-lim ul{margin-top:12px;grid-template-columns:1fr;row-gap:10px}.vsec{padding-top:72px}}
@media (max-width:767px){.vl-s{grid-template-columns:1fr;row-gap:36px}.priv-lead{font-size:18px;line-height:28px}.vs-h{font-size:19px}}
/* reduced motion / ?still: composed frames, nothing moves (hover colour changes stay) */
.calm *,.calm *::before,.calm *::after{animation:none!important;transition-property:color,background-color,border-color,text-decoration-color!important}
.calm .priv{clip-path:none}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

.num-h{align-self:start}@media (min-width:1024px){.num-h{position:sticky;top:120px}}

/* ── 04.10 final pass: «Підключення» (Home + /product), scroll stories (/security, /product ClickUp), facts, limits, details.
   One scene engine (v4.js [data-story]): the caption at the reading line sets data-s + s0…s3 on the stage, CSS does the motion.
   Stages are illustrations (aria-hidden): logical 560 × 440, every size in em of a cqw base, so they scale like a picture. ── */
:root{--sv-acc:#297acc}
@media (prefers-color-scheme:dark){:root{--sv-acc:#8fbdf0}}
.vl-one{grid-column:1/-1;margin-top:40px;color:var(--band-ink-2)}.vl-one a{color:var(--band-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#4a4a4a}

/* Home «Підключення»: LEXERY in the middle, four services around it */
.conn{padding:var(--st) 0 var(--sb)}
.conn-h{grid-column:1/6;align-self:center}
.conn-h .lead{margin-top:24px;max-width:34ch}
.conn-h .more{margin-top:28px}
.conn-r{grid-column:7/13;container-type:inline-size}
.cx{position:relative;aspect-ratio:600/300;font-size:2.3cqw}
.cx-w{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cx-w path{stroke-width:1.2;vector-effect:non-scaling-stroke;fill:none}
.cx-base path{stroke:var(--line-2);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t-draw) var(--e-out)}
.cx-base .w1{transition-delay:120ms}.cx-base .w2{transition-delay:240ms}.cx-base .w3{transition-delay:360ms}
.cx.in .cx-base path{stroke-dashoffset:0}
.cx-flow path{stroke:var(--ink);stroke-width:1.6;stroke-dasharray:.07 1.2;stroke-dashoffset:.07;opacity:0}
.cx.run .cx-flow path{animation:cx-run 5.2s var(--e-move) infinite}
.cx.run .cx-flow .w1{animation-delay:1.3s}.cx.run .cx-flow .w2{animation-delay:2.6s}.cx.run .cx-flow .w3{animation-delay:3.9s}
@keyframes cx-run{0%{stroke-dashoffset:.07;opacity:0}4%{opacity:1}24%{stroke-dashoffset:-.93;opacity:1}28%,100%{stroke-dashoffset:-.93;opacity:0}}
.cx-c{position:absolute;left:50%;top:50%;width:4.4em;height:4.4em;margin:-2.2em 0 0 -2.2em;display:grid;place-items:center;border-radius:50%;background:var(--paper);border:1px solid var(--line)}
.cx-c::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--ink);opacity:0}
.cx.run .cx-c::after{animation:cx-ring 1.3s var(--e-out) 1.2s infinite}
@keyframes cx-ring{0%{opacity:.28;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.35)}}
.cx-cube{width:1.9em;height:auto;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.cx-cube path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t-draw) var(--e-out) .3s}
.cx.in .cx-cube path{stroke-dashoffset:0}
.cx-l{position:absolute;inset:0}
.cx-n{position:absolute;width:30%;display:grid;grid-template-columns:2em 1fr;column-gap:.7em;align-items:start;padding:.85em .9em;border:1px solid var(--line);border-radius:.9em;background:var(--paper);
  opacity:0;transform:translateY(-50%) translateY(.8em);transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out);transition-delay:calc(var(--i) * 90ms + 200ms)}
.cx.in .cx-n{opacity:1;transform:translateY(-50%)}
.cx-n.i0{left:0;top:23.33%}.cx-n.i1{right:0;top:23.33%}.cx-n.i2{left:0;top:76.67%}.cx-n.i3{right:0;top:76.67%}
.cx-g svg,.co-g svg{display:block;width:2em;height:2em;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cx-t{display:flex;flex-direction:column;gap:.15em;min-width:0}
.cx-t b{font-size:1em;line-height:1.3;font-weight:500;color:var(--ink)}
.cx-t span{font-size:.86em;line-height:1.35;color:var(--ink-3)}
.cx-n em,.co-i em{position:absolute;right:.8em;top:-.75em;padding:.15em .6em;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);font-style:normal;font-size:.78em;line-height:1.4;color:var(--ink-2)}

/* /product «ClickUp як CRM фірми» + the shared story layout */
.conn-p{padding:var(--st) 0 var(--sb);border-top:1px solid var(--line)}
.cp-h .h2{max-width:16ch}.cp-h .lead{margin-top:24px;max-width:46ch}
.story{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:64px}
.sv-col{grid-column:1/8}
.sc-col{grid-column:9/13}
.sv-stick{position:sticky;top:calc(var(--hdr) + 40px);container-type:inline-size}
.sv{position:relative;width:min(100%,calc((100svh - var(--hdr) - 140px) * 1.2727));aspect-ratio:560/440;border:1px solid var(--line);border-radius:16px;background:var(--plate);overflow:hidden;font-size:2.3cqw;line-height:1.35;color:var(--ink)}
.sv-cap{margin-top:12px}
.scn{min-height:64svh;display:flex;flex-direction:column;justify-content:center;padding:40px 0}
.sc-n{font-size:13px;line-height:18px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sc-h{margin-top:10px;font-size:24px;line-height:1.25;font-weight:500;letter-spacing:-.01em;color:var(--ink);transition:color var(--t-panel) var(--e-std)}
.sc-t{margin-top:10px;font-size:17px;line-height:26px;color:var(--ink-2);max-width:32ch;transition:color var(--t-panel) var(--e-std)}
.sv-js .scn:not(.on) .sc-h,.sv-js .scn:not(.on) .sc-t{color:var(--ink-3)}
@media (min-width:1024px){.vsec .story{margin-top:40px;padding-top:0}.vsec .scn:first-child{justify-content:flex-start}}
.co{margin-top:112px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.co-h{grid-column:1/-1}
.co-l{grid-column:1/-1;margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.co-i{position:relative;padding:26px 26px 28px;border:1px solid var(--line);border-radius:16px;font-size:12px}
.co-i h3{margin-top:20px;font-size:18px;line-height:26px;font-weight:500}
.co-i em{right:20px;top:24px;font-size:12px}
.co-i p{margin-top:8px;font-size:15px;line-height:23px;color:var(--ink-2)}
.co-n{grid-column:1/-1;margin-top:24px}

/* «Докладніше» (native details: works without JS, keyboard and screen readers for free) */
.dd{margin-top:14px}
.dd summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:14px;line-height:20px;font-weight:500;color:var(--ink);border-radius:4px}
.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--t-ui) var(--e-std)}
.dd[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.dd p{margin-top:10px;font-size:15px;line-height:23px;color:var(--ink-2);max-width:44ch}
.dd[open] p{animation:dd-in var(--t-panel) var(--e-out)}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px)}}
@media (hover:hover){.dd summary:hover{color:var(--ink-2)}}

/* ClickUp stage */
.cu-list{position:absolute;left:4.3%;top:5.5%;width:47%;height:89%;padding:1.1em 1.1em 0;border:1px solid var(--line);border-radius:1em;background:var(--paper)}
.cu-h{display:flex;flex-direction:column;gap:.1em}.cu-h b{font-size:1.08em;font-weight:600}.cu-h span{font-size:.8em;color:var(--ink-3)}
.cu-fs{display:flex;flex-wrap:wrap;gap:.35em;margin-top:.8em}
.cu-f{padding:.2em .55em;border:1px solid var(--line-2);border-radius:999px;font-size:.74em;color:var(--ink-3);transition:color var(--t-ui) var(--e-std),border-color var(--t-ui) var(--e-std),background-color var(--t-ui) var(--e-std);transition-delay:calc(var(--i) * 140ms + 300ms)}
.cu-rows{margin-top:.9em;border-top:1px solid var(--line)}
.cu-r{display:grid;grid-template-columns:1em 1fr auto;grid-template-areas:"d n n" ". s t";column-gap:.5em;row-gap:.15em;padding:.6em .3em;border-bottom:1px solid var(--line);border-radius:.4em;
  transition:background-color var(--t-panel) var(--e-std),opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out)}
.cu-d{grid-area:d;width:.6em;height:.6em;margin-top:.35em;border-radius:50%;border:1.5px solid var(--ink-3)}
.cu-nm{grid-area:n;font-size:.9em;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cu-st{grid-area:s;justify-self:start;padding:.05em .5em;border-radius:.35em;background:var(--plate);font-size:.72em;color:var(--ink-2)}
.cu-dt{grid-area:t;font-size:.76em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cu-new .cu-st{background:none;border:1px solid var(--sv-acc);color:var(--sv-acc)}
.cu-ans{position:absolute;left:.9em;right:.9em;bottom:.9em;padding:.8em .9em;border:1px solid var(--line);border-radius:.8em;background:var(--plate);display:flex;flex-wrap:wrap;align-items:center;gap:.6em}
.cu-ans p{flex:1 1 100%;font-size:.86em;color:var(--ink-2)}
.cu-btn,.cu-ask,.cu-open{display:inline-flex;align-items:center;height:2.1em;padding:0 .8em;border-radius:.45em;font-size:.8em;font-weight:500;white-space:nowrap}
.cu-btn{background:var(--btn);color:var(--btn-ink)}
.cu-ok{display:inline-flex;align-items:center;gap:.3em;font-size:.8em;color:var(--ink-2);opacity:0}
.cu-ok .tick{width:1.1em;height:1.1em}
.cu-card{position:absolute;left:54%;top:9%;width:41.7%;height:82%;padding:1.1em;border:1px solid var(--line);border-radius:1em;background:var(--paper);box-shadow:0 .6em 2em rgba(0,0,0,.06);display:flex;flex-direction:column}
.cu-ct{font-size:1em;line-height:1.3;font-weight:600}
.cu-kv{margin-top:.8em;display:flex;flex-direction:column;gap:.45em}
.cu-kv div{display:grid;grid-template-columns:5.2em 1fr;gap:.4em;font-size:.8em}.cu-kv dt{color:var(--ink-3)}.cu-kv dd{color:var(--ink)}
.cu-tl{margin-top:.9em;font-size:.76em;font-weight:500;color:var(--ink-3)}
.cu-tasks{margin-top:.35em}
.cu-tasks li{display:grid;grid-template-columns:1em 1fr auto;gap:.45em;align-items:center;padding:.35em 0;border-top:1px solid var(--line);font-size:.8em}
.cu-tasks li i{width:.75em;height:.75em;border:1.5px solid var(--ink-3);border-radius:.2em}.cu-tasks li span{color:var(--ink-3);font-variant-numeric:tabular-nums}
.cu-acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:.4em;padding-top:.8em}
.cu-ask{background:var(--btn);color:var(--btn-ink)}.cu-open{border:1px solid var(--line-2);color:var(--ink-2)}
.cu-draft{display:flex;align-items:flex-start;min-height:3.6em;margin-top:.6em;padding:.6em .7em;border:1px solid var(--line-2);border-radius:.7em;font-size:.78em;line-height:1.4;color:var(--ink)}
.cu-car{display:inline-block;width:1px;height:1.2em;margin-left:1px;background:var(--ink);opacity:0}
/* static / reduced motion: the composed final frame */
.sv-all .cu-f{border-color:var(--ink-3);color:var(--ink)}.sv-all .cu-r.r0{background:var(--plate)}.sv-all .cu-ok{opacity:1}
/* scenes (JS on) */
.sv-js .cu-r{opacity:0;transform:translateY(.5em)}
.sv-js .s0 .cu-r{opacity:1;transform:none}.sv-js .s0 .cu-r.r1{transition-delay:90ms}.sv-js .s0 .cu-r.r2{transition-delay:180ms}
.sv-js .cu-new{display:none}.sv-js .s2 .cu-new{display:grid;animation:cu-in var(--t-camera) var(--e-out) 1s both}
@keyframes cu-in{from{opacity:0;transform:translateY(-.5em)}to{opacity:1;transform:none}}
.sv-js .s0 .cu-f{border-color:var(--ink-3);color:var(--ink)}
.sv-js .s1 .cu-r.r0{background:var(--plate)}
.sv-js .cu-card{opacity:0;transform:translateX(1.4em);transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out)}
.sv-js .s1 .cu-card{opacity:1;transform:none}
.sv-js .cu-tn{display:none}.sv-js .s2 .cu-tn{display:grid;animation:cu-in var(--t-camera) var(--e-out) 1.2s both}
.sv-js .cu-ans{opacity:0;transform:translateY(.6em);transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out)}
.sv-js .s2 .cu-ans{opacity:1;transform:none}
.sv-js .s2 .cu-btn{animation:cu-press 420ms var(--e-std) .75s both}
.sv-js .s2 .cu-ok{animation:cu-fade var(--t-panel) var(--e-out) 1.1s both}
@keyframes cu-press{0%,100%{transform:none}45%{transform:scale(.94)}}
@keyframes cu-fade{from{opacity:0}to{opacity:1}}
.sv-js .cu-draft{opacity:0;transform:translateY(.4em);transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out)}
.sv-js .s3 .cu-draft{opacity:1;transform:none;transition-delay:.45s}
.sv-js .s3 .cu-ask{animation:cu-press 420ms var(--e-std) .1s both}
.sv-js .s3 .cu-car{animation:cu-blink 1s steps(1) infinite}
@keyframes cu-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.sv-js [data-s="2"] .cu-card,.sv-js [data-s="3"] .cu-list{opacity:.6}
.sv-js [data-s="3"] .cu-card{opacity:1}

/* /security stage: browser → database → logs */
.sk-w{position:absolute;inset:0;width:100%;height:100%}
.sk-w path{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke}
.sk-wb{stroke:var(--line-2)}
.sk-wp{stroke:var(--sv-acc);stroke-width:2!important;stroke-dasharray:.16 1.2;stroke-dashoffset:.16;opacity:0}
.sk-b{position:absolute;left:5.4%;top:6.8%;width:57%;height:28.6%;border:1px solid var(--line);border-radius:1em;background:var(--paper);transition:opacity var(--t-panel) var(--e-std)}
.sk-bar{display:flex;align-items:center;gap:.35em;height:2.2em;padding:0 .9em;border-bottom:1px solid var(--line)}
.sk-bar i{width:.5em;height:.5em;border-radius:50%;background:var(--line-2)}
.sk-bar span{margin-left:.5em;font-size:.8em;color:var(--ink-3)}
.sk-msg{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6em;margin:.9em .9em 0;padding:.7em .8em;border-radius:.7em;background:var(--plate)}
.sk-tx,.sk-ci{grid-area:1/1;font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:clip;transition:opacity var(--t-panel) var(--e-std)}
.sk-tx{text-overflow:ellipsis}
.sk-ci{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;color:var(--sv-acc);opacity:0}
.sk-msg .vlk{position:static;width:1.15em;height:1.15em;margin:0;stroke:var(--ink-2);stroke-width:1.5;fill:none;opacity:1}
.sv-js .s1 .sk-msg .vlk{stroke:var(--sv-acc);transition:stroke var(--t-ui) var(--e-std) .9s}
.sk-msg .vlk-s{transition:transform var(--t-panel) var(--e-tick);transform:translateY(0)}
.sk-key{display:flex;align-items:center;gap:.5em;margin:.75em .9em 0;font-size:.86em;opacity:1}
.sk-key b{font-weight:600}.sk-key span{color:var(--ink-3)}
.sk-kg{position:relative;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;border:1px solid var(--line-2)}
.sk-kg::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--sv-acc);opacity:0}
.sk-kg .vk{width:1.2em;height:1.2em;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round}
.sk-kg .vk *{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--t-draw) var(--e-out)}
.sk-d{position:absolute;left:40.4%;top:44%;width:54%;height:27%;padding:.8em .9em;border:1px solid var(--line);border-radius:1em;background:var(--paper);transition:opacity var(--t-panel) var(--e-std)}
.sk-h{display:flex;align-items:center;gap:.45em;margin-bottom:.4em;font-size:.86em}.sk-h svg{width:1.2em;height:1.2em;stroke:var(--ink-2);stroke-width:1.3}.sk-h b{font-weight:600}
.sk-r{display:grid;grid-template-columns:4.4em 1fr;padding:.22em 0;font-size:.82em}
.sk-r span{color:var(--ink-3)}.sk-r b{font-weight:400;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden}
.sk-z b{color:var(--sv-acc)}
.sk-view{position:absolute;right:.8em;bottom:-1.25em;display:flex;align-items:center;gap:.45em;padding:.45em .75em;border:1px dashed var(--ink-3);border-radius:.6em;background:var(--paper);font-size:.8em;color:var(--ink-2);transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out)}
.sk-view i{width:.9em;height:.9em;border:1.5px solid var(--ink-2);border-radius:50%;position:relative}
.sk-view i::after{content:"";position:absolute;right:-.42em;bottom:-.42em;width:.45em;height:1.5px;background:var(--ink-2);transform:rotate(45deg)}
.sk-log{position:absolute;left:5.4%;top:82%;width:70%;padding:.6em .9em;border:1px solid var(--line);border-radius:.8em;background:var(--paper);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76em;color:var(--ink-2);transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out)}
.sk-log p{display:flex;align-items:center;gap:.8em;white-space:nowrap}.sk-log p>span:first-child{color:var(--ink-3)}
.sk-len{padding:.05em .45em;border-radius:.3em;background:var(--plate)}
.sk-no{padding:.05em .5em;border-radius:.3em;color:var(--ink-3);background:repeating-linear-gradient(135deg,var(--plate) 0 4px,transparent 4px 8px)}
/* scenes (JS on); without JS / reduced motion every station shows its final state */
.sv-js .sk-key{opacity:0;transform:translateY(.3em);transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out)}
.sv-js .sk-kg .vk *{stroke-dashoffset:1}
.sv-js .s0 .sk-key{opacity:1;transform:none}.sv-js .s0 .sk-kg .vk *{stroke-dashoffset:0;transition-delay:.15s}
.sv-js .sk-msg .vlk-s{transform:translateY(-.18em)}
.sv-js .s1 .sk-msg .vlk-s{transform:none;transition-delay:.9s}
.sv-js .s1 .sk-tx{opacity:0}.sv-js .s1 .sk-ci{opacity:1}
.sv-js .s1 .sk-wp{animation:sk-pk 1.2s var(--e-move) .5s both}
@keyframes sk-pk{0%{stroke-dashoffset:.16;opacity:0}8%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1.04;opacity:0}}
.sv-js .sk-d{opacity:.38}.sv-js .s1 .sk-d{opacity:1;transition-delay:1.2s}
.sv-js .sk-c2{visibility:hidden}.sv-js .s1 .sk-c2{visibility:visible}
.sv-js .sk-log{opacity:0;transform:translateY(.6em)}.sv-js .s2 .sk-log{opacity:1;transform:none}
.sv-js [data-s="2"] .sk-b{opacity:.45}.sv-js [data-s="3"] .sk-log{opacity:.5}
.sv-js .sk-view{opacity:0;transform:translateY(.5em)}.sv-js .s3 .sk-view{opacity:1;transform:none;transition-delay:.2s}
.sv-js .s3 .sk-kg::after{animation:cx-ring 1.6s var(--e-out) .6s 2}

/* /security: facts, limits, details */
.sec-in .lead{max-width:44ch}
.sfx{padding:112px 0 0}
.sf-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.sf{padding:28px 28px 30px;border:1px solid var(--line);border-radius:16px}
.sf-i svg{display:block;width:48px;height:48px;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sf h3{margin-top:22px;font-size:20px;line-height:28px;font-weight:500}
.sf p{margin-top:8px;font-size:15px;line-height:23px;color:var(--ink-2);max-width:34ch}
.sf .more{margin-top:16px;font-size:15px}
.sf-eu .pn{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t-draw) var(--e-out)}.sf-eu.in .pn{stroke-dashoffset:0}
.sf-eu .st{fill:var(--ink);stroke:none;transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.3);transition:opacity var(--t-ui) var(--e-std),transform var(--t-panel) var(--e-tick);transition-delay:calc(var(--i) * 60ms + 400ms)}
.sf-eu.in .st{opacity:1;transform:none}
.sf-del path,.sf-train circle,.sf-train path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms var(--e-out),opacity var(--t-panel) var(--e-std)}
.sf.in path,.sf.in circle{stroke-dashoffset:0}
.sf-del.in .dl-l{transition-delay:.35s}.sf-del.in .dl-x{transition-delay:.9s}
.sf-del.in .dl-d,.sf-del.in .dl-l{animation:sf-dim var(--t-panel) var(--e-std) 1.5s both}
@keyframes sf-dim{to{opacity:.3}}
.sf-train.in .tr-a{transition-delay:.4s}.sf-train.in .tr-x{transition-delay:.9s}
.mz{padding:var(--st) 0 0}
.mz-h{grid-column:1/6}.mz-r{grid-column:7/13}
.mz-l li{display:grid;grid-template-columns:18px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line);font-size:16px;line-height:24px;color:var(--ink-2)}
.mz-l li:last-child{border-bottom:1px solid var(--line)}
.mz-l i{width:7px;height:7px;margin-top:9px;border-radius:50%;background:var(--ink-3)}
.mz-r>.meta{margin-top:20px}.mz-r>.meta a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.dmore{padding:var(--st) 0 var(--sb)}
.dm-h{grid-column:1/6}.dm-r{grid-column:7/13}
.dx{margin:0;border-top:1px solid var(--line)}.dx:last-of-type{border-bottom:1px solid var(--line)}
.dx summary{display:flex;justify-content:space-between;align-items:center;width:100%;padding:22px 0;font-size:20px;line-height:28px}
.dx summary::after{width:14px;height:14px;border:0;transform:none;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat}
.dx[open] summary::after{transform:rotate(45deg)}
.dx p{margin:0 0 24px;font-size:16px;line-height:25px;max-width:52ch}
.dm-docs{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:36px}
.dm-r>.meta{margin-top:16px}

@media (max-width:1023px){
  .conn-h,.conn-r,.mz-h,.mz-r,.dm-h,.dm-r{grid-column:1/-1}.conn-r{margin-top:48px}.mz-r,.dm-r{margin-top:32px}
  .story{display:block;margin-top:40px}
  .sv-col{position:sticky;top:0;z-index:2;padding:calc(var(--hdr) + 8px) 0 14px;background:var(--paper)}
  /* realclick 05.10 (O-05): captions slide under the sticky stage; a short paper fade under its edge, never a line cut in half */
  .sv-col::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--paper),transparent);pointer-events:none}
  .sv-col .sv-stick{position:static;padding:0}
  .sv{width:100%;max-width:560px}
  .sv-cap{display:none}
  .scn{min-height:52svh;padding:24px 0}
  .co-l{grid-template-columns:1fr}.sf-l{grid-template-columns:1fr}.sfx{padding-top:72px}.co{margin-top:72px}
}
@media (max-width:719px){
  .sv{font-size:3.4cqw;aspect-ratio:560/540}
  .cu-list,.cu-card{left:4%;width:92%;top:4.5%;height:91%}
  .cu-f,.cu-st,.cu-dt,.cu-tl,.cu-kv div,.cu-tasks li,.cu-h span{font-size:.84em}
  .sv-js [data-s="2"] .cu-card{opacity:0;transform:translateX(1.4em)}
  .sv-js [data-s="3"] .cu-list{opacity:1}
  .sk{aspect-ratio:560/500}
  .sk-w{display:none}
  .sk-b{left:4%;width:92%;top:4%;height:auto;padding-bottom:.9em}
  .sk-d{left:4%;width:92%;top:41%;height:auto}
  .sk-log{left:4%;width:92%;top:auto;bottom:4%;font-size:.8em}
  .sk-log p{flex-wrap:wrap;row-gap:.3em;white-space:normal}
  .sk-bar span,.sk-r,.sk-h,.sk-key{font-size:.9em}
  .cx{aspect-ratio:auto;font-size:13px;display:grid;justify-items:center;gap:20px}
  .cx-w{display:none}.cx-c{position:relative;left:auto;top:auto;margin:0;width:56px;height:56px}
  .cx-l{position:static;display:grid;gap:10px;width:100%}
  .cx-n{position:relative;left:auto!important;right:auto!important;top:auto!important;width:100%;transform:translateY(.8em)}.cx.in .cx-n{transform:none}
  .cx-n em{top:50%;transform:translateY(-50%)}
}

/* ───────── r6 motion grammar: the base rules are the composed final picture (no JS, reduced motion, between beats);
   [data-loop] (v4.js) sets .in once, then .on on one [data-i] and .up on the ones before it; entries only via .js:not(.calm) …:not(.in) ───────── */

/* r6 P1 · Home «Від питання до документа»: one answer line, a wire, and the four layers behind its citation */
.an{--an-cite:#1527c7;--an-acc:21,39,199;--an-mark:rgba(41,122,204,.16)}
@media (prefers-color-scheme:dark){.an{--an-cite:#7db4ec;--an-acc:90,160,230;--an-mark:rgba(125,180,236,.2)}}
.an-h{grid-column:1/7}.an-h .more{margin-top:24px}
.an-s{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;margin-top:64px}
.an-c{grid-column:1/7;padding:28px 32px 32px;border:1px solid var(--line);border-radius:16px;background:var(--plate);contain:layout paint}
.an-k{font-size:13px;line-height:18px;color:var(--ink-3)}
.an-tx{margin-top:12px;font-size:20px;line-height:31px;color:var(--ink)}
.an-ct{color:var(--an-cite);font-weight:500;text-decoration:underline 1px rgba(var(--an-acc),.35);text-underline-offset:3px}
.an-ol{--ny:31px;grid-column:7/13;position:relative}
.an-ol::before{content:"";position:absolute;left:calc(var(--gap) * -1);top:50%;width:calc(var(--gap) + 24px);height:1px;background:var(--line-2);transform-origin:0 50%}
.an-ol::after{content:"";position:absolute;left:calc(var(--gap) * -1);top:50%;width:14px;height:1px;background:var(--ink);opacity:0;z-index:2}
.an-s:is([data-k="0"],[data-k="2"]) .an-ol::after{animation:an-pa 700ms var(--e-move) backwards}
.an-s:is([data-k="1"],[data-k="3"]) .an-ol::after{animation:an-pb 700ms var(--e-move) backwards}
@keyframes an-pa{0%{opacity:0;transform:none}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateX(calc(var(--gap) + 10px))}}
@keyframes an-pb{0%{opacity:0;transform:none}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateX(calc(var(--gap) + 10px))}}
.an-i{position:relative;isolation:isolate}
.an-i::before,.an-i::after{content:"";position:absolute;left:24px;top:var(--ny);bottom:calc(var(--ny) * -1);width:1px;background:var(--line-2);z-index:1}
.an-i:last-child::before,.an-i:last-child::after{display:none}
.an-i::after{background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--t-ui) var(--e-exit)}
.an-i.up::after{transform:none;transform-origin:50% 0;transition:transform var(--t-camera) var(--e-move)}
.an-i a{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);row-gap:8px;padding:18px 16px 20px 48px;border-radius:12px}
.an-o{position:absolute;left:20.5px;top:calc(var(--ny) - 4px);width:8px;height:8px;border-radius:50%;border:1px solid var(--ink-3);background:var(--paper);z-index:2}
.an-o::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--ink);opacity:0;transform:scale(.3);transition:opacity var(--t-ui) var(--e-std),transform var(--t-ui) var(--e-out)}
.an-i:is(.on,.up) .an-o::after{opacity:1;transform:none}
.an-i a::after{content:"";position:absolute;inset:2px 0 2px 40px;border-radius:12px;background:var(--plate);opacity:0;z-index:-1;transition:opacity var(--t-ui) var(--e-std)}
.an-i.on a::after{opacity:1}
.an-n{grid-column:1;font-size:14px;line-height:26px;color:var(--ink-3);font-variant-numeric:tabular-nums;transition:color var(--t-ui) var(--e-std)}
.an-i.on .an-n{color:var(--ink)}
.an-l{grid-column:2;font-size:20px;line-height:26px;font-weight:500;letter-spacing:-.008em;color:var(--ink)}
.an-a{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:22px;font-size:14px;line-height:20px;color:var(--ink-2)}
.an-p{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid var(--line-2);border-radius:999px;font-size:12.5px;line-height:1;white-space:nowrap;color:var(--ink-2)}
.an-m,.an-u{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.an-m{color:var(--ink)}
.an-m::before{content:"";position:absolute;inset:-1px -4px;border-radius:3px;background:var(--an-mark);z-index:-1;transform-origin:0 50%}
.an-u{color:var(--ink)}
.an-u::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform-origin:0 50%}
.an-ok{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}.an-ok .tick{width:15px;height:15px}
.an-d{display:inline-flex;align-items:center;gap:8px}.an-d b{font-weight:500;color:var(--ink)}.an-f{display:block;font-style:normal;color:var(--ink)}.an-f svg{width:18px;height:18px}
@media (hover:hover){.an-i a:hover .an-l{text-decoration:underline 1px;text-underline-offset:4px}}
.an-i a:focus-visible{outline-offset:-2px}
/* beats: each .on replays a ≤ 700 ms accent on the composed picture */
.an-i.on .an-o{animation:an-node var(--t-panel) var(--e-tick) 300ms backwards}
.an-i.on .an-m::before,.an-i.on .an-u::after{animation:an-sweep var(--t-camera) var(--e-move) 250ms backwards}
.an-i.on .tick path{animation:draw 600ms var(--e-out) 250ms backwards}
.an-i.on .an-f{animation:an-drop 700ms var(--e-out) 200ms backwards}
@keyframes an-sweep{from{transform:scaleX(0)}}
@keyframes an-node{0%{transform:scale(1)}45%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes an-drop{0%{opacity:0;transform:translateY(-6px)}60%{opacity:1;transform:translateY(1px)}100%{opacity:1;transform:none}}
/* entry, once */
.js:not(.calm) .an-s:not(.in) .an-c{opacity:0;transform:translateY(16px)}
.js:not(.calm) .an-s:not(.in) .an-ol::before{transform:scaleX(0)}
.js:not(.calm) .an-s:not(.in) .an-i{opacity:0;transform:translateY(10px)}
.an-s.in .an-c{transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out)}
.an-s.in .an-ol::before{transition:transform var(--t-camera) var(--e-move) 300ms}
.an-s.in .an-i{transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out);transition-delay:calc(450ms + var(--i) * 140ms)}
@media (max-width:1023px){
  .an-h{grid-column:1/-1}
  .an-s{display:block;margin-top:40px}
  .an-c{padding:20px 20px 22px}.an-tx{font-size:18px;line-height:28px}
  .an-ol{--ny:28px;margin-top:24px}
  .an-ol::before{left:24px;top:-25px;width:1px;height:calc(25px + var(--ny) - 4px);transform-origin:50% 0}
  .js:not(.calm) .an-s:not(.in) .an-ol::before{transform:scaleY(0)}
  .an-ol::after{left:24px;top:-25px;width:1px;height:12px}
  @keyframes an-pa{0%{opacity:0;transform:none}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(calc(var(--ny) + 9px))}}
  @keyframes an-pb{0%{opacity:0;transform:none}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(calc(var(--ny) + 9px))}}
  .an-i a{grid-template-columns:32px minmax(0,1fr);padding:16px 12px 18px 44px}
  .an-i a::after{left:36px}
  .an-l{font-size:18px;line-height:24px}.an-n{line-height:24px}}
@media (max-width:429px){.an-i:first-child .an-a{display:block}.an-p{margin:0 6px 6px 0;vertical-align:top}.an-m{display:inline;white-space:normal;padding:0 3px;border-radius:3px;background:var(--an-mark);-webkit-box-decoration-break:clone;box-decoration-break:clone}.an-m::before{display:none}}

/* r6 P5 · Home numbers: each row's rule draws with the digit roll, then a «станом на» stamp presses in */
.n-row{border-top:0;position:relative}
.n-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
.n-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.n-st{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--line-2);border-radius:4px;font-size:12.5px;line-height:1;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.n-s{font-size:13px;line-height:18px;color:var(--ink-3)}
.js:not(.calm) [data-roll].pre::before{transform:scaleX(0)}
.js:not(.calm) [data-roll].in::before{transition:transform var(--t-camera) var(--e-out);transition-delay:calc(var(--r,0) * 120ms)}
.js:not(.calm) [data-roll].pre .n-st{opacity:0;transform:scale(1.18)}
.js:not(.calm) [data-roll].in .n-st{transition:opacity var(--t-ui) var(--e-out),transform 420ms var(--e-tick);transition-delay:calc(var(--r,0) * 120ms + 950ms)}

/* r6 P2 · /apply «Що далі» (+ /apply/thanks): three stations; the line runs ① → ③ once and each station lands as it arrives */
.nxt{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;margin-top:20px;contain:layout paint}
.nxt::before,.nxt::after{content:"";position:absolute;left:24px;right:calc(100% / 3 - 32px);top:24px;height:1px;background:var(--line-2)}
.nxt::after{background:var(--ink);transform-origin:0 50%}
.nx-g{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line-2);border-radius:50%;background:var(--paper)}
.nx-g>svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nx-g>svg *{stroke-dasharray:1;stroke-dashoffset:0}
.nx-g>.nx-cube{width:20px;height:23px;stroke-width:6}
.nx-b{position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);box-shadow:0 0 0 2px var(--paper)}
.nx-b .tick{width:12px;height:12px}
.nx-dot{position:absolute;right:7px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--paper)}
.nx-s b{display:block;margin-top:14px;font-size:15px;line-height:20px;font-weight:500;color:var(--ink)}
.nx-u{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--ink-3)}
.nx-t{margin-top:18px}
.js:not(.calm) .nxt:not(.in)::after{transform:scaleX(0)}
.js:not(.calm) .nxt:not(.in) .nx-g{opacity:0;transform:scale(.6)}
.js:not(.calm) .nxt:not(.in) .nx-g>svg *{stroke-dashoffset:1}
.js:not(.calm) .nxt:not(.in) :is(.nx-b,.nx-dot){opacity:0;transform:scale(.4)}
.js:not(.calm) .nxt:not(.in) .nx-s :is(b,.nx-u){opacity:0;transform:translateY(6px)}
.nxt.in::after{transition:transform 1300ms var(--e-move) 150ms}
.nxt.in .nx-g{transition:opacity var(--t-panel) var(--e-out),transform 560ms var(--e-tick);transition-delay:calc(150ms + var(--i) * 600ms)}
.nxt.in .nx-g>svg *{transition:stroke-dashoffset 600ms var(--e-move);transition-delay:calc(250ms + var(--i) * 600ms)}
.nxt.in .nx-g>.nx-cube *{transition-delay:calc(1400ms + var(--i) * 50ms)}
.nxt.in .nx-b{transition:opacity var(--t-ui) var(--e-out),transform 420ms var(--e-tick) 800ms}
.nxt.in .nx-dot{transition:opacity var(--t-ui) var(--e-out),transform 420ms var(--e-tick) 1300ms}
.nxt.in .nx-s :is(b,.nx-u){transition:opacity var(--t-panel) var(--e-out),transform var(--t-panel) var(--e-out);transition-delay:calc(250ms + var(--i) * 600ms)}
.nxt.d1 .i1 .nx-g{border-color:var(--ink)}
.nxt.d1 .i1 .nx-g::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--ink);opacity:0}
.js:not(.calm) .nxt.d1.in .i1 .nx-g::after{animation:cx-ring 1.3s var(--e-out) 1.5s 2}
.th-nx{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}.th-nx .nxt{margin-top:0}
.nxt.d1::after{right:calc(200% / 3 - 28px)}.nxt.d1 .nx-u{display:none}
.nxt.d1 .i2 .nx-g>svg{stroke:var(--ink-3)}.nxt.d1 .i2 b{color:var(--ink-2);font-weight:400}
@media (max-width:767px){.ap-l .nxt,.ap-l .nx-t{order:4}.nx-u{display:none}.nx-s b{font-size:14px}}
/* realclick 05.10: tablets in portrait (768–1023) got the single column in source order, so the form began under «Що далі» and the
   FAQ (iPad 768×1024: at 855 px). Same order as on phones: title, lead, form, then «Що далі» and «Коротко» */
@media (min-width:768px) and (max-width:1023px){.ap-l{display:contents}.ap-l>*{grid-column:1/-1}.ap-h{order:1}.ap-l .lead{order:2}.ap-r{order:3}
  .ap-l .nx-h,.ap-l .nxt,.ap-l .nx-t,.ap-l .fqs{order:4}.ap-r .card{position:static}}

/* r6 P3 · «Для команд» (Home + /product): one seat board, always complete; the legend under it steps the beats (data-k on .tmb) */
.tmb{container-type:inline-size}
.team-r .tmb{margin-top:6px}.team-s .tmb{margin-top:28px}.team-r .team-p{margin-top:32px}
.tm-p{position:relative;padding:1.5em 1.6em 1.6em;border:1px solid var(--line);border-radius:16px;background:var(--plate);font-size:clamp(13px,2.3cqw,14px);line-height:1.35;color:var(--ink);contain:layout paint}
.tm-h{display:flex;justify-content:space-between;align-items:baseline;gap:.4em 1em;flex-wrap:wrap;font-size:.93em;font-weight:500}
.tm-cnt{font-weight:400;color:var(--ink-3)}
.tm-s{display:flex;gap:.8em;margin-top:1.3em}
.tm-st{position:relative;width:2.9em}
.tm-av{position:relative;display:grid;place-items:center;width:2.9em;height:2.9em;border-radius:50%;font-weight:500}
.tm-on .tm-av{background:var(--ink);color:var(--paper)}
.tm-inv .tm-av{border:1.5px dashed var(--ink-3);color:var(--ink-2)}
.tm-inv .tm-av svg{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tm-inv .tm-av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ink);opacity:0}
.tm-free .tm-av{border:1px solid var(--line-2)}
.tm-bar{position:relative;display:block;height:.32em;margin-top:.75em;border-radius:99px;background:var(--line-2);overflow:hidden}
.tm-bar b{position:absolute;inset:0;border-radius:inherit;background:var(--ink);transform-origin:0 50%}
.tm-bar.w45 b{transform:scaleX(.45)}.tm-bar.w70 b{transform:scaleX(.7)}.tm-bar.w30 b{transform:scaleX(.3)}.tm-no{visibility:hidden}
.tm-b{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1em 1.5em;margin-top:1.4em;padding-top:1.3em;border-top:1px solid var(--line)}
.tm-svs{display:flex;flex-direction:column;gap:.7em}
.tm-sv{display:flex;align-items:center;gap:.6em;font-size:.93em}
.tm-tg{position:relative;width:2.1em;height:1.2em;border-radius:99px;background:var(--line-2);flex:none;overflow:hidden}
.tm-tg::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink)}
.tm-tg i{position:absolute;left:.15em;top:.15em;width:.9em;height:.9em;border-radius:50%;background:var(--paper);transform:translateX(.9em)}
.tm-doc{display:flex;align-items:center;gap:.7em}
.tm-dc{display:inline-flex;align-items:center;gap:.45em;height:2.3em;padding:0 .85em 0 .6em;border:1px solid var(--line-2);border-radius:.7em;background:var(--paper);font-size:.93em;white-space:nowrap}
.tm-dc svg{width:1.3em;height:1.3em}
.tm-sh{display:flex}
.tm-sh i{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--ink);color:var(--paper);font-style:normal;font-size:.85em;font-weight:500;box-shadow:0 0 0 2px var(--plate)}
.tm-sh i+i{margin-left:-.45em}
.tm-c{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
.tm-c li{position:relative;padding-top:12px;font-size:14px;line-height:20px;color:var(--ink-2);cursor:default;transition:color var(--t-ui) var(--e-std)}
.tm-c li::before,.tm-c li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.tm-c li::after{background:var(--ink);transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-ui) var(--e-exit)}
.tm-c li.on{color:var(--ink)}
.tm-c li.on::after{transform:none;transform-origin:0 50%;transition:transform var(--t-camera) var(--e-move)}
/* beats: 0 invitation lands in the dashed seat · 1 limits re-grow · 2 services switch on · 3 the document is shared */
.tmb[data-k="0"] .tm-inv svg{animation:tm-fly 700ms var(--e-out) backwards}
.tmb[data-k="0"] .tm-inv .tm-av::after{animation:cx-ring 1.3s var(--e-out) 450ms backwards}
.tmb[data-k="1"] .tm-bar b{animation:tm-grow 700ms var(--e-move) backwards;animation-delay:calc(var(--i) * 90ms)}
.tmb[data-k="2"] .tm-tg::before{animation:tm-fill 450ms var(--e-std) backwards}
.tmb[data-k="2"] .tm-tg i{animation:tm-knob 450ms var(--e-out) backwards}
.tmb[data-k="2"] .tm-sv.i1 .tm-tg::before,.tmb[data-k="2"] .tm-sv.i1 .tm-tg i{animation-delay:160ms}
.tmb[data-k="3"] .tm-dc{animation:tm-nudge 600ms var(--e-move) backwards}
.tmb[data-k="3"] .tm-sh i{animation:tm-pop 480ms var(--e-tick) backwards;animation-delay:calc(250ms + var(--i) * 120ms)}
@keyframes tm-fly{from{opacity:0;transform:translate(-1.4em,-.5em) scale(.7)}}
@keyframes tm-grow{from{transform:scaleX(0)}}
@keyframes tm-fill{from{opacity:0}}
@keyframes tm-knob{from{transform:none}}
@keyframes tm-nudge{45%{transform:translateX(.35em)}}
@keyframes tm-pop{from{opacity:0;transform:scale(.4)}}
/* entry, once */
.js:not(.calm) .tmb:not(.in) .tm-p{opacity:0;transform:translateY(16px)}
.js:not(.calm) .tmb:not(.in) .tm-av{opacity:0;transform:scale(.6)}
.js:not(.calm) .tmb:not(.in) .tm-bar b{transform:scaleX(0)}
.js:not(.calm) .tmb:not(.in) .tm-c li{opacity:0;transform:translateY(8px)}
.tmb.in .tm-p{transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out)}
.tmb.in .tm-av{transition:opacity var(--t-panel) var(--e-out),transform 560ms var(--e-tick);transition-delay:calc(250ms + var(--i) * 90ms)}
.tmb.in .tm-bar b{transition:transform 700ms var(--e-move);transition-delay:calc(650ms + var(--i) * 90ms)}
.tmb.in .tm-c li{transition:opacity var(--t-panel) var(--e-out),transform var(--t-panel) var(--e-out),color var(--t-ui) var(--e-std);transition-delay:calc(500ms + var(--i) * 70ms),calc(500ms + var(--i) * 70ms),0ms}
@media (max-width:479px){.tm-p{padding:1.3em 1.2em 1.3em}.tm-c{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}}
.lim-l .tmb li{padding:0;border:0}.lim-l .tmb .tm-c li{padding-top:12px}.lim-l .tmb p{margin-top:0;color:inherit}

/* r6 P4 · /product «Чого LEXERY не робить»: two rows, each with a small scene that replays its accent when its beat comes */
.lm{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:28px;align-items:center}
.lm-sc{position:relative;display:flex;align-items:center;justify-content:center;height:124px;border:1px solid var(--line);border-radius:14px;background:var(--plate);contain:layout paint}
.lm-pg{position:relative;display:flex;flex-direction:column;gap:7px;width:128px;height:96px;padding:14px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.lm-pg i{display:block;height:5px;border-radius:3px;background:var(--line-2)}.lm-pg .lm-s{width:62%}
.lm-sig{position:absolute;right:12px;bottom:15px;width:52px;height:24px;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lm-sig path{stroke-dasharray:1;stroke-dashoffset:0}
.lm-ln{position:absolute;right:10px;bottom:13px;width:60px;height:1px;background:var(--ink-3);transform-origin:0 50%}
.lm-b{flex-direction:column;align-items:stretch;gap:14px;padding:0 16px}
.lim-l .lm-r{display:flex;flex-direction:column;gap:7px;margin-top:0}
.lm-st{position:relative;display:flex;gap:5px}
.lm-st i{display:block;flex:1;height:6px;border-radius:3px;background:var(--line-2)}.lm-st .lm-s{flex:.55}
.lm-ul::after{content:"";position:absolute;left:0;right:0;bottom:-4px;border-bottom:1.5px dotted var(--ink-2);transform-origin:0 50%}
.lm-k{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;white-space:nowrap}
.lm-ok{color:var(--ink)}.lm-ok .tick{width:13px;height:13px;flex:none}.lm-no{color:var(--ink-3)}
.lm.on .lm-sig path{animation:draw 900ms var(--e-out) 200ms backwards}
.lm.on .lm-ln{animation:an-sweep 500ms var(--e-move) backwards}
.lm.on .lm-ul::after{animation:an-sweep var(--t-camera) var(--e-move) 150ms backwards}
.lm.on .lm-ok .tick path{animation:draw 500ms var(--e-out) 550ms backwards}
.lm.on .lm-no{animation:tm-fill var(--t-panel) var(--e-std) 800ms backwards}
.js:not(.calm) .lm-l:not(.in) .lm-sc{opacity:0;transform:translateY(12px)}
.lm-l.in .lm-sc{transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out);transition-delay:calc(var(--i) * 120ms)}
@media (max-width:767px){.lm{grid-template-columns:minmax(0,1fr);row-gap:20px}.lm-sc{height:112px}.lm-b{padding:0 max(16px,calc(50% - 124px))}}

/* r6 P6 · /product «Інші підключення»: a scene strip on each card instead of a long line */
.co-i .co-sc+h3{margin-top:20px}
.co-i em{position:static;display:inline-block;margin-left:8px;vertical-align:2px;padding:.15em .6em}
.co-sc{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;height:92px;border:1px solid var(--line);border-radius:12px;background:var(--plate);contain:layout paint}
.cs-dr ul{display:flex;flex-direction:column;gap:9px;width:78%}
.cs-dr li{position:relative;display:flex;align-items:center;gap:8px;isolation:isolate}
.cs-cb{display:grid;place-items:center;width:12px;height:12px;border:1px solid var(--ink-3);border-radius:3px;flex:none;color:var(--paper)}
.cs-dr .cs-on .cs-cb{border-color:var(--ink);background:var(--ink)}
.cs-cb .tick{width:10px;height:10px}
.cs-dr b{display:block;height:5px;border-radius:3px;background:var(--line-2);flex:1}
.cs-dr .cs-r2 b{flex:.6}.cs-dr .cs-on b{flex:.62;background:var(--ink-3)}
.cs-dr .cs-on::before{content:"";position:absolute;inset:-4px -6px;border-radius:6px;background:var(--paper);z-index:-1;transform-origin:0 50%}
.cs-to{margin-left:auto;padding:1px 7px;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);font-size:11px;line-height:15px;color:var(--ink);white-space:nowrap}
.cs-f{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:var(--paper)}
.cs-f svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cs-f .cs-cube{width:18px;height:21px;stroke-width:6}
.cs-ar{display:flex;flex-direction:column;align-items:center;font-size:15px;line-height:15px;color:var(--ink)}.cs-ar i{display:block;font-style:normal}
.cs-ar .a2{color:var(--ink-3)}
.cs-dx b{font-size:14px;font-weight:500;color:var(--ink)}
.cs-dl{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--paper);font-style:normal;font-size:11px;line-height:1}
.co-i.on .cs-dr .cs-on::before{animation:an-sweep var(--t-camera) var(--e-move) 100ms backwards}
.co-i.on .cs-cb .tick path{animation:draw 500ms var(--e-out) 350ms backwards}
.co-i.on .cs-to{animation:cs-in var(--t-panel) var(--e-out) 600ms backwards}
.co-i.on .cs-ar .a1{animation:cs-r 700ms var(--e-move) 150ms backwards}
.co-i.on .cs-ar .a2{animation:cs-l 700ms var(--e-move) 750ms backwards}
.co-i.on .cs-dl{animation:an-drop 700ms var(--e-out) 150ms backwards}
.co-i.on .cs-dx .cs-f{animation:cs-bump 420ms var(--e-tick) 650ms backwards}
@keyframes cs-in{from{opacity:0;transform:translateX(-6px)}}
@keyframes cs-r{50%{transform:translateX(5px)}}
@keyframes cs-l{50%{transform:translateX(-5px)}}
@keyframes cs-bump{50%{transform:scale(1.06)}}
.js:not(.calm) .co-l:not(.in) .co-sc{opacity:0;transform:translateY(10px)}
.co-l.in .co-sc{transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out);transition-delay:calc(var(--i) * 120ms)}

/* r6 P7 · /about timeline: the last milestone is «now» (a soft ring, twice, when it lights up) and the line after it is the future
   (dashed, fading out, never filled) */
.tl li:last-child i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--ink);opacity:0}
.js:not(.calm) .tl li:last-child.on i::after{animation:tl-now 1.4s var(--e-out) 350ms 2}
@keyframes tl-now{0%{opacity:.4;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
.tl li:last-child::before{background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 8px);-webkit-mask-image:linear-gradient(90deg,#000 20%,transparent 85%);mask-image:linear-gradient(90deg,#000 20%,transparent 85%)}
.tl li:last-child::after{display:none}
@media (max-width:1279px){.tl li:last-child::before{bottom:-40px;background:repeating-linear-gradient(180deg,var(--line-2) 0 4px,transparent 4px 8px);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}}
/* 05.10 English anchor ids: the old transliterated id (v4.py ANCHOR_ALIASES) is an empty target at the top of its section */
.al{position:absolute;top:0;left:0}

/* ── /yakist «Заміри якості» (bench-0510, 05.10.2026). Charts = HTML rows (names and numbers are real text) + SVG tracks in % units
   (no viewBox: discs stay round at every width; the geometry is in the markup, so the composed picture needs no JS).
   Motion is class-only: [data-draw] → .in draws each interval from its low end, the task dots land, the mean presses in; the toggle
   swaps .on between the two layers (the one without .on is the pre state) and v4.js re-sorts the rows with a FLIP. ── */
.sheet.open nav a:nth-child(6){transition-delay:200ms}
.p-yk .intro .lead{grid-column:1/9}
.yk-kpi{padding:88px 0 0}
.yk-st{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:28px}
.yk-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);row-gap:40px}
.yk-ki{position:relative;padding-top:24px}
.yk-ki::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
.yk-ki:nth-child(2){--r:1}.yk-ki:nth-child(3){--r:2}.yk-ki:nth-child(4){--r:3}
.yk-ki dt{font-size:56px;line-height:1;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.yk-ki dt a{display:inline-flex;align-items:baseline;color:var(--ink);border-radius:6px}
.yk-ki dt small{margin-left:8px;font-size:20px;line-height:1;letter-spacing:0;color:var(--ink-3)}
.yk-sx{display:inline-block}
.yk-ki dd{margin-top:16px;max-width:32ch;font-size:16px;line-height:24px;color:var(--ink-2)}
.yk-m{display:block;margin-top:8px;font-size:13px;line-height:18px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.yk-b{padding:var(--st) 0 0}
.yk-bh{align-items:end;row-gap:24px}
.yk-bl{grid-column:1/6}.yk-bl .tag{margin-bottom:16px}
.yk-bd{grid-column:7/13}.yk-bd>p:first-child{font-size:18px;line-height:28px;color:var(--ink-2)}.yk-bd .meta{margin-top:12px}
.yk-fig{margin-top:56px}
.yk-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-bottom:16px}
.yk-ct{font-size:15px;line-height:22px;font-weight:500}
.yk-dir{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:13px;line-height:18px;color:var(--ink-3)}
/* segmented toggle (same look as the header nav): one pill under the pressed button */
.yk-tg{position:relative;display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px}
.yk-tg i{position:absolute;left:3px;top:3px;height:34px;width:0;border-radius:999px;background:var(--plate);transition:transform 380ms var(--e-out),width 380ms var(--e-out)}
@media (prefers-color-scheme:dark){.yk-tg i{background:#1c1c1c}}
.yk-tg button{position:relative;z-index:1;height:34px;padding:0 15px;border:0;border-radius:999px;background:none;color:var(--ink-2);font-size:15px;line-height:20px;font-weight:500;cursor:pointer;transition:color var(--t-micro) var(--e-std)}
.yk-tg button[aria-pressed=true]{color:var(--ink)}@media (hover:hover){.yk-tg button:hover{color:var(--ink)}}
html:not(.js) .yk-tg{display:none}
/* rows */
.yk-rows{position:relative}
.yk-r{display:grid;grid-template-columns:208px minmax(0,1fr) 136px;column-gap:28px;align-items:center;padding:12px 0;border-top:1px solid var(--line);transition:transform 640ms var(--e-move)}
.yk-rows>.yk-r:last-child{border-bottom:1px solid var(--line)}
.yk-axr{border:0;padding:6px 0 0}
.yk-n b{display:block;font-size:16px;line-height:22px;font-weight:500}
.yk-n span{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--ink-3)}
.yk-me .yk-n b{font-weight:600}
.yk-t{position:relative;height:40px}
.yk-t>svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.yk-axr .yk-t{height:16px}
.yk-ax text{font-size:12px;fill:var(--ink-3);text-anchor:middle;font-variant-numeric:tabular-nums}
.yk-gl line{stroke:var(--line);stroke-width:1}
.yk-gl .yk-z{stroke:var(--ink-3);stroke-dasharray:3 3}
.yk-v{text-align:right;font-variant-numeric:tabular-nums}
.yk-v b{font-size:22px;line-height:26px;font-weight:500;letter-spacing:-.01em}
.yk-v small{display:block;margin-top:1px;font-size:13px;line-height:18px;color:var(--ink-3)}
.yk-v em{display:block;font-style:normal;font-size:13px;line-height:18px;color:var(--ink-2)}
.yk-v .yk-ya,.yk-v .yk-yf{display:block}
.yk-v .yk-yf,.yk-fn .yk-yf{display:none}
.yk-f .yk-v .yk-ya,.yk-f .yk-fn .yk-ya{display:none}.yk-f .yk-v .yk-yf{display:block}.yk-f .yk-fn .yk-yf{display:inline}
.js:not(.calm) .yk-v .yk-ya,.js:not(.calm) .yk-v .yk-yf{animation:yk-sw 420ms var(--e-out)}
@keyframes yk-sw{from{opacity:0;transform:translateY(4px)}}
/* marks */
.yk-ci{fill:var(--ink);opacity:.12;transform-box:fill-box;transform-origin:0 50%;transition:transform 160ms var(--e-exit),opacity 160ms var(--e-exit)}
.yk-d{fill:var(--ink);opacity:.26;transform-box:fill-box;transform-origin:50% 50%;transition:opacity 160ms var(--e-exit),transform 160ms var(--e-exit)}
.yk-mn{fill:var(--ink-3);stroke:var(--paper);stroke-width:2.5;transform-box:fill-box;transform-origin:50% 50%;transition:transform 160ms var(--e-exit)}
.yk-me .yk-ci{opacity:.2}.yk-me .yk-d{opacity:.42}.yk-me .yk-mn{fill:var(--ink)}
.yk-fp .yk-ci{opacity:.2}.yk-fp .yk-mn{fill:var(--ink)}.yk-fp .yk-w .yk-mn{fill:var(--paper);stroke:var(--ink);stroke-width:2}
@media (prefers-color-scheme:dark){.yk-ci{opacity:.18}.yk-d{opacity:.34}.yk-me .yk-ci,.yk-fp .yk-ci{opacity:.28}.yk-me .yk-d{opacity:.55}}
.yk-l:not(.on) .yk-ci{transform:scaleX(0);opacity:0}.yk-l:not(.on) .yk-d{opacity:0;transform:translateY(-6px)}.yk-l:not(.on) .yk-mn{transform:scale(0)}
.js:not(.calm) .yk-fig:not(.in) .yk-ci{transform:scaleX(0);opacity:0}
.js:not(.calm) .yk-fig:not(.in) .yk-d{opacity:0;transform:translateY(-6px)}
.js:not(.calm) .yk-fig:not(.in) .yk-mn{transform:scale(0)}
.yk-fig.in .yk-l.on .yk-ci{transition:transform 900ms var(--e-out) calc(var(--i,0) * 70ms),opacity 240ms var(--e-std) calc(var(--i,0) * 70ms)}
.yk-fig.in .yk-l.on .yk-d{transition:opacity 360ms var(--e-out) calc(260ms + var(--i,0) * 70ms + var(--j,0) * 26ms),transform 520ms var(--e-out) calc(260ms + var(--i,0) * 70ms + var(--j,0) * 26ms)}
.yk-fig.in .yk-l.on .yk-mn{transition:transform 520ms var(--e-tick) calc(640ms + var(--i,0) * 70ms)}
.yk-d:nth-of-type(2){--j:1}.yk-d:nth-of-type(3){--j:2}.yk-d:nth-of-type(4){--j:3}.yk-d:nth-of-type(5){--j:4}.yk-d:nth-of-type(6){--j:5}.yk-d:nth-of-type(7){--j:6}.yk-d:nth-of-type(8){--j:7}
.yk-d:nth-of-type(9){--j:8}.yk-d:nth-of-type(10){--j:9}.yk-d:nth-of-type(11){--j:10}.yk-d:nth-of-type(12){--j:11}.yk-d:nth-of-type(13){--j:12}.yk-d:nth-of-type(14){--j:13}.yk-d:nth-of-type(15){--j:14}.yk-d:nth-of-type(16){--j:15}
.calm .yk-l:not(.on){display:none}
/* legend + notes */
.yk-lg{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:13px;line-height:18px;color:var(--ink-3)}
.yk-lg span{display:inline-flex;align-items:center;gap:8px}
.yk-lg i{display:inline-block;flex:none}
.yl-m{width:12px;height:12px;border-radius:50%;background:var(--ink)}
.yl-c{width:28px;height:8px;border-radius:4px;background:var(--ink);opacity:.22}
.yl-d{width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.5}
.yl-ok,.yl-no,.yl-na{width:12px;height:12px;border-radius:3px}
.yl-ok{background:var(--ink)}.yl-no{box-shadow:inset 0 0 0 1.5px var(--line-2)}.yl-na{border:1.5px dashed var(--ink-2)}
.yk-fn{margin-top:10px}
.yk-note{max-width:64ch;margin-top:28px;font-size:16px;line-height:24px;color:var(--ink-2)}
/* other metrics: small multiples */
.yk-mh{margin-top:104px}
.yk-mc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:24px}
.yk-c{display:flex;flex-direction:column;padding:24px 24px 22px;border:1px solid var(--line);border-radius:16px}
.yk-ch{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:17px;line-height:24px;font-weight:600}
.yk-lb{flex:none;font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3)}
.yk-cd{margin-top:6px;font-size:14px;line-height:20px;color:var(--ink-3)}
.yk-cr{display:grid;row-gap:10px;margin-top:18px}
.yk-cr li{display:grid;grid-template-columns:116px minmax(0,1fr) 78px;column-gap:12px;align-items:center;min-height:28px}
.yk-cn{font-size:13.5px;line-height:18px;color:var(--ink-2)}
.yk-cr .yk-me .yk-cn{color:var(--ink);font-weight:600}
.yk-cb{position:relative;height:18px}
.yk-bs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.yk-bg{fill:var(--plate)}
@media (prefers-color-scheme:dark){.yk-bg{fill:#181818}}
.yk-bar{fill:var(--ink-3);transform-box:fill-box;transform-origin:0 50%}
.yk-me .yk-bar{fill:var(--ink)}
.yk-wh{stroke:var(--ink);stroke-width:1.2;opacity:.6}
.yk-cv{text-align:right;font-size:14px;line-height:18px;font-weight:500;font-variant-numeric:tabular-nums}
.yk-cv small{display:block;font-size:12px;line-height:16px;font-weight:400;color:var(--ink-3)}
.yk-cf{margin-top:auto;padding-top:16px;font-size:12.5px;line-height:18px;color:var(--ink-3)}
.yk-cb:has(.yk-us){height:auto}
.yk-us{display:flex;flex-wrap:wrap;gap:3px;padding:2px 0}
.yk-us .yk-u{display:block;width:8px;height:8px;border-radius:2px}
.yk-c4 .yk-us{gap:3px}.yk-c4 li{align-items:start}.yk-c4 .yk-cv small{white-space:nowrap}
.yq-ok,.yq-x{background:var(--ink-3)}.yk-me .yq-ok{background:var(--ink)}.yk-us .yq-x{background:var(--ink)}
.yq-o{box-shadow:inset 0 0 0 1px var(--line-2)}
.yq-mm{box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.yk-us .yq-no{box-shadow:inset 0 0 0 1px var(--ink-2);background:linear-gradient(to top right,transparent calc(50% - .75px),var(--ink-2) calc(50% - .75px),var(--ink-2) calc(50% + .75px),transparent calc(50% + .75px))}
.js:not(.calm) .yk-c:not(.in) .yk-bar{transform:scaleX(0)}
.js:not(.calm) .yk-c:not(.in) .yk-wh{opacity:0}
.js:not(.calm) .yk-c:not(.in) .yk-us{clip-path:inset(0 100% 0 0)}
.yk-c.in .yk-bar{transition:transform 900ms var(--e-out) calc(var(--i) * 70ms)}
.yk-c.in .yk-wh{transition:opacity 300ms var(--e-std) calc(600ms + var(--i) * 70ms)}
.yk-c.in .yk-us{transition:clip-path 900ms var(--e-out) calc(var(--i) * 70ms)}
/* МКТ: one square per task, same column = same task for every system */
.yk-g .yk-t{height:auto}
.yk-cl,.yk-cn2{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:5px;max-width:560px}
.yk-cl .yk-sq{display:block;aspect-ratio:1;border-radius:4px;background:var(--ink-3)}
.yk-me .yk-cl .yq-ok{background:var(--ink)}
.yk-cl .yq-no{background:none;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.yk-cl .yq-na{background:none;border:1.5px dashed var(--ink-2)}
.yk-cn2 span{font-size:11px;line-height:14px;text-align:center;color:var(--ink-3);font-variant-numeric:tabular-nums}
.yk-cn2 .yn15,.yk-cn2 .yn39{color:var(--ink);font-weight:600}
.yk-nr>.meta{font-size:12px;text-align:right}
.yk-v .yk-of{font-size:15px;font-weight:400;color:var(--ink-3)}
.js:not(.calm) .yk-g:not(.in) .yk-cl{clip-path:inset(0 100% 0 0)}
.yk-g.in .yk-cl{transition:clip-path 1100ms var(--e-out) calc(var(--i) * 90ms)}
.yk-cl .yk-sq{transition:box-shadow var(--t-ui) var(--e-std),transform var(--t-ui) var(--e-out)}
#mkt:has(.yk-q15:hover) .yk-sq.yn15,#mkt:has(.yk-q39:hover) .yk-sq.yn39{transform:scale(1.14);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
/* sample tasks */
.yk-sm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:24px}
.yk-q{padding:28px;border:1px solid var(--line);border-radius:16px}
.yk-qk{font-size:13px;line-height:18px;color:var(--ink-3)}
.yk-qs{margin-top:6px;font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em}
.yk-qq{margin-top:16px;font-size:15.5px;line-height:24px;color:var(--ink-2)}
.yk-op{display:grid;row-gap:8px;margin-top:16px}
.yk-op li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;padding:10px 12px;border-radius:10px;background:var(--plate);font-size:15px;line-height:22px}
@media (prefers-color-scheme:dark){.yk-op li{background:#151515}}
.yk-op li.yk-ok{background:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.yk-op b{font-weight:600}
.yk-key{display:inline-flex;align-items:center;height:20px;margin-left:8px;padding:0 7px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:11.5px;line-height:1;font-weight:500;vertical-align:1px}
.yk-who{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.yk-who em{font-style:normal;font-size:12px;line-height:16px;padding:3px 8px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2)}
.yk-who em.yk-mec{border-color:var(--ink);color:var(--ink);font-weight:500}
.yk-nm{margin-top:12px}
.yk-qn{margin-top:16px;font-size:14.5px;line-height:22px;color:var(--ink-2)}
.yk-at{margin-top:16px}
.js:not(.calm) .yk-q:not(.in) .yk-op li{opacity:0;transform:translateY(8px)}
.js:not(.calm) .yk-q:not(.in) .yk-who em{opacity:0;transform:scale(.85)}
.yk-q.in .yk-op li{transition:opacity 360ms var(--e-out) calc(var(--i) * 80ms),transform 520ms var(--e-out) calc(var(--i) * 80ms)}
.yk-q.in .yk-who em{transition:opacity 240ms var(--e-out) calc(420ms + var(--i) * 80ms),transform 420ms var(--e-tick) calc(420ms + var(--i) * 80ms)}
/* all numbers */
.yk-all{margin-top:40px}
.yk-tw{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line);border-radius:2px}
.yk-tb{width:100%;min-width:900px;border-collapse:collapse;font-size:13.5px;line-height:19px;font-variant-numeric:tabular-nums}
.yk-tb th,.yk-tb td{padding:10px 14px 10px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.yk-tb thead th{font-weight:600}
.yk-tb tbody th{max-width:280px;font-weight:400;color:var(--ink-2)}
.yk-tb td:nth-child(2){font-weight:600}
.yk-tb td span{font-weight:400;color:var(--ink-3)}
/* method */
.yk-me2{padding:var(--st) 0 0}
.yk-pl{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gap);margin-top:48px}
.yk-pl::before,.yk-pl::after{content:"";position:absolute;left:20px;right:calc(20% - 20px);top:20px;height:1px;background:var(--line-2)}
.yk-pl::after{background:var(--ink);transform-origin:0 50%}
.yk-pl li{position:relative;padding-top:56px}
.yk-pn{position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ink);border-radius:50%;background:var(--ink);color:var(--paper);font-size:13px;line-height:1;font-variant-numeric:tabular-nums}
.yk-pl b{display:block;font-size:17px;line-height:24px;font-weight:600}
.yk-pl li>span:last-child{display:block;margin-top:6px;max-width:26ch;font-size:14.5px;line-height:21px;color:var(--ink-2)}
.js:not(.calm) .yk-pl:not(.in)::after{transform:scaleX(0)}
.js:not(.calm) .yk-pl:not(.in) li{opacity:0;transform:translateY(10px)}
.js:not(.calm) .yk-pl:not(.in) .yk-pn{transform:scale(.6);background:var(--paper);color:var(--ink-3);border-color:var(--line-2)}
.yk-pl.in::after{transition:transform 1500ms var(--e-move) 120ms}
.yk-pl.in li{transition:opacity 420ms var(--e-out) calc(120ms + var(--i) * 280ms),transform 620ms var(--e-out) calc(120ms + var(--i) * 280ms)}
.yk-pl.in .yk-pn{transition:transform 460ms var(--e-tick) calc(200ms + var(--i) * 280ms),background-color 300ms var(--e-std) calc(320ms + var(--i) * 280ms),color 300ms var(--e-std) calc(320ms + var(--i) * 280ms),border-color 300ms var(--e-std) calc(320ms + var(--i) * 280ms)}
.yk-md{margin-top:80px;row-gap:40px}
.yk-mdl{grid-column:1/6}.yk-dl{grid-column:7/13}
.yk-ps{margin-top:16px}
.yk-ps li{display:grid;row-gap:3px;padding:14px 0;border-top:1px solid var(--line)}
.yk-ps li:last-child{border-bottom:1px solid var(--line)}
.yk-ps b{font-size:15.5px;line-height:22px;font-weight:600}
.yk-ps code{font:500 13px/18px Inter,ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.yk-ps span{font-size:13.5px;line-height:19px;color:var(--ink-3)}
.yk-dl>div{padding:16px 0;border-top:1px solid var(--line)}
.yk-dl>div:last-child{border-bottom:1px solid var(--line)}
.yk-dl dt{font-size:15.5px;line-height:22px;font-weight:600}
.yk-dl dd{margin-top:6px;font-size:15px;line-height:23px;color:var(--ink-2);overflow-wrap:anywhere}
.yk-tm{margin-top:32px;max-width:96ch;font-size:12.5px;line-height:18px}
.p-yk .mz{padding-bottom:var(--sb)}
@media (max-width:1023px){
  .yk-k{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yk-bl,.yk-bd,.yk-mdl,.yk-dl{grid-column:1/-1}
  .yk-r{grid-template-columns:160px minmax(0,1fr) 124px;column-gap:20px}
  .yk-mc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yk-sm{grid-template-columns:1fr}
  .yk-pl{grid-template-columns:1fr;row-gap:24px}
  .yk-pl::before,.yk-pl::after{left:20px;right:auto;top:20px;bottom:40px;width:1px;height:auto;transform-origin:50% 0}
  .js:not(.calm) .yk-pl:not(.in)::after{transform:scaleY(0)}
  .yk-pl li{min-height:40px;padding:8px 0 0 60px}
  .yk-pl li>span:last-child{max-width:52ch}
  .yk-md{margin-top:56px}}
@media (max-width:767px){
  .p-yk .intro .lead{grid-column:1/-1}
  .yk-kpi{padding-top:56px}
  .yk-k{row-gap:32px}
  .yk-ki dt{font-size:40px}.yk-ki dt small{margin-left:5px;font-size:16px}
  .yk-ki dd{font-size:14.5px;line-height:21px}
  .yk-fig{margin-top:40px}
  .yk-cap{flex-direction:column;align-items:flex-start}
  .yk-tg button{height:32px;padding:0 13px;font-size:14px}.yk-tg i{height:32px}
  .yk-r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "t t";row-gap:8px;padding:14px 0}
  .yk-n{grid-area:n}.yk-v{grid-area:v}.yk-t{grid-area:t}
  .yk-axr{grid-template-areas:"t t";padding-top:4px}.yk-axr>span{display:none}
  .yk-v{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;column-gap:8px}
  .yk-v .yk-ya{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;column-gap:8px}
  .yk-v .yk-yf,.yk-f .yk-v .yk-ya{display:none}
  .yk-f .yk-v .yk-yf{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;column-gap:8px}
  .yk-v small{display:inline;margin:0}
  .yk-v em{flex-basis:100%;text-align:right}
  .yk-mh{margin-top:72px}
  .yk-mc{grid-template-columns:1fr}
  .yk-c{padding:20px 18px}
  .yk-cr li{grid-template-columns:104px minmax(0,1fr) 74px;column-gap:10px}
  .yk-cl,.yk-cn2{gap:3px}.yk-cl .yk-sq{border-radius:3px}.yk-cn2 span{font-size:9px;line-height:12px}
  .yk-q{padding:20px 18px}
  .yk-pl li>span:last-child{font-size:14px}}
/* ---- N06 (09.10): topic pages (/ai-for-lawyers, /case-law, /legislation, /documents, /faq, /en) and the footer column
   «Для юристів» (the English footer of BB-83AJ has the same four columns). Placement only: the pages reuse .intro, the legal-page text column (.lg) and .fin as they are. */
.p-kb .legal{padding-top:0}.p-kb .lg>.meta{margin-top:20px}
@media (min-width:1024px){.p-kb .lg{grid-column:1/9}
  .f-b{grid-column:1/4}.f-b p{max-width:30ch}
  .f-c:nth-of-type(1){grid-column:4/6}.f-c:nth-of-type(2){grid-column:6/8}.f-c:nth-of-type(3){grid-column:8/10}.f-l{grid-column:10/13}}
@media (max-width:1023px){.f-c:nth-of-type(3){grid-column:span 6;margin-top:40px}}
@media (max-width:767px){.f-c:nth-of-type(3){grid-column:span 2}}

@media (pointer:coarse){.top-a .btn-s{height:44px}.lg .toc{row-gap:0}.lg .toc a{display:flex;align-items:center;min-height:44px}.lg #more+ul li+li{margin-top:0}.lg #more+ul a{display:inline-block;padding:9px 0}}

/* BB-83AJ: «(UA)» after links from the English chrome to Ukrainian-only pages */
.ua{opacity:.6;margin-left:.3em}