/* eyeware.css: the one stylesheet of the clean eyeware.tech pages.
   Tokens on :root, mobile first, no framework. Body-section geometry, type
   sizes and colours were measured on the crawl rendered offline at 1440 and
   390px (scripts/measure-chrome.mjs, 2026-09-29); the header, footer and
   buttons follow the owner's design brief of the same day instead.
   Breakpoints follow the live page: phone up to 569px, tablet 570 to 959,
   desktop from 960 (where the wide SOLUTIONS row replaces the narrow one);
   the wide header starts at 1025. */

/* N4 (QA r3): one font stack, a real sans fallback for every script Lato's subsets do not carry (Cyrillic, Greek, Arabic,
   Hebrew, Devanagari, CJK fall to the system sans, never the browser's serif). Vietnamese takes the system sans for the whole
   text: Lato's latin-ext lacks most of U+1EA0-1EF1, so one word mixed two fonts. */
:root { --sans: Lato, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; }
:root:lang(vi) { --sans: 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; }
/* V12 (QA r4): Czech too: the served Lato latin-ext subset has 30 glyphs and no č ř ě ů ť ň Č Ř Ě, so they fell to Arial inside
   Lato words; Czech text (the pages, and the Čeština entry of the language menu) takes the system sans whole. */
:root:lang(cs), [lang|='cs'] { --sans: 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; }
/* Owner 2026-10-02 (/zh/ "安心試用" thin beside a bold BEAM EYE TRACKER, the same in the header): CJK text takes a system face
   with a real bold on Windows, macOS / iOS and Android, named per language before the generic fallback, so 700 is bold in
   Chinese, Japanese and Korean too. Latin keeps Lato (first). No web font downloaded. */
