/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-italic-400-o72-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-italic-400-o72-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-500-o72-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-500-o72-latin.woff2) format('woff2');
  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;
}

/* ═══ self-hosted fonts (Google woff2 mirror, latin+latin-ext) ═══ */
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-normal-400-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-normal-500-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-normal-600-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
/* latin */
/* latin-ext */
/* =========================================================
   GRUENCY — site.css (clean rebuild, gruency-design system)
   ========================================================= */
:root{
  --bg0:#000;--bg1:#0a0a0a;--s1:#141414;--s2:#1d1d1f;--ring-d:rgba(255,255,255,.09);
  --ink-d:#f5f5f7;--mute-d:#a1a1a6;--faint-d:#6e6e73;
  --l0:#fafafa;--l1:#f5f5f7;--card:#fff;--ring-l:rgba(0,0,0,.07);
  --ink-l:#171717;--mute-l:#5f5f64;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans','Noto Sans JP','Noto Sans KR','Noto Sans SC','Noto Sans Devanagari','Noto Sans Hebrew',sans-serif;
  --text:var(--sans);--mono:ui-monospace,'SF Mono',Menlo,monospace;
  --wrap:1120px;--gut:24px;--sec:clamp(72px,10vw,128px);
  --r-btn:6px;--r-card:14px;--ease:cubic-bezier(.2,0,0,1);
  /* legacy names used by scripts/pages */
  --dark:#000;--light:#f5f5f7;--light-alt:#fafafa;--ind:#f5f5f7;--inl:#171717;--ind2:#a1a1a6;--inl2:#5f5f64;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;background:var(--bg0)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg0);color:var(--ink-d);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--ink-d);color:#000;padding:10px 14px;border-radius:var(--r-btn)}
.skip:focus{top:12px}
.nb{white-space:nowrap}

/* ---------- Sections & rhythm ---------- */
section{position:relative;isolation:isolate}
.sec-dark{background:var(--bg0);color:var(--ink-d)}
.sec-light{background:var(--l1);color:var(--ink-l)}
.sec-lightalt{background:var(--l0);color:var(--ink-l)}
.pad{padding:var(--sec) var(--gut)}
.pad>*,.inner>*{max-width:var(--wrap);margin-inline:auto}

/* ---------- Type ---------- */
h1,h2,.h-dark,.h-light,.ch-h2{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.04;text-wrap:balance}
h2,.h-dark,.h-light,.ch-h2{font-size:clamp(38px,5.2vw,68px);margin-bottom:48px}
h2:has(+.intro-p){margin-bottom:18px}
.intro-p,.lead-d{font-size:clamp(17px,1.4vw,19px);line-height:1.5;max-width:680px!important;margin:0 0 56px;color:var(--mute-l)}
.sec-dark .intro-p,.lead-d{color:var(--mute-d)}
h3{font:600 19px/1.3 var(--sans);letter-spacing:-.01em;margin-bottom:10px;text-wrap:balance}
p{text-wrap:pretty}
.sec-light p,.sec-lightalt p{color:var(--mute-l)}
.sec-dark p{color:var(--mute-d)}
.pr-cat,.sh-k,.rc-src,.crumb,.s{font:500 12px/1.35 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.pr-cat,.sh-k,.rc-src{color:var(--mute-l)}
:lang(ja) p,:lang(zh-Hans) p,:lang(ko) p,:lang(ja) li,:lang(zh-Hans) li,:lang(ko) li{line-height:1.8;line-break:strict}
:lang(ko) p{word-break:keep-all}
:lang(ja) :is(h1,h2,h3),:lang(zh-Hans) :is(h1,h2,h3),:lang(ko) :is(h1,h2,h3),:lang(el) :is(h1,h2),:lang(ru) :is(h1,h2),:lang(uk) :is(h1,h2){letter-spacing:0}
:lang(he) :is(h1,h2,.ch-h2),:lang(hi) :is(h1,h2,.ch-h2),:lang(ja) :is(h1,h2,.ch-h2),:lang(zh-Hans) :is(h1,h2,.ch-h2),:lang(ko) :is(h1,h2,.ch-h2){font-family:var(--sans);font-weight:600;letter-spacing:0}

/* ---------- Buttons & links ---------- */
.btn-p,.btn-g,.ch-btn,.m-submit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r-btn);font:500 15px/1 var(--sans);transition:background .18s var(--ease),color .18s,box-shadow .18s}
.btn-p,.ch-btn{background:var(--ink-d);color:#000}
.btn-p:hover,.ch-btn:hover{background:#fff}
.btn-g{color:var(--ink-d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.btn-g:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.pr-cta{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1.2 var(--sans);color:var(--ink-l);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(0,0,0,.25);transition:text-decoration-color .18s}
.pr-cta:hover{text-decoration-color:currentColor}
.sec-dark .pr-cta{color:var(--ink-d);text-decoration-color:rgba(255,255,255,.3)}
.showcase-cta{margin-top:40px!important}

/* ---------- Header ---------- */
.site-hdr{position:fixed;inset:0 0 auto;z-index:50;background:rgba(0,0,0,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);transition:background .25s,color .25s}
.site-hdr.on-light{background:rgba(250,250,250,.8);color:var(--ink-l)}
.hdr-in{max-width:var(--wrap);margin:0 auto;height:60px;padding:0 var(--gut);display:flex;align-items:center;gap:28px;box-sizing:content-box}
.brand{display:inline-flex;align-items:center;min-height:44px;font:600 15px/1 var(--sans);letter-spacing:.12em}
.top-nav{display:flex;gap:26px;margin-inline-start:auto}
.top-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;opacity:.72;transition:opacity .18s}
.top-nav a:hover{opacity:1}
.lang-sw{display:flex;gap:8px;font:500 12px/1 var(--sans)}
.lang-sw a{display:inline-flex;align-items:center;min-height:44px;opacity:.55}
.lang-sw a[aria-current]{opacity:1}
.hdr-cta{min-height:44px;padding:0 14px;border-radius:var(--r-btn);font:500 13px/1 var(--sans);box-shadow:inset 0 0 0 1px currentColor;opacity:.9}
.nav-toggle{display:none;width:44px;height:44px;position:relative}
.nav-toggle span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .2s var(--ease),opacity .2s}
.nav-toggle span:nth-child(1){top:16px}.nav-toggle span:nth-child(2){top:21px}.nav-toggle span:nth-child(3){top:26px}
.nav-toggle.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.menu-ov{position:fixed;inset:0;z-index:60;background:#000;color:var(--ink-d);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:80px 28px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.menu-ov.open{opacity:1;visibility:visible}
.menu-ov a{font:500 clamp(30px,8vw,44px)/1.25 var(--serif);min-height:44px}
.menu-close{position:absolute;top:10px;inset-inline-end:14px;width:44px;height:44px;font-size:26px}
@media (max-width:900px){.top-nav{display:none}.nav-toggle{display:block}.lang-sw{margin-inline-start:auto}}
@media (max-width:600px){.hdr-cta{display:none}.lang-sw a:not([aria-current]){display:none}.hdr-in{gap:10px}}

/* ---------- Hero ---------- */
#hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--gut) 72px;overflow:hidden}
#hero>*:not(.hero-ph){position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(1) contrast(1.05)}
.hero-veil{position:absolute;inset:0;background:
 radial-gradient(rgba(245,245,247,.14) 1px,transparent 1.2px) 0 0/6px 6px,
 linear-gradient(rgba(245,245,247,.03) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,rgba(245,245,247,.03) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.66) 48%,rgba(0,0,0,.4) 100%)}
[dir="rtl"] .hero-veil{transform:scaleX(-1)}
@media (max-width:900px){.hero-veil{background:radial-gradient(rgba(245,245,247,.12) 1px,transparent 1.2px) 0 0/6px 6px,linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85))}}
.hero-h h1{font-size:clamp(52px,8.4vw,112px);line-height:.98;letter-spacing:-.03em;color:var(--ink-d);max-width:12ch}
.hero-h h1 .chrome{font-style:italic;font-weight:400;background:linear-gradient(180deg,#e9eaec 0%,#bcbfc4 56%,#8f9298 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline-end:.06em}
:lang(he) .hero-h h1,:lang(hi) .hero-h h1,:lang(ja) .hero-h h1,:lang(zh-Hans) .hero-h h1,:lang(ko) .hero-h h1{font-size:clamp(40px,6.4vw,84px);line-height:1.1}
.hero-deck{margin-top:32px!important;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:#d2d2d7;max-width:640px!important;margin-inline-start:0!important}
#hero .hero-deck,#hero .hero-cta,#hero .spec-strip{margin-inline-start:auto}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.spec-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(56px,8vw,96px)!important;max-width:760px!important;margin-inline-start:0!important}
#hero .spec-strip{margin-inline-end:auto}
.spec-strip .v{font:500 clamp(30px,3.4vw,44px)/1 var(--sans);letter-spacing:-.02em;color:var(--ink-d);font-variant-numeric:tabular-nums}
.spec-strip .cell{display:flex;flex-direction:column-reverse;gap:10px}
.spec-strip .s{color:var(--mute-d);text-transform:none;letter-spacing:0;font-size:13px;overflow-wrap:anywhere}
@media (max-width:600px){.spec-strip{grid-template-columns:1fr 1fr}.spec-strip .cell:last-child{grid-column:1/-1}}

/* ---------- Cards (shared) ---------- */
.card,.pr-item,.shape,.rc-item,.rv-item,.sy-block,.proc li,.faq-list details{border-radius:var(--r-card)}
.sec-light :is(.pr-item,.shape,.rc-item,.rv-item),.sec-lightalt :is(.pr-item,.shape,.rc-item,.rv-item){background:var(--card);box-shadow:0 0 0 1px var(--ring-l)}
.sec-light .faq-list details,.sec-lightalt .faq-list details{background:var(--card);box-shadow:0 0 0 1px var(--ring-l)}
@media (hover:hover){:is(.pr-item,.shape,.rc-item,.rv-item){transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.sec-light :is(.pr-item,.shape,.rc-item):hover,.sec-lightalt :is(.pr-item,.shape,.rc-item):hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 14px 30px -18px rgba(0,0,0,.25)}}

/* ---------- Worldwide ---------- */
.ww-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center}
.globe-wrap{position:relative}
.globe-wrap canvas{width:100%;height:auto}
.globe-tip{position:absolute;pointer-events:none;padding:6px 10px;border-radius:6px;background:#111;color:#fff;font-size:12px;opacity:0;transition:opacity .15s;white-space:nowrap}
.globe-tip.on,.globe-tip[style*="opacity: 1"]{opacity:1}
.logobar-cap{font-size:14px;margin-bottom:22px!important;color:var(--mute-l)}
.logobar-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;align-items:center}
.logobar-row img{width:auto;max-width:100%;filter:grayscale(1);opacity:.62}
.logobar-note{font-size:12px;margin-top:22px!important;color:var(--mute-l)}
@media (max-width:900px){.ww-grid{grid-template-columns:minmax(0,1fr);gap:40px}}

/* ---------- Practice ---------- */
#prac-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pr-item{display:flex;flex-direction:column;padding:28px 24px 20px}
.pr-top{margin-bottom:28px}
.pr-item h3{white-space:normal}
.pr-item p{font-size:15px;line-height:1.55;margin-bottom:20px}
.pr-item .pr-cta{margin-top:auto;align-self:flex-start;font-size:14px}
.sig-note{margin-top:32px!important;font-size:14px}
@media (max-width:600px){#prac-list{grid-template-columns:minmax(0,1fr)}}

/* ---------- Audience ---------- */
.aud-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.aud-list li{padding:18px 0}
.aud-list li+li{margin-top:4px}
.aud-list strong,.aud-list b{display:block;color:var(--ink-l);font-weight:600;margin-bottom:4px}
.aud-list p,.aud-list li{font-size:15px;color:var(--mute-l)}
.aud-visual{border-radius:var(--r-card);overflow:hidden}
.aud-visual img{width:100%;height:auto}
@media (max-width:900px){.aud-cols{grid-template-columns:minmax(0,1fr);gap:40px}}

/* ---------- Systems ---------- */
#systems{padding:0}
.sys-hero{position:relative;min-height:min(78vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.sys-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sys-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 30%,rgba(0,0,0,.85))}
.sys-hero-txt{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 64px;box-sizing:content-box}
.sys-hero-txt .h-dark{margin-bottom:14px}
.sys-hero-txt p{max-width:600px;font-size:18px;color:#d2d2d7}
#systems>.pad{padding-top:64px}
.sys-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sy-block{padding:28px 26px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d)}
@media (min-width:900px){.sys-cols .sy-block h3{min-height:2.6em}}
.sy-block li{position:relative;padding:8px 0;padding-inline-start:20px;font-size:15px;line-height:1.5;color:var(--mute-d)}
.sy-block li::before{content:"";position:absolute;inset-inline-start:2px;top:17px;width:5px;height:5px;border-radius:50%;background:var(--faint-d)}
@media (hover:hover){.sy-block{transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}.sy-block:hover{transform:translateY(-3px);background:var(--s2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}}
@media (max-width:900px){.sys-cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- Showcase / configurations ---------- */
.machine-band{margin-bottom:56px!important;border-radius:var(--r-card);overflow:hidden;aspect-ratio:21/9;background:#000}
.machine-band img{width:100%;height:100%;object-fit:cover}
.shape-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.shape{display:flex;flex-direction:column;overflow:hidden}
.sh-ph{aspect-ratio:3/2;overflow:hidden;background:#0a0a0a}
.sh-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .2s ease-out}
.shape:hover .sh-ph img,.shape.in-view .sh-ph img{filter:none}
@media (hover:none),(prefers-reduced-motion:reduce){.sh-ph img{filter:none}}
.shape .sh-k{margin:22px 24px 8px}
.shape h3,.shape p{margin-inline:24px}
.shape p{font-size:15px;margin-bottom:26px}
.sc-note{margin-top:28px!important;font-size:14px}
@media (max-width:900px){.shape-row{grid-template-columns:minmax(0,1fr)}.machine-band{aspect-ratio:4/3}}

/* ---------- Founder ---------- */
.fr-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:72px;align-items:start}
.fr-role{font:500 14px/1.4 var(--sans);color:var(--mute-d);margin:-28px 0 28px}
.fr-p{font-size:17px;line-height:1.6;color:#c7c7cc}
.fr-p+.fr-p{margin-top:18px}
.fr-p.lead{font-size:19px;color:var(--ink-d)}
.fr-logo{display:inline-block;margin-bottom:40px}
.fr-logo img,.fr-logo svg{height:28px;width:auto;opacity:.85}
.fr-dates{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:18px 22px}
.fr-dates dt{font:500 14px/1.5 var(--sans);color:var(--ink-d);font-variant-numeric:tabular-nums}
.fr-dates dd{font-size:15px;line-height:1.5;color:var(--mute-d)}
@media (max-width:1000px){.fr-grid{grid-template-columns:minmax(0,1fr);gap:48px}}

/* ---------- Awards ---------- */
#rec-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (min-width:900px){#rec-list{grid-auto-rows:1fr}}
.rc-item{padding:24px;display:flex;flex-direction:column}
.rc-src{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:30px;margin-bottom:16px}
.rc-logo{flex:none;height:22px;width:auto;filter:grayscale(1);opacity:.55}
.rc-l-round{height:30px}.rc-l-wide{height:18px}.rc-l-mark{height:14px}
.rc-logo[src$="sgh.png"]{height:26px}
.rc-item p{font-size:15px}
.rc-item strong{color:var(--ink-l);font-weight:600}
@media (max-width:900px){#rec-list{grid-template-columns:minmax(0,1fr)}}

/* ---------- Reviews ---------- */
#rv-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (min-width:900px){#rv-list{grid-auto-rows:1fr}}
.rv-item{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:28px 26px}
.rv-item blockquote p{font:400 18px/1.45 var(--serif);color:var(--ink-l)!important;letter-spacing:-.005em}
.rv-item figcaption{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.4}
.rv-item figcaption strong{font-weight:600;color:var(--ink-l)}
.rv-item figcaption span{color:var(--mute-l)}
@media (max-width:900px){#rv-list{grid-template-columns:minmax(0,1fr)}}

/* ---------- Process ---------- */
.proc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.proc li{padding:26px 22px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d)}
.proc li h3{font-size:17px}
.proc li p{font-size:14px;line-height:1.55}
@media (hover:hover){.proc li{transition:transform .25s var(--ease),box-shadow .25s,background .25s}.proc li:hover{transform:translateY(-4px) scale(1.02);background:var(--s2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 18px 40px -20px rgba(0,0,0,.8)}}
@media (max-width:1100px){.proc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.proc{grid-template-columns:minmax(0,1fr)}}

/* ---------- Mesh canvas (dark sections) ---------- */
.mesh-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:10px;max-width:820px!important;margin-inline-start:0!important}
.pad>.faq-list{margin-inline:auto!important}
.faq-list details{overflow:hidden}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;padding:14px 22px;font:500 16px/1.4 var(--sans);color:var(--ink-l)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:10px;height:10px;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;opacity:.6;transition:transform .2s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 22px 22px;font-size:15px;line-height:1.6}
.sec-dark .faq-list details{background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d)}
.sec-dark .faq-list summary{color:var(--ink-d)}

/* ---------- Contact ---------- */
#channel,#ld-contact{padding:0}
#channel .inner,#ld-contact .inner{text-align:center}
.ch-h2{margin-bottom:18px}
.ch-p{font-size:18px;max-width:560px!important;margin:0 auto 36px!important;color:var(--mute-d)}
.ch-btn{min-width:220px}
.ch-alt{margin-top:22px!important;font-size:14px;color:var(--mute-d)}
.ch-alt a{display:inline-block;padding:12px 0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3)}

/* ---------- Landing & legal ---------- */
#ld-hero{padding-top:calc(var(--sec) + 40px)}
.crumb{color:var(--faint-d);margin-bottom:22px!important}
#ld-hero h1{font-size:clamp(44px,6.4vw,84px);max-width:16ch!important;margin-inline-start:0!important;margin-bottom:24px}
#ld-hero>*{margin-inline-start:auto}
.lead-d{margin-bottom:36px!important}
.ld-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:64px!important}
#ld-hero .sy-block{margin-top:14px!important}
#ld-hero .sy-block h2{font:600 19px/1.3 var(--sans);letter-spacing:0;margin-bottom:10px}
.ld-photo{margin-top:40px!important;border-radius:var(--r-card);overflow:hidden}
.ld-photo img{width:100%;height:auto}
#ld-proof .rc-item{margin-top:14px}
.legal{font-size:16px;line-height:1.7}
.legal>*{max-width:760px!important}
.legal h2{font:600 22px/1.3 var(--sans);letter-spacing:0;margin:48px auto 14px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:#3a3a3d}
.legal ul{list-style:disc;padding-inline-start:22px}
.legal li+li{margin-top:6px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal-date,.legal-note{font-size:14px;color:var(--mute-l)!important;margin-top:40px!important}

/* ---------- Footer ---------- */
.foot{background:#000;color:var(--mute-d);padding:88px var(--gut) 40px;font-size:14px}
.foot>*{max-width:var(--wrap);margin-inline:auto}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr .9fr;gap:40px}
.foot-h{font:500 13px/1.3 var(--sans)!important;letter-spacing:0;color:var(--ink-d);margin-bottom:16px!important}
.foot-p{line-height:1.6}
.foot-strong{color:var(--ink-d)}
.foot-gap{margin-top:16px}
.foot-p a,.foot-nav a,.foot-legal a{display:inline-flex;align-items:center;min-height:44px;transition:color .18s}
.foot-p a:hover,.foot-nav a:hover,.foot-legal a:hover{color:var(--ink-d)}
.foot-nav{display:flex;flex-direction:column}
.foot-sub{display:flex;margin-top:16px;border-radius:var(--r-btn);background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d);overflow:hidden}
.foot-sub input{flex:1;min-width:0;min-height:44px;padding:0 14px;background:none;border:0;color:var(--ink-d);font:inherit}
.foot-sub input:focus{outline:none}
.foot-sub:focus-within{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.foot-sub button{padding:0 16px;min-height:44px;color:var(--ink-d);font-weight:500}
.foot-sub-msg{min-height:20px;margin-top:8px;font-size:13px}
.foot-social{display:flex;gap:10px;margin-bottom:16px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-btn);background:var(--s1)}
.foot-social svg{width:18px;height:18px}
.theme-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.theme-toggle svg{width:16px;height:16px;opacity:.7}
.tt-track{position:relative;width:40px;height:22px;border-radius:11px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--ring-d)}
.tt-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--ink-d);transition:transform .2s var(--ease)}
.theme-toggle[aria-pressed="true"] .tt-knob{transform:translateX(18px)}
details.foot-lang{margin-top:56px;font-size:13px}
details.foot-lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r-btn);background:var(--s1);color:var(--ink-d)}
details.foot-lang summary::-webkit-details-marker{display:none}
details.foot-lang summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
details.foot-lang[open] summary::after{transform:rotate(-135deg)}
.fl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:2px 18px;margin-top:14px}
.fl-list a{display:flex;align-items:center;min-height:44px;opacity:.75}
.fl-list a:hover,.fl-list a[aria-current]{opacity:1;color:var(--ink-d)}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:40px;font-size:13px}
.foot-legal{display:flex;flex-wrap:wrap;gap:4px 22px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;visibility:hidden;pointer-events:none}
.modal.open{visibility:visible;pointer-events:auto}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s var(--ease)}
.modal.open .scrim{opacity:1}
.sheet{position:relative;width:min(520px,calc(100% - 32px));max-height:calc(100svh - 48px);overflow:auto;background:#fff;color:var(--ink-l);border-radius:14px;padding:22px 26px 28px;transform:translateY(16px);opacity:0;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.modal.open .sheet{transform:none;opacity:1}
.grip{display:none}
.m-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.m-hd .t{font:500 13px/1 var(--sans);color:var(--mute-l)}
#m-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;margin-inline-end:-12px}
.m-form h2{font-size:34px;margin-bottom:22px}
.mfield{position:relative;margin-bottom:12px}
.mfield label{position:absolute;left:14px;top:16px;font-size:15px;color:var(--mute-l);pointer-events:none;transition:all .15s var(--ease)}
[dir="rtl"] .mfield label{left:auto;right:14px}
.mfield input,.mfield textarea{width:100%;min-height:54px;padding:22px 14px 8px;border:0;border-radius:10px;background:var(--l1);box-shadow:inset 0 0 0 1px var(--ring-l);font:inherit;color:var(--ink-l);resize:vertical}
.mfield textarea{min-height:120px}
.mfield input:focus,.mfield textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink-l)}
.mfield.fl label,.mfield.foc label{top:8px;font-size:12px}
.mfield.err input,.mfield.err textarea{box-shadow:inset 0 0 0 1.5px #c0392b}
.m-submit{width:100%;margin-top:8px;background:var(--ink-l);color:#fff}
.m-sent{display:none;padding:12px 0}
.modal.sent .m-form,.m-sent.on{display:none}
.m-sent .big{font:500 28px/1.2 var(--serif);margin-bottom:10px}
@media (max-width:600px){.modal{align-items:flex-end}.sheet{width:100%;border-radius:18px 18px 0 0;max-height:92svh}.grip{display:flex;justify-content:center;padding-bottom:10px}.grip i{width:36px;height:4px;border-radius:2px;background:#d2d2d7}}

/* ---------- Dark theme (light sections become dark) ---------- */
:root[data-theme="dark"] .sec-light{background:#0a0a0a;color:var(--ink-d)}
:root[data-theme="dark"] .sec-lightalt{background:#111;color:var(--ink-d)}
:root[data-theme="dark"] :is(.sec-light,.sec-lightalt) :is(p,li,.intro-p,.pr-cat,.sh-k,.rc-src,.logobar-cap,.logobar-note,.rv-item figcaption span){color:var(--mute-d)!important}
:root[data-theme="dark"] :is(.sec-light,.sec-lightalt) :is(h2,h3,.faq-list summary,.rc-item strong,.rv-item figcaption strong,.aud-list strong){color:var(--ink-d)!important}
:root[data-theme="dark"] :is(.sec-light,.sec-lightalt) :is(.pr-item,.shape,.rc-item,.rv-item,.faq-list details){background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d)}
:root[data-theme="dark"] :is(.sec-light,.sec-lightalt) :is(.pr-item,.shape,.rc-item):hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
:root[data-theme="dark"] .rv-item blockquote p{color:var(--ink-d)!important}
:root[data-theme="dark"] .pr-cta{color:var(--ink-d);text-decoration-color:rgba(255,255,255,.3)}
:root[data-theme="dark"] .logobar-row img,:root[data-theme="dark"] .rc-logo{filter:grayscale(1) invert(1);opacity:.6}
:root[data-theme="dark"] .rc-l-mark{filter:none}
:root[data-theme="dark"] .site-hdr.on-light{background:rgba(0,0,0,.72);color:var(--ink-d)}
:root[data-theme="dark"] .legal :is(p,li){color:#c7c7cc}
/* hero/landing content sits on the same left edge as every section */
#hero,#ld-hero{padding-inline:max(var(--gut),calc((100% - var(--wrap))/2))}
#hero>*:not(.hero-ph),#ld-hero>*{margin-inline:0!important;max-width:none}
#hero .hero-deck{max-width:640px!important}#hero .spec-strip{max-width:760px!important}
#ld-hero .lead-d{max-width:680px!important}#ld-hero .sy-block{max-width:var(--wrap)}
/* ---------- Hero v2: real photograph, text left / machine right ---------- */
#hero{justify-content:center}
.hero-ph{position:absolute;inset:0 0 0 auto;width:50%;margin:0;z-index:0;overflow:hidden;background:#000}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 22%,rgba(0,0,0,0) 55%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 30%)}
[dir="rtl"] .hero-ph{inset:0 auto 0 0}
[dir="rtl"] .hero-ph::after{transform:scaleX(-1)}
#hero>*:not(.hero-ph){position:relative;z-index:2}
#hero .hero-h,#hero .hero-deck,#hero .hero-cta,#hero .spec-strip{max-width:min(640px,52%)!important}
#hero .spec-strip{max-width:min(620px,52%)!important}
@media (max-width:900px){
 #hero{min-height:auto;padding-top:60px;justify-content:flex-start}
 .hero-ph{position:relative;inset:auto;width:calc(100% + 2*var(--gut));margin:0 calc(-1*var(--gut)) 36px!important;aspect-ratio:4/3;max-width:none!important}
 .hero-ph::after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 45%)}
 #hero .hero-h,#hero .hero-deck,#hero .hero-cta,#hero .spec-strip{max-width:none!important}
}

/* ---------- critic R1 (rebuild) ---------- */
@media (min-width:901px){#hero>.hero-ph{position:absolute;inset:0 0 0 auto;width:50%;max-width:none;margin:0!important}[dir="rtl"] #hero>.hero-ph{inset:0 auto 0 0}}
@media (max-width:900px){#hero>.hero-ph{margin:0 calc(-1*var(--gut)) 36px!important;width:calc(100% + 2*var(--gut))}}
.hero-h h1{font-size:clamp(52px,6.6vw,96px)}
.hero-h h1 .chrome{white-space:nowrap}
.pr-item h3{text-wrap:balance}
#ld-hero{min-height:auto;padding-bottom:96px}
#ld-hero .sy-block :is(p,li){max-width:68ch}
.ld-photo{max-width:var(--wrap)!important}
.ld-photo img{width:100%;filter:grayscale(1) contrast(1.05)}
:lang(ja) p,:lang(zh-Hans) p,:lang(ko) p{font-size:16px}
.legal>*{margin-inline:0!important;max-width:680px!important}
#legal{padding-inline:max(var(--gut),calc((100% - var(--wrap))/2))}
.legal p,.legal li{font-size:17px;line-height:1.6}
.m-hd .t{visibility:hidden}

/* ---------- critic R2 (rebuild) ---------- */
:lang(ja) main p,:lang(zh-Hans) main p,:lang(ko) main p,:lang(ja) main li,:lang(zh-Hans) main li,:lang(ko) main li{line-height:1.8!important}
#ld-hero{padding-bottom:96px}
#ld-body{padding-top:0}
#ld-body .sy-block+.sy-block{margin-top:14px}
#ld-body .sy-block h2{font:600 19px/1.3 var(--sans);letter-spacing:0;margin-bottom:10px}
#ld-body .sy-block>p,#ld-body .sy-block :is(p,li){max-width:68ch}
#ld-body .ld-photo{margin-top:40px}
.m-hd .t{display:none}
.m-hd{justify-content:flex-end}
.lang-sw a{min-width:44px;justify-content:center}
.foot a:has(img),.foot-p a{min-height:44px;display:inline-flex;align-items:center}
details.foot-lang summary{min-height:44px}
/* critic R3 */
.foot a:has(>img){display:inline-flex;align-items:center;min-height:44px}
#ld-proof p{max-width:68ch}
.menu-ov.open{transition:opacity .25s var(--ease),visibility 0s}
/* reviews in the UI sans; intro/FAQ columns start on the content edge */
.rv-item blockquote p{font:400 17px/1.55 var(--sans)!important;letter-spacing:0}
.pad>:is(.intro-p,.faq-list){margin-inline-start:max(0px,calc((100% - var(--wrap))/2))!important;margin-inline-end:auto!important}
/* WS mark is white artwork: dark on light cards */
.sec-light .rc-l-mark,.sec-lightalt .rc-l-mark{filter:invert(1) grayscale(1);opacity:.5}
:root[data-theme="dark"] .rc-l-mark{filter:none;opacity:.6}
/* hero photo: softer, longer fade into black + the old fine dot/line grid over the photo */
.hero-ph::after{background:
 radial-gradient(rgba(245,245,247,.13) 1px,transparent 1.2px) 0 0/6px 6px,
 linear-gradient(rgba(245,245,247,.03) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,rgba(245,245,247,.03) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 14%,rgba(0,0,0,.28) 32%,rgba(0,0,0,.08) 52%,rgba(0,0,0,0) 70%),
 linear-gradient(0deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 25%)}
@media (max-width:900px){.hero-ph::after{background:radial-gradient(rgba(245,245,247,.12) 1px,transparent 1.2px) 0 0/6px 6px,linear-gradient(0deg,#000 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,0) 60%)}}
/* founder: WS.COMPUTER logo larger, aligned to the timeline's second column (as before) */
@media (min-width:1001px){
 .fr-side{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:22px}
 .fr-logo{grid-column:2;justify-self:start;margin-bottom:44px}
 .fr-dates{grid-column:1/-1;grid-template-columns:subgrid}
}
.fr-logo img{height:auto;width:240px;max-width:100%;opacity:.9}
/* awards logos: optically equal size and weight */
.rc-logo{height:auto!important;width:auto;max-width:none;opacity:.5!important}
.rc-logo[src$="nbp.svg"]{height:30px!important;width:30px}
.rc-logo[src$="sgh.png"]{height:22px!important}
.rc-logo[src$="elsevier.svg"]{width:92px}
.rc-logo[src$="ws-mark.svg"]{width:70px}
.rc-logo[src$="nvidia.svg"]{width:86px}
.rc-logo[src$="octanerender.png"]{width:104px}
/* grid across the whole hero (as with the old video), photo keeps only its fade */
#hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
 radial-gradient(rgba(245,245,247,.13) 1px,transparent 1.2px) 0 0/6px 6px,
 linear-gradient(rgba(245,245,247,.03) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,rgba(245,245,247,.03) 1px,transparent 1px) 0 0/48px 48px}
.hero-ph::after{background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 14%,rgba(0,0,0,.28) 32%,rgba(0,0,0,.08) 52%,rgba(0,0,0,0) 70%),linear-gradient(0deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 25%)}
@media (max-width:900px){.hero-ph::after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,0) 60%)}}
/* awards logos: one height for all */
.rc-logo,.rc-logo[src]{height:22px!important;width:auto!important;max-width:120px}
/* hero photo without the left darkening (bottom fade only on phones) */
.hero-ph::after{background:none}
@media (max-width:900px){.hero-ph::after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 40%)}}
/* awards logos v2: optical sizing (equal visual weight from measured aspect & ink density) and one flat grey */
.rc-logo,.rc-logo[src]{width:auto!important;max-width:none!important;filter:brightness(0)!important;opacity:.42!important}
.rc-logo[src$="nvidia.svg"]{height:18px!important}
.rc-logo[src$="elsevier.svg"]{height:18px!important}
.rc-logo[src$="ws-mark.svg"]{height:19px!important;filter:brightness(0)!important}
.rc-logo[src$="sgh-trim.png"]{height:24px!important}
.rc-logo[src$="octanerender.png"]{height:24px!important}
.rc-logo[src$="nbp.svg"]{height:30px!important;filter:grayscale(1) contrast(1.2)!important;opacity:.5!important}
:root[data-theme="dark"] .rc-logo,:root[data-theme="dark"] .rc-logo[src]{filter:brightness(0) invert(1)!important;opacity:.55!important}
:root[data-theme="dark"] .rc-logo[src$="nbp.svg"]{filter:grayscale(1) invert(1)!important}
/* hero photo: ultra-subtle darkening — diagonal on the left (parallel to the chassis edges, lower-left → upper-right) and a soft right edge */
@media (min-width:901px){
.hero-ph::after{background:
 linear-gradient(150deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.3) 16%,rgba(0,0,0,.08) 32%,rgba(0,0,0,0) 44%),
 linear-gradient(270deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.12) 9%,rgba(0,0,0,0) 20%)}
[dir="rtl"] .hero-ph::after{transform:scaleX(-1)}}
/* hero grid: lines only (no dots), as over the old video */
#hero::before{background:
 linear-gradient(rgba(245,245,247,.05) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,rgba(245,245,247,.05) 1px,transparent 1px) 0 0/48px 48px}
