/* 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=fedc0a84e1) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(f/inter-500.woff2?v=5260eedba1) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(f/inter-600.woff2?v=b62b57c80a) format("woff2")}
/* LAND3 jury r2 (performance: CLS 0.19 on /product when Inter arrives after the first paint): a local fallback with Inter's
   metrics, so the swap moves no line. size-adjust per weight = the width of Ukrainian text in Inter over Arial (Liberation Sans has
   Arial's metrics), measured in Chromium 17.10: 400 101.97 %, 500 103.25 % (Arial has no 500), 600 97.63 % over Arial Bold;
   ascent/descent = Inter's 2728/680 of 2816 units over size-adjust */
@font-face{font-family:"Inter Fallback";font-weight:400;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");size-adjust:101.97%;ascent-override:95.00%;descent-override:23.68%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");size-adjust:103.25%;ascent-override:93.83%;descent-override:23.39%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");size-adjust:97.63%;ascent-override:99.23%;descent-override:24.73%;line-gap-override:0%}
:root{--paper:#fff;--ink:#0a0a0a;--ink-2:#404040;--ink-3:#6b6b6b;--line:#e6e6e6;--line-2:#d0d0d0;--ul:#8a8a8a;--field:#8f8f8f;--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(.19,1,.22,1);  /* LAND3 r5 (motion): was an overshoot spring; no bounce on legal statuses or avatars */
  --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;--ul:#7a7a7a;--field:#6a6a6a;--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,"Inter Fallback",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(--ul);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}
/* LAND2 r4 (a11y P3): at 320 px with WCAG text spacing a long button label wraps instead of widening the page */
@media (max-width:359px){main .btn-l{white-space:normal;height:auto;min-height:48px;text-align:center}}
/* LAND2 r4 (a11y P1): the reveal's clip-path cut the keyboard focus ring off the menu links (2.4.7) */
.sheet nav a:focus-visible{clip-path:none}
.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) 5 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;transition-delay:var(--t-exit)}  /* LANDSHIP r6 (design): the new status line enters after the old one has left, never over it */
.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}}
/* LANDSHIP a11y r2: form boundaries 3:1 (WCAG 1.4.11, --field); the status dot pulses 5 times, not forever; in forced colours the rail keeps its bars */
@media (forced-colors:active){.step i{background:GrayText}.step[aria-current=step] i b,.step.done i b{background:Highlight}.step{border-top:1px solid CanvasText}}
/* 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:44px;height:44px;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-h .num-pf{margin-top:16px;max-width:42ch}.num-h .more{margin-top:20px}  /* LANDSHIP r5 (marketing): the proof link under the scale */
.tmb .team-cap,.lim-l .tmb .team-cap{margin:10px 0 0;font-size:13px;line-height:18px;color:var(--ink-3)}/* LANDSHIP r3 (mobile): on /product .lim-l .tmb p reset it to ink, flush */  /* LAND3 r5 (brand, visuals): the drawn panel is labelled like every other one */
.num-sum{margin-top:20px;max-width:30ch;font-size:20px;line-height:30px;color:var(--ink-2)}  /* LAND3 18.10: the scale in words */
@media (max-width:767px){.num-sum{font-size:18px;line-height:28px}}
.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:color-mix(in srgb,#297acc 78%,#000);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:color-mix(in srgb,#297acc 55%,#fff)}
@media (prefers-color-scheme:dark){.vault{--v-acc:color-mix(in srgb,#297acc 55%,#fff);--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-cap{margin:28px 0 0;font-size:13px;line-height:18px;color:var(--v-ink-2)}
.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}
.vsec-t{max-width:16ch}  /* LAND2 r5: the story's own heading (it follows «Поради…» now) */
@media (max-width:1023px){.vsec-t{margin-bottom:8px}}
@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; nine marks since LANDSHIP 22.10): a 3 x 3 hairline grid (2 columns under 720 px, the ninth cell spans both). 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 (light file / official
   dark file), drawn as one-colour silhouettes (below); each is sized for equal visible area (--h = image box height, --k = breakpoint scale). */
.sw{--k:1;display:grid;grid-template-columns:repeat(3,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(3n)){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:21px}.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) */
/* LANDSHIP 21.10 night (decisions 6 and 9 of 13): Web3 Resilience Lab joins the wall; the wall reads in one colour. On /about's
   timeline Web3 keeps its own white mark on a dark tile, and the timeline marks keep grayscale. */
.bdg-w3rl{--h:22px;padding:7px 10px;border-radius:6px;background:#0b0b0b}
.l2g-lg .bdg img{filter:grayscale(1)}
/* LANDSHIP 22.10 jury r9–r10 (two flat rounds, root cause: grayscale() kept two-tone marks two-tone: AWS's smile, Cloudflare's cloud,
   Startup Kitchen's slashes stayed grey; Web3 was a black block in light, Google a grey lockup): ONE rule for the whole wall, every
   mark a true silhouette of its own shape, black in light and white in dark (every file has a transparent ground). Web3 is the bare
   mark here, sized a step under equal area (23 px; it read as the heaviest mark at 27). */
.sw-m .bdg-w3rl{--h:23px;padding:0;border-radius:0;background:none}
.sw-m img{filter:brightness(0)}
@media (prefers-color-scheme:dark){.sw-m img{filter:brightness(0) invert(1)}}
@media (prefers-color-scheme:light){.l2g-lg .bdg img{filter:grayscale(1) brightness(.62)}.l2g-lg .bdg-w3rl img{filter:none}}
.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:"»"}
@media (max-width:1023px){.lead-q p{text-indent:0}}  /* LANDSHIP 21.10 night (audit B #24): the hanging «« sat inside the 16 px phone gutter */
.lead-q footer{display:flex;flex-direction:column;gap:2px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;line-height:22px;font-weight:400;letter-spacing:0;color:var(--ink-3)}.lead-q footer b{font-size:16px;line-height:24px;font-weight:600;color:var(--ink)}  /* LAND3 (founder 17.10 «відстані погані»): name and title as one signature block under a hairline, on the quote's left edge */
.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;grid-row:1/span 2}
.apply>.g{grid-template-rows:auto 1fr}
.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(--field);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)}
/* LANDSHIP r6 (a11y): forced colours drop box-shadow, so a transparent outline carries the ring there */
.fld input:focus,.sel select:focus{outline:2px solid transparent;outline-offset:2px}
.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(--field);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(--field);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}
/* LANDSHIP 21.10 night (audit B #11): the box rarely opens, and the always-held 73 px left a blank band at the foot of the card;
   the slot now takes no room (nor the form's 24 px gap) until v4.js marks .ts-on, when Cloudflare actually shows the box */
.form .ts-slot{height:0;margin-top:-24px;overflow:hidden}.form.ts-on .ts-slot{height:73px;margin-top:0;overflow:visible}
.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)}
/* LANDSHIP 21.10 night (auditor D #13): /terms and /legal/echr ran 95–100 characters a line; their text keeps a reading measure,
   headings and tables the full column */
.lg-m p,.lg-m ul,.lg-m ol{max-width:68ch}
/* LANDSHIP 21.10 night (auditor D #14): /terms (13 sections, ~13 000 px) keeps its contents at hand: from 1280 px a sticky list
   beside the text with the section being read marked (v4.js), below that a «До змісту» link at the end of each section */