:root:lang(ja) { --sans: Lato, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP', 'Noto Sans CJK JP', 'Helvetica Neue', Arial, sans-serif; }
:root:lang(zh-TW) { --sans: Lato, 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', 'Helvetica Neue', Arial, sans-serif; }
:root:lang(zh-CN) { --sans: Lato, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Helvetica Neue', Arial, sans-serif; }
:root:lang(ko) { --sans: Lato, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', 'Helvetica Neue', Arial, sans-serif; }
:root {
  --orange: #f47932;
  --orange-dark: #ca5d27;
  --orange-hover: #ca5d27; /* brand dark orange */
  --panel: #f7f7f7;
  --ink: #414042;
  --text: #414042; /* brand grey; the crawl used #777 */
  --link: #414042;
  --link-line: var(--ink); /* W4: the underline of a text link on a light ground (owner 2026-10-01: "1 on the grey underline"); one line to switch the look */
  --accent-ink: #b25222; /* the darker accent: the dark orange under the site's .12 veil (the flat tone of --btn-hover), 5.1:1 on white and for white on it; menu hover / current and the white button's label (owner 2026-10-02) */
  --bg-dim: rgba(0, 0, 0, .13); /* owner 2026-10-02 (fix round 5, item 1): one site-wide dim over every orange and photo section background (heroes, bands, post photos), so white text reads; one value, never a local veil */
  --btn-hover: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)) var(--orange-dark); /* W4: the site's .12 veil on dark orange, #B25222: white 5.11:1 */
  --bar: linear-gradient(var(--bg-dim), var(--bg-dim)), var(--btn-hover); /* V3 (QA r6): the header bar (scrolled, open, solid-top) carries the site-wide dim like the orange bands under it, #9B471E */
  --footer: var(--ink); /* footer ground: the brand ink #414042 (V1; was #2b2b2c, not a brand colour). Ink, not black: the nearer of the two to the soft dark of the redesign */
  --wrap: 1200px;
  --gutter: 36px;
  --header-h: 64px;
}

/* Lato, the three weights the page renders, from the self-hosted files the legacy pages already use. */
/* M8: Lato Light (300) for the step captions the original set light */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin/300/normal.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: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin/400/normal.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: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin/700/normal.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: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin/900/normal.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: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin-ext/400/normal.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: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin-ext/300/normal.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: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin-ext/700/normal.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: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin-ext/900/normal.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; }

/* m9: Lato Italic (the posts' italic lines were a slanted roman): loaded only where italic text renders */
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin/400/italic.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: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin-ext/400/italic.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: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin/700/italic.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: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url(/cf-fonts/s/lato/5.2.7/latin-ext/700/italic.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; }

/* ---- base: scoped to the clean pages (body.clean) and to the chrome on legacy pages ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
html.no-scroll { overflow: hidden; }
body.clean { margin: 0; font: 400 18px/1.75 var(--sans); color: var(--text); background: #fff; }
.site-header, .site-footer { font: 400 18px/1.75 var(--sans); color: var(--text); letter-spacing: normal; text-transform: none; }
:where(body.clean, .site-header, .site-footer) img { max-width: 100%; height: auto; }
:where(body.clean, .site-header, .site-footer) a { color: inherit; }
:where(body.clean, .site-header, .site-footer) :is(h1, h2, h3, p, ul, li) { margin: 0; padding: 0; }
:where(body.clean, .site-header, .site-footer) ul { list-style: none; }
:where(body.clean, .site-header, .site-footer) button { font: inherit; }
:where(body.clean, .site-header, .site-footer) :focus-visible { outline: 3px solid var(--orange-dark); outline-offset: 3px; } /* W4: dark orange, 4.11:1 on white (orange 2.75) */
.ew-icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }
.ew-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.ew-center { text-align: center; }
.ew-lead { font-size: 18px; line-height: 1.75; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Legacy pages: the captured .menu-wrapper stays in the flow as the 64px the live header occupied; the fixed bar sits over it. */
.menu-wrapper { min-height: var(--header-h); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Section headings with the short orange rule beneath (Ultimate VC "line_only" spacer, 1px, width per heading). */
.h-section { position: relative; font: 700 25px/1.4 var(--sans); color: var(--ink); text-align: center; padding-bottom: 21px; margin: 0 0 40px; }
.h-section::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 150px; height: 2px; background: var(--orange); transform: translateX(-50%); }
@media (max-width: 767px) { .h-section { font-size: 22px; } } /* the ruled section title's phone step (QA V11) */

/* ---- buttons ----------------------------------------------------------- */
/* ---- Buttons: the only button styles on the site (owner 2026-09-30: "make buttons canonical...
   keep a minimum amount of button styles"). One .ew-btn, three variants, three sizes.
   primary  .ew-btn            orange, white text      on light backgrounds
   light    .ew-btn-light      white, orange text      on orange or dark backgrounds
   outline  .ew-btn-outline    transparent, currentColor border   secondary action, any background
   sizes    .ew-btn-sm / default / .ew-btn-lg
   A primary button inside a dark or orange band becomes the light variant by itself, so no page
   has to choose. Nothing else styles a button's colour, font or shape. ---- */
.ew-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 8px; border: 1.5px solid transparent; background: var(--orange-dark); color: #fff; font: 700 15px/1.25 var(--sans); letter-spacing: .02em; text-transform: none; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.ew-btn:hover { background: var(--btn-hover); color: #fff; }
.ew-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--orange-dark); }
.ew-btn-light:focus-visible, :is(.hero, .integrate, .band, .site-header, .pg-dark, .cookie-bar, .site-footer) .ew-btn:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px #fff; } /* m-I (QA r3): on orange or ink the ring is ink inside, white outside (the white-then-orange ring vanished on the orange bar) */
.ew-btn-light, :is(.hero, .integrate, .band, .site-header) .ew-btn:not(.ew-btn-outline) { background: #fff; color: var(--accent-ink); } /* owner 2026-10-02: the accent label (the original's orange, darkened to 5.1:1), not the ink */
.ew-btn-light:is(:hover, :focus-visible), :is(.hero, .integrate, .band, .site-header) .ew-btn:not(.ew-btn-outline):is(:hover, :focus-visible) { background: #fef3ec; border-color: var(--accent-ink); color: var(--accent-ink); } /* owner 2026-10-02 ("white buttons are not reacting"): the white button reacts in the accent family. V2 (QA r6): every white button sits on an orange, photo, ink or bar ground, where an accent fill (1.0-1.5:1 against the dimmed grounds, 1:1 on the bar) made the button vanish; so the body stays light (a light accent tint, 5.8:1 against the dimmed orange) with a 2 px accent edge, and the label keeps the accent (4.67:1 on the tint). One rule for all of them; a white button on a light ground would take the accent fill, none exists */
.ew-btn-light:hover, :is(.hero, .integrate, .band, .site-header) .ew-btn:not(.ew-btn-outline):hover { box-shadow: inset 0 0 0 .5px var(--accent-ink); } /* the 1.5 px border plus .5 px: the 2 px edge (focus keeps its ring) */
@media (max-width: 1024px) { .site-header a.hdr-cta.ew-btn { background: var(--orange-dark); color: #fff; } .site-header a.hdr-cta.ew-btn:hover { background: var(--btn-hover); color: #fff; } } /* the drawer is white */
.ew-btn-outline { background: transparent; color: inherit; border-color: currentColor; }
.ew-btn-outline:hover { background: var(--btn-hover); border-color: var(--orange-dark); color: #fff; }
.ew-btn-sm { min-height: 38px; padding: 8px 18px; font-size: 14px; }
.ew-btn-lg { min-height: 56px; padding: 16px 32px; font-size: 16px; }
/* W4 (owner 2026-10-01: "i want 100 everywhere. fix it. option a"): the primary button is dark orange with a 19 px bold
   label, large text by WCAG, so white on #CA5D27 (4.11:1) passes; heights, padding, radius and capitals stay. Every
   size rule below sets its own font-size, so the primary label size is one rule that outranks them all; the variants
   that turn light by their background (hero, band, INTEGRATE, header, a dark cell on a light band) keep their size. */
.ew-btn.ew-btn:not(.ew-btn-light):not(.ew-btn-outline):not(:is(.hero, .integrate, .band, .site-header, .pg-light .pg-dark) .ew-btn) { padding-block: 8px; font-size: 19px; } /* 8 px padding keeps the 48 and 56 px heights at 19 px */
@media (max-width: 1024px) { .site-header .hdr-cta.hdr-cta.ew-btn { padding-block: 8px; font-size: 19px; } } /* the drawer's CTA is primary */

/* Right-to-left (Arabic, Hebrew): the header uses logical properties throughout, so the bar, panels and icons mirror (V15). */
/* The capitals' tracking is for Latin capitals; scripts without case read spaced-out with it (Hebrew, Arabic, CJK, Devanagari). */
:is(:lang(ar), :lang(he), :lang(ja), :lang(ko), :lang(zh), :lang(hi)) :is(.hdr-item, .ftr-h) { letter-spacing: 0; }
/* ---- header: transparent over the hero, brand dark orange once scrolled, panels of cards ---- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); background: transparent; transition: background-color .25s, transform .28s ease; will-change: transform; }
.site-header.is-stuck, .site-header.is-open { background: var(--bar); } /* W4: dark orange under the .12 veil; V3 (QA r6): plus the site-wide dim, #9B471E, white nav 6.3:1 */
.site-header.is-hidden { transform: translateY(-100%); }
/* Captured pages: the theme's #masthead:not(.menu-absolute) rule (id, 1,1,0) made the header relative, so it scrolled away. */
body header#masthead.site-header { position: fixed !important; top: 0 !important; left: 0; right: 0; width: 100%; height: var(--header-h); margin: 0; }
.site-header.is-open { transform: none; will-change: auto; } /* will-change: transform makes the bar the containing block of the fixed drawer, which then shrank to 40px */
.hdr { display: flex; align-items: center; height: var(--header-h); gap: 16px; }
.hdr-logo { display: flex; align-items: center; min-height: 44px; flex: none; border-radius: 4px; } /* a 44 px tap target on phones (M1) */
/* Focus on the bar (orange, dark orange or a photo): a white ring, the orange one vanished on the orange hero (M1). */
.site-header :is(.hdr-logo, .hdr-toggle):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hdr-logo img { display: block; width: 160px; height: 36px; }
.hdr-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-start: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.hdr-toggle .ew-icon { width: 26px; height: 26px; }
.hdr-toggle:hover { background: transparent; } /* V5 (QA r6): no pill on the bar */
.hdr-toggle-close, .is-open .hdr-toggle-open { display: none; }
.is-open .hdr-toggle-close { display: inline-block; }
/* The globe next to the hamburger on narrow screens (owner 2026-10-02): the same 44 px target, white on the bar; it
   takes the auto margin so the pair sits together at the end of the bar. */
.hdr-lang-mobile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-start: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.hdr-lang-mobile .ew-icon { width: 22px; height: 22px; }
.hdr-lang-mobile + .hdr-toggle { margin-inline-start: 4px; }
.site-header .hdr-lang-mobile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hdr-nav { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; overflow-y: auto; background: #fff; padding: 8px 20px 32px; }
.is-open .hdr-nav { display: block; }
.hdr-menu { display: flex; flex-direction: column; }
.hdr-group { position: relative; }
.hdr-item { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 52px; padding: 12px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: 700 15px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: start; cursor: pointer; }
.hdr-item:hover, .hdr-item:focus-visible, .hdr-open > .hdr-item { color: var(--accent-ink); outline: none; } /* owner 2026-10-02: one menu highlight, the accent text colour, no ground (the focus ring is the m-I rule) */
.hdr-globe { width: 20px; height: 20px; }
.hdr-item-globe { gap: 10px; }
/* The bare globe belongs to the wide bar only; the drawer (to 1024) keeps the language name (V3). */
@media (min-width: 1025px) { .hdr-item-globe { width: 44px; justify-content: center; padding-inline: 0; } .hdr-item-globe .hdr-lang-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.hdr-panel { display: none; padding: 0 0 12px; padding-inline-start: 10px; }
.hdr-open > .hdr-panel { display: block; }
.hdr-card { display: block; min-height: 44px; padding: 12px 10px; color: var(--ink); text-decoration: none; } /* 44 px tap targets in the drawer (V3) */
.hdr-card-title { display: block; font: 600 15px/1.35 var(--sans); }
.hdr-card-desc { display: block; margin-top: 2px; font: 400 14px/1.4 var(--sans); color: var(--text); }
.hdr-card:hover .hdr-card-title, .hdr-card:focus-visible .hdr-card-title, .hdr-card[aria-current] .hdr-card-title { color: var(--accent-ink); } /* owner 2026-10-02: "remove the underline in the menu and replace it with the accent color" (#B25222, 5.1:1; orange 2.75, dark orange 4.1) */ /* W4: ink, underlined (orange 15 px on white was 2.75:1); the icon accent stays the orange */
.hdr-card:focus-visible { outline: none; }
/* Menu icons (Solutions and Company, one style; owner 2026-09-30: "make the icon style match from company to solutions"):
   46px, brand grey outline, the accent part turns orange on hover like the title ("only get highlighted with the accent color on hover"). */
.hdr-card-has-icon { position: relative; }
.site-header .hdr-panel .hdr-card.hdr-card-has-icon { padding-inline-start: 86px; }
.hdr-card-icon { position: absolute; inset-inline-start: 20px; top: 16px; width: 46px; height: 46px; color: var(--ink); }
.hdr-card-icon .ew-icon-accent { transition: stroke .15s; }
.hdr-card:is(:hover, :focus-visible) .hdr-card-icon .ew-icon-accent, .hdr-card[aria-current] .hdr-card-icon .ew-icon-accent { stroke: var(--orange); }
@media (max-width: 1024px) { .site-header .hdr-panel .hdr-card.hdr-card-has-icon { padding-inline-start: 56px; } .hdr-card-icon { inset-inline-start: 12px; top: 10px; width: 30px; height: 30px; } }
.hdr-card-icon path { stroke-width: 1.05; } /* 24-unit icons at 46px: the Company icons' 1.4 on 32 units */

/* Products panel as app-store entries (owner 2026-09-30, second pass): at rest the product icon
   alone, no tile, no frame (Beam's favicon in its purple, the Eyeware favicon in orange, the Eyeware
   favicon for AMD in the brand grey because white would vanish on the white panel). On hover the
   entry gets a soft tint of the product's colour; every icon sits on a white tile with a shadow
   under it. */
.site-header .hdr-panel .hdr-card.hdr-app { position: relative; padding-inline-start: 86px; min-height: 84px; transition: background-color .2s, box-shadow .2s; }
.hdr-app-tile { position: absolute; inset-inline-start: 16px; top: 16px; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: transparent; border: 1px solid transparent; transition: background-color .2s, box-shadow .2s, border-color .2s, transform .2s; }
.hdr-app-tile img { width: 40px; height: 40px; display: block; object-fit: contain; }
.hdr-app-glyph { display: block; width: 40px; height: 40px; background-color: #c4c4c6; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; transition: background-color .2s, opacity .2s; }
.hdr-app-beam:hover .hdr-app-tile, .hdr-app-beam:focus-visible .hdr-app-tile, .hdr-app-gazesense:hover .hdr-app-tile, .hdr-app-gazesense:focus-visible .hdr-app-tile, .hdr-app-amd:hover .hdr-app-tile, .hdr-app-amd:focus-visible .hdr-app-tile { background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08); transform: translateY(-1px); }
/* AMD icon: the red Eyeware icon at rest and on hover, no grey state and no frame; hover as the other products (owner 2026-09-30:
   "don't switch from the grey to the colored style", "don't give the icon a frame in red when it's highlighted"). */
.hdr-app-amd .hdr-app-glyph { display: none; }

/* Product titles take the one menu highlight, the accent text colour, as every panel (owner 2026-10-02: "make it consistent across
   the menu"; replaces the 2026-09-30 ink title and the tinted grounds); the icon tile still lifts. */
@media (max-width: 1024px) { .site-header .hdr-panel .hdr-card.hdr-app { padding-inline-start: 74px; min-height: 70px; } .hdr-app-tile { inset-inline-start: 12px; top: 10px; width: 48px; height: 48px; border-radius: 12px; } .hdr-app-tile img { width: 40px; height: 40px; } .hdr-app-glyph { width: 40px; height: 40px; } } /* every product icon 40 px, as on the wide panel (owner 2026-09-30) */

.hdr-langs a { display: block; min-height: 44px; padding: 11px 10px; color: var(--ink); font: 400 15px/1.4 Lato, 'Segoe UI', 'Helvetica Neue', 'Hiragino Sans', 'Microsoft YaHei', 'Noto Sans', Arial, sans-serif; text-decoration: none; }
.hdr-langs a[lang|='cs'] { font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; } /* V12 (QA r4): "Čeština" whole in one face (Lato's subset has no Č) */
.hdr-langs a:hover, .hdr-langs a:focus-visible, .hdr-langs a[aria-current] { color: var(--accent-ink); outline: none; } /* owner 2026-10-02: the menu's one highlight (accent text; no underline, no ground, no bold); the current language is marked by the colour and aria-current */
.hdr-cta-item { padding-top: 20px; }
.hdr-cta { text-transform: uppercase; } /* owner 2026-09-29: "make Get Access all caps", at every width */
@media (max-width: 1024px) {
  /* The drawer's CTA is the standard 48 px button (a 44 px tap target at least). */
  .site-header .hdr-cta.ew-btn-sm { min-height: 48px; padding: 12px 24px; font-size: 15px; }
  /* The 21 languages in columns of native names, not one 924 px column (V3). */
  .hdr-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
}
@media (min-width: 570px) and (max-width: 1024px) { .hdr-langs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 1025px) {
  .hdr { gap: 24px; }
  .hdr-logo img { width: 200px; height: 45px; }
  .hdr-toggle, .hdr-lang-mobile { display: none; }
  .hdr-nav { display: block; position: static; margin-inline-start: auto; overflow: visible; background: transparent; padding: 0; }
  .hdr-menu { flex-direction: row; align-items: center; gap: 22px; }
  .hdr-item { width: auto; min-height: 40px; padding: 10px 12px; color: rgba(255, 255, 255, .85); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
  .hdr-item:hover, .hdr-item:focus-visible, .hdr-open > .hdr-item { color: #fff; background: transparent; } /* V5 (QA r6, owner 2026-10-02: "remove the underline in the menu and replace it with the accent color"; the accent does not read on the orange bar): the bar's items show hover and open by the text alone, 85 % white at rest, full white hovered or open; no line, no pill, no ground; keyboard focus keeps its ring */
  /* A transparent bridge from the item to the panel, so the pointer can cross the gap. */
  /* The bridge across the 12px gap belongs to the open panel, so only the visible panel catches the pointer
     (owner 2026-09-30: moving down from Products switched to Solutions; the full-width bridges overlapped). */
  .hdr-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .hdr-panel-wide { min-width: 400px; }
  /* Products and Solutions open as wide panels under the whole bar (owner 2026-09-30: "products
     full width with the 3 entries", "solutions a 3x3 block", "make it more cozy"). */
  .hdr { position: relative; }
  .hdr-group:has(> .hdr-panel-solutions) { position: static; }
  .hdr-panel.hdr-panel-solutions { top: 100%; left: 0; right: 0; min-width: 0; padding: 24px; border-radius: 0 0 16px 16px; }
  /* Products: one vertical column under its menu item (owner 2026-09-30: "return to one single column for products menu"). */
  .hdr-panel.hdr-panel-products { inset-inline-start: -12px; inset-inline-end: auto; width: 460px; min-width: 0; padding: 12px; border-radius: 0 0 16px 16px; }
  .hdr-panel-solutions .hdr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hdr-panel-products .hdr-cards { display: flex; flex-direction: column; gap: 4px; }
  .hdr-panel-products .hdr-card, .hdr-panel-solutions .hdr-card { height: 100%; padding: 18px 20px; border-radius: 10px; white-space: normal; transition: background-color .15s; }
  .hdr-panel-products .hdr-card-title, .hdr-panel-solutions .hdr-card-title { font-size: 16px; }
  .hdr-panel-products .hdr-card-desc, .hdr-panel-solutions .hdr-card-desc { margin-top: 6px; line-height: 1.5; text-wrap: balance; } /* no one-word second lines (V2) */
  .hdr-panel { display: block; position: absolute; top: calc(100% + 12px); inset-inline-start: 0; min-width: 260px; padding: 12px; border-radius: 0 0 14px 14px; background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .14); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility .18s; }
  .hdr-lang .hdr-panel { inset-inline-start: auto; inset-inline-end: 0; min-width: 0; width: max-content; padding: 14px 8px; }
  .hdr-langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; } /* owner 2026-10-02: "give the language menu the same width for each column"; each column takes the widest name's width */
  /* One panel at a time: only the group eyeware.js marks open shows its panel (keyboard focus no longer opens a second one, V2). */
  .hdr-open > .hdr-panel { opacity: 1; visibility: visible; transform: none; }
  .hdr-card { padding: 12px 14px; white-space: nowrap; }
  .hdr-langs a { min-height: 40px; padding: 9px 14px; white-space: nowrap; }
  .hdr-cta-item { padding: 0; padding-inline-start: 10px; }
  .hdr-cta { width: auto; }
  .site-header .hdr-cta.ew-btn-sm:not(:lang(ar)) { font-size: 15px; } /* m4 (QA r5): no label under 15 px (was the small size's 14); the bar keeps 47+ px between the logo and the menu in every language */
}

/* ---- Company panel in 3DiVi's style (owner 2026-09-30, their Company menu as the reference): the company in one
   grey paragraph on the left, the entries as a two-column grid of two-tone line icons (ink outline, orange
   accents) beside a bold title. Narrow screens: the drawer shows the entries with their icons, no paragraph. ---- */
.hdr-intro { display: none; }
.hdr-panel-company .hdr-card-icon path { stroke-width: 1.4; }
@media (min-width: 1025px) {
  .hdr-group:has(> .hdr-panel-company) { position: static; }
  .hdr-panel.hdr-panel-company { top: 100%; left: 0; right: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 44px 48px 40px; border-radius: 0 0 16px 16px; }
  .hdr-intro { display: block; max-width: 400px; margin: 6px 0 0; font: 400 17px/1.8 var(--sans); color: var(--ink); opacity: .75; } /* the brand grey, lighter: 4.9:1 on white */
  .hdr-panel-company .hdr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; align-content: start; }
  .site-header .hdr-panel-company .hdr-card.hdr-card-has-icon { display: flex; align-items: center; gap: 20px; min-height: 84px; padding: 18px 20px; border-radius: 10px; white-space: normal; transition: background-color .15s; }
  .hdr-panel-company .hdr-card-icon { position: static; flex: none; width: 46px; height: 46px; }
  .site-header .hdr-panel-company .hdr-card-title { font: 700 17px/1.3 var(--sans); letter-spacing: .01em; }
}

/* ---- B5: no dark hero under the bar. The layout names the widths where the page top is light
   (body[data-solid-top]: m phone to 569, t tablet 570 to 959, d desktop from 960, the rows' own
   breakpoints); there the bar is the solid dark orange from the start and the page starts below it. The RTL
   shade (N11) is out-specified at those widths only (B1, QA r4: white logo on white on /ar/ and /he/ privacy). ---- */
@media (max-width: 569px) { body[data-solid-top~="m"] .site-header, html[dir='rtl'] body[data-solid-top~="m"] .site-header:not(.is-stuck):not(.is-open) { background: var(--bar); } body[data-solid-top~="m"] #main { padding-top: var(--header-h); } body[data-solid-top~="m"] .pg > .pg-row:is(.pg-top, :first-child) { padding-top: var(--pt); } }
@media (min-width: 570px) and (max-width: 959px) { body[data-solid-top~="t"] .site-header, html[dir='rtl'] body[data-solid-top~="t"] .site-header:not(.is-stuck):not(.is-open) { background: var(--bar); } body[data-solid-top~="t"] #main { padding-top: var(--header-h); } body[data-solid-top~="t"] .pg > .pg-row:is(.pg-top, :first-child) { padding-top: var(--pt); } }
@media (min-width: 960px) { body[data-solid-top~="d"] .site-header, html[dir='rtl'] body[data-solid-top~="d"] .site-header:not(.is-stuck):not(.is-open) { background: var(--bar); } body[data-solid-top~="d"] #main { padding-top: var(--header-h); } body[data-solid-top~="d"] .pg > .pg-row:is(.pg-top, :first-child) { padding-top: var(--pt); } }

/* ---- 0. hero (711px tall at 1440 under the transparent bar, 566 on phones; image cover, anchored right) ---- */
.hero { display: flex; align-items: center; min-height: 566px; padding: calc(var(--header-h) + 36px) 0 48px; background: var(--orange) var(--hero-sm) no-repeat 100% 50% / cover; color: #fff; }
.hero-inner { width: 100%; }
.hero-text { text-align: center; }
.hero h1 { font: 900 34px/1.15 var(--sans); } /* the page title; owner 2026-10-02: "make it bigger bolder while still fitting the space it has": Lato 900, sized per language to fill its two lines */
/* V1 (QA r6): 900 only where Lato itself draws the title (Latin languages its subsets cover). Elsewhere 900 made Arial resolve to
   Arial Black, which has no Arabic or Hebrew (a serif fallback) and lacks Vietnamese stacked marks (mixed faces): those languages
   take 700 in their own sans stack (Arial Bold, the CJK and Devanagari bolds), as before the 900 change. */
:is(:lang(ar), :lang(cs), :lang(he), :lang(hi), :lang(ja), :lang(ko), :lang(ru), :lang(vi), :lang(zh)) .hero h1 { font-weight: 700; }
/* Per-language fit of the title's estimated width (Home.astro --em), measured with the weight each language renders (V1, QA r6: cs, he, ru, vi re-measured at 700): the largest size that keeps
   two lines (three on phones) in the text column, at 960-1920, 768 and 360-390 px, less 3 % (Lato) or 5 % (system faces). */
.hero h1 { --fit: .929; --fitm: .966; }
:lang(ar) .hero h1 { --fit: .996; --fitm: .998; } :lang(cs) .hero h1 { --fit: 1.047; --fitm: .852; } :lang(da) .hero h1 { --fit: .988; --fitm: 1.006; }
:lang(de) .hero h1 { --fit: 1.018; --fitm: 1.025; } :lang(es) .hero h1 { --fit: 1.037; --fitm: 1.154; } :lang(fr) .hero h1 { --fit: 1.081; --fitm: 1.136; }
:lang(he) .hero h1 { --fit: .96; --fitm: 1.022; } :lang(hi) .hero h1 { --fit: 1.005; --fitm: .988; } :lang(id) .hero h1 { --fit: 1.013; --fitm: .947; }
:lang(it) .hero h1 { --fit: 1.121; --fitm: 1.085; } :lang(ja) .hero h1 { --fit: 1.397; --fitm: 1.069; } :lang(ko) .hero h1 { --fit: 1.11; --fitm: 1.101; }
:lang(nl) .hero h1 { --fit: 1.07; --fitm: 1.103; } :lang(pl) .hero h1 { --fit: 1.034; --fitm: 1.073; } :lang(pt) .hero h1 { --fit: 1.012; --fitm: 1.099; }
:lang(ru) .hero h1 { --fit: 1.119; --fitm: 1.026; } :lang(vi) .hero h1 { --fit: .91; --fitm: .937; } :lang(zh) .hero h1 { --fit: .897; --fitm: 1.089; }
.hero-sub { margin-top: 36px; font: 400 21px/1.5 var(--sans); }
.hero .ew-btn { margin-top: 36px; } /* 36px under the subline at every width, as the original (QA V10) */
.hero .btn-long { display: none; } /* O11: phones show the short label (one line, 56 px); the full one from 570 px */
@media (min-width: 570px) { .hero .btn-long { display: inline; } .hero .btn-short { display: none; } }
@media (min-width: 570px) {
  .hero-sub { font-size: 27px; line-height: 1.4; }
}
@media (min-width: 768px) { .hero h1 { font-size: 50px; } }
@media (min-width: 960px) {
  .hero { align-items: flex-start; min-height: 711px; padding: 154px 0 60px; background-image: var(--hero); }
  .hero-inner { display: grid; grid-template-columns: 1fr 3fr; }
  .hero-text { grid-column: 2; max-width: 90%; margin: 0 auto; padding-bottom: 10px; }
  /* Right-to-left pages: the face in the background sits on the left, so the text keeps the right-hand three quarters; only the words run right to left (owner 2026-09-30: the hero was off-centre in Arabic and Hebrew). */
  [dir="rtl"] .hero-inner { direction: ltr; }
  [dir="rtl"] .hero-text { direction: rtl; }
  .hero-sub { margin-top: 49px; font-size: 28px; }
  .hero .ew-btn { margin-top: 36px; }
}

/* ---- 1. trusted by: the logo strip, then the heading and paragraph ------ */
.trusted { padding: 36px 0 92px; background: #fff; }
.logos { display: flex; gap: 36px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.logos::-webkit-scrollbar { display: none; }
.logos li { flex: 0 0 84px; scroll-snap-align: start; }
.logos img { display: block; width: 84px; height: 84px; filter: grayscale(1); transition: filter .3s cubic-bezier(.57, .21, .69, 1); }
.logos li:hover img { filter: grayscale(0); }
.trusted .h-section { margin-top: 36px; }
@media (max-width: 767px) { .trusted .h-section { line-height: 1.6; } } /* M13 HOME#22: 35 px lines on phones, as the other titles (22 px, the ruled phone step, QA V11) */
/* V21: phones show all seven logos in two centred rows (4 + 3) instead of a hidden swipe row that showed three */
@media (max-width: 569px) {
  .logos { flex-wrap: wrap; justify-content: center; gap: 20px 16px; overflow: visible; }
  .logos li { flex: 0 0 calc((100% - 48px) / 4); }
  .logos img { width: 100%; height: auto; aspect-ratio: 1; }
}
@media (min-width: 570px) {
  .logos { display: grid; grid-template-columns: repeat(7, minmax(0, 130px)); justify-content: space-between; gap: 16px; overflow: visible; }
  .logos li { flex: none; }
  .logos img { width: 100%; max-width: 130px; height: auto; aspect-ratio: 1; } /* V21: square at every width (a fixed 130 px height stretched them in narrower columns) */
}

/* ---- 2. products (three video-and-text rows on the grey panel) ---------- */
.products { padding: 74px 0 163px; background: var(--panel); }
.products .h-section { margin-bottom: 94px; }
.product { display: grid; gap: 36px; margin-bottom: 109px; }
.product:not(:has(~ .product)) { margin-bottom: 0; } /* V28: the last product (a hidden div.info-boxes follows it, so :last-of-type never matched) */
.yt { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.yt iframe, .lazy-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.product-text h3 { font: 700 19px/1.3 var(--sans); color: var(--ink); } /* an item title: 20px, 19 on phones (QA V11: one product card style) */
.product-sub { margin-bottom: 36px; font: 400 16px/2.6 var(--sans); color: var(--text); }
@media (max-width: 569px) { .product-sub { line-height: 1.6; margin-top: 10px; } } /* M13 HOME#7: a wrapped subline reads as one line, not two */
.checks { margin-bottom: 35px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 7px; font-size: 18px; line-height: 1.6; }
.check { flex: 0 0 15px; width: 15px; height: 21px; margin-top: 4px; color: var(--orange); }
.check path { stroke-width: 5.5; } /* M4, m1: a bold chevron, as heavy as the original's image bullet (the 2-unit stroke drew 1.4 px, 4 units still read light) */
.product .ew-btn { min-width: 200px; }
@media (min-width: 570px) {
  .products { padding: 92px 0 133px; }
  .products .h-section { margin-bottom: 117px; }
  .product { margin-bottom: 55px; }
  .product-text h3 { font-size: 20px; }
  .product-sub { font-size: 20px; line-height: 2.1; }
}
/* V9: the product rows go side by side from 960 px, as the original; below it they stack (video full width, then the text) */
@media (min-width: 960px) {
  .product { grid-template-columns: 1fr 1fr; align-items: start; }
  .product.text-first .yt { order: 2; }
  .product.pad .product-text { padding-inline-start: 30px; } /* V15: the inset on the start side, mirrored on right-to-left pages */
}

/* ---- 3 and 4. solutions (black): the wide row from 960px, the narrow one below ---- */
.solutions { background: #000; color: #fff; }
.solutions .h-section { color: #fff; }
.solutions h2:not(.h-section) { position: relative; font: 700 25px/1.3 var(--sans); color: #fff; padding-bottom: 15px; }
.solutions h2:not(.h-section)::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 150px; height: 2px; background: var(--orange); }
.solutions img { display: block; width: 100%; height: auto; }
.solutions-wide { display: none; }
.solutions-narrow { padding: 118px 0 71px; text-align: center; }
.solutions-narrow .h-section { margin-bottom: 128px; }
.solutions .sol-n h2::after { inset-inline-start: auto; left: 50%; transform: translateX(-50%); }
.sol-n p { margin-top: 34px; font: 400 14px/18px var(--sans); }
.sol-n .yt, .sol-n img { margin-top: 36px; }
.sol-n .ew-btn { margin-top: 36px; }
.sol-n + .sol-n { margin-top: 127px; }
.sol-n:not(:has(.ew-btn)) + .sol-n { margin-top: 93px; }
@media (min-width: 960px) {
  .solutions-narrow { display: none; }
  .solutions-wide { display: block; padding: 102px 0 82px; }
  .solutions-wide .h-section { margin-bottom: 166px; }
  .sol { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 36px; }
  .sol.text-first { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }
  .sol.text-first .sol-media { order: 2; }
  .sol-video { align-items: end; }
  .sol-image { align-items: start; }
  .sol-image .sol-text { padding-top: calc((min(100vw, 1200px) - 108px) * .115); } /* M13 HOME#2: every heading at one offset from its photo top (126 px at 1440), with or without a button */
  .sol-video .yt { width: 72.2%; margin-inline-start: 4.9%; } /* V15: each video 4.9 % in from the outer edge, both directions */
  .sol-video.text-first .yt { margin-inline-start: auto; margin-inline-end: 4.9%; }
  .sol + .sol { margin-top: 72px; }
  .sol-image + .sol-image { margin-top: 36px; }
  .solutions-wide h2:not(.h-section) { font-size: 25px; line-height: 60px; padding-bottom: 0; }
  .sol-text p { margin-top: 34px; font: 400 16px/25px var(--sans); }
  .sol-text .ew-btn { margin-top: 36px; }
}

/* ---- 5. integrate (orange band, image cover) ----------------------------- */
.integrate { padding: 77px 0 118px; background: var(--orange-dark) no-repeat 50% 50% / cover; color: #fff; text-align: center; } /* flat colour until the band's image arrives: dark enough for white text (4.7:1) */
.integrate h3 { font: 700 25px/1.3 var(--sans); color: #fff; }
.integrate-sub { color: #fff; }
.integrate .ew-lead { color: #fff; }
.integrate .ew-btn { margin-top: 36px; min-width: 280px; }
.integrate .h-section::after { background: #fff; } /* V8: orange on the orange band all but vanished */
@media (min-width: 960px) { .integrate { padding: 102px 0 118px; } }

/* ---- 6. AI band (dark image cover) ------------------------------------- */
.ai { padding: 87px 0; background: #111 no-repeat 50% 50% / cover; text-align: center; }
.ai h3 { font: 700 25px/1.3 var(--sans); color: #fff; }
@media (max-width: 767px) { .solutions h2:not(.h-section), .integrate h3, .ai h3 { font-size: 22px; } } /* section titles' phone step (QA V11) */
@media (min-width: 960px) { .ai { padding: 102px 0; } .ai h3 { max-width: 80%; margin: 0 auto; } }
@media (min-width: 1200px) { .ai { padding: 152px 0; } } /* M13 HOME#18: the 1440 padding made the band 41 % taller at 1024 */

/* ---- footer: one grid (logo, three link columns, the offices, the newsletter form), then the bottom bar ---- */
.site-footer { padding: 72px 0 28px; background: var(--footer); color: #fff; font-size: 16px; line-height: 1.75; }
.ftr-grid { display: grid; gap: 40px; }
.ftr-logo { display: inline-block; border-radius: 4px; }
.ftr-logo img { display: block; width: 200px; height: 45px; }
.ftr-h { margin-bottom: 18px; font: 700 15px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.ftr-col ul { margin: 0; }
.ftr-col li { margin-bottom: 14px; }
.ftr-col li a { color: rgba(255, 255, 255, .7); font-size: 16px; line-height: 1.5; text-decoration: none; transition: color .15s; }
.ftr-col ul:not(.ftr-social) li a:hover { color: #fff; } /* V1 (QA r4): text links only; the social circles have their own hover */
.nl-label { display: block; margin-bottom: 8px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.nl-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.nl-btn { text-wrap: balance; } /* V2 (QA r4): the Subscribe label stays 15 px in every language and wraps to two balanced lines where it is longer than the column (cs "PŘIHLÁSIT SE K ODBĚRU" was shrunk to 12.3 px) */
.nl-input::placeholder { color: #9a9a9a; opacity: 1; }
.nl-input { width: 100%; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px; background: #fff; color: var(--ink); font: 400 16px/1 var(--sans); }
.nl-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(244, 121, 50, .35); }
.nl-btn { width: 100%; padding-inline: 16px; letter-spacing: 0; text-transform: uppercase; } /* buttons in capitals (owner ruling); 16 px sides hold the 19 px label in the narrow footer column (W4: ru ПОДПИСАТЬСЯ) */
/* Japanese: no line opens with the long-vowel mark or a small kana ("ソリュ / ーション", chrome#29). */
:lang(ja) :is(.site-header, .site-footer) { line-break: strict; }
.nl-msg { min-height: 1.5em; margin-top: 10px; font-size: 14px; color: #fff; }
.nl-msg:empty { display: none; }
.ftr-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 64px; padding-top: 24px; font-size: 14px; } /* no hairline between tiers (ruled 2026-09-29) */
.ftr-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; color: rgba(255, 255, 255, .72); } /* 6:1 on the ink ground */
.ftr-legal a { color: inherit; text-decoration: none; }
.ftr-legal a:hover { color: #fff; text-decoration: underline; }
.ftr-addr { margin: 30px 0 0; max-width: 260px; font: 400 16px/1.7 var(--sans); color: rgba(255, 255, 255, .7); }
.ftr-addr a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.ftr-addr a:hover { color: #fff; }
.ftr-col .ftr-social { display: flex; gap: 12px; margin-top: 28px; }
.ftr-social a { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); color: #fff; transition: background .15s, border-color .15s; }
.ftr-social a:hover { background: #fff; border-color: #fff; color: var(--ink); } /* m-I (QA r3): white on the ink band (orange was 2.75:1 against the white icon) */
.site-footer :focus-visible { outline-color: #fff; } /* m-I: the focus ring on the ink band is white (dark orange was 2.5:1) */
.ftr-col ul:not(.ftr-social) li a { display: inline-block; padding-block: 2px; } /* m-I: a 24 px tap height at every width; text links only (V1, QA r4: it pushed the social icons 11 px off centre) */
.ftr-social .ew-icon { width: 16px; height: 16px; }
/* Phones: every footer link a 44 px tap target (V1). */
@media (max-width: 569px) {
  .site-footer .ftr-col ul li { margin-bottom: 0; }
  .ftr-col ul:not(.ftr-social) li a, .ftr-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr-social a { width: 44px; height: 44px; }
}
/* 570 to 1099: the logo and address across the top, the three link columns side by side, the newsletter
   under them; no empty fourth column (V1). */
@media (min-width: 570px) {
  .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
  .ftr-brand { grid-column: 1 / -1; }
  .ftr-newsletter { grid-column: 1 / -1; max-width: 480px; }
}
@media (min-width: 1100px) {
  .site-footer { padding-top: 64px; }
  .ftr-grid { grid-template-columns: minmax(220px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.25fr); gap: 32px 40px; }
  .ftr-brand { grid-column: auto; }
  .ftr-logo img { width: 160px; height: 36px; }
  .ftr-newsletter { grid-column: auto; }
}
@media (min-width: 1300px) {
  .ftr-grid { grid-template-columns: minmax(280px, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 48px; }
  .ftr-logo img { width: 200px; height: 45px; }
}

/* Legacy pages: Uncode's element rules (h2:not([class*="fontsize-"]) 29px, p/li 18px) outrank
   the single-class footer rules; these carry one more class so the footer reads the same on
   every page. Measured on a blog post, 2026-09-30. */
/* Uncode lays the page out as a table and makes footer#colophon a table-row, which ignores padding: the footer lost its top space on every captured page (measured 2026-09-30). */
body footer#colophon.site-footer { display: block !important; height: auto !important; width: 100%; }
/* The theme floats the footer's content boxes (measured: the footer measured its padding only, 92 px, while its wrapper measured 452 px). */
.site-footer .ew-wrap, .site-footer .ftr-grid, .site-footer .ftr-col, .site-footer .ftr-bottom { float: none !important; position: static !important; height: auto !important; }
.site-footer::after { content: ''; display: table; clear: both; } /* the theme rule is body:not(.compose-mode) footer#colophon */
.site-footer .ftr-h { font-size: 15px; line-height: 1.3; font-weight: 700; }
.site-footer .ftr-addr { font-size: 16px; line-height: 1.7; }
.site-footer .ftr-col li { font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
.site-footer .ftr-col li a { font-size: 16px; }
.site-footer .ftr-legal, .site-footer .ftr-legal a { font-size: 14px; line-height: 1.5; }
.site-footer .nl-input { font-size: 16px; margin: 0; }
.site-footer .nl-msg { font-size: 14px; }
.site-header .hdr-card-title { font-size: 15px; }
.site-header .hdr-card-desc { font-size: 14px; }

.ew-cta-band { padding: 24px 0 8px; text-align: center; }

/* ---- Canonical type and buttons on the rebuilt pages (owner 2026-09-30: "make things canonical... headers
   look alike, button placements... if you update the style, update everywhere"). One definition each;
   the captured per-element sizes and line heights are no longer applied. ---- */
.pg-h.pg-h-page { font-size: 50px; line-height: 1.15; }
.pg-h.pg-h-section { font-size: 25px; line-height: 1.3; }
.pg-h.pg-h-item { font-size: 20px; line-height: 1.3; }
.pg-h.pg-h-label { line-height: 1.4; }
.pg-sub.pg-sub-lead { font-size: 25px; line-height: 1.35; }
.pg-sub.pg-sub-text { font-size: 18px; line-height: 1.6; }
.pg-sub.pg-sub-small { font-size: 16px; line-height: 25px; } /* M13 ACADEMIC#5: 16/25 as the original */
.pg-heading .pg-sub { margin-top: 10px; }
/* Roles by structure (QA V11, PageBlocks.astro): icon-box and banner titles are item titles, whatever size the old
   theme gave them (GazeAssist's 28px "Speed" under a 25px section title); page and section titles are centred
   capitals (D8, assumed ruling 2026-09-30), set by style so every language keeps its own words. */
.pg-iconbox .pg-iconbox-title, .pg-banner .pg-banner-title { font-size: 20px; line-height: 1.3; }
.pg-h.pg-h-page, .pg-h.pg-h-section { text-transform: uppercase; }
/* The hero title is centred, and what stands with it in its column (the AMD hero was left-aligned). Not where the
   column carries a row of its own (GazeSense's platform icons): centred, those land on the monitor in the photo. */
.pg-hero .pg-col-inner:has(> .pg-heading-title):not(:has(> .pg-nested)) > :is(.pg-heading, .pg-text, .pg-btn, .pg-image) { text-align: center; }
/* A hero's subtitle keeps the original's size, leading and weight (V10); --fsm/--lhm on phones. */
.pg-sub.pg-sub-hero { font-size: var(--fs, 18px); line-height: var(--lh, 1.2); font-weight: var(--fw, 400); }
.pg-sub.pg-sub-hero.pg-sub-bold { font-weight: 700; }
.pg-heading .pg-sub[style*='--mt'] { margin-top: var(--mt); } /* M13 ACADEMIC#5, AMD#7: a captured gap under the title or rule stays */
/* a title in two parts is one title (V12): the second line inside the heading, the line above it flush on it */
.pg-h-line { display: block; }
.pg-heading-lead + .pg-heading { margin-top: 0; }
.pg-line { display: block; height: auto; margin-top: 16px; }
.pg-line::before { content: ''; display: block; width: 150px; max-width: 100%; margin-top: 0; border-bottom: 2px solid var(--orange); }
main .ew-btn, .pg-btn .ew-btn { min-width: 0; min-height: 48px; padding: 12px 26px; font-size: 15px; line-height: 1.25; letter-spacing: .05em; text-transform: uppercase; }
main .hero .ew-btn, main .band .ew-btn, .pg-hero .pg-btn .ew-btn, .pg-trial .ew-btn, .pg-btn-large .ew-btn { min-height: 56px; padding: 16px 34px; font-size: 16px; } /* V16: .pg-btn-large, trial buttons and band CTAs captured large */
.pg-btn + .pg-btn { margin-top: 0; }
/* V22: buttons keep the original's width and centring: a captured width is a minimum, siblings share one width,
   a theme button without alignment fills its column, a two-line label breaks into balanced lines. */
.pg-btn .ew-btn, .product .ew-btn { text-wrap: balance; }
.pg-btn .ew-btn[style*='--bw'] { min-width: min(var(--bw), 100%); }
.pg-btn-sib .ew-btn[style*='--bw'] { width: min(var(--bw), 100%); }
.pg-btn-block { display: flex; justify-content: center; text-align: center; }
.pg-btn-block .ew-btn { flex: 0 1 auto; min-width: 0; max-width: 100%; } /* N2 (QA r3): centred in its column at its label's width, wrapping inside the column (the privacy policy's Beam link ran off the page at 1024) */
@media (min-width: 960px) and (max-width: 1199px) { .pg-col:has(> .pg-col-inner > .pg-btn-sib) .pg-heading .pg-h { min-height: 2.6em; } } /* sibling titles that wrap at this width keep their buttons level (products page at 1024) */
.product .ew-btn { width: min(var(--pbw, 320px), 100%); max-width: 100%; } /* homepage: the three product buttons one width (were 322 / 200 / 222); 320 px holds the 19 px labels (W4) */
/* N3 (QA r3): labels fit their button at the W4 sizes. Widths come from the measured label face (src/lib/label-fit.ts). On
   phones the side padding narrows (16 px, 20 px for the large size); a light button (ink on white, any size passes contrast)
   sets its label at the size that keeps it on one line (--lw: the label's em width); a primary label stays 19 px (white on
   orange passes only as large text) and may take two lines, the homepage trio then one height. */
@media (max-width: 569px) {
  main .ew-btn, .pg-btn .ew-btn { padding-inline: 16px; }
  .post-body a.ew-btn { padding-inline: 12px; text-wrap: balance; } /* m1 (QA r6): a post's Beam button (honor) keeps its 19 px label to two balanced lines at 360 in every language (nl, ru, vi took three, ar a one-word second line) */
  main .hero .ew-btn, main .band .ew-btn, .pg-hero .pg-btn .ew-btn, .pg-trial .ew-btn, .pg-btn-large .ew-btn, .ew-btn-lg { padding-inline: 20px; }
  /* V2 (QA r4): a label is never set below 15 px. A light 15 px label that does not fit wraps to two balanced lines; a large
     one is set between 15 and 16 px to stay on one line, and where even 15 px would not fit it takes its normal 16 px on two
     balanced lines (clamp() is the switch: 16 px once the fitted size F falls under 15 px, else 0). */
  :is(main, .pg-btn) .ew-btn.ew-btn-light.ew-btn-lg[style*='--lw'], main .hero .ew-btn[style*='--lw'] { --f: calc((100vw - 72px - 43px) / var(--lw)); font-size: min(16px, max(var(--f), clamp(0px, (15px - var(--f)) * 1000, 16px))); text-wrap: balance; }
}
/* V2 (QA r4): sibling buttons are levelled to the tallest one by eyeware.js, only when a label actually wraps (the estimated
   two-line heights padded one-line buttons to 66 px in about twelve languages). */
@media (max-width: 569px) { .pg-col.pg-pad-single[style*='border-style'] { padding-inline: 18px; } } /* a bordered box (GazeAssist PRICING) gives its button room on phones */
@media (min-width: 960px) and (max-width: 1099px) { .products .product .ew-btn { width: min(var(--pbw), 396px, 100%); } } /* the trio one width where the inset text column (396 px at 960) is narrower than the longest label; heights levelled by eyeware.js (V2, QA r4) */
.pg-btn-ult { margin-bottom: 24px; }
@media (max-width: 767px) {
  .pg-h.pg-h-page { font-size: 34px; }
  .pg-h.pg-h-section { font-size: 22px; }
  .pg-h.pg-h-item { font-size: 19px; }
  .pg-sub.pg-sub-lead { font-size: 20px; }
  .pg-sub.pg-sub-text { font-size: 17px; }
  .pg-btn .ew-btn:not(.ew-btn-lg) { font-size: 15px; } /* V16: large buttons (hero, trial) keep 16 px on phones */
  .pg-iconbox .pg-iconbox-title, .pg-banner .pg-banner-title, .pg-card .pg-card-title, .pg-team .pg-team-name { font-size: 19px; }
  .pg .pg-text h2 { font-size: 22px; } .pg .pg-text h3 { font-size: 19px; }
  .pg-sub.pg-sub-hero { font-size: var(--fsm, var(--fs, 18px)); line-height: var(--lhm, var(--lh, 1.2)); }
}

/* cookie bar (owner 2026-10-02, both sites; src/components/CookieBar.astro): a slim, semi-transparent dark strip at the
   bottom of the window, as on Beam's live site (owner: "the semi transparent bar. the smaller height. much more
   subtle"). No blur and no overlay. It sits below the header's layer (100), so the phone drawer covers it. While it shows, the spacer after the footer (the footer's
   ink, as tall as the bar) lets the page's last line scroll clear of it. Accept and Decline: compact .ew-btn light and
   outline, 15 px labels (the accent label on white 5.1:1). The strip is 30 % ink (owner 2026-10-02: "even lighter. 30%"):
   white text on it is about 2:1 where it sits over a white section, accepted by the owner. */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(20, 20, 22, .3); color: #fff; font: 400 14px/1.45 var(--sans); letter-spacing: normal; text-transform: none; opacity: 1; transition: opacity .5s ease; } /* the fade as Beam's live Cookie Notice: .5 s, no slide */
.cookie-bar[hidden], .cookie-bar-space { display: none; }
.cookie-bar.is-leaving { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cookie-bar { transition: none; } }
html.has-cookie-bar .cookie-bar-space { display: block; height: var(--ew-cookie-h, 0px); background: var(--footer); }
.cookie-bar-in { display: flex; align-items: center; justify-content: center; gap: 8px 18px; max-width: 1200px; margin: 0 auto; padding: 7px var(--gutter, 20px) calc(7px + env(safe-area-inset-bottom, 0px)); }
.cookie-bar-text { flex: 0 1 auto; margin: 0; color: #fff; text-wrap: pretty; }
.cookie-bar-text:lang(ko) { word-break: keep-all; }
.cookie-bar-more { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar-more:hover { text-decoration-thickness: 2px; }
.cookie-bar-more:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cookie-bar-choice { display: flex; gap: 8px; flex: none; }
.cookie-bar .cookie-bar-btn { min-height: 34px; padding: 5px 14px; font-size: 15px; text-transform: none; white-space: nowrap; }
@media (max-width: 760px) {
  .cookie-bar-in { flex-wrap: wrap; gap: 8px 12px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .cookie-bar-text { flex: 1 1 100%; text-align: center; }
  .cookie-bar .cookie-bar-btn { min-height: 40px; }
}

/* ---- /contact-us/: the H1 band, the native form, the phone-only partner row ---- */
/* Band: 394px tall at 1440 under the transparent bar (H1 50/80 at y=145, intro 36px below, 82px under), image cover; 472px on phones. */
.band { display: flex; align-items: center; min-height: 472px; padding: calc(var(--header-h) + 36px) 0 60px; background: var(--orange-dark) var(--band-sm) no-repeat 50% 50% / cover; color: #fff; text-align: center; }
.band-inner { width: 100%; max-width: 680px; }
.band h1 { font: 700 50px/80px var(--sans); color: #fff; }
.band-intro { max-width: 560px; margin: 28px auto 0; font: 400 18px/1.6 var(--sans); color: #fff; }
.band-intro a { display: inline-block; padding: 11px 0; margin: -11px 0; } /* M13 CONTACT#2: a 44 px tall tap area on the only contact link, the line unchanged */
@media (min-width: 960px) { .band { min-height: 394px; padding: calc(var(--header-h) + 82px) 0 82px; background-image: var(--band); } }
.partners { display: none; padding: 60px 0 72px; background: #fff; text-align: center; }
.partners .h-section { color: var(--ink); }
.partners-sub { display: block; }
.partner-logos { display: grid; gap: 36px; justify-items: center; }
.partner-logos { margin-top: 80px; } /* V21: about 88 px from the rule to the first logo, as the original */
.partner-logos img { display: block; width: 198px; max-width: 100%; height: auto; } /* V21: one width for the three vendor logos, as the original */
@media (max-width: 569px) { .partners { display: block; } }

/* ---- blog posts (measured on the crawl: hero 387px, title 600 35/42, meta 600 12px upper, prose 780px 18/31.5) ---- */
.post-hero { display: flex; align-items: center; min-height: calc(var(--header-h) + 383px); padding: calc(var(--header-h) + 54px) 0 54px; background-color: var(--ink); background-image: var(--hero-sm, none); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; /* N18 (QA r3): longhands, so a post without a photo keeps the ink ground */ color: #fff; text-align: center; position: relative; }
.post-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--bg-dim), var(--bg-dim)), linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)); } /* the site-wide dim over the photo's even .35 base (as the bands' .12 base). V4 (QA r6): the darker strip under the bar (.62 at 960+ and on phones, .86 at 570-959, B5 / O16) is gone, no local shade; the even base stays, without it the post titles fall to 1.35-1.4:1 */
.post-hero-inner { position: relative; width: 100%; }
.post-hero h1 { font: 700 50px/1.15 var(--sans); color: #fff; } /* the ruled page title, 50 (34 on phones); was 35 (QA V11) */
.post-meta { margin-top: 18px; font: 600 10px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.post-meta a { color: #fff; text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.post-meta-sep { margin: 0 12px; }
.post-meta-keep { white-space: nowrap; }
.nobr { white-space: nowrap; } /* V16 (QA r4): "risk-free" never splits at its hyphen (text.ts keepRiskFree) */
/* A plain banner hero (the post's image carries its own logos; the original printed no title on it): the image
   alone, undarkened, then the title and meta on white at the top of the prose column, as on the original. */
.post-hero-banner { min-height: 351px; padding: 0; } /* V4 (QA r6): no ink strip of its own under the bar; a banner post is a solid-top page (Post.astro), so the bar is the site's solid bar and the banner starts under it */
.post-hero-banner::before { display: none; }
.post-head { max-width: 780px; margin: 0 auto; padding-top: 72px; }
.post-head h1 { font: 700 50px/1.15 var(--sans); color: var(--ink); }
.post-head .post-meta { color: var(--text); }
.post-head .post-meta a { color: inherit; }
.post-head + .post-body { padding-top: 30px; }
.post-body { max-width: 780px; margin: 0 auto; padding: 72px 0; font: 400 18px/1.75 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.post-body > * + * { margin-top: 18px; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5 { margin-top: 27px; color: var(--ink); font-weight: 600; }
/* An in-post H1 (the editor's) never outranks the post title (35px): it takes the H2 step. */
.post-body h1, .post-body h2 { font-size: 25px; line-height: 1.3; } /* the ruled section title: in-post headings never outrank the 50px post title or each other (V11) */
/* The editor's regular-weight text inside a heading or bold run (<span style="font-weight: 400">). */
.post-body .n { font-weight: 400; }
.post-body .align-center { text-align: center; }
.post-body .align-right { text-align: end; } /* V15: the editor's right is the end side; mirrored on right-to-left pages */
/* The editor's empty line (<p>&nbsp;</p>), e.g. between a CTA and the next section. */
.post-body .spacer { height: 31.5px; }
.post-body h3 { font-size: 20px; line-height: 1.3; } /* the ruled item title */
.post-body h4 { font-size: 18px; line-height: 1.3; }
.post-body h5 { font-size: 18px; line-height: 1.3; }
.post-body a:hover { text-decoration-color: var(--orange); } /* W4: the text stays ink, the underline turns orange */
.post-body ul, .post-body ol { padding-inline-start: 18px; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li + li { margin-top: 0; }
:is(.post-body, .pg-text) blockquote { margin: 36px 0; padding-inline-start: 36px; border-inline-start: 2px solid var(--orange); }
:is(.post-body, .pg-text) blockquote :is(p, h3) { color: var(--ink); }
:is(.post-body, .pg-text) blockquote > * + * { margin-top: 18px; }
.post-body img { display: block; max-width: 100%; height: auto; }
.post-body img.align-center, .post-body figure.align-center { margin-left: auto; margin-right: auto; }
.post-body img.align-right, .post-body figure.align-right { margin-inline-start: auto; }
@media (min-width: 570px) { .post-body img.align-left { float: inline-start; margin-inline-end: 2em; } } /* R8-V7 (QA r8): the editor's left image floats as the original (.alignleft: left, 2em on its end side; stacked below 570 px as the original), text beside it; the start side, so mirrored on right-to-left pages (V15) */
.post-body .spacer { clear: both; } /* R8-V7: the editor's empty line ends a floated block (CES 2021 logo and its four lines) */
.post-body figure { max-width: 100%; }
.post-body figure.caption { display: block; width: fit-content; max-width: 100%; } /* shrinks to its image, never wider than the column (a table ignored max-width: CES 2023 post, 666 px on a phone) */
.post-body figure.caption img { max-width: 100%; }
/* A captioned image in a table cell fills the cell, its caption under it. */
.post-body td figure.caption { display: block; width: 100%; }
.post-body td figure.caption img { width: 100%; }
.post-body td figure.caption figcaption { display: block; }
.post-body figcaption { display: block; margin-top: 9px; font-size: 12px; line-height: 1.4; color: var(--text); }
.post-body .yt { margin: 27px 0; background: #000; }
.post-body table { width: 100%; border-collapse: collapse; border: 1px solid rgba(65, 64, 66, .15); font-size: 18px; line-height: 1.6; }
.post-body td, .post-body th { padding: 18px; border: 1px solid rgba(65, 64, 66, .15); vertical-align: top; }
.post-body tr:first-child td { font-weight: 600; }
/* Click to Tweet: the quote in ink on the quote rule, then a clear Click to Tweet link with the bird of the footer's icon set. */
.post-body .tweet { margin: 36px 0; padding-block: 4px; padding-inline: 36px 0; border-inline-start: 2px solid var(--orange); font: 400 22px/1.5 var(--sans); }
.post-body .tweet a { color: var(--ink); text-decoration: none; }
.post-body .tweet a:first-child:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.post-body .tweet a + a { display: flex; width: max-content; max-width: 100%; margin-inline-start: auto; /* O16: the label on its own line at the box's end, every box alike */ align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; font: 700 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* W4: was orange 13 px, 2.75:1 */
.post-body .tweet a + a::before { content: ''; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--tweet-bird) no-repeat 50% 50% / contain; mask: var(--tweet-bird) no-repeat 50% 50% / contain; }
.post-body .tweet a + a:hover { text-decoration-color: var(--orange); }
.post-body .tweet { --tweet-bird: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E"); } /* the X logo, as in the footer (Icon.astro 'x') */
.post-body hr { border: 0; border-top: 1px solid rgba(65, 64, 66, .15); }
.post-body pre { overflow-x: auto; font-size: 15px; }
.post-nav { background: var(--panel); }
.post-nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 36px var(--gutter); font: 600 12px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.post-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; }
.post-nav .ew-icon { flex: none; width: 18px; height: 18px; }
[dir="rtl"] .post-nav .ew-icon { transform: scaleX(-1); }
.post-nav-next { justify-content: flex-end; }
.post-nav-back { justify-content: center; }
.post-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* m-C / N11 (QA r3): the one link hover, ink text, orange underline */
.post-nav-back { text-align: center; }
.post-nav-next { text-align: end; }
@media (min-width: 570px) { .post-meta { font-size: 12px; } }
@media (min-width: 960px) {
  .post-hero { min-height: calc(387px + var(--header-h)); background-image: var(--hero, none); }
  .post-hero-banner { min-height: 387px; }
}
@media (max-width: 767px) { .post-hero h1, .post-head h1 { font-size: 34px; line-height: 1.2; } } /* Ruled phone page title 34, below 768 like every page title. */
@media (max-width: 569px) {
  .post-head { padding-top: 48px; }
  .post-body { padding: 48px 0; }
  .post-body h1, .post-body h2 { font-size: 22px; }
  .post-body h3 { font-size: 19px; }
  .post-body .tweet { padding-inline-start: 20px; font-size: 20px; }
  .post-body table { table-layout: fixed; }
  .post-body td, .post-body th { padding: 8px; overflow-wrap: anywhere; }
  :is(.post-body, .pg-text) blockquote { padding-inline-start: 20px; }
  .post-nav-inner { grid-template-columns: 1fr 1fr; }
  .post-nav-back { grid-column: 1 / -1; order: 3; }
}

/* ---- blog listings: the band, the cards, the pagination, the FOLLOW US row ----
   /blog/ (.archive-band-blog) takes the Company header band further down (owner 2026-09-30: About, Careers, Press,
   Blog and Contact share one band). The category archives keep the original's band: the orange under the header is
   300px on phones, 171px on tablets and 207px from 960px, the title centred in it, at the page-title size. */
.archive-band { display: flex; align-items: center; min-height: calc(var(--header-h) + 300px); padding: var(--header-h) 0 0; background: var(--orange-dark) no-repeat 50% 50% / cover; color: #fff; text-align: center; }
.archive-band-inner { width: 100%; }
.archive-band h1 { font: 700 34px/1.15 var(--sans); color: #fff; text-transform: uppercase; overflow-wrap: break-word; }
@media (min-width: 768px) { .archive-band h1 { font-size: 50px; } } /* 50 from 768, like every page title (QA V11) */
.archive-intro { max-width: 560px; margin: 16px auto 0; font: 400 18px/1.6 var(--sans); color: #fff; }
.archive { padding: 72px 0; background: #fff; }
/* Cards (owner 2026-09-30 on the listing design: "keep them"). The image is shown whole on a calm panel ground,
   never cropped (the 3:2 crop cut words out of the artwork); the last card of an odd row sits centred. */
.cards { display: grid; gap: 36px; }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(65, 64, 66, .12); border-radius: 8px; overflow: hidden; }
.card-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); }
.card-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card-img-plain img { object-fit: cover; }
.card-img-plain::before { content: ''; position: absolute; inset: 0; background: var(--bg-dim); pointer-events: none; } /* m9 / V8 (QA r6): a title tile (3 Essential's orange) is an orange ground with white text: the site-wide dim, as every orange ground */
.card-img-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px 32px; font: 700 20px/1.3 var(--sans); color: #fff; text-align: center; }
.card-body { padding: 20px 32px 32px; }
.card-cats { display: flex; flex-wrap: wrap; gap: 24px 6px; font: 600 12px/20px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.card-cat { white-space: nowrap; }
/* Each category link is a 44px tap target (12px above and below its 20px line; wrapped lines sit 44px apart). */
.card-cats a { display: inline-block; padding: 12px 0; margin: -12px 0; color: inherit; text-decoration: none; }
.card-cats a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* m-C / N11 (QA r3): the one link hover, ink text, orange underline */
.card-title { margin-top: 14px; font: 600 20px/1.3 var(--sans); color: var(--ink); }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* m-C / N11 (QA r3): the one link hover, ink text, orange underline */
.card-date { margin-top: 10px; font: 400 14px/1.5 var(--sans); color: var(--text); }
.card-date a { color: inherit; text-decoration: none; }
.card-date a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* m-C / N11 (QA r3): the one link hover, ink text, orange underline */
.card-excerpt { margin-top: 12px; font: 400 16px/1.7 var(--sans); color: var(--text); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.pagination-page, .pagination-arrow { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 8px; font: 600 14px/1 var(--sans); color: var(--ink); text-decoration: none; background: var(--panel); }
.pagination-page:hover, .pagination-arrow:hover { background: var(--btn-hover); color: #fff; }
.pagination-page.is-current { background: var(--ink); color: #fff; }
.pagination-arrow.is-off { opacity: .35; }
.pagination .ew-icon { width: 16px; height: 16px; }
[dir="rtl"] .pagination .ew-icon { transform: scaleX(-1); }
/* FOLLOW US: the original's band, 434 to 513px tall, the heading well clear of the top. */
.follow { padding: 148px 0; background: var(--orange-dark) no-repeat 50% 50% / cover; color: #fff; text-align: center; }
.follow .h-section { color: #fff; margin-bottom: 0; }
.follow-text { margin-top: 40px; font: 400 18px/1.5 var(--sans); color: #fff; }
.follow-links { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.follow-links a { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 8px; color: #fff; background: rgba(255, 255, 255, .14); }
.follow-links a:hover { background: #fff; color: var(--orange); }
/* Phones: a compact card, image, categories, title and date (the stacked cards with their excerpt made /blog/ twice
   the original's length; the original's phone cards carried no excerpt either). */
@media (max-width: 569px) {
  .cards { gap: 24px; }
  .card-body { padding: 20px 20px 22px; }
  .card-title { font-size: 19px; }
  .card-excerpt { display: none; }
}
/* Tablets: one column of horizontal cards, the image beside the text. */
@media (min-width: 570px) and (max-width: 959px) {
  .archive-band { min-height: calc(var(--header-h) + 171px); }
  .card { flex-direction: row; align-items: stretch; }
  .card-img { flex: 0 0 40%; aspect-ratio: auto; min-height: 100%; }
  .card-body { flex: 1; min-width: 0; padding: 16px 28px 24px; }
  .card-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 960px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 18px); }
  /* N9 (QA r3): the two cards of a row share their row lines (subgrid): the artwork, kept at its own shape (O14), sits on a
     common line, and the category, title, date and excerpt of both cards start at the same height. */
  .cards { grid-auto-rows: auto; row-gap: 0; }
  .cards > .card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 36px; }
  .cards > .card > .card-img { grid-row: 1; align-self: end; }
  .cards > .card > .card-body { display: grid; grid-row: 2 / span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .card-body > .card-cats { grid-row: 1; align-self: start; } .card-body > .card-title { grid-row: 2; align-self: start; }
  .card-body > .card-date { grid-row: 3; align-self: start; } .card-body > .card-excerpt { grid-row: 4; align-self: start; }
  .archive-band { min-height: calc(var(--header-h) + 207px); }
  .follow { padding: 122px 0; }
}

/* ---- page builder pages (Page.astro + PageBlocks.astro): the theme's geometry as captured, the brand's look.
   Every value below was measured on the crawl (scripts/section-parity.mjs holds the build to it): rows pad
   36px by default and take the theme's padding classes as tokens (pg-pt-*, pg-pb-*, side pg-ph-*), columns
   sit on a twelve-column grid with the theme's gutter (pg-g-*), blocks in a column are 36px apart (the
   theme's internal gutter, pg-gap-*), a cell pads by its class (pg-pad-*), a row can be a share of the
   window high (pg-ratio). Colours are the brand's; text colour follows the nearest pg-dark / pg-light. ---- */
:root { --c-orange: var(--orange); --c-orange-dark: var(--orange-dark); --c-ink: var(--ink); --c-white: #fff; --c-panel: var(--panel); --c-black: #000; }
.pg-light { --fg: var(--text); --fg-h: var(--ink); --pg-a: var(--ink); --pg-aw: initial; --pg-o: var(--ink); color: var(--fg); }
.pg-dark { --fg: #fff; --fg-h: #fff; --pg-a: #fff; --pg-aw: 700; --pg-o: var(--orange); color: var(--fg); }
.pg-row { --pt: 36px; --pb: 36px; --cg: 36px; --cgm: 36px; position: relative; padding: var(--pt) 0 var(--pb); background: transparent no-repeat 50% 50% / cover; }
.pg-bg-image { background-color: var(--panel); }
.pg-bg-image.pg-dark { background-color: var(--ink); } /* flat colour until the image arrives */
.pg-bg-panel { background-color: var(--panel); }
.pg-bg-black { background-color: #000; }
.pg-bg-ink { background-color: var(--ink); }
.pg-bg-orange { background-color: var(--orange-dark); background-image: linear-gradient(var(--bg-dim), var(--bg-dim)), linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)); } /* W4: white text on #F47932 was 2.75:1; the orange band now matches INTEGRATE and Contact (dark orange under the .12 veil, white 5.1:1) */
.pg-bg-orange-dark { background-color: var(--orange-dark); }
.pg-bg-white { background-color: #fff; }
.pg-pt-no { --pt: 0px; } .pg-pt-one { --pt: 1px; } .pg-pt-single { --pt: 36px; } .pg-pt-std { --pt: 54px; } .pg-pt-double { --pt: 72px; } .pg-pt-triple { --pt: 108px; } .pg-pt-quad { --pt: 144px; }
.pg-pb-no { --pb: 0px; } .pg-pb-one { --pb: 1px; } .pg-pb-single { --pb: 36px; } .pg-pb-std { --pb: 54px; } .pg-pb-double { --pb: 72px; } .pg-pb-triple { --pb: 108px; } .pg-pb-quad { --pb: 144px; }
.pg-g-no { --cg: 0px; --cgm: 0px; } .pg-g-one { --cg: 1px; --cgm: 1px; } .pg-g-half { --cg: 18px; --cgm: 18px; } .pg-g-std { --cg: 54px; } .pg-g-double { --cg: 72px; }
/* the hero sits under the transparent bar: the bar's height on top of its own padding */
/* An owner section inserted between captured rows (overrides "after") opens with the two 20px
   spacers the captured rows open with (AMD#4: the AMD section sat 36px under the hero). A row with its own
   ground (the Careers skills panel) keeps the spacing ruled for it. */
.pg-row[data-override="inserted"]:not([class*="pg-bg-"]) { --pt: 76px; }
.pg-row.pg-top, .pg > .pg-row:first-child { padding-top: calc(var(--header-h) + var(--pt)); }
/* a row the editor made a share of the window high (the theme measures the window less its 70px bar) */
.pg-ratio { display: flex; flex-direction: column; min-height: calc(var(--ratio) * (100vh - 70px) / 100); }
.pg-top.pg-ratio { min-height: calc(var(--ratio) * (100vh - 70px) / 100 + var(--header-h)); }
.pg-ratio > .pg-cols { flex: 1 0 auto; width: 100%; }
/* The hero band's share is of the whole window, the bar it sits under included (measured on the crawl at 900px high:
   /products-and-pricing/ 50 = 450px, /academic-research/ 65 = 585px, /gazeassist/ 100 = 900px; QA V10). Phones: V13. */
@media (min-width: 570px) { .pg-hero.pg-ratio { min-height: calc(var(--ratio) * 1vh); } }
/* m8 / O5 (QA 2026-10-01): on tablets the original's half-window title band (/products-and-pricing/) was as tall as its title (217 px at 768,
   450 here), and the photo's light beam then passed over the title, not through it. */
@media (min-width: 570px) and (max-width: 959px) { .pg-hero.pg-ratio[style*='--ratio:50']:not([data-override]) { min-height: calc(var(--header-h) + 160px); background-position: 50% 68% !important; } }
/* V8 (QA r6): the products-and-pricing hero photo sits higher (its top edge from 570 px, 25 % from 1200 px), so the title lies
   on the dark forehead, not on the light beam and face mesh: the H1 in 21 languages 3.11:1 or better at 600-1920 (was
   2.19-2.78 in 13 of them).
   Positioning only, no darker layer (owner rule). */
@media (min-width: 570px) { .pg.pg-pricing > .pg-row.pg-hero.pg-ratio.pg-bg-image { background-position: 50% 0% !important; } }
@media (min-width: 1200px) { .pg.pg-pricing > .pg-row.pg-hero.pg-ratio.pg-bg-image { background-position: 50% 25% !important; } } /* wide screens have room: the eye and its beam stay in view under the title */
/* A row the theme marked as a top row, standing under the hero, is not under the bar: its own padding only
   (/driver-monitoring/: 138px from the hero to the DMS title, as the original; it was 202, QA V10). */
@media (min-width: 960px) { .pg > .pg-hero:not(.hide-d) ~ .pg-row.pg-top { padding-top: var(--pt); } }
/* V13: on phones a window-high hero filled the whole screen and blew its wide photo up three times; the original's
   phone hero is as tall as its content, the photo's subject below the title. */
@media (max-width: 569px) {
  .pg-ratio, .pg-top.pg-ratio { min-height: 0; }
  .pg-hero.pg-ratio { min-height: calc(var(--header-h) + 420px); padding-top: calc(var(--header-h) + var(--pt)); }
}
.pg-row.pg-veil::before { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--bg-dim), var(--bg-dim)), rgba(0, 0, 0, .12); pointer-events: none; }
/* N11 (QA r3) / V9 (QA r4): the 13 px white licence text and email over the light face on the GazeSense phone hero need a
   darker ground (2.66:1); the .45 veil darkened the whole hero brown, so only the licence card (its heading, text and buy
   button, one block) takes it, the hero keeps the .12 veil of every photo band. */
#trial-licence, #trial-licence-t { scroll-margin-top: 20px; } /* V10 (QA r4): a trial button lands with the licence heading 20 px below the fixed bar (html scroll-padding takes the bar) */
/* V20: one veil for every orange or photo hero and band, so a visitor does not meet two hero tones one click apart:
   the homepage hero, the contact band, the blog and archive bands and the INTEGRATE band take the page-builder veil. */
:is(.hero, .band, .archive-band, .integrate, .follow) { position: relative; }
:is(.hero, .band, .archive-band, .integrate, .follow)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--bg-dim), var(--bg-dim)), rgba(0, 0, 0, .12); pointer-events: none; }
:is(.hero, .band, .archive-band, .integrate, .follow) > * { position: relative; }
.pg-row.pg-bg-image > * { position: relative; }
/* M7: a short band (a trial band, WORK WITH US) cut bg.jpg at its radial highlight, where the JPEG's 8-bit steps show
   as rings; the band's foot of the image is the smooth fall-off the original's taller bands showed. */
.pg-row[data-form][data-bg$='/2020/01/bg.jpg'], .pg-row.pg-full[data-bg$='/2020/01/bg.jpg'] { background-position: 50% 100% !important; }
.pg-cols { --cols: 12; display: grid; grid-template-columns: minmax(0, 1fr); } /* one column under 960; the twelve-column grid is below */
.pg-cols-full { padding: 0 var(--gutter); }
@media (min-width: 960px) and (max-width: 1199px) { .pg > .pg-row > .pg-cols.ew-wrap { padding-left: 32px; padding-right: 32px; } } /* M10: the theme's 32 px page gutter at these widths (36 added a line to some titles at 1024) */
.pg-ph-no > .pg-cols { padding-left: 0; padding-right: 0; }
.pg-ph-double > .pg-cols { padding-left: 72px; padding-right: 72px; }
.pg-ph-triple > .pg-cols { padding-left: 108px; padding-right: 108px; }
.pg-ph-quad > .pg-cols { padding-left: 144px; padding-right: 144px; }
.pg-nested { padding-top: 0; padding-bottom: 0; }
.pg-nested > .pg-cols { max-width: none; padding-left: 0; padding-right: 0; }
/* a column is the theme's cell: full height of its row, its content placed top, middle or bottom */
.pg-col { --gap: 36px; --max: none; display: flex; flex-direction: column; min-width: 0; }
.pg-col-inner { width: 100%; max-width: var(--max); }
.pg-hpos-center > .pg-col-inner { margin-left: auto; margin-right: auto; }
.pg-hpos-right > .pg-col-inner { margin-inline-start: auto; }
.pg-pos-middle { justify-content: center; }
.pg-pos-bottom { justify-content: flex-end; }
/* The column's alignment is the default; a block that carries its own alignment keeps it (the crawl's).
   V15: the captured left and right are the original's start and end (an LTR page), so they mirror on
   right-to-left pages and stay left for English text marked dir="ltr" inside them. */
.pg-col.pg-align-left { text-align: start; }
.pg-col.pg-align-center { text-align: center; }
.pg-col.pg-align-right { text-align: end; }
.pg-col-inner > * + * { margin-top: var(--gap); }
.pg-gap-no { --gap: 0px; } .pg-gap-one { --gap: 1px; } .pg-gap-half { --gap: 18px; } .pg-gap-double { --gap: 72px; } .pg-gap-triple { --gap: 108px; } .pg-gap-quad { --gap: 144px; }
.pg-pad-one { padding: 1px; } .pg-pad-half { padding: 18px; } .pg-pad-single { padding: 36px; } .pg-pad-double { padding: 72px; } .pg-pad-triple { padding: 108px; } .pg-pad-quad { padding: 144px; } .pg-pad-std { padding: 72px 36px; }
.pg-col-bg { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
.pg-bg-panel .pg-col.pg-bg-panel[style*='border'] { background-color: #fff; } /* M13 GAZEASSIST#16: a grey box on a grey band vanished (the theme's #EAEAEA mapped to the band's #F7F7F7); white keeps the panel. O8: only the editor's bordered box (GazeAssist Pricing); a borderless panel column on a panel band (AMD ABOUT EYEWARE) stays part of the band, as on the original */
.pg-col-bg.pg-dark:not([class*='pg-bg-']) { background-color: var(--orange-dark); } /* flat colour until the image arrives */
.pg-col-bg.pg-dark[data-bg] { position: relative; isolation: isolate; }
.pg-col-bg.pg-dark[data-bg]::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg-dim); pointer-events: none; } /* m9 (QA r6): a photo column (the GazeSense solution tiles) takes the site-wide dim, as every orange and photo ground */
/* V26: a top-aligned, left-aligned grey panel beside a taller column (the walk-through's in-page navigation) ends
   under its own content, as the original's did, instead of running the height of the row. */
.pg-col-bg.pg-pos-top.pg-align-left.pg-bg-panel { align-self: start; }
.pg-spacer { height: var(--hm); }
.pg-heading { position: relative; text-align: start; }
.pg-heading.pg-align-center { text-align: center; }
.pg-heading.pg-align-right { text-align: end; }
.pg-h { margin: var(--mt, 0px) 0 var(--mb, 0px); font: 700 var(--fs, 25px)/var(--lh, 1.2) var(--sans); color: var(--fg-h, var(--ink)); }
.pg-h b, .pg-h strong { font-weight: inherit; }
.pg-h-normal { font-weight: 400; }
.pg-sub { margin: var(--mt, 0px) 0 var(--mb, 0px); font: 400 var(--fs, 18px)/var(--lh, 1.2) var(--sans); color: var(--fg, var(--text)); }
.pg-sub-bold, .pg-h-bold { font-weight: 700; }
/* the heading's rule: the theme's 4px spacer with the line at its foot */
.pg-line { display: block; height: 4px; }
.pg-line::before { content: ''; display: block; width: var(--rule, 150px); max-width: 100%; margin-top: 3px; border-bottom: var(--rule-h, 2px) solid var(--rule-c, var(--orange)); }
/* V8: the ruled 2 px orange rule; on an orange or orange-photo band orange on orange vanishes, so it is white there.
   Black and ink bands keep orange (it reads); a light panel inside a dark band is orange again. */
.pg-dark { --rule-c: var(--dark-rule, #fff); }
.pg-light { --rule-c: var(--orange); }
.pg-bg-black, .pg-bg-ink { --dark-rule: var(--orange); }
.pg-align-center > .pg-line::before { margin-left: auto; margin-right: auto; }
.pg-align-right > .pg-line::before { margin-inline-start: auto; }
/* V15: a title still in English on a right-to-left page (marked dir="ltr") keeps its rule under its first letter, not across the column. */
.pg-heading:dir(rtl):has(> .pg-h:dir(ltr)) > .pg-line { direction: ltr; }
.pg-text { font: 400 18px/1.75 var(--sans); color: var(--fg, var(--text)); }
.pg-text-small { font-size: 13px; }
.pg-text p + p, .pg-text p + ul, .pg-text ul + p { margin-top: 18px; }
.pg-text ul, .pg-text ol { padding-inline-start: 18px; }
.pg-text li > ul, .pg-text li > ol { padding-inline-start: 27px; } /* M11: nested items indented 27 px, as the original */
.pg-text ul { list-style: disc; }
.pg-text ol { list-style: decimal; }
.pg-text img { display: block; max-width: 100%; height: auto; }
.pg-text h2, .pg-text h3, .pg-text h4 { margin: 27px 0 12px; font-weight: 700; color: var(--fg-h, var(--ink)); line-height: 1.3; }
.pg-text h2 { font-size: 25px; }
.pg-text h3 { font-size: 20px; }
.pg-text h4 { font-size: 18px; }
.pg-text.pg-align-left { text-align: start; }
.pg-text.pg-align-center { text-align: center; }
.pg-text.pg-align-right { text-align: end; }
.pg-text.pg-align-justify { text-align: justify; }
/* V15: a right alignment typed into the text (a quote's attribution) is the end side: left on a right-to-left page. */
:is(.pg-text, .post-body) [style*='text-align:right']:dir(rtl) { text-align: left !important; }
/* the editor's own colours (a heading's, or words coloured inline), whatever the band */
.pg .pg-c-white { color: #fff; }
.pg .pg-c-ink { color: var(--ink); }
.pg .pg-c-orange { color: var(--pg-o, var(--orange)); }
.pg .pg-c-orange-dark { color: var(--pg-o, var(--orange-dark)); } /* W4: on a light band the editor's orange text (links, "here", a citation list, a 16 px title) is under 4.5:1 in orange and in dark orange, so it is ink there (links keep their underline); a dark band keeps orange */
a.pg-iconbox :is(.pg-c-orange, .pg-c-orange-dark) { text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* W4: a linked icon box whose title was the link's colour keeps the link look */
.pg .pg-c-black { color: #000; }
.pg .pg-c-panel { color: var(--panel); }
/* links and buttons follow the nearest band: orange on a light one, white and bold on a dark one */
.pg :is(.pg-light, .pg-dark) :is(.pg-text, .pg-team-social) a { color: var(--pg-a); font-weight: var(--pg-aw, inherit); }
.pg .pg-light .ew-btn:not(.ew-btn-outline):not(.ew-btn-light) { background: var(--orange-dark); color: #fff; }
.pg .pg-light .ew-btn:not(.ew-btn-outline):not(.ew-btn-light):hover { background: var(--btn-hover); color: #fff; }
.pg .pg-light .pg-dark .ew-btn:not(.ew-btn-outline) { background: #fff; color: var(--accent-ink); }
.pg .pg-light .pg-dark .ew-btn:not(.ew-btn-outline):is(:hover, :focus-visible) { background: #fef3ec; border-color: var(--accent-ink); color: var(--accent-ink); } /* owner 2026-10-02: the white button reacts (the rule above out-specified the hover); V2 (QA r6): the one white-button hover */
.pg .pg-light .pg-dark .ew-btn:not(.ew-btn-outline):hover { box-shadow: inset 0 0 0 .5px var(--accent-ink); }
.pg-list { margin-bottom: 35px; text-align: start; }
.pg-list li { display: flex; gap: var(--icon-gap, 10px); align-items: flex-start; font-size: var(--fs, 18px); line-height: var(--lh, 1.6); }
.pg-list li + li { margin-top: 7px; }
.pg-list .check { flex: 0 0 15px; width: 15px; height: 21px; margin-top: 4px; color: var(--orange); }
/* V15: the chevron points into its words: flipped wherever the item runs right to left (an English item marked dir="ltr" keeps it). */
.check:dir(rtl) { transform: scaleX(-1); }
.pg-list-icon { flex: 0 0 auto; width: var(--icon, 40px); height: auto; margin-top: 2px; }
.pg-list li:has(> .pg-list-icon) { align-items: center; } /* V27: a label sits on its icon's middle (simulators FEATURES), as the original's icon list */
.pg-list li:has(> .pg-list-icon) > .pg-list-icon { margin-top: 0; }
/* O0 (QA 2026-10-01): an icon list in a third of a tablet row (simulators FEATURES, 570 to 959 px) left its label 25 to 81 px
   and broke words letter by letter. From 768 the icon is smaller and nearer its label (every word whole, as the original's
   three columns); below 768 the icon stands above its label, centred, so the label has the column's whole width. */
@media (min-width: 768px) and (max-width: 959px) {
  .pg-md-33 .pg-list li:has(> .pg-list-icon) { --icon: 52px; gap: 14px; }
}
@media (min-width: 570px) and (max-width: 767px) {
  .pg-md-33 .pg-list li:has(> .pg-list-icon) { flex-direction: column; gap: 8px; text-align: center; }
  .pg-md-33 .pg-list li:has(> .pg-list-icon) + li { margin-top: 24px; }
}
/* a sub-list in an item's text (academic research, 3D camera options): stacked under the item's first line, no bullet, as the original */
.pg-list li :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
.pg-list li li { display: block; margin-top: 0; }
.pg-btn { display: block; }
.pg-btn-ult { margin-bottom: 35px; } /* Ultimate's buttons, lists, icon boxes and team members keep 35px under them, inside their column */
.pg-btn.pg-align-left { text-align: start; }
.pg-btn.pg-align-center { text-align: center; }
.pg-btn.pg-align-right { text-align: end; }
/* a button at its captured size, in the brand's face: Ultimate's custom box (width, min-height), its presets,
   or the theme's one size (scaled to 80% on phones, as the theme does) */
.pg-trial { padding: 12px 0; margin-bottom: 0; }
/* V16: a trial band ends as it starts: the trial row that closes its band gets the 30 px spacer and the column
   gutter under it that the editor put above it (academic, driver and AMD carry a spacer below; simulators and
   shopper did not, so their button hugged the footer). */
.pg-col-inner > .pg-row[data-form]:last-child { margin-bottom: calc(30px + var(--gap)); }
/* an image fills its media box (the column, or the width the editor set), as the theme's does */
:where(.pg-image) { margin: 0; } /* V24: no specificity, so the column gutter above an image (.pg-col-inner > * + *) applies again, as the theme gave it */
.pg-image { line-height: 0; text-align: start; }
.pg-image.pg-align-center { text-align: center; }
.pg-image.pg-align-right { text-align: end; }
.pg-image-w { display: inline-block; width: 100%; max-width: var(--max, 100%); }
.pg-image-w a { display: block; }
.pg-image img { display: block; width: 100%; height: auto; }
.pg-video { margin-left: auto; margin-right: auto; }
.pg-video-wide { aspect-ratio: 21 / 9; }
.yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Ambient videos (eyeware.js): the player takes no pointer events, so YouTube's hover controls, "More videos" and share
   never show; the poster sits over it until it has played past YouTube's title bar, then fades. */
.yt-ambient { overflow: hidden; background: #000; }
.yt-ambient iframe { pointer-events: none; }
.yt-ambient .yt-poster { z-index: 1; transition: opacity .6s; pointer-events: none; }
.yt-ambient.yt-playing .yt-poster { opacity: 0; }
.pg-iconbox { display: block; margin-bottom: 35px; text-align: center; color: inherit; text-decoration: none; }
.pg-iconbox-iw { display: block; line-height: 0; padding-bottom: 4px; }
.pg-iconbox-icon { display: inline-block; width: var(--size, 150px); max-width: 100%; height: auto; }
.pg-iconbox-title { margin: 0 0 15px; font: 700 var(--fs, 16px)/var(--lh, 1.2) var(--sans); color: var(--fg-h, var(--ink)); }
.pg-iconbox-iw + .pg-iconbox-body > .pg-iconbox-title { margin-top: 25px; }
.pg-iconbox-title.pg-h-normal { font-weight: 400; }
.pg-iconbox-title.pg-h-light { font-weight: 300; } /* M8: SIMPLE SETUP / RAPID PROTOTYPING captions, light as the original */
.pg-iconbox-text { margin-top: 18px; font-size: var(--fs, 18px); line-height: var(--lh, 1.75); color: var(--fg, var(--text)); }
.pg-iconbox-text p + p { margin-top: 18px; }
.pg-iconbox-left { display: flex; gap: 14px; align-items: flex-start; text-align: start; }
.pg-iconbox-left .pg-iconbox-iw { flex: none; width: min(var(--size, 54px), 30%); }
.pg-iconbox-left .pg-iconbox-iw + .pg-iconbox-body > .pg-iconbox-title { margin-top: 0; }
.pg-iconbox-left .pg-iconbox-title + .pg-iconbox-text { margin-top: 0; line-height: var(--lh, 1.4); } /* M13 ACADEMIC#12: the author line tight under the paper title */
.pg-iconbox-left .pg-iconbox-title { font-size: 17px; line-height: 1.35; } .pg-iconbox-left .pg-iconbox-text { font-size: 16px; } /* N20 (QA r3): the reference card (a paper's title and its authors beside the document icon) at the original's citation size, not the 20 px item title: 5 title lines at 390 became 3 */
a.pg-iconbox:hover .pg-iconbox-title { color: var(--orange); }
.pg-grid { --gm: 1; display: grid; gap: 36px; grid-template-columns: repeat(var(--gm), minmax(0, 1fr)); }
.pg-grid-m2 { --gm: 2; } .pg-grid-m3 { --gm: 3; } .pg-grid-m4 { --gm: 4; } .pg-grid-m5 { --gm: 5; } .pg-grid-m6 { --gm: 6; }
.pg-grid-g-no { gap: 0; } .pg-grid-g-half { gap: 18px; } .pg-grid-g-double { gap: 72px; }
.pg-grid-logos { align-items: center; }
.pg-grid-logos img { filter: grayscale(1); transition: filter .3s; }
.pg-grid-logos .pg-card:hover img { filter: grayscale(0); }
.pg-card { min-width: 0; text-align: start; }
.pg-card-img { display: block; overflow: hidden; border-radius: 8px; }
.pg-card-img img { display: block; width: 100%; height: auto; }
/* A thumbnail with a captured or set ratio is cropped to it, as the theme's isotope grid did (equal tiles). */
.pg-card-img[style*='--ratio'] { position: relative; padding-top: var(--ratio); }
.pg-card-img[style*='--ratio'] > img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.pg-card-body { padding: 16px 0 0; }
/* M9: award and news cards as the original: a square image in a 1 px frame (white on a dark band, light grey on a
   light one) and the title 36 px under it. */
.pg-grid:not(.pg-grid-logos) .pg-card:has(> .pg-card-body) > .pg-card-img { border-radius: 0; border: 1px solid rgba(65, 64, 66, .15); }
.pg-dark .pg-grid:not(.pg-grid-logos) .pg-card:has(> .pg-card-body) > .pg-card-img { border-color: #fff; }
.pg-grid:not(.pg-grid-logos) .pg-card-img + .pg-card-body { padding-top: 36px; }
/* Overlay text on a thumbnail, as the original drew it (title, category, date centred on a tinted layer; owner 2026-09-30). */
.pg-card-overlaid { position: relative; }
.pg-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: #fff; background: rgba(0, 0, 0, var(--ov, .5)); text-decoration: none; transition: background-color .2s; }
.pg-card-overlay-light { color: var(--ink); background: rgba(255, 255, 255, var(--ov, .5)); }
.pg-card-overlaid:hover .pg-card-overlay { background: rgba(0, 0, 0, calc(var(--ov, .5) + .15)); }
/* Untinted at rest where the original was (tmb-overlay-showed absent): the text carries a shadow, the tint comes on hover. */
.pg-card-overlay-clear { background: var(--bg-dim); } /* V4 (QA r6): the original had no tint and no shadow at rest here (GazeSense Cube Eye card), so the build's text shadow is gone; the site-wide dim, as on every photo ground. The tinted cards keep the original's own tint (--ov) */
.pg-card-overlaid:hover .pg-card-overlay-clear { background: rgba(0, 0, 0, var(--ov, .5)); }
.pg-card-overlay-title { font: 700 22px/1.3 var(--sans); max-width: 34ch; }
.pg-card-overlay-meta { font: 700 14px/1.4 var(--sans); }
.pg-card-overlay-title + .pg-card-overlay-meta { margin-top: 6px; }
@media (max-width: 600px) { .pg-card-overlay { gap: 6px; padding: 16px; } .pg-card-overlay-title { font-size: 18px; } .pg-card-overlay-meta { font-size: 13px; } }
.pg-card-title { font: 700 20px/1.3 var(--sans); color: var(--fg-h, var(--ink)); }
.pg-card-title a { color: inherit; text-decoration: none; }
.pg-card-title a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; } /* N11 (QA r3): one hover for links, never orange text (1.8:1 on the About awards photo, 2.75:1 on white) */
.pg-dark .pg-card-title a:hover { color: inherit; text-decoration-color: currentColor; }
.pg-card-text { margin-top: 8px; font-size: 16px; line-height: 1.6; }
.pg-card-btn { margin-top: 14px; }
.pg-team { margin-bottom: 35px; text-align: center; }
/* the original's leadership cards (V25): square greyscale photos edge to edge (colour on hover), names in capitals
   at the item-title size, roles orange and letter-spaced, profile links as marks */
.pg-team-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0 0 24px; border-radius: 0; filter: grayscale(1); transition: filter .3s; }
.pg-team:hover .pg-team-img { filter: none; }
.pg-team-name { font: 700 20px/1.3 var(--sans); text-transform: uppercase; color: var(--fg-h, var(--ink)); }
.pg-team-role { margin-top: 4px; font: 400 13px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } /* W4: orange 13 px on the panel was 2.57:1 */
.pg-team-social { display: flex; justify-content: center; gap: 4px; margin-top: 6px; font-size: 14px; }
.pg .pg-team .pg-team-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ink); }
.pg .pg-team .pg-team-social a:hover { color: var(--orange-dark); } /* m-C (QA r3): 4.1:1 on white, an icon (3:1 needed) */
.pg-banner { position: relative; margin: 0; overflow: hidden; border-radius: 8px; background: var(--ink); }
.pg-banner img { display: block; width: 100%; height: auto; }
.pg-banner::before { content: ''; position: absolute; inset: 0; background: var(--bg-dim); pointer-events: none; } /* V4 (QA r6): the site-wide dim over the photo; the original drew the title straight on it, the build's .7 gradient is gone */
.pg-banner-body { position: absolute; inset: auto 0 0 0; padding: 24px; color: #fff; }
.pg-banner-title { font: 700 24px/1.25 var(--sans); color: #fff; }
.pg-banner-text { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.pg-banner-text ul { padding-inline-start: 18px; list-style: disc; }
.pg-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pg-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; border-radius: 6px; }
.pg-stripe { min-height: 48px; margin: 12px 0; }
/* a long word (a German compound, a URL) never widens a phone: break it rather than the page */
.pg-card-body, .pg-text, .pg-h, .pg-sub, .pg-iconbox-body, .pg-list, .pg-team { overflow-wrap: anywhere; }
.pg-list li:has(> .pg-list-icon) { overflow-wrap: break-word; } /* O0: an icon label breaks between words, never inside one */
.pg-divider { margin: 24px 0; border: 0; border-top: 1px solid var(--fg, var(--text)); opacity: .2; }
.pg-row + .pg-divider { margin: 80px 0 0; } /* M13 SIM#6: a divider closing a block of rows sits nearer what follows (115 px under the list, 67 above the product sheet, as the original) */
.pg-group.pg-boxed { padding: 24px; border: 1px solid var(--orange); border-radius: 8px; }
/* the theme's per-width visibility: phone to 569, tablet 570 to 959, desktop from 960; !important so a hidden hero (three-class rule) stays hidden and the natural display returns untouched.
   A hidden first block leaves no gutter above the next one (the theme's rule). */
@media (max-width: 569px) { .hide-m { display: none !important; } .pg-col-inner > .hide-m:first-child + * { margin-top: 0; } }
@media (min-width: 570px) and (max-width: 959px) { .hide-t { display: none !important; } .pg-col-inner > .hide-t:first-child + * { margin-top: 0; } }
@media (min-width: 960px) { .hide-d { display: none !important; } .pg-col-inner > .hide-d:first-child + * { margin-top: 0; } }
/* the theme's values per width */
@media (max-width: 1699px) {
  .pg-pt-triple { --pt: 72px; } .pg-pb-triple { --pb: 72px; } .pg-pt-quad { --pt: 108px; } .pg-pb-quad { --pb: 108px; }
  .pg-gap-quad { --gap: 126px; }
  .pg-pad-double { padding: 54px; } .pg-pad-triple { padding: 72px; } .pg-pad-quad { padding: 108px; }
}
@media (max-width: 1499px) {
  .pg-pt-quad { --pt: 72px; } .pg-pb-quad { --pb: 72px; }
  .pg-gap-triple { --gap: 90px; } .pg-gap-quad { --gap: 108px; }
  .pg-pad-double { padding: 54px 36px; } .pg-pad-triple { padding: 54px; } .pg-pad-quad { padding: 72px; } .pg-pad-std { padding: 54px 36px; }
}
@media (min-width: 480px) { .pg-spacer { height: var(--hml); } }
@media (min-width: 768px) { .pg-spacer { height: var(--htp); } }
@media (min-width: 992px) { .pg-spacer { height: var(--ht); } }
@media (min-width: 1200px) { .pg-spacer { height: var(--h); } }
@media (min-width: 570px) {
  .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-grid-1 { grid-template-columns: 1fr; }
  .pg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  /* the theme's columns are table cells: spans that add up to less than twelve share the whole row, so the grid has as many tracks as the spans add up to */
  .pg-cols { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 var(--cg); }
  .pg-col { grid-column: span var(--span, 12); }
  .pg-span-1 { --span: 1; } .pg-span-2 { --span: 2; } .pg-span-3 { --span: 3; } .pg-span-4 { --span: 4; } .pg-span-5 { --span: 5; } .pg-span-6 { --span: 6; } .pg-span-7 { --span: 7; } .pg-span-8 { --span: 8; } .pg-span-9 { --span: 9; } .pg-span-10 { --span: 10; } .pg-span-11 { --span: 11; } .pg-span-12 { --span: 12; }
  .pg-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pg-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pg-grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  /* the editor's narrower content box is full width once columns stack (the theme's custom width is a desktop setting) */
  .pg-col-inner { max-width: none; }
  /* stacked columns: the theme's 36px (the row's gutter) above every column but the first, empty ones too */
  .pg-col + .pg-col { margin-top: var(--cgm); }
  /* inverted rows show their second column first on tablets and phones */
  .pg-inverted > .pg-cols > .pg-col:nth-child(2) { order: -1; margin-top: 0; }
  .pg-inverted > .pg-cols > .pg-col:first-child { margin-top: var(--cgm); }
  .pg-ph-double > .pg-cols, .pg-ph-triple > .pg-cols, .pg-ph-quad > .pg-cols { padding-left: 36px; padding-right: 36px; }
  .pg-gap-double { --gap: 54px; } .pg-gap-triple { --gap: 72px; } .pg-gap-quad { --gap: 90px; }
  .pg-pad-triple, .pg-pad-quad { padding: 54px 36px; } .pg-pad-std { padding: 36px; }
}
@media (max-width: 767px) {
  .pg-h { font-size: var(--fsm, var(--fs, 25px)); line-height: var(--lhm, var(--lh, 1.2)); }
  .pg-sub { font-size: var(--fsm, var(--fs, 18px)); line-height: var(--lhm, var(--lh, 1.2)); }
}
/* V9/V21: logo strips and card grids per width, as the original's carousels (owl: data-md, data-sm) and isotope grids
   (one column fewer while the content box is under 1000 px). Logos keep their own ratio and never fill a tile. */
.pg-grid-logos img { height: auto; }
.pg-grid-logos .pg-card-img { border-radius: 0; }
.pg-grid-logos:not(.pg-grid-carousel) { gap: 0; } /* the isotope logo pair (CES, AutoSens) sits edge to edge */
@media (max-width: 569px) {
  .pg-grid-carousel { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 16px; }
  .pg-grid-carousel > .pg-card { flex: 0 0 calc((100% - (var(--pr) - 1) * 16px) / var(--pr)); }
  .pg-grid-logos:not(.pg-grid-carousel) { gap: 36px; }
}
@media (min-width: 570px) and (max-width: 959px) {
  .pg-grid-carousel { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); justify-content: center; gap: 24px; } /* O12: the tablet carousel fills its row as the original's did (driver partners 161 px, not 110) */
}
@media (min-width: 570px) and (max-width: 1071px) {
  .pg-grid-3:not(.pg-grid-logos) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* O12: the CES and AutoSens pair stacks only where the original stacked it (960 to 1071 px); on tablets it sits side by side */
@media (min-width: 960px) and (max-width: 1071px) { .pg-grid-2.pg-grid-logos:not(.pg-grid-carousel) { grid-template-columns: minmax(0, 461px); justify-content: center; } }
/* V9: tablet widths (570 to 959 px) keep the original's tablet columns (col-md-NN, captured as the column's md):
   a row with such columns lays them side by side (36 px apart, wrapping as the theme did); its other columns stay full width. */
@media (min-width: 570px) and (max-width: 959px) {
  .pg-cols:has(> [class*='pg-md-']) { display: flex; flex-wrap: wrap; gap: var(--cgm) 36px; }
  .pg-cols:has(> [class*='pg-md-']) > .pg-col { flex: 0 0 100%; margin-top: 0; }
  .pg-cols > .pg-md-25 { flex-basis: calc(25% - 27px) !important; } .pg-cols > .pg-md-33 { flex-basis: calc(33.333% - 24px) !important; } .pg-cols > .pg-md-50 { flex-basis: calc(50% - 18px) !important; }
  .pg-cols > .pg-md-66 { flex-basis: calc(66.666% - 12px) !important; } .pg-cols > .pg-md-75 { flex-basis: calc(75% - 9px) !important; }
}
@media (max-width: 569px) {
  .pg-pt-std { --pt: 36px; } .pg-pb-std { --pb: 36px; }
  .pg-gap-double { --gap: 36px; } .pg-gap-triple { --gap: 54px; } .pg-gap-quad { --gap: 72px; }
}

/* ---- Links inside text (prose, lists, icon-box text: V14): one style (owner 2026-09-30: "don't make links look like this"). Brand
   ink with a 1 px ink underline (--link-line), orange underline on hover (W4; owner 2026-10-01 "1 on the grey underline"; orange text was 2.75:1); on an orange or dark band, white and bold, underline on hover. ---- */
:is(.ew-lead, .pg-text, .post-body, .pg-list, .pg-iconbox-text, .pg-team-social, .band-intro, .hero-sub) a { color: var(--ink); font-weight: inherit; text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; } /* W4: ink text with an ink underline (orange text on white was 2.75:1; ink 10.31:1) */
:is(.ew-lead, .pg-text, .post-body, .pg-list, .pg-iconbox-text, .pg-team-social, .band-intro, .hero-sub) a:hover { text-decoration-color: var(--orange); }
.post-body a.ew-btn, .post-body a.ew-btn:hover { color: #fff; text-decoration: none; font-weight: 700; } /* N13 (QA r3): a Beam button in a post (the honor post's) is the primary .ew-btn, not a text link; bold as every primary label (V7, QA r4: the post link rule made it 400, 4.11:1) */
.post-body .post-cta { margin-top: 27px; }
:is(.pg-dark, .band, .hero, .integrate) :is(.ew-lead, .pg-text, .pg-list, .pg-iconbox-text, .band-intro, .hero-sub, .pg-team-social, .pg-sub, .pg-iconbox-title) a, :is(.pg-dark, .band, .hero, .integrate) :is(.pg-sub, .pg-text, .pg-iconbox-text) a :is(.pg-c-white, .pg-c-orange, .pg-c-orange-dark) { color: #fff; font-weight: 700; text-decoration-line: none; } /* m3: every link on a dark band in the one dark-band style (academic black band, driver Download in a subtitle) */
:is(.pg-dark, .band, .hero, .integrate) :is(.ew-lead, .pg-text, .pg-list, .pg-iconbox-text, .band-intro, .hero-sub, .pg-team-social, .pg-sub, .pg-iconbox-title) a:hover { text-decoration-line: underline; text-decoration-color: currentColor; } /* W4: a dark band keeps white bold links, underlined on hover only */

/* ---- One header band for the Company pages (owner 2026-09-30: "each header for company looks different. clean them up").
   About, Careers and Press (rebuilt page rows, .pg-company), Blog (.archive-band-blog; the category archives keep their own band) and Contact (.band) share one height,
   padding, title size, subtitle size and width, centred; the captured spacers and column splits of those rows are set
   aside. About's and Press's bands were hidden on phones as on live; every Company page now opens with its band. ---- */
:is(.pg-company > .pg-row:first-child, .band, .archive-band-blog) { display: flex !important; flex-direction: column; justify-content: center; align-items: stretch; min-height: calc(var(--header-h) + 240px); padding: calc(var(--header-h) + 40px) 0 48px !important; text-align: center; }
.pg-company > .pg-row:first-child .pg-cols { display: block; flex: none; }
.pg-company > .pg-row:first-child :is(.pg-empty, .pg-spacer) { display: none; }
.pg-company > .pg-row:first-child :is(.pg-col, .pg-col.pg-align-left) { text-align: center; }
.pg-company > .pg-row:first-child .pg-col-inner { max-width: 760px; margin: 0 auto; }
.pg-company > .pg-row:first-child .pg-col-inner > * + * { margin-top: 0; }
:is(.pg-company > .pg-row:first-child .pg-h, .band h1, .archive-band-blog h1, .archive-band-blog h1.h-section) { margin: 0 !important; padding: 0; font: 700 36px/1.15 var(--sans) !important; color: #fff; text-transform: uppercase; letter-spacing: 0; }
.archive-band-blog h1.h-section::after { display: none; }
:is(.pg-company > .pg-row:first-child :is(.pg-sub, .pg-text), .band-intro, .archive-intro) { max-width: 560px; margin: 16px auto 0 !important; font: 400 18px/1.6 var(--sans) !important; color: #fff; }
.pg-company > .pg-row:first-child .pg-text p { font: inherit; margin: 0; }
.pg-company > .pg-row:first-child .pg-btn { margin-top: 32px !important; text-align: center; }
@media (min-width: 960px) {
  :is(.pg-company > .pg-row:first-child, .band, .archive-band-blog) { min-height: calc(var(--header-h) + 300px); padding: calc(var(--header-h) + 64px) 0 64px !important; }
}
/* 50px from 768px, where every page title is 50 (the ruled scale's phone step starts below 768; QA V11) */
@media (min-width: 768px) { :is(.pg-company > .pg-row:first-child .pg-h, .band h1, .archive-band-blog h1, .archive-band-blog h1.h-section) { font-size: 50px !important; } }
/* O6 (QA 2026-10-01): one band in fact, not only in name. The title starts at the same place on all five pages (the content
   is set from the top, not centred, so a longer subtitle no longer moves it), the band is one height (tall enough for the
   longest subtitle, Press's), About's and Press's title column loses the stacked-column gutter it got below 960 px,
   and the email in the subtitle is the band's one link style (white, bold, underlined on hover). */
:is(.pg-company > .pg-row:first-child, .band, .archive-band-blog) { justify-content: flex-start; min-height: calc(var(--header-h) + 300px); }
@media (min-width: 570px) { :is(.pg-company > .pg-row:first-child, .band, .archive-band-blog) { min-height: calc(var(--header-h) + 280px); } }
@media (min-width: 960px) { :is(.pg-company > .pg-row:first-child, .band, .archive-band-blog) { min-height: calc(var(--header-h) + 290px); padding-top: calc(var(--header-h) + 56px) !important; } }
.pg-company > .pg-row:first-child .pg-col { margin-top: 0 !important; }
.pg-company > .pg-row:first-child .pg-col:not(:has(.pg-heading, .pg-text, .pg-btn)) { display: none; }
:is(.pg-company > .pg-row:first-child, .band) :is(.pg-sub, .pg-text, .band-intro) a { color: #fff; font-weight: 700; text-decoration: none; }
:is(.pg-company > .pg-row:first-child, .band) :is(.pg-sub, .pg-text, .band-intro) a:hover { text-decoration: underline; }

/* ---- V19: language-aware type. The html lang attribute (src/config/site.ts: de-DE, ja, ko-KR, zh-CN...) decides. ----
   Lato draws Latin only and most rules above name it alone in their font shorthand, so Cyrillic, Arabic, Hebrew and
   Devanagari titles fell back to the browser's serif: every element takes the body's stack after Lato (the generic
   sans-serif picks each script's system font by lang). */
:where(body.clean, .site-header, .site-footer) :where(*:not(.hdr-langs a)) { font-family: var(--sans) !important; }
/* Long-compound languages hyphenate at the dictionary's points ("PRODUKT-EIGENSCHAFTEN") instead of splitting a word
   at any letter; a title breaks only at a hyphenation point or, failing one, overflows into a break, never mid-word first. */
/* O4 (QA 2026-10-01): only on phones, where a compound can be wider than the column; from 570 px prose wraps between words
   as the original did (three hyphenated line ends in a row read ragged). Buttons and titles never hyphenate: a label split
   inside a word ("TESTVER- / SION") is a broken label, and a title typed in capitals hyphenates at the wrong syllable. */
@media (max-width: 569px) { :is(:lang(de), :lang(nl), :lang(da), :lang(cs), :lang(pl), :lang(ru)) :is(main, .site-footer, .hdr-nav) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } }
:is(:lang(de), :lang(nl), :lang(da), :lang(cs), :lang(pl), :lang(ru)) .ew-btn { -webkit-hyphens: manual; hyphens: manual; }
:is(:lang(de), :lang(nl), :lang(da), :lang(cs), :lang(pl), :lang(ru)) :is(.pg-h, .pg-text :is(h1, h2, h3, h4), .post-body :is(h1, h2, h3, h4), .h-section, .hero h1, .solutions h2, .integrate h3, .integrate-sub, .ai h3, .product-text h3, .archive-band h1, .post-hero h1, .post-head h1, .band h1, .pg-iconbox-title, .pg-card-title, .card-title, .pg-banner-title, .hdr-item, .ftr-h) { -webkit-hyphens: manual; hyphens: manual; } /* N6 (QA r3): titles break between words at every width (phones too: auto hyphenation split words that fit the next line, "webka- / merou"); a soft hyphen in the source still breaks a compound (FAHRER-ÜBERWACHUNG) */
:is(.pg-h, .pg-sub, .pg-iconbox-title, .pg-card-title, .pg-banner-title) { overflow-wrap: break-word; }
.hy { display: inline-block; max-width: 100%; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3; text-decoration: inherit; } /* R8-V4 (QA r8): an inline block takes no underline from its link, so it repeats its parent's (at rest and on hover) */
a :has(.hy) { text-decoration: inherit; } /* R8-V4: and every inline element between the link and its .hy word (a > b > .hy, a > span.n > .hy) passes the link's on */ /* N6 (QA r3): a long word in a title (text.ts hyLong) moves to the next line whole; only a word wider than the line breaks, at a syllable, with a hyphen */
/* Japanese: no line opens with a long-vowel mark, small kana or closing punctuation (strict kinsoku); titles, labels and
   buttons break between phrases, never inside a katakana word or before a lone particle. Korean keeps words whole
   (it spaces its words); Chinese takes the strict punctuation rules. */
:lang(ja) :is(main, .site-footer, .site-header) { line-break: strict; }
:lang(ja) :is(.ftr-col li, .hdr-item) { word-break: auto-phrase; } /* short chrome labels without joints keep the phrase breaking */
:lang(ko) :is(main, .site-footer, .site-header) { word-break: keep-all; overflow-wrap: break-word; }
:lang(zh) :is(main, .site-footer, .site-header) { line-break: strict; }
:is(:lang(zh), :lang(ja)) :is(h1, h2, h3, h4, h5, .pg-h, .pg-sub, .hero-sub, .integrate-sub, .product-sub, .pg-iconbox-title, .pg-card-title, .pg-card-overlay-title, .pg-banner-title, .pg-team-name, .pg-team-role, .card-title, .card-img-title, .ew-btn, .pg-list li, .checks li, .band-intro, .archive-intro, .follow-text, .hdr-card-title, .hdr-card-desc, .hdr-intro, .ftr-h) { word-break: keep-all; overflow-wrap: anywhere; } /* V6 (QA r6): Chinese and Japanese titles, sublines, labels, bullets, buttons and card titles break only at the word joints the build sets (scripts/lib/text-pass.mjs: ICU word segmenter plus the compound lists), at spaces and after punctuation; a word wider than its line may still break. The list is the pass's list */
:is(:lang(ja), :lang(ko), :lang(zh)) :is(.band-intro, .archive-intro, .follow-text) { text-wrap: pretty; } /* no one-word last line (zh 聯絡。) */
@media (max-width: 1024px) { :is(:lang(ja), :lang(ko), :lang(zh)) .hdr-card-desc { text-wrap: pretty; } } /* the drawer's descriptions too (ko 앱 alone); the wide panels balance them */
/* CJK prose: no single character left alone on a paragraph's last line. */
:is(:lang(ja), :lang(zh), :lang(ko)) :is(.pg-text, .ew-lead, .post-body, .pg-iconbox-text, .pg-card-text, .card-excerpt, .checks li, .pg-list li, .pg-card-title) { text-wrap: pretty; }
/* Titles wrap into even lines (no one-word last line), in every language. */
:is(.hero h1, .hero-sub, .h-section, .solutions h2, .integrate h3, .integrate-sub, .ai h3, .product-text h3, .pg-h, .pg-iconbox-title, .pg-card-title, .pg-banner-title, .band h1, .archive-band h1, .post-hero h1, .post-head h1, .card-title, .hero .ew-btn) { text-wrap: balance; }
/* Line heights set for Latin capitals (1.0) clip and crowd full-height CJK and Devanagari lines. */
:is(:lang(ja), :lang(ko), :lang(zh), :lang(hi)) :is(.hero h1, .product-text h3) { line-height: 1.25; }
/* Justified text opens rivers where words are long (German compounds) or a line ends before a long Latin run inside
   Japanese; only the English text keeps the editor's justification. */
.pg-text.pg-align-justify:not(:lang(en)) { text-align: start; }
:is(.pg-text, .post-body) [style*='text-align:justify']:not(:lang(en)) { text-align: start !important; }
/* A SOLUTIONS title that wraps ("SMARTPHONE- & TABLET-OEMs") reads as one title: the 60 px line box becomes padding
   around 1.3 lines, so a one-line title keeps its place and a second line sits 33 px under the first, not 60. */
@media (min-width: 960px) { .solutions-wide h2:not(.h-section) { line-height: 1.3; padding-block: 13.75px; } } /* O4: the selector now outranks the 60 px line box above (.solutions-wide h2:not(.h-section)) */
/* The homepage hero: a title or subline longer than the English one is set smaller (Home.astro computes --em and
   --em-sub from the text) inside the English two-line boxes, the title bottom-aligned in its box, so the subline and
   the button stay where the English ones sit, clear of the photo's light beam, at every width from 960 px. CJK and
   Devanagari titles take 1.1 lines at 90 % of the size, so their two lines fill the same box. */
@media (min-width: 960px) {
  /* Two lines of the text box (761 px, 62.75 vw below 1213 px) hold 2 x 0.92 x box / em at a given size (0.92: the
     estimate's margin), so the title takes that size, at most the ruled 50 px and at least 30. */
  .hero-text[style*='--em'] h1 { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(2 * 60px * 1.15); font-size: clamp(28px, calc(min(761px, 62.75vw) * 1.84 / var(--em) * var(--fit)), 60px); } /* owner 2026-10-02: up to 60 px, the box of two 60 px lines (the hero starts 23 px higher, so the subline and button stay put) */
  :is(:lang(ja), :lang(ko), :lang(zh), :lang(hi)) .hero h1 { line-height: 1.1; }
  .hero { padding-top: 131px; }
  .hero-text[style*='--em-sub'] .hero-sub { min-height: calc(2 * 28px * 1.4); font-size: clamp(18px, calc(min(761px, 62.75vw) * 1.66 / var(--em-sub)), 28px); }
  /* The estimate is calibrated on English (the original's 28 px at 1440 is exactly its fit); other scripts keep a wider margin. */
  html[lang^='en'] .hero-text[style*='--em-sub'] .hero-sub { font-size: clamp(18px, calc(min(761px, 62.75vw) * 1.84 / var(--em-sub)), 28px); }
}
/* O4/O5 (QA 2026-10-01): below 960 px a translated title longer than the English one ran to 3 lines at 768 and 4 or 5 at
   390 (de, ja). The same estimate sets it so it fits the English line count: two lines of the text box on tablets
   (at most the ruled 50 px), three on phones (at most the ruled 34 px). English keeps 50 and 34. */
/* O5: on tablets the photo is anchored so the face shows (it sat off the left edge) and the text block starts under the bar
   at a fixed place, title and subline each fitted to two lines, so the photo's light beam runs in the gap between the
   subline and the button in every language instead of through the subline. */
@media (min-width: 570px) and (max-width: 959px) {
  .hero { align-items: flex-start; min-height: 600px; padding-top: calc(var(--header-h) + 40px); background-position: 45% 50%; }
  .hero-text[style*='--em-sub'] .hero-sub { font-size: clamp(24px, calc((100vw - 72px) * 1.7 / var(--em-sub)), 27px); } /* V8 (QA r6): at least 24 px, large text, so the white subline needs 3:1 over the photo (it, pl, fr_fr, ja were set to 21-23 px at 768: 3.65-4.03, normal text); it, pl, fr_fr take three lines at 600 */
}
@media (min-width: 768px) and (max-width: 959px) { .hero-text[style*='--em'] h1 { font-size: clamp(30px, calc((100vw - 72px) * 1.84 / var(--em) * var(--fit)), 50px); } }
@media (max-width: 767px) { .hero-text[style*='--em'] h1 { font-size: clamp(24px, calc((100vw - 72px) * 2.6 / var(--em) * var(--fitm)), 34px); } } /* N5: above the 22 px section titles (24 at least, so a long title keeps to three lines where it can) */
/* O5 JA#N1: the Japanese title's longest phrase (アイトラッキングソフトウェア, 14 characters, kept whole by auto-phrase)
   fits a phone's line at 22 px; at 24 it split inside the word over four lines. */
/* (N5's Japanese phone size is now the --fitm factor below) */
/* Japanese footer: a katakana compound ("ホワイトラベルソリューション", "トレーニングシミュレーター") is one phrase with no break
   inside it, so the Solutions column gets the width of its longest label (chrome#29). */
@media (min-width: 570px) and (max-width: 1099px) { :lang(ja) .ftr-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
@media (min-width: 1100px) { :lang(ja) .ftr-grid { grid-template-columns: minmax(200px, .9fr) minmax(0, .8fr) minmax(240px, 1.35fr) minmax(0, .7fr) minmax(0, 1.1fr); } }
/* GAZESENSE#14: on tablets a use-case card (one overlaid thumbnail in a column the editor narrowed) keeps about half the
   width, as the original's 328 px cards, instead of a 696 px photo filling the column. */
@media (min-width: 570px) and (max-width: 959px) { .pg-col[style*='--max'] > .pg-col-inner:has(> .pg-grid-1 .pg-card-overlaid) { max-width: min(var(--max), 50%); margin-inline: auto; } }
/* O13 (QA 2026-10-01): a long post title (PostTitle.astro sets --tl, its length) is set smaller so it keeps to about three
   lines in the hero and on white, at most the ruled 50 px (34 on phones); the meta line keeps its place under it. */
/* N5 (QA r3): never at or below a section title (25 px, 22 on phones): at least 34 px from 960, 30 on tablets, 26 on phones. */
:is(.post-hero, .post-head) h1[style*='--tl'] { font-size: clamp(34px, calc(min(100vw - 72px, 1128px) * 4.5 / var(--tl)), 50px); } /* V4 (QA r4): sized by the title's width as well as its length, so a 100-130 character title keeps to three lines from 960 px (the Sense post was 4-5 lines of 47-50 px at 960-1199) */
@media (max-width: 959px) { :is(.post-hero, .post-head) h1[style*='--tl'] { font-size: clamp(30px, calc(50px * 75 / var(--tl)), 50px); } }
@media (max-width: 767px) { :is(.post-hero, .post-head) h1[style*='--tl'] { font-size: clamp(26px, calc(34px * 55 / var(--tl)), 34px); } }
/* m9: on phones the meta line's parts stack (date, categories, author), so no line ends on a lone "|" */
@media (max-width: 569px) { .post-meta .post-meta-sep { display: none; } .post-meta .post-meta-item { display: block; } .post-meta .post-meta-item + .post-meta-sep + .post-meta-item { margin-top: 4px; } }
/* O14 (QA 2026-10-01): a card's artwork shows whole at its own shape (no fixed 16:9 grey box, so no grey bars up to 242 px);
   the plain title cards keep their 16:9 tile. On tablets the image column holds the image at its own height, top-aligned. */
.card-img:not(.card-img-plain) { aspect-ratio: auto; background: none; }
.card-img:not(.card-img-plain) img { height: auto; object-fit: initial; }
@media (min-width: 570px) and (max-width: 959px) { .card-img:not(.card-img-plain) { align-self: flex-start; min-height: 0; } }
/* V5 (QA r4): from 960 px (two cards a row, subgrid) every card's artwork fills one 16:9 box (cover), so the shared image row
   has no blank space to pad above a shorter artwork (up to 137 px white inside a card). Tablets and phones keep O14. */
@media (min-width: 960px) {
  .cards > .card > .card-img { aspect-ratio: 16 / 9; align-self: stretch; } .cards > .card > .card-img img { width: 100%; height: 100%; object-fit: cover; }
  /* V7 (QA r6): cover again (contain left Sense, TOP 100 and HRI floating in 29-68 px of white), the box stays 16:9 so rows stay
     level; the artwork whose lettering a centred crop would cut is placed by its own position. A card wider than 16:9 asks for a
     larger file (Archive.astro sizes), so the crop is not an upscaled 600w file (m7) */
  .cards > .card > .card-img img[src*='/2020/09/image-31.'] { object-position: 30% 50%; } /* TOP 100 lettering whole */
  .cards > .card > .card-img img[src*='/2020/08/EaKJwGNUMAASf0F-1.'] { object-position: 50% 0%; } /* swisstech pitchinar wordmark whole */
  .cards > .card > .card-img img[src*='/2019/05/presentation-at-HRI-'] { object-position: 0% 50%; } /* the HRI 2019 banner whole */
}
/* O14: FOLLOW US sits on the orange band, so its rule is white (canon: white on orange), as INTEGRATE's */
.follow .h-section::after { background: #fff; }
/* O16: on tablets a post photo can carry its own burned-in logo where the bar sits (what-is-eye-tracking: an orange
   "eyeware" badge right behind the site logo); the shade under the bar is deeper there, so only the site's logo reads. */
@media (min-width: 570px) and (max-width: 959px) { .post-hero:not(.post-hero-banner) { background-size: auto 112%; background-position: 50% 100%; } } /* and the photo's top edge, where such a badge sits, is cropped */
/* O17 (QA 2026-10-01): one active item at a time in the wide bar. Full white (V5) marks the open item and the hovered one; keyboard
   focus is a white ring of its own, so a focused item no longer looks open beside the panel the pointer opened. */
@media (min-width: 1025px) {
  .site-header .hdr-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* m14: a keyboard-focused card or language shows a ring, not only the faint ground; the language entries take the
     panels' one hover treatment (the panel grey ground) */
  .site-header .hdr-panel :is(.hdr-card, .hdr-langs a):focus-visible { outline: 2px solid var(--orange-dark); outline-offset: -2px; }
  .hdr-langs a { border-radius: 8px; }
}
/* m13: Japanese menu descriptions break between phrases, as the titles do (now the word joints of V6); Arabic labels are
   drawn larger, as the Arabic face's small x-height made the bar read smaller than in the other languages */

:lang(ar) :is(.hdr-item, .hdr-cta, .hdr-card-title) { font-size: 16px; }
:lang(ar) .hdr-card-desc { font-size: 15px; }
/* m2 (QA 2026-10-01): the orange gradient photo (bg.jpg) shows 8-bit banding rings where a short band cuts its radial
   highlight (trial bands, WORK WITH US, the thank-you hero). A faint grain over it breaks the steps up, as a dither would. */
.pg-grad::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pg-grad > * { z-index: 1; }
/* m7 (QA 2026-10-01): the light SIMPLE SETUP captions at the 20 px item size wrapped 2 / 3 / 1 lines in the 296 px columns
   at 960 to 1199 px, so three neighbouring captions ended at three heights; there they take 17 px (the original's 16). */
@media (min-width: 960px) and (max-width: 1199px) { .pg-iconbox:not(:has(.pg-iconbox-text)) .pg-iconbox-title.pg-h-light { font-size: 17px; } } /* N17 (QA r3): captions only; a benefit title with text under it (GazeAssist Speed, Independence) keeps the item size */
/* m8: a hero subtitle with a phone size steps down to it from below 1200 px, as the original did at 1024 and 768 (AMD: 20 px, not 25) */
@media (max-width: 1199px) { .pg-sub.pg-sub-hero[style*='--fsm'] { font-size: var(--fsm); line-height: 1.5; } }
/* m9: a nested list in a post indents 27 px, as the original; table cells a little tighter (rows were 65 px tall) */
.post-body li > :is(ul, ol) { padding-inline-start: 27px; }
.post-body td, .post-body th { padding-block: 12px; }
/* m10: a card's second line of categories sits 8 px under the first (it was 44); each link keeps its 44 px tap area */
.card-cats { row-gap: 8px; }
.nocase { text-transform: none; } /* m12: ToF in capitalised titles */
:is(:lang(ja), :lang(zh), :lang(ko)) .pg-list li:has(> .pg-list-icon) > span { min-width: 0; overflow-wrap: anywhere; } /* O0: a CJK phrase longer than the label column may still break, never widen the phone */
/* N7 (QA r3): on an Arabic or Hebrew page a block kept in Latin script (a brand-only title, an English line) runs left to right
   inside but sits where the page puts its text (right, or centred where its column centres), never flush left. */
html[dir='rtl'] [lang='en'][dir='ltr']:not(.align-center) { text-align: -webkit-match-parent; text-align: match-parent; } /* V6 (QA r4): a centred caption stays centred */
/* m-H (QA r3): a hero photo is not mirrored on Arabic and Hebrew pages, so its text column keeps the English side (the
   GazeAssist title sat over the face); the words inside still run right to left. */
html[dir='rtl'] .pg-hero.pg-bg-image > .pg-cols { direction: ltr; }
html[dir='rtl'] .pg-hero.pg-bg-image > .pg-cols > .pg-col { direction: rtl; }
/* V6 (QA r4): the GazeSense hero keeps the English column side, but its right-aligned Hebrew block ran into the man's head
   (OS icons on his hair at 1440 / 1024). From 960 px the block sits on the column's photo-free side, as the English one:
   lines aligned left, the OS icons in the English order from the left edge. */
@media (min-width: 960px) {
  html[dir='rtl'] #contactb.pg-hero > .pg-cols > .pg-col.pg-span-8, html[dir='rtl'] #contactb.pg-hero > .pg-cols > .pg-col.pg-span-8 :is(.pg-heading, .pg-h, .pg-sub, .pg-text, p) { text-align: left; }
  html[dir='rtl'] #contactb.pg-hero > .pg-cols > .pg-col.pg-span-8 .pg-cols { direction: ltr; }
  html[dir='rtl'] #contactb.pg-hero > .pg-cols > .pg-col.pg-span-8 .pg-sub:not([dir='ltr']) { text-align: right; } /* W7 (QA r5): the Hebrew subline reads from the right (its start), in the same column; the Latin H1 and the icons stay as they are */
}
/* m-I (QA r3): in the drawer (to 1024 px) a focused item, card or language shows a ring, not only a grey ground. */
@media (max-width: 1024px) { .site-header :is(.hdr-item, .hdr-card, .hdr-langs a):focus-visible { outline: 2px solid var(--orange-dark); outline-offset: -2px; } }