/* Asayl Labs site header — pairs with /assets/site-nav.js. Self-contained tokens so any page can load it.
   Frame: product pages are "framed" (1320px with hairline sides, matching their page frame); the homepage sets
   --sn-frame / --sn-pad to its own narrower column and has no side lines. */
.snav, .snav-sub {
  --sn-paper: #F4F1EA; --sn-paper-2: #EEEAE0; --sn-white: #FCFBF7; --sn-ink: #1A1A1A; --sn-ink-soft: #3A3A36;
  --sn-muted: #6B6B63; --sn-line: #D8D3C7; --sn-teal: #1B9E8F; --sn-teal-deep: #157E72;
  --sn-frame: 1320px; --sn-pad: clamp(20px, 3vw, 40px); --sn-h: 56px;
  --sn-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sn-display: 'Space Grotesk', system-ui, sans-serif; --sn-sans: 'Inter', system-ui, sans-serif;
}
.snav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--sn-paper) 94%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sn-line); transition: box-shadow .2s; }
.snav.scrolled { box-shadow: 0 1px 0 var(--sn-line), 0 12px 32px -24px rgba(26,26,26,.35); }
html { scroll-padding-top: calc(56px + 12px); }
.snav *, .snav *::before, .snav *::after, .snav-sub *, .snav-sub *::before, .snav-sub *::after { box-sizing: border-box; }
.snav a, .snav-sub a { text-decoration: none; color: inherit; }
.snav a:focus-visible, .snav button:focus-visible, .snav-sub a:focus-visible, .snav-sub button:focus-visible { outline: 2px solid var(--sn-teal); outline-offset: -2px; }

.snav-bar { max-width: var(--sn-frame); margin: 0 auto; height: var(--sn-h); display: flex; align-items: stretch; }
.snav-framed .snav-bar, .snav-framed .snav-sub-bar { border-left: 1px solid var(--sn-line); border-right: 1px solid var(--sn-line); }
.snav-cell { display: flex; align-items: center; border-left: 1px solid var(--sn-line); }

/* lockup: flow mark + drawn wordmark + "Labs" on the wordmark's own baseline (23.8% above its bottom edge) */
.snav-lockup { display: flex; align-items: center; padding: 0 1.4rem 0 var(--sn-pad); white-space: nowrap; font-size: 0; line-height: 1; color: var(--sn-ink); }
.snav-lockup > * { display: inline-block; }
/* !important: some page stylesheets set img { height:auto; display:block } */
.snav img.snav-mark-img { display: inline-block !important; height: 22px !important; width: auto !important; max-width: none; vertical-align: -3.5px; margin: 0 10px 0 0; }
.snav img.snav-word { display: inline-block !important; height: 26px !important; width: auto !important; max-width: none; vertical-align: calc(26px * -.238); margin: 0 9px 0 0; }
.snav-labs { font: 500 27.7px/1 var(--sn-display); letter-spacing: -.02em; vertical-align: baseline; }
.snav-lockup:hover .snav-labs { color: var(--sn-teal-deep); }

/* quiet mono links; the two product items carry a panel */
.snav-links { margin-inline-start: auto; display: flex; align-items: stretch; font: 500 .72rem/1 var(--sn-mono); letter-spacing: .09em; text-transform: uppercase; }
.snav-item { position: relative; display: flex; align-items: stretch; }
.snav-links .snav-item > a { display: flex; align-items: center; padding: 0 .9rem; color: var(--sn-muted); transition: color .15s; }
.snav-links .snav-item > a:hover, .snav-item.is-open > a { color: var(--sn-ink); }
.snav-links .snav-item > a[aria-current="page"] { color: var(--sn-ink); box-shadow: inset 0 -2px 0 var(--sn-teal); }
.snav-right { display: flex; align-items: stretch; }
#langs { display: inline-flex; align-items: stretch; font: 500 .72rem/1 var(--sn-mono); letter-spacing: .09em; }
#langs button { font: inherit; letter-spacing: inherit; color: var(--sn-muted); background: none; border: 0; padding: 0 .9rem; cursor: pointer; transition: color .15s, background .15s; }
#langs button + button { border-left: 1px solid var(--sn-line); }
#langs button:hover { color: var(--sn-ink); background: var(--sn-paper-2); }
#langs button[aria-current="true"] { color: var(--sn-paper); background: var(--sn-ink); }
#langs button[lang="ar"] { font-family: 'IBM Plex Sans Arabic', 'Amiri', sans-serif; font-size: .95rem; }
#lang { color: var(--sn-ink); }