.lg-side{display:none}
.lg .lg-up{margin-top:20px;font-size:14px;line-height:20px}.lg .lg-up a{color:var(--ink-3)}
@media (pointer:coarse){.lg .lg-up{margin-top:8px}.lg .lg-up a{display:inline-block;padding:12px 0}}
@media (min-width:1280px){.lg.lg-t{grid-column:5/13}.lg-side{display:block;grid-column:1/4;grid-row:1}
  .lg-side nav{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;font-size:14px;line-height:20px}
  .lg-side p{margin-bottom:8px;color:var(--ink);font-weight:500}
  .lg-side a{display:block;padding:5px 0 5px 12px;border-left:1px solid var(--line);color:var(--ink-3)}
  .lg-side a[aria-current]{color:var(--ink);border-left-color:var(--ink)}
  .lg .lg-up{display:none}
  .legal .lg.lg-t .toc{display:none}}  /* LANDSHIP r5 (founder-eye): the sticky list is the contents here; two lists of the same 13 items */
@media (min-width:1280px) and (hover:hover){.lg-side a:hover{color:var(--ink)}}
.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}
.lg .toc+p{margin-top:32px}
/* LANDSHIP 21.10 night (auditor D #15): two-column contents read down each column (1–7, then 8–13), not across the rows */
.lg .toc:not(.toc-row){display:block;columns:2;column-gap:24px}.lg .toc:not(.toc-row)>a{display:flex;align-items:center;break-inside:avoid;padding-bottom:6px}
@media (max-width:767px){.lg .toc:not(.toc-row){columns:1}}
/* LANDSHIP r3 (founder-eye): a three-link contents (/legal/echr) runs in one line, not two columns with an orphan */
.lg .toc.toc-row{display:flex;flex-wrap:wrap;gap:6px 24px}  /* LANDSHIP (design r2): the text after the contents starts like a section, not on the rule */
@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(--ul)}
@media (prefers-color-scheme:dark){.p-legal .lg a{text-decoration-color:var(--ink-3)}}  /* LANDSHIP 21.10 night (auditor D #34): the legal links' underline was near invisible in dark */
.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}
  .ap-r{grid-row:auto}
  .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}}
/* QUAL7 23.10 (founder-eye review): nine marks stay 3 x 3 on a phone too; two columns left Web3 Resilience Lab alone on a full row */
@media (max-width:719px){.sw{--k:.62}.sw-a{gap:8px;padding:20px 6px 16px}.sw-c{min-height:32px;font-size:12px;line-height:16px}.sw-x{top:8px;right:8px}}
@media (max-width:374px){.sw-c .nw{white-space:normal}}  /* «Стартап-програма» breaks after its hyphen only where one line is wider than the cell */
@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:28px}
  /* LANDSHIP r7 (mobile: with Safari's bars a 390×844 phone shows about 664 px, so a rail under the film was off the first screen):
     on phones the steps and the pause control sit above the film */
  .p-home .st-w{display:flex;flex-direction:column}.p-home .st-w>.rail{order:-1;margin:0 0 12px}
  .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;-webkit-mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 44px),transparent)}/* LANDSHIP 21.10 night: a line that scrolls out at the top fades instead of being cut */.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-r{margin-top:32px}
  .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:color-mix(in srgb,#297acc 55%,#fff)}}
.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,.co-i h4{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}
/* LAND2 reader r4: «Коротко для адвоката» under the lead */
.sec-sh{grid-column:1/8;margin-top:40px;max-width:60ch}
.sec-sh-h{font-size:14px;line-height:20px;font-weight:500;color:var(--ink-3)}
.sec-sh ul{margin-top:12px}
.sec-sh li{display:grid;grid-template-columns:18px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:16px;line-height:24px;color:var(--ink-2)}
.sec-sh li:last-child{border-bottom:1px solid var(--line)}
.sec-sh li i{width:7px;height:7px;margin-top:9px;border-radius:50%;background:var(--blue)}
.sec-sh p{margin-top:16px}
@media (max-width:1023px){.sec-sh{grid-column:1/-1}}
.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}
/* LANDSTYLE (13.10): the DPA card closes the trust row, full width: the drawn contract page left, the founder's DPA line right */
.sf-dpa{grid-column:1/-1}
@media (min-width:768px){.sf-dpa{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:28px;align-items:start}
  .sf-dpa h3{margin-top:0}.sf-dpa p{grid-column:2;max-width:68ch}}
.sf-dpa .sf-i{grid-row:1/4}
@media (min-width:768px){.sf-dpa .more{grid-column:2;margin-top:14px}}  /* r3: «Запросити DPA» under the text, on one line */
.sf-dpa .more{white-space:nowrap}
.sf-dpa path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--e-out)}
.js:not(.calm) .sf-dpa:not(.in) path{stroke-dashoffset:1}
.sf-dpa.in .dp-l{transition-delay:.35s}.sf-dpa.in .dp-s{transition-delay:.8s;transition-duration:1.1s}
.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(--ul)}
.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}
/* LAND3 jury r2 (brand, AI-slop visuals): this card is the site's own (not a picture of the app), so its citation is the site's:
   ink with a #297ACC underline, not the portal's indigo #1527C7 (which stays inside the app pictures, as the portal draws it) */
.an-ct{color:var(--ink);text-decoration-color:var(--blue);text-decoration-thickness:1.5px}
.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){.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,.co-i .co-sc+h4{margin-top:20px}
.co-i em{position:static;display:inline-block;margin-left:8px;vertical-align:2px;padding:.15em .6em}
/* LAND2 r4 (SEO P2): the «За запитом» badge sits beside the heading, not inside it */
.co-th{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;margin-top:20px}.co-th h3,.co-th h4{margin-top:0}.co-th em{margin-left:0}
.co-th .co-g{align-self:center;margin-right:2px}  /* LANDSHIP 21.10 night: the service glyph before the name */
.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;flex:1;min-width:0;font-size:12px;line-height:16px;font-weight:400;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-dr .cs-on b{color:var(--ink);font-weight:500}
.cs-dr .cs-to{font-size:12px}
.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}
.js:not(.calm) .co-l:not([data-k]):not(.all) .cs-to{opacity:0}
.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{overflow:visible}/* LANDSHIP r3 (mobile): dots at 0 and 10 drawn whole, not cut by the plot edge */
.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:.48;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:.62}.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}
/* LANDSHIP r3 (design): a single-task dot is a data mark, ≥ 3:1 on its paper (#8C8C8C light, #8A8A8A dark) */
@media (prefers-color-scheme:dark){.yk-ci{opacity:.18}.yk-d{opacity:.56}.yk-me .yk-ci,.yk-fp .yk-ci{opacity:.28}.yk-me .yk-d{opacity:.72}}
.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}
/* LANDSHIP (design r2): five cards leave no empty cell: the last one takes the rest of its row (3 or 2 columns) */
@media (min-width:768px){.yk-mc>.yk-c:last-child:nth-child(3n+2){grid-column:span 2}}
.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}
/* LANDSHIP (mobile r2): on a phone the row labels stay in view while the 900 px table scrolls sideways; the toggle's touch
   area grows to 44 px without changing how it looks (as .step, .pause and .dd summary) */
@media (max-width:767px){.yk-tb tbody th,.yk-tb thead th:first-child{position:sticky;left:0;z-index:1;max-width:150px;padding-right:12px;background:var(--paper);box-shadow:1px 0 0 var(--line)}}
@media (pointer:coarse){.yk-tg button::before{content:"";position:absolute;inset:-6px 0}}
@media (pointer:coarse){.sheet .meta a,.brand-f{position:relative}.sheet .meta a::before,.brand-f::before{content:"";position:absolute;inset:-12px -4px}}

