/* Case page: n8n × Битрикс24. Matter palette and type, authored for a Russian page.
   Engravings blend into their section: ink-on-paper multiplies, white-line lightens. */
@font-face{font-family:'Golos Text';src:url('/matter/assets/golos-text-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';src:url('/matter/assets/golos-text-cyrillic.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Instrument Serif';src:url('/matter/assets/instrument-serif-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/matter/assets/instrument-serif-cyrillic-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0400-045F,U+2116}

.case-page{--paper:#ebe9e5;--ink:#111110;--surface:#d8d6d1;--accent:#d7ff45;--node:#23241f;--quiet-on-ink:#bcbcb4;--quiet-on-paper:#4a4a43;--frame:clamp(20px,3.1vw,54px);margin:0;background:var(--ink);color:var(--paper);font-family:'Golos Text',Inter,Arial,sans-serif;font-size:18px;line-height:1.5}
:where(.case-page) :is(h1,h2,h3,h4,p,figure,dl,dd,ol,ul){margin:0}
:where(.case-page) :is(ol,ul){padding:0;list-style:none}
.case-page a{color:inherit;text-decoration:none}
.case-page img{display:block;width:100%;height:auto}
.case-page button,.case-page input{font:inherit;color:inherit}
.case-page a,.case-page button{transition:color 180ms ease,background-color 180ms ease,opacity 180ms ease}
.case-page :is(a,button,summary,input):focus-visible{outline:3px solid currentColor;outline-offset:6px}
.au-frame{margin-inline:var(--frame)}
.au-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.case-page .skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.case-page .skip-link:focus{position:fixed;z-index:20;top:12px;left:var(--frame);width:auto;height:auto;padding:12px 18px;clip-path:none;background:var(--paper);color:var(--ink)}

/* Top line: the way back and the page's own anchors. */
.au-top{display:flex;justify-content:space-between;align-items:baseline;gap:32px;padding-top:36px;font-size:16px;line-height:1.2}
.au-home{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:34px;line-height:1;letter-spacing:-.04em;white-space:nowrap}
.au-home .ui-arrow{font-size:.5em;vertical-align:.12em;margin-right:.1em}
.au-nav{display:flex;gap:clamp(22px,3.6vw,56px)}
.au-nav a{white-space:nowrap}
.au-home:hover,.au-nav a:hover{color:var(--accent)}

/* Display type. Every heading is two nowrap lines; the second one leans right. */
.case-page :is(h1,h2){font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;text-wrap:balance}
.case-page :is(h1,h2)>span{display:block;white-space:nowrap}
.case-page :is(h1,h2)>span:last-child:not(:only-child){text-align:right}
.case-page h1{font-size:clamp(38px,12vw,200px);line-height:.92;letter-spacing:-.045em}
.case-page h2{font-size:clamp(34px,8.7vw,142px);line-height:.94;letter-spacing:-.04em}
.au-dot{font-style:inherit;color:var(--accent)}

.au-hero{padding-top:clamp(40px,6vw,92px);overflow:hidden}
.au-kicker{font-size:clamp(20px,1.9vw,28px);letter-spacing:-.03em;line-height:1.15;margin-bottom:clamp(20px,2.4vw,36px)}
.au-deck{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-top:clamp(36px,4vw,64px)}
.au-deck>p{max-width:700px;font-size:clamp(21px,2vw,29px);line-height:1.3;letter-spacing:-.025em}
.au-meta{display:flex;flex-direction:column;gap:5px;flex:none;font-size:14px;line-height:1.4;text-align:right;color:var(--quiet-on-ink)}
.au-hero-art{margin-top:clamp(36px,4.4vw,72px)}
.au-hero-art img{aspect-ratio:21/9;object-fit:cover}

.au-section{padding-block:clamp(56px,7.4vw,112px) clamp(60px,8vw,120px);overflow:hidden}
.au-paper{background:var(--paper);color:var(--ink)}
.au-ink{background:var(--ink);color:var(--paper)}

/* Text beside an engraving. */
.au-split{display:grid;column-gap:7%;row-gap:40px;align-items:center;margin-top:clamp(40px,5.6vw,88px)}
.au-split-art-right{grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr)}
.au-split-art-left{grid-template-columns:minmax(0,1.3fr) minmax(0,.86fr)}
.au-split>*{min-width:0}
.au-lead{font-size:clamp(21px,1.9vw,27px);line-height:1.32;letter-spacing:-.025em;max-width:26em}
.au-list{display:grid;gap:30px;max-width:30em}
.au-lead+.au-list{margin-top:44px}
.au-list dt{font-size:16px;line-height:1.4;margin-bottom:10px}
.au-ink .au-list dt{color:var(--quiet-on-ink)}
.au-paper .au-list dt{color:var(--quiet-on-paper)}
.au-list dd{font-size:18px;line-height:1.55}
.au-statement{margin-top:48px;max-width:19em;font-size:clamp(22px,2vw,28px);line-height:1.3;letter-spacing:-.025em}
.au-fine{font-size:14px;line-height:1.5;max-width:44em}
.au-ink .au-fine{color:var(--quiet-on-ink)}
.au-paper .au-fine{color:var(--quiet-on-paper)}

/* Engravings. The print's own paper or black field dissolves into the section. */
.au-art{overflow:hidden}
.au-art-ink{mix-blend-mode:multiply}
.au-art-ink img{filter:grayscale(1) contrast(1.2) brightness(1.12)}
.au-art-light{mix-blend-mode:lighten}
.au-art-light img,.au-hero-art img{filter:contrast(1.08) brightness(.96)}
.au-art-tall{max-width:440px;width:100%;justify-self:center}
.au-art-wide{margin-top:clamp(36px,5vw,76px)}

/* Process diagram: two lanes, numbered by position, one wire through every step. */
.au-scenes,.au-craft{margin-top:clamp(64px,8vw,128px)}
.au-scenes-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:44px}
.case-page h3{font-size:clamp(25px,2.4vw,36px);font-weight:450;line-height:1.14;letter-spacing:-.04em}
.au-tabs{display:flex;flex-wrap:wrap;gap:8px}
.au-tabs button{border:0;border-radius:0;padding:12px 20px;background:transparent;font-size:16px;line-height:1.3;cursor:pointer;min-height:44px}
.au-tabs button:hover{background:var(--node)}
.au-tabs button[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.au-scene-name{font-size:18px;font-weight:500;line-height:1.3;margin-bottom:20px}
.is-enhanced .au-scene-name{display:none}
.au-scene+.au-scene{margin-top:64px}
.is-enhanced .au-scene+.au-scene{margin-top:0}
.au-scene[hidden]{display:none}

.au-flow{position:relative;display:grid;grid-template-columns:132px repeat(var(--steps),minmax(0,1fr));grid-template-rows:repeat(2,minmax(108px,auto));column-gap:clamp(14px,2vw,30px);row-gap:60px}
.au-steps{display:contents}
.au-lane{align-self:center;grid-column:1;font-size:16px;font-weight:500;line-height:1.25}
.au-lane span{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--quiet-on-ink)}
.au-lane[data-lane=b24]{grid-row:1}
.au-lane[data-lane=n8n]{grid-row:2}
.au-step{position:relative;z-index:1;grid-column:calc(var(--i) + 1);display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:14px 16px 15px;min-width:0}
.au-step[data-lane=b24]{grid-row:1;background:var(--paper);color:var(--ink)}
.au-step[data-lane=n8n]{grid-row:2;background:var(--node);color:var(--paper)}
.au-step.is-human{background:var(--accent);color:var(--ink)}
.au-step b{font-size:16px;font-weight:500;line-height:1.22;letter-spacing:-.015em;hyphens:auto;overflow-wrap:break-word}
.au-step span{font-size:13px;line-height:1.35;opacity:.74}
.au-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.au-wire{fill:none;stroke:rgb(235 233 229 / .38);stroke-width:1}
.au-pulse{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:.05 .95;stroke-dashoffset:1;animation:au-run 7s linear infinite}
.au-flow:not(.is-live) .au-pulse{animation-play-state:paused}
@keyframes au-run{to{stroke-dashoffset:0}}
.au-via{position:absolute;z-index:2;translate:-50% -50%;padding:3px 8px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;pointer-events:none}
.au-craft .au-legend{margin-top:26px}
.au-scene-note{margin-top:40px;max-width:30em;font-size:clamp(20px,1.8vw,25px);line-height:1.32;letter-spacing:-.02em}
.au-legend{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:44px;font-size:14px;line-height:1.4;color:var(--quiet-on-ink)}
.au-legend>span{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.au-key{display:block;width:14px;height:14px;flex:none}
.au-key-b24{background:var(--paper)}
.au-key-n8n{background:var(--node);box-shadow:inset 0 0 0 1px rgb(235 233 229 / .38)}
.au-key-human{background:var(--accent)}
.au-legend+.au-fine{margin-top:10px}

/* Demo and production are the same scenario; the guards are what an engineer adds. */
.au-flow-craft .au-step[data-lane=n8n]{box-shadow:inset 0 0 0 1px rgb(235 233 229 / .38)}
.au-step.is-guard{transition:background-color 260ms ease,color 260ms ease}
.au-flow-craft.is-prod .au-step.is-guard::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--accent)}
.au-key-guard{background:var(--accent);height:4px!important;width:22px!important}
.au-flow-craft:not(.is-prod) .au-step.is-guard{background:var(--ink);color:transparent;box-shadow:none;outline:1px dashed rgb(235 233 229 / .34);outline-offset:-1px}
.au-flow-craft:not(.is-prod) .au-step.is-guard>*{visibility:hidden}
.au-flow-craft:not(.is-prod) :is(.au-wire-branch,.au-via){display:none}
.au-craft-body{margin-top:clamp(64px,8vw,120px)}
.au-detail{margin-top:40px;max-width:32em;font-size:16px;line-height:1.5}
.au-detail summary{display:inline-flex;gap:20px;align-items:baseline;cursor:pointer;list-style:none;padding-block:9px}
.au-detail summary::-webkit-details-marker{display:none}
.au-detail summary>span{font-size:23px;line-height:1}
.au-detail[open] summary>span{transform:rotate(45deg)}
.au-detail summary:hover{text-decoration:underline;text-underline-offset:4px}
.au-detail>div{padding-top:14px;display:grid;gap:16px}
.au-sources{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px}
.au-sources a{text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.au-sources a:hover{color:var(--accent)}

/* Calculator. */
.au-count{align-items:start}
.au-controls{display:grid;gap:26px;margin-top:44px;max-width:30em}
.au-control-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:16px}
.au-control-head label{cursor:pointer}
.au-control-head output{font-variant-numeric:tabular-nums;font-weight:500}
.au-control input{display:block;appearance:none;-webkit-appearance:none;width:100%;height:48px;margin:6px 0 0;background:transparent;cursor:ew-resize;touch-action:pan-y}
.au-control input::-webkit-slider-runnable-track{height:4px;background:#c5c3bd}
.au-control input::-moz-range-track{height:4px;background:#c5c3bd}
.au-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:64px;height:40px;margin-top:-18px;border:0;border-radius:0;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M19 20h26m-20-6-6 6 6 6m14-12 6 6-6 6' fill='none' stroke='%23d7ff45' stroke-width='1.7'/%3E%3C/svg%3E") center / 64px 40px no-repeat}
.au-control input::-moz-range-thumb{width:64px;height:40px;border:0;border-radius:0;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M19 20h26m-20-6-6 6 6 6m14-12 6 6-6 6' fill='none' stroke='%23d7ff45' stroke-width='1.7'/%3E%3C/svg%3E") center / 64px 40px no-repeat}
.au-control input:hover::-webkit-slider-thumb{background-color:#30302c}
.au-result{margin-top:48px}
.au-result-value{display:block;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(84px,10.4vw,168px);line-height:.86;letter-spacing:-.05em;white-space:nowrap;font-variant-numeric:tabular-nums}
.au-result-unit{font-size:.5em;letter-spacing:-.035em;background:var(--accent);padding:0 .16em .04em .1em;margin-left:-.06em}
.au-result-label{display:block;margin-top:26px;max-width:22em;font-size:clamp(20px,1.8vw,25px);line-height:1.32;letter-spacing:-.02em}
.au-result+.au-fine,.au-fine+.au-fine{margin-top:22px}
[data-count].is-enhanced [data-count-fallback]{display:none}

/* Four stages, numbered like the team metrics on the home page. */
.au-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(24px,3.4vw,56px);row-gap:44px;margin-top:clamp(40px,5vw,72px)}
.au-stage-n{display:block;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(66px,6.8vw,96px);line-height:.9;letter-spacing:-.055em}
.au-stages h3{margin-top:22px;font-size:clamp(21px,1.7vw,25px);letter-spacing:-.03em}
.au-stages p{margin-top:12px;font-size:16px;line-height:1.5;max-width:22em}

/* Contact: the home page's lime field. */
.au-contact{background:var(--accent);color:var(--ink);padding-block:clamp(40px,4.6vw,64px) 44px}
.au-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 7%;align-items:end}
.au-contact h2{grid-column:1/-1;font-size:clamp(40px,13.4vw,222px);line-height:.9;letter-spacing:-.05em}
.au-contact-art{grid-column:1;grid-row:2/4;width:78%;margin-top:20px}
.au-contact-links{grid-column:2;display:flex;flex-direction:column;align-items:start;gap:10px;padding-top:28px}
.au-contact-links p{max-width:23em;margin-bottom:22px;font-size:18px;line-height:1.5}
.au-telegram{display:flex;gap:36px;font-size:clamp(25px,2.4vw,36px);letter-spacing:-.035em;margin-bottom:8px}
.au-contact-links>a:not(.au-telegram){font-size:17px}
.au-contact-links a:hover{opacity:.72}
.au-signature{grid-column:2;justify-self:end;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:65px;line-height:.7;letter-spacing:-.04em}
.au-signature:hover{opacity:.72}

@media(max-width:1050px){
 .au-split{column-gap:5%}
 .au-flow{grid-template-columns:104px repeat(var(--steps),minmax(0,1fr));column-gap:12px}
 .au-step{padding:12px 12px 13px}
 .au-step b{font-size:15px}
 .au-step span{font-size:12px}
 .au-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .case-page{--frame:20px;font-size:16px}
 .case-page h1{font-size:13.4vw}
 .case-page h2{font-size:clamp(40px,12.6vw,62px);line-height:.98}
 .case-page h2>span{white-space:normal}
 .case-page h2>span:last-child:not(:only-child){text-align:left}
 .au-contact h2{font-size:clamp(44px,14.6vw,72px)}
 .au-top{padding-top:22px;align-items:start}
 .au-home{font-size:30px}
 .au-nav{gap:18px;font-size:14px}
 .au-nav a:not(:last-child){display:none}
 .au-deck{display:block}
 .au-meta{margin-top:26px;text-align:left;flex-direction:row;flex-wrap:wrap;gap:4px 14px;font-size:13px}
 .au-hero-art img{aspect-ratio:3/2}
 .au-split{display:flex;flex-direction:column;align-items:stretch;gap:36px}
 .au-split-art-left .au-art{order:-1}
 .au-list{gap:24px}
 .au-list dd{font-size:17px}
 .au-lead+.au-list{margin-top:32px}
 .au-statement{margin-top:36px}
 .au-art-tall{max-width:300px;align-self:center}
 .au-scenes-head{margin-bottom:28px;gap:20px}
 .au-tabs{gap:2px}
 .au-tabs button{padding:11px 14px;font-size:15px}
 /* Lanes become two columns; the process reads top to bottom. */
 .au-flow{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;column-gap:14px;row-gap:26px}
 .au-lane{grid-row:1!important;align-self:end;font-size:15px}
 .au-lane[data-lane=b24]{grid-column:1}
 .au-lane[data-lane=n8n]{grid-column:2}
 .au-step{grid-row:calc(var(--i) + 1)!important;min-height:86px}
 .au-step[data-lane=b24]{grid-column:1}
 .au-step[data-lane=n8n]{grid-column:2}
 .au-scene-note{margin-top:32px}
 .au-legend{margin-top:32px;font-size:13px;column-gap:18px}
 .au-result{margin-top:40px}
 .au-stages{grid-template-columns:1fr;row-gap:36px}
 .au-stages li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:8px}
 .au-stage-n{grid-row:1/3;font-size:66px}
 .au-stages h3{margin-top:6px}
 .au-contact{padding-block:39px 38px}
 .au-contact-grid{grid-template-columns:1fr;gap:26px}
 .au-contact h2{grid-column:1}
 .au-contact-art{grid-column:1;grid-row:auto;width:70%;justify-self:end;margin-top:4px}
 .au-contact-links{grid-column:1;padding-top:0}
 .au-telegram{font-size:27px;gap:28px}
 .au-signature{grid-column:1;font-size:62px}
}
@media(prefers-reduced-motion:reduce){
 .case-page a,.case-page button,.au-step.is-guard{transition:none}
 .au-pulse{animation:none;display:none}
}