/* awards logos v3 (critic R1: equal visual mass ≤3%) */
.rc-logo[src$="nbp.svg"]{height:30px!important;opacity:.58!important}
.rc-logo[src$="sgh-trim.png"]{height:23px!important}
.rc-logo[src$="elsevier.svg"]{height:18.5px!important}
.rc-logo[src$="ws-mark.svg"]{height:16px!important}
.rc-logo[src$="nvidia.svg"]{height:17.5px!important}
.rc-logo[src$="octanerender.png"]{height:30px!important;opacity:.48!important}
:root[data-theme="dark"] .rc-logo[src$="nbp.svg"]{opacity:.8!important}
:root[data-theme="dark"] .rc-logo[src$="octanerender.png"]{opacity:.63!important}
/* hero v3: single machine on pure black — the photo's black meets the page's black, no fades needed */
.hero-obj{background:#000}
.hero-obj::after{display:none}
@media (min-width:901px){#hero>.hero-obj{width:62%}.hero-obj img{object-fit:contain;object-position:100% 55%}}
@media (max-width:900px){.hero-obj{aspect-ratio:1.3/1}.hero-obj img{object-fit:cover}}
/* configurations band: the black RTX 5090 build at its full proportions */
.machine-band{aspect-ratio:auto}
.machine-band img{height:auto}
/* contact: text left, the closed black machine right (photo black = page black) */
#channel .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:center;text-align:start}
#channel .inner>*{max-width:none;margin-inline:0!important;grid-column:1}
#channel .ch-ph{grid-column:2;grid-row:1/span 4;margin:0;align-self:center}
#channel .ch-ph img{width:100%;height:auto}
#channel .ch-p{max-width:520px!important}
@media (max-width:900px){#channel .inner{grid-template-columns:minmax(0,1fr);text-align:center}#channel .ch-ph{grid-column:1;grid-row:auto;max-width:420px;margin:32px auto 0!important}#channel .ch-p{margin-inline:auto!important}}
/* show the tops of photos: systems fans photo and the 4–8 GPU card are not cut at the top */
.sys-hero img{object-position:50% 0%}
.shape:nth-child(3) .sh-ph img{object-position:50% 12%}
/* hero: machine a touch to the right, photo edges melt into black (no visible box) */
@media (min-width:901px){.hero-obj img{transform:translateX(6%);-webkit-mask-image:radial-gradient(62% 60% at 58% 55%,#000 62%,transparent 100%);mask-image:radial-gradient(62% 60% at 58% 55%,#000 62%,transparent 100%)}}
/* single colour accent: "digital systems." in the petrol of the case */
.hero-h h1 .chrome{background:linear-gradient(180deg,#cfe0e7 0%,#7fa9ba 48%,#3f7890 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* client logos: one flat grey, optically equal (measured aspect × ink density) */
.logobar-row img{filter:brightness(0)!important;opacity:.45!important;width:auto!important;max-width:100%}
.logobar-row img[src$="nvidia.svg"]{height:18px!important}
.logobar-row img[src$="marvel-box.svg"]{height:26px!important}
.logobar-row img[src$="pixar.svg"]{height:24px!important}
.logobar-row img[src$="disneyplus.svg"]{height:42px!important}
.logobar-row img[src$="warnerbros.svg"]{height:38px!important}
.logobar-row img[src$="sonypictures.svg"]{height:34px!important}
.logobar-row img[src$="unreal.svg"]{height:44px!important}
.logobar-row img[src$="moma.svg"]{height:19px!important}
:root[data-theme="dark"] .logobar-row img{filter:brightness(0) invert(1)!important;opacity:.55!important}
/* back to the steel gradient on "digital systems."; the petrol of the case moves to the primary call to action */
.hero-h h1 .chrome{background:linear-gradient(180deg,#e9eaec 0%,#bcbfc4 56%,#8f9298 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-p,.ch-btn{background:#1f4f63;color:#f5f5f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.btn-p:hover,.ch-btn:hover{background:#276178}
/* all photographs in original colour (no greyscale anywhere) */
.sh-ph img,.shape:hover .sh-ph img,.ld-photo img,.machine-band img,.sys-hero img,.aud-visual img,.hero-ph img,.ch-ph img{filter:none!important}
/* contact: machine as a faint presence melting into the section; normal-width white button */
#channel .inner{position:relative}
#channel .ch-ph{position:absolute;inset:0 0 0 45%;margin:0;z-index:0;pointer-events:none;opacity:.38;-webkit-mask-image:radial-gradient(55% 60% at 60% 50%,#000 30%,transparent 78%);mask-image:radial-gradient(55% 60% at 60% 50%,#000 30%,transparent 78%)}
#channel .ch-ph img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
#channel .inner>:not(.ch-ph){position:relative;z-index:1}
#channel .ch-btn{justify-self:start;width:auto;min-width:0;background:var(--ink-d);color:#000;box-shadow:none}
#channel .ch-btn:hover{background:#fff}
[dir="rtl"] #channel .ch-ph{inset:0 45% 0 0}
@media (max-width:900px){#channel .ch-ph{inset:0;opacity:.22}#channel .ch-btn{justify-self:center}}
.sys-hero img{object-position:50% 30%}
/* full-bleed photo band (5× RTX 6000 with SanAce fans) before the process section */
.wide-band{margin:0;height:min(78vh,820px);overflow:hidden;background:#000}
.wide-band img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media (max-width:900px){.wide-band{height:auto;aspect-ratio:4/3}}
/* systems hero: photo shifted up, heading lower */
.sys-hero img{object-position:50% 62%}
.sys-hero-txt{padding-bottom:28px}
/* wide band: show more of the graphics cards on the right */
.wide-band img{object-position:100% 45%}
/* contact: content back on the page grid; machine visible but soft */
#channel .inner{padding-inline:max(var(--gut),calc((100% - var(--wrap))/2))}
#channel .ch-ph{inset:0 0 0 48%;opacity:.6;-webkit-mask-image:radial-gradient(60% 70% at 55% 50%,#000 45%,transparent 85%);mask-image:radial-gradient(60% 70% at 55% 50%,#000 45%,transparent 85%)}
#channel .ch-ph img{object-fit:contain;object-position:50% 50%}
.theme-toggle{display:none!important}
/* process: full-bleed photo with the heading in its empty top-left corner, cards below */
#process{padding-top:0}
.proc-ph{position:relative;margin:0 calc(50% - 50vw) 64px!important;max-width:none!important;background:#000}
.proc-ph img{width:100%;height:auto;max-height:92vh;object-fit:cover;object-position:50% 0}
.proc-ph h2{position:absolute;top:clamp(48px,8vw,120px);left:max(var(--gut),calc((100vw - var(--wrap))/2));max-width:min(8.5ch,40vw);margin:0}
[dir="rtl"] .proc-ph h2{left:auto;right:max(var(--gut),calc((100vw - var(--wrap))/2))}
[dir="rtl"] .proc-ph img{transform:scaleX(-1)}
@media (max-width:700px){.proc-ph h2{position:static;max-width:none;padding:48px var(--gut) 24px}.proc-ph{display:flex;flex-direction:column-reverse;margin-bottom:40px!important}}
/* manufacturing strip under the three system cards */
.mfg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:56px}
.mfg-ph{margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:3/2}
.mfg-ph img{width:100%;height:100%;object-fit:cover}
.mfg-tx h3{font:500 clamp(28px,3vw,40px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink-d);margin-bottom:16px}
.mfg-tx p{font-size:17px;line-height:1.6;max-width:48ch}
:lang(he) .mfg-tx h3,:lang(hi) .mfg-tx h3,:lang(ja) .mfg-tx h3,:lang(zh-Hans) .mfg-tx h3,:lang(ko) .mfg-tx h3{font-family:var(--sans);font-weight:600;letter-spacing:0}
@media (max-width:900px){.mfg{grid-template-columns:minmax(0,1fr);gap:24px}}
/* hero: no grid; smaller heading and machine further right so the heading never overlaps it (14" MacBook) */
#hero::before{content:none}
.hero-h h1{font-size:clamp(48px,5.6vw,88px)}
@media (min-width:901px){.hero-obj img{transform:translateX(12%)}}
@media (min-width:901px) and (max-width:1600px){#hero>.hero-obj{width:56%}}
.hero-h h1{font-size:clamp(46px,5vw,84px)}
@media (min-width:901px){.hero-obj img{transform:translateX(7%)}}
/* landing body: text tiles left, photo right bleeding to the screen edge */
@media (min-width:1001px){
 #ld-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start;padding-inline-start:max(var(--gut),calc((100% - var(--wrap))/2));padding-inline-end:0}
 #ld-body>*{max-width:none!important;margin-inline:0!important;grid-column:1}
 #ld-body>.sy-block+.sy-block{margin-top:14px!important}
 #ld-body>.ld-photo{grid-column:2;grid-row:1/span 6;margin:0!important;border-radius:var(--r-card) 0 0 var(--r-card);align-self:stretch;min-height:520px;max-width:none!important}
 #ld-body>.ld-photo img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
 [dir="rtl"] #ld-body>.ld-photo{border-radius:0 var(--r-card) var(--r-card) 0}
}
/* two-column landing body only when there is a photo */
@media (min-width:1001px){
 #ld-body:not(:has(>.ld-photo)){display:block;padding-inline:max(var(--gut),calc((100% - var(--wrap))/2))}
 #ld-body:not(:has(>.ld-photo))>*{max-width:var(--wrap)!important}
}
/* audience: tighter list, the vertical photo spans the full height of the text column */
@media (min-width:901px){
 .aud-cols{align-items:stretch}
 .aud-left h2{margin-bottom:28px}
 .aud-list li{padding:9px 0}
 .aud-list li+li{margin-top:0}
 .aud-list p{margin-top:2px}
 .aud-visual{height:100%;max-height:92vh;margin:0}
 .aud-visual img{height:100%;width:100%;object-fit:cover}
}
/* free-standing product photo (no frame), edges melt into the black section */
.ld-photo.ld-free{background:transparent;border-radius:0!important;overflow:visible}
.ld-photo.ld-free img{object-fit:contain!important;object-position:50% 50%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);mask-composite:intersect}
@media (min-width:1001px){#ld-body>.ld-photo.ld-free{margin-inline-end:max(24px,4vw)!important;min-height:640px}}
/* scientific: no fades on the photo — its own black backdrop meets the page black; glass tiles like the menu bar */
.ld-photo.ld-free img{-webkit-mask-image:none!important;mask-image:none!important}
#ld-body .sy-block{background:rgba(255,255,255,.035)!important;-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important}
/* section backdrop follows the photo's studio floor (black top → ~#0e0e0e bottom) */
#ld-body:has(.ld-free){background:linear-gradient(180deg,#000 0%,#000 35%,#0d0d0d 100%)}
/* landing body with a full-bleed photo backdrop and dark-glass tiles on top */
#ld-body:has(>.ld-bg){position:relative;display:block!important;padding:var(--sec) max(var(--gut),calc((100% - var(--wrap))/2))!important;min-height:min(66vw,100vh);overflow:hidden}
#ld-body>.ld-bg{position:absolute!important;inset:0;margin:0!important;border-radius:0!important;max-width:none!important;min-height:0!important;z-index:0}
#ld-body>.ld-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
#ld-body:has(>.ld-bg)>.sy-block{position:relative;z-index:1;max-width:560px!important;margin-inline:0!important;background:rgba(0,0,0,.62)!important;-webkit-backdrop-filter:saturate(140%) blur(22px);backdrop-filter:saturate(140%) blur(22px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important}
#ld-body:has(>.ld-bg)>.sy-block :is(p,li){color:#d2d2d7}
@media (max-width:900px){#ld-body:has(>.ld-bg){min-height:0}#ld-body>.ld-bg{position:relative!important;inset:auto;margin:32px calc(-1*var(--gut)) 0!important}#ld-body:has(>.ld-bg)>.sy-block{max-width:none!important}}
#ld-body>.ld-bg img[src*="orange4"]{object-position:75% 40%}
#ld-body>.ld-bg img[src*="navy3"]{object-position:100% 45%;transform:scale(1.06);transform-origin:100% 50%}
/* technical advisory: photo runs from just under the heading to the bottom; two glass tiles side by side at its foot */
#ld-hero:has(+.ld-hero-bg){padding-bottom:40px}
.ld-hero-bg:has(>.ld-bg){display:grid!important;grid-template-columns:1fr 1fr;gap:14px;align-content:end;padding-top:0!important;min-height:min(62vw,1000px)!important}
.ld-hero-bg>.ld-bg img{object-fit:cover;object-position:60% 30%}
.ld-hero-bg>.sy-block{max-width:none!important;margin:0!important;align-self:end}
.ld-hero-bg>.sy-block+.sy-block{margin-top:0!important}
@media (max-width:900px){.ld-hero-bg:has(>.ld-bg){grid-template-columns:1fr;min-height:0!important}}
/* advisory: photo slides up under the hero text */
#ld-hero:has(+.ld-hero-bg){position:relative;z-index:2;padding-bottom:0;background:transparent}
.ld-hero-bg:has(>.ld-bg){margin-top:clamp(-260px,-16vw,-120px)!important;z-index:1}
.ld-hero-bg>.ld-bg img{object-position:62% 0%}
/* advisory: the photo is the backdrop of the hero itself */
.ld-hero-bg:has(>.ld-bg){margin-top:clamp(-620px,-36vw,-260px)!important;min-height:min(88vw,1400px)!important}
.ld-hero-bg>.ld-bg img{object-position:62% 12%}
/* advisory: photo as in v51; tiles side by side at the bottom of the photo */
@media (min-width:901px){
#ld-body.ld-hero-bg:has(>.ld-bg){display:grid!important;grid-template-columns:1fr 1fr;gap:14px;align-content:end}
#ld-body.ld-hero-bg>.sy-block{grid-column:auto!important;max-width:none!important;margin:0!important;align-self:end}
}
#ld-body.ld-hero-bg>.ld-bg{grid-column:1/-1!important;grid-row:1/-1!important;inset:0!important}
#ld-body.ld-hero-bg>.ld-bg{grid-column:auto!important;grid-row:auto!important;position:absolute!important;inset:0!important;width:auto!important}
@media (min-width:901px){#ld-body.ld-hero-bg:has(>.ld-bg){padding-bottom:48px!important}}
@media (min-width:901px){#ld-body.ld-hero-bg:has(>.ld-bg){margin-top:clamp(-460px,-26vw,-200px)!important}}
@media (min-width:901px){#ld-body.ld-hero-bg>.ld-bg img{transform:translateY(clamp(180px,22vw,420px))}}
@media (min-width:901px){#ld-body.ld-hero-bg>.ld-bg img{transform:translateY(clamp(380px,36vw,680px));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)}}
@media (min-width:901px){#ld-body.ld-hero-bg>.ld-bg img{transform:translateY(clamp(460px,44vw,820px))!important;-webkit-mask-image:none!important;mask-image:none!important}}
/* advisory: whole photo visible (no bottom crop): offset from the top, natural height, tiles on its bottom */
@media (min-width:901px){
#ld-body.ld-hero-bg>.ld-bg{inset:clamp(460px,44vw,820px) 0 auto 0!important;height:auto!important}
#ld-body.ld-hero-bg>.ld-bg img{transform:none!important;height:auto!important;width:100%!important;object-fit:initial!important}
#ld-body.ld-hero-bg:has(>.ld-bg){min-height:calc(clamp(460px,44vw,820px) + 66.3vw)!important}
}
/* advisory, final: photo in normal flow (section always contains all of it), tiles on its lower edge */
@media (min-width:901px){
#ld-body.ld-hero-bg:has(>.ld-bg){min-height:0!important;padding-bottom:0!important;overflow:visible}
#ld-body.ld-hero-bg>.ld-bg{position:relative!important;inset:auto!important;grid-column:1/-1!important;grid-row:1!important;width:100vw!important;max-width:none!important;margin:clamp(460px,44vw,820px) calc(50% - 50vw) 0!important;height:auto!important;z-index:0}
#ld-body.ld-hero-bg>.ld-bg img{position:static;display:block;width:100%!important;height:auto!important;transform:none!important}
#ld-body.ld-hero-bg>.sy-block{grid-row:1!important;align-self:end!important;margin-bottom:48px!important;z-index:1}
}
@media (min-width:901px){#ld-body.ld-hero-bg>.ld-bg{margin:clamp(160px,15.5vw,320px) calc(-1 * max(var(--gut),calc((100vw - var(--wrap))/2))) 0!important}}
@media (min-width:901px){#ld-body.ld-hero-bg:has(>.ld-bg){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}#ld-body.ld-hero-bg>.ld-bg{width:auto!important;min-width:0}}
/* === advisory, clean: photo full-bleed in flow; the two tiles side by side pinned to its bottom === */
html #ld-body.ld-hero-bg:has(>.ld-bg){display:block!important;position:relative;padding-bottom:0!important;min-height:0!important}
html #ld-body.ld-hero-bg .ld-tiles .sy-block{margin:0!important;max-width:none!important;background:rgba(0,0,0,.62)!important;-webkit-backdrop-filter:saturate(140%) blur(22px);backdrop-filter:saturate(140%) blur(22px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important}
html #ld-body.ld-hero-bg .ld-tiles .sy-block :is(p,li){color:#d2d2d7}
@media (min-width:901px){
 html #ld-body.ld-hero-bg .ld-tiles{position:absolute;z-index:2;bottom:48px;left:max(var(--gut),calc((100% - var(--wrap))/2));right:max(var(--gut),calc((100% - var(--wrap))/2));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:end}
 html #ld-body.ld-hero-bg>.ld-bg{display:block;position:relative!important;width:auto!important;margin:clamp(160px,15.5vw,320px) calc(-1 * max(var(--gut),calc((100vw - var(--wrap))/2))) 0!important}
}
@media (max-width:900px){html #ld-body.ld-hero-bg .ld-tiles{display:grid;gap:14px}html #ld-body.ld-hero-bg{margin-top:0!important}}
@media (min-width:901px){html #ld-body.ld-hero-bg>.ld-bg{margin-top:calc(clamp(160px,15.5vw,320px) - 100px)!important}}
@media (min-width:901px){html #ld-body.ld-hero-bg .ld-tiles{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:stretch}}
@media (min-width:901px){html #ld-body.ld-hero-bg .ld-tiles{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr)}}
/* advisory: tiles hang over the edge — about half on the photo, half on the next (white) section */
@media (min-width:901px){
 html #ld-body.ld-hero-bg:has(>.ld-bg){overflow:visible!important;z-index:3}
 html #ld-body.ld-hero-bg .ld-tiles{bottom:0;transform:translateY(58%)}
 html #ld-body.ld-hero-bg .ld-tiles .sy-block{background:rgba(10,10,10,.86)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.5)!important}
 html #ld-body.ld-hero-bg>.ld-bg{overflow:hidden}
 #ld-body.ld-hero-bg + section{padding-top:calc(var(--sec) + 300px)!important}
}
#ld-hero{position:relative;z-index:5!important}
/* configuration cards: text only */
#showcase .shape{padding:28px 24px 26px!important}
#showcase .shape .sh-k{margin:0 0 10px!important}
#showcase .shape h3,#showcase .shape p{margin-inline:0!important}
#showcase .shape p{margin-bottom:0!important}
/* ===== critic R1 (whole site) ===== */
/* N1 phones: advisory photo back in flow above the tiles */
@media (max-width:900px){
 html #ld-body.ld-hero-bg:has(>.ld-bg){display:flex!important;flex-direction:column;gap:14px}
 html #ld-body.ld-hero-bg>.ld-bg{position:relative!important;inset:auto!important;width:auto!important;order:-1;margin:0 calc(-1*var(--gut)) 0!important}
 html #ld-body.ld-hero-bg .ld-tiles{position:relative;z-index:1}
}
/* N2 RTL hero mirrored */
@media (min-width:901px){[dir="rtl"] #hero .hero-obj img{object-position:0% 55%;transform:translateX(-7%);-webkit-mask-image:radial-gradient(62% 60% at 42% 55%,#000 62%,transparent 100%);mask-image:radial-gradient(62% 60% at 42% 55%,#000 62%,transparent 100%)}}
/* N3 non-Latin hero headings smaller, no fake italics in CJK */
html:is(:lang(ja),:lang(zh-Hans),:lang(ko),:lang(hi),:lang(he)) #hero .hero-h h1{font-size:clamp(40px,4.4vw,68px)}
html:is(:lang(ja),:lang(zh-Hans),:lang(ko)) #hero .hero-h h1 .chrome{font-style:normal}
/* N4 contact photo spans the section */
#channel .inner>.ch-ph{grid-area:auto!important}
/* N5 phones: hero photo edges */
@media (max-width:900px){#hero .hero-obj img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%)}}
/* N6 stat numbers on one line */
#hero .spec-strip .cell{justify-content:flex-end}
/* N8 advisory: soft top edge (position unchanged) */
@media (min-width:901px){html #ld-body.ld-hero-bg>.ld-bg img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 180px)!important;mask-image:linear-gradient(180deg,transparent 0,#000 180px)!important}}
/* N9 */
@media (min-width:901px){#ld-body.ld-hero-bg + section{padding-top:calc(var(--sec) + 230px)!important}}
/* N10 tile contrast over bright photos */
html #ld-body:has(>.ld-bg)>.sy-block{background:rgba(10,10,10,.8)!important}
/* N11 side photo matches the tile column height */
@media (min-width:1001px){html #ld-body>.ld-photo:not(.ld-bg){position:relative;min-height:0!important}html #ld-body>.ld-photo:not(.ld-bg) img{position:absolute;inset:0;width:100%;height:100%}}
/* N12 wide screens */
@media (min-width:1601px){#hero>.hero-obj{width:54%}}
/* N13 soft top edge of full-bleed landing photos */
html #ld-body:not(.ld-hero-bg)>.ld-bg img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 120px);mask-image:linear-gradient(180deg,transparent,#000 120px)}
/* perf: drop invisible blurs */
html #ld-body.ld-hero-bg .ld-tiles .sy-block,#ld-body:not(:has(>.ld-bg)) .sy-block{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (prefers-reduced-transparency:reduce){.site-hdr{background:#0a0a0a!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.site-hdr.on-light{background:#fafafa!important}}
/* ===== critic R2 ===== */
#channel{overflow:clip}
#channel .inner>.ch-ph{align-self:stretch!important;justify-self:stretch!important}
@media (max-width:900px){#channel .inner>.ch-ph{opacity:.22!important;max-width:none!important;margin:0!important}}
@media (min-width:1001px){html #ld-body>.ld-photo.ld-free{min-height:640px!important}html #ld-body>.ld-photo.ld-free img{position:static!important;height:100%!important}}
html:is(:lang(he),:lang(hi)) #hero .hero-h h1 .chrome{font-style:normal}
@media (max-width:900px){html #ld-body.ld-hero-bg>.ld-bg img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 64px);mask-image:linear-gradient(180deg,transparent 0,#000 64px)}html #ld-body.ld-hero-bg{padding-top:24px!important}}
/* grain/mesh canvas spans the full section width */
section>.mesh-bg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important}
/* mobile menu: calmer sans type, one line per item, no overlaps */
.menu-ov{justify-content:flex-start;padding:88px 28px 40px;gap:0;overflow-y:auto}
.menu-ov a{font:500 21px/1.25 var(--sans)!important;letter-spacing:-.01em;display:flex;align-items:center;min-height:48px;padding:6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-ov a+a{box-shadow:none}
.menu-close{color:var(--ink-d);font:300 30px/1 var(--sans)}
.menu-close::before,.menu-close::after{content:"";position:absolute;left:12px;right:12px;top:21px;height:1.5px;background:currentColor}
.menu-close::before{transform:rotate(45deg)}.menu-close::after{transform:rotate(-45deg)}
/* phones: heading → machine (20% larger) → description → buttons → stats */
@media (max-width:900px){
 #hero{display:flex;flex-direction:column}
 #hero>.hero-h{order:1}
 #hero>.hero-obj{order:2;margin:28px calc(-1*var(--gut)) 8px!important;aspect-ratio:1.08/1}
 #hero>.hero-obj img{object-fit:cover;object-position:62% 50%}
 #hero>.hero-deck{order:3;margin-top:8px!important}
 #hero>.hero-cta{order:4}
 #hero>.spec-strip{order:5}
}
@media (max-width:900px){#hero{padding-top:100px!important}}
/* phones: "Who the work is for" — heading, photo, then the list (no two photos back to back) */
@media (max-width:900px){
 .aud-cols{display:flex!important;flex-direction:column;gap:0}
 .aud-left{display:contents}
 .aud-left>h2{order:1;margin-bottom:24px!important}
 .aud-cols>.aud-visual{order:2;margin:0 0 28px!important;height:auto!important;max-height:none!important;aspect-ratio:4/3}
 .aud-cols>.aud-visual img{height:100%!important;object-fit:cover;object-position:50% 45%}
 .aud-left>.aud-list{order:3}
}
@media (max-width:900px){.aud-cols>.aud-visual{align-self:stretch!important;width:auto!important;display:block}.aud-cols>.aud-visual img{width:100%!important;height:100%!important}}
/* founder, phones: WS.COMPUTER mark centred with a soft static light beneath it */
@media (max-width:1000px){
 .fr-side{display:flex!important;flex-direction:column;align-items:stretch}
 .fr-logo{align-self:center!important;position:relative;margin:8px auto 40px!important}
 .fr-logo::before{content:"";position:absolute;left:50%;top:50%;width:320px;height:220px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent);pointer-events:none;z-index:-1}
}
/* phones: "How a project runs" — heading inside the photo's black corner, photo enlarged ~70% */
@media (max-width:900px){
 .proc-ph{display:block!important;position:relative!important;aspect-ratio:1/1.1;overflow:hidden;margin:0 calc(-1*var(--gut)) 40px!important}
 .proc-ph img{position:absolute;top:0;left:-28%;width:172%!important;max-width:none!important;height:auto!important;max-height:none!important}
 .proc-ph h2{position:absolute!important;z-index:1;top:28px;left:var(--gut);right:auto;max-width:6.5ch!important;padding:0!important;margin:0!important;font-size:clamp(34px,10vw,44px)}
}
@media (min-width:901px){.proc-ph{overflow:hidden}.proc-ph img{transform:scale(1.25);transform-origin:88% 75%}}
/* phones: audience photo taller (shows more of the bottom); systems photo anchored right to show all three cards */
@media (max-width:900px){
 .aud-cols>.aud-visual{aspect-ratio:3/4!important}
 .aud-cols>.aud-visual img{object-position:50% 70%!important}
 .sys-hero img{object-position:100% 62%!important}
}
@media (max-width:900px){.proc-ph img{top:50px!important;width:258%!important;left:-64%!important}}
/* phones: taller process photo; the first card (Consultation) overlaps it by half as dark glass */
@media (max-width:900px){
 .proc-ph{aspect-ratio:1/1.3!important;margin-bottom:0!important}
 #process .proc{position:relative;z-index:2;margin-top:-72px}
 #process .proc li{background:rgba(18,18,18,.55)!important;-webkit-backdrop-filter:saturate(140%) blur(18px);backdrop-filter:saturate(140%) blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)!important}
}
@media (max-width:900px){.proc-ph{aspect-ratio:auto!important;height:calc(50px + 118.5vw)!important}.proc-ph img{width:206%!important;left:-100%!important;top:50px!important}}
@media (max-width:900px){.proc-ph img{left:calc(-100% + 100px)!important}}
@media (max-width:900px){.proc-ph img{left:calc(-100% - 100px)!important}}
@media (max-width:900px){.proc-ph img{left:calc(-100% - 150px)!important}}
@media (max-width:900px){.proc-ph img{left:calc(-100% - 50px)!important}}
@media (max-width:900px){.proc-ph img{left:calc(-100% - 5px)!important}}
@media (max-width:900px){.proc-ph img{left:calc(-100% + 195px)!important}}
/* phones: configurations photo 30% larger, anchored to the right edge, full height (no top/bottom crop) */
@media (max-width:900px){.machine-band{overflow:hidden;aspect-ratio:auto!important;height:auto!important}.machine-band img{width:130%!important;max-width:none!important;height:auto!important;margin-left:-30%!important;object-fit:initial!important}}
@media (max-width:900px){.machine-band img{transform:none!important}}
@media (max-width:900px){.sys-hero img{object-position:0% 62%!important}}
@media (max-width:900px){.sys-hero img{object-position:-50px 62%!important}.sys-hero{min-height:758px!important}}
/* phones: systems photo at 130% of the screen width (left side, graphics cards), heading just under it */
@media (max-width:900px){
 .sys-hero{display:block!important;min-height:0!important;overflow:hidden}
 .sys-hero img{position:relative!important;inset:auto!important;display:block;width:130%!important;max-width:none!important;height:auto!important;object-fit:initial!important;transform:none!important;margin:0!important}
 .sys-hero::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,#000 100%)!important}
 .sys-hero-txt{position:relative;z-index:1;margin-top:-36px!important;padding:0 var(--gut) 8px!important}
}
/* phones: systems photo — three GeForce labels + a bit of the cooler; text column never wider than the screen */
@media (max-width:900px){
 .sys-hero img{width:200%!important;margin:-24px 0 0 -94px!important}
 .sys-hero-txt{box-sizing:border-box!important;width:100%!important;max-width:100%!important}
}
/* phones: systems photo 30px right, top cropped past the cooler label, dark corner bottom-right */
@media (max-width:900px){
 .sys-hero img{margin:-84px 0 0 -64px!important}
 .sys-hero::after{background:radial-gradient(55% 45% at 100% 88%,#000 0%,rgba(0,0,0,.85) 40%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,0) 55%,#000 100%)!important}
}
@media (max-width:900px){.sys-hero-txt{margin-top:32px!important}}
/* desktop: systems heading under the photo, on the grain; photo fades into the section */
@media (min-width:901px){
 .sys-hero{display:block;min-height:0}
 .sys-hero img{position:relative;inset:auto;display:block;height:min(78vh,760px);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
 .sys-hero::after{display:none}
 .sys-hero-txt{padding:48px var(--gut) 0}
}
/* desktop process photo moved down: heading back in the black top-left corner */
@media (min-width:901px){.proc-ph img{transform:translateY(40px) scale(1.25);transform-origin:88% 0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%);mask-image:linear-gradient(180deg,transparent,#000 12%)}}
@media (min-width:901px){.sys-hero-txt{padding-top:72px}}
/* desktop process photo: less zoom, full height (more of the bottom), heading still in the black corner */
@media (min-width:901px){.proc-ph img{display:block;max-height:none;margin:70px 0 5.75vw;transform:scale(1.1);transform-origin:88% 0}}
/* desktop systems photo: straight bottom edge, no fade into the grain, no parallax bleeding under it */
@media (min-width:901px){.sys-hero img{-webkit-mask-image:none;mask-image:none;transform:none!important}}
/* desktop systems photo: 20% closer on the cards, anchored left so the frame shifts right */
@media (min-width:901px){.sys-hero img{width:120%;max-width:none}}
/* landing pages (not advisory): clean full-width photo band, then the blocks side by side below it — nothing covers the photo */
@media (min-width:901px){
 #ld-body:has(>.ld-bg):not(.ld-hero-bg){display:flex!important;flex-wrap:wrap;gap:14px;align-items:stretch;min-height:0;overflow:hidden;padding-top:0!important}
 #ld-body:not(.ld-hero-bg)>.ld-bg{position:relative!important;inset:auto;order:-1;flex:0 0 calc(100vw);margin:0 calc(50% - 50vw) 40px!important;aspect-ratio:2.2/1;z-index:0}
 #ld-body:not(.ld-hero-bg)>.ld-bg img{transform:none!important;object-position:70% 45%}
 #ld-body:has(>.ld-bg):not(.ld-hero-bg)>.sy-block{flex:1 1 0;min-width:0;max-width:none!important;margin:0!important;background:rgba(255,255,255,.04)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* hero: data reel (series, DFA, correlation matrix, hardware, client map) in place of the machine photo, over a faint grid */
#hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/56px 56px;-webkit-mask-image:radial-gradient(90% 80% at 72% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(90% 80% at 72% 50%,#000 20%,transparent 80%)}
[dir="rtl"] #hero::before{-webkit-mask-image:radial-gradient(90% 80% at 28% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(90% 80% at 28% 50%,#000 20%,transparent 80%)}
.hero-vid{background:transparent!important}
.hero-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
@media (min-width:901px){.hero-vid video{-webkit-mask-image:radial-gradient(58% 58% at 56% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(58% 58% at 56% 52%,#000 55%,transparent 100%)}
 [dir="rtl"] .hero-vid video{-webkit-mask-image:radial-gradient(58% 58% at 44% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(58% 58% at 44% 52%,#000 55%,transparent 100%)}}
@media (max-width:900px){.hero-vid{position:relative!important}.hero-vid video{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 80%,transparent 100%)}}
/* R1 fixes: quieter grid, pause control, lower reel on phones, DFA chart at its own ratio */
#hero::before{opacity:.75}
.hero-pause{position:absolute;z-index:3;inset-inline-end:20px;bottom:20px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.07);cursor:pointer;display:grid;place-items:center;color:#d2d2d7;transition:background .2s}
.hero-pause[hidden]{display:none}
.hero-pause:hover{background:rgba(255,255,255,.14)}
.hero-pause:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero-pause::before{content:"";width:10px;height:12px;border-inline:3px solid currentColor;box-sizing:border-box}
.hero-pause.is-paused::before{width:0;height:0;border-inline:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor;margin-inline-start:3px}
[dir="rtl"] .hero-pause.is-paused::before{border-width:7px 11px 7px 0;border-color:transparent currentColor transparent transparent}
@media (max-width:900px){.hero-vid{aspect-ratio:3/2!important}.hero-pause{bottom:10px;inset-inline-end:12px}}
/* R2 fixes */
.nw{white-space:nowrap}
@media (max-width:900px){#hero>.hero-h{order:1}#hero>.hero-vid{order:2}#hero>.hero-deck{order:3}#hero>.hero-cta{order:4}#hero>.spec-strip{order:5}.hero-pause{background:rgba(0,0,0,.55)}}
/* chapters: data, manufacturing, software, advisory share one layout */
.chapter>h2{margin-bottom:0}
.chapter .dt-intro{display:grid;grid-template-columns:minmax(0,680px) minmax(0,400px);justify-content:space-between;gap:48px;align-items:start;margin-top:20px}
.chapter .dt-lead{margin:0!important;max-width:none;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:#d2d2d7}
.chapter .dt-chart{margin:0}
.chapter .dt-chart img{display:block;width:100%;height:auto;aspect-ratio:3/2}
.chapter .dt-photo img{object-fit:cover;border-radius:var(--r-card)}
.chapter .dt-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:40px}
.chapter .dt-col h3{margin-bottom:8px}
.chapter .dt-col a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.chapter .dt-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
@media (max-width:900px){.chapter .dt-intro{grid-template-columns:minmax(0,1fr);gap:28px}.chapter .dt-chart{max-width:480px}}
@media (max-width:700px){.chapter .dt-cols{grid-template-columns:1fr}}
/* light chapter (software) */
.chapter.sec-light .dt-lead{color:var(--mute-l)}
.chapter.sec-light .sy-block{background:var(--card);box-shadow:inset 0 0 0 1px var(--ring-l)}
.chapter.sec-light .sy-block h3{color:var(--ink-l)}
.chapter.sec-light .sy-block li{color:var(--mute-l)}
.chapter.sec-light .sy-block li::before{background:#b0b0b5}
@media (hover:hover){.chapter.sec-light .sy-block:hover{background:var(--card);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}}
:root[data-theme="dark"] .chapter.sec-light .sy-block{background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d)}
:root[data-theme="dark"] .chapter.sec-light .dt-chart img{filter:invert(1) hue-rotate(180deg)}
/* practice: five cards — two wide, three narrow */
@media (min-width:901px){#prac-list{grid-template-columns:repeat(6,minmax(0,1fr))}#prac-list>.pr-item:nth-child(-n+2){grid-column:span 3}#prac-list>.pr-item:nth-child(n+3){grid-column:span 2}}
@media (min-width:601px) and (max-width:900px){#prac-list>.pr-item:last-child{grid-column:1/-1}}
/* chapter boundaries visible in dark theme; advisory cards top-aligned */
:root[data-theme="dark"] .chapter.sec-light{background:#161618}
#advisory .dt-cols{align-items:start}
/* C2 fixes */
.menu-ov a.sub{font-size:17px!important;min-height:40px;padding-inline-start:18px;color:var(--mute-d)}
.top-nav a{white-space:nowrap}
@media (max-width:1180px){html:is(:lang(ru),:lang(uk),:lang(el)) .top-nav{display:none}html:is(:lang(ru),:lang(uk),:lang(el)) .nav-toggle{display:block}html:is(:lang(ru),:lang(uk),:lang(el)) .lang-sw{margin-inline-start:auto}}
@media (max-width:420px){.hero-deck{font-size:16px!important;line-height:1.45}.hero-vid{aspect-ratio:16/9!important}}
.chapter .dt-lead a{color:inherit;text-decoration:underline;text-underline-offset:3px}
:root[data-theme="dark"] .chapter.sec-light .sy-block{background:#1f1f22}
:root[data-theme="dark"] #showcase{background:#161618}
@media (min-width:901px) and (max-width:1200px){.hero-vid video{-webkit-mask-image:radial-gradient(55% 58% at 62% 52%,#000 50%,transparent 100%);mask-image:radial-gradient(55% 58% at 62% 52%,#000 50%,transparent 100%)}}
:root[data-theme="dark"] #showcase .shape{background:#1f1f22}
/* manufacturing: two process photos under the cards */
.chapter .dt-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.chapter .dt-photos figure{margin:0}
.chapter .dt-photos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-card)}
@media (max-width:700px){.chapter .dt-photos{grid-template-columns:1fr}}
/* hero: reel as the background of the whole hero, under a dot + line grid (as on 2026-09-26) */
#hero::before{content:none}
#hero>.hero-vid,[dir="rtl"] #hero>.hero-vid{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;aspect-ratio:auto!important;z-index:0;order:0}
.hero-vid video{-webkit-mask-image:none!important;mask-image:none!important;object-fit:cover;object-position:50% 50%;opacity:.8}
.hero-vid::after{content:"";display:block!important;position:absolute;inset:0;z-index:1;pointer-events:none;background:
 radial-gradient(rgba(245,245,247,.14) 1px,transparent 1.2px) 0 0/6px 6px,
 linear-gradient(rgba(245,245,247,.035) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,rgba(245,245,247,.035) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.3) 100%)}
[dir="rtl"] .hero-vid::after{transform:scaleX(-1)}
@media (max-width:900px){.hero-vid::after{background:radial-gradient(rgba(245,245,247,.12) 1px,transparent 1.2px) 0 0/6px 6px,linear-gradient(rgba(245,245,247,.03) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(245,245,247,.03) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.82))}}
.hero-pause{z-index:3}
@media (max-width:900px){.hero-vid video,.hero-pause{display:none!important}}
/* hero reel (desktop): right half, ending at the text column's right edge, soft edges; grey square screen over it */
@media (min-width:901px){
 #hero>.hero-vid{inset:0 max(var(--gut),calc((100% - var(--wrap))/2)) 0 calc(50% - 140px)!important;width:auto!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-composite:intersect}
 [dir="rtl"] #hero>.hero-vid{inset:0 calc(50% - 140px) 0 max(var(--gut),calc((100% - var(--wrap))/2))!important;
  -webkit-mask-image:linear-gradient(270deg,transparent 0,#000 28%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(270deg,transparent 0,#000 28%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
 .hero-vid video{opacity:.9}
 .hero-vid::after{background:conic-gradient(from 0deg at 3px 3px,transparent 75%,rgba(120,120,124,.34) 0) 0 0/7px 7px!important;transform:none!important}
 .hero-pause{bottom:18%;inset-inline-end:10%}
}
/* hero screen: 4x larger grey squares across the whole hero (under the heading too), above the reel, below the text */
#hero::before{content:""!important;position:absolute;inset:0;z-index:1;pointer-events:none;-webkit-mask-image:none;mask-image:none;opacity:1;
 background:conic-gradient(from 0deg at 12px 12px,transparent 75%,rgba(120,120,124,.3) 0) 0 0/28px 28px}
.hero-vid::after{content:none!important}
/* hero screen v3: fine, dense, very transparent squares edge to edge; soft shade behind the text */
#hero::before{background:
 linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.22) 40%,rgba(0,0,0,0) 62%),
 conic-gradient(from 0deg at 4px 4px,transparent 75%,rgba(140,140,146,.13) 0) 0 0/6px 6px!important}
[dir="rtl"] #hero::before{background:
 linear-gradient(270deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.22) 40%,rgba(0,0,0,0) 62%),
 conic-gradient(from 0deg at 4px 4px,transparent 75%,rgba(140,140,146,.13) 0) 0 0/6px 6px!important}
@media (max-width:900px){#hero::before{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 60%),conic-gradient(from 0deg at 4px 4px,transparent 75%,rgba(140,140,146,.13) 0) 0 0/6px 6px!important}}
/* hero reel (desktop): whole frame fits the right column next to the text, nothing under the text */
@media (min-width:901px){
 #hero>.hero-vid{inset:0 max(var(--gut),calc((100% - var(--wrap))/2)) 0 calc(50% + 24px)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
 [dir="rtl"] #hero>.hero-vid{inset:0 calc(50% + 24px) 0 max(var(--gut),calc((100% - var(--wrap))/2))!important}
 .hero-vid video{object-fit:contain!important}
 .hero-pause{bottom:24px;inset-inline-end:0}
}
/* hero (desktop): two columns; the reel spans from the top of the heading to the bottom of the buttons */
@media (min-width:901px){
 #hero{display:grid!important;grid-template-columns:minmax(0,600px) minmax(0,1fr);column-gap:56px;align-content:center;justify-content:stretch}
 #hero>.hero-h{grid-column:1;grid-row:1}
 #hero>.hero-deck{grid-column:1;grid-row:2}
 #hero>.hero-cta{grid-column:1;grid-row:3}
 #hero>.spec-strip{grid-column:1/-1;grid-row:4}
 #hero .hero-h,#hero .hero-deck,#hero .hero-cta{max-width:none!important;width:auto!important}
 #hero>.hero-vid,[dir="rtl"] #hero>.hero-vid{grid-column:2;grid-row:1/4;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;align-self:stretch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
 .hero-vid video{object-fit:contain!important}
 .hero-pause{bottom:0;inset-inline-end:0}
}
@media (min-width:901px){.hero-vid video{object-fit:cover!important;object-position:50% 50%}}
/* hero reel column: from the top of the heading to the bottom of the figures */
@media (min-width:901px){#hero>.hero-vid,[dir="rtl"] #hero>.hero-vid{grid-row:1/5!important}#hero>.spec-strip{grid-column:1!important}}
@media (min-width:901px){#hero .spec-strip{max-width:none!important;width:auto!important}}
@media (min-width:901px){#hero>.hero-vid,[dir="rtl"] #hero>.hero-vid{grid-row:1/3!important}}
/* hero reel: no fade at the top or bottom edge (only soft sides) */
@media (min-width:901px){#hero>.hero-vid,[dir="rtl"] #hero>.hero-vid{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)!important}}
@media (min-width:901px){#hero>.hero-vid,[dir="rtl"] #hero>.hero-vid{-webkit-mask-image:none!important;mask-image:none!important}}
/* hero headline in sync with the reel (desktop, JS on); the static h1 stays in the DOM for SEO and screen readers */
.hero-rot{display:none}
@media (min-width:901px){
 #hero.rot-on .hero-h h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
 #hero.rot-on .hero-h{font-size:clamp(46px,5vw,84px)}
 #hero.rot-on .hero-rot{display:block;margin:0;font:500 clamp(46px,5vw,84px)/.98 var(--serif);letter-spacing:-.03em;color:var(--ink-d)}
 .hero-rot .r1,.hero-rot .r2{display:block}
 .hero-rot .r2{font-style:italic;font-weight:400;background:linear-gradient(180deg,#e9eaec 0%,#bcbfc4 56%,#8f9298 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline-end:.06em;white-space:nowrap}
 .hero-rot.in .r1,.hero-rot.in .r2{animation:heroRot .5s cubic-bezier(.2,0,0,1) both}
 .hero-rot.in .r2{animation-delay:.06s}
}
@keyframes heroRot{from{opacity:0;transform:translateY(.18em)}to{opacity:1;transform:none}}
@media (min-width:901px){
 html:is(:lang(ja),:lang(zh-Hans),:lang(ko),:lang(hi),:lang(he)) #hero.rot-on .hero-rot,html:is(:lang(ja),:lang(zh-Hans),:lang(ko),:lang(hi),:lang(he)) #hero.rot-on .hero-h{font-size:clamp(40px,4.4vw,68px);line-height:1.1}
 html:is(:lang(ja),:lang(zh-Hans),:lang(ko)) .hero-rot .r2{font-style:normal}
}
/* WS.COMPUTER mark over the reel while the workstation scene plays (desktop) */
.hero-cap{display:none}
@media (min-width:901px){.hero-cap{display:flex;position:absolute;inset-inline-start:16px;bottom:16px;z-index:3;gap:10px;align-items:center;font:600 12px/1 var(--sans);letter-spacing:.14em;color:#f5f5f7;opacity:0;transition:opacity .35s;pointer-events:none}.hero-cap img{width:40px;height:auto;display:block}.hero-cap.on{opacity:.9}}
@media (min-width:901px){.hero-rot .r2{white-space:normal}}
/* H1 fixes: whole reel frame visible (contain), CJK line height, no synthetic italics, headline sits on the text below */
@media (min-width:901px){
 .hero-vid video{object-fit:contain!important}
 #hero.rot-on .hero-h{display:flex;flex-direction:column;justify-content:flex-end}
 html:is(:lang(ja),:lang(zh-Hans),:lang(ko)) #hero.rot-on .hero-rot,html:is(:lang(ja),:lang(zh-Hans),:lang(ko)) #hero.rot-on .hero-h{font-size:clamp(36px,3.8vw,58px);line-height:1.12}
 html:is(:lang(he),:lang(hi)) .hero-rot .r2{font-style:normal}
}
/* H2 fixes */
@media (min-width:901px){
 #hero>.hero-vid,[dir="rtl"] #hero>.hero-vid{justify-self:end}
 html:is(:lang(ja),:lang(zh-Hans),:lang(ko)) #hero.rot-on .hero-h .hero-rot{line-height:1.12!important}
}

/* font preview (OFL stand-ins): A = Instrument Sans for Akkurat, B = Inter Tight for Suisse Int'l / Neue Haas Unica, mono = IBM Plex Mono for Berkeley Mono. Only active with html.ft-a / html.ft-b (switcher on preview hosts). */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/alt/instrument-sans-latin-ext-400-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/alt/instrument-sans-latin-400-700.woff2) format('woff2');
  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: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/alt/inter-tight-latin-ext-400-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/alt/inter-tight-latin-400-700.woff2) format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/alt/ibm-plex-mono-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/alt/ibm-plex-mono-latin-400.woff2) format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/alt/ibm-plex-mono-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/alt/ibm-plex-mono-latin-500.woff2) format('woff2');
  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;
}html.ft-a{--serif:'Instrument Sans',system-ui,sans-serif;--sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace}
html.ft-b{--serif:'Inter Tight',system-ui,sans-serif;--sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace}
html:is(.ft-a,.ft-b) :is(h1,h2,.h-dark,.h-light,.ch-h2,.hero-rot){font-weight:500!important;letter-spacing:-.028em!important;line-height:.98}
html:is(.ft-a,.ft-b) :is(.chrome,.hero-rot .r2){font-style:normal!important;font-weight:500!important}
html:is(.ft-a,.ft-b) body{font-size:17px;letter-spacing:-.003em}
html:is(.ft-a,.ft-b) :is(.spec-strip .v,.pr-cat,.crumb,.logo,.foot-legal,.dt-cta .btn-g){font-family:var(--mono)!important;letter-spacing:0}
html:is(.ft-a,.ft-b) .spec-strip .v{font-weight:500}
html:is(.ft-a,.ft-b) .pr-cat{text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.ft-sw{display:inline-flex;gap:2px;margin-inline-start:14px;padding:3px;border-radius:8px;background:rgba(255,255,255,.08)}
.ft-sw button{font:500 11px/1 var(--sans);color:#d2d2d7;background:transparent;border:0;border-radius:6px;padding:6px 8px;cursor:pointer}
.ft-sw button[aria-pressed="true"]{background:#f5f5f7;color:#000}
/* 2026-09-28 owner's choice: variant B ("Suisse") is the site typography — Inter Tight (OFL stand-in for Suisse Int'l) + IBM Plex Mono for figures and small labels */
:root{--serif:'Inter Tight',system-ui,sans-serif;--sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans','Noto Sans JP','Noto Sans KR','Noto Sans SC','Noto Sans Devanagari','Noto Sans Hebrew',sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace}
:is(h1,h2,.h-dark,.h-light,.ch-h2,.hero-rot){font-weight:500!important;letter-spacing:-.028em!important;line-height:.98}
:is(.chrome,.hero-rot .r2){font-style:normal!important;font-weight:500!important}
body{font-size:17px;letter-spacing:-.003em}
:is(.spec-strip .v,.pr-cat,.crumb,.foot-legal){font-family:var(--mono)!important;letter-spacing:0}
.spec-strip .v{font-weight:500}
.pr-cat{text-transform:uppercase;font-size:11px;letter-spacing:.06em}
/* GRUENCY wordmark (2026-09-28) */
.brand .bd-logo{display:block;height:17px;width:auto;color:var(--ink-d)}
@media (max-width:600px){.brand .bd-logo{height:15px}}
.brand .bd-logo{height:19px;width:auto}
@media (max-width:600px){.brand .bd-logo{height:16px}}
/* Hero figures band: full text width, three cells with a small real image each, awards line underneath (no numbering) */
.stats{margin-top:clamp(40px,6vw,72px);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stats li{display:flex;justify-content:space-between;gap:16px;padding:24px 24px 24px 0;min-width:0}
.stats li+li{padding-inline-start:24px;border-inline-start:1px solid rgba(255,255,255,.12)}
.stats .st-v{display:block;font:500 clamp(40px,4.2vw,60px)/1 var(--sans);letter-spacing:-.03em;color:var(--ink-d)}
.stats .st-l{display:block;margin-top:14px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-d)}
.stats .st-d{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--mute-d);max-width:22ch}
.stats .st-i{flex:0 0 auto;width:clamp(96px,9vw,140px);height:auto;aspect-ratio:320/306;object-fit:cover;align-self:center;border-radius:2px;opacity:.92}
.stats .st-aw{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:0;padding:16px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:var(--mute-d)}
.stats .st-awl{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-d)}
.stats .st-awi span+span::before{content:"/";margin:0 12px;color:rgba(255,255,255,.3)}
.stats .st-aw a{margin-inline-start:auto;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-d);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.stats .st-aw a:hover{border-color:#fff}
@media (min-width:901px){#hero>.stats{grid-column:1/-1!important;grid-row:4!important;max-width:none!important;width:auto!important}}
@media (max-width:900px){#hero>.stats{order:5}.stats ul{grid-template-columns:1fr}.stats li{padding:20px 0}.stats li+li{padding-inline-start:0;border-inline-start:0;border-top:1px solid rgba(255,255,255,.12)}.stats .st-i{width:96px}.stats .st-aw a{margin-inline-start:0}}
/* figures band as glass tiles (owner, 2026-09-28): no table lines */
.stats{border:0!important}
.stats ul{gap:14px}
.stats li,.stats li+li{border:0!important;padding:22px 22px!important;border-radius:var(--r-card);background:rgba(255,255,255,.045);-webkit-backdrop-filter:saturate(140%) blur(18px);backdrop-filter:saturate(140%) blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 1px 0 rgba(255,255,255,.04) inset}
.stats .st-aw{margin-top:14px;padding:14px 22px!important;border:0!important;border-radius:var(--r-card);background:rgba(255,255,255,.03);-webkit-backdrop-filter:saturate(140%) blur(18px);backdrop-filter:saturate(140%) blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.stats .st-i{border-radius:8px}
@media (max-width:900px){.stats ul{gap:10px}.stats li+li{border-top:0!important}}
/* figures band v2 (owner, 2026-09-28): taller glass cards, big figures, image melting into the glass (no numbering, no arrows) */
.stats li,.stats li+li{position:relative;overflow:hidden;align-items:stretch;min-height:clamp(210px,17vw,256px);padding:26px 26px 24px!important;background:linear-gradient(150deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 38%,rgba(255,255,255,.02) 100%);-webkit-backdrop-filter:saturate(150%) blur(22px);backdrop-filter:saturate(150%) blur(22px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.22),0 24px 48px -16px rgba(0,0,0,.55)}
.stats li>div{position:relative;z-index:1;display:flex;flex-direction:column;flex:1 1 auto;max-width:62%}
.stats .st-v{font-size:clamp(52px,5.8vw,84px);letter-spacing:-.035em;margin-bottom:auto;padding-bottom:18px}
.stats .st-d{max-width:24ch}
.stats .st-i{position:absolute;top:0;right:0;width:52%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;border-radius:0;opacity:.85;-webkit-mask-image:linear-gradient(to right,transparent,#000 42%);mask-image:linear-gradient(to right,transparent,#000 42%)}
.stats .st-i[src*="globe"]{object-fit:contain;object-position:right center;width:56%;padding:14px 10px 14px 0;box-sizing:border-box;-webkit-mask-image:none;mask-image:none;opacity:.9}
.stats .st-aw{background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 1px 0 rgba(255,255,255,.16)}
@media (max-width:900px){.stats li,.stats li+li{min-height:188px;padding:22px 20px!important}.stats .st-v{font-size:clamp(48px,13vw,64px)}.stats .st-i{width:46%}.stats .st-i[src*="globe"]{width:50%}}
/* hero: the sections' grain field instead of the square grid, grain half the size (owner, 2026-09-28) */
#hero{isolation:isolate}
#hero::before{background:linear-gradient(90deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.14) 40%,rgba(0,0,0,0) 62%)!important}
[dir="rtl"] #hero::before{background:linear-gradient(270deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.14) 40%,rgba(0,0,0,0) 62%)!important}
@media (max-width:900px){#hero::before{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 60%)!important}}
#hero>canvas.mesh-bg{z-index:0!important}
/* hero reel: the same fine grain laid over the video (owner, 2026-09-28) */
#hero>.hero-vid::after{content:""!important;position:absolute;inset:0;z-index:1;pointer-events:none;background:url(/assets/grain-hero.png) 0 0/128px 128px!important;transform:none!important;opacity:1}
#hero>.hero-vid>.hero-pause{z-index:2}
/* hero WS.COMPUTER scene: second line smaller, one line, spans the brand's width */
.hero-rot.fitw .r2{white-space:nowrap!important;letter-spacing:-.01em;line-height:1.15;margin-top:.12em;font-style:normal}
/* hero reel melts into the grain: black in the video shows the hero field (no dark box around charts and code) */
#hero>.hero-vid{mix-blend-mode:lighten}
/* hero: faint light spilling from the logo toward the heading (position set by mesh.js), over the text shade */
#hero::before{background:radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,18%) var(--gy,12%),rgba(255,255,255,.045) 0%,rgba(255,255,255,.018) 45%,rgba(255,255,255,0) 100%),linear-gradient(90deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.14) 40%,rgba(0,0,0,0) 62%)!important}
[dir="rtl"] #hero::before{background:radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,82%) var(--gy,12%),rgba(255,255,255,.045) 0%,rgba(255,255,255,.018) 45%,rgba(255,255,255,0) 100%),linear-gradient(270deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.14) 40%,rgba(0,0,0,0) 62%)!important}
/* "11" card: WS.COMPUTER logo instead of the photo */
.stats .st-i.st-logo{object-fit:contain;object-position:right center;width:48%;padding:0 26px 0 0;box-sizing:border-box;-webkit-mask-image:none;mask-image:none;opacity:.88}
@media (max-width:900px){.stats .st-i.st-logo{width:42%;padding-right:20px}}
/* figures band v3 (owner, 2026-09-28): lower cards, calmer figures, no chart behind 25+, smaller globe; awards as a taller sectioned bar */
.stats li,.stats li+li{min-height:clamp(168px,12.5vw,188px);padding:22px 24px 20px!important}
.stats .st-v{font-size:clamp(46px,4.6vw,66px);padding-bottom:14px}
.stats .st-i[src*="globe"]{width:40%;padding:22px 18px 22px 0}
.stats .st-i.st-logo{width:44%;padding-right:24px}
.stats .st-aw{display:grid!important;grid-template-columns:minmax(150px,.9fr) repeat(5,minmax(0,1fr));align-items:start;gap:0;padding:20px 24px!important;font-size:13px;line-height:1.4}
.stats .st-awh{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-inline-end:20px}
.stats .st-awh a{margin:0!important}
.stats .st-awi{display:contents}
.stats .st-awi>span{display:flex;flex-direction:column;gap:4px;padding:0 18px;border-inline-start:1px solid rgba(255,255,255,.09);color:var(--mute-d);min-width:0}
.stats .st-awi>span::before{content:none!important}
.stats .st-awi b{font-weight:500;color:var(--ink-d);font-size:14px;line-height:1.3}
@media (max-width:1100px){.stats .st-aw{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}.stats .st-awh{grid-column:1/-1;flex-direction:row;justify-content:space-between;width:100%;padding:0}.stats .st-awi>span:nth-child(3n+1){border-inline-start:0;padding-inline-start:0}}
@media (max-width:600px){.stats .st-aw{grid-template-columns:repeat(2,minmax(0,1fr))}.stats .st-awi>span{border:0!important;padding:0!important}}
/* menu flat on the hero grain at the top of the home page, hairline underneath */
.site-hdr.at-top:not(.on-light){background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
/* hero reel reaches down to the buttons (owner 2026-09-28): bigger and closer to the heading, so the eye takes in both */
@media (min-width:901px){#hero{column-gap:40px!important}#hero>.hero-vid,[dir="rtl"] #hero>.hero-vid{grid-row:1/4!important}}
/* header logo (owner, 2026-09-28): discreet grey; on the home hero top it reads as a stamp pressed into the grain (dark fill, light lower edge) */
.site-hdr .bd-logo{opacity:.6;transition:opacity .25s,filter .25s}
.site-hdr.at-top:not(.on-light) .bd-logo{opacity:1;filter:brightness(0) drop-shadow(0 1px 0 rgba(255,255,255,.2)) drop-shadow(0 -1px 0 rgba(0,0,0,.55))}
/* critic round 1 (2026-09-28): figures one step below the heading, hero fits 1440x900, even awards, aligned cards, phone fixes */
.stats{margin-top:56px!important}
.stats .st-v{font-size:clamp(40px,3.34vw,48px);padding-bottom:12px}
@media (max-width:900px){.stats .st-v{font-size:clamp(34px,9vw,40px)}}
.hero-rot .r2{padding-bottom:.2em;margin-bottom:-.2em}
@media (min-width:1180px){.stats .st-aw{grid-template-columns:minmax(132px,150px) repeat(5,max-content);justify-content:space-between}.stats .st-awi>span{white-space:nowrap}}
.stats .st-d{min-height:2.9em}
.stats .st-i.st-logo{object-position:right top;padding:29px 24px 0 0}
.stats .st-awh a{display:inline-flex;align-items:center;min-height:24px}
@media (max-width:900px){#hero>.hero-deck{margin-top:20px!important}}
@media (max-width:600px){#hero .hero-cta>*{width:100%;justify-content:center}
 .stats .st-aw{grid-template-columns:1fr}.stats .st-awi>span{flex-direction:row;justify-content:space-between;gap:12px;padding:10px 0!important;border-top:1px solid rgba(255,255,255,.09)!important}}
.site-hdr.at-top:not(.on-light) .bd-logo{filter:brightness(0) drop-shadow(0 1px 0 rgba(255,255,255,.3)) drop-shadow(0 -1px 0 rgba(0,0,0,.6))}
#hero::before{background:radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,18%) var(--gy,12%),rgba(255,255,255,.045) 0%,rgba(255,255,255,.018) 45%,rgba(255,255,255,0) 100%),linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,0) 62%)!important}
[dir="rtl"] #hero::before{background:radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,82%) var(--gy,12%),rgba(255,255,255,.045) 0%,rgba(255,255,255,.018) 45%,rgba(255,255,255,0) 100%),linear-gradient(270deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,0) 62%)!important}
@media (max-width:900px){#hero::before{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 60%)!important}}
/* owner round 2026-09-28 evening */
/* awards: four equal sections, no rules, no heading */
.stats .st-aw.st-aw2{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;gap:18px 32px;padding:20px 24px!important}
.stats .st-aw2>span{display:flex;flex-direction:column;gap:4px;color:var(--mute-d);font-size:13px;line-height:1.4;min-width:0;border:0!important;white-space:normal}
.stats .st-aw2>span::before{content:none!important}
.stats .st-aw2 b{font-weight:500;color:var(--ink-d);font-size:14px;line-height:1.3}
@media (max-width:900px){.stats .st-aw.st-aw2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.stats .st-aw.st-aw2{grid-template-columns:1fr;gap:14px}}
/* cards: every description on two lines, so the labels line up */
.stats li:nth-child(2) .st-d{max-width:15ch}
/* header logo: light, a little greyed (the black stamp was too faint) */
.site-hdr .bd-logo,.site-hdr.at-top:not(.on-light) .bd-logo{filter:none!important;opacity:.78}
/* reel: grain darkens only (no lighter rectangle over the black), edges feathered by a few px so no hairlines */
#hero>.hero-vid::after{background:url(/assets/grain-hero2.png) 0 0/128px 128px!important}
#hero>.hero-vid video{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%),linear-gradient(90deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%),linear-gradient(90deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%);mask-composite:intersect}
/* light: logo spill toward the heading plus an ultra-faint widened pool at the bottom of the hero */
#hero::before{background:radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,18%) var(--gy,12%),rgba(255,255,255,.045) 0%,rgba(255,255,255,.018) 45%,rgba(255,255,255,0) 100%),radial-gradient(70% 26% at 34% 100%,rgba(255,255,255,.024) 0%,rgba(255,255,255,.008) 50%,rgba(255,255,255,0) 100%),linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,0) 62%)!important}
[dir="rtl"] #hero::before{background:radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,82%) var(--gy,12%),rgba(255,255,255,.045) 0%,rgba(255,255,255,.018) 45%,rgba(255,255,255,0) 100%),radial-gradient(70% 26% at 66% 100%,rgba(255,255,255,.024) 0%,rgba(255,255,255,.008) 50%,rgba(255,255,255,0) 100%),linear-gradient(270deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,0) 62%)!important}
@media (max-width:900px){#hero::before{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 60%)!important}}
/* reel edges dissolve into the grain (owner: no visible square frame on the laser and photo scenes) */
#hero>.hero-vid video{-webkit-mask-image:url(/assets/reel-edge.webp)!important;mask-image:url(/assets/reel-edge.webp)!important;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-over;mask-composite:add}
/* critic round 2: long languages on phones, 3-line scene in el/fr, first screen at 1280x800 */
@media (max-width:900px){#hero .hero-h h1 .chrome{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}}
@media (min-width:901px){html:is(:lang(el),:lang(fr)) #hero.rot-on .hero-rot{font-size:clamp(46px,4.6vw,66px)!important}}
@media (min-width:901px) and (max-height:820px){#hero{padding-top:96px!important}.stats{margin-top:48px!important}}
/* PHONE hero (owner, 2026-09-28): logo → rotating chapter heading → reel → description → buttons → figures → awards; same grain as the PC */
@media (max-width:900px){
 #hero.rot-on .hero-h h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
 #hero.rot-on .hero-h{display:flex;flex-direction:column;justify-content:flex-end}
 #hero.rot-on .hero-rot{display:block;margin:0;font:500 clamp(34px,10.5vw,46px)/1.02 var(--serif);letter-spacing:-.028em;color:var(--ink-d)}
 .hero-rot .r1,.hero-rot .r2{display:block}
 .hero-rot .r2{font-style:normal;font-weight:500;background:linear-gradient(180deg,#e9eaec 0%,#bcbfc4 56%,#8f9298 100%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:normal}
 .hero-rot.fitw .r2{white-space:nowrap!important}
 .hero-rot.in .r1,.hero-rot.in .r2{animation:heroRot .5s cubic-bezier(.2,0,0,1) both}
 .hero-rot.in .r2{animation-delay:.06s}
 html:is(:lang(ja),:lang(zh-Hans),:lang(ko)) #hero.rot-on .hero-rot{font-size:clamp(30px,9vw,40px);line-height:1.12}
 #hero>.hero-vid{order:2;aspect-ratio:1380/1200!important;width:100%!important;height:auto!important;margin:22px 0 0!important;opacity:1!important}
 #hero>.hero-vid video{display:block!important;width:100%;height:100%;object-fit:cover!important;opacity:1!important}
 #hero>.hero-vid>.hero-pause{display:grid!important;background:rgba(0,0,0,.45)}
 #hero>.hero-deck{order:3}#hero>.hero-cta{order:4}#hero>.stats{order:5}
}
/* owner: no dissolving mask on the reel (corner softening now lives inside the laser and photo scenes of the video) */
#hero>.hero-vid video{-webkit-mask-image:none!important;mask-image:none!important}
/* owner: WS.COMPUTER logo back in the vertical middle of the "11" card */
.stats .st-i.st-logo{object-position:right center!important;padding:0 24px 0 0!important}
@media (max-width:900px){#hero>.hero-vid,[dir="rtl"] #hero>.hero-vid{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;grid-column:1/-1!important;grid-row:auto!important;align-self:stretch;max-width:none!important;transform:none!important}}
/* light v3 (owner): beam lands on the heading; visible soft pool at the bottom of the hero, behind the awards bar */
#hero::before{background:radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 100%),radial-gradient(62% 34% at 40% 100%,rgba(255,255,255,.05) 0%,rgba(255,255,255,.018) 50%,rgba(255,255,255,0) 100%),linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,0) 62%)!important}
[dir="rtl"] #hero::before{background:radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,76%) var(--gy,22%),rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 100%),radial-gradient(62% 34% at 60% 100%,rgba(255,255,255,.05) 0%,rgba(255,255,255,.018) 50%,rgba(255,255,255,0) 100%),linear-gradient(270deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,0) 62%)!important}
@media (max-width:900px){#hero::before{background:radial-gradient(90% 22% at 50% 100%,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 100%),linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 60%)!important}}
/* hero background stays put while the content scrolls (owner 2026-09-28): fixed canvas + fixed light layer, clipped to the hero */
#hero{clip-path:inset(0)}
#hero>canvas.mesh-bg{position:fixed!important;inset:0 auto auto 0!important;width:100vw!important;height:100vh!important;height:100lvh!important}
#hero::before{position:fixed!important;inset:0!important;height:100lvh}
/* light from one source: spill toward the heading, a faint beam from under the logo, a pool low on the right */
#hero::before{background:
 radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 100%),
 conic-gradient(from var(--ba,132deg) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,0) 0deg,rgba(255,255,255,.022) 8deg,rgba(255,255,255,.028) 12deg,rgba(255,255,255,.022) 16deg,rgba(255,255,255,0) 24deg,rgba(255,255,255,0) 360deg),
 radial-gradient(34% 26% at 62% 100%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 55%,rgba(255,255,255,0) 100%),
 linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,0) 62%)!important}
[dir="rtl"] #hero::before{background:
 radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,76%) var(--gy,22%),rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 100%),
 conic-gradient(from var(--ba,132deg) at var(--lx,84%) var(--ly,8%),rgba(255,255,255,0) 0deg,rgba(255,255,255,.022) 8deg,rgba(255,255,255,.028) 12deg,rgba(255,255,255,.022) 16deg,rgba(255,255,255,0) 24deg,rgba(255,255,255,0) 360deg),
 radial-gradient(34% 26% at 38% 100%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 55%,rgba(255,255,255,0) 100%),
 linear-gradient(270deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,0) 62%)!important}
@media (max-width:900px){#hero::before{background:
 conic-gradient(from var(--ba,150deg) at var(--lx,20%) var(--ly,8%),rgba(255,255,255,0) 0deg,rgba(255,255,255,.022) 8deg,rgba(255,255,255,.028) 12deg,rgba(255,255,255,.022) 16deg,rgba(255,255,255,0) 24deg,rgba(255,255,255,0) 360deg),
 radial-gradient(60% 22% at 62% 100%,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 100%),
 linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 60%)!important}}
/* light v4 (owner): no beam; logo glow + spill as before; a low light from below that rises when screen 2 arrives */
@property --pool{syntax:"<number>";inherits:true;initial-value:0}
#hero{--pool:0;transition:--pool 1.2s cubic-bezier(0,0,.5,1)}
#hero.s2{--pool:1}
#hero::before{background:
 radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(46% + 14% * var(--pool)) calc(18% + 26% * var(--pool)) at 50% 100%,rgba(255,255,255,calc(.078 * var(--pool))) 0%,rgba(255,255,255,calc(.03 * var(--pool))) 55%,rgba(255,255,255,0) 100%),
 linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}
[dir="rtl"] #hero::before{background:
 radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,76%) var(--gy,22%),rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(46% + 14% * var(--pool)) calc(18% + 26% * var(--pool)) at 50% 100%,rgba(255,255,255,calc(.078 * var(--pool))) 0%,rgba(255,255,255,calc(.03 * var(--pool))) 55%,rgba(255,255,255,0) 100%),
 linear-gradient(270deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}
@media (max-width:900px){#hero::before{background:
 radial-gradient(calc(70% + 20% * var(--pool)) calc(14% + 18% * var(--pool)) at 50% 100%,rgba(255,255,255,calc(.073 * var(--pool))) 0%,rgba(255,255,255,0) 100%),
 linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 60%)!important}}
@media (prefers-reduced-motion:reduce){#hero{transition:none}}
/* light v5: logo glow + spill fade out while screen 1 leaves (--top 1→0, set on scroll); bottom light only with screen 2 */
#hero::before{background:
 radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(46% + 14% * var(--pool)) calc(18% + 26% * var(--pool)) at 50% 100%,rgba(255,255,255,calc(.078 * var(--pool))) 0%,rgba(255,255,255,calc(.03 * var(--pool))) 55%,rgba(255,255,255,0) 100%),
 linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}
[dir="rtl"] #hero::before{background:
 radial-gradient(circle var(--lr,256px) at var(--lx,84%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,76%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(46% + 14% * var(--pool)) calc(18% + 26% * var(--pool)) at 50% 100%,rgba(255,255,255,calc(.078 * var(--pool))) 0%,rgba(255,255,255,calc(.03 * var(--pool))) 55%,rgba(255,255,255,0) 100%),
 linear-gradient(270deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}
@media (max-width:900px){#hero::before{background:
 radial-gradient(circle var(--lr,220px) at var(--lx,20%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(70% + 20% * var(--pool)) calc(14% + 18% * var(--pool)) at 50% 100%,rgba(255,255,255,calc(.073 * var(--pool))) 0%,rgba(255,255,255,0) 100%),
 linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 60%)!important}}
/* hero screen 2 sequence (owner 2026-09-28) */
#hero>.st-run{grid-column:1/-1!important;grid-row:4!important;min-width:0}
@media (max-width:900px){#hero>.st-run{order:5}}
@media (min-width:901px){#hero .st-run>.stats{position:sticky;margin-top:0!important}}
/* cards: hidden until their turn; desktop from the right, phone from below (apple.com timing) */
html.st-rev #hero .stats li,html.st-rev #hero .stats .st-aw{opacity:0}
@media (min-width:901px){html.st-rev #hero .stats li{transform:translateX(90px)}[dir="rtl"] html.st-rev #hero .stats li,html[dir="rtl"].st-rev #hero .stats li{transform:translateX(-90px)}}
@media (max-width:900px){html.st-rev #hero .stats li{transform:translateY(30px)}html.st-rev #hero .stats li:nth-child(2){transition-delay:.15s}html.st-rev #hero .stats li:nth-child(3){transition-delay:.3s}}
html.st-rev #hero .stats .st-aw{transform:translateY(30px)}
html.st-rev.st-armed #hero .stats li,html.st-rev.st-armed #hero .stats .st-aw{transition:opacity .9s cubic-bezier(0,0,.5,1),transform .8s cubic-bezier(0,0,.5,1)}
html.st-rev #hero .stats li.on,html.st-rev #hero .stats .st-aw.on{opacity:1;transform:none}
/* the light from below moves to the card that just arrived */
@property --sp1{syntax:"<number>";inherits:true;initial-value:0}
@property --sp2{syntax:"<number>";inherits:true;initial-value:0}
@property --sp3{syntax:"<number>";inherits:true;initial-value:0}
#hero{transition:--pool 1.2s cubic-bezier(0,0,.5,1),--sp1 .9s cubic-bezier(0,0,.5,1),--sp2 .9s cubic-bezier(0,0,.5,1),--sp3 .9s cubic-bezier(0,0,.5,1)}
#hero.sp1{--sp1:1}#hero.sp2{--sp2:1}#hero.sp3{--sp3:1}
@media (min-width:901px){
#hero::before{background:
 radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(var(--cw,360px) * .85) calc(var(--ch,180px) * 1.25) at var(--c1x,25%) var(--cy,70%),rgba(255,255,255,calc(.11 * var(--sp1) * var(--sf,1))) 0%,rgba(255,255,255,calc(.04 * var(--sp1) * var(--sf,1))) 50%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(var(--cw,360px) * .85) calc(var(--ch,180px) * 1.25) at var(--c2x,50%) var(--cy,70%),rgba(255,255,255,calc(.11 * var(--sp2) * var(--sf,1))) 0%,rgba(255,255,255,calc(.04 * var(--sp2) * var(--sf,1))) 50%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(var(--cw,360px) * .85) calc(var(--ch,180px) * 1.25) at var(--c3x,75%) var(--cy,70%),rgba(255,255,255,calc(.11 * var(--sp3) * var(--sf,1))) 0%,rgba(255,255,255,calc(.04 * var(--sp3) * var(--sf,1))) 50%,rgba(255,255,255,0) 100%),
 linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}
[dir="rtl"] #hero::before{background:
 radial-gradient(circle var(--lr,256px) at var(--lx,84%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,76%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(var(--cw,360px) * .85) calc(var(--ch,180px) * 1.25) at var(--c1x,75%) var(--cy,70%),rgba(255,255,255,calc(.11 * var(--sp1) * var(--sf,1))) 0%,rgba(255,255,255,calc(.04 * var(--sp1) * var(--sf,1))) 50%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(var(--cw,360px) * .85) calc(var(--ch,180px) * 1.25) at var(--c2x,50%) var(--cy,70%),rgba(255,255,255,calc(.11 * var(--sp2) * var(--sf,1))) 0%,rgba(255,255,255,calc(.04 * var(--sp2) * var(--sf,1))) 50%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(var(--cw,360px) * .85) calc(var(--ch,180px) * 1.25) at var(--c3x,25%) var(--cy,70%),rgba(255,255,255,calc(.11 * var(--sp3) * var(--sf,1))) 0%,rgba(255,255,255,calc(.04 * var(--sp3) * var(--sf,1))) 50%,rgba(255,255,255,0) 100%),
 linear-gradient(270deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}}
@media (prefers-reduced-motion:reduce){html #hero .stats li,html #hero .stats .st-aw{opacity:1!important;transform:none!important}}
#hero{overflow:clip!important}
/* sequence v2: the band is pinned at the top; the cards row and the awards bar are placed by JS (translate), cards reveal by class */
@media (min-width:901px){#hero .st-run>.stats{position:sticky}#hero .stats ul{will-change:translate}}
/* sequence v3: card lights driven continuously by scroll (no class transitions); smaller, sitting on the card's lower half */
#hero{transition:--pool 1.2s cubic-bezier(0,0,.5,1)!important}
@media (min-width:901px){
#hero::before{background:
 radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(var(--cw,360px) * .6) calc(var(--ch,180px) * .85) at var(--c1x,25%) var(--cy,70%),rgba(255,255,255,calc(.12 * var(--sp1,0))) 0%,rgba(255,255,255,calc(.045 * var(--sp1,0))) 50%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(var(--cw,360px) * .6) calc(var(--ch,180px) * .85) at var(--c2x,50%) var(--cy,70%),rgba(255,255,255,calc(.12 * var(--sp2,0))) 0%,rgba(255,255,255,calc(.045 * var(--sp2,0))) 50%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(var(--cw,360px) * .6) calc(var(--ch,180px) * .85) at var(--c3x,75%) var(--cy,70%),rgba(255,255,255,calc(.12 * var(--sp3,0))) 0%,rgba(255,255,255,calc(.045 * var(--sp3,0))) 50%,rgba(255,255,255,0) 100%),
 linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}}
/* sequence v4 (owner): one light travelling right→left across the cards; cards enter dark (outline only) and come up when lit */
@media (min-width:901px){
 html.st-rev #hero .stats li{transform:none!important;opacity:0;filter:brightness(.4)}
 html.st-rev #hero .stats li.on{opacity:.32}
 html.st-rev #hero .stats li.lit{opacity:1;filter:none}
 html.st-rev.st-armed #hero .stats li{transition:opacity .7s cubic-bezier(0,0,.5,1),filter .9s cubic-bezier(0,0,.5,1)!important}
 #hero::before{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .55) calc(var(--ch,180px) * .8) at var(--sx,75%) var(--sy,70%),rgba(255,255,255,calc(.13 * var(--si,0))) 0%,rgba(255,255,255,calc(.05 * var(--si,0))) 50%,rgba(255,255,255,0) 100%),
  linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}
 [dir="rtl"] #hero::before{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,84%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,76%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .55) calc(var(--ch,180px) * .8) at var(--sx,25%) var(--sy,70%),rgba(255,255,255,calc(.13 * var(--si,0))) 0%,rgba(255,255,255,calc(.05 * var(--si,0))) 50%,rgba(255,255,255,0) 100%),
  linear-gradient(270deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}}
/* the 11 card lies on top; 30+ and 25+ slide out from under it */
@media (min-width:901px){#hero .stats li{position:relative}#hero .stats li:nth-child(3){z-index:3}#hero .stats li:nth-child(2){z-index:2}#hero .stats li:nth-child(1){z-index:1}}
/* torch v2 (owner): stronger, a hot core plus a wider spill below and a little to the right of the card; lit cards cast a soft shadow */
@media (min-width:901px){
 #hero::before{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .34) calc(var(--ch,180px) * .42) at calc(var(--sx,75%) + var(--cw,360px) * .05) var(--sy,70%),rgba(255,255,255,calc(.16 * var(--si,0))) 0%,rgba(255,255,255,calc(.05 * var(--si,0))) 60%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .8) calc(var(--ch,180px) * .95) at calc(var(--sx,75%) + var(--cw,360px) * .07) var(--sy,70%),rgba(255,255,255,calc(.1 * var(--si,0))) 0%,rgba(255,255,255,calc(.035 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}
 [dir="rtl"] #hero::before{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,84%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,76%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .34) calc(var(--ch,180px) * .42) at var(--sx,25%) var(--sy,70%),rgba(255,255,255,calc(.16 * var(--si,0))) 0%,rgba(255,255,255,calc(.05 * var(--si,0))) 60%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .8) calc(var(--ch,180px) * .95) at var(--sx,25%) var(--sy,70%),rgba(255,255,255,calc(.1 * var(--si,0))) 0%,rgba(255,255,255,calc(.035 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  linear-gradient(270deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}
 html.st-rev #hero .stats li.lit{box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.22),0 26px 44px -18px rgba(0,0,0,.75),0 8px 18px -8px rgba(0,0,0,.5)}
 html.st-rev.st-armed #hero .stats li{transition:opacity .7s cubic-bezier(0,0,.5,1),filter .9s cubic-bezier(0,0,.5,1),box-shadow .9s cubic-bezier(0,0,.5,1)!important}
}
/* torch v3 (owner): round hot core under the WS.COMPUTER mark, the spill lower and to the right, past the card */
@media (min-width:901px){
 #hero::before{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(circle calc(var(--cw,360px) * .3) at var(--sx,75%) var(--sy,70%),rgba(255,255,255,calc(.17 * var(--si,0))) 0%,rgba(255,255,255,calc(.06 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .75) calc(var(--ch,180px) * .95) at calc(var(--sx,75%) + var(--cw,360px) * .08) calc(var(--sy,70%) + var(--ch,180px) * .2),rgba(255,255,255,calc(.1 * var(--si,0))) 0%,rgba(255,255,255,calc(.035 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}}
/* torch v4 (owner): brighter, plus a focused, longer stream of light running down from under the card over the grain */
@media (min-width:901px){
 #hero::before{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(circle calc(var(--cw,360px) * .3) at var(--sx,75%) var(--sy,70%),rgba(255,255,255,calc(.22 * var(--si,0))) 0%,rgba(255,255,255,calc(.08 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .26) calc(var(--ch,180px) * 1.5) at calc(var(--sx,75%) + var(--cw,360px) * .04) calc(var(--sy,70%) + var(--ch,180px) * .62),rgba(255,255,255,calc(.16 * var(--si,0))) 0%,rgba(255,255,255,calc(.06 * var(--si,0))) 50%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .8) calc(var(--ch,180px) * 1.1) at calc(var(--sx,75%) + var(--cw,360px) * .08) calc(var(--sy,70%) + var(--ch,180px) * .3),rgba(255,255,255,calc(.13 * var(--si,0))) 0%,rgba(255,255,255,calc(.045 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}}
/* torch v5 (owner): no narrow stream; a round glow under the mark that widens at the card's lower edge and spills only ~30-40px below it */
@media (min-width:901px){
 #hero::before{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(circle calc(var(--cw,360px) * .3) at var(--sx,75%) var(--sy,70%),rgba(255,255,255,calc(.2 * var(--si,0))) 0%,rgba(255,255,255,calc(.07 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .62) 64px at calc(var(--sx,75%) + var(--cw,360px) * .03) calc(var(--sy,70%) + var(--ch,180px) * .32),rgba(255,255,255,calc(.15 * var(--si,0))) 0%,rgba(255,255,255,calc(.055 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .7) calc(var(--ch,180px) * .7) at calc(var(--sx,75%) + var(--cw,360px) * .05) calc(var(--sy,70%) + var(--ch,180px) * .08),rgba(255,255,255,calc(.08 * var(--si,0))) 0%,rgba(255,255,255,calc(.03 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}}
/* sequence v5 (owner): the light fills a whole card and glides to the next; cards slide out from under 11 on their own once started */
@property --sx{syntax:"<length>";inherits:true;initial-value:0px}
@media (min-width:901px){
 #hero{transition:--pool 1.2s cubic-bezier(0,0,.5,1),--sx 1.1s cubic-bezier(.45,0,.2,1)!important}
 #hero .stats li:nth-child(1),#hero .stats li:nth-child(2){translate:var(--off,0px) 0}
 #hero .stats li.out{translate:0 0}
 html.st-rev.st-armed #hero .stats li{transition:opacity .7s cubic-bezier(0,0,.5,1),filter .9s cubic-bezier(0,0,.5,1),box-shadow .9s cubic-bezier(0,0,.5,1),translate 1.2s cubic-bezier(.2,.7,.2,1)!important}
 #hero::before{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .66) calc(var(--ch,180px) * .8) at var(--sx,75%) var(--sy,70%),rgba(255,255,255,calc(.15 * var(--si,0))) 0%,rgba(255,255,255,calc(.06 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .68) 72px at var(--sx,75%) calc(var(--sy,70%) + var(--ch,180px) * .5),rgba(255,255,255,calc(.14 * var(--si,0))) 0%,rgba(255,255,255,calc(.05 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}}
/* sequence v6 (owner): scroll-driven light gliding right→left across each card (short smoothing only); only the lit card is bright */
@media (min-width:901px){
 #hero{transition:--pool 1.2s cubic-bezier(0,0,.5,1),--sx .35s cubic-bezier(0,0,.5,1)!important}
 #hero::before{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(circle calc(var(--cw,360px) * .3) at var(--sx,75%) var(--sy,70%),rgba(255,255,255,calc(.2 * var(--si,0))) 0%,rgba(255,255,255,calc(.07 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .62) 64px at var(--sx,75%) calc(var(--sy,70%) + var(--ch,180px) * .38),rgba(255,255,255,calc(.15 * var(--si,0))) 0%,rgba(255,255,255,calc(.055 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .7) calc(var(--ch,180px) * .7) at var(--sx,75%) calc(var(--sy,70%) + var(--ch,180px) * .08),rgba(255,255,255,calc(.08 * var(--si,0))) 0%,rgba(255,255,255,calc(.03 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)!important}}
/* torch lights the letters it passes (owner): text painted with a light gradient placed at the torch; bigger card text, taller cards */
@media (min-width:901px){
 #hero{transition:--pool 1.2s cubic-bezier(0,0,.5,1)!important}
 #hero .stats li,#hero .stats li+li{min-height:clamp(200px,15.5vw,232px)}
 #hero .stats .st-l{font-size:13px;letter-spacing:.13em;margin-top:16px}
 #hero .stats .st-d{font-size:17px;line-height:1.42;max-width:22ch;min-height:2.84em}
 #hero .stats .st-v{--tb:rgba(255,255,255,.66)}#hero .stats .st-l{--tb:rgba(255,255,255,.58)}#hero .stats .st-d{--tb:rgba(255,255,255,.46)}
 html.st-rev #hero .stats :is(.st-v,.st-l,.st-d){color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:radial-gradient(circle calc(var(--cw,360px) * .42) at var(--tx,-999px) var(--ty,-999px),rgba(255,255,255,calc(.66 + .34 * var(--si,0))) 0%,rgba(255,255,255,calc(.5 + .3 * var(--si,0))) 40%,var(--tb) 100%)}
}
/* big screens (owner, 2026-09-28): the home hero, header and figures keep the 1440x900 proportions on 27-32" / 4K displays.
   --k steps with the window (width AND height); every size below is its 1440px value x --k. Phones and laptops are untouched. */
@media (min-width:1600px) and (min-height:990px){:root{--k:1.1}}
@media (min-width:1720px) and (min-height:1060px){:root{--k:1.2}}
@media (min-width:2000px) and (min-height:1200px){:root{--k:1.35}}
@media (min-width:2300px) and (min-height:1380px){:root{--k:1.55}}
@media (min-width:2700px) and (min-height:1600px){:root{--k:1.8}}
@media (min-width:3300px) and (min-height:1950px){:root{--k:2.2}}
@media (min-width:1600px) and (min-height:990px){
 :root{--wrap:calc(1120px * var(--k))}
 html .hdr-in{height:calc(60px * var(--k));gap:calc(28px * var(--k))}
 html .brand .bd-logo{height:calc(19px * var(--k))}
 html .site-hdr nav a{font-size:calc(13px * var(--k))}
 html .lang-sw a{font-size:calc(12px * var(--k))}
 html .hdr-cta{font-size:calc(13px * var(--k));padding:0 calc(14px * var(--k));height:calc(44px * var(--k))}
 html #hero{grid-template-columns:minmax(0,calc(600px * var(--k))) minmax(0,1fr)!important;column-gap:calc(40px * var(--k))!important}
 html #hero.rot-on .hero-rot,html #hero.rot-on .hero-h{font-size:calc(72px * var(--k))!important}
 html #hero>.hero-deck{font-size:calc(20px * var(--k))!important;line-height:1.5!important;margin-top:calc(32px * var(--k))!important}
 html #hero>.hero-cta{gap:calc(12px * var(--k))!important;margin-top:calc(36px * var(--k))!important}
 html #hero>.hero-cta a{font-size:calc(15px * var(--k))!important;padding:0 calc(22px * var(--k))!important;height:calc(48px * var(--k))!important}
 html #hero .stats ul{gap:calc(14px * var(--k))!important}
 html #hero .stats li,html #hero .stats li+li{padding:calc(22px * var(--k)) calc(24px * var(--k)) calc(20px * var(--k))!important;min-height:calc(223px * var(--k))!important;border-radius:calc(14px * var(--k))}
 html #hero .stats .st-v{font-size:calc(48px * var(--k))!important;padding-bottom:calc(12px * var(--k))}
 html #hero .stats .st-l{font-size:calc(13px * var(--k))!important;margin-top:calc(16px * var(--k))}
 html #hero .stats .st-d{font-size:calc(17px * var(--k))!important}
 html #hero .stats .st-aw.st-aw2{padding:calc(20px * var(--k)) calc(24px * var(--k))!important;gap:calc(18px * var(--k)) calc(32px * var(--k))!important;margin-top:calc(14px * var(--k))!important;border-radius:calc(14px * var(--k))}
 html #hero .stats .st-aw2 b{font-size:calc(14px * var(--k))!important}
 html #hero .stats .st-aw2>span{font-size:calc(13px * var(--k))!important}
}
/* light layer v2 (Chrome smoothness): the hero light is its own fixed element (.hero-light, made by flagship.js),
   so per-frame light changes never restyle the whole hero; #hero::before is retired */
#hero::before{content:none!important}
@property --top{syntax:"<number>";inherits:true;initial-value:1}
.hero-light{position:fixed;inset:0;height:100lvh;z-index:1;pointer-events:none;--pool:0;transition:--pool 1.2s cubic-bezier(0,0,.5,1);contain:strict}
.hero-light.s2{--pool:1}
@media (min-width:901px){
 .hero-light{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,16%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,24%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(circle calc(var(--cw,360px) * .3) at var(--sx,75%) var(--sy,70%),rgba(255,255,255,calc(.2 * var(--si,0))) 0%,rgba(255,255,255,calc(.07 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .62) 64px at var(--sx,75%) calc(var(--sy,70%) + var(--ch,180px) * .38),rgba(255,255,255,calc(.15 * var(--si,0))) 0%,rgba(255,255,255,calc(.055 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .7) calc(var(--ch,180px) * .7) at var(--sx,75%) calc(var(--sy,70%) + var(--ch,180px) * .08),rgba(255,255,255,calc(.08 * var(--si,0))) 0%,rgba(255,255,255,calc(.03 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  linear-gradient(90deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)}
 [dir="rtl"] .hero-light{background:
  radial-gradient(circle var(--lr,256px) at var(--lx,84%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(var(--grx,320px) var(--gry,260px) at var(--gx,76%) var(--gy,22%),rgba(255,255,255,calc(.05 * var(--top,1))) 0%,rgba(255,255,255,calc(.02 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
  radial-gradient(circle calc(var(--cw,360px) * .3) at var(--sx,25%) var(--sy,70%),rgba(255,255,255,calc(.2 * var(--si,0))) 0%,rgba(255,255,255,calc(.07 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .62) 64px at var(--sx,25%) calc(var(--sy,70%) + var(--ch,180px) * .38),rgba(255,255,255,calc(.15 * var(--si,0))) 0%,rgba(255,255,255,calc(.055 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  radial-gradient(calc(var(--cw,360px) * .7) calc(var(--ch,180px) * .7) at var(--sx,25%) calc(var(--sy,70%) + var(--ch,180px) * .08),rgba(255,255,255,calc(.08 * var(--si,0))) 0%,rgba(255,255,255,calc(.03 * var(--si,0))) 55%,rgba(255,255,255,0) 100%),
  linear-gradient(270deg,rgba(0,0,0,calc(.22 - .12 * var(--pool))) 0%,rgba(0,0,0,calc(.1 - .06 * var(--pool))) 40%,rgba(0,0,0,0) 62%)}
 #hero .stats ul,#hero .stats li{will-change:transform}
}
@media (max-width:900px){.hero-light{background:
 radial-gradient(circle var(--lr,220px) at var(--lx,20%) var(--ly,8%),rgba(255,255,255,calc(.075 * var(--top,1))) 0%,rgba(255,255,255,calc(.03 * var(--top,1))) 45%,rgba(255,255,255,0) 100%),
 radial-gradient(calc(70% + 20% * var(--pool)) calc(14% + 18% * var(--pool)) at 50% 100%,rgba(255,255,255,calc(.073 * var(--pool))) 0%,rgba(255,255,255,0) 100%),
 linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 60%)}}
#hero>.hero-light{position:fixed!important;inset:0 auto auto 0!important;width:100vw!important;height:100vh!important;height:100lvh!important;margin:0!important;max-width:none!important;z-index:1!important;grid-area:auto!important}
/* auto-played sequence (owner 2026-09-30): no pinning; 11 rises in from 48px below when the sequence starts */
@media (min-width:901px){#hero .st-run>.stats{position:static!important}#hero .stats li:nth-child(3){translate:0 48px}#hero .stats li:nth-child(3).out{translate:0 0}}
/* hero cards v8 (owner 2026-09-30): no scroll sequence. Cards come in from the right as the band enters (11 → 30+ → 25+ → awards);
   a soft light follows the mouse only on the cards. No backdrop blur (it was re-computed every scroll frame over the fixed grain). */
#hero .stats li,#hero .stats li+li,#hero .stats .st-aw{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:rgba(20,20,22,.5)!important;filter:none!important}
#hero .stats li:nth-child(n){translate:none!important;will-change:auto}
#hero .stats :is(.st-v,.st-l,.st-d){color:inherit;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important}
#hero .stats .st-v,#hero .stats .st-l{color:var(--ink-d)!important}#hero .stats .st-d{color:var(--mute-d)!important}
html.st-in #hero .stats li,html.st-in #hero .stats .st-aw{opacity:0;transition:opacity .8s cubic-bezier(0,0,.5,1),transform .8s cubic-bezier(0,0,.5,1),box-shadow .4s}
@media (min-width:901px){html.st-in #hero .stats li{transform:translateX(64px)!important}
 html.st-in #hero .stats.in li:nth-child(3){transition-delay:0s}html.st-in #hero .stats.in li:nth-child(2){transition-delay:.15s}html.st-in #hero .stats.in li:nth-child(1){transition-delay:.3s}html.st-in #hero .stats.in .st-aw{transition-delay:.5s}}
@media (max-width:900px){html.st-in #hero .stats li{transform:translateY(28px)!important}html.st-in #hero .stats.in li:nth-child(2){transition-delay:.12s}html.st-in #hero .stats.in li:nth-child(3){transition-delay:.24s}html.st-in #hero .stats.in .st-aw{transition-delay:.36s}}
html.st-in #hero .stats .st-aw{transform:translateY(28px)!important}
html.st-in #hero .stats.in li,html.st-in #hero .stats.in .st-aw{opacity:1!important;transform:none!important}
/* mouse light on the cards only */
@media (hover:hover){#hero .stats li.hot{background-image:radial-gradient(circle 190px at var(--mx,-999px) var(--my,-999px),rgba(255,255,255,.13) 0%,rgba(255,255,255,.045) 45%,rgba(255,255,255,0) 100%),linear-gradient(150deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 38%,rgba(255,255,255,.02) 100%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.26),0 24px 48px -16px rgba(0,0,0,.6)}}
@media (prefers-reduced-motion:reduce){html.st-in #hero .stats li,html.st-in #hero .stats .st-aw{opacity:1!important;transform:none!important;transition:none!important}}
/* reveal v2 (owner): earlier and smoother, clearly one after another */
html.st-in #hero .stats li,html.st-in #hero .stats .st-aw{transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),box-shadow .4s!important}
@media (min-width:901px){html.st-in #hero .stats li{transform:translateX(80px)!important}
 html.st-in #hero .stats.in li:nth-child(3){transition-delay:0s!important}html.st-in #hero .stats.in li:nth-child(2){transition-delay:.22s!important}html.st-in #hero .stats.in li:nth-child(1){transition-delay:.44s!important}html.st-in #hero .stats.in .st-aw{transition-delay:.7s!important}}
/* owner 2026-09-30: no gradient on the hero heading (reads as AI slop); second line is a flat, muted grey */
#hero .hero-rot .r2,#hero .hero-h h1 .chrome,#hero .hero-h .chrome{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#a3a5aa!important;-webkit-text-fill-color:#a3a5aa!important}
/* GPU (owner 2026-09-30): the reel blends only inside its own frame, over a static grain tile that matches the hero field,
   so each video frame no longer re-composites the whole hero; no extra grain layer over the video */
#hero>.hero-vid{mix-blend-mode:normal!important;isolation:isolate;background:#000 url(/assets/grain-bg.png) 0 0/128px 128px}
#hero>.hero-vid::after{content:none!important}
#hero>.hero-vid video{mix-blend-mode:lighten}
html #hero>.hero-vid{background:#000 url(/assets/grain-bg.png) 0 0/128px 128px!important}
/* cards "bach, bach, bach" (owner 2026-09-30): one lands and stops, short pause, the next; a brief light from below as each lands.
   Only transform + opacity animate (compositor-only, near-zero GPU): no blur, no filter, no gradient repaints. */
html.st-in #hero .stats li,html.st-in #hero .stats .st-aw{transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)!important}
@media (min-width:901px){html.st-in #hero .stats li{transform:translateX(90px)!important}
 html.st-in #hero .stats.in li:nth-child(3){transition-delay:0s!important}html.st-in #hero .stats.in li:nth-child(2){transition-delay:.7s!important}html.st-in #hero .stats.in li:nth-child(1){transition-delay:1.4s!important}html.st-in #hero .stats.in .st-aw{transition-delay:2.1s!important}}
@media (max-width:900px){html.st-in #hero .stats.in li:nth-child(2){transition-delay:.35s!important}html.st-in #hero .stats.in li:nth-child(3){transition-delay:.7s!important}html.st-in #hero .stats.in .st-aw{transition-delay:1.05s!important}}
#hero .stats li{position:relative}
#hero .stats li::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(75% 65% at 50% 105%,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 75%);opacity:0}
html.st-in #hero .stats.in li::after{animation:stGlow 1.5s cubic-bezier(.2,.8,.2,1) both}
@media (min-width:901px){html.st-in #hero .stats.in li:nth-child(3)::after{animation-delay:.15s}html.st-in #hero .stats.in li:nth-child(2)::after{animation-delay:.85s}html.st-in #hero .stats.in li:nth-child(1)::after{animation-delay:1.55s}}
@media (max-width:900px){html.st-in #hero .stats.in li:nth-child(2)::after{animation-delay:.35s}html.st-in #hero .stats.in li:nth-child(3)::after{animation-delay:.7s}}
@keyframes stGlow{0%{opacity:0}30%{opacity:1}100%{opacity:.18}}
#hero .stats li>div{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){#hero .stats li::after{animation:none!important;opacity:.18}}
/* owner 2026-09-30: no pointer-driven light anywhere */
#hero .stats li.hot{background-image:linear-gradient(150deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 38%,rgba(255,255,255,.02) 100%)!important}
/* owner 2026-09-30 — information site, readability first: no WebGL, no fixed layers, no scroll-driven or entry animations.
   The grain is one static image tile (same as in the reel frame); the header is solid (no backdrop blur while scrolling). */
section:is(#hero,#founder,#process,#channel,#systems,#data,#mfg,#advisory){background:#000 url(/assets/grain-bg.png) 0 0/128px 128px!important}
section>.mesh-bg{display:none!important}
#hero{clip-path:none!important;overflow:hidden!important}
#hero>.hero-light{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;contain:none}
.site-hdr,.site-hdr.at-top:not(.on-light){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.site-hdr:not(.at-top){background:rgba(0,0,0,.94)!important}
#hero .stats li,#hero .stats .st-aw{opacity:1!important;transform:none!important;transition:none!important}
#hero .stats li::after{content:none!important}
#hero .stats ul,#hero .stats li{will-change:auto!important}
/* /apps — macOS applications (draft 2026-09-30) */
#apps{padding-top:0}
.app-grid{display:grid;gap:20px;max-width:1120px;margin:0 auto}
@media (min-width:900px){.app-grid{grid-template-columns:1fr 1fr}}
.app-card{display:flex;flex-direction:column;padding:32px 28px}
.app-name{display:flex;align-items:center;gap:14px;font:500 clamp(28px,3.2vw,36px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink-d);margin:0 0 6px}
.app-name img{flex:none;width:40px;height:40px}
.app-sub{font:500 17px/1.4 var(--sans);color:var(--ink-d);margin:0 0 14px}
.app-card>p:not([class]){color:var(--mute-d);font-size:15px;line-height:1.55;margin:0 0 10px}
.app-card a{color:var(--ink-d);text-decoration:underline;text-underline-offset:2px}
.app-mh{margin:auto 0 0;padding-top:22px;font:500 12px/1.4 var(--mono);color:var(--mute-d)}
.app-m{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 0}
.app-m div{background:var(--s2);box-shadow:inset 0 0 0 1px var(--ring-d);border-radius:10px;padding:12px}
.app-m dt{font-size:12px;line-height:1.4;color:var(--mute-d)}
.app-m dd{margin:4px 0 0;font:500 15px/1.35 var(--mono);color:var(--ink-d)}
@media (max-width:520px){.app-m{grid-template-columns:1fr}}
.app-rig{max-width:1120px;margin:16px auto 0;font-size:13px;color:var(--mute-d)}
#ld-faq .app-av{max-width:680px;margin:20px auto 0 max(0px,calc((100% - var(--wrap))/2))!important;font-size:17px;line-height:1.55;color:var(--mute-d)}
#ld-faq .app-langs{font-size:14px;margin-top:14px}
@media (min-width:900px){.app-card:last-child:nth-child(odd){grid-column:1/-1}.app-card:last-child:nth-child(odd)>*{max-width:680px}}
.app-pl{margin:0 0 14px;font:500 12px/1.5 var(--mono);color:var(--mute-d)}
.app-pl strong{color:var(--ink-d);font-weight:500}
.app-fig{margin:28px auto 0;max-width:1120px}
.af-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:900px){.af-row{grid-template-columns:repeat(4,1fr)}}
.af-row li{display:flex;flex-direction:column;gap:8px;padding:22px 20px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d)}
.af-v{font:500 clamp(36px,4.2vw,48px)/1 var(--sans);letter-spacing:-.02em;color:var(--ink-d);white-space:nowrap}
.af-l{font-size:14px;line-height:1.4;color:var(--mute-d)}
.app-fig figcaption{font-size:13px;line-height:1.5;color:var(--mute-d)}
#apps-why{padding-top:0}
.app-prin{display:grid;gap:12px;max-width:1120px;margin-top:28px}
@media (min-width:700px){.app-prin{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.app-prin{grid-template-columns:repeat(3,1fr)}}
.app-prin div{padding:24px 22px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d)}
.app-prin h3{font:600 17px/1.3 var(--sans);color:var(--ink-d);margin:0 0 8px}
.app-prin p{font-size:15px;line-height:1.55;color:var(--mute-d);margin:0}
.af-cmp{margin:24px 0 10px;padding:20px 22px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d)}
.af-h{font:500 clamp(18px,1.6vw,22px)/1.3 var(--sans);color:var(--ink-d);margin:0 0 18px}
.af-r{display:grid;grid-template-columns:64px 1fr 72px;align-items:center;gap:12px;margin-top:10px}
.af-n{font:500 14px/1.3 var(--sans);color:var(--ink-d)}
.af-t{position:relative;height:24px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.af-t i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:6px;background:var(--mute-d)}
.af-t i.af-w1{width:12.7%;background:var(--ink-d)}
.af-t i.af-w2{width:80%}
.af-x{font:500 14px/1.3 var(--mono);color:var(--ink-d);text-align:end;white-space:nowrap}
/* the full top bar needs up to 1196px (ru/uk with Applications); below that use the menu button so the logo never collapses */
@media (max-width:1220px){.top-nav{display:none}.nav-toggle{display:block}.lang-sw{margin-inline-start:auto}}
.brand{flex-shrink:0}
@media (max-width:1300px){html:is(:lang(ru),:lang(uk)) .top-nav{display:none}html:is(:lang(ru),:lang(uk)) .nav-toggle{display:block}html:is(:lang(ru),:lang(uk)) .lang-sw{margin-inline-start:auto}}
@media (max-width:1400px){html:lang(ru) .top-nav{display:none}html:lang(ru) .nav-toggle{display:block}html:lang(ru) .lang-sw{margin-inline-start:auto}}
#apps .app-grid{margin-top:28px}
.app-card{scroll-margin-top:96px}
.app-tiles{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:12px;max-width:1120px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.at{display:flex;flex-direction:column;height:100%;padding:20px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d);color:inherit;text-decoration:none;transition:box-shadow .18s,transform .18s}
.at:hover{box-shadow:inset 0 0 0 1px var(--mute-d);transform:translateY(-2px)}
.at:focus-visible{outline:2px solid var(--ink-d);outline-offset:2px}
.at img{width:56px;height:56px;margin-bottom:16px}
.at-n{font:600 19px/1.25 var(--sans);color:var(--ink-d)}
.at-s{margin-top:4px;font-size:14px;line-height:1.45;color:var(--mute-d)}
.at-p{margin-top:auto;padding-top:14px;font:500 12px/1.5 var(--mono);color:var(--mute-d)}
.at-p strong{color:var(--ink-d);font-weight:500}
@media (prefers-reduced-motion:reduce){.at{transition:none}.at:hover{transform:none}}
/* apps page, critic round 1 */
#ld-hero:has(.app-tiles){padding-top:120px;padding-bottom:96px;background:#000 url(/assets/grain-bg.png) 0 0/128px 128px}
#ld-hero:has(.app-tiles) h1.h-dark{font-size:clamp(44px,5vw,72px)!important;line-height:1!important;max-width:none!important}
#ld-hero:has(.app-tiles) .lead-d{margin-top:16px}
.app-tiles{margin-top:32px}
@media (min-width:900px){.app-tiles{grid-template-columns:repeat(4,1fr)}}
.at{padding:18px 18px 16px}
.at img{width:48px;height:48px;margin-bottom:12px}
.at-info{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--ring-d);font:400 14px/1.5 var(--sans);color:var(--mute-d)}
.at-info p{margin:0}
.at-info strong{color:var(--ink-d);font-weight:500}
@media (max-width:600px){
 .app-tiles{grid-template-columns:1fr;gap:8px;margin-top:28px}
 .at{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:12px 16px;min-height:68px}
 .at img{grid-row:1/span 2;width:44px;height:44px;margin:0}
 .at-n{font-size:17px}
 .at-s{margin-top:2px}
 .app-pl{text-wrap:balance}
}
.af-ax{display:flex;justify-content:space-between;margin:6px 0 0;margin-inline:76px 84px;font:500 12px/1.4 var(--mono);color:var(--mute-d)}
.af-r{grid-template-columns:64px 1fr 72px}
@media (max-width:520px){.af-r{grid-template-columns:52px 1fr 60px}.af-ax{margin-inline:64px 72px}}
#apps-light,#apps-why,#apps,#ld-faq{padding-block:96px}
#apps-light h2.h-dark,#apps-why h2.h-dark,#apps h2.h-dark,#ld-faq h2.h-dark{font-size:clamp(32px,3.6vw,52px)!important}
.app-prin,#apps .app-grid{margin-top:32px}
@media (min-width:900px){
 #apps .app-grid{grid-template-columns:repeat(3,1fr);gap:16px}
 .app-card:has(.app-r){grid-column:1/-1}
 .app-card:not(:has(.app-r)){padding:32px}
 .app-card{display:grid;grid-template-columns:5fr 7fr;column-gap:48px;padding:40px}
 .app-card:not(:has(.app-r)){grid-template-columns:1fr}
 .app-card:last-child:nth-child(odd){grid-column:auto}
 .app-card:last-child:nth-child(odd)>*{max-width:none}
 .app-r ul{margin-top:0}
}
.app-r .app-mh{padding-top:18px}
.hdr-cta{white-space:nowrap;flex:none}
@media (max-width:1300px){html:lang(ja) .top-nav{display:none}html:lang(ja) .nav-toggle{display:block}html:lang(ja) .lang-sw{margin-inline-start:auto}}
html:is(:lang(ja),:lang(zh),:lang(ko)) .h-dark{letter-spacing:0!important;word-break:auto-phrase;line-break:strict}
html:lang(ja) #ld-hero:has(.app-tiles) h1.h-dark{font-size:clamp(34px,4.2vw,60px)!important}
html:lang(de) #ld-hero:has(.app-tiles) h1.h-dark{font-size:clamp(40px,4.6vw,64px)!important}
.nav-toggle{min-width:44px}
.top-nav a[aria-current="page"]{opacity:1}
/* apps page, critic round 2 */
.app-l>p:not([class]){color:var(--mute-d);font-size:15px;line-height:1.55;margin:0 0 10px}
@media (max-width:899px){.app-r{margin-top:16px}}
.app-card.sy-block:hover{transform:none;background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d)}
html:is(:lang(ja),:lang(zh),:lang(ko)) .at-info{word-break:auto-phrase}
@media (max-width:600px){#apps-light,#apps-why,#apps,#ld-faq{padding-block:64px}}
#ld-contact .ch-h2{font-size:clamp(32px,3.6vw,52px)!important}
#ld-hero:has(.app-tiles) h1{text-wrap:balance}
.mb{margin:28px auto 0;max-width:1120px}
.mb figcaption{margin-top:8px;font-size:13px;color:var(--mute-d);text-align:end}
/* apps page, critic round 3 */
.app-pl{text-wrap:balance}
main:has(.app-tiles)>section{background:#000 url(/assets/grain-bg.png) 0 0/128px 128px}
.app-pl span{white-space:nowrap}.app-pl span+span::before{content:"· "}
.mb-strip{direction:ltr;display:flex;justify-content:flex-end;align-items:center;height:48px;padding:0 20px;border-radius:12px;background:#000;box-shadow:inset 0 0 0 1px var(--ring-d);overflow:hidden}
.mb-strip img{flex:none;width:410px;height:28px}
@media (max-width:460px){.mb-strip{padding:0 8px;justify-content:center}.mb-strip img{width:100%;height:auto;max-width:410px}}
.af-row{grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:900px){.af-row{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:440px){.af-v{font-size:28px;white-space:normal}}