.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,"Inter Fallback",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:.78;margin-left:.3em}
/* LAND1 (SEO r0): on the topic pages and guides the header button keeps its place and only fades in once the hero button has
   scrolled away, so its arrival moves nothing (Home's max-width reveal shifts «Увійти»: CLS) */
.t-late .top-cta{opacity:0;visibility:hidden;transform:translateY(-6px);transition: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-late.cta-on .top-cta{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (min-width:1024px){
  .t-late .top-a{position:relative}
  .t-late .top-cta{position:absolute;right:0;top:50%;margin-top:-19px}
  .t-late .top-a .link{transition:transform var(--t-ui) var(--e-out)}
  .t-late.cta-on .top-a .link{transform:translateX(calc(-1 * var(--cta-w, 168px) - 22px))}}
/* LAND1 (motion r4): /about moved only in its H1. The founder's quote rises after the title; the programme marks set in one by
   one as the wall enters (transform/opacity only; the base is the composed frame) */
.js:not(.calm) .ab-q{animation:rise 820ms var(--e-out) 260ms both}
.js:not(.calm) .sw[data-draw]:not(.in) .sw-i{opacity:0;transform:translateY(10px)}
.sw[data-draw].in .sw-i{transition:opacity 420ms var(--e-out),transform 620ms var(--e-out)}
.sw[data-draw].in .sw-i:nth-child(2){transition-delay:60ms}.sw[data-draw].in .sw-i:nth-child(3){transition-delay:120ms}.sw[data-draw].in .sw-i:nth-child(4){transition-delay:180ms}
.sw[data-draw].in .sw-i:nth-child(5){transition-delay:240ms}.sw[data-draw].in .sw-i:nth-child(6){transition-delay:300ms}.sw[data-draw].in .sw-i:nth-child(7){transition-delay:360ms}.sw[data-draw].in .sw-i:nth-child(8){transition-delay:420ms}.sw[data-draw].in .sw-i:nth-child(9){transition-delay:480ms}
/* LAND2: /product below 1024 px: each step shows its own card (.wk-ph, styled by kb.css, loaded for these widths only)
   instead of a clone of the desktop film; desktop keeps the scrubbed film */
.wk-ph{display:none}
@media (max-width:1023px){.p-prod .wk-slot{display:none}.p-prod .wk-ph{display:block;margin-top:24px;max-width:600px}
  .p-prod .wk-h{color:var(--ink)}}
/* LAND2: scroll stories below 1024 px (/security, /product ClickUp): no sticky stage; each caption carries its own copy of the
   stage (v4.js .sc-sv), heading and line first, the picture under them, no empty screens between steps */
@media (max-width:1023px){
  .story.sv-ph .sv-col{display:none}
  .story.sv-ph .scn{min-height:0;padding:32px 0 8px;justify-content:flex-start}
  .story.sv-ph .scn .sc-h,.story.sv-ph .scn .sc-t{color:var(--ink)}
  .story.sv-ph .sc-sv{margin-top:20px;container-type:inline-size}
  .story.sv-ph .sc-sv .sv{max-width:560px}
}
/* LAND2 (mobile r0): the stage copies set their type up so no UI text in them falls under 12 px at 390; disclosures on
   /security and /product are 44 px tall on phones; footer links stand 44 px apart with a 44 px hit area */
@media (max-width:1023px){.story.sv-ph .sc-sv .sv{font-size:clamp(12px,4.3cqw,15.5px)}}  /* LAND2 r2 (mobile P1): capped, 768–1023 px no longer 21 px */
@media (max-width:767px){.p-sec .dd summary,.p-prod .dd summary{min-height:44px;font-size:16px}
  .f-c{gap:20px}}
@media (max-width:767px) and (pointer:coarse){.f-c a::before{inset:-10px -8px}.f-c a:last-child::before{bottom:-10px}}
@media (max-width:1023px){.story.sv-ph .sc-sv .sv:not(.sk){aspect-ratio:560/640}}
/* LAND2 (motion r0): the typed caret blinks while the question is written and a little after, then rests (WCAG 2.2.2) */
.sv-js .s3 .cu-car{animation-iteration-count:4}  /* LAND2 r2 (a11y P1): 4 s, under the 5 s of WCAG 2.2.2 */
/* visual r0: no shadow under the matter card on dark */
@media (prefers-color-scheme:dark){.cu-card{box-shadow:none}}
/* LAND2 (a11y r0): small blue text in the light theme at 5:1 (#2470bd; #297acc stays for fills and rules); «За запитом» 12 px */
@media (prefers-color-scheme:light){:root{--sv-acc:#2470bd}}
.cx-n em{font-size:max(.78em,12px)}
/* LAND2 l2c: /security «Межі захисту»: where the data goes (браузер → база й файли · ЄС → Cloudflare → модель · ЄС), what is cipher
   (solid line) and what is text (blue dashed, only while the answer is prepared), the five limits of the list under it as
   numbered markers on the nodes; the list carries the same numbers. Base = the finished frame; [data-draw] sets the entry once */
.l2c-sf{margin:0 0 32px}
.l2c-sc{display:flex;flex-direction:column}
.l2c-sn{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--plate)}
.l2c-sh{display:flex;align-items:center;gap:8px;font-size:15px;line-height:20px}
.l2c-sh b{font-weight:500;color:var(--ink)}
.l2c-tg{display:inline-flex;align-items:center;height:22px;margin-left:auto;padding:0 9px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;line-height:1;color:var(--ink-2);white-space:nowrap}
.l2c-st{margin-top:6px;font-size:13px;line-height:19px;color:var(--ink-2)}
.l2c-lm{display:grid;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.l2c-lm li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:13px;line-height:19px;color:var(--ink)}
.l2c-lm i,.l2c-sf+.mz-l li>i{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.l2c-se{position:relative;display:flex;align-items:center;min-height:46px;margin-left:24px;padding:8px 0 8px 20px;font-size:12.5px;line-height:17px;color:var(--ink-3)}
.l2c-se::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:2px solid var(--ink-3)}
.l2c-eo::before{border-left-style:dashed;border-left-color:var(--blue)}
.l2c-se span{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.l2c-kc,.l2c-ko{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--line-2);border-radius:6px;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink-2)}
.l2c-ko{border:1px dashed var(--blue);color:var(--blue)}
@media (prefers-color-scheme:dark){.l2c-ko{color:color-mix(in srgb,#297acc 55%,#fff)}}
.l2c-sk{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:12.5px;line-height:18px;color:var(--ink-3)}
.l2c-sk span{display:inline-flex;align-items:center;gap:8px}
/* the list of limits under the scheme: numbers instead of dots, the same as the markers */
.l2c-sf+.mz-l{counter-reset:l2c}
.l2c-sf+.mz-l li{counter-increment:l2c;grid-template-columns:20px 1fr}
.l2c-sf+.mz-l li>i{margin-top:2px}
.l2c-sf+.mz-l li>i::before{content:counter(l2c)}
.js:not(.calm) .l2c-sf:not(.in) :is(.l2c-sn,.l2c-se){opacity:0;transform:translateY(10px)}
.l2c-sf.in :is(.l2c-sn,.l2c-se){transition:opacity 400ms var(--e-out),transform 600ms var(--e-out)}
.l2c-sf.in .l2c-s1{transition-delay:110ms}.l2c-sf.in .l2c-s2{transition-delay:220ms}.l2c-sf.in .l2c-s3{transition-delay:330ms}
.l2c-sf.in .l2c-s4{transition-delay:440ms}.l2c-sf.in .l2c-s5{transition-delay:550ms}.l2c-sf.in .l2c-s6{transition-delay:660ms}
.l2c-sf.in .l2c-s7{transition-delay:770ms}.l2c-sf.in .l2c-s8{transition-delay:880ms}
.js:not(.calm) .l2c-sf:not(.in) .l2c-lm li{opacity:0;transform:translateX(-6px)}
.l2c-sf.in :where(.l2c-lm li){transition:opacity 360ms var(--e-out),transform 520ms var(--e-out)}
.l2c-sf.in .l2c-x0{transition-delay:1100ms}.l2c-sf.in .l2c-x1{transition-delay:1450ms}.l2c-sf.in .l2c-x2{transition-delay:1800ms}
.l2c-sf.in .l2c-x3{transition-delay:2150ms}.l2c-sf.in .l2c-x4{transition-delay:2500ms}.l2c-sf.in .l2c-x5{transition-delay:2850ms}
/* LAND2 (SEO r0): each /product step links its topic page */
.wk-m{margin-top:10px;font-size:15px;line-height:22px}.wk-m a{color:var(--ink);text-decoration:underline 1px;text-decoration-color:var(--ul);text-underline-offset:4px}
@media (pointer:coarse){.wk-m a{display:inline-flex;align-items:center;min-height:44px}}
/* LAND2 l2g: /about «Хронологія» (apps/landing/land2/l2g_about_pricing.py): one small drawing per milestone, shown as its
   milestone fills ([data-draw] + .tl li.on). LAND3: the answer card under the founder's quote is gone (founder 17.10). */
/* the milestone drawings: one plate each, 84 px, product-UI tokens */
.l2g-d{display:flex;align-items:center;gap:12px;width:100%;max-width:300px;height:84px;margin-top:16px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:var(--plate);font-size:13px;line-height:18px;color:var(--d-ink);overflow:hidden}
.l2g-d .nw{white-space:nowrap}
.l2g-cube{width:38px;height:44px;flex:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.l2g-cube path{stroke-dasharray:1;stroke-dashoffset:0}
.l2g-wm{font-size:16px;line-height:1;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.l2g-lk{height:40px;width:auto;flex:none}.l2g-lk .l2g-cube{stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}.l2g-wmp{fill:var(--ink);stroke:none}  /* LAND3 r5: the brandbook lockup */
.l2g-tx{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.l2g-tx>b{font-size:14px;line-height:19px;font-weight:500;color:var(--d-ink)}.l2g-tx>span:not(.l2g-bs){font-size:12.5px;line-height:17px;color:var(--d-ink-3);font-variant-numeric:tabular-nums}
.l2g-d .av{width:30px;height:30px;border-radius:8px;margin-top:0;font-size:10.5px}
.l2g-bs{display:flex;flex-wrap:wrap;gap:6px}
.l2g-b{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border:1px solid var(--d-line-3);border-radius:999px;background:var(--d-bg);font-size:12px;line-height:1;color:var(--d-ink-2);white-space:nowrap}
.l2g-on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.l2g-ok .tick{width:12px;height:12px;flex:none;color:var(--blue)}
.l2g-edr{border-color:rgba(41,122,204,.45);color:var(--d-ink)}
.l2g-av{width:34px;height:34px;flex:none;border-radius:50%;background:var(--d-av);outline:1.5px solid var(--d-av);outline-offset:2px;color:#fff;font-size:17px;line-height:34px;font-weight:500;text-align:center}
.l2g-sk{flex:1;max-width:120px;height:8px;margin-left:4px;border-radius:4px;background:var(--d-line-3)}
.l2g-beta{margin-left:auto;padding:2px 7px;border:1px solid var(--d-line-3);border-radius:4px;font-size:12px;line-height:16px;font-weight:500;color:var(--d-ink-3)}
.l2g-d5,.l2g-d6{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
.l2g-q{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 10px;border:1px solid var(--d-line-3);border-radius:8px;background:var(--d-bg)}
.l2g-si{display:inline-flex;flex:none;color:var(--d-ink-3)}.l2g-si svg{width:15px;height:15px}
.l2g-qt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--d-ink);clip-path:inset(0)}
.l2g-n{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.l2g-n>b{font-size:16px;line-height:20px;font-weight:600;letter-spacing:-.01em;color:var(--d-ink);font-variant-numeric:tabular-nums}
.l2g-n>span:not(.l2g-b):not(.l2g-fi){font-size:12.5px;color:var(--d-ink-2)}
.l2g-d6 .l2g-x0>span{color:var(--d-ink-3)}
.l2g-fi{display:inline-flex;flex:none;color:var(--d-ink-2)}.l2g-fi svg{width:16px;height:16px}
@media (prefers-color-scheme:dark){.l2g-ok .tick{color:color-mix(in srgb,#297acc 55%,#fff)}}
@media (min-width:1280px){.tl li:has(>.l2g-d){display:flex;flex-direction:column}.tl li>.l2g-d{margin-top:auto}.tl li:has(>.l2g-d)>p{margin-bottom:18px}}
/* motion: the plate rises as its milestone fills, then its pieces in order (≤ 1.5 s); back up the timeline it empties again */
.l2g-d{transition:opacity var(--t-panel) var(--e-out) 120ms,transform var(--t-camera) var(--e-out) 120ms}
.l2g-x{transition:opacity var(--t-panel) var(--e-out),transform var(--t-camera) var(--e-out)}
.l2g-x0{transition-delay:320ms}.l2g-x1{transition-delay:560ms}.l2g-x2{transition-delay:800ms}
.js:not(.calm) .tl li:not(.on) .l2g-d,.js:not(.calm) .l2g-d:not(.in){opacity:0;transform:translateY(10px)}
.js:not(.calm) .tl li:not(.on) .l2g-x,.js:not(.calm) .l2g-d:not(.in) .l2g-x{opacity:0;transform:translateY(6px)}
.js:not(.calm) .tl li:not(.on) :is(.l2g-b,.l2g-beta,.l2g-av).l2g-x,.js:not(.calm) .l2g-d:not(.in) :is(.l2g-b,.l2g-beta,.l2g-av).l2g-x{transform:scale(.86)}
.l2g-cube path{transition:stroke-dashoffset 900ms var(--e-move) 200ms}
.l2g-cube path:nth-child(2){transition-delay:280ms}.l2g-cube path:nth-child(3){transition-delay:360ms}.l2g-cube path:nth-child(4){transition-delay:440ms}.l2g-cube path:nth-child(5){transition-delay:520ms}.l2g-cube path:nth-child(n+6){transition-delay:600ms}
.js:not(.calm) .tl li:not(.on) .l2g-cube path,.js:not(.calm) .l2g-d:not(.in) .l2g-cube path{stroke-dashoffset:1}
.l2g-d0 .l2g-x1{transition-delay:320ms}  /* LANDSHIP 21.10 night (audit B #15): at 900 ms the card read as a lone cube; the name now comes in as the cube draws */
.l2g-qt{transition:clip-path 700ms var(--e-move) 520ms}
.js:not(.calm) .tl li:not(.on) .l2g-qt,.js:not(.calm) .l2g-d:not(.in) .l2g-qt{clip-path:inset(0 100% 0 0)}
.l2g-ok .tick path{transition:stroke-dashoffset 520ms var(--e-out) 900ms}
.js:not(.calm) .tl li:not(.on) .l2g-ok .tick path,.js:not(.calm) .l2g-d:not(.in) .l2g-ok .tick path{stroke-dashoffset:1}
/* LAND2 r1 (visual): below 1024 px the /security stage copies stack their cards in flow (type at 4.3cqw outgrew the % boxes:
   the database card cut «Ваш ключ», the «Без ключа» pill lay on the log line); the pill sits under the rows */
@media (max-width:1023px){
  .story.sv-ph .sk{aspect-ratio:auto;display:flex;flex-direction:column;gap:.9em;padding:4%}
  .story.sv-ph .sk :is(.sk-b,.sk-d,.sk-log){position:relative;left:auto;top:auto;bottom:auto;width:auto;height:auto}
  .story.sv-ph .sk-view{position:static;width:max-content;max-width:100%;margin-top:.6em}
}
/* LAND2 r1 (visual + reader): /product ClickUp copies on phones: when the next step is created, the new task takes the third row
   (the third case steps aside), so the «Наступний крок» card never half-covers it; the card's buttons follow its tasks */
@media (max-width:1023px){
  .story.sv-ph .cu.s2 .cu-r.r2{display:none}
  .story.sv-ph .cu-acts{margin-top:1em}
}
/* LAND2 r4 (reader P1: the same case list four times on a phone): each ClickUp step copy shows only what its step is about:
   01 the list with its fields, 02 the case card, 03 the list where the answer's next step becomes a task, 04 the card's
   «Запитати LEXERY» and the question it opens */
@media (max-width:1023px){
  .story.sv-ph .cu.f0 :is(.cu-card,.cu-ans),.story.sv-ph .cu.f1 .cu-list,.story.sv-ph .cu.f1 :is(.cu-acts,.cu-draft),
  .story.sv-ph .cu.f2 :is(.cu-card,.cu-fs),.story.sv-ph .cu.f3 .cu-list,.story.sv-ph .cu.f3 :is(.cu-kv,.cu-tl,.cu-tasks){display:none}
  /* one part per copy, so the copy sizes to it (mobile + visual r4 P2: 140–150 px of empty frame under the card's buttons) */
  .story.sv-ph .sc-sv .sv.cu{aspect-ratio:auto;padding:4%}
  .story.sv-ph .cu :is(.cu-list,.cu-card){position:relative;left:auto;top:auto;width:auto;height:auto}
  .story.sv-ph .cu .cu-list{padding-bottom:1.1em}
  .story.sv-ph .cu .cu-ans{position:relative;left:auto;right:auto;bottom:auto;margin-top:.9em}
  /* mobile r4 (P2): no text in the copies under 12 px (9.7–11 px at 320) */
  .story.sv-ph .cu :is(.cu-f,.cu-st,.cu-dt,.cu-tl,.cu-draft,.cu-h span,.cu-btn,.cu-ask,.cu-open,.cu-ok,.cu-kv div,.cu-tasks li){font-size:max(12px,.8em)}
  .story.sv-ph .cu :is(.cu-nm,.cu-ans p){font-size:max(12.5px,.9em)}  /* mobile r5 (P2): 11.1 px at 320 */
}
/* LAND2 r1 (visual + reader): /security on phones: the first step follows the lead (it stood 240 px below it: section padding,
   the story's desktop margin and padding, the caption's padding) */
@media (max-width:1023px){.p-sec .vsec{padding-top:16px}.p-sec .story.sv-ph{margin-top:0;padding-top:0}}
/* LAND2 r1 (reader): /product on phones: step 01 follows the lead (112 px gap) */
@media (max-width:1023px){.p-prod .wk-l>.wk:first-child{padding-top:8px}}
/* LAND2 r1 (ethics + reader): /about, under the programme marks: membership is not data processing */
.sup-n{grid-column:1/-1;margin-top:24px;max-width:640px}
/* LAND2 mobile r1: /product's contents chips and in-page call to action are for phones and tablets (/product loads kb.css below
   1024 px only; the desktop film has its own rail and end) */
.wk-cta{display:none}
@media (max-width:1023px){.p-prod .wk-cta{display:block;grid-column:1/-1;margin-top:24px}}
@media (min-width:1024px){.p-prod .kb-nav{display:none}}
/* LAND2 a11y r1: /security's step figure keeps every text at full contrast in every step (inactive parts were dimmed to
   opacity .38–.5, 1.7–3.3:1); the caption beside each step says which part it is about */
.sv-js .sk .sk-d,.sv-js [data-s="2"] .sk-b,.sv-js [data-s="3"] .sk-log{opacity:1}
/* LAND2 r2 (reader P1: the same browser / database / log drawing four times on a phone): each /security step copy shows only
   what its step is about: 01 the browser and the key, 02 the browser and the base it writes to, 03 the log line, 04 the base
   without the key */
@media (max-width:1023px){
  .story.sv-ph .sk .sk-w,.story.sv-ph .sk.f0 :is(.sk-d,.sk-log),.story.sv-ph .sk.f1 .sk-log,.story.sv-ph .sk.f2 :is(.sk-b,.sk-d),
  .story.sv-ph .sk.f3 :is(.sk-b,.sk-log),.story.sv-ph .sk:not(.f3) .sk-view{display:none}
}
/* LAND2 r2 (mobile P2): on touch phones every footer link, the contact links of /about, the «more» links in the copy and the
   security contact line have a 44 px target (the footer rule lived in kb.css only, so /about and /security kept 24 px) */
@media (max-width:767px){.f-c a{padding-block:10px;margin-block:-10px}
  main a.more,.ct-l a,.p-sec .meta a{display:inline-flex;align-items:center;min-height:44px}}
/* LAND2 r2 (visual P2): the /product limit scenes carry words instead of grey bars */
.lm-pg.lm-tx{width:184px;height:auto;gap:4px;padding:12px 14px 10px}
.lm-tt{font-size:12.5px;line-height:16px;font-weight:600;color:var(--ink)}
.lm-tl{font-size:12px;line-height:16px;color:var(--ink-2);white-space:nowrap}
.lm-pg.lm-tx{padding-bottom:42px}
.lm-q{font-size:12px;line-height:16px;color:var(--ink-2)}
.lm-sc{height:auto;min-height:124px;padding:16px 0}.lm-b{padding:16px}
@media (max-width:767px){.lm-sc{height:auto;min-height:112px}.lm-b{padding:16px max(16px,calc(50% - 140px))}}
/* LAND2 r2 (a11y P1): the /security «Межі захисту» numerals and «розшифровано» labels reach 4.5:1 (#297acc gave 4.42:1) */
.l2c-lm i,.l2c-sf+.mz-l li>i{background:#2470bd}
.l2c-ko{border-color:#2470bd;color:#2470bd}
@media (prefers-color-scheme:dark){.l2c-ko{border-color:color-mix(in srgb,#297acc 55%,#fff);color:color-mix(in srgb,#297acc 55%,#fff)}}
/* LAND2 r2 (a11y P2): at 400 % zoom (a screen under 480 px tall) the header and the contents row stop sticking, so they never
   cover the focused element; focus scrolls clear of the header everywhere */
html{scroll-padding-top:72px}
@media (max-height:480px){.top,.kb-nav{position:static!important;transform:none!important}}
/* LAND2 r2 (a11y P2): Windows contrast themes keep the menu icon and the FAQ «+» (drawn with background colour) */
@media (forced-colors:active){.m-btn i,.m-btn i::before,.fq summary i::before,.fq summary i::after,.kl-d>summary>i::before,.kl-d>summary>i::after{background:ButtonText!important;forced-color-adjust:none}}
/* LAND2 r2 (motion P1): a heading below the screen waits hidden until it rises (it showed finished at 0.3 s, then rewound).
   LAND2 r4 (a11y P1): it waits transparent, not visibility:hidden, so VoiceOver / TalkBack heading lists and the contents
   chips (focus) reach every section heading before it has risen */
.js [data-mask].pre:not(.split):not(.done){visibility:visible;opacity:0;animation:none}
.an-s>div[data-nosnippet]{display:contents}  /* SEO r3: the wrapper only carries data-nosnippet for Google; the figure keeps its grid place */
/* LAND2 r3 (visual P1): /lexery's anatomy sits outside .an, so its citation and highlight lost their colours */
.an-s{--an-cite:#1527c7;--an-acc:21,39,199;--an-mark:rgba(41,122,204,.16)}
@media (prefers-color-scheme:dark){.an-s{--an-cite:#7db4ec;--an-acc:90,160,230;--an-mark:rgba(125,180,236,.2)}}
/* LAND2 r3 (a11y): with the WCAG text-spacing override a non-breaking pair in an H1 («Верховного Суду») ran off a 390 px screen
   (1.4.12): it may break there now (no effect at normal spacing); the vertical timeline's column never outgrows the screen at
   320 px (1.4.10, /about scrolled 2 px); buttons keep an outline in forced colours */
.h1{overflow-wrap:anywhere}
@media (max-width:1279px){.tl{grid-template-columns:minmax(0,1fr)}.tl>li{min-width:0}}
@media (forced-colors:active){.btn{border:1px solid ButtonText}}
/* LAND2 r4 (motion P2): /security's facts, limits and details rise in like the topic pages' blocks (kb.css is not loaded there) */
.js:not(.calm) .p-sec .rv:not(.in){opacity:0;transform:translateY(18px)}
.p-sec .rv.in{transition:opacity var(--t-panel) var(--e-out),transform 700ms var(--e-out);transition-delay:calc(var(--k,0) * 70ms)}
@media (prefers-reduced-motion:reduce){.p-sec .rv{opacity:1!important;transform:none!important}}
/* LAND2 r5 (mobile P2): below 1024 px /about says in one line what the page holds before the founder's quote */
.ab-ld{display:none}
@media (max-width:1023px){.ab-ld{display:block;grid-column:1/-1;margin-top:20px}.ab-ld+.ab-q{margin-top:32px}}
/* LAND2 r4 (mobile P2): on /about phones the programme logos are larger in tighter tiles (13–14 px tall wordmarks in
   179 × 152 px tiles took three quarters of a screen); ELSA's file, clear space included, keeps to the mark row */
@media (max-width:719px){.p-about .sw{--k:1.15}.p-about .sw-a{gap:10px;padding:18px 14px 16px}.p-about .bdg-elsa{--h:66px}
  .p-about .sw-m{height:calc(64px * var(--k))}.p-about .bdg{max-width:100%}
  .p-about .bdg img{width:auto;height:auto;max-width:100%;max-height:calc(var(--h) * var(--k))}
  .p-about .bdg-cf{width:100%}.p-about .bdg-cf img{width:100%;object-fit:contain}}
/* LAND2 r4 (mobile P2): reading text off Home is 16 px (the «Докладніше» paragraphs and the /security fact cards were 15);
   on touch tablets the «Докладніше» toggles, the «more» links and the footer links get a 44 px target, as on phones; the
   /security step pictures keep their text at 12 px or more at 320 (the log line fell to 8.7 px) */
body:not(.p-home) .dd p{font-size:16px;line-height:25px}
.p-sec .sf p{font-size:16px;line-height:24px}
@media (pointer:coarse) and (min-width:768px){body:not(.p-home) .dd summary{min-height:44px}
  body:not(.p-home) main a.more{display:inline-flex;align-items:center;min-height:44px}.f-c a{padding-block:10px;margin-block:-10px}}
@media (max-width:1023px){.story.sv-ph .sk .sk-log{font-size:max(12px,.8em)}.story.sv-ph .sk :is(.sk-log,.sk-d,.sk-b) *{font-size:max(12px,1em)}}  /* mobile r5: .sk-b too */
/* LAND2 mobile r6 (P1/P2): on phones the hero grid has 4 columns, and an H1 set to 1/10 added implicit 0 px columns whose gaps
   squeezed the rest to 278 of 358 px (/security «Коротко для адвоката» ran 10–15 lines a bullet, /about's quote 11–16);
   every hero child spans the explicit grid. From 768 px the step links and «Докладніше» are 44 px for every pointer, as the
   topic pages are (they were 19–20 px with a mouse or a stylus on /security, /about, /product). Home is unchanged. */
@media (max-width:767px){body:not(.p-home) .intro>.wrap.g>*{grid-column:1/-1}}
@media (min-width:768px){body:not(.p-home) .dd summary{min-height:44px}
  body:not(.p-home) main a.more,.wk-m a{display:inline-flex;align-items:center;min-height:44px}}
/* LAND2 a11y 6c (P2, off Home): in forced colours the highlighted quote of a figure kept black text on no background (the
   highlight is a gradient), so in a dark contrast theme the quoted words vanished; there it takes the system Mark colours */
@media (forced-colors:active){body:not(.p-home) :is(.ofp-m,.kd-m){background:Mark!important;color:MarkText!important;forced-color-adjust:none}}
/* LAND3: /about «Хронологія» — the programme milestones show the organisations' official marks (BADGES files, own proportions).
   A mark card grows to its content (logo row + pills); the visible mark height ≈ 18–26 px, the ELSA file carries its clear space. */
.l2g-d.l2g-m{height:auto;min-height:84px;padding:14px 16px}
.l2g-lg{display:flex;align-items:center;gap:10px;min-height:28px}
.l2g-lg>b{font-size:14px;line-height:19px;font-weight:500;color:var(--d-ink)}
.l2g-lg .bdg{--k:1}.l2g-lg .bdg img{width:auto;height:calc(var(--h) * var(--k))}
.l2g-lg .bdg-skh{--h:16px}.l2g-lg .bdg-w3rl{--h:18px}.l2g-lg .bdg-elsa{--h:58px;margin:-12px -8px -12px -12px}
/* LAND3: Home «Підключення» with six live connections (three a side) and the «Незабаром» row under the diagram */
.cx6{aspect-ratio:600/420}
.cx6 .cx-n.i0{left:0;right:auto;top:16.67%}.cx6 .cx-n.i1{left:0;right:auto;top:50%}.cx6 .cx-n.i2{left:0;right:auto;top:83.33%}
.cx6 .cx-n.i3{right:0;left:auto;top:16.67%}.cx6 .cx-n.i4{right:0;left:auto;top:50%}.cx6 .cx-n.i5{right:0;left:auto;top:83.33%}
.cx-base .w4{transition-delay:480ms}.cx-base .w5{transition-delay:600ms}
.cx.run .cx-flow .w4{animation-delay:5.2s}.cx.run .cx-flow .w5{animation-delay:6.5s}
.cx-soon{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:28px;font-size:14px;line-height:20px}
.cx-soon p{color:var(--ink-3)}
.cx-soon ul{display:flex;flex-wrap:wrap;gap:8px}
.cx-soon li{padding:5px 12px;border:1px dashed var(--line-2);border-radius:999px;color:var(--ink-2)}
.co-m{margin-top:24px}
@media (max-width:719px){.cx-soon{margin-top:20px}}
@media (max-width:420px){.cx-soon ul{display:grid;grid-template-columns:repeat(2,max-content)}}  /* LANDSHIP 21.10 night (auditor D #28): «Gmail» wrapped alone */
.cx6.run .cx-flow path{animation-duration:7.8s}
/* LAND3: six figures on Home; the ЄДРСР counter (9 digits, the registry's own number, not LEXERY's base) is set smaller so it keeps
   the figure column; every row rolls in its turn. /about: the heading on its own row, the founder's quote under it with air. */
.n-row:nth-child(5){--r:4}.n-row:nth-child(6){--r:5}
@media (min-width:1024px){.p-about .intro .ab-h{grid-column:1/-1}
  .p-about .intro .lead-q{grid-column:6/13;grid-row:2;align-self:start;margin-top:64px}}
.p-about .intro{padding-bottom:24px}
/* LAND3 (jury r1, motion): less generic motion. Headings appear whole (one short fade, no word-by-word rise); the connections hub
   draws its wires once and rests (no packets, no sonar ring); the LEXERY cube is drawn, not traced; the /about timeline card
   arrives with its content in one short fade. */
@keyframes l3-fade{from{opacity:0}}
.js:not(.calm) [data-rise] .w{animation:l3-fade 240ms var(--e-out) both;animation-delay:0ms}
.cx.run .cx-flow path{animation:none}.cx.run .cx-c::after{animation:none}
.js:not(.calm) [data-draw]:not(.in) .cube-d path{stroke-dashoffset:0}
.l2g-d{transition:opacity 250ms var(--e-out),transform 250ms var(--e-out)}
.l2g-x,.l2g-x0,.l2g-x1,.l2g-x2{transition-duration:250ms;transition-delay:0ms}
/* LAND3 jury r1: /product «Також працюють …» spans the row (it sat in one grid track); fine print keeps a reading measure */
.co-m{grid-column:1/-1;max-width:75ch}.co-n{max-width:75ch}
/* one size for the six figures: the column fits the nine-digit ЄДРСР counter */
@media (min-width:1024px){.n-row{grid-template-columns:6.2em minmax(0,1fr);font-size:52px}.nm{font-size:52px}}
/* «Підключення»: larger, roomier cards; the «За запитом» note inside its card, under the title */
.cx6{font-size:2.55cqw}.cx6 .cx-n{width:33%}.cx6 .cx-t span{font-size:.9em}
.cx6 .cx-n em{position:static;display:inline-block;width:max-content;margin-top:.45em;transform:none}
.cx6 .cx-n{grid-template-areas:"g t" "g e"}.cx6 .cx-g{grid-area:g}.cx6 .cx-t{grid-area:t}.cx6 .cx-n em{grid-area:e}
.cx-t .cx-d{display:block;margin-top:.3em;font-size:max(.78em,12px);color:var(--ink-3);white-space:nowrap}  /* LAND3 18.10: ЄДР data date */
@media (max-width:1023px){.cx6{font-size:14px}}
/* LAND3 jury r2 (lawyer, AI-slop visuals: «картки на пів екрана, текст за рамкою»): .cx6's 33 % card and its aspect ratio beat the
   phone rule (.cx-n width 100 %); on phones the six connections are one full-width list, without the lone hub mark over it */
@media (max-width:719px){.cx6{aspect-ratio:auto}.cx6 .cx-n{width:100%}.cx6 .cx-c{display:none}}
/* /about: the intro line under the heading on every width (the answer card that used to sit there is gone); who stands behind it */
.p-about .ab-ld{display:block;grid-column:1/-1;margin-top:24px;max-width:34em}  /* LAND3 r5 (typographer): 46em ran ~93 characters a line */
@media (min-width:1024px){.p-about .intro .lead-q{grid-row:3}}
.ct-who{grid-column:1/-1;margin-top:20px;max-width:70ch}
/* LANDSHIP 21.10 night (audit B #23): the note is small print under the address (inside .ct-l), so the address sits beside the
   heading; its clause link stays an inline link (not the 44 px contact buttons of .ct-l) */
.ct-l .ct-who{margin-top:8px}.ct-l .ct-who a{display:inline;min-height:0}
/* Web3 Resilience Lab: the programme's own white mark, unchanged, on a dark tile in both themes */
.l2g-lg .bdg-w3rl{padding:6px 9px;border-radius:6px;background:#0b0b0b}
/* LAND3 jury r1 (a11y): the ClickUp list's statuses and dates at ≥ 4.5:1 in both themes */
.cu .cu-h span,.cu .cu-st,.cu .cu-dt{color:var(--ink-2);opacity:1}
/* LAND3 jury r1 (performance): on phones Home's header button keeps its place and only fades, as on the topic pages (its max-width
   reveal moved «Увійти» and the menu: CLS 0.007 at 390) */
@media (max-width:1023px){.t-home .top-cta{max-width:none;padding-left:16px;padding-right:16px;margin-left:0;
  transition: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)}}
/* LAND3 jury r1 (motion): no desktop mouse pointer in the film on touch screens */
@media (max-width:1023px),(pointer:coarse){.frame .cur{display:none}}
/* LAND3 jury r2 (copy, partner, lawyer): Home's figures in two groups, LEXERY's own and the registry it searches, each under a
   quiet line; every row the same rhythm (art director: the source always on its own line under the date) */
.num-g{margin:0 0 12px;font-size:14px;line-height:20px;color:var(--ink-3)}
.num-d+.num-g{margin-top:48px}
.num-d .n-row:last-child{border-bottom:1px solid var(--line)}
.n-m{flex-direction:column;align-items:flex-start;gap:6px}
/* LAND3 jury r2 (brand guardian: «ui-monospace is not Inter», «the blur reads as glow»): every code-like string the site sets
   (ciphertext, log line, search operators, URLs, codes) is Inter with tabular figures; the plaintext in the vault fades, no blur */
.va-c,.va-r b,.va-l,.sk-ci,.sk-r b,.sk-log,.l2c-kc,.l2c-ko{font-family:Inter,"Inter Fallback",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.vault.v5 .va-mp{filter:none}
/* LAND3 jury r2 (art director): while the camera's shot cuts the window above its bottom, the composer is not half in view */
.win.zm .comp-b{opacity:0;transition:opacity var(--t-ui) var(--e-std)}
/* LAND3 jury r2 (motion): headings appear whole in one short fade ([data-mask] too, not only [data-rise]); the /about timeline's
   LEXERY mark is shown, not traced, and its search line is there at once */
.js:not(.calm) [data-mask].mf{animation:l3-fade 240ms var(--e-out) both}
.js:not(.calm) .tl li:not(.on) .l2g-cube path,.js:not(.calm) .l2g-d:not(.in) .l2g-cube path{stroke-dashoffset:0}
.l2g-cube path{transition:none}
.js:not(.calm) .tl li:not(.on) .l2g-qt,.js:not(.calm) .l2g-d:not(.in) .l2g-qt{clip-path:inset(0)}
.l2g-qt{transition:none}
/* LAND3 jury r2: /product's ClickUp block shows the portal's real «Справи» screens (two phones) beside the four steps, no drawing */
.cu-real{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-top:64px}
.cu-pair{grid-column:1/8;position:sticky;top:calc(var(--hdr) + 24px);margin:0}
.cu-ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cu-real .sc-col{grid-column:9/13}
.cu-real .scn{min-height:0;padding:28px 0;border-top:1px solid var(--line)}
.cu-real .scn:first-child{border-top:0;padding-top:0}
@media (max-width:1023px){.cu-real{display:block;margin-top:40px}.cu-pair{position:static;max-width:640px}.cu-real .sc-col{margin-top:24px}}
@media (max-width:479px){.cu-ph{gap:10px}}
.cu-pair .rf-h{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:13px;line-height:18px;color:var(--ink-3)}
.cu-pair .rf-u{color:var(--ink-2)}
.cu-pair .rf-f{position:relative;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--paper)}
.cu-pair .rp-p,.cu-pair .rp-p img{display:block;width:100%;height:auto}
.cu-pair .kd-cap{margin-top:14px;max-width:62ch;font-size:13px;line-height:18px;color:var(--ink-3)}
/* LAND3 jury r2 (AI-slop visuals, brand: «a stray black dot on the .docx icon»): the download badge reads as a dot at this size */
.cs-dl{display:none}
/* phones: one screen at near real size (the case card, which steps 02–04 describe), not two at half size */
@media (max-width:599px){.cu-ph{grid-template-columns:1fr}.cu-ph>.rf-f:first-child{display:none}.cu-pair{max-width:393px}}
/* LAND3 jury r2 (motion P1, AI-slop visuals P1: «a fake mouse arrow glides between targets»): no drawn pointer on any screen;
   the film's states change on their own beat */
.frame .cur{display:none}
/* LAND3 jury r2 (a11y 1.4.3: the demo's source line, «Переглянути процес» and the composer placeholder were 2.7–3.5:1): ≥ 4.5:1 */
.sq-m,.m-pr{color:var(--d-ink-4)}
.ph0{color:#6b6b6b}
@media (prefers-color-scheme:dark){.ph0{color:#8f8f8f}}
/* LAND3 jury r3 (motion: «a highlighter wipe that lands mid-word»): the cited words are marked whole, in one short fade */
mark,.r1{background-image:none;background-color:transparent;transition:background-color 160ms var(--e-std)}
mark.hl,.r1.hl{background-color:var(--d-mark)}
.r1.fd{background-color:transparent;transition:background-color 1200ms var(--e-std)}
/* LAND3 jury r3 (typographer): footer fine print and the /about lead at a reading measure */
.f-tm{max-width:90ch}
.ab-ld{max-width:62ch}
.nw{white-space:nowrap}  /* LAND3 r3: act numbers, decision numbers and «253–255» ranges on every page */
/* LAND3 jury r3 (art director P1: card heights 88–155 px, the columns' rows do not line up): from 720 px every connection card has the
   same height, its content centred, so the three rows sit on shared lines and the wires land symmetrically */
@media (min-width:720px){.cx6 .cx-n{width:36%;min-height:7.4em;align-content:center}}
/* LAND3 r6 (art director P1: right cards 137/133/115 px against 115 on the left, gaps 7–27 px): every card as tall as the tallest
   (ЄДР with its date line), the box a little taller so the rows keep a gap; the wires stretch with the box (preserveAspectRatio none,
   non-scaling strokes), so they still land on the rows at 1/6, 1/2 and 5/6 */
@media (min-width:720px){.cx6{aspect-ratio:600/490}.cx6 .cx-n{min-height:9.4em}}
/* LAND3 jury r4 (copy, partner: «станом на 17…» cut by the card edge): the ECHR figure's label wraps, so its date is always whole */
.l2g-n{white-space:normal;align-items:baseline;flex-wrap:wrap;row-gap:2px}
.l2g-n>b{white-space:nowrap}
/* LANDSHIP: a bare document address in a legal text (/legal/echr: «https://www.echr.coe.int/documents/d/echr/…») wraps inside the
   column instead of pushing a 390 px phone 60 px wide (SEOGEO2-AUDIT: the same on main) */
.p-legal main a[href^="http"]{overflow-wrap:anywhere}
/* LANDSHIP r3 (mobile, landscape 844 × 390): the intro keeps its phone spacing on a short screen (Home's hero already does) */
@media (orientation:landscape) and (max-height:500px){body .intro{padding-top:88px}}
/* LANDSHIP r3 (mobile ×2): an interval never breaks inside its brackets in the sideways table */
.yk-tb td span{white-space:nowrap}
/* DLPAGE3 (founder 20.10): the desktop app's download beside the hero's action, only on a Mac or a Windows computer with a
   mouse or a trackpad (the head script sets html[data-dl] before the first paint: no layout shift; never on a phone or a tablet).
   No width threshold: a desktop page zoomed to 400 % keeps it, under the pilot button (jury r1, J6: 1.4.10). Never wider
   than the pilot button beside it (jury r2, J3 J5) */
.cta-r{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px}
.dl-cta{display:none;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 16px;border:1px solid var(--line-2);border-radius:6px;color:var(--ink);font-size:16px;font-weight:500;line-height:1;white-space:nowrap;transition:border-color var(--t-micro) var(--e-std),color var(--t-micro) var(--e-std)}
.dl-cta svg{width:18px;height:18px;flex:none}
.dl-cta:hover{border-color:var(--ink)}
@media (pointer:fine){html[data-dl=mac] .dl-m,html[data-dl=win] .dl-w{display:inline-flex}}
@media (max-width:1023px){.cta-r{justify-content:flex-start}}
@media (max-width:767px){.cta-r{flex-direction:column;align-items:stretch;width:100%}.cta-r .dl-cta{width:100%}}
/* LANDSHIP 21.10 night (seven-auditor sweep, shared chrome and Home) */
.brand{height:44px}
.sheet .meta a::before,.brand-f::before{inset:-14px -4px}
@media (prefers-color-scheme:dark){.endc{background:color-mix(in srgb,var(--d-bg) 92%,transparent)}}
@media (min-width:1024px){.conn-h{align-self:start;padding-top:40px}}
@media (max-width:767px){
  .step{min-height:44px}.pause{width:44px;height:44px}
  .vl-one a{display:inline-block;padding:12px 0;margin:-12px 0}
  .hero .cta{justify-self:stretch;width:100%}.hero .cta .btn{width:100%}
  .b-p{text-align:left}
  .an-m{display:inline-block}
  .f-tm{font-size:13px;line-height:19px}
  .note,.cx-t span{font-size:14px}}
.fin-lk{width:min(340px,100%);height:auto}.fin-lk .cube-d{width:auto}.fin-wm{fill:var(--ink)}
.brand{gap:10px}.brand-c{flex:none;width:21px;height:24px;stroke:currentColor;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.brand-f .brand-c{width:19px;height:22px}
@media (max-width:767px){.f-h,.f-x{font-size:14px}}
/* LANDSHIP r6 (mobile): on touch screens the stacked source URLs of the legal pages (/legal/echr) get their own tap rows */
@media (pointer:coarse){.lg p a[href^="https://"]{display:inline-block;padding:9px 0}}
.lg p.lg-3{padding-left:1.6em}  /* LANDSHIP r6 (design): /terms third-level clauses indented under their clause */
@media (min-width:1024px){.rf-h{flex-wrap:wrap}.rf-h .rf-u{white-space:nowrap}}  /* LANDSHIP r7 (design): a capture label stays on one line on desktop; when the date has no room it moves under it (it overlapped at 1440) */