/* panels (product cards under the bar; sector / use-case lists under the sub-bar) */
.snav-panel { position: absolute; top: 100%; left: 0; min-width: 22rem; display: none; grid-template-columns: minmax(0, 1fr); background: var(--sn-white); border: 1px solid var(--sn-line); border-top: 0;
  box-shadow: 0 24px 48px -24px rgba(26,26,26,.28); text-transform: none; letter-spacing: 0; font: 400 .92rem/1.45 var(--sn-sans); color: var(--sn-ink-soft); z-index: 5; }
.snav-item.is-open > .snav-panel { display: grid; animation: snav-in .18s ease-out; }
@keyframes snav-in { from { opacity: 0; transform: translateY(-4px); } }
/* top-level panels hang from the item's right edge so they never run off the viewport */
.snav-links .snav-panel { left: auto; right: 0; }
.snav-item[data-product="factory-os"] > .snav-panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); min-width: 42rem; }
.snav-card { display: flex; flex-direction: column; }
.snav-card-head { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; padding: 1.2rem 1.3rem 1rem; transition: background .15s; }
.snav-card-head:hover { background: var(--sn-paper); }
.snav-card-txt { display: flex; flex-direction: column; gap: .25rem; }
.snav-card-txt strong { font: 500 1.1rem/1.2 var(--sn-display); color: var(--sn-ink); }
.snav-card-txt span { font-size: .88rem; color: var(--sn-muted); }
.snav-mark { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.snav-mark svg { width: 24px; height: 24px; fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.snav-mark-ai { background: var(--sn-teal); } .snav-mark-ai svg { stroke: var(--sn-white); }
.snav-mark-fos { background: var(--sn-ink); } .snav-mark-fos svg { stroke: var(--sn-white); }
.snav-mark-sawt { background: var(--sn-ink-soft); } .snav-mark-sawt svg { stroke: var(--sn-white); stroke-width: 2; }
.snav-card-links { display: flex; flex-direction: column; border-top: 1px solid var(--sn-line); padding: .5rem 0; }
.snav-card-links a, .snav-col a, .snav-panel-list a { padding: .45rem 1.3rem; color: var(--sn-ink-soft); transition: color .15s, background .15s; }
.snav-card-links a:hover, .snav-col a:hover, .snav-panel-list a:hover { color: var(--sn-ink); background: var(--sn-paper); }
.snav-panel a[aria-current="page"] { color: var(--sn-teal-deep); }
.snav-col { display: flex; flex-direction: column; padding: 1.1rem 0 .9rem; border-left: 1px solid var(--sn-line); }
.snav-k { font: 500 .66rem/1 var(--sn-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--sn-muted); padding: 0 1.3rem .7rem; }
.snav-ext { font-style: normal; font-size: .85em; margin-left: .35em; color: var(--sn-muted); }
.snav-panel-list { min-width: 16rem; padding: .5rem 0; }

/* product sub-bar: sits under the header, scrolls away with the page */
.snav-sub { background: var(--sn-paper); border-bottom: 1px solid var(--sn-line); position: relative; z-index: 90; }
.snav-sub-bar { max-width: var(--sn-frame); margin: 0 auto; height: 44px; display: flex; align-items: stretch; font: 500 .7rem/1 var(--sn-mono); letter-spacing: .09em; text-transform: uppercase; }
.snav-sub-k { display: flex; align-items: center; padding: 0 1.4rem 0 var(--sn-pad); color: var(--sn-ink); border-right: 1px solid var(--sn-line); }
.snav-sub nav { display: flex; align-items: stretch; }
.snav-sub nav > a, .snav-dd > button { display: flex; align-items: center; gap: .4rem; padding: 0 .95rem; color: var(--sn-muted); background: none; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color .15s; }
.snav-sub nav > a:hover, .snav-dd > button:hover, .snav-dd.is-open > button { color: var(--sn-ink); }
.snav-sub nav > a[aria-current="page"], .snav-dd.is-current > button { color: var(--sn-ink); box-shadow: inset 0 -2px 0 var(--sn-teal); }
.snav-chev { width: 5px; height: 5px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.snav-dd.is-open > button .snav-chev { transform: rotate(-135deg) translateY(-1px); }

/* phone: burger icon, full-height menu */
.snav-burger { display: none; width: 56px; background: none; border: 0; border-left: 1px solid var(--sn-line); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.snav-burger i { display: block; width: 20px; height: 1.5px; background: var(--sn-ink); transition: transform .2s; }
.snav.is-mobile-open .snav-burger i:first-child { transform: translateY(3.3px) rotate(45deg); }
.snav.is-mobile-open .snav-burger i:last-child { transform: translateY(-3.3px) rotate(-45deg); }
/* absolute + explicit height: the header's backdrop-filter makes it the containing block for fixed children */
.snav-mobile { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--sn-h)); height: calc(100dvh - var(--sn-h)); background: var(--sn-paper); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--sn-line); }
.snav-mobile[hidden] { display: none; }
.snav-m-sec { border-bottom: 1px solid var(--sn-line); padding: .4rem 0 .6rem; }
.snav-m-head { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; padding: 1rem var(--sn-pad) .8rem; }
.snav-m-head strong { display: block; font: 500 1.15rem/1.2 var(--sn-display); color: var(--sn-ink); margin-bottom: .2rem; }
.snav-m-head span span { font: 400 .88rem/1.4 var(--sn-sans); color: var(--sn-muted); }
.snav-m-product .snav-k { display: block; padding: .9rem var(--sn-pad) .2rem; }
.snav-m-link { display: block; padding: .6rem var(--sn-pad); font: 400 1rem/1.3 var(--sn-sans); color: var(--sn-ink); }
.snav-m-child { padding-left: calc(var(--sn-pad) + 1rem); }
.snav-m-link[aria-current="page"] { color: var(--sn-teal-deep); }
.snav-m-big { display: block; padding: .9rem var(--sn-pad); font: 500 1.25rem/1.2 var(--sn-display); color: var(--sn-ink); }
.snav-m-big[aria-current="page"] { color: var(--sn-teal-deep); }
@media (max-width: 760px) {
  .snav-links, .snav-sub { display: none; }
  .snav-burger { display: flex; }
  .snav-lockup { padding-left: 20px; }
  .snav img.snav-mark-img { height: 20px !important; margin-right: 8px; } .snav img.snav-word { height: 22px !important; vertical-align: calc(22px * -.238); margin-right: 7px; } .snav-labs { font-size: 23.5px; }
  #langs button { padding: 0 .75rem; }
}
@media (min-width: 761px) { .snav-mobile { display: none !important; } }
@media (max-width: 380px) { .snav-labs { display: none; } }
@media (prefers-reduced-motion: reduce) { .snav-item.is-open > .snav-panel { animation: none; } .snav-burger i, .snav-chev { transition: none; } }

/* right-to-left (Arabic) */
html[dir="rtl"] .snav-lockup { padding: 0 var(--sn-pad) 0 1.4rem; }
html[dir="rtl"] .snav-cell, html[dir="rtl"] .snav-burger { border-left: 0; border-right: 1px solid var(--sn-line); }
html[dir="rtl"] #langs button + button { border-left: 0; border-right: 1px solid var(--sn-line); }
html[dir="rtl"] .snav-links .snav-panel { right: auto; left: 0; }
html[dir="rtl"] .snav-col { border-left: 0; border-right: 1px solid var(--sn-line); }
html[dir="rtl"] .snav-ext { margin: 0 .35em 0 0; display: inline-block; transform: scaleX(-1); }
html[lang="ar"] .snav-m-big, html[lang="ar"] .snav-m-head strong, html[lang="ar"] .snav-card-txt strong { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; }
html[dir="rtl"] .snav-m-child { padding-left: var(--sn-pad); padding-right: calc(var(--sn-pad) + 1rem); }