/* Shared styles of the product pages (/solutions/<product>, scripts/products-222.mjs). The tokens, header, type, buttons, footer,
   problem and solution marks and the film player are the ones of the Solutions page and the home page, copied as they stand there
   (docs/prd/product-pages.md). Product-only rules follow at the end. */
:root{
  --yellow:#FFE600;
  --yellow-soft:#FFF08C;
  --black:#0A0A0A;
  --cream:#F5F1E8;
  --cream-warm:#EDE5D0;
  --muted:rgba(10,10,10,.62);
  --line:rgba(10,10,10,.16);
  --ink:rgba(10,10,10,.66);
  --muted-c:rgba(245,241,232,.66);
  --line-c:rgba(245,241,232,.2);
  --nogis:#1DE9B6;
  --f-display:'Unbounded','Arial Black',system-ui,sans-serif;
  --f-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --max:1280px;
  --pad:80px;
  --hdr:68px;
  --ease:cubic-bezier(.22,.68,.2,1);
  --spring:cubic-bezier(.34,1.5,.64,1);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (max-width:900px){:root{--pad:24px}}
@media (max-width:560px){:root{--pad:20px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 24px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--black);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
h1,h2,h3,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
img,video{max-width:100%;display:block}
[hidden]{display:none!important}
::selection{background:var(--black);color:var(--yellow)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{width:100%;max-width:calc(var(--max) + var(--pad) * 2);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- type ---------- */
.mono{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.h2{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:-.026em;line-height:1.06;font-size:clamp(28px,4.3vw,66px);text-wrap:balance;max-width:19em}
.h3{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:-.02em;line-height:1.14;font-size:clamp(20px,2.05vw,30px);text-wrap:balance}
.lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;letter-spacing:-.005em;max-width:38em;text-wrap:pretty}
.body{font-size:16px;line-height:1.62;max-width:36em;text-wrap:pretty}

/* ---------- chrome ---------- */
.chap{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding-block:22px 18px;border-top:1px solid currentColor;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.sec{padding-block:clamp(64px,9vw,128px)}
.sec--cream{background:var(--cream);color:var(--black)}
.sec--black{background:var(--black);color:var(--cream)}

.btn{display:inline-flex;align-items:center;gap:14px;padding:18px 26px;border-radius:999px;border:1px solid var(--black);font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;background:transparent;color:var(--black);transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .35s}
.btn .arr{display:inline-block;font-size:15px;line-height:1;transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,10,10,.14)}
.btn:hover .arr{transform:translateX(5px)}
.btn:hover .arr--down{transform:translateY(4px)}
.btn--solid{background:var(--black);color:var(--yellow)}
.on-dark .btn{border-color:var(--cream);color:var(--cream)}
.on-dark .btn--solid{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
/* header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background .45s var(--ease),box-shadow .45s,transform .55s var(--ease)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hdr)}
.hdr__logo{display:block;flex:0 0 auto}
.hdr__logo img{height:32px;width:auto}
/* small laptop: the bar still lists the sections, so the logo takes its tablet size and the gaps tighten; no label breaks in two */
@media (min-width:981px) and (max-width:1100px){.hdr__in{gap:16px}.hdr__logo img{height:28px}}
.hdr__nav{display:flex;gap:clamp(16px,2vw,30px);font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.hdr__nav a{text-decoration:none;opacity:.7;transition:opacity .25s;position:relative}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
.hdr__nav a:hover,.hdr__nav a[aria-current]{opacity:1}
.hdr__nav a:hover::after,.hdr__nav a[aria-current]::after{transform:scaleX(1)}
.hdr__cta{padding:12px 18px}
.hdr.is-solid{background:rgba(245,241,232,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr.is-hidden{transform:translateY(-110%)}
/* phone and tablet: the bar never leaves the top of the screen. It is lower there and its button lighter;
   a two-line button opens the list of sections, and a tap on a section closes the list and goes there */
.hdr__burger,.hdr__menu,.hdr__veil{display:none}
@media (max-width:980px){
  :root{--hdr:56px}
  .hdr__nav{display:none}
  .hdr__in{gap:6px}
  .hdr__logo img{height:28px}
  .hdr__cta{margin-left:auto;gap:8px;padding:8px 14px;font-size:10px;letter-spacing:.12em}
  .hdr__cta .arr{font-size:12px}
  .hdr.is-hidden{transform:none}
  .hdr.is-open{background:var(--cream);box-shadow:0 1px 0 var(--line)}
  .hdr__burger{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;margin-inline-end:-11px;padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hdr__burger span{display:block;position:relative;width:22px;height:9px}
  .hdr__burger span::before,.hdr__burger span::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
  .hdr__burger span::before{top:0}
  .hdr__burger span::after{top:7.5px}
  .hdr.is-open .hdr__burger span::before{top:3.75px;transform:rotate(45deg)}
  .hdr.is-open .hdr__burger span::after{top:3.75px;transform:rotate(-45deg)}
  .hdr__veil{display:block;position:absolute;left:0;right:0;top:100%;height:100vh;z-index:-1;background:rgba(10,10,10,.3);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  .hdr.is-open .hdr__veil{opacity:1;visibility:visible;transition-delay:0s}
  .hdr__menu{display:block;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 56px);overflow-y:auto;padding:2px var(--pad) 20px;background:var(--cream);box-shadow:0 1px 0 var(--line),0 26px 44px rgba(10,10,10,.14);visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .25s ease,transform .35s var(--ease),visibility 0s linear .35s}
  .hdr.is-open .hdr__menu{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .hdr__menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.2;letter-spacing:-.01em;text-transform:uppercase}
  .hdr__menu a:last-child{border-bottom:0}
  .hdr__menu a[aria-current]{color:var(--muted)}
  .hdr__menu .arr{font-family:var(--f-mono);font-weight:500;font-size:15px}
}

/* reveal (content is complete at rest; JS only pre-hides blocks that are about to scroll in) */
[data-rv]{transition:opacity .9s var(--ease) var(--d,0ms),transform 1.1s var(--ease) var(--d,0ms)}
[data-rv].rv-pending{opacity:0;transform:translate3d(0,30px,0);transition:none}
[data-rv="words"].rv-pending{opacity:1;transform:none}
.w{display:inline-block;transition:opacity .75s var(--ease) calc(var(--i,0) * 42ms),transform .95s var(--ease) calc(var(--i,0) * 42ms)}
.rv-pending .w{opacity:0;transform:translate3d(0,.55em,0);transition:none}
.hl{background:var(--black);color:var(--yellow);padding:0 .2em .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sol__list{display:grid;margin-top:6px;margin-bottom:8px;border-top:1px solid rgba(10,10,10,.1)}
/* problem -> solution: a red brush cross marks the problem, a green brush tick marks the fix */
.sol__item{display:grid;row-gap:8px;padding:12px 0 12px 30px;border-bottom:1px solid rgba(10,10,10,.08)}
.sol__item:last-child{border-bottom:0;padding-bottom:4px}
.sol__p,.sol__s{position:relative;display:block}
.sol__p::before,.sol__s::before{content:"";position:absolute;left:-30px;top:0;width:20px;height:20px;background-position:center;background-size:contain;background-repeat:no-repeat}
.sol__p::before{background-image:url(/assets/marks/problem.png)}
.sol__s::before{background-image:url(/assets/marks/solution.png)}
.sol__p{font-size:13.5px;line-height:1.42;color:rgba(10,10,10,.62)}
.sol__s{font-size:14px;line-height:1.42;font-weight:600;color:var(--black)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nb{white-space:nowrap}
/* footer */
.ftr{background:var(--black);color:var(--cream);padding-block:clamp(36px,4vw,56px) calc(clamp(28px,3vw,40px) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-c)}
.ftr__in{display:grid;grid-template-columns:auto 1fr auto;gap:20px 40px;align-items:center}
.ftr__logo img{height:32px;width:auto}
.ftr__sig{font-size:14px;color:var(--muted-c);max-width:30em}
.ftr__meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-c);text-align:end;line-height:1.8}
.ftr__meta a{color:var(--cream)}
/* the partner in the footer: a label and the wordmark, which opens the partner's own site */
.ftr__mid{display:grid;gap:8px;justify-items:start}
.ftr__ptn{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-c)}
.ftr__ptn a{display:inline-flex;padding-block:8px;transition:opacity .3s}
.ftr__ptn a:hover{opacity:.72}
.ftr__ptn svg{display:block;height:11px;width:auto;overflow:visible}
/* narrow phone: the copyright takes its own line and the dot before it is not shown */
@media (max-width:389px){.ftr__dot{display:none}.ftr__meta .nb{display:block}}
@media (max-width:900px){.ftr__in{grid-template-columns:1fr}.ftr__meta{text-align:start}}
.win{border-radius:14px;overflow:hidden;background:#1C1C1C;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(245,241,232,.08);transform:perspective(1400px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .6s var(--ease)}
.win__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#262626}
.win__bar i{width:10px;height:10px;border-radius:50%;background:#3d3d3d}
.win__bar i:first-child{background:#FF5F57}.win__bar i:nth-child(2){background:#FEBC2E}.win__bar i:nth-child(3){background:#28C840}
.win__bar span{margin-left:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-c)}
.win video{width:100%;height:auto;aspect-ratio:1200/750;object-fit:cover;background:#F1EDE4}
.win--wide video{aspect-ratio:16/9}
.film-open{display:block;position:relative;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.film-open:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.film-open__cue{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:10px;padding:7px;padding-inline-end:15px;border-radius:999px;background:rgba(10,10,10,.84);color:var(--cream);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.3);transition:background .3s var(--ease),transform .3s var(--ease)}
.film-open__cue i{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--yellow)}
.film-open__cue i::before{content:"";position:absolute;left:50%;top:50%;margin:-6px 0 0 -4px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--black)}
.film-open:hover .film-open__cue,.film-open:focus-visible .film-open__cue{background:var(--black);transform:translateY(-2px)}
html:not(.js) .film-open__cue{display:none}
@media (max-width:420px){.film-open__cue{left:10px;bottom:10px;gap:8px;padding:5px;padding-inline-end:12px}.film-open__cue i{width:24px;height:24px}}
/* the film is sized by the screen, not pinned to the edges: on a phone a part that slides in from the side widens the layout viewport for a moment, and a box with inset:0 would be cut on the far side */
.film{--film-h:100vh;--film-room:calc(var(--film-h) - 60px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));position:fixed;top:0;inset-inline-start:0;width:100vw;height:var(--film-h);z-index:200;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);background:#080808;color:var(--cream);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overscroll-behavior:contain}
@supports (height:100dvh){.film{--film-h:100dvh}}
.film[hidden]{display:none}
.film__bar{display:flex;align-items:center;gap:8px 16px;height:60px;padding:0 clamp(14px,2.4vw,28px)}
.film__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.film__lang{flex:0 0 auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-c);white-space:nowrap}
html[lang="ru"] .film__lang{display:none}
.film__close{position:relative;flex:0 0 auto;margin-inline-start:auto;width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,241,232,.3);background:none;color:var(--cream);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.film__close::before,.film__close::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.6px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.film__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.film__close:hover,.film__close:focus-visible{background:var(--yellow);border-color:var(--yellow);color:var(--black);outline:none}
.film__stage{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:0;padding:0 clamp(0px,2.4vw,28px) clamp(0px,2.4vw,28px)}
.film__video{display:block;width:min(100%,calc((var(--film-room) - clamp(0px,2.4vw,28px)) * 16 / 9));max-width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:10px;outline:none}
.film--tall .film__stage{padding:0}
.film--tall .film__video{width:min(100%,calc(var(--film-room) * 9 / 16));aspect-ratio:9/16;border-radius:0}
@media (max-width:600px){.film__lang{display:none}}
html.film-on,html.film-on body{overflow:hidden}
@media (min-width:901px){.h2{font-size:clamp(28px,3.0556vw,46.86px)}}
html .mono{font-size:12px}
html .chap{font-size:12px}
html .btn{font-size:12px}
html .hdr__nav{font-size:12px}
@media (max-width:980px){html .hdr__cta{font-size:10.91px}}
html .sol__cat{font-size:10.91px}
html .ftr__meta{font-size:11.45px}
html .ftr__ptn{font-size:11.45px}
html .lang__btn{font-size:12px}
@media (max-width:980px){html .hdr__menu .hdr__lang p{font-size:10.91px}}
html .film-open__cue{font-size:11.45px}
html .film__title{font-size:11.45px}
html .film__lang{font-size:10.91px}

/* ---------- the glass card (the Solutions page) ---------- */
.sol{position:relative;display:flex;flex-direction:column;height:100%;padding:20px 22px 16px;border-radius:24px;color:var(--black);text-decoration:none;overflow:hidden;isolation:isolate;
  background:linear-gradient(140deg,rgba(255,255,255,.74),rgba(255,255,255,.4) 60%,rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 26px 60px rgba(70,56,0,.16),0 3px 10px rgba(70,56,0,.07),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -10px 28px rgba(255,255,255,.28);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.sol::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.7));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1}
.sol::after{content:"";position:absolute;left:-10%;top:-55%;width:80%;height:90%;background:radial-gradient(closest-side,rgba(255,255,255,.7),rgba(255,255,255,0));pointer-events:none;z-index:-1}
.sol__glow{position:absolute;left:-46px;top:-58px;width:210px;height:210px;background-position:center;background-size:contain;background-repeat:no-repeat;filter:blur(34px) saturate(1.5);opacity:.4;z-index:-2;pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sol{background:rgba(250,248,242,.97)}}

/* ================= product page ================= */
/* marks of the problem / solution pairs follow the reading direction */
.sol__item{padding:12px 0;padding-inline-start:30px}
.sol__p::before,.sol__s::before{left:auto;inset-inline-start:-30px}

/* hero: the Solutions page's first screen, a short one; the glass card with the problems stands beside the name */
.ph{position:relative;isolation:isolate;background:var(--cream-warm);padding-block:calc(var(--hdr) + clamp(16px,2.4vw,32px)) clamp(44px,5.4vw,80px)}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(30deg,rgba(10,10,10,.1) 0 1.2px,transparent 1.2px 250px),
    repeating-linear-gradient(150deg,rgba(10,10,10,.1) 0 1.2px,transparent 1.2px 250px),
    repeating-linear-gradient(30deg,rgba(10,10,10,.05) 0 1px,transparent 1px 50px),
    repeating-linear-gradient(150deg,rgba(10,10,10,.05) 0 1px,transparent 1px 50px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.ph__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4.6vw,76px);align-items:center;margin-top:clamp(22px,3vw,44px)}
.ph__main{display:grid;justify-items:start;align-content:start}
.ph__back{display:inline-flex;align-items:center;gap:10px;padding-block:10px;color:inherit;text-decoration:none;opacity:.66;transition:opacity .25s}
.ph__back:hover,.ph__back:focus-visible{opacity:1}
.ph__back .arr{display:inline-block;transition:transform .4s var(--ease)}
.ph__back:hover .arr{transform:translateX(-4px)}
html[dir=rtl] .ph__back:hover .arr{transform:translateX(4px)}
.ph__name{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);margin-top:clamp(14px,1.6vw,22px)}
.ph__ico{flex:0 0 auto;width:clamp(56px,6.4vw,96px);height:auto;filter:drop-shadow(0 8px 10px rgba(60,48,0,.2));animation:phBob 4.6s ease-in-out infinite}
@keyframes phBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ph__h{font-family:var(--f-display);font-weight:700;letter-spacing:-.028em;line-height:1.06;font-size:clamp(34px,5.6vw,88px);overflow-wrap:anywhere}
.ph__cat{margin-top:clamp(14px,1.6vw,22px);color:var(--muted)}
.ph__lead{margin-top:clamp(14px,1.6vw,22px)}
.ph__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,34px)}
.pc{height:auto;padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px) clamp(14px,1.6vw,22px)}
.pc__t{color:var(--muted);padding-bottom:12px;border-bottom:1px solid rgba(10,10,10,.1)}
.pc .sol__list{margin-top:0;border-top:0}
.pc .sol__item{row-gap:10px;padding-block:clamp(14px,1.5vw,20px)}
.pc .sol__item:last-child{padding-bottom:6px}
.pc .sol__p{font-size:clamp(15px,1.15vw,17px)}
.pc .sol__s{font-size:clamp(16px,1.25vw,19px)}
.pc .sol__p::before,.pc .sol__s::before{width:22px;height:22px;inset-inline-start:-32px}
.pc .sol__item{padding-inline-start:32px}
@media (max-width:900px){.ph__in{grid-template-columns:1fr}.ph__acts .btn{flex:1 1 auto;justify-content:space-between}}

/* about: the lead and the three blocks */
.pa{background:var(--cream);padding-block:clamp(56px,7vw,104px)}
.pa__lead{margin-top:clamp(24px,3vw,40px);max-width:34em;font-size:clamp(19px,1.8vw,26px);line-height:1.5}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,56px);margin-top:clamp(36px,4.6vw,68px)}
.tri__i{display:grid;align-content:start;gap:14px;padding-top:18px;border-top:1.5px solid var(--black)}
.tri__n{color:var(--muted)}
.tri__t{font-size:clamp(20px,1.9vw,28px)}
.tri .body{color:var(--ink)}
@media (max-width:900px){.tri{grid-template-columns:1fr}}

/* demos and the film: the black chapter */
.pd{background:var(--black);color:var(--cream);padding-block:clamp(56px,7vw,104px)}
.pd .chap{border-top-color:var(--line-c)}
.pd .chap + .dm,.pd .chap + .dm__note{margin-top:clamp(28px,3.6vw,52px)}
.pd .dm + .chap{margin-top:clamp(56px,7vw,104px)}
.dm__note{margin-top:clamp(18px,2vw,28px);color:var(--muted-c)}
.dm__note + .dm{margin-top:clamp(28px,3.6vw,52px)}
.dm{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(24px,4.4vw,72px);align-items:center}
.dm + .dm{margin-top:clamp(48px,6vw,96px)}
.dm--rev{grid-template-columns:minmax(0,.66fr) minmax(0,.34fr)}
.dm--rev .dm__txt{order:2}
.dm--film{grid-template-columns:minmax(0,1fr)}
.dm__txt{display:grid;gap:clamp(12px,1.4vw,18px);justify-items:start;align-content:center}
.dm__n{font-family:var(--f-serif);font-style:italic;font-size:clamp(30px,3.2vw,48px);line-height:1;color:var(--yellow)}
.dm__t{color:var(--cream)}
.dm__c{color:var(--muted-c)}
.dm__go{margin-top:clamp(6px,1vw,12px);border-color:var(--cream);color:var(--cream)}
.dm__go:hover{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.dm__media{min-width:0}
.pd .win{box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(245,241,232,.1)}
.win{transform:none}
.dframe{position:relative;aspect-ratio:16/10;overflow:hidden;background:#F1EDE4}
.dframe__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dframe iframe{position:absolute;left:0;top:0;width:1440px;height:900px;max-width:none;border:0;transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.dframe iframe.is-on{opacity:1}
.dframe__hit{position:absolute;inset:0;width:100%;height:100%}
.film-open__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#1C1C1C}
.render{display:block;background:#fff}
.render img{display:block;width:100%;height:auto}
@media (max-width:900px){
  .dm,.dm--rev{grid-template-columns:minmax(0,1fr)}
  .dm--rev .dm__txt{order:0}
  .dm__go{width:100%;justify-content:space-between}
}
/* the film's note about its language belongs to the films; a demo capture speaks the language of its screens */
#film[data-kind=demo] .film__lang{display:none}

/* the lightbox of the drawn previews */
.lb{width:min(96vw,1400px);max-width:none;max-height:92vh;padding:0;border:0;border-radius:14px;background:#fff;overflow:auto}
.lb::backdrop{background:rgba(10,10,10,.82)}
.lb__img{display:block;width:100%;height:auto}
.lb__x{position:sticky;top:10px;float:right;margin:10px 10px -54px 0;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(10,10,10,.3);background:rgba(255,255,255,.9);cursor:pointer}
html[dir=rtl] .lb__x{float:left;margin:10px 0 -54px 10px}
.lb__x::before,.lb__x::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.6px;background:var(--black);transform:translate(-50%,-50%) rotate(45deg)}
.lb__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lb__x:hover,.lb__x:focus-visible{background:var(--yellow);outline:none}

/* previous and next */
.pn{background:var(--cream);border-top:1px solid var(--line)}
.pn__in{display:grid;grid-template-columns:1fr auto 1fr;gap:16px 24px;align-items:center;padding-block:clamp(20px,2.4vw,32px)}
.pn__a{display:grid;gap:4px;padding-block:10px;color:inherit;text-decoration:none}
.pn__a--next{justify-items:end;text-align:end}
.pn__a .mono{color:var(--muted);transition:color .25s}
.pn__a b{font-family:var(--f-display);font-weight:600;font-size:clamp(16px,1.5vw,22px);letter-spacing:-.01em}
.pn__a:hover .mono,.pn__a:focus-visible .mono{color:var(--black)}
.pn__all{color:inherit;text-decoration:none;padding:12px 18px;border:1px solid var(--line);border-radius:999px;transition:border-color .25s,background .25s}
.pn__all:hover,.pn__all:focus-visible{border-color:var(--black);background:rgba(10,10,10,.04)}
@media (max-width:700px){.pn__in{grid-template-columns:1fr 1fr}.pn__all{grid-column:1/-1;grid-row:2;justify-self:stretch;text-align:center}}

/* the closing band */
.pcta{background:var(--yellow);color:var(--black);padding-block:clamp(56px,7.5vw,112px)}
.pcta .wrap{display:grid;gap:clamp(16px,2vw,26px);justify-items:start}
.pcta__h{max-width:16em}
.pcta__lead{max-width:34em;color:rgba(10,10,10,.76)}
.pcta__row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(4px,1vw,12px)}
.pcta .btn{border-color:var(--black)}
.pcta .btn--solid:hover{background:var(--black);color:var(--yellow)}
.pcta__micro{font-family:var(--f-mono);font-size:11.45px;letter-spacing:.14em;text-transform:uppercase;line-height:1.8;color:rgba(10,10,10,.66)}
@media (max-width:410px){.contact__dot{display:none}.pcta__micro .nb:first-child{display:block}}
@media (max-width:600px){.pcta .btn{width:100%;justify-content:space-between}.pcta__row{display:grid;gap:16px;width:100%}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ph__ico{animation:none}
  [data-rv],.w{transition:none!important}
  .dframe iframe{transition:none}
}