/* IBM Plex Sans Arabic (11 October 2026, the user's note): the Arabic in every demo and in the language
   switch. Registered under its own name and, for Arabic characters only (unicode-range), under the
   site's own families, so any Arabic set in them renders in Plex while Latin keeps its font. Each of
   those faces carries the exact weight its family's own faces declare (aeonik and mono: 400; PP Supply
   Mono: 200, 400, 500, 700), since a face joins its family's group only when its descriptors match. */
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"aeonik";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"aeonik Fallback";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"mono";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"mono Fallback";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"PP Supply Mono";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"PP Supply Mono";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"PP Supply Mono";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"PP Supply Mono";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:"DM Mono";src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
.HomeHero{height:850dvh}@media(max-width:768px){.HomeHero{height:732dvh}}a[aria-label="\627 \644 \635 \641 \62d \629 \20 \627 \644 \631 \626 \64a \633 \64a \629 "] svg{background:currentColor;mask:url('/brand/arabic-ai.svg') center/contain no-repeat;-webkit-mask:url('/brand/arabic-ai.svg') center/contain no-repeat}a[aria-label="\627 \644 \635 \641 \62d \629 \20 \627 \644 \631 \626 \64a \633 \64a \629 "] svg>*{opacity:0}svg[aria-label="\634 \639 \627 \631 \20 Arabic.ai"]{background:currentColor;mask:url('/brand/arabic-ai.svg') center/contain no-repeat;-webkit-mask:url('/brand/arabic-ai.svg') center/contain no-repeat;width:135px;height:28px}svg[aria-label="\634 \639 \627 \631 \20 Arabic.ai"]>*{opacity:0}.HomeHero section :is(h1,h2){white-space:pre-line}
[aria-label="\625 \639 \644 \627 \646 "]>div>div>svg:first-child{background:currentColor;mask:url('/brand/mark.svg') center/contain no-repeat;-webkit-mask:url('/brand/mark.svg') center/contain no-repeat}
[aria-label="\625 \639 \644 \627 \646 "]>div>div>svg:first-child>*{opacity:0}


/* Footer: the logo slot is one grid column wide, so the 135px wordmark ran into "Platform".
   The icon-only mark is the brand's small-space logo. */
footer .logo svg[aria-label="\634 \639 \627 \631 \20 Arabic.ai"]{width:32px;height:32px;mask-image:url('/brand/mark.svg');-webkit-mask-image:url('/brand/mark.svg')}

/* Footer link lists were title-cased by CSS, which turned "Arabic.ai" into "Arabic.Ai".
   The labels are now title case in content/footer.json. */
footer .list a{text-transform:none}

/* The reference site's corner-triangle motif (its own logo shape) becomes the Arabic.ai mark. */
.CategoryIcon svg{background:#fff;mask:url('/brand/mark.svg') center/contain no-repeat;-webkit-mask:url('/brand/mark.svg') center/contain no-repeat;width:12px;height:12px}
.CategoryIcon svg>*{opacity:0}
[class*="PullApartContent-module"][class*="__category"]>div:first-child>div:first-child:before{background:currentColor;mask:url('/brand/mark.svg') center/contain no-repeat;-webkit-mask:url('/brand/mark.svg') center/contain no-repeat}

/* Cookie-preferences dialog (clone-support.js): the page reset removes the browser's dialog centring. */
#cookie-preferences::backdrop{background:rgb(13 5 33/.5)}


/* Mobile menu: buttons centre their text by default, so long labels wrapped onto two
   centred lines. Left-align the labels and size them to fit the narrowest phones on one line. */
.navigation-link-mobile{text-align:left;font-size:min(32px,7.2vw)}

/* ===== Navigation: Apple-style finish =========================================================
   Web approximation of Apple's translucent global nav (backdrop-filter glass; not an Apple asset).
   A 52px frosted bar, quiet 13px labels centred on the page, one purple pill CTA, and a flyout of
   the same glass with grey column headings, large primary links and a dimmed page behind it.
   Light/dark follow the site's own [data-theme] switching. */
[data-theme=light] body{--nav-background:rgb(251 251 253/.78);--nav-dropdown-background:rgb(251 251 253/.94);--nav-text:#1d1d1f;--nav-muted:#6e6e73;--nav-hairline:rgb(0 0 0/.08);--nav-shadow:transparent;--nav-card-background:transparent;--nav-solid:#fbfbfd}
[data-theme=dark] body,[data-initial-chrome-theme=dark]{--nav-background:rgb(22 22 23/.78);--nav-dropdown-background:rgb(22 22 23/.94);--nav-text:#f5f5f7;--nav-muted:#86868b;--nav-hairline:rgb(255 255 255/.1);--nav-shadow:transparent;--nav-card-background:transparent;--nav-solid:#161617}

/* Bar */
/* The glass sits on a pseudo-element: a backdrop-filter on the bar itself would make it the
   backdrop root for the flyout inside it, and the flyout could no longer blur the page. */
header>div[class*="bg-(--nav-background)"]{background-color:transparent!important}
header>div[class*="bg-(--nav-background)"]::before{content:"";position:absolute;inset:0;background:var(--nav-background);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);transition:background-color .3s ease;pointer-events:none}
header .relative.z-100{padding-block:6px}
@media (min-width:768px){header .relative.z-100{padding-block:17px}}  /* 1.5x the 52px bar: 44px row + 34px = 78px; the hero card starts at 127px (shader navBarPad 88 + banner) */
header a[aria-label="\627 \644 \635 \641 \62d \629 \20 \627 \644 \631 \626 \64a \633 \64a \629 "] svg{height:19px}
header nav.relative{grid-column:1/-1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);justify-content:center;gap:34px;width:max-content;flex:none}
header nav>div{opacity:1!important}
header .navigation-header-link{font-size:13px;font-weight:400;letter-spacing:-.01em;color:var(--nav-text);opacity:.82;transition:opacity .2s ease}
header .navigation-header-link:hover,header .navigation-header-link[aria-expanded=true]{opacity:1}

/* One CTA: a compact pill in brand purple (both themes). Sentence case, no fill animation. */


/* Flyout */
header [class*="bg-(--nav-dropdown-background)"]{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 var(--nav-hairline)}
header [class*="bg-(--nav-dropdown-background)"]::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgb(0 0 0/.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
header [class*="pb-17"][class*="pt-17"]{padding-top:36px;padding-bottom:56px}
header .navigation-subheader{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--nav-muted);padding-bottom:12px}
header .navigation-link{color:var(--nav-text);transition:color .2s ease,opacity .2s ease}
header a:hover .navigation-link{color:var(--nav-text)}
header [class~="md:col-start-1"] .navigation-link{font-size:24px;font-weight:600;letter-spacing:-.016em;line-height:1.25}
header [class~="md:col-start-1"] a{padding-block:4px}
header [class~="md:col-start-1"] a:hover .navigation-link{opacity:.62}
header [class~="md:col-start-4"] .navigation-link{font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1.5;opacity:.86}
header [class~="md:col-start-4"] a:hover .navigation-link{opacity:1}
/* Hover preview and featured cards: no card chrome, 18px radius, quiet caption. */
header [class*="min-h-[192px]"] .rounded-xl{border-radius:0;max-width:440px;min-height:0;margin-left:auto;aspect-ratio:16/10;height:auto;box-shadow:inset 0 0 0 1px var(--nav-hairline)}
header a[class*="bg-(--nav-card-background)"]{border:0;padding:0;background:transparent;gap:10px}
header a[class*="bg-(--nav-card-background)"] .rounded-lg{border-radius:0}
header a[class*="bg-(--nav-card-background)"] p{font-size:13px;font-weight:500;letter-spacing:-.01em;text-decoration:none!important;color:var(--nav-text)}
header a[class*="bg-(--nav-card-background)"]:hover img{transform:scale(1.02)}
header a[class*="bg-(--nav-card-background)"] img{transition:transform .5s cubic-bezier(.16,1,.3,1)}

/* Mobile: opaque glass sheet, large semibold rows, plain hamburger, full-width pill CTA. */
.MobileNavFillfixed{background:var(--nav-solid)!important}
.navigation-link-mobile{text-align:left;font-size:min(28px,7vw);font-weight:600;letter-spacing:-.02em}
header [class*="bg-(--nav-mobile-cta-wrapper-bg)"]{background:transparent!important;padding:0}


@media (prefers-reduced-transparency:reduce){
 header>div[class*="bg-(--nav-background)"]::before,header [class*="bg-(--nav-dropdown-background)"]{background:var(--nav-solid)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
 .FlatCta,header .navigation-link,header .navigation-header-link,header a[class*="bg-(--nav-card-background)"] img{transition:none}
}






/* Announcement: black bar (as the original), with the "a" mark at 0.7x (16px to 11px). */
[aria-label="\625 \639 \644 \627 \646 "]>div>div>svg:first-child{width:11px;height:11px}

/* 21 October 2026 (Ala's iPhone): on phones the close button (28px, 12px in from the edge) sat over the
   bar's last word in English (the arrow) and its first word in Arabic once the line wrapped. The button
   sits at the inline end in both directions (right in English, left in Arabic), so the text keeps 44px
   clear of that edge below 768px: the box ends 4px before the button. */
@media (max-width:767px){
 [role="region"][aria-label="Announcement"]>div,[role="region"][aria-label="\625 \639 \644 \627 \646 "]>div{padding-inline:24px 44px!important}
}

/* ===== Buttons: one style across the page ======================================================
   Every button is the same FlatCta component, previously in five looks (pill, purple, white, grey,
   black with a boxed arrow). Now: 8px corners, brand purple fill, white sentence-case label, plain
   white arrow. Tailwind's own !important utilities (h-10!, !rounded-[6px]) sit in a cascade layer,
   and layered !important beats unlayered !important, so the overrides go in the earlier base layer. */
@layer base{
 .FlatCta{height:44px!important;min-height:44px!important;padding:0!important;border:0!important;border-radius:0!important;background:#3F1993!important;color:#fff!important;transition:background-color .2s ease,transform .15s ease}
 .FlatCta:hover{background:#4C22AE!important}
 .FlatCta .icon{background:transparent!important;color:#fff!important}
 .FlatCta[aria-label]{width:44px!important}
 header [class*="bg-(--nav-mobile-cta-wrapper-bg)"] .FlatCta{height:48px!important}
 header div[class~="md:hidden"][class~="shrink-0"]>.FlatCta{width:auto!important;flex:none!important;min-width:0!important;height:40px!important;min-height:40px!important}
}
.FlatCta>div:first-child{display:none}
.FlatCta>div:last-child{padding:0 18px;font-size:15px;font-weight:500;letter-spacing:-.01em}
.FlatCta>div:last-child:has(.icon){padding:0 8px 0 18px}
.FlatCta[aria-label]>div:last-child{padding:0;justify-content:center}
.FlatCta,.FlatCta *{text-transform:none!important;color:#fff!important}
.FlatCta:active{transform:scale(.98)}
header .FlatCta>div:last-child{font-size:14px}

/* ===== Product stages in the hero sequence ======================================================
   The tagline sits in the eyebrow (1.2x: 11px to 13.2px). Every product stage has one structure
   (10 October 2026): a bold title, "Arabic.ai" and the product's descriptor, as the naming map has
   it ("Arabic.AI is the only brand"); the product's own logo under it, smaller; then one sentence
   in grey and the button. A no-break space keeps each descriptor whole, so a narrow column breaks
   after "Arabic.ai"; each fits the 360px column beside the cards in two lines. Bold is the site's
   600, as on the menu names. The product name stays in the markup (aria-label) for screen readers. */
[class*="PullApartContent-module"][class*="__category"]{font-size:12px}
@media (min-width:768px){[class*="PullApartContent-module"][class*="__category"]{font-size:13.2px}}
[class*="PullApartContent-module"][class*="__category"]>div:first-child>div:first-child:before{width:.6rem;height:.6rem}
/* The mark before a stage's small label: the original keeps it off the word with margin-right, which in
   Arabic (right to left) lands on the outer side, so the mark touched the word. The gap follows the reading
   direction instead (12 October 2026). */
[class*="PullApartContent-module"][class*="__category"]>div:first-child>div:first-child:before{margin-right:0;margin-inline-end:.5rem}
.PullApartContent .RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="Atelier"],[aria-label="Sadu"],[aria-label="\62e \62f \645 \627 \62a \20 \627 \644 \628 \64a \627 \646 \627 \62a "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])>*{display:none!important}
/* Stage titles say "Our ..." (12 October 2026, the user's note: "Our AI workspace", not "Arabic.ai AI
   workspace"). */
.PullApartContent>div:has(.RichText.header4-regular[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "]){--lockup:"\646 \645 \627 \630 \62c \646 \627 \20 \627 \644 \644 \63a \648 \64a \629 ";--logo:url('/brand/models/models-white.svg')}
.PullApartContent>div:has(.RichText.header4-regular[aria-label="Atelier"]){--lockup:"\645 \633 \627 \62d \629 \20 \639 \645 \644 \646 \627 \20 \627 \644 \630 \643 \64a \629 ";--logo:url('/brand/products/atelier-wordmark-white.svg')}
.PullApartContent>div:has(.RichText.header4-regular[aria-label="Sadu"]){--lockup:"\645 \646 \635 \629 \20 \648 \643 \644 \627 \626 \646 \627 \20 \627 \644 \630 \643 \64a \629 ";--logo:url('/brand/products/sadu-white.svg')}
.PullApartContent>div:has(.RichText.header4-regular[aria-label="\62e \62f \645 \627 \62a \20 \627 \644 \628 \64a \627 \646 \627 \62a "]){--lockup:"\628 \64a \627 \646 \627 \62a \646 \627 \20 \644 \644 \630 \643 \627 \621 \20 \627 \644 \627 \635 \637 \646 \627 \639 \64a \20 \627 \644 \645 \627 \62f \64a ";--logo:url('/brand/products/data-services-white.svg')}
.PullApartContent>div:has(.RichText.header4-regular[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "]){--lockup:"\646 \645 \627 \630 \62c \646 \627 \20 \627 \644 \643 \644 \627 \645 \64a \629 ";--logo:url('/brand/models/speech-white.svg')}
.PullApartContent>div:has(.RichText.header4-regular[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]){--lockup:"\646 \645 \627 \630 \62c \646 \627 \20 \644 \644 \645 \631 \626 \64a \627 \62a ";--logo:url('/brand/models/vision-white.svg')}
.PullApartContent .RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="Atelier"],[aria-label="Sadu"],[aria-label="\62e \62f \645 \627 \62a \20 \627 \644 \628 \64a \627 \646 \627 \62a "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])::before{content:var(--lockup);display:block;font-size:min(1.25em,8.2vw);line-height:1.05;white-space:nowrap;
  font-weight:600;letter-spacing:-.03em;color:#fff;transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.PullApartContent .RichText.header4-regular.isnt-visible::before,.PullApartContent [class*="__category"].isnt-visible::before{opacity:0;transform:translateY(25%)}
@media (prefers-reduced-motion:reduce){.PullApartContent .RichText.header4-regular::before,.PullApartContent [class*="__category"]::before{transition:none}}
/* Centred stages, below 1450px (10 October 2026): the logo leads, above the video stack. The
   stack is drawn in the scene's canvas, fixed to the screen, and its top edge sits at about 24% of
   the viewport's height at every size measured (390 to 1440 wide). The stage's own layer drifts
   with the hero's parallax, so the logo there could not follow it: clone-support.js (stageLogo)
   puts one logo element in the hero's pinned layer instead, showing the logo of the stage on
   show, and its foot sits about 28px over the stack. The logo under the title is hidden here. */
.aai-stage-logo{display:none}
@media (max-width:1449px){
 .aai-stage-logo{--h:clamp(26px,3.6vh,36px);display:block;position:absolute;left:0;right:0;top:calc(24dvh - 28px - var(--h));height:var(--h);z-index:2;pointer-events:none}
 .aai-stage-logo img{position:absolute;left:50%;top:0;height:100%;width:auto;max-width:none;translate:-50% 0;opacity:0;transform:translateY(25%);
   transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
 .aai-stage-logo img.is-on{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.aai-stage-logo img{transition:none}}

/* ===== Hero sequence layout ====================================================================
   Navbar always visible: the site's script slides it up on scroll; this keeps it in place. */
header>div[class*="bg-(--nav-background)"]{transform:none!important;translate:none!important}
/* Centre each stage (cards + text) in the space below the navbar. Cards and text share the
   .parallaxOut layer, so moving it moves both; the measured offset is about 13.5% of the viewport. */
.parallaxOut{translate:0 0!important;transition:translate .9s cubic-bezier(.16,1,.3,1)}
[data-stage-on] .parallaxOut{translate:0 13.5dvh!important}
@media (max-width:767px){[data-stage-on] .parallaxOut{translate:0 9dvh!important}}  /* phones: shorter bar, text sits lower */
/* >=1450px the cards and text already centre in the viewport, so only offset half the 78px navbar. */
@media (min-width:1450px){[data-stage-on] .parallaxOut{translate:0 39px!important}}
/* >=1450px each product's text sits opposite its cards, which alternate right, left, right, left
   (timeline patch in audit_fixes.py): Atelier and Data Services on the left, Sadu on the right; the
   models screen has the stack in the middle and its three columns below (12 October 2026). */
@media (min-width:1450px){
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="Atelier"],[aria-label="\62e \62f \645 \627 \62a \20 \627 \644 \628 \64a \627 \646 \627 \62a "]))>div{grid-column:2/span 3!important}
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="Sadu"]))>div{grid-column:9/span 3!important}
}
/* The layer moves down, so back the gap it leaves above with the scene's black. */
.parallaxOut::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 2px);height:20dvh;background:#000;opacity:0;transition:opacity .9s ease;pointer-events:none}
[data-stage-on] .parallaxOut::before{opacity:1}
.HomeHero{position:relative}
.stage-sentinel{position:absolute;left:0;top:11%;width:1px;height:1px;pointer-events:none}
@media (prefers-reduced-motion:reduce){.parallaxOut{transition:none}}
/* Equal spacing: eyebrow to logo and logo to sub text are both 24px at every breakpoint. */
.PullApartContent>div{gap:24px!important}
.PullApartContent [class*="__category"]{margin-bottom:0!important;padding-bottom:0!important}
.PullApartContent [class*="gap-[15px]"]{gap:24px!important}

/* Language menu (11 October 2026; clone-support.js langMenu): a globe button as tall as its neighbour
   (the 44px CTA; the 40px menu button below 1024px), outlined in the navbar's line, opening a small
   menu of the languages, each with its round flag; the current one is ticked, and one this deploy
   does not have yet is greyed with a "Soon" tag and no link. */
.aai-lang{position:relative;flex:none;display:flex}
.aai-lang__btn{all:unset;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--nav-line,rgb(228 226 234));color:var(--nav-text,#09090A);cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.pg-header .aai-lang__btn{color:var(--pg-ink,#09090A)}
.aai-lang__btn:hover,.aai-lang.is-open .aai-lang__btn{background:#3F1993;border-color:#3F1993;color:#fff}
.aai-lang__btn:focus-visible{outline:2px solid #3F1993;outline-offset:2px}
.aai-lang__menu{position:absolute;z-index:60;top:calc(100% + 8px);inset-inline-end:0;min-width:220px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid rgb(228 226 234);box-shadow:0 18px 40px -18px rgb(42 15 107/.35)}
.aai-lang__menu:not([hidden]){animation:aai-lang-in .22s cubic-bezier(.16,1,.3,1)}
@keyframes aai-lang-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
.aai-lang__item{display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;color:#09090A;text-decoration:none;font:400 14px/1 var(--font-aeonik),system-ui,sans-serif}
.aai-lang__item[lang=ar]{font-family:"IBM Plex Sans Arabic",var(--font-aeonik),system-ui,sans-serif;font-size:15px}
.aai-lang__item img{flex:none;width:20px;height:20px}  /* the flags are round in their own files (the shape system squares any CSS radius) */
.aai-lang__item:hover,.aai-lang__item:focus-visible{background:rgb(63 25 147/.07);outline:none}
.aai-lang__item[aria-current]{font-weight:500}
.aai-lang__check{margin-inline-start:auto;color:#3F1993;visibility:hidden}
.aai-lang__item[aria-current] .aai-lang__check{visibility:visible}
.aai-lang__item{white-space:nowrap}
.aai-lang__item.is-soon{color:rgb(9 9 10/.45);cursor:default}
.aai-lang__item.is-soon:hover{background:none}
.aai-lang__item.is-soon img{filter:grayscale(1);opacity:.5}
.aai-lang__item.is-soon .aai-lang__check{display:none}
.aai-lang__soon{margin-inline-start:auto;padding:4px 6px;border:1px solid rgb(228 226 234);color:rgb(9 9 10/.55);font:500 10px/1 var(--font-aeonik),system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:1023px){.aai-lang__btn{width:40px;height:40px}}
@media (max-width:767px){header:not(.pg-header) .aai-lang{margin-inline-end:8px}}
@media (prefers-reduced-motion:reduce){.aai-lang__menu:not([hidden]){animation:none}}

/* ===== Footer: Cority Meddbase layout, Arabic.ai brand ===========================================
   Mounted by site-footer.js in place of the compiled footer (hidden below). Lockup + description,
   four link groups matching the navbar, contact, a legal row, then the outlined arabic.ai wordmark
   that draws in on view and lights up purple under the cursor. */
footer.Footer{display:none!important}
.aai-footer{position:relative;overflow:hidden;background:#09090A;color:#fff;border-top:1px solid rgb(255 255 255/.1);font-family:var(--font-aeonik),system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.aai-footer__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(125% 120% at 50% 8%,rgb(9 9 10/.4) 46%,rgb(63 25 147/.30) 100%)}
.aai-footer__inner{position:relative;z-index:1;margin:0 auto;padding:clamp(56px,8vh,96px) 24px 0}
/* ===== One content edge ========================================================================
   The page grid (grid-layout-desktop) is 24px padding, 12 columns of at most 150px and 8px gaps,
   centred once the columns reach 150px (about 1936px wide). Content sits on columns 2 to 11 from
   768px up, and everything else lines up with that edge: navbar, sections, footer.
   --grid-inset is the distance from a full-width box's side to column 2. The percentages resolve
   where the variable is used, against that box's containing block. --grid-inset-in is the same
   edge for a box that is already 24px in from each side. */
:root{--grid-col:min((100% - 136px) / 12, 150px);--grid-inset:calc((100% - 12 * var(--grid-col) - 88px) / 2 + var(--grid-col) + 8px);
 --grid-col-in:min((100% - 88px) / 12, 150px);--grid-inset-in:calc((100% - 12 * var(--grid-col-in) - 88px) / 2 + var(--grid-col-in) + 8px)}
/* Phones: the grid's 24px padding is the content edge. The prefooter card's black runs edge to
   edge into the footer there, so its own 24px inset read as a misalignment. */
@media (max-width:767px){
 .VideoCta{padding-inline:0}
}
@media (max-width:639px){.CardGrid h3.AnimatedText{width:100%;margin-inline:0}}
@media (min-width:768px){
 .aai-footer__inner{padding-inline:var(--grid-inset)}
 /* Navbar: the bar is the same grid, so the logo moves to column 2 and the CTA to columns 9 to 11. */
 header .md\:grid-layout-desktop>.col-span-1{grid-column:2/span 2}
 header .md\:grid-layout-desktop>.col-start-10{grid-column:9/span 3}
 [aria-label="\625 \639 \644 \627 \646 "] button.absolute{right:var(--grid-inset)}
 .HomeHero .parallaxOut>div[class*="bottom-[72px]"][class*="right-[72px]"]{right:var(--grid-inset)!important}
 /* Proof panel: the video's left edge and the panel's right edge sit on the content edge. */
 [class*="ScrollingQuote-module"][class*="__innerStack"]{margin-inline:var(--grid-inset-in);min-width:0}  /* a flex item that grows, so margins, not width */
}
.aai-footer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
@media (min-width:640px){.aai-footer__grid{gap:48px}}
@media (min-width:1024px){.aai-footer__grid{grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,.8fr)) minmax(0,1fr);gap:40px}}
.aai-footer__brand,.aai-footer__contact{grid-column:span 2}
@media (min-width:1024px){.aai-footer__brand,.aai-footer__contact{grid-column:auto}}
.aai-footer__brand img{display:block;height:26px;width:auto}
.aai-footer__brand p{margin:20px 0 0;max-width:32ch;font-size:13.5px;line-height:1.6;color:rgb(255 255 255/.55)}
.aai-footer__heading{margin:0 0 16px;font-size:13px;font-weight:500;color:#fff}
@media (min-width:768px){.aai-footer__heading{margin-bottom:20px}}
.aai-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
@media (min-width:768px){.aai-footer ul{gap:12px}}
.aai-footer nav a,.aai-footer address a,.aai-footer__legal a,.aai-footer__legal button{color:rgb(255 255 255/.65);text-decoration:none;transition:color .2s ease}
.aai-footer nav a{font-size:14px}
.aai-footer nav a:hover,.aai-footer address a:hover,.aai-footer__legal a:hover,.aai-footer__legal button:hover{color:#FFB4E9}
.aai-footer address{font-style:normal;font-size:14px;line-height:1.7;color:rgb(255 255 255/.65)}
.aai-footer__cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:14px;font-weight:500;color:#fff;text-decoration:none}
.aai-footer__cta span{transition:transform .2s ease}
.aai-footer__cta:hover span{transform:translateX(3px)}
.aai-footer__legal{display:flex;flex-direction:column;gap:12px;margin-top:56px;padding:24px 0;border-top:1px solid rgb(255 255 255/.1);font-size:12.5px;color:rgb(255 255 255/.45)}
.aai-footer__legal p{margin:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.aai-footer__legal button{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.aai-footer__made{display:inline-flex;align-items:center;gap:.4em}
.aai-footer__heart{font-size:1.05em;line-height:1}
/* Tarjama wordmark (brand/products/tarjama.svg) drawn in the link colour, so it follows hover. */
.aai-footer__legal a.aai-footer__tarjama{display:inline-block;height:13px;aspect-ratio:861/204;background:currentColor;mask:url('/brand/products/tarjama.svg') left center/contain no-repeat;-webkit-mask:url('/brand/products/tarjama.svg') left center/contain no-repeat}
@media (min-width:768px){.aai-footer__legal{flex-direction:row;align-items:center;justify-content:space-between;margin-top:72px}}
/* Wordmark: a 10%-white outline drawing in, plus the same outline in a purple gradient revealed
   only inside a radial mask that follows the cursor (site-footer.js animates its radius). */
.aai-footer__wordmark{margin-top:8px;padding-bottom:clamp(24px,4vw,48px)}
.aai-footer__wordmark svg{display:block;width:100%;height:auto;overflow:visible;cursor:default}
.aai-wm-outline>*,.aai-wm-glow>*{fill:none;vector-effect:non-scaling-stroke}
.aai-wm-outline{stroke:#fff;stroke-width:1.6px;opacity:.14}
.aai-wm-outline>*{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s ease-in-out calc(var(--i) * 80ms)}
.aai-footer__wordmark svg.is-drawn .aai-wm-outline>*{stroke-dashoffset:0}
.aai-wm-glow{stroke:url(#aai-wm-fill);stroke-width:2.2px}
@media (prefers-reduced-motion:reduce){.aai-wm-outline>*{transition:none;stroke-dashoffset:0}}
/* Navbar over the footer: dark glass, matching the footer (flag set by site-footer.js). */
[data-footer-under-nav] body{--nav-background:rgb(22 22 23/.78);--nav-dropdown-background:rgb(22 22 23/.94);--nav-text:#f5f5f7;--nav-muted:#86868b;--nav-hairline:rgb(255 255 255/.1);--nav-solid:#161617}

/* ===== Prefooter ("Make your next ambition operational.") in black ==============================
   The tan card becomes black and runs into the black footer. Its line-art video is black on white
   with a multiply blend, which vanishes on black, so it is inverted and screened to white lines. */
.VideoCta{color:#fff!important}
.VideoCta>div:last-child{background:#09090A!important}
.ScrollRevealSection:has(.VideoCta) .bg-foundry-tan{background:#09090A!important}  /* the card's expanding background layer */
.VideoCta p,.VideoCta .RichText:not(.header3-regular){color:rgb(255 255 255/.7)!important}
.VideoCta h2,.VideoCta h2 *{color:#fff!important}
.VideoCta .ResponsiveVideo{mix-blend-mode:screen!important;filter:invert(1);opacity:.9}
/* Hero subtext: two lines under the headline, inside the wrapper that fades with it. */
.HeroSubtext{margin:24px auto 0;max-width:34rem;color:rgb(255 255 255/.72);font-size:20px;line-height:1.45;letter-spacing:-.005em;text-align:center;text-wrap:balance}
@media (max-width:767px){.HeroSubtext{margin-top:16px;max-width:none;font-size:16px;line-height:1.45}}
/* Shape system: all sharp. Every corner on the page is square, including Tailwind's rounded-*
   utilities (some carry !important, so this sits in the base layer, which wins for !important).
   Scripted clip-paths and the WebGL scenes are squared in audit_fixes.py (square_corners). */
@layer base{*,*::before,*::after{border-radius:0!important}}
/* Section rhythm: the Trusted by band, advantages and news sections share one rhythm. The heading
   sits above its content at the header3 size, 48px above the content (64px from 1280px), and each
   section has the same vertical padding, so every gap between them is equal. */
section.BlogPreview [class~="md:mb-20"] p{margin-top:0;font-size:2.5rem;line-height:1.25;font-weight:400;text-align:left}
section.BlogPreview [class~="md:mb-20"] :is(div,span){text-align:left!important}  /* the line splitter sets text-align inline */
section.BlogPreview [class~="md:mb-20"]{margin-bottom:48px}
/* Spacing audit (10 October 2026): the inner pages' section padding (pages.css --pg-sec), so every
   page keeps one rhythm: 72px on phones, 122px at 1440 wide. */
:is(.aai-trusted,section.CardGrid,section.BlogPreview){padding-block:clamp(72px,8.5vw,136px)}
@media (min-width:1280px){section.BlogPreview [class~="md:mb-20"]{margin-bottom:64px}}
@media (max-width:767px){section.BlogPreview [class~="md:mb-20"] p{font-size:1.5rem;line-height:1.05}}
/* Product stages from 1450px: text beside the cards. Stages on the left start on the left content
   edge; Sadu and the models screen, on the right, end on the right content edge (columns 9 to 11). */
@media (min-width:1450px){
 .PullApartContent:has(:is([aria-label="Sadu"]))>div,.PullApartContent:has(:is([aria-label="Sadu"]))>div :is(.RichText,h2){text-align:right}
 .PullApartContent:has(:is([aria-label="Sadu"]))>div :is(.items-start,[class*="flex-col"]){align-items:flex-end}
 .PullApartContent:has(:is([aria-label="Sadu"]))>div [class*="w-fit"]{margin-left:auto}
 .PullApartContent:has(:is([aria-label="Sadu"]))>div>h2{justify-content:flex-end}
 .PullApartContent:has(:is([aria-label="Sadu"]))>div .AnimatedText div{text-align:right!important}  /* the line splitter sets text-align:left inline */
 /* The logo leads (10 October 2026, the user's note): above the eyebrow, clear of it, then the title on
    one line, sized to the column so the longest ("Arabic.ai Agentic platform") fits. */
 .PullApartContent>div:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="Atelier"],[aria-label="Sadu"],[aria-label="\62e \62f \645 \627 \62a \20 \627 \644 \628 \64a \627 \646 \627 \62a "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])){container-type:inline-size}
 .PullApartContent .RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="Atelier"],[aria-label="Sadu"],[aria-label="\62e \62f \645 \627 \62a \20 \627 \644 \628 \64a \627 \646 \627 \62a "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])::before{font-size:min(1.25em,9.2cqi)}
 .PullApartContent>div:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="Atelier"],[aria-label="Sadu"],[aria-label="\62e \62f \645 \627 \62a \20 \627 \644 \628 \64a \627 \646 \627 \62a "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>[class*="__category"]{flex-wrap:wrap}
 .PullApartContent>div:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="Atelier"],[aria-label="Sadu"],[aria-label="\62e \62f \645 \627 \62a \20 \627 \644 \628 \64a \627 \646 \627 \62a "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>[class*="__category"]::before{content:"";display:block;flex:0 0 100%;height:34px;margin-bottom:36px;
   background:var(--logo) left center/contain no-repeat;transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
 .PullApartContent>div:has(.RichText.header4-regular:is([aria-label="Sadu"]))>[class*="__category"]::before{background-position:right center}
}
/* The reveal masks each line with overflow:clip exactly at the column edge, which can shave the
   first glyph. A little room on both sides, cancelled by a negative margin, keeps the text in place. */
.PullApartContent .AnimatedText>div{padding-inline:4px;margin-inline:-4px}
/* Navbar on phones and tablets (below 1024px): logo and menu button only. "Talk to our team" lives in
   the menu sheet. Tablets use the phone header, because the four links and the CTA do not fit
   between the logo and the right edge there. */
header div.flex.shrink-0[class~="md:hidden"]:has(>.FlatCta){display:none!important}
@media (min-width:768px) and (max-width:1023px){
 header nav.relative[class~="md:flex"]{display:none!important}
 header div.hidden[class~="md:flex"]:has(>.FlatCta){display:none!important}
 header button[class~="md:hidden"][class~="size-10"]{display:inline-flex!important}
 /* the open menu: its sheet, backdrop and in-bar title are phone-only (md:hidden) in the bundle */
 header [class~="md:hidden"].flex{display:flex}
 header [class~="md:hidden"]:not(.flex):not(.inline-flex){display:block}
 /* open: the header becomes the full-height phone sheet (the bundle switches it back to a bar at md) */
 header.h-\[100dvh\]{top:0;display:flex;height:100dvh;max-height:100dvh;overflow:hidden}
 header .col-span-1:has(>[class~="md:hidden"]) div.hidden[class~="md:block"]{display:none}
 /* the sheet's rows start on the content edge, under the logo (the sheet pads 24px itself) */
 header div.relative.flex.flex-col.flex-1[class~="md:hidden"]{padding-inline:calc(var(--grid-inset) - 24px)}
}
/* Menu button (phones and tablets): a black square with three white lines; open, a white cross. */
header button.size-10[aria-expanded]{width:40px;height:40px;background-color:#09090A!important;color:#fff!important}
header button.size-10[aria-expanded="false"] svg{display:none}
header button.size-10[aria-expanded="false"]{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff)!important;background-size:18px 2px!important;background-repeat:no-repeat!important;background-position:center 13px,center 19px,center 25px!important}
/* ===== Trusted by =================================================================================
   Replaces the card carousel under the sector rotator, on the same grey. A centred title over one
   row of client logos drifting left; the row fades to nothing at both edges. The track holds two
   copies of the row and moves by half its width, so the loop is seamless. Hover pauses it, and
   reduced motion shows one static, wrapped row. Logos are drawn in one dark tone. */
.aai-trusted{text-align:center}
.aai-trusted__title{margin:0 0 40px;font-size:18px;line-height:1.3;font-weight:400;letter-spacing:-.01em;color:rgb(9 9 10/.6)}
.aai-trusted__marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.aai-trusted__track{display:flex;width:max-content;animation:aai-trusted-drift 60s linear infinite}
.aai-trusted__track ul{display:flex;align-items:center;gap:80px;margin:0;padding:0 40px;list-style:none}
.aai-trusted__track li{flex:none;display:flex;align-items:center;height:48px}
.aai-trusted__track img{display:block;width:auto;max-width:none;filter:brightness(0);opacity:.55}
.aai-trusted__marquee:hover .aai-trusted__track{animation-play-state:paused}
@keyframes aai-trusted-drift{to{transform:translateX(-50%)}}
@media (max-width:767px){.aai-trusted__title{margin-bottom:28px;font-size:16px}.aai-trusted__track ul{gap:56px;padding:0 28px}.aai-trusted__track img{zoom:.85}}
@media (prefers-reduced-motion:reduce){
 .aai-trusted__marquee{-webkit-mask-image:none;mask-image:none}
 .aai-trusted__track{animation:none;width:auto;justify-content:center}
 .aai-trusted__track ul{flex-wrap:wrap;justify-content:center;row-gap:32px;padding-inline:var(--grid-inset)}
 .aai-trusted__track ul[aria-hidden]{display:none}
}
/* ===== Partnerships ===============================================================================
   The advantages section now shows partner cards (audit_fixes.py, PARTNERS): photo on the top half
   with a black-to-clear gradient carrying "arabic.ai × partner", then title, text and a text link.
   The row is drawn twice and drifts left by one copy (half the track plus half a gap), so the loop is
   seamless. It pauses while hovered or while a link inside has focus; under reduced motion it stops
   and becomes a row you can scroll sideways. Cards are clipped at the content edges. */
.aai-partners{overflow:hidden}
.aai-partners__track{display:flex;gap:8px;width:max-content;animation:aai-partners-drift 80s linear infinite}
.aai-partners:hover .aai-partners__track,.aai-partners:focus-within .aai-partners__track{animation-play-state:paused}
@keyframes aai-partners-drift{to{transform:translateX(calc(-50% - 4px))}}
/* With JavaScript (clone-support.js, partnersCarousel) the drift is scripted instead, so a hovered or
   focused card can glide fully into view. */
.aai-partners.is-scripted .aai-partners__track{animation:none;will-change:transform}
.aai-partner{flex:none;display:flex;flex-direction:column;width:clamp(288px,29vw,460px);background:#F2F2F2;color:#09090A}
.aai-partner__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#09090A}
.aai-partner__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aai-partner__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(9 9 10/.9) 0%,rgb(9 9 10/.5) 32%,rgb(9 9 10/0) 66%)}
.aai-partner__logos{position:absolute;z-index:1;left:28px;right:28px;bottom:24px;margin:0;display:flex;align-items:center;gap:14px;color:#fff}
.aai-partner__arabic{display:block;height:19px;aspect-ratio:323.09/57.94;background:#fff;-webkit-mask:url('/brand/arabic-ai.svg') left center/contain no-repeat;mask:url('/brand/arabic-ai.svg') left center/contain no-repeat}
.aai-partner__x{font-size:17px;line-height:1;opacity:.7}
.aai-partner__wordmark{font-size:18px;line-height:1;font-weight:600;letter-spacing:.02em}
.aai-partner__logo{display:block;flex:none;background:#fff;-webkit-mask:var(--partner-logo) left center/contain no-repeat;mask:var(--partner-logo) left center/contain no-repeat}
.aai-partner__body{flex:1;display:flex;flex-direction:column;gap:12px;padding:28px 28px 32px}
.aai-partner__title{margin:0;font-size:22px;line-height:1.25;font-weight:400;letter-spacing:-.01em}
.aai-partner__text{flex:1;margin:0;font-size:15px;line-height:1.5;color:rgb(9 9 10/.65)}
.aai-partner__link{display:inline-flex;align-items:center;gap:8px;width:fit-content;margin-top:12px;font-size:15px;font-weight:500;color:#3F1993;text-decoration:none}
.aai-partner__link:hover{text-decoration:underline;text-underline-offset:4px}
.aai-partner__link:focus-visible{outline:2px solid #3F1993;outline-offset:3px}
@media (max-width:767px){
 .aai-partner{width:82vw}
 .aai-partner__body{padding:24px 24px 28px}
 .aai-partner__logos{left:24px;right:24px;bottom:20px}
 .aai-partner__title{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
 .aai-partners{overflow-x:auto;scroll-snap-type:x mandatory}
 .aai-partners__track{animation:none}
 .aai-partner{scroll-snap-align:start}
 .aai-partner[aria-hidden]{display:none}
}
/* ===== Guide lines ================================================================================
   As on stripe.com: two thin vertical rails just outside the content edge (16px; 8px on phones), one
   continuous pair from the top of the page to the bottom. They are drawn once on <body> and blended
   (difference), so the same hairline reads as faint ink on white and grey and as faint white on the
   black sections and photos. They run over the navbar too, one line from top to bottom. The Trusted by logo strip
   also has full-width hairlines above and below it. */
:root{--aai-guide:rgb(9 9 10/.08)}
body{position:relative}
/* The guide lines (12 October 2026, the user's note that the deployed site was choppy): fixed to the
   screen and drawn plainly at every width, as phones have had them since 10 October. The page-tall
   box blended with "difference" was a composited layer the whole height of the page, re-blended over
   the 3D scene and the videos on every frame. Mid-grey at 22% gives the same light grey on white and
   near-black on black. Continuous: the fade during the collage was removed on 19 October 2026 (Ala). */
body::after{content:"";position:fixed;top:0;bottom:0;left:8px;right:8px;z-index:51;border-inline:1px solid rgb(140 140 140/.22);pointer-events:none;transition:opacity .3s}
@media (min-width:768px){body::after{left:calc(var(--grid-inset) - 16px);right:calc(var(--grid-inset) - 16px)}}
.aai-trusted__band{border-block:1px solid var(--aai-guide);padding-block:20px}

/* ===== Story bento ================================================================================
   Replaces the news tiles under "From intelligence to impact." (audit_fixes.py, STORIES; bento.js).
   One wide and one narrow card, then three. One palette runs across the grid on a diagonal, black
   (benchmark, funding), lilac (words, Atelier) and white at the centre (deployment), and every visual
   is built from the same parts: large numerals, mono micro-labels, hairlines and square markers.
   References: Scale (data on black), Mistral (stepped pixels), Stripe (bilingual product moment).
   The card and its story panel share the look ([data-look]). Visuals animate the first time they
   come into view (.is-in); reduced motion shows them finished, without loops. */
section.BlogPreview{background:#F7F7F8}
section.BlogPreview [class~="md:mb-20"]~:not(.aai-bento):not(template){display:none!important}
.aai-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-look]{--ink:#09090A;--mute:rgb(9 9 10/.6);--line:rgb(9 9 10/.1);--btn:rgb(63 25 147/.08);--btn-ink:#3F1993;--btn-on:#3F1993;--btn-on-ink:#fff;--accent:#3F1993;color:var(--ink)}
[data-look="night"]{--ink:#F5F5F7;--mute:rgb(245 245 247/.56);--line:rgb(255 255 255/.1);--btn:rgb(255 255 255/.09);--btn-ink:#fff;--btn-on:#fff;--btn-on-ink:#09090A;--accent:#FFB4E9;
 background:radial-gradient(70% 70% at 12% 110%,rgb(63 25 147/.55),transparent 70%),linear-gradient(rgb(255 255 255/.045) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgb(255 255 255/.045) 1px,transparent 1px) 0 0/40px 40px,#09090A}
[data-look="lilac"]{--ink:#1C0B4A;--mute:rgb(42 15 107/.62);--line:rgb(42 15 107/.16);background:radial-gradient(90% 70% at 100% 0%,rgb(255 255 255/.7),transparent 60%),#F1EBFC}
[data-look="paper"]{--line:rgb(9 9 10/.12);background:radial-gradient(80% 60% at 50% 115%,rgb(255 180 233/.22),transparent 70%),#fff}

.aai-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr)) auto;gap:16px}  /* two equal rows beside the wide card; the gutter is the 16px the cards sit inside the frame lines (spacing audit) */
.aai-bento__card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:560px;border:1px solid rgb(9 9 10/.08);overflow:hidden;cursor:pointer;transition:border-color .3s ease}
.aai-bento__card[data-look="night"]{border-color:transparent}
.aai-bento__card:hover{border-color:rgb(63 25 147/.35)}
.aai-bento__card--wide{grid-column:span 2;grid-row:span 2;min-height:620px}
.aai-bento__card--half{min-height:0}
.aai-bento__card--third{min-height:500px}
.aai-bento__top{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:28px 28px 0}
.aai-bento__head{display:grid;justify-items:start;gap:14px}
.aai-bento__logo{display:block;width:auto;max-width:100%}
.aai-bento__logo.is-ink{filter:brightness(0)}
.aai-story__intro .aai-bento__logo{margin-bottom:22px}
.aai-bento__title{margin:0;max-width:20ch;font-size:24px;line-height:1.2;font-weight:400;letter-spacing:-.015em;color:var(--ink)}
.aai-bento__open{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;background:var(--btn);color:var(--btn-ink);cursor:pointer;transition:background-color .25s ease,color .25s ease}
.aai-bento__open svg{width:15px;height:15px;fill:currentColor}
.aai-bento__card:hover .aai-bento__open{background:var(--btn-on);color:var(--btn-on-ink)}
.aai-bento__open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aai-bento__visual{position:relative;flex:1;display:flex;align-items:flex-end;padding:28px}
@media (max-width:1023px){.aai-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}.aai-bento__card--wide{grid-column:1/-1;grid-row:auto;min-height:560px}.aai-bento__card--half{min-height:340px}}
@media (max-width:639px){.aai-bento{grid-template-columns:1fr}.aai-bento__card,.aai-bento__card--third{min-height:480px}.aai-bento__card--half{min-height:340px}.aai-bento__top{padding:24px 24px 0}.aai-bento__visual{padding:24px}.aai-bento__title{font-size:22px}}

/* Story visuals (.bv) */
.bv{position:relative;width:100%;color:var(--ink)}
.bv ol,.bv ul{list-style:none;margin:0;padding:0}
.bv p{margin:0}
.bv-mono,.bv-bench__who small,.bv-bench__val,.bv-bench__ticks,.bv-bench__rank,.bv-dep__cap,.bv-dep__modes,.bv-fund time,.bv-fund__k{font-family:var(--font-aeonik-mono),ui-monospace,monospace}

/* night: benchmark */
.bv-bench{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:48px;align-items:end}
.bv-bench__score{font-size:clamp(64px,7vw,108px);line-height:.88;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.bv-bench__score small{margin-left:6px;font-size:.38em;letter-spacing:0;color:var(--accent)}
.bv-bench__label{margin-top:16px!important;max-width:22ch;font-size:14px;line-height:1.45;color:var(--mute)}
.bv-bench__rank{margin-top:22px!important;font-size:12px;letter-spacing:.02em;color:var(--mute)}
.bv-bench__rank span:first-child{color:var(--accent)}
.bv-bench__chart ol{display:grid;gap:16px}
.bv-bench__chart li,.bv-bench__axis{display:grid;grid-template-columns:120px minmax(0,1fr) 44px;align-items:center;gap:16px}
.bv-bench__who{font-size:14px;line-height:1.25}
.bv-bench__who small{display:block;margin-top:2px;font-size:11px;color:var(--mute)}
.bv-bench__bar{display:block;height:8px;width:calc(var(--v) * 100%);background:rgb(255 255 255/.24);transform-origin:left;transform:scaleX(0);transition:transform 1.5s cubic-bezier(.16,1,.3,1) calc(.15s + var(--i) * .14s)}
.bv-bench .is-lead .bv-bench__bar{height:10px;background:linear-gradient(90deg,#5A2FC0,#7B4FD6 45%,#FFB4E9)}
.bv-bench .is-lead .bv-bench__who{color:var(--accent)}
.bv-bench__val{font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.is-in .bv-bench__bar{transform:none}
.bv-bench__axis{margin-top:14px}
.bv-bench__ticks{display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid var(--line);font-size:10px;color:var(--mute)}
.bv-bench__ticks i{font-style:normal}
.bv-bench__field{grid-column:1/-1}
.bv-bench__field p{font-size:13px;color:var(--mute)}
.bv-bench__field ol{display:grid;grid-template-columns:repeat(41,minmax(0,1fr));gap:4px;margin-top:12px!important}
.bv-bench__field li{aspect-ratio:1;background:rgb(255 255 255/.16);opacity:0;transform:scale(.4);transition:opacity .4s ease calc(var(--i) * 22ms),transform .5s cubic-bezier(.16,1,.3,1) calc(var(--i) * 22ms)}
.bv-bench__field li.is-lead{background:#FFB4E9}
.is-in .bv-bench__field li{opacity:1;transform:none}

/* pixel: words */
.bv-pixels{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:3px;margin-bottom:28px}
.bv-pixels i{aspect-ratio:1}
.bv-pixels i.on{background:var(--t);transform:scale(0);transition:transform .55s cubic-bezier(.16,1,.3,1) var(--d)}
.is-in .bv-pixels i.on{transform:none}
.bv-pixels.is-strip{gap:3px;margin-bottom:16px}
.bv-pixels.is-strip i{aspect-ratio:auto;height:10px}
.bv-words__row{display:grid;gap:0}
.bv-words__num{font-size:clamp(60px,6.4vw,92px);line-height:.9;letter-spacing:-.045em;color:#2A0F6B;font-variant-numeric:tabular-nums}
.aai-bento__card .bv-words__num{font-size:clamp(48px,4.2vw,68px)}
.aai-bento__card .bv-words__label{margin:8px 0 0!important}
.bv-words__label{margin:10px 0 26px!important;font-size:15px;color:var(--mute)}
.bv-words__line{font-size:20px;line-height:1.3;color:#2A0F6B}
.bv-ticker{display:inline-block;vertical-align:bottom;height:1.3em;overflow:hidden;color:#5A2FC0}
.bv-ticker__track{display:flex;flex-direction:column;animation:bv-ticker 12s cubic-bezier(.7,0,.3,1) infinite paused}
.bv-ticker__track span{height:1.3em}
.is-in .bv-ticker__track{animation-play-state:running}
@keyframes bv-ticker{0%,13%{transform:translateY(0)}16.6%,30%{transform:translateY(-1.3em)}33.3%,46%{transform:translateY(-2.6em)}50%,63%{transform:translateY(-3.9em)}66.6%,80%{transform:translateY(-5.2em)}83.3%,96%{transform:translateY(-6.5em)}100%{transform:translateY(-7.8em)}}
.bv-words.is-big .bv-pixels{margin-bottom:40px}
.bv-words__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-bottom:32px!important}
.bv-words__stats li{padding-top:14px;border-top:1px solid rgb(42 15 107/.2)}
.bv-words__stat{font-size:clamp(40px,4vw,60px);line-height:1;letter-spacing:-.035em;color:#2A0F6B;font-variant-numeric:tabular-nums}
.bv-words__stats p:last-child{margin-top:8px!important;font-size:14px;color:var(--mute)}

/* atelier: Atelier's own interface (rooms, specialists, translation, reading room, voice, concierge)
   as in its product film, in its typefaces: TRJN DaVinci Display (the Atelier serif) and Neue
   Montreal. Corners stay square, like the rest of the page. On the card the window is drawn at a
   500px design size and scaled to fit (bento.js); in the panel it is full size. */
[data-look="atelier"]{--ink:#1B1830;--mute:rgb(27 24 48/.55);--line:rgb(27 24 48/.1);
 background:radial-gradient(55% 50% at 12% 6%,rgb(150 128 246/.55),transparent 72%),radial-gradient(60% 55% at 100% 100%,rgb(246 196 182/.55),transparent 70%),#F4F3F7}
.aai-at{--at-serif:"TRJN DaVinci Display",Georgia,serif;--at-sans:"Neue Montreal",var(--font-aeonik),system-ui,sans-serif;--at-ink:#1B1830;--at-mute:#86829A;--at-paper:#F8F6F3;--at-edge:#E9E5DF;--at-violet:#3F1993;width:100%;font-family:var(--at-sans);color:var(--at-ink)}
.aai-at__fit{position:relative}
.aai-at__stage{width:500px;font-size:13px;transform-origin:top left}
.aai-at.is-big .aai-at__stage{width:100%;font-size:15px}
.aai-at__rooms{display:flex;width:max-content;margin:0 auto;padding:.25em;background:rgb(27 24 48/.07)}
.aai-at__rooms button{padding:.5em 1em;border:0;background:none;font:inherit;font-size:.86em;color:var(--at-mute);white-space:nowrap;cursor:pointer;transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
.aai-at__rooms button.is-active{background:#fff;color:var(--at-ink);box-shadow:0 1px 2px rgb(27 24 48/.12),0 0 0 1px rgb(27 24 48/.04)}
.aai-bento__card .aai-at__rooms button{pointer-events:none}
.aai-at__rooms button:focus-visible{outline:2px solid var(--at-violet);outline-offset:1px}
.aai-at__window{display:grid;margin-top:.9em;padding:1.2em;min-height:21em;background:#fff;box-shadow:0 30px 60px -30px rgb(42 15 107/.4),0 0 0 1px rgb(27 24 48/.06)}
.aai-at.is-big .aai-at__window{min-height:24em;padding:1.6em}
.aai-at__room{grid-area:1/1;opacity:0;visibility:hidden}
.aai-at__room.is-active{opacity:1;visibility:visible;transition:opacity .5s ease}
.aai-at__crumb{margin:0 0 .9em!important;font-size:.78em;color:var(--at-mute)}
.aai-at__caption{display:grid;width:max-content;max-width:100%;margin:.9em auto 0!important;padding:.5em 1em;background:#fff;box-shadow:0 8px 24px -14px rgb(42 15 107/.4);font-family:var(--at-serif);font-size:.95em;text-align:center}
.aai-at__caption span{grid-area:1/1;opacity:0;visibility:hidden}
.aai-at__caption span.is-active{opacity:1;visibility:visible;transition:opacity .5s ease}
@keyframes at-in{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
/* Specialists */
.aai-at__specialists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55em;list-style:none;margin:0;padding:0}
.aai-at__specialists li{display:grid;padding:.7em .8em .8em;background:var(--at-paper);border:1px solid var(--at-edge)}
.aai-at__specialists li.is-picked{border-color:var(--at-violet);background:#FCFBFF;box-shadow:0 0 0 1px rgb(63 25 147/.18)}
.aai-at__specialists li.is-custom{background:transparent;border-style:dashed;border-color:#CFCAD8}
.is-active .aai-at__specialists li{animation:at-in .5s cubic-bezier(.16,1,.3,1) calc(var(--i) * 70ms) both}
.aai-at__no{font-family:var(--at-serif);font-size:.72em;color:var(--at-mute)}
.aai-at__num{font-family:var(--at-serif);font-size:2.3em;line-height:1;letter-spacing:-.02em}
.is-custom .aai-at__num{color:#B5B0C2}
.aai-at__name{margin-top:.6em;font-size:.86em;font-weight:500}
.aai-at__area{margin-top:.15em;font-size:.76em;color:var(--at-mute)}
/* Translation */
.aai-at__pair{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.aai-at__doc{padding:.9em 1em 1.1em;background:var(--at-paper);border:1px solid var(--at-edge)}
.aai-at__doc p{margin:0}
.aai-at__label{margin-bottom:.6em!important;font-size:.72em;color:var(--at-mute)}
.aai-at__doc--ar .aai-at__label{text-align:right}
.aai-at__doc p:last-child{font-size:.95em;line-height:1.55}
.aai-at__doc [lang="ar"]{min-height:3.2em;font-family:var(--font-aeonik),"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro","Segoe UI",sans-serif;font-size:1.1em;line-height:1.7;color:var(--at-violet)}
/* the translated pages, layout kept: a heading rule, then lines; some carry a table */
.aai-at__pages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7em;list-style:none;margin:1.1em 0 0;padding:0}
.aai-at__pages li{aspect-ratio:3/4;padding:.7em .6em;background:linear-gradient(#1B1830,#1B1830) right .6em top .7em/45% 3px no-repeat,repeating-linear-gradient(transparent 0 .55em,rgb(27 24 48/.12) .55em calc(.55em + 1px)) .6em 1.6em/calc(100% - 1.2em) calc(100% - 2.3em) no-repeat,#fff;box-shadow:0 10px 20px -14px rgb(42 15 107/.45),0 0 0 1px rgb(27 24 48/.06)}
.aai-at__pages li.has-table{background:linear-gradient(#1B1830,#1B1830) right .6em top .7em/45% 3px no-repeat,repeating-linear-gradient(rgb(63 25 147/.14) 0 .5em,transparent .5em .75em) .6em 1.8em/calc(100% - 1.2em) 40% no-repeat,repeating-linear-gradient(transparent 0 .55em,rgb(27 24 48/.12) .55em calc(.55em + 1px)) .6em 62%/calc(100% - 1.2em) 28% no-repeat,#fff}
.is-active .aai-at__pages li{animation:at-in .5s cubic-bezier(.16,1,.3,1) calc(.5s + var(--i) * 90ms) both}
/* Reading room */
.aai-at__read{display:grid;grid-template-columns:1.1fr 1fr;gap:.9em}
.aai-at__scan{padding:1em 1.1em;background:repeating-linear-gradient(transparent 0 1.85em,rgb(27 24 48/.07) 1.85em calc(1.85em + 1px)),#F3EFE7;font-family:var(--at-serif);font-style:italic;font-size:.98em;line-height:1.85em;color:#2A2440}
.aai-at__scan p{margin:0}
.aai-at__scan-ar{font-style:normal;font-family:var(--font-aeonik),"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro",sans-serif}
.aai-at__scan mark{position:relative;padding:0 .2em;background:rgb(63 25 147/.06);color:inherit;box-shadow:0 0 0 1px var(--at-violet)}
.aai-at__scan mark::before{content:attr(data-tag);position:absolute;left:-1px;top:-1.3em;padding:.05em .4em;background:var(--at-violet);font-family:var(--at-sans);font-style:normal;font-size:.55em;line-height:1.6;color:#fff;opacity:0}
.is-active .aai-at__scan mark::before{animation:at-in .4s ease both;animation-delay:.6s}
.aai-at__conf-title{margin:0 0 .8em!important;font-family:var(--at-serif);font-size:1.25em}
.aai-at__conf ul{display:grid;gap:.75em;list-style:none;margin:0;padding:0}
.aai-at__conf li{display:grid;grid-template-columns:6.4em minmax(0,1fr) 3em;align-items:center;gap:.6em;font-size:.78em}
.aai-at__conf i{display:block;height:3px;width:calc(var(--v) * 100%);background:var(--at-violet);transform-origin:left;transform:scaleX(0)}
.aai-at__conf .is-low i{background:#B07A1F}
.is-active .aai-at__conf i{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1) calc(.2s + var(--i) * .12s)}
.aai-at__conf b{font-family:var(--at-serif);font-weight:400;font-size:1.15em;text-align:right}
.aai-at__flag{margin:1em 0 0!important;padding:.55em .7em;background:rgb(176 122 31/.12);font-size:.74em;color:#6E4A0E}
/* Voice studio */
.aai-at__voice{padding:.9em 1em;background:var(--at-paper);border:1px solid var(--at-edge)}
.aai-at__say{min-height:3.3em;margin:0!important;font-family:var(--font-aeonik),"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro",sans-serif;font-size:1.1em;line-height:1.6}
.aai-at__meta{display:flex;gap:1.2em;margin:.7em 0 0!important;font-size:.72em;color:var(--at-mute)}
.aai-at__time{color:var(--at-violet);font-family:var(--at-serif);font-size:1.15em}
.aai-at__speakers{display:flex;gap:.4em;margin:1em 0 .6em!important}
.aai-at__speakers span{padding:.15em .55em;font-size:.68em;color:#fff}
.aai-at__speakers .s0{background:var(--at-violet)}.aai-at__speakers .s1{background:#2E6B3E}.aai-at__speakers .s2{background:#B07A1F}
.aai-at__wave{display:flex;align-items:center;gap:2px;height:6.2em}
.aai-at__wave i{flex:1;height:calc(var(--h) * 100%);background:var(--at-violet);transform-origin:center}
.aai-at__wave i.s1{background:#2E6B3E}.aai-at__wave i.s2{background:#C9C5D3}
.is-active .aai-at__wave i:not(.s2){animation:at-wave 1.1s ease-in-out var(--d) infinite alternate}
@keyframes at-wave{from{transform:scaleY(.55)}}
/* Concierge */
.aai-at__ask{display:flex;align-items:flex-start;gap:.7em}
.aai-at__avatar{flex:none;display:grid;place-items:center;width:2.1em;height:2.1em;background:var(--at-ink);font-size:.7em;color:#fff}
.aai-at__ask p{flex:1;min-height:3.4em;margin:0!important;padding:.65em .9em;background:#F3F1EC;font-size:.9em;line-height:1.45}
.aai-at__route{display:flex;align-items:center;margin:1em 0 0 2.2em!important}
.aai-at__route span{padding:.3em .7em;box-shadow:inset 0 0 0 1px rgb(27 24 48/.35);font-size:.74em;opacity:0}
.aai-at__route i{width:1.6em;height:1px;background:rgb(27 24 48/.35)}
.is-active .aai-at__route span{animation:at-in .4s ease both}
.is-active .aai-at__route span:nth-child(1){animation-delay:1.4s}.is-active .aai-at__route span:nth-child(3){animation-delay:1.8s}.is-active .aai-at__route span:nth-child(5){animation-delay:2.2s}
.aai-at__match{display:flex;flex-wrap:wrap;gap:.5em;margin:.9em 0 0 2.2em!important}
.aai-at__match span{display:flex;align-items:center;gap:.55em;padding:.4em .7em .4em .4em;box-shadow:inset 0 0 0 1px rgb(27 24 48/.18);font-size:.8em;opacity:0}
.aai-at__match span.is-top{box-shadow:inset 0 0 0 1px var(--at-violet);background:rgb(63 25 147/.05)}
.aai-at__match b{padding:.2em .4em;background:var(--at-violet);font-weight:400;font-size:.8em;color:#fff}
.aai-at__match span:not(.is-top) b{background:#B5B0C2}
.aai-at__match em{font-style:normal;color:var(--at-violet)}
.is-active .aai-at__match span{animation:at-in .45s ease 2.7s both}
.is-active .aai-at__match span:not(.is-top){animation:at-fade .45s ease 2.9s both}
@keyframes at-fade{from{opacity:0}to{opacity:.5}}
.aai-at__file{display:flex;align-items:center;gap:.6em;width:max-content;margin:.9em 0 0 2.2em!important;padding:.5em .8em;box-shadow:inset 0 0 0 1px var(--at-edge);font-size:.8em;opacity:0}
.aai-at__file i{width:.8em;height:1em;box-shadow:inset 0 0 0 1px var(--at-ink)}
.aai-at__file span{color:var(--at-mute)}
.is-active .aai-at__file{animation:at-in .45s ease 3.4s both}

/* paper: deployment, a measured diagram */
.bv-dep{display:grid;gap:18px}
.bv-dep__modes{position:relative;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.bv-dep__modes button{padding:0 0 10px;border:0;background:none;font:inherit;font-size:12px;letter-spacing:.02em;color:var(--mute);text-align:left;cursor:pointer;transition:color .3s ease}
.bv-dep__modes button.is-active{color:var(--ink)}
.bv-dep__modes button:focus-visible{outline:2px solid #3F1993;outline-offset:2px}
.aai-bento__card .bv-dep__modes button{pointer-events:none}
.bv-dep__bar{position:absolute;left:0;bottom:-1px;width:50%;height:2px;background:#3F1993;transition:transform .6s cubic-bezier(.7,0,.3,1)}
.bv-dep[data-active="1"] .bv-dep__bar{transform:translateX(100%)}
.bv-dep__org{position:relative;padding:14px}
.bv-dep__mark{position:absolute;width:10px;height:10px;border:0 solid rgb(9 9 10/.45)}
.bv-dep__mark--tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.bv-dep__mark--tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.bv-dep__mark--bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.bv-dep__mark--br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.bv-dep__cap{font-size:10.5px;letter-spacing:.03em;color:var(--mute)}
.bv-dep__org>.bv-dep__cap{margin-bottom:12px!important}
.bv-dep__env{padding:14px 14px 18px;border:1px dashed #3F1993;background:rgb(63 25 147/.03);transition:border-color .5s ease,background-color .5s ease}
.bv-dep[data-active="1"] .bv-dep__env{border-style:solid;background:rgb(63 25 147/.06)}
.bv-dep__cap [data-pane]{display:none}
.bv-dep__cap [data-pane].is-active{display:inline}
.bv-dep__nodes{display:grid;grid-template-columns:auto minmax(14px,1fr) auto minmax(14px,1fr) auto;align-items:center;margin-top:16px}
.bv-dep__node{padding:10px 12px;background:#fff;box-shadow:0 0 0 1px rgb(63 25 147/.22),0 8px 18px -12px rgb(42 15 107/.35);font-size:14px;color:#1C0B4A}
.bv-dep__link{position:relative;height:1px;background:rgb(63 25 147/.3)}
.bv-dep__link b{position:absolute;top:-2.5px;left:0;width:6px;height:6px;background:#3F1993;opacity:0}
.is-in .bv-dep__link b{opacity:1;animation:bv-packet 2.8s cubic-bezier(.65,0,.35,1) infinite}
.is-in .bv-dep__link:last-of-type b{animation-delay:1.4s}
@keyframes bv-packet{0%,8%{left:0}46%,58%{left:calc(100% - 6px)}96%,100%{left:0}}
.bv-dep__principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:10px!important}
.bv-dep__principles li{padding-top:12px;border-top:1px solid #3F1993;font-size:15px;line-height:1.4}
.bv-dep.is-big{max-width:760px;gap:24px}
.bv-dep.is-big .bv-dep__node{padding:14px 18px;font-size:16px}
.bv-dep.is-big .bv-dep__modes button{font-size:14px}

/* night: Sadu, an agent workflow from request to publish; a pulse runs through it in order */
.bv-flow ol{position:relative;display:grid;gap:12px}
.bv-flow ol::before{content:"";position:absolute;left:22px;top:20px;bottom:20px;width:1px;background:rgb(255 255 255/.18)}
.bv-flow ol::after{content:"";position:absolute;left:19px;top:20px;width:7px;height:7px;background:#FFB4E9;opacity:0}
.is-in .bv-flow ol::after{opacity:1;animation:bv-flow-pulse 4.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bv-flow-pulse{0%{top:20px}100%{top:calc(100% - 27px)}}
.bv-flow li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px 12px 44px;background:rgb(255 255 255/.03);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12);transition:box-shadow .4s ease,background-color .4s ease}
.bv-flow li::before{content:"";position:absolute;left:18px;top:50%;width:9px;height:9px;margin-top:-4.5px;background:#09090A;box-shadow:inset 0 0 0 1px rgb(255 255 255/.45)}
.is-in .bv-flow li{animation:bv-flow-node 4.8s ease-in-out calc(var(--i) * 1.2s) infinite}
@keyframes bv-flow-node{0%,4%{background:rgb(255 255 255/.03);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}10%,26%{background:rgb(123 79 214/.22);box-shadow:inset 0 0 0 1px #FFB4E9}32%,100%{background:rgb(255 255 255/.03);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}}
.bv-flow__kind{font-family:var(--font-aeonik-mono),ui-monospace,monospace;font-size:11px;letter-spacing:.02em;color:var(--mute)}
.bv-flow__what{font-size:15px;color:var(--ink);text-align:right}
.bv-flow.is-big{max-width:900px}
.bv-flow.is-big ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bv-flow.is-big ol::before{left:20px;right:20px;top:auto;bottom:-14px;width:auto;height:1px}
.bv-flow.is-big ol::after{display:none}
.bv-flow.is-big li{flex-direction:column;align-items:flex-start;gap:28px;padding:18px 18px 20px}
.bv-flow.is-big li::before{left:auto;right:18px;top:22px;margin:0}
.bv-flow.is-big .bv-flow__what{font-size:18px;text-align:left}

/* night: funding, set like the benchmark */
.aai-bento__card .bv-fund__amount{font-size:clamp(48px,4.2vw,68px)}
.bv-fund__amount{font-size:clamp(64px,6.6vw,104px);line-height:.88;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.bv-fund__amount small{margin-left:4px;font-size:.42em;letter-spacing:0;color:var(--accent)}
.bv-fund__label{margin:12px 0 0!important;max-width:34ch;font-size:14px;line-height:1.45;color:var(--mute)}
.bv-fund.is-big .bv-fund__label{margin-bottom:8px!important}
.bv-fund__line{position:relative;display:grid;grid-template-columns:1fr 1fr;padding-top:20px!important}
.bv-fund__line::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:rgb(255 255 255/.22);transform-origin:left;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.16,1,.3,1) .2s}
.is-in .bv-fund__line::before{transform:none}
.bv-fund__line li{position:relative;display:grid;gap:5px;opacity:0;transform:translateY(6px);transition:opacity .6s ease calc(.5s + var(--i) * .5s),transform .6s cubic-bezier(.16,1,.3,1) calc(.5s + var(--i) * .5s)}
.bv-fund__line li::before{content:"";position:absolute;left:0;top:-20px;width:9px;height:9px;background:var(--accent)}
.is-in .bv-fund__line li{opacity:1;transform:none}
.bv-fund time{font-size:11px;letter-spacing:.02em;color:var(--mute)}
.bv-fund__line span{font-size:16px;color:var(--ink)}
.bv-fund__detail{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.bv-fund__detail p{font-size:16px;line-height:1.5;color:var(--ink)}
.bv-fund__k{margin-bottom:8px!important;font-size:12px!important;color:var(--mute)!important}
.bv-fund__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px!important}
.bv-fund__chips li{padding:6px 10px;border:1px solid var(--line);font-size:13px;color:var(--ink)}

/* Legacy (11 October 2026, the user's note: the 20B+ and $15M cards in one): the strip of Arabic data
   over two figures, side by side across a hairline. */
.bv-legacy .bv-pixels.is-strip{margin-bottom:18px}
.bv-legacy__figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.bv-legacy__figs>div{min-width:0}
.bv-legacy__figs>div:first-child{padding-inline-end:18px}
.bv-legacy__figs>div+div{padding-inline-start:18px;border-inline-start:1px solid var(--line)}
.bv-legacy__num{font-size:clamp(38px,3.3vw,52px);line-height:.9;letter-spacing:-.045em;color:#2A0F6B;font-variant-numeric:tabular-nums;white-space:nowrap}
.bv-legacy__num small{font-size:.5em;letter-spacing:0;color:var(--accent)}
.bv-legacy__label{margin-top:8px!important;font-size:13px;line-height:1.35;color:var(--mute)}
.bv-legacy.is-big .bv-pixels{margin-bottom:32px}
.bv-legacy.is-big .bv-words__stats{margin-bottom:0!important}

/* LLM models, a sell sheet (11 October 2026, the user's notes: first the card about the models, then
   "selling and informative and attractive"). The card steps through the three models, each with the
   figure that sells it; the panel gives each a sheet (what it is for, an example task, where it works,
   who builds on it) beside its proof, drawn on night: the HELM Arabic bars, the same document passing
   again and again, a page carried into Arabic with its table intact. */
.bv-llm{display:grid;gap:14px}
.bv-llm__panes{display:grid}
.bv-llm__pane{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
.bv-llm__pane.is-active{opacity:1;transform:none;pointer-events:auto;transition:opacity .4s ease .15s,transform .6s cubic-bezier(.16,1,.3,1) .15s}
.bv-llm__k{display:block;margin:0 0 6px!important;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.bv-llm__fig{display:flex;align-items:baseline;gap:3px;margin:0!important;font-size:clamp(36px,3.2vw,46px);line-height:.95;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.bv-llm__fig small{font-size:.45em;letter-spacing:0;color:var(--accent)}
.bv-llm__cap{margin:6px 0 0!important;max-width:34ch;font-size:13px;line-height:1.35;color:var(--mute)}
.bv-llm__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line)}
.bv-llm__tab{all:unset;box-sizing:border-box;position:relative;display:grid;place-items:center;height:40px;padding:0 8px;transition:background-color .3s ease}
.bv-llm__tab+.bv-llm__tab{border-inline-start:1px solid var(--line)}
.bv-llm__tab img{display:block;width:auto;max-width:100%;opacity:.4;filter:grayscale(1);transition:opacity .3s ease,filter .3s ease}
.bv-llm__tab.is-active{background:rgb(63 25 147/.06)}
.bv-llm__tab.is-active img{opacity:1;filter:none}
.bv-llm__bar{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.is-in .bv-llm__tab.is-active .bv-llm__bar{transform:scaleX(1);transition:transform 3.8s linear}
.aai-story .bv-llm__tab{cursor:pointer}
.aai-story .bv-llm__tab:hover:not(.is-active){background:rgb(63 25 147/.03)}
.bv-llm__tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* The panel */
.bv-llm.is-big{gap:28px;width:100%}
.bv-llm.is-big .bv-llm__tab{display:flex;justify-content:flex-start;gap:14px;height:auto;padding:16px 20px}
.bv-llm.is-big .bv-llm__tab img{height:22px!important}
.bv-llm__role{font-size:14px;color:var(--mute);transition:color .3s ease}
.bv-llm__tab.is-active .bv-llm__role{color:var(--ink)}
.bv-llm.is-big .bv-llm__pane{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:stretch}
.bv-llm__sheet{display:grid;align-content:start;gap:16px}
.bv-llm__head{margin:0;font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1.12;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.bv-llm__text{margin:0!important;max-width:46ch;font-size:16px;line-height:1.55;color:var(--mute)}
.bv-llm__row{padding-top:14px;border-top:1px solid var(--line)}
.bv-llm__row .bv-llm__k{margin-bottom:10px!important}
.bv-llm__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0!important}
.bv-llm__chips span{padding:6px 10px;background:rgb(63 25 147/.07);font-size:14px;line-height:1.3;color:var(--ink)}
.bv-llm__task{margin:0!important;font-size:17px;line-height:1.4;color:var(--ink)}
.bv-llm__where{display:flex;align-items:center;gap:12px;margin:0!important;font-size:15px;color:var(--ink)}
.bv-llm__where img{display:block;width:auto}
.bv-llm__proof{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:8px;min-height:340px;padding:clamp(24px,2.6vw,36px);
 background:radial-gradient(70% 80% at 10% 112%,rgb(63 25 147/.62),transparent 70%),radial-gradient(50% 50% at 100% 0%,rgb(255 180 233/.1),transparent 70%),#0B0912}
.bv-llm__proof::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgb(255 255 255/.12) 1px,transparent 1.4px) 0 0/18px 18px;
 -webkit-mask:radial-gradient(120% 100% at 100% 0%,#000 20%,transparent 75%);mask:radial-gradient(120% 100% at 100% 0%,#000 20%,transparent 75%)}
.bv-llm__proof .bv-llm__fig{font-size:clamp(60px,6vw,92px)}
.bv-llm__proof .bv-llm__cap{font-size:14px;max-width:36ch}
.bv-llm__note{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:auto 0 0!important;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.bv-llm__note b{font-weight:400;color:var(--ink)}
.bv-llm__note>b{font-size:15px}
/* LLM-X: the leaderboard */
.bv-llm__bars{display:grid;gap:12px;margin:24px 0 20px!important}
.bv-llm__bars li{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 3em;align-items:center;gap:12px;font-size:13px;color:var(--mute)}
.bv-llm__bars i{display:block;height:8px;background:rgb(255 255 255/.22);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1) calc(.15s + var(--i) * .15s)}
.bv-llm__bars li.is-lead{color:#fff}
.bv-llm__bars li.is-lead i{background:linear-gradient(90deg,#8F6BE8,var(--accent))}
.bv-llm__bars b{font-weight:400;text-align:end;color:var(--ink);font-variant-numeric:tabular-nums}
.bv-llm__pane.is-active .bv-llm__bars i{transform:scaleX(var(--v))}
.bv-llm__field{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));gap:4px;margin:0 0 20px}
.bv-llm__field i{aspect-ratio:1;background:rgb(255 255 255/.12);transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1) calc(.3s + var(--i) * 14ms)}
.bv-llm__field i.is-lead{background:var(--accent);box-shadow:0 0 12px rgb(255 180 233/.6)}
.bv-llm__pane.is-active .bv-llm__field i{transform:none}
/* LLM-S: the same document, again and again, each one checked */
.bv-llm__docs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:24px 0 20px}
.bv-llm__docs i{position:relative;display:grid;place-items:center;aspect-ratio:3/4;background:rgb(255 255 255/.05);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14);color:rgb(255 255 255/.55)}
.bv-llm__docs i svg{width:44%;height:auto}
.bv-llm__docs b{position:absolute;right:-5px;top:-5px;display:grid;place-items:center;width:16px;height:16px;background:var(--accent);color:#1A1730;transform:scale(0)}
.bv-llm__docs b svg{width:70%;height:auto}
.bv-llm__pane.is-active .bv-llm__docs b{animation:bv-llm-check .4s cubic-bezier(.34,1.56,.64,1) calc(.2s + var(--i) * .12s) both}
.bv-llm__pane.is-active .bv-llm__docs i{animation:bv-llm-doc .4s ease calc(.2s + var(--i) * .12s) both}
@keyframes bv-llm-check{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes bv-llm-doc{from{box-shadow:inset 0 0 0 1px rgb(255 255 255/.14)}to{box-shadow:inset 0 0 0 1px rgb(255 180 233/.5);color:#fff}}
/* LLM-T: a page carried into Arabic, its table intact */
.bv-llm__pages{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;margin:24px 0 20px}
.bv-llm__page{position:relative;display:grid;gap:10px;padding:20px 18px;background:#fff;box-shadow:0 20px 40px -24px rgb(0 0 0/.6)}
.bv-llm__page small{font-family:var(--font-aeonik-mono),monospace;font-size:10px;letter-spacing:.06em;color:#3F1993}
.bv-llm__page>i{display:block;height:6px;width:calc(var(--w) * 1%);background:rgb(63 25 147/.16)}
.bv-llm__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:4px}
.bv-llm__grid span{height:16px;background:rgb(63 25 147/.1);box-shadow:inset 0 0 0 1px rgb(63 25 147/.18)}
.bv-llm__page[dir="rtl"]>i{justify-self:end;background:rgb(63 25 147/.3)}
.bv-llm__page[dir="rtl"] .bv-llm__grid span{background:rgb(63 25 147/.2)}
.bv-llm__arrow{display:grid;place-items:center;width:38px;height:38px;background:var(--accent);color:#1A1730}
.bv-llm__arrow svg{width:56%;height:auto}
.bv-llm__pane.is-active .bv-llm__page[dir="rtl"]{animation:bv-llm-page .8s cubic-bezier(.16,1,.3,1) .25s both}
@keyframes bv-llm-page{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (max-width:767px){.bv-llm.is-big .bv-llm__pane{grid-template-columns:1fr}.bv-llm.is-big .bv-llm__tab{padding:12px;gap:8px}.bv-llm__role{display:none}.bv-llm__proof{min-height:0}}

/* ===== Story panel (dialog) ===================================================================== */
html.aai-story-open{overflow:hidden}
.aai-story{width:min(1120px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;background:#fff;color:#09090A;overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 60px -20px rgb(13 5 33/.35)}
.aai-story::backdrop{background:rgb(9 9 10/.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.aai-story[open]{animation:aai-story-in .45s cubic-bezier(.16,1,.3,1)}
@keyframes aai-story-in{from{opacity:0;transform:translateY(24px) scale(.985)}}
.aai-story__close{position:absolute;top:24px;right:24px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:rgb(63 25 147/.08);color:#3F1993;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.aai-story__close:hover{background:#3F1993;color:#fff}
.aai-story__close svg{width:20px;height:20px;fill:currentColor}
.aai-story__body{padding:72px 64px 64px}
.aai-story__head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:start}
.aai-story__intro h2{margin:0;font-size:clamp(30px,3.2vw,44px);line-height:1.12;font-weight:400;letter-spacing:-.02em}
.aai-story__intro p{margin:20px 0 0;max-width:52ch;font-size:18px;line-height:1.55;color:rgb(9 9 10/.65)}
.aai-story__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:32px}
.aai-btn{display:inline-flex;align-items:center;height:44px;padding:0 18px;background:#3F1993;color:#fff;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .2s ease}
.aai-btn:hover{background:#4C22AE}
.aai-btn:active{transform:scale(.98)}
.aai-story__link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:#3F1993;text-decoration:none}
.aai-story__link:hover{text-decoration:underline;text-underline-offset:4px}
.aai-story__checks{display:grid;gap:16px;margin:0;padding:8px 0 0;list-style:none}
.aai-story__checks li{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.45}
.aai-story__checks svg{flex:none;width:22px;height:22px;margin-top:1px;padding:4px;background:rgb(63 25 147/.1);fill:#3F1993}
.aai-story__visual{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:400px;margin-top:56px;padding:56px}
@media (max-width:767px){
 .aai-story{width:100vw;max-height:100dvh;height:100dvh}
 .aai-story__body{padding:72px 20px 24px}
 .aai-story__head{grid-template-columns:1fr;gap:28px}
 .aai-story__visual{min-height:320px;margin-top:36px;padding:24px}
 .bv-bench{grid-template-columns:1fr;gap:28px}
 .bv-words__stats{grid-template-columns:1fr 1fr}
 .bv-dep__principles,.bv-fund__detail{grid-template-columns:1fr}
 .bv-flow.is-big ol{grid-template-columns:1fr 1fr}
 .bv-bench__field ol{grid-template-columns:repeat(21,minmax(0,1fr))}
}
@media (max-width:639px){.bv-bench__chart li,.bv-bench__axis{grid-template-columns:96px minmax(0,1fr) 40px;gap:10px}}
@media (prefers-reduced-motion:reduce){
 .bv-bench__bar,.bv-bench__field li,.bv-pixels i.on,.bv-fund__line::before,.bv-fund__line li{transition:none!important;transform:none!important;opacity:1!important}
 .bv-ticker__track,.bv-dep__link b,.bv-flow li,.bv-flow ol::after,.aai-at *{animation:none!important;opacity:1}
 .aai-at__route span,.aai-at__match span,.aai-at__file,.aai-at__scan mark::before{opacity:1!important}
 .aai-at__conf i{transform:none}
 .bv-dep__link b{opacity:0!important}
 .aai-story[open]{animation:none}
}

/* ===== Story bento, motion and finish pass ======================================================
   Springs instead of tween curves (generated from a damped spring; ~0.9s visual duration), labels
   in Aeonik with tabular figures instead of mono, cards that lift a little under the pointer, and
   the deployment and Sadu widgets redrawn as native-feeling controls. Corners stay square. */
:root{
 --spring-soft:linear(0, 0.0157, 0.0563, 0.1139, 0.182, 0.2557, 0.3314, 0.4061, 0.478, 0.5456, 0.6082, 0.6653, 0.7166, 0.7623, 0.8024, 0.8375, 0.8677, 0.8936, 0.9155, 0.9339, 0.9492, 0.9618, 0.9721, 0.9804, 0.987, 0.9922, 0.9962, 0.9992, 1.0014, 1.0029, 1.004, 1.0046, 1.0049, 1.005, 1.0049, 1.0047, 1.0044, 1.0041, 1.0037, 1.0033, 1.003, 1.0026, 1.0023, 1);
 --spring-snappy:linear(0, 0.0301, 0.1073, 0.2142, 0.3367, 0.4633, 0.5858, 0.6983, 0.7971, 0.8804, 0.9476, 0.9993, 1.0368, 1.062, 1.0767, 1.0829, 1.0827, 1.0779, 1.0699, 1.0601, 1.0496, 1.0392, 1.0293, 1.0205, 1.013, 1.0068, 1.0019, 0.9982, 0.9957, 0.9941, 0.9932, 0.993, 0.9933, 0.9938, 0.9946, 0.9955, 0.9963, 0.9972, 0.998, 0.9986, 0.9992, 0.9997, 1, 1)}
@supports not (transition-timing-function:linear(0, 1)){:root{--spring-soft:cubic-bezier(.16,1,.3,1);--spring-snappy:cubic-bezier(.34,1.4,.64,1)}}

/* cards */
.aai-bento__card{transition:border-color .3s ease,transform .8s var(--spring-soft),box-shadow .6s ease}
.aai-bento__card:hover{transform:translateY(-4px);box-shadow:0 28px 56px -32px rgb(42 15 107/.45)}
.aai-bento__card:active{transform:translateY(-2px) scale(.995);transition-duration:.3s,.25s,.3s}
.aai-bento__title{font-size:clamp(20px,1.6vw,24px);letter-spacing:-.02em;text-wrap:balance}
.aai-bento__open{transition:background-color .25s ease,color .25s ease,transform .6s var(--spring-snappy)}
.aai-bento__open svg{width:18px;height:18px;transition:transform .7s var(--spring-snappy)}
.aai-bento__card:hover .aai-bento__open svg{transform:rotate(90deg)}
.aai-bento__card:active .aai-bento__open{transform:scale(.92)}

/* labels: Aeonik, tabular figures */
.bv-mono,.bv-bench__who small,.bv-bench__val,.bv-bench__ticks,.bv-bench__rank,.bv-dep__cap,.bv-dep__modes,.bv-fund time,.bv-fund__k,.bv-flow__kind{font-family:var(--font-aeonik),system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0}
.bv-bench__rank,.bv-bench__ticks{font-size:12px}

/* springs on the data */
.bv-bench__bar{height:6px;transition:transform 1.4s var(--spring-soft) calc(.15s + var(--i) * .11s)}
.bv-bench .is-lead .bv-bench__bar{height:8px;box-shadow:0 0 24px -2px rgb(255 180 233/.55)}
.bv-bench__field li{transition:opacity .4s ease calc(var(--i) * 22ms),transform .8s var(--spring-snappy) calc(var(--i) * 22ms)}
.bv-pixels i.on{transition:transform .8s var(--spring-snappy) var(--d)}
.bv-fund__line::before{transition:transform 1.4s var(--spring-soft) .2s}

/* atelier: a slightly larger window that floats up with the card */
.aai-at__stage{width:460px}
.aai-at__window{transition:transform .9s var(--spring-soft),box-shadow .6s ease}
.aai-bento__card:hover .aai-at__window{transform:translateY(-4px);box-shadow:0 40px 70px -32px rgb(42 15 107/.5),0 0 0 1px rgb(27 24 48/.06)}
.aai-at__rooms button{transition:background-color .45s ease,color .35s ease,box-shadow .45s ease}

/* deployment: a segmented control over the institution, the environment as a raised sheet */
.bv-dep{gap:16px}
.bv-dep__modes{padding:3px;border:0;background:rgb(9 9 10/.06)}
.bv-dep__modes button{position:relative;z-index:1;padding:8px 10px;font-size:13px;font-weight:500;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv-dep__bar{z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);height:auto;background:#fff;box-shadow:0 1px 2px rgb(9 9 10/.1),0 0 0 .5px rgb(9 9 10/.06);transition:transform .7s var(--spring-snappy)}
.bv-dep__mark{display:none}
.bv-dep__org{padding:14px;background:rgb(9 9 10/.035)}
.bv-dep__cap{font-size:12px;color:var(--mute)}
.bv-dep__org>.bv-dep__cap{margin-bottom:10px!important}
.bv-dep__env{container-type:inline-size;padding:14px;border:0;background:#fff;box-shadow:0 0 0 1px rgb(63 25 147/.12),0 14px 30px -20px rgb(42 15 107/.4);transform:translateY(-3px);transition:transform .8s var(--spring-soft),box-shadow .6s ease}
.bv-dep[data-active="1"] .bv-dep__env{background:#fff;box-shadow:0 0 0 1.5px #3F1993,0 2px 6px -4px rgb(42 15 107/.4);transform:none}
.bv-dep__env>.bv-dep__cap{color:#3F1993}
.bv-dep__nodes{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);margin-top:14px}
.bv-dep__node{padding:10px 6px;background:rgb(63 25 147/.06);box-shadow:none;font-size:14px;font-weight:500;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv-dep__link b{top:-2px;width:5px;height:5px;box-shadow:0 0 8px #7B4FD6}
@container (max-width:250px){
 .bv-dep__nodes{grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr)}
 .bv-dep__node{padding:9px 2px;font-size:12.5px}
}
@container (max-width:170px){
 .bv-dep__nodes{grid-template-columns:minmax(0,1fr) 6px minmax(0,1fr) 6px minmax(0,1fr)}
 .bv-dep__node{padding:9px 0;font-size:12px}
}
.bv-dep{container-type:inline-size}
@container (max-width:240px){.bv-dep__modes button{padding:8px 3px;font-size:12px}}
.bv-dep.is-big .bv-dep__modes button{padding:10px 14px;font-size:14px}
.bv-dep.is-big .bv-dep__org{padding:20px}
.bv-dep.is-big .bv-dep__env{padding:20px}
.bv-dep.is-big .bv-dep__nodes{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr)}
.bv-dep.is-big .bv-dep__node{padding:14px 10px;font-size:16px}

/* sadu: a run, step by step. Each marker lights as the progress line reaches it and stays lit
   until the run resets. One 6s timeline; the step keyframes are written out per step. */
.bv-flow{--row:62px;--run:6s}
.bv-flow ol{gap:0}
.bv-flow ol::before,.bv-flow ol::after{left:4px;top:calc(var(--row) / 2);bottom:auto;width:1px;height:calc(100% - var(--row));background:rgb(255 255 255/.14);opacity:1;animation:none}
.bv-flow ol::after{background:linear-gradient(#7B4FD6,#FFB4E9);transform-origin:top;transform:scaleY(0)}
.is-in .bv-flow ol::after{animation:bv-run-y var(--run) cubic-bezier(.65,0,.35,1) infinite}
.bv-flow li{display:grid;align-content:center;justify-content:start;gap:3px;height:var(--row);padding:0 0 0 30px;background:none;box-shadow:none;animation:none}
.bv-flow li+li{border-top:0}
.bv-flow li::before{left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;background:#09090A;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4);transition:none}
.bv-flow__kind{font-size:12px;color:var(--mute)}
.bv-flow__what{font-size:17px;line-height:1.25;letter-spacing:-.01em;color:rgb(245 245 247/.5);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-in .bv-flow li{animation:none}
.is-in .bv-flow li::before,.is-in .bv-flow__what{animation-duration:var(--run);animation-iteration-count:infinite;animation-timing-function:ease}
.is-in .bv-flow li:nth-child(1)::before{animation-name:bv-dot-0}.is-in .bv-flow li:nth-child(1) .bv-flow__what{animation-name:bv-txt-0}
.is-in .bv-flow li:nth-child(2)::before{animation-name:bv-dot-1}.is-in .bv-flow li:nth-child(2) .bv-flow__what{animation-name:bv-txt-1}
.is-in .bv-flow li:nth-child(3)::before{animation-name:bv-dot-2}.is-in .bv-flow li:nth-child(3) .bv-flow__what{animation-name:bv-txt-2}
.is-in .bv-flow li:nth-child(4)::before{animation-name:bv-dot-3}.is-in .bv-flow li:nth-child(4) .bv-flow__what{animation-name:bv-txt-3}
@keyframes bv-run-y{0%,6%{transform:scaleY(0);opacity:1}24%,30%{transform:scaleY(.3333)}48%,54%{transform:scaleY(.6667)}72%,90%{transform:scaleY(1);opacity:1}97%{transform:scaleY(1);opacity:0}100%{transform:scaleY(0);opacity:0}}
@keyframes bv-run-x{0%,6%{transform:scaleX(0);opacity:1}24%,30%{transform:scaleX(.3333)}48%,54%{transform:scaleX(.6667)}72%,90%{transform:scaleX(1);opacity:1}97%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes bv-dot-0{0%{background:#09090A;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4)}3%{background:#FFB4E9;box-shadow:0 0 0 4px rgb(255 180 233/.18),0 0 18px rgb(255 180 233/.7)}16%,90%{background:#FFB4E9;box-shadow:0 0 0 0 rgb(255 180 233/0)}97%,100%{background:#09090A;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4)}}
@keyframes bv-dot-1{0%,22%{background:#09090A;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4)}25%{background:#FFB4E9;box-shadow:0 0 0 4px rgb(255 180 233/.18),0 0 18px rgb(255 180 233/.7)}40%,90%{background:#FFB4E9;box-shadow:0 0 0 0 rgb(255 180 233/0)}97%,100%{background:#09090A;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4)}}
@keyframes bv-dot-2{0%,46%{background:#09090A;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4)}49%{background:#FFB4E9;box-shadow:0 0 0 4px rgb(255 180 233/.18),0 0 18px rgb(255 180 233/.7)}64%,90%{background:#FFB4E9;box-shadow:0 0 0 0 rgb(255 180 233/0)}97%,100%{background:#09090A;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4)}}
@keyframes bv-dot-3{0%,70%{background:#09090A;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4)}73%{background:#FFB4E9;box-shadow:0 0 0 4px rgb(255 180 233/.18),0 0 18px rgb(255 180 233/.7)}88%,90%{background:#FFB4E9;box-shadow:0 0 0 0 rgb(255 180 233/0)}97%,100%{background:#09090A;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4)}}
@keyframes bv-txt-0{0%{color:rgb(245 245 247/.5)}4%,90%{color:#F5F5F7}97%,100%{color:rgb(245 245 247/.5)}}
@keyframes bv-txt-1{0%,22%{color:rgb(245 245 247/.5)}27%,90%{color:#F5F5F7}97%,100%{color:rgb(245 245 247/.5)}}
@keyframes bv-txt-2{0%,46%{color:rgb(245 245 247/.5)}51%,90%{color:#F5F5F7}97%,100%{color:rgb(245 245 247/.5)}}
@keyframes bv-txt-3{0%,70%{color:rgb(245 245 247/.5)}75%,90%{color:#F5F5F7}97%,100%{color:rgb(245 245 247/.5)}}
@media (min-width:768px){
 .bv-flow.is-big ol{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
 .bv-flow.is-big ol::before,.bv-flow.is-big ol::after{display:block;left:4px;right:auto;top:4px;bottom:auto;width:75%;height:1px}
 .bv-flow.is-big ol::after{transform-origin:left;transform:scaleX(0)}
 .is-in .bv-flow.is-big ol::after{animation-name:bv-run-x}
 .bv-flow.is-big li{height:auto;padding:36px 24px 0 0;gap:6px}
 .bv-flow.is-big li::before{left:0;right:auto;top:0;margin:0}
 .bv-flow.is-big .bv-flow__what{font-size:20px;white-space:normal}
}
@media (max-width:767px){.bv-flow.is-big ol{grid-template-columns:1fr}}

/* the panel grows out of its card (bento.js) */
.aai-story{transform-origin:0 0}
.aai-story[open]{animation:none}

@media (prefers-reduced-motion:reduce){
 .aai-bento__card,.aai-bento__card:hover,.aai-bento__card:active,.aai-at__window,.aai-bento__card:hover .aai-at__window,.bv-dep__env{transition:none;transform:none}
 .aai-bento__card:hover .aai-bento__open svg{transform:none}
 .bv-flow li::before,.bv-flow__what,.bv-flow ol::after{animation:none!important}
 .bv-flow li::before{background:#FFB4E9}
 .bv-flow__what{color:#F5F5F7}
 .bv-flow ol::after{transform:none}
}

/* Trusted by: the logos are cut at the guide lines, with a short fade just inside them */
.aai-trusted__marquee{margin-inline:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
@media (min-width:768px){.aai-trusted__marquee{margin-inline:calc(var(--grid-inset) - 16px)}}
@media (prefers-reduced-motion:reduce){.aai-trusted__marquee{margin-inline:0;-webkit-mask-image:none;mask-image:none}}

/* story cards: twice the room between the logo and the title */
.aai-bento__head{gap:28px}

/* Applications collage: photos above the guide lines (clone-support.js, guideUnderPhotos cuts the
   lines where a photo is on top) */


/* the tan accent is retired: words that were tan are the brand purple */
.dynamic-header,.text-foundry-tan,.text-\[\#A8927C\]{color:#3F1993!important}

/* story cards: every logo sits in the same 26px slot, so titles line up across cards */
.aai-bento__head{grid-template-rows:26px auto}
.aai-bento__head>.aai-bento__logo{align-self:end}
/* the product's one-line descriptor, close under its logo (naming map, September 2026) */
.aai-bento__head{grid-template-rows:26px auto auto}
.aai-bento__desc{margin:-18px 0 0!important;font-size:14px;line-height:1.35;letter-spacing:-.005em;color:var(--mute,#6E6E73)}
.aai-story__intro .aai-bento__desc{margin:-12px 0 18px!important;font-size:15px}

/* ===== Story bento: one material system ===========================================================
   Every widget draws from the same few materials, so the cards read as one product family:
   - light glass: frosted white over the card's colour (blur + saturation, a bright top edge and a
     half-pixel ring);
   - dark glass: the same on the night cards;
   - sheet: solid white with a layered, violet-tinted shadow, for things that sit on top;
   - segmented control: one track and one thumb (deployment modes, Atelier rooms);
   - chip: white, half-pixel ring, hairline shadow (nodes, specialists, documents).
   Corners stay square, like the rest of the page. */
:root{
 --mat-blur:blur(24px) saturate(180%);
 --mat-light:rgb(255 255 255/.58);
 --mat-light-edge:0 0 0 .5px rgb(27 24 48/.08),inset 0 1px 0 rgb(255 255 255/.9);
 --mat-dark:rgb(255 255 255/.045);
 --mat-dark-edge:0 0 0 .5px rgb(255 255 255/.1),inset 0 1px 0 rgb(255 255 255/.08);
 --mat-sheet:0 0 0 .5px rgb(27 24 48/.08),0 1px 2px rgb(27 24 48/.04),0 8px 24px -10px rgb(42 15 107/.16),0 28px 56px -28px rgb(42 15 107/.28);
 --mat-chip:0 0 0 .5px rgb(27 24 48/.1),0 1px 2px rgb(27 24 48/.05);
 --mat-seg-track:rgb(27 24 48/.06);
 --mat-seg-thumb:0 0 0 .5px rgb(27 24 48/.06),0 1px 1px rgb(27 24 48/.04),0 3px 8px rgb(27 24 48/.08);
 --mat-label:rgb(27 24 48/.55)}

/* segmented control */
.bv-dep__modes,.aai-at__rooms{padding:2px;background:var(--mat-seg-track);box-shadow:inset 0 .5px 1px rgb(27 24 48/.06)}
.bv-dep__bar{top:2px;bottom:2px;left:2px;width:calc(50% - 2px);box-shadow:var(--mat-seg-thumb)}
.bv-dep__modes button,.aai-at__rooms button{font-weight:500;letter-spacing:-.005em;color:var(--mat-label)}
.bv-dep__modes button{padding:7px 10px;font-size:13px}
.bv-dep__modes button.is-active,.aai-at__rooms button.is-active{color:#1B1830}
.aai-at__rooms button.is-active{background:#fff;box-shadow:var(--mat-seg-thumb)}

/* deployment: the institution is glass, your environment a sheet on it, the stack three chips */
.bv-dep{gap:12px}
.bv-dep__org{padding:16px;background:var(--mat-light);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--mat-light-edge)}
.bv-dep__cap{font-size:12px;letter-spacing:.005em;color:var(--mat-label)}
.bv-dep__org>.bv-dep__cap{margin-bottom:12px!important}
.bv-dep__env{padding:16px;background:#fff;box-shadow:var(--mat-sheet);transform:translateY(-2px)}
.bv-dep[data-active="1"] .bv-dep__env{box-shadow:0 0 0 1px rgb(63 25 147/.6),0 1px 2px rgb(27 24 48/.04),0 6px 14px -8px rgb(42 15 107/.25);transform:none}
.bv-dep__env>.bv-dep__cap{font-weight:500;color:#3F1993}
.bv-dep__nodes{margin-top:12px}
.bv-dep__node{padding:10px 6px;background:linear-gradient(#fff,#FAF9FC);box-shadow:var(--mat-chip);font-size:13px;font-weight:500;letter-spacing:-.005em;color:#1B1830}
.bv-dep__link{background:linear-gradient(90deg,rgb(63 25 147/.12),rgb(63 25 147/.4),rgb(63 25 147/.12))}
.bv-dep__link b{top:-1.5px;width:4px;height:4px;background:#7B4FD6;box-shadow:0 0 0 2px rgb(123 79 214/.16),0 0 10px #7B4FD6}
.bv-dep.is-big{gap:16px}
.bv-dep.is-big .bv-dep__modes button{padding:9px 14px;font-size:14px}
.bv-dep.is-big .bv-dep__org,.bv-dep.is-big .bv-dep__env{padding:24px}
.bv-dep.is-big .bv-dep__org>.bv-dep__cap{margin-bottom:16px!important}
.bv-dep.is-big .bv-dep__nodes{margin-top:16px}
.bv-dep.is-big .bv-dep__node{padding:14px 10px;font-size:16px}
.bv-dep__principles{gap:24px;margin-top:16px!important}
.bv-dep__principles li{padding-top:14px;border-top:1px solid rgb(63 25 147/.2);font-size:16px;line-height:1.4;letter-spacing:-.005em;background:linear-gradient(#3F1993,#3F1993) 0 -1px/32px 1px no-repeat}

/* atelier: the window is frosted glass over the room's colour; tiles and documents are chips */
.aai-at__rooms{-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur)}
.aai-at__window{background:rgb(255 255 255/.72);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--mat-light-edge),0 8px 24px -12px rgb(42 15 107/.14),0 32px 64px -32px rgb(42 15 107/.4)}
.aai-bento__card:hover .aai-at__window{box-shadow:var(--mat-light-edge),0 12px 28px -12px rgb(42 15 107/.18),0 44px 80px -36px rgb(42 15 107/.5)}
.aai-at__crumb{letter-spacing:.005em;color:var(--mat-label)}
.aai-at__specialists{gap:.5em}
.aai-at__specialists li{position:relative;padding:.8em .9em .85em;background:#fff;border:0;box-shadow:var(--mat-chip)}
.aai-at__specialists li.is-picked{background:#fff;box-shadow:0 0 0 1.5px #3F1993,0 6px 16px -8px rgb(63 25 147/.45)}
.aai-at__specialists li.is-picked::after{content:"";position:absolute;top:.8em;right:.8em;width:1.15em;height:1.15em;background:#3F1993 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/72% no-repeat}
.aai-at__specialists li.is-custom{background:rgb(255 255 255/.45);border:1px dashed rgb(27 24 48/.2);box-shadow:none}
.aai-at__no,.aai-at__area,.aai-at__label{color:var(--mat-label)}
.aai-at__name{letter-spacing:-.005em}
.aai-at__doc,.aai-at__voice{background:#fff;border:0;box-shadow:var(--mat-chip)}
.aai-at__ask p{background:rgb(27 24 48/.04)}
.aai-at__caption{background:var(--mat-light);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--mat-light-edge),0 10px 24px -14px rgb(42 15 107/.35)}

/* sadu: the run sits on a dark glass sheet; markers are hollow until the run reaches them */
.bv-flow{--pad-x:20px;--pad-y:8px}
.bv-flow ol{padding:var(--pad-y) var(--pad-x);background:var(--mat-dark);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--mat-dark-edge)}
.bv-flow ol::before,.bv-flow ol::after{left:calc(var(--pad-x) + 4px);top:calc(var(--pad-y) + var(--row) / 2);height:calc(100% - var(--pad-y) * 2 - var(--row))}
.bv-flow li::before{box-shadow:inset 0 0 0 1px rgb(255 255 255/.35)}
.bv-flow__kind{letter-spacing:.005em;color:rgb(245 245 247/.5)}
@media (min-width:768px){
 .bv-flow.is-big{--pad-x:32px;--pad-y:32px;max-width:none}
 .bv-flow.is-big ol::before,.bv-flow.is-big ol::after{left:calc(var(--pad-x) + 4px);top:calc(var(--pad-y) + 4px);width:calc((100% - var(--pad-x) * 2) * .75);height:1px}
 .bv-flow.is-big li{align-content:start;padding:32px 24px 0 0}
 .bv-flow.is-big .bv-flow__what{font-size:20px;text-wrap:balance}
}

/* narrow cards: the chips tighten before anything is clipped (after the chip style, so these win) */
@container (max-width:250px){
 .bv-dep__nodes{grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr)}
 .bv-dep__node{padding:9px 2px;font-size:12.5px}
}
@container (max-width:170px){
 .bv-dep__nodes{grid-template-columns:minmax(0,1fr) 6px minmax(0,1fr) 6px minmax(0,1fr)}
 .bv-dep__node{padding:9px 0;font-size:12px}
}
.bv-flow{container-type:inline-size}
@container (max-width:320px){.bv-flow__what{font-size:15.5px}}

@media (prefers-reduced-transparency:reduce){
 .bv-dep__org,.aai-at__caption{background:#F6F5F9;-webkit-backdrop-filter:none;backdrop-filter:none}
 .aai-at__window{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
 .bv-flow ol{background:#141318;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ===== Navbar finish ==============================================================================
   The flyout used its own 24px gutters, so its columns and image ran past the guide lines; it now
   sits on the same content edge as the logo, the links and the CTA. The flyout content arrives
   column by column on a spring (it mounts each time it opens), and every control has a pressed and
   a keyboard state. */
@media (min-width:1024px){
 header .grid-layout-mobile{padding-inline:var(--grid-inset)!important}
 /* the flyout's columns sit on the page grid: links from the logo's edge, the image ends at the CTA's */
 header .grid-layout-mobile>[class~="md:col-start-1"]{grid-column:1/span 3}
 header .grid-layout-mobile>[class~="md:col-start-4"]{grid-column:4/span 3}
 header .grid-layout-mobile>[class~="md:col-start-7"]{grid-column:7/-1;padding-right:0!important}
 header .grid-layout-mobile>*{animation:aai-nav-in .7s var(--spring-soft) both}
 header .grid-layout-mobile>:nth-child(2){animation-delay:40ms}
 header .grid-layout-mobile>:nth-child(n+3){animation-delay:80ms}
 header [class*="min-h-[192px]"] .rounded-xl{animation:aai-nav-media .9s var(--spring-soft) 60ms both}
}
@keyframes aai-nav-in{from{opacity:0;transform:translateY(8px)}}
@keyframes aai-nav-media{from{opacity:0;transform:scale(1.03)}}

/* top-level links: a 44px target, a steady hover, a visible keyboard ring */
header .navigation-header-link{padding-block:12px;margin-block:-12px}
header .navigation-header-link:focus-visible{outline:2px solid #3F1993;outline-offset:4px;opacity:1}

/* flyout links: the big product names lean in a touch under the pointer */
header [class~="md:col-start-1"] .navigation-link{display:inline-block;transition:opacity .2s ease,transform .5s var(--spring-snappy)}
header [class~="md:col-start-1"] a:hover .navigation-link{opacity:1;color:var(--nav-accent,#3F1993);transform:translateX(3px)}
header [class~="md:col-start-4"] a:hover .navigation-link{color:var(--nav-accent,#3F1993)}
[data-theme=dark] body,[data-initial-chrome-theme=dark],[data-footer-under-nav] body{--nav-accent:#FFB4E9}
header [class*="min-h-[192px]"] .rounded-xl{box-shadow:0 0 0 .5px var(--nav-hairline),0 24px 48px -28px rgb(42 15 107/.35)}

/* CTA: pressed state on pointer-down, keyboard ring */
.FlatCta:active{transform:scale(.97);transition:transform .1s ease-out}
.FlatCta:focus-visible{outline:2px solid #3F1993;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
 header .grid-layout-mobile>*,header [class*="min-h-[192px]"] .rounded-xl{animation:none}
 header [class~="md:col-start-1"] a:hover .navigation-link,.FlatCta:active{transform:none}
}

/* ===== Data Services: annotation ==================================================================
   An Arabic sentence labelled entity by entity (named entities: Location, Date, Event). Each span
   is swept from the right as its label is pressed in the palette, the tag pops above it, the
   progress fills, and the reviewer signs it off; then the run resets (one 7s timeline). The sheet
   is a raised white sheet, the status strip light glass, the label colours are the Atelier ones. */
.bv-ann{--ann-0:#3F1993;--ann-1:#2E6B3E;--ann-2:#B07A1F;--ann-run:7s;container-type:inline-size;display:grid;gap:10px}
.bv-ann__sheet{padding:14px 16px 16px;background:#fff;box-shadow:var(--mat-sheet)}
.bv-ann__meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.005em;color:var(--mat-label)}
.bv-ann__text{margin:6px 0 10px!important;font-family:var(--font-aeonik),"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro","Segoe UI",sans-serif;font-size:19px;line-height:2.5;text-align:right;color:#1B1830}
.bv-ann__span{position:relative;padding:.08em .12em;background:linear-gradient(color-mix(in srgb,var(--c) 13%,transparent),color-mix(in srgb,var(--c) 13%,transparent)) right/100% 100% no-repeat;box-shadow:inset 0 -2px 0 var(--c);color:inherit}
.bv-ann__tag{position:absolute;right:0;bottom:calc(100% - .1em);padding:2px 6px;background:var(--c);font-family:var(--font-aeonik),system-ui,sans-serif;font-size:10px;font-weight:500;line-height:1.3;letter-spacing:.01em;color:#fff;white-space:nowrap;transform-origin:bottom right}
.bv-ann__labels{display:flex;gap:6px;padding-top:12px!important;border-top:1px solid rgb(27 24 48/.08)}
.bv-ann__labels li{display:flex;align-items:center;gap:6px;min-width:0;padding:5px 8px;background:#fff;box-shadow:var(--mat-chip);font-size:12px;font-weight:500;letter-spacing:-.005em;color:#1B1830}
.bv-ann__labels i{flex:none;width:8px;height:8px;background:var(--c)}
.bv-ann__labels kbd{padding:0 4px;font:inherit;font-size:10px;font-weight:400;line-height:1.5;color:var(--mat-label);box-shadow:inset 0 0 0 .5px rgb(27 24 48/.22)}
.bv-ann__foot{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--mat-light);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);box-shadow:var(--mat-light-edge);font-size:12px;color:var(--mat-label)}
.bv-ann__segs{display:flex;gap:3px}
.bv-ann__segs i{position:relative;width:16px;height:3px;background:rgb(27 24 48/.1)}
.bv-ann__segs i::after{content:"";position:absolute;inset:0;background:var(--c);transform-origin:left}
.bv-ann__ok{display:flex;align-items:center;gap:5px;margin-left:auto;font-weight:500;color:#2E6B3E}
.bv-ann__ok svg{width:14px;height:14px;fill:currentColor}
.is-in .bv-ann__span,.is-in .bv-ann__tag,.is-in .bv-ann__labels li,.is-in .bv-ann__segs i::after,.is-in .bv-ann__ok{animation-duration:var(--ann-run);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both}
.is-in .bv-ann__ok{animation-name:ann-ok}
.is-in .bv-ann__span[style*='--k:0']{animation-name:ann-mark-0}.is-in .bv-ann__span[style*='--k:0'] .bv-ann__tag{animation-name:ann-tag-0}.is-in .bv-ann__labels li[style*='--k:0']{animation-name:ann-chip-0}.is-in .bv-ann__segs i[style*='--k:0']::after{animation-name:ann-seg-0}.is-in .bv-ann__span[style*='--k:1']{animation-name:ann-mark-1}.is-in .bv-ann__span[style*='--k:1'] .bv-ann__tag{animation-name:ann-tag-1}.is-in .bv-ann__labels li[style*='--k:1']{animation-name:ann-chip-1}.is-in .bv-ann__segs i[style*='--k:1']::after{animation-name:ann-seg-1}.is-in .bv-ann__span[style*='--k:2']{animation-name:ann-mark-2}.is-in .bv-ann__span[style*='--k:2'] .bv-ann__tag{animation-name:ann-tag-2}.is-in .bv-ann__labels li[style*='--k:2']{animation-name:ann-chip-2}.is-in .bv-ann__segs i[style*='--k:2']::after{animation-name:ann-seg-2}
@keyframes ann-mark-0{0%,8%{background-size:0% 100%;box-shadow:inset 0 -2px 0 transparent}12%,92%{background-size:100% 100%;box-shadow:inset 0 -2px 0 var(--c)}97%,100%{background-size:0% 100%;box-shadow:inset 0 -2px 0 transparent}}
@keyframes ann-tag-0{0%,10%{opacity:0;transform:translateY(4px) scale(.9)}13%{opacity:1;transform:translateY(0) scale(1.06)}15%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes ann-chip-0{0%,7%,17%,100%{background:#fff;box-shadow:var(--mat-chip);transform:none}8%,13%{background:color-mix(in srgb,var(--c) 10%,#fff);box-shadow:0 0 0 1px var(--c);transform:scale(.96)}}
@keyframes ann-seg-0{0%,11%{transform:scaleX(0)}15%,92%{transform:none}97%,100%{transform:scaleX(0)}}
@keyframes ann-mark-1{0%,26%{background-size:0% 100%;box-shadow:inset 0 -2px 0 transparent}30%,92%{background-size:100% 100%;box-shadow:inset 0 -2px 0 var(--c)}97%,100%{background-size:0% 100%;box-shadow:inset 0 -2px 0 transparent}}
@keyframes ann-tag-1{0%,28%{opacity:0;transform:translateY(4px) scale(.9)}31%{opacity:1;transform:translateY(0) scale(1.06)}33%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes ann-chip-1{0%,25%,35%,100%{background:#fff;box-shadow:var(--mat-chip);transform:none}26%,31%{background:color-mix(in srgb,var(--c) 10%,#fff);box-shadow:0 0 0 1px var(--c);transform:scale(.96)}}
@keyframes ann-seg-1{0%,29%{transform:scaleX(0)}33%,92%{transform:none}97%,100%{transform:scaleX(0)}}
@keyframes ann-mark-2{0%,44%{background-size:0% 100%;box-shadow:inset 0 -2px 0 transparent}48%,92%{background-size:100% 100%;box-shadow:inset 0 -2px 0 var(--c)}97%,100%{background-size:0% 100%;box-shadow:inset 0 -2px 0 transparent}}
@keyframes ann-tag-2{0%,46%{opacity:0;transform:translateY(4px) scale(.9)}49%{opacity:1;transform:translateY(0) scale(1.06)}51%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes ann-chip-2{0%,43%,53%,100%{background:#fff;box-shadow:var(--mat-chip);transform:none}44%,49%{background:color-mix(in srgb,var(--c) 10%,#fff);box-shadow:0 0 0 1px var(--c);transform:scale(.96)}}
@keyframes ann-seg-2{0%,47%{transform:scaleX(0)}51%,92%{transform:none}97%,100%{transform:scaleX(0)}}
@keyframes ann-ok{0%,62%{opacity:0;transform:translateY(4px)}67%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@container (max-width:300px){.bv-ann__labels kbd{display:none}.bv-ann__text{font-size:17px}}
@container (max-width:240px){.bv-ann__labels{gap:4px}.bv-ann__labels li{gap:4px;padding:4px 6px;font-size:11.5px}.bv-ann__labels i{width:6px;height:6px}.bv-ann__sheet{padding:12px}}
/* panel */
.bv-ann.is-big{max-width:820px;gap:14px}
.bv-ann.is-big .bv-ann__sheet{padding:24px 28px 26px}
.bv-ann.is-big .bv-ann__meta{font-size:13px}
.bv-ann.is-big .bv-ann__text{margin:14px 0 18px!important;font-size:30px}
.bv-ann.is-big .bv-ann__tag{padding:3px 8px;font-size:12px}
.bv-ann.is-big .bv-ann__labels{gap:8px;padding-top:18px!important}
.bv-ann.is-big .bv-ann__labels li{padding:7px 12px;font-size:14px}
.bv-ann.is-big .bv-ann__foot{padding:14px 18px;font-size:14px}
.bv-ann.is-big .bv-ann__segs i{width:28px}
.bv-ann__flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:10px!important}
.bv-ann__flow li{padding-top:14px;border-top:1px solid rgb(63 25 147/.18);font-size:16px;letter-spacing:-.005em;color:var(--mat-label)}
.bv-ann__flow li.is-on{border-top-color:#3F1993;color:#1B1830}
@media (max-width:767px){.bv-ann.is-big .bv-ann__text{font-size:22px}.bv-ann__flow{grid-template-columns:1fr;gap:12px}}
@media (prefers-reduced-motion:reduce){.bv-ann *,.bv-ann *::after{animation:none!important}.bv-ann__ok{opacity:1}}

/* ===== Proof panel: three levels ==================================================================
   One paragraph in three parts (audit_fixes.py, PROOF_BLOCKS): the score and what it measures at
   display size, the evidence at reading size, and the promise smaller, in the accent. The line
   splitter keeps the strong and em (cutting them into one element per line), so the sizes carry
   through the word-by-word reveal. */
[class*="ScrollingQuote"] .AnimatedText{font-size:clamp(20px,2.1vw,30px)!important;line-height:1.32!important;font-weight:400;letter-spacing:-.012em}
[class*="ScrollingQuote"] .AnimatedText strong{display:block;font-size:2.4em;line-height:1.02;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
[class*="ScrollingQuote"] .AnimatedText strong:last-of-type{margin-bottom:.55em}
[class*="ScrollingQuote"] .AnimatedText em{display:block;margin-top:1.4em;font-size:.7em;line-height:1.4;font-style:normal;font-weight:500;letter-spacing:0;color:#FFB4E9!important}
[class*="ScrollingQuote"] .AnimatedText em .word{color:#FFB4E9!important}
[class*="ScrollingQuote"] .AnimatedText em+em{margin-top:0}
@media (max-width:767px){[class*="ScrollingQuote"] .AnimatedText strong{font-size:1.9em}}

/* "Sovereign intelligence for ..." collage: a wider, taller orbit so the photos pass around the
   headline and the CTA instead of over them. The path's SVG stretches with its box
   (preserveAspectRatio none), so the ellipse grows with it; the phone layout keeps its own path. */
@media (min-width:768px){
 .Applications [class*="w-[min(75%,1020px)]"]{width:min(96%,1240px)!important;aspect-ratio:1020/660!important}
}

/* ===== Sadu: the workflow builds itself, then runs (after the reference workflow film) ============
   clone-support.js (sadu) moves a camera along one pipeline in a fixed 290x230 frame scaled to fit
   (--fit). A node arrives grey; its wire draws in green with an arrow at the input; it runs (green
   ring, soft glow, full-colour icon) and is checked off, then dims as the camera moves on. On the AI
   Agent the camera dives into a code editor that types the agent out. Square corners throughout. */
.bv-n8n.sd3{container-type:normal;position:relative;align-self:stretch;flex:1;width:100%;min-height:200px;user-select:none}
.sd3-stage{position:absolute;inset:0;overflow:hidden;--fit:1;
  background:radial-gradient(60% 55% at 50% 46%,rgb(255 255 255/.045),transparent 70%)}
.sd3.is-big{aspect-ratio:16/9;min-height:0;flex:none}
.sd3-fit{position:absolute;left:50%;top:44%;width:0;height:0;transform:scale(var(--fit))}
.sd3-cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;
  transition:transform .9s cubic-bezier(.65,0,.35,1)}
.sd3.is-fade .sd3-cam{opacity:0;transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .5s ease}
.sd3-node{position:absolute;top:-28px;width:56px;opacity:0;transform:translateY(6px) scale(.94);
  transition:opacity .45s ease,transform .7s var(--spring-snappy,cubic-bezier(.2,.9,.3,1.2))}
.sd3-node.is-on{opacity:1;transform:none}
.sd3-tile{position:relative;width:56px;height:56px;display:grid;place-items:center;
  background:linear-gradient(180deg,#26242F,#1A1922);box-shadow:inset 0 0 0 1px rgb(255 255 255/.24),0 10px 22px -10px rgb(0 0 0/.7);
  transition:box-shadow .45s ease}
.sd3-node.is-run .sd3-tile{box-shadow:inset 0 0 0 1.5px #4ADE80,0 0 0 1px rgb(74 222 128/.25),0 0 22px rgb(74 222 128/.3),0 10px 22px -10px rgb(0 0 0/.7)}
.sd3-node.is-past .sd3-tile{box-shadow:inset 0 0 0 1px rgb(74 222 128/.5),0 10px 22px -10px rgb(0 0 0/.7)}
.sd3-icon{width:22px;height:22px;fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:opacity .45s ease}
.sd3-node.is-run .sd3-icon,.sd3-node.is-ok .sd3-icon{opacity:1}
.sd3-node.is-past .sd3-icon{opacity:.6}
.sd3-check{position:absolute;right:5px;bottom:5px;width:10px;height:10px;fill:none;stroke:#4ADE80;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s cubic-bezier(.4,0,.2,1) .1s}
.sd3-node.is-ok .sd3-check{stroke-dashoffset:0}
.sd3-port{position:absolute;left:53px;top:25px;width:6px;height:6px;border-radius:50%;background:#7C7A86;opacity:0;transition:background-color .3s ease,opacity .3s ease}
.sd3-node.is-on .sd3-port{opacity:1}
.sd3-node.is-out .sd3-port{background:#4ADE80;box-shadow:0 0 6px rgb(74 222 128/.7)}
.sd3-bolt{position:absolute;left:-24px;top:19px;width:16px;height:18px;fill:#F97316;stroke:none;transition:opacity .5s ease}
.sd3-node.is-past .sd3-bolt{opacity:.45}
.sd3-node b,.sd3-node small{position:absolute;left:50%;translate:-50% 0;white-space:nowrap;text-align:center}
.sd3-node b{top:66px;font-size:10.5px;font-weight:500;letter-spacing:-.005em;color:rgb(245 245 247/.62);transition:color .45s ease}
.sd3-node small{top:81px;font-size:9px;color:rgb(245 245 247/.4)}
.sd3-node.is-run b,.sd3-node.is-ok b{color:#F5F5F7}
.sd3-node.is-past b{color:rgb(245 245 247/.55)}
.sd3-wire{position:absolute;top:-1px;height:2px}
.sd3-wire i{position:absolute;inset:0;background:linear-gradient(90deg,#4ADE80,#34D399);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.sd3-wire.is-on i{transform:scaleX(1)}
.sd3-wire.is-past i{opacity:.55;transition:opacity .5s ease}
.sd3-arrow{position:absolute;right:-6px;top:-4px;width:8px;height:10px;opacity:0;transform:translateX(-4px);
  background:#4ADE80;clip-path:polygon(0 0,62% 50%,0 100%);transition:opacity .25s ease .35s,transform .35s ease .35s}
.sd3-arrow::after{content:"";position:absolute;right:0;top:0;width:2px;height:100%;background:#4ADE80}
.sd3-wire.is-on .sd3-arrow{opacity:1;transform:none}
.sd3-editor{position:absolute;inset:9% 7%;z-index:2;overflow:hidden;background:#0F0D16;box-shadow:inset 0 0 0 1px rgb(255 255 255/.09),0 30px 60px -20px rgb(0 0 0/.8);
  opacity:0;transform:scale(.18);transition:opacity .45s ease,transform .7s cubic-bezier(.65,0,.35,1);pointer-events:none}
.sd3.is-code .sd3-editor{opacity:1;transform:none}
.sd3-cam{opacity:1}
.sd3.is-code .sd3-cam{opacity:0;transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .35s ease .25s}
.sd3-code{padding:1.4em 1.2em;font:calc(var(--fit)*8.6px)/1.75 var(--font-aeonik-mono,var(--font-mono)),ui-monospace,SFMono-Regular,Menlo,monospace;color:#E5E7EB;white-space:pre}
.sd3-line{display:flex;gap:1.6em}
.sd3-ln{width:1.4em;flex:none;text-align:right;color:rgb(255 255 255/.25)}
.sd3-code code{font:inherit}
.sd3-code .t-k{color:#F0A35E}.sd3-code .t-f{color:#7AA2F7}.sd3-code .t-s{color:#9ECE6A}.sd3-code .t-n{color:rgb(229 231 235/.7)}
.sd3-code .ch{visibility:hidden}.sd3-code .ch.is-on{visibility:visible}
.sd3-caret{display:inline-block;width:.55em;height:1.1em;margin-left:1px;vertical-align:-.2em;background:#FFB4E9;animation:sd3-caret 1s steps(1) infinite}
@keyframes sd3-caret{50%{opacity:0}}
.aai-story[data-story="sadu"] .bv-n8n.sd3{max-width:none}
@media (prefers-reduced-motion:reduce){.sd3-cam,.sd3-node,.sd3-tile,.sd3-wire i,.sd3-check,.sd3-arrow,.sd3-editor{transition:none}.sd3-caret{animation:none}}

/* ===== Pre-footer: Evervault card (clone-support.js, evervault) ==================================
   After Aceternity's Evervault card, in the brand: purple-to-lilac reveal, Latin and Arabic
   characters, the Arabic.ai mark at the centre, square corners and a frame of hairlines. Replaces
   the closing video, which is paused and hidden. */
.VideoCta .has-ever .ResponsiveVideo{visibility:hidden}
/* The frame (10 October 2026): four hairlines along the card's edges, at the guide lines' weight,
   running past the corners so they cross there, and fading out at their ends (it was a bright
   border with crosses at the corners, which sat on the page rather than in it). While the pointer
   is over the card, a brighter copy lights the lines near it: a radial mask that follows --x/--y
   (set on .aai-ever by clone-support.js). */
.aai-ever{--x:50%;--y:50%;--run:72px;--hair:rgb(255 255 255/.12);position:absolute;inset:14px}
.aai-ever__lines{position:absolute;inset:0;z-index:3;pointer-events:none}
.aai-ever__lines i{position:absolute}
.aai-ever__lines :is(.is-top,.is-bottom){left:calc(-1 * var(--run));right:calc(-1 * var(--run));height:1px;
 background:linear-gradient(90deg,transparent,var(--hair) var(--run),var(--hair) calc(100% - var(--run)),transparent)}
.aai-ever__lines :is(.is-left,.is-right){top:calc(-1 * var(--run));bottom:calc(-1 * var(--run));width:1px;
 background:linear-gradient(180deg,transparent,var(--hair) var(--run),var(--hair) calc(100% - var(--run)),transparent)}
.aai-ever__lines .is-top{top:0}.aai-ever__lines .is-bottom{bottom:0}
.aai-ever__lines .is-left{left:0}.aai-ever__lines .is-right{right:0}
.aai-ever__lines.is-lit{--hair:rgb(255 255 255/.55);opacity:0;transition:opacity .35s ease;
 -webkit-mask-image:radial-gradient(240px circle at var(--x) var(--y),#000,rgb(0 0 0/.5) 45%,transparent);
 mask-image:radial-gradient(240px circle at var(--x) var(--y),#000,rgb(0 0 0/.5) 45%,transparent)}
.aai-ever:hover .aai-ever__lines.is-lit{opacity:1}
@media (max-width:1023px){.aai-ever{--run:24px}.VideoCta .has-ever{overflow:visible!important}}  /* 24px reaches the screen edge, no further */
@media (min-width:1024px){.VideoCta{overflow:visible!important}}
.aai-ever__card{position:absolute;inset:0;overflow:hidden;background:#09090A}
.aai-ever__glow,.aai-ever__chars{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
 -webkit-mask-image:radial-gradient(250px at var(--x) var(--y),#fff,transparent);mask-image:radial-gradient(250px at var(--x) var(--y),#fff,transparent)}
.aai-ever__glow{background:linear-gradient(90deg,#3F1993,#7B4FD6 55%,#FFB4E9)}
.aai-ever__chars{mix-blend-mode:overlay}
.aai-ever__chars p{margin:0;height:100%;overflow:hidden;font:700 12px/1.4 var(--font-aeonik-mono),ui-monospace,monospace;color:#fff;word-break:break-all;white-space:pre-wrap}
.aai-ever__card:hover .aai-ever__glow,.aai-ever__card:hover .aai-ever__chars,.aai-ever.is-auto .aai-ever__glow,.aai-ever.is-auto .aai-ever__chars{opacity:1}
.aai-ever__seal{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:200px;height:200px;translate:-50% -50%}
.aai-ever__seal span{position:absolute;inset:0;background:radial-gradient(closest-side,rgb(9 9 10/.94) 58%,rgb(9 9 10/0))}
.aai-ever__seal img{position:relative;width:112px;height:auto}
@media (max-width:767px){.aai-ever__seal{width:160px;height:160px}.aai-ever__seal img{width:92px}}

/* Footer: the divider above the legal row runs edge to edge; the outline wordmark is solid once it
   has drawn in (the dash pattern, with non-scaling strokes, left parts of some letters undrawn)
   and sits quieter. */
.aai-footer__legal{position:relative;border-top:0}
.aai-footer__legal::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:1px;translate:-50% 0;background:rgb(255 255 255/.1)}
.aai-wm-outline{opacity:.08}
.aai-footer__wordmark svg.is-drawn .aai-wm-outline>*{animation:aai-wm-solid 0s linear 3.4s forwards}
@keyframes aai-wm-solid{to{stroke-dasharray:none}}
@media (prefers-reduced-motion:reduce){.aai-wm-outline>*{stroke-dasharray:none}}

/* Sadu card: dark purple into black */
.aai-bento__card[data-story="sadu"],.aai-story[data-story="sadu"] .aai-story__visual{background:linear-gradient(165deg,#2B1160 0%,#170A38 42%,#09090A 100%)}

/* Sadu card: the dotted plate runs the full width of the card and down to its bottom edge, fading
   in from nothing over the top half of the visual; the workflow sits on it unframed. (The panel
   keeps its framed plate.) */
.aai-bento__card[data-story="sadu"] .aai-bento__visual::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(rgb(255 255 255/.16) .8px,transparent 1.3px) 7px 7px/14px 14px,linear-gradient(rgb(255 255 255/0),rgb(255 255 255/.035));
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 50%);mask-image:linear-gradient(to bottom,transparent 0%,#000 50%)}
.aai-bento__card .bv-n8n{position:relative;z-index:1}
.aai-bento__card .bv-n8n__canvas{padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* Pre-footer layout: copy and card on one two-column grid spanning the content edges (logo to
   navbar CTA), with equal padding above and below and both columns centred on each other. The
   card's frame sits on the right content edge, its hairlines running on past the corners. */
@media (min-width:1024px){
 .VideoCta{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;column-gap:clamp(48px,6vw,112px);padding-block:clamp(112px,12vw,176px)!important}
 .VideoCta>.relative.z-10{max-width:30rem!important}
 .VideoCta .has-ever{position:relative!important;inset:auto!important;transform:none!important;translate:none!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important;aspect-ratio:16/11!important;height:auto!important}
 .VideoCta .has-ever .ResponsiveVideo{position:absolute;inset:0}
 .VideoCta .has-ever .aai-ever{inset:0}
}
.VideoCta h2{letter-spacing:-.02em;line-height:1.12!important}
.VideoCta p.body1{max-width:34ch;color:rgb(255 255 255/.66)}

/* Sadu panel: the same fading dot field as the card, the diagram centred at a readable size */
.aai-story[data-story="sadu"] .aai-story__visual{justify-content:center}
.aai-story[data-story="sadu"] .aai-story__visual::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(rgb(255 255 255/.16) .8px,transparent 1.3px) 7px 7px/16px 16px;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 55%);mask-image:linear-gradient(to bottom,transparent 0%,#000 55%)}
.aai-story[data-story="sadu"] .bv-n8n{position:relative;z-index:1;width:100%}
.aai-story[data-story="sadu"] .bv-n8n__canvas{padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ===== Navbar flyouts: one large morph-slider window ==============================================
   clone-support.js (navMorph) mounts .aai-morph in the flyout's right column and hides the
   compiled image or cards beside it. Square corners like the rest of the page; a glass caption
   names the shown title, square indicator bars. The title that is shown
   picks up the nav accent. */
.aai-morph-host>:not(.aai-morph){display:none!important}
.aai-morph-host{display:block!important;padding-block:0!important;align-self:start!important}
/* One size for every flyout: each menu's panel is the same height (--flyout-h), and the window
   spans columns 5 to 12 at that height in every menu that has one. */
@media (min-width:1024px){
 header{--flyout-h:clamp(280px,26vw,380px)}
 header .grid-layout-mobile.md\:grid-layout-desktop{min-height:var(--flyout-h)}
 /* Spacing audit (10 October 2026): the window stopped at the content edge, 16px from the frame line,
    while the menu's lines sit 40px above and below it; it now ends 40px from the line too. */
 header .has-morph>.aai-morph-host{grid-column:5/-1!important;width:calc(100% - var(--fly-pad,40px) + 16px)!important;max-width:none!important;margin:0!important;padding:0!important;height:var(--flyout-h)!important;min-height:0!important}
 header .has-morph>.aai-morph-host .aai-morph{aspect-ratio:auto;height:100%}
}
/* A menu without images (Resources) drops the compiled empty image placeholder. */
header .grid-layout-mobile>[data-stagger-index]:not(.aai-morph-host):not(:has(img,a)){display:none!important}
/* Resources: with no window, Explore, Company and Sovereignty spread across the full content
   width with equal gaps, the last column ending on the navbar CTA's right edge. The two right-hand
   groups are unwrapped (display:contents) onto one three-column grid. */
@media (min-width:1024px){
 header .grid-layout-mobile:not(.has-morph):has(>:nth-child(2) .navigation-subheader~.navigation-subheader){display:grid!important;grid-template-columns:repeat(3,auto)!important;grid-template-rows:auto 1fr;justify-content:space-between;column-gap:0!important;row-gap:4px!important}
 header .grid-layout-mobile:not(.has-morph):has(>:nth-child(2) .navigation-subheader~.navigation-subheader)>:nth-child(1){grid-column:1!important;grid-row:1/3!important}
 header .grid-layout-mobile:not(.has-morph):has(>:nth-child(2) .navigation-subheader~.navigation-subheader)>:nth-child(2),header .grid-layout-mobile:not(.has-morph):has(>:nth-child(2) .navigation-subheader~.navigation-subheader)>:nth-child(2)>div{display:contents!important}
 header .grid-layout-mobile:not(.has-morph):has(>:nth-child(2) .navigation-subheader~.navigation-subheader)>:nth-child(2)>div>:nth-child(-n+2){grid-column:2}
 header .grid-layout-mobile:not(.has-morph):has(>:nth-child(2) .navigation-subheader~.navigation-subheader)>:nth-child(2)>div>:nth-child(n+3){grid-column:3}
 header .grid-layout-mobile:not(.has-morph):has(>:nth-child(2) .navigation-subheader~.navigation-subheader)>:nth-child(2)>div>:nth-child(odd){grid-row:1}
 header .grid-layout-mobile:not(.has-morph):has(>:nth-child(2) .navigation-subheader~.navigation-subheader)>:nth-child(2)>div>:nth-child(even){grid-row:2}
 /* Every Resources link takes the Explore column's size: 24/30, weight 600, -.016em. */
 header .grid-layout-mobile:not(.has-morph)>:nth-child(2):has(.navigation-subheader~.navigation-subheader) a{padding-block:4px!important}
 header .grid-layout-mobile:not(.has-morph)>:nth-child(2):has(.navigation-subheader~.navigation-subheader) .navigation-link{font-size:24px!important;line-height:30px!important;letter-spacing:-.016em!important;font-weight:600!important;white-space:nowrap}
 header .grid-layout-mobile:not(.has-morph)>:nth-child(2)>div:has(>.navigation-subheader~.navigation-subheader){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr;grid-auto-flow:column;column-gap:8px}
}
.aai-morph{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0C0716;isolation:isolate;
  box-shadow:0 24px 48px -24px rgb(32 12 72/.45),0 0 0 1px rgb(255 255 255/.06) inset}
.aai-morph__gl{position:absolute;inset:0;cursor:grab;outline:none;touch-action:pan-y}
.aai-morph__gl:active{cursor:grabbing}
.aai-morph__gl:focus-visible{box-shadow:inset 0 0 0 2px rgb(255 255 255/.8)}
.aai-morph__gl canvas{display:block;width:100%;height:100%}
.aai-morph.is-static .aai-morph__gl{background:var(--img) center/cover}
.aai-morph__caps{position:absolute;left:16px;bottom:16px;z-index:2;display:grid;pointer-events:none;max-width:70%}
.aai-morph__cap{grid-area:1/1;justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;
  font-size:14px;font-weight:500;letter-spacing:-.005em;color:#fff;background:rgb(12 7 22/.42);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.14);opacity:0;transform:translateY(10px);filter:blur(6px);
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1),filter .72s cubic-bezier(.16,1,.3,1)}
.aai-morph__cap.is-on{opacity:1;transform:none;filter:none}
.aai-morph__cap svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
header a.is-morph-on,header a.is-morph-on .navigation-link{color:var(--nav-accent,#3F1993)!important}
@media (max-width:767px){.aai-morph{aspect-ratio:16/10}}
@media (prefers-reduced-motion:reduce){.aai-morph__cap{transition:none}}

/* Camera moves (clone-support.js): the Atelier and Data Services card visuals are viewports and
   the drawing inside moves as a camera would. */
.aai-bento__visual.has-cam{overflow:hidden}
/* The camera's frame stops short of the title (11 October 2026 audit): pushed in, a tall drawing could
   reach up to the card's heading (the Atelier card under a two-line title on phones). */
.aai-bento__visual.has-cam{clip-path:inset(14px 0 0 0)}
.aai-cam{width:100%;transform-origin:0 0;will-change:transform}

/* Benchmark card: the title at 2.5x. */
.aai-bento__card[data-story="benchmark"] .aai-bento__title{max-width:16ch;font-size:calc(2.5*clamp(20px,1.6vw,24px));line-height:1.04;letter-spacing:-.035em}
@media (max-width:639px){.aai-bento__card[data-story="benchmark"] .aai-bento__title{font-size:30px}}  /* three lines in English and Spanish (12 October 2026) */

/* Footer link columns: one line per link. */
.aai-footer nav a{white-space:nowrap}

/* Navbar logo at 1.2x: the compiled logo is held to 80px wide; now 96px, height from its ratio. */
header a[aria-label="\627 \644 \635 \641 \62d \629 \20 \627 \644 \631 \626 \64a \633 \64a \629 "] svg{width:96px!important;max-width:none!important;height:auto!important}

/* ===== Mobile pass (7 October 2026) ================================================================ */
/* Proof panel: the compiled max-md:!leading-[40px] sits in a cascade layer, which outranks unlayered
   !important, so the line height is set on the split line rows instead (they inherit otherwise). */
[class*="ScrollingQuote"] .AnimatedText>div,[class*="ScrollingQuote"] .AnimatedText>div>div,[class*="ScrollingQuote"] .AnimatedText p{line-height:1.32}
[class*="ScrollingQuote"] .AnimatedText strong{line-height:1.02}
[class*="ScrollingQuote"] .AnimatedText em{line-height:1.4}
@media (max-width:1023px){
 /* Mobile menu: the Industries panel no longer shows the two old feature cards (desktop shows the
    morph window instead). */
 header .flex.flex-col.gap-4:has(>a>div[class*="aspect-[16/9]"]){display:none!important}
 /* Pre-footer card: aligned with the copy's edges. */
 .VideoCta .aai-ever{inset:0}
}
/* Partnerships on phones: a row you swipe, each card snapping to the content edge, instead of the
   drift that cut card text off at the edges. */
@media (max-width:767px){
 .aai-partners{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .aai-partners::-webkit-scrollbar{display:none}
 .aai-partners__track{animation:none!important;transform:none!important}
 .aai-partner{scroll-snap-align:start}
 .aai-partner[aria-hidden]{display:none}
}
/* Announcement bar on phones: the mark, sentence and "Learn more" flow inline as one centred
   paragraph (two lines) instead of stacking onto three, and the bar's padding tightens. */
@media (max-width:639px){
 [class*="max-w-[1472px]"].py-2\.5:has(.flex-wrap.gap-x-3){padding-block:8px}
 [class*="max-w-[1472px]"] .flex.flex-wrap.gap-x-3.gap-y-1{display:block;font-size:13px;line-height:1.45}
 [class*="max-w-[1472px]"] .flex.flex-wrap.gap-x-3.gap-y-1>*{display:inline;vertical-align:middle}
 [class*="max-w-[1472px]"] .flex.flex-wrap.gap-x-3.gap-y-1>*+*{margin-left:0;margin-inline-start:.3em}  /* one word space, on the side the reading direction needs */
 [class*="max-w-[1472px]"] .flex.flex-wrap.gap-x-3.gap-y-1 svg{display:inline-block;vertical-align:-2px;margin-inline-start:4px}  /* the link is inline here, so its 4px gap is set on the arrow */
}

/* ===== Hero first frame (8 October 2026) ==========================================================
   The video's opening frame is on screen from the first paint, where the video will play:
   - before the app mounts (html.aai-js, set in the head), over the plain-HTML fallback, whose text
     stays in the page for crawlers and no-JS visitors;
   - in the app's loading placeholder, which used to be a black box;
   - then in the WebGL scene itself (home-hero-poster.jpg), until the video plays.
   The frame sits where the scene draws the video (padx/pady/navBarPad in the hero vertex shader),
   and is darkened 40% as the shader darkens the video (mix(color, black, 0.4)). A 48px copy of the
   frame is inlined under it, so the first paint is never black while the full frame downloads. */
/* tops are the shader's navBarPad + pady less 8px, as measured against the rendered scene at 390, 1024, 1440 and 1920 */
:root{--aai-hero-top:113px;--aai-hero-bottom:33px;--aai-hero-side:3.7%;--aai-banner:39px}
@media (max-width:1449px){:root{--aai-hero-top:93px;--aai-hero-bottom:26px}}
@media (max-width:767px){:root{--aai-hero-top:88px;--aai-hero-bottom:24px;--aai-banner:55px}}
@media (max-width:767px) and (orientation:portrait){:root{--aai-hero-side:1%}}
.HomeHero [class~="top-[88px]"][class~="bg-black"],html.aai-js #ssr-fallback::before{
 background:linear-gradient(rgb(0 0 0/.4),rgb(0 0 0/.4)),url(/images/home-hero-first-frame.jpg) center/cover no-repeat,url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAbADADASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAwIAAQQG/8QAJBAAAgICAQQBBQAAAAAAAAAAAQIAEQMhEjFBUWEiI0KRocH/xAAXAQADAQAAAAAAAAAAAAAAAAAAAQIE/8QAGREBAQEBAQEAAAAAAAAAAAAAAAERQRIh/9oADAMBAAIRAxEAPwDxmMC71FAB9b17kYwPFERl+RH5maoTkwK6AdBc2mBcY1ZFyX5HI3zIAXpExLQdt0T1JlWXyM+aihRGib/UFhTWe0d9nx7guTZ7/wBkwmJVbMVCLG9kdpyYyeMdSbHu4WG6BhWnb7pCWvL6nLfeaLEOADqpKABnqPmHxTHZ89oLnfWpuzyWCSeUJEv/2Q==) center/cover no-repeat,#000}
.HomeHero [class~="top-[88px]"][class~="bg-black"]{top:var(--aai-hero-top)!important;bottom:var(--aai-hero-bottom)!important;left:var(--aai-hero-side)!important;right:var(--aai-hero-side)!important}
html.aai-js #ssr-fallback::before{content:"";position:absolute;z-index:0;top:calc(var(--aai-banner) + var(--aai-hero-top));left:var(--aai-hero-side);right:var(--aai-hero-side);height:calc(100dvh - var(--aai-hero-top) - var(--aai-hero-bottom))}
html.aai-js #ssr-fallback{position:relative;min-height:100dvh}
html.aai-js #ssr-fallback>*{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
/* The scene now opens on the same frame, so its fade-in happens under the placeholder, which leaves
   only once the canvas is fully in: no half-transparent moment where the white page shows through. */
.HomeHero [class~="z-[2]"][class~="select-none"][class~="duration-1000"]{transition-delay:1s}
/* Menu one-liners (clone-support.js): small and muted, directly under each name. The menu column is
   283px at 1440, too narrow to set them beside the name without breaking them into short lines. */
header a[data-nav-name]{width:auto!important;max-width:100%;flex-wrap:wrap}
/* the homepage's phone menu sets name and arrow in one row: the one-liner takes its own line below */
header a[data-nav-name]>.aai-nav-desc{order:3;flex:0 0 100%}
@media (max-width:767px){header a[data-nav-name]>.aai-nav-desc{margin:-7px 0 8px}}
.aai-nav-desc{display:block;margin-top:2px;font-size:13px;line-height:1.3;font-weight:400;letter-spacing:0;color:#6E6E73;white-space:normal;text-wrap:pretty}

/* ===== Proof panel after the partnerships (9 October 2026) =========================================
   The panel was built to follow the dark hero and lead into the light industries section. In its
   new place (audit_fixes.py, HOME_ORDER) its box lies under the industries section, which keeps
   sliding down as the page scrolls past it, so the panel is stacked above it; the closing section
   that slides over it reveals from a black frame, not a white one; and the rounded foot under the
   panel, which previews the next section, takes the closing section's colour. Each rule applies
   only in this order. */
.ScrollRevealSection~[class*="ScrollingQuote-module"][class*="__root"]{position:relative;z-index:1}
[class*="ScrollingQuote-module"][class*="__root"]+.ScrollRevealSection[data-theme="dark"]{z-index:2;background:#000}
[class*="ScrollingQuote-module"][class*="__root"]:has(+[data-theme="dark"]) [class*="ScrollingQuote-module"][class*="__wrapper"]::after{background-color:#09090A}

/* ===== Menu window: the products' one-liners (9 October 2026) =====================================
   Each product's one-liner sits under its name in the menus (clone-support.js). Where the Products
   window shows (has-titles), it stays for screen readers only. */
header .has-titles a[data-nav-name] .aai-nav-desc{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ===== Section hand-offs in the new order (9 October 2026; 12 October 2026) ======================
   The homepage runs dark (hero), light (news bento, industries, partnerships), then dark again (proof
   panel, closing, footer). Every section arrives the way the partnerships section does (12 October
   2026, the user's note: "all section transitions should be smooth", with the background shaping in,
   and no snapping): the reference's ScrollRevealSection, whose panel in the section's colour widens
   from 24px inside each side (12px below 768px) to full width as the section's top rises from the
   middle of the screen to a tenth from the top, framed in the colour it leaves. (Its script also rounds
   the panel's top corners, which the site's square corners override.) The industries, partnerships and closing sections are ScrollRevealSections;
   the bento after the hero and the proof panel after the partnerships get the same panel here
   (::before), sized on the same curve by clone-support.js (an animation of the panel, or --aai-sx), which runs in every
   browser and on phones. (It replaces a scroll-driven CSS clip from 9 October, which had no corners,
   ran over the section's whole entry, and was off on phones and in browsers without view timelines.)
   Without the script, or with reduced motion, the panels are full and the sections meet edge to edge. */
.rootPageRenderer>.BlogPreview+.ScrollRevealSection{background:#F7F7F8}
/* The page wrapper's overflow-x:hidden made it a scroll container (one that never scrolls); clip crops
   the same way without being one. */
.overflow-x-hidden:has(>.rootPageRenderer){overflow-x:clip}
.rootPageRenderer>.HomeHero+.BlogPreview{position:relative;background:#000}
/* The bento starts as the models screen is left (12 October 2026, the user's note: no scroll after the
   models screen where the stack grows back with nothing on it). It is pulled up over the hero's tail so
   that at the models stop (77.5% of the hero's scroll of 8.7 screens, 7.15 up to 768px; the hero is 850
   and 732dvh tall) its top is at the foot of the screen, and the next scroll slides it up over the
   pinned scene, which keeps the models screen until it is covered (audit_fixes.py, efm). The bar above
   the navbar, while it shows, only adds its height to that scroll. */
.rootPageRenderer>.HomeHero+.BlogPreview{z-index:2;margin-top:-75.75dvh}
@media (max-width:768px){.rootPageRenderer>.HomeHero+.BlogPreview{margin-top:-77.875dvh}}
.ScrollRevealSection~[class*="ScrollingQuote-module"][class*="__root"]{background:#fff}
.rootPageRenderer>.HomeHero+.BlogPreview::before,
.ScrollRevealSection~[class*="ScrollingQuote-module"][class*="__root"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  transform-origin:top;transform:scaleX(var(--aai-sx,1))}
.rootPageRenderer>.HomeHero+.BlogPreview::before{background:#F7F7F8}
.ScrollRevealSection~[class*="ScrollingQuote-module"][class*="__root"]::before{background:#000}

/* ===== Navbar: one on every page (10 October 2026) ================================================
   The user's note: the navbar should be the same everywhere. The inner pages draw their own header
   (pages.css); it now matches the homepage's:
   - one line under the navbar, full width, in every state (on the homepage it was an 8% shadow
     under the glass, which went with the glass over the hero): the menus' line colour, white at
     14% when the navbar is dark;
   - the labels at 82%, full strength on hover, the open one bold (not purple), the others at 30%
     while a menu is open;
   - the menu in the homepage's frosted glass, with the same foot line (above), and the page under
     an open menu dimmed by 18% and blurred, as on the homepage. The header's glass sits on a
     pseudo-element, as on the homepage: a backdrop-filter on the header itself would make it the
     backdrop root, and the menu inside it could no longer blur the page. */
header{--nav-line:rgb(228 226 234)}
:is([data-theme=dark],[data-initial-chrome-theme=dark],[data-footer-under-nav]) header{--nav-line:rgb(255 255 255/.14)}
header.fixed:not(.pg-header)::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--nav-line);pointer-events:none}
header.pg-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--nav-line)}
header.pg-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(251 251 253/.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);pointer-events:none}
header.pg-header:has(.pg-flyouts:not([hidden]))::before{background:rgb(251 251 253/.94)}
header .pg-flyouts{background:rgb(251 251 253/.94);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:0;box-shadow:0 1px 0 rgb(0 0 0/.08)}
/* The dim, on the header (not a backdrop root) under its content, so it can blur the page. */
header.pg-header:has(.pg-flyouts:not([hidden]))::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;z-index:-1;background:rgb(0 0 0/.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
header .pg-nav button{opacity:.82;transition:opacity .2s ease}
header .pg-nav button:hover,header .pg-nav button[aria-expanded="true"]{opacity:1;color:#1D1D1F}
header .pg-nav:has(button[aria-expanded="true"]) button:not([aria-expanded="true"]){opacity:.3}
@media (prefers-reduced-transparency:reduce){header.pg-header::before,header .pg-flyouts{background:#FBFBFD;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Over a dark section or the footer the inner pages' header turns dark, as the homepage's does
   (11 October 2026; pages.js): its smoked glass, light logo and labels, the line at 14% white. It was
   the light glass at 78% over the dark, a muddy grey bar. Light again while a menu or the drawer is open. */
header.pg-header::before{transition:background-color .3s ease}
header.pg-header .pg-header__logo,header.pg-header .pg-burger,header.pg-header .aai-lang__btn{transition:color .3s ease,background-color .3s ease,border-color .3s ease}
header.pg-header.is-dark{--nav-line:rgb(255 255 255/.14)}
header.pg-header.is-dark::before{background:rgb(22 22 23/.78)}
header.pg-header.is-dark .pg-header__logo,header.pg-header.is-dark .pg-nav button,header.pg-header.is-dark .pg-nav button:hover{color:#F5F5F7}
header.pg-header.is-dark .aai-lang__btn{color:#F5F5F7}
header.pg-header.is-dark .aai-lang__btn:hover,header.pg-header.is-dark .aai-lang.is-open .aai-lang__btn{color:#fff}
header.pg-header.is-dark .pg-burger{background:#F5F5F7;color:#09090A}
@media (prefers-reduced-transparency:reduce){header.pg-header.is-dark::before{background:#161617}}

/* ===== Menu: three lines (10 October 2026) =======================================================
   After the user's sketch: a hairline under the navbar and one at the foot of the menu, each across
   the full width, and in the Products menu a vertical one between the titles and the panel, on the
   gutter between columns 4 and 5, running from one line to the other. The menu has the same 40px
   above and below its content, so the content sits centred between the lines. A line on the
   menu's last row read as its edge, so the foot line sits 20px inside the menu, with the menu
   running on below it. The same on every page (see "Navbar: one on every page" below). */
@media (min-width:1024px){
 header{--fly-line:var(--nav-line);--fly-pad:40px;--fly-foot:20px}
 header div:has(>.grid-layout-mobile.md\:grid-layout-desktop){position:relative;padding-top:var(--fly-pad)!important;padding-bottom:calc(var(--fly-pad) + var(--fly-foot))!important}
 header div:has(>.grid-layout-mobile.md\:grid-layout-desktop)::before,
 header div:has(>.grid-layout-mobile.md\:grid-layout-desktop)::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--fly-line);pointer-events:none}
 header div:has(>.grid-layout-mobile.md\:grid-layout-desktop)::before{top:0}
 header div:has(>.grid-layout-mobile.md\:grid-layout-desktop)::after{bottom:var(--fly-foot)}
 header .has-morph>.aai-morph-host:has(>.aai-morph.is-pm){position:relative}
 header .has-morph>.aai-morph-host:has(>.aai-morph.is-pm)::before{content:"";position:absolute;left:-4.5px;width:1px;
   top:calc(-1 * var(--fly-pad));bottom:calc(-1 * var(--fly-pad));background:var(--fly-line);pointer-events:none}
}

/* ===== Menu: what is open and what is shown (10 October 2026) ======================================
   The user's notes. The navbar label of the open menu is bold (600; the site ships Aeonik Regular
   only, so it is drawn bold, and that keeps its width, so nothing beside it moves). In a menu with
   a window (Products, Industries) the titles not on show sit at 40% and the one on show at full
   strength, in the nav accent; in Resources, all are at full strength until one is under the
   pointer, then the others drop to 40%. Desktop menus only; the phone menus are lists. */
header .navigation-header-link[aria-expanded=true],header .pg-nav button[aria-expanded="true"]{font-weight:600}
@media (min-width:1024px){
 header .grid-layout-mobile>:not(.aai-morph-host) a{transition:opacity .25s ease}
 header .has-morph>:not(.aai-morph-host) a:not(.is-morph-on):not(:hover){opacity:.4}
 header .grid-layout-mobile:not(.has-morph):has(a:hover) a:not(:hover){opacity:.4}
}
@media (prefers-reduced-motion:reduce){header .grid-layout-mobile a{transition:none}}

/* ===== Menu window: product panels (10 October 2026) ==============================================
   The Products menu, after the user's reference and the product moments of the arabic-ai-site
   design (ProductMoments.tsx, moments.css, light theme), in the homepage bento's materials (Story
   bento: one material system). Since the evening of 10 October it has no window: no colour field,
   no glass and no shadow under it. It sits straight on the menu, on the site's 12-column grid (8px
   gaps): the titles take columns 1 to 4, the logo, what the product is, its line from the hero, a
   description and the site's button take columns 5 to 8, and the cards take columns 9 to 12: the
   purple panel of the product's parts across the top, the product's moment under it, then a light
   card and a dark detail card side by side (columns 9 and 10, 11 and 12). clone-support.js draws
   it all on a stage 447 high, scaled to the menu and widened to fill it, with the gap set so every
   card edge lands on a column line. Aeonik and square corners, as everywhere else. */
@property --pm-wipe{syntax:"<percentage>";inherits:false;initial-value:112%}
.aai-morph.is-pm,.pg-moment{--ink:#1A1730;--body:#3A3550;--muted:#6E6885;--brand:#3F1993;--midnight:#121214;--pink:#FFB4E9;
  --ease:cubic-bezier(.33,1,.68,1);--spring:cubic-bezier(.32,.72,0,1);
  background:none;box-shadow:none;overflow:visible}
.aai-morph.is-pm .aai-morph__gl{cursor:pointer}
.pm-stage{--g:9.6px;position:absolute;left:0;top:0;z-index:2;width:920px;height:447px;transform-origin:0 0;pointer-events:none;
  font-size:14px;line-height:1.5;color:var(--ink);text-align:left;-webkit-font-smoothing:antialiased}
.pm-stage p{margin:0}
/* A moment on its own, in a product page's header (clone-support.js, solo): the cards of the menu's
   last four columns on a stage 520 wide, scaled to the header. */
.pg-moment{position:relative;width:100%;max-width:620px;margin-inline:auto;aspect-ratio:520/447}
.pm-stage.pm-solo{width:520px}
.pm-solo .pm-scene{left:0}
.pm-stage svg{display:block;flex-shrink:0}

/* The copy: columns 5 to 8, the menu's full height, the button on the cards' foot. Copies swap in
   place: the line rises word by word, the rest fades up after it. */
.pm-intro{position:absolute;left:0;top:0;bottom:0;z-index:4;display:grid;width:calc((100% - var(--g)) / 2)}
.pm-copy{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:0 32px 0 40px}  /* clear of the line, room before the cards */
.pm-logo{display:flex;align-items:flex-end;height:46px}
.pm-logo img{display:block;width:auto;max-width:100%}
.pm-logo img.is-dark{display:none}
/* On a dark menu (the navbar turns dark over the page's dark sections): the copy turns light and
   its logo white; the cards stay light, made solid so they do not turn grey over the dark. */
:is([data-theme=dark],[data-initial-chrome-theme=dark],[data-footer-under-nav]) .pm-intro{--ink:#F5F5F7;--body:rgb(245 245 247/.74);--muted:rgb(245 245 247/.56)}
:is([data-theme=dark],[data-initial-chrome-theme=dark],[data-footer-under-nav]) .pm-logo img.is-light{display:none}
:is([data-theme=dark],[data-initial-chrome-theme=dark],[data-footer-under-nav]) .pm-logo img.is-dark{display:block}
:is([data-theme=dark],[data-initial-chrome-theme=dark],[data-footer-under-nav]) .pm-moment{background:#FBFAFD;-webkit-backdrop-filter:none;backdrop-filter:none}
:is([data-theme=dark],[data-initial-chrome-theme=dark],[data-footer-under-nav]) .pm-aside{background:#F2F0F7;-webkit-backdrop-filter:none;backdrop-filter:none}
/* One headline per product (10 October 2026): six or seven words, so 44px and balanced lines, which
   keeps it to three lines in the third and leaves no word on a line of its own. */
.pm-title{margin-top:28px!important;font-size:44px;font-weight:500;line-height:1.05;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.pm-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.pm-title .w>span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1) calc(var(--i) * 45ms + 120ms)}
.pm-copy.is-on .pm-title .w>span{transform:none}
.pm-copy.is-off .pm-title .w>span{transform:translateY(-110%);transition-duration:.5s;transition-delay:calc(var(--i) * 18ms)}
.pm-body{max-width:440px;margin-top:12px!important;font-size:16px;line-height:1.5;color:var(--body)}
.pm-cta{display:inline-flex;align-items:center;gap:10px;height:48px;margin-top:auto;padding:0 18px 0 20px;background:var(--brand);
  color:#fff;font-size:16px;font-weight:500;white-space:nowrap}  /* the site's button */
.pm-copy>:not(.pm-title){opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pm-copy.is-on>:not(.pm-title){opacity:1;transform:none;
  transition:opacity .55s var(--ease) calc(var(--k,0) * 70ms + 160ms),transform .8s var(--spring) calc(var(--k,0) * 70ms + 160ms)}
.pm-copy.is-reset *,.pm-scene.is-reset>*{transition:none!important}

/* A product's cards: columns 9 to 12 in a grid of two (columns 9 and 10, 11 and 12) with the
   grid's gap. The parts across the top, the moment taking the rest of the height, the light and
   the dark cards side by side at the foot. They rise in one after another. */
.pm-scene{position:absolute;top:0;bottom:0;left:calc((100% + var(--g)) / 2);right:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr) auto;gap:var(--g)}
.pm-scene>*{position:relative;min-width:0;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.pm-scene.is-on>*{opacity:1;transform:none;
  transition:opacity .6s var(--ease) calc(var(--k) * 90ms + 180ms),transform 1s var(--spring) calc(var(--k) * 90ms + 180ms)}
.pm-scene.is-off>*{transform:translateY(-10px)}
.pm-scene:not(.is-on) *{animation-play-state:paused!important}

.pm-parts{grid-column:1/-1;z-index:2;display:flex;flex-wrap:wrap;gap:6px;padding:12px;
  background:linear-gradient(160deg,#4C24AB,#3F1993 60%,#35137F);box-shadow:inset 0 1px 0 rgb(255 255 255/.14),0 24px 40px -24px rgb(63 25 147/.7)}
.pm-parts span{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 8px;font-size:13px;font-weight:500;color:#fff;
  background:rgb(255 255 255/.07);box-shadow:inset 0 0 0 1px rgb(255 255 255/.26);transition:background-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.pm-parts span.is-on{background:#fff;color:var(--brand);box-shadow:none}

/* The moment is light glass, like Atelier's window in the bento. */
.pm-moment{grid-column:1/-1;z-index:1;overflow:hidden;padding:14px;background:rgb(255 255 255/.78);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);
  box-shadow:var(--mat-light-edge),0 8px 24px -12px rgb(42 15 107/.14),0 32px 64px -32px rgb(42 15 107/.4)}

/* The light card: one fact about where the product works. */
.pm-aside{grid-column:1;z-index:2;padding:14px;background:var(--mat-light);-webkit-backdrop-filter:var(--mat-blur);backdrop-filter:var(--mat-blur);
  box-shadow:var(--mat-light-edge),0 8px 24px -12px rgb(42 15 107/.16),0 28px 56px -28px rgb(42 15 107/.3)}
.pm-aside__cap{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px!important;font-size:12px;letter-spacing:.005em;color:var(--mat-label)}
.pm-aside__cap span{color:var(--brand)}
.pm-aside__row{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 9px;background:#fff;box-shadow:var(--mat-chip)}
.pm-aside__row+.pm-aside__row{margin-top:6px}
.pm-aside__row>span{color:var(--brand)}
.pm-aside__row b{overflow:hidden;font-size:13px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;color:var(--ink)}
.pm-aside__row em{display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--brand)}
.pm-aside__row em:has(svg){width:18px;height:18px;background:rgb(27 24 48/.08);color:transparent;transition:background-color .45s var(--ease),color .45s var(--ease)}
.pm-aside__row.is-done em:has(svg){background:var(--brand);color:#fff}
.pm-aside__chips{display:flex;flex-wrap:wrap;gap:6px}
.pm-aside__chips span{padding:4px 9px;background:#fff;box-shadow:var(--mat-chip);font-size:12.5px;font-weight:500;color:var(--ink)}
.pm-aside__note{margin-top:8px!important;font-size:12px;line-height:1.4;color:var(--mat-label)}

/* The dark card, like the bento's night card: near-black on a faint grid. */
.pm-detail{grid-column:2;z-index:3;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;
  padding:14px 16px 16px;background-color:#0B0A10;color:#fff;
  background-image:linear-gradient(rgb(255 255 255/.045) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.045) 1px,transparent 1px);background-size:22px 22px;
  box-shadow:var(--mat-dark-edge),0 30px 50px -26px rgb(14 10 34/.8)}
.pm-detail__icon{display:grid;place-items:center;width:36px;height:36px;background:rgb(255 255 255/.08);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12);color:var(--pink)}
.pm-detail b{display:block;font-size:16px;font-weight:500;line-height:1.3}
.pm-detail small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:rgb(255 255 255/.62)}
.pm-detail :is(.pm-wave,.pm-bars){margin-left:-48px}  /* the strip runs under the icon too */
.pm-wave{display:flex;align-items:center;gap:3px;height:22px;margin-top:10px}
.pm-wave i{flex:1;max-width:7px;height:calc(var(--h) * 100%);background:var(--pink);transform-origin:center;animation:pm-wave 1.2s ease-in-out var(--d) infinite alternate}
@keyframes pm-wave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.pm-bars{display:grid;gap:6px;margin-top:10px}
.pm-bars>span{display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:4px 8px;font-size:12px}
.pm-bars em{grid-column:1/-1}
.pm-bars em{font-style:normal;color:rgb(255 255 255/.7);white-space:nowrap}
.pm-bars i{height:6px;width:calc(var(--v) * 100%);background:var(--pink)}
.pm-bars span+span i{background:rgb(255 255 255/.32)}
.pm-bars b{font-size:12px;font-weight:500;text-align:right}

/* The moments (light theme). */
/* Vision (10 October 2026): a scanned page whose lines are found (outlined), read (sharp), then pulled
   into fields. */
.pm-stage .m-scan{display:grid;gap:2px;padding:10px 14px;background:linear-gradient(180deg,#FDFCFE,#F5F3FA);box-shadow:inset 0 0 0 1px rgb(26 23 48/.08)}
.pm-stage .m-scan p{position:relative;color:var(--ink);filter:blur(1.5px);opacity:.5;transition:filter .7s var(--ease),opacity .7s var(--ease)}
.pm-stage .m-scan[data-read] p{filter:none;opacity:1}
.pm-stage .m-scan p::after{content:"";position:absolute;inset:2px -6px;box-shadow:inset 0 0 0 1.5px var(--brand);background:rgb(63 25 147/.05);opacity:0;transform:scale(.97);
  transition:opacity .35s var(--ease) calc(var(--i) * 140ms),transform .5s var(--spring) calc(var(--i) * 140ms),background-color .5s var(--ease),box-shadow .5s var(--ease)}
.pm-stage .m-scan[data-boxes] p::after{opacity:1;transform:none}
.pm-stage .m-scan[data-read] p::after{background:transparent;box-shadow:inset 0 0 0 1px rgb(63 25 147/.22)}
.pm-stage .m-fields{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pm-stage .m-fields span{display:grid;gap:1px;padding:5px 10px;background:#fff;box-shadow:var(--mat-chip);font-size:12.5px;font-weight:500;color:var(--ink);opacity:0;transform:translateY(4px);
  transition:opacity .35s var(--ease) calc(var(--i) * 90ms),transform .45s var(--spring) calc(var(--i) * 90ms)}
.pm-stage .m-fields small{font-size:10.5px;font-weight:400;color:var(--muted)}
.pm-stage .m-fields[data-on] span{opacity:1;transform:none}
.pm-stage [lang=ar]{font-family:"IBM Plex Sans Arabic",var(--font-aeonik),system-ui,-apple-system,"SF Arabic","Geeza Pro","Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif;font-size:15px;line-height:1.85}
.pm-stage mark{color:inherit;background:transparent;padding:0 2px;margin:0 -2px;transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.pm-stage mark[data-on]{background:rgb(63 25 147/.1);box-shadow:inset 0 -1.5px 0 var(--brand)}
.pm-stage .is-in:is(.pm-swap,.m-answer-body){animation:pm-rise .5s var(--ease) both}
@keyframes pm-rise{from{opacity:0;transform:translateY(6px)}}
.pm-swap{display:inline-block}
.pm-stage .m-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 4px 12px}
.pm-stage .m-title{font-size:15px;font-weight:600;color:var(--ink)}
.pm-stage .m-sub{margin-top:2px!important;font-size:12px;color:var(--muted)}
.pm-stage .m-status{display:inline-flex;align-items:center;height:24px;padding:0 10px;font-size:12px;font-weight:500;white-space:nowrap;
  transition:background-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.pm-stage .m-status[data-state=run]{background:rgb(63 25 147/.07);color:var(--brand);box-shadow:inset 0 0 0 1px rgb(63 25 147/.18)}
.pm-stage .m-status[data-state=wait]{background:#FFDFFF;color:var(--ink);box-shadow:inset 0 0 0 1px rgb(63 25 147/.12)}
.pm-stage .m-status[data-state=done]{background:var(--brand);color:#fff}
.pm-detail .pm-approval{margin-top:10px}
.pm-detail .m-status[data-state=run]{background:rgb(255 255 255/.08);color:rgb(255 255 255/.72);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14)}
.pm-detail .m-status[data-state=wait]{background:rgb(255 180 233/.16);color:var(--pink);box-shadow:inset 0 0 0 1px rgb(255 180 233/.42);animation:pm-ring-pink 1.6s ease-in-out infinite}
.pm-detail .m-status[data-state=done]{background:var(--pink);color:var(--ink)}
@keyframes pm-ring-pink{0%,100%{box-shadow:inset 0 0 0 1px rgb(255 180 233/.42),0 0 0 0 rgb(255 180 233/.3)}60%{box-shadow:inset 0 0 0 1px rgb(255 180 233/.7),0 0 0 6px rgb(255 180 233/0)}}
/* Models: one request, three kinds of answer. */
.pm-stage .m-segmented{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;background:var(--mat-seg-track);box-shadow:inset 0 .5px 1px rgb(27 24 48/.06)}
.pm-stage .m-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);background:#fff;
  box-shadow:var(--mat-seg-thumb);transform:translateX(calc(var(--i,0) * 100%));transition:transform .55s var(--spring)}
.pm-stage .m-segmented b{position:relative;display:grid;place-items:center;height:32px;font-size:13px;font-weight:600;letter-spacing:.01em;color:rgb(26 23 48/.48);transition:color .3s var(--ease)}
.pm-stage .m-segmented b.is-on{color:var(--ink)}
.pm-stage .m-bubble{margin:10px 0 0 14%!important;padding:10px 14px;background:var(--brand);color:#fff;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.16),0 10px 22px -12px rgb(63 25 147/.55)}
.pm-stage .m-answer{padding:10px 4px 0}
.pm-stage .m-answer-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--brand)}
.pm-stage .m-answer-body{min-height:46px;margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.pm-stage .m-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.pm-stage .m-tags li{padding:6px 11px;background:rgb(63 25 147/.06);box-shadow:inset 0 0 0 1px rgb(63 25 147/.14);font-size:13px;color:var(--ink);
  animation:pm-rise .45s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
/* Sadu: a governed run, one step after another, with a person in the loop. */
.pm-stage .m-steps{list-style:none;margin:0;padding:5px;background:rgb(26 23 48/.04);box-shadow:inset 0 0 0 1px rgb(26 23 48/.05)}
.pm-stage .m-steps li{display:grid;grid-template-columns:28px minmax(0,1fr) auto 18px;align-items:center;gap:10px;padding:4px 8px;
  transition:background-color .45s var(--ease),opacity .45s var(--ease),box-shadow .45s var(--ease)}
.pm-stage .m-steps li[data-state=active]{background:#fff;box-shadow:0 1px 2px rgb(26 23 48/.08),0 0 0 .5px rgb(26 23 48/.05)}
.pm-stage .m-steps li[data-state=pending]{opacity:.42}
.pm-stage .m-steps b{overflow:hidden;font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.pm-stage .m-steps small{font-size:12px;color:var(--muted);white-space:nowrap}
.pm-stage .m-icon{display:grid;place-items:center;width:28px;height:28px;background:#fff;color:var(--brand);box-shadow:inset 0 0 0 1px rgb(26 23 48/.08);
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.pm-stage .m-steps li[data-state=active] .m-icon{animation:pm-ring 1.6s ease-in-out infinite}
.pm-stage .m-steps li[data-state=done] .m-icon{background:rgb(63 25 147/.1);box-shadow:none}
@keyframes pm-ring{0%,100%{box-shadow:inset 0 0 0 1px rgb(63 25 147/.3),0 0 0 0 rgb(63 25 147/.18)}60%{box-shadow:inset 0 0 0 1px rgb(63 25 147/.55),0 0 0 6px rgb(63 25 147/0)}}
.pm-stage .m-check{display:grid;place-items:center;width:18px;height:18px;background:var(--brand);color:#fff;opacity:0;transform:scale(.5);
  transition:opacity .3s var(--ease),transform .5s var(--spring)}
.pm-stage .m-steps li[data-state=done] .m-check{opacity:1;transform:none}
/* Atelier: pick a room; the request writes itself in. */
.pm-stage .m-dock{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:5px;background:var(--mat-seg-track);box-shadow:inset 0 .5px 1px rgb(27 24 48/.06)}
.pm-stage .m-dock-thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 26px) / 5);background:#fff;
  box-shadow:var(--mat-seg-thumb);transform:translateX(calc(var(--i,0) * (100% + 4px)));transition:transform .55s var(--spring)}
.pm-stage .m-dock b{position:relative;display:grid;place-items:center;height:36px;color:rgb(26 23 48/.48);transition:color .3s var(--ease)}
.pm-stage .m-dock b.is-on{color:var(--ink)}
.pm-stage .m-room{margin:10px 4px 6px!important;font-size:12.5px;font-weight:500;color:var(--brand)}
.pm-stage .m-composer{padding:14px 14px 10px;background:rgb(26 23 48/.04);box-shadow:inset 0 0 0 1px rgb(26 23 48/.05)}
.pm-stage .m-prompt{min-height:44px;font-size:15px;line-height:1.5;color:var(--ink);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--pm-wipe) - 12%),transparent var(--pm-wipe));mask-image:linear-gradient(90deg,#000 calc(var(--pm-wipe) - 12%),transparent var(--pm-wipe))}
.pm-stage .m-prompt[dir=rtl]{-webkit-mask-image:linear-gradient(270deg,#000 calc(var(--pm-wipe) - 12%),transparent var(--pm-wipe));mask-image:linear-gradient(270deg,#000 calc(var(--pm-wipe) - 12%),transparent var(--pm-wipe))}
.pm-stage .m-prompt.is-in{animation:pm-wipe 1.3s var(--ease) both}
@keyframes pm-wipe{from{--pm-wipe:0%}to{--pm-wipe:112%}}
.pm-stage .m-composer-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;color:var(--muted)}
.pm-stage .m-send{display:grid;place-items:center;width:28px;height:28px;background:var(--brand);color:#fff}
.pm-stage .m-send.is-in{animation:pm-ready .45s var(--spring) 1.15s both}
@keyframes pm-ready{from{background:rgb(26 23 48/.08);color:rgb(26 23 48/.4);transform:scale(.88)}to{background:var(--brand);color:#fff;transform:scale(1)}}
/* Data: entity labels light up over the Arabic sentence; each tag keeps its space. */
.pm-stage .m-source{padding:10px 14px;background:rgb(26 23 48/.04);box-shadow:inset 0 0 0 1px rgb(26 23 48/.05);color:var(--ink)}
.pm-stage .m-annotate{line-height:2.25}
.pm-stage .m-annotate mark{padding:1px 3px}
.pm-stage .m-tag{display:inline-block;margin-inline-start:5px;padding:0 6px;font-size:10px;line-height:17px;font-weight:600;letter-spacing:.02em;vertical-align:2px;
  background:var(--brand);color:#fff;opacity:0;transform:scale(.85);transition:opacity .45s var(--ease),transform .5s var(--spring)}
.pm-stage .m-annotate mark[data-on] .m-tag{opacity:1;transform:none}
.pm-stage .m-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;list-style:none;margin:12px 0 0;padding:0 4px 2px}
.pm-stage .m-flow li{display:flex;align-items:center;gap:7px;font-size:12px;color:rgb(26 23 48/.42);transition:color .45s var(--ease)}
.pm-stage .m-flow li>span{display:grid;place-items:center;flex-shrink:0;width:16px;height:16px;box-shadow:inset 0 0 0 1px rgb(26 23 48/.24);color:transparent;
  transition:background-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.pm-stage .m-flow li[data-state=active]{color:var(--ink)}
.pm-stage .m-flow li[data-state=active]>span{box-shadow:inset 0 0 0 1.5px var(--brand)}
.pm-stage .m-flow li[data-state=done]{color:var(--body)}
.pm-stage .m-flow li[data-state=done]>span{background:var(--brand);color:#fff;box-shadow:none}
/* Speech (the fifth product): TTS reads a sentence aloud, its bars lighting in turn; STT hears a
   meeting (the bars move like a live signal) and writes its lines in. */
.pm-stage .m-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pm-stage .m-two .m-thumb{width:calc((100% - 6px) / 2)}
.pm-stage .m-speech{display:grid;margin-top:12px}
.pm-stage .m-pane{grid-area:1/1;display:grid;gap:10px;align-content:start;transition:opacity .4s var(--ease),transform .5s var(--spring)}
.pm-stage .m-speech[data-mode=tts] .m-pane-stt,.pm-stage .m-speech[data-mode=stt] .m-pane-tts{opacity:0;transform:translateY(6px)}
.pm-stage .m-pane-tts .m-source{-webkit-mask-image:linear-gradient(270deg,#000 calc(var(--pm-wipe) - 12%),transparent var(--pm-wipe));mask-image:linear-gradient(270deg,#000 calc(var(--pm-wipe) - 12%),transparent var(--pm-wipe))}
.pm-stage .m-pane-tts .m-source.is-in{animation:pm-wipe 1.3s var(--ease) both}
.pm-stage .m-player{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 12px 6px 6px;background:rgb(26 23 48/.04);box-shadow:inset 0 0 0 1px rgb(26 23 48/.05)}
.pm-stage .m-play{display:grid;place-items:center;width:32px;height:32px;background:var(--brand);color:#fff}
.pm-stage .m-play svg{grid-area:1/1;transition:opacity .25s var(--ease)}
.pm-stage .m-play svg+svg,.pm-stage .m-speech[data-stage="1"] .m-pane-tts .m-play svg:first-child{opacity:0}
.pm-stage .m-speech[data-stage="1"] .m-pane-tts .m-play svg+svg{opacity:1}
.pm-stage .m-track{display:flex;align-items:center;gap:2px;height:26px}
.pm-stage .m-track i{flex:1;height:calc(var(--h) * 100%);background:rgb(26 23 48/.18)}
.pm-stage .m-speech[data-stage="1"] .m-pane-tts .m-track i{animation:pm-lit .25s var(--ease) calc(var(--j) * 85ms) both}
@keyframes pm-lit{to{background:var(--brand)}}
.pm-stage .m-player .pm-swap{min-width:68px;font-size:12px;color:var(--muted);text-align:right}
.pm-stage .m-rec .m-play{background:#FFDFFF;color:var(--brand)}
.pm-stage .m-speech:is([data-stage="2"],[data-stage="3"]) .m-rec .m-play{animation:pm-ring 1.6s ease-in-out infinite}
.pm-stage .m-speech[data-mode=stt] .m-rec .m-track i{background:rgb(63 25 147/.5);animation:pm-wave 1s ease-in-out calc(var(--j) * -73ms) infinite alternate}
.pm-stage .m-speech[data-stage="4"] .m-rec .m-track i{animation:none;background:rgb(63 25 147/.3)}
.pm-stage .m-lines{display:grid;gap:4px;list-style:none;margin:0;padding:0}
.pm-stage .m-lines li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 8px;padding:5px 12px;background:#fff;
  box-shadow:0 0 0 1px rgb(26 23 48/.06),0 1px 2px rgb(26 23 48/.06);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .6s var(--spring)}
.pm-stage .m-lines li.is-on{opacity:1;transform:none}
.pm-stage .m-lines span{font-size:12px;font-weight:600;color:var(--brand)}
.pm-stage .m-lines small{font-size:11px;color:var(--muted)}
.pm-stage .m-lines p[lang=ar]{grid-column:1/-1;font-size:14px;line-height:1.7}
@media (prefers-reduced-motion:reduce){
 .pm-stage *,.pm-stage *::before{transition:none!important;animation:none!important}
 .pm-copy.is-on .pm-title .w>span,.pm-copy:not(.is-on)>*{transform:none}
 .pm-copy:not(.is-on){opacity:0}
}
@media (prefers-reduced-transparency:reduce){.pm-moment{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ===== Industry word (9 October 2026) =============================================================
   The words slide up through a window that clips them (overflow:clip, which also holds the words
   while GSAP moves them on their own layers; a one-axis clip or a clip-path did not). Its width
   follows each word over half a second, so a long word ("Telecommunications") used to be cut at
   the side while it caught up: the clip now reaches far to the right through padding, cancelled by
   an equal negative margin, so the layout is unchanged. The window takes no pointer, so the photos
   beside it still hold the word on hover. Room below keeps descenders whole (g, y). */
.overflow-clip.items-start[class~="md:min-h-[72px]"]{overflow:clip;box-sizing:content-box;padding:0 100vw 4px 0;margin-right:-100vw;pointer-events:none}
@media (min-width:768px){.overflow-clip.items-start[class~="md:min-h-[72px]"]{padding-bottom:6px}}

/* Bar above the navbar: the announcement's logo in the sentence (HUMAIN's since 13 October 2026, a
   capitals wordmark, so it is set at the text's cap height on the baseline), and the link a word space
   after it (10 October 2026). */
.aai-ann-logo{display:inline-block;height:.7em;width:auto;vertical-align:0;margin:0 .08em}
[class*="max-w-[1472px]"]>.flex.flex-wrap.gap-x-3.gap-y-1{column-gap:.3em!important}
html[data-ann-off] [role="region"][aria-label="\625 \639 \644 \627 \646 "]{display:none!important}

/* ===== Phones: lighter scrolling (10 October 2026) ================================================
   Feedback: the homepage was choppy on phones, with blank screens. Measured on an emulated phone at
   a quarter of the CPU, most of each frame went to forced style and layout. Phones now get:
   - the guide lines fixed to the screen and drawn plainly: the page-tall line box blended with
     "difference" made a composited layer the whole height of the page, the kind iOS drops tiles
     for. Mid-grey at 22% gives the same light grey on white and near-black on black. They fade out
     while the collage is on screen instead of being cut around its photos (clone-support.js);
   - no sheet reveals between sections (clip-path animated on scroll repaints the whole section).
   Everywhere, --guide-mask no longer inherits, so updating it restyles the lines alone and not
   every element on the page. */
@property --guide-mask{syntax:"*";inherits:false}

@media (prefers-reduced-motion:reduce){.bv-llm__pane{transition:none}.bv-llm__bar{display:none}.bv-llm__bars i,.bv-llm__field i{transition:none}.bv-llm__docs b,.bv-llm__docs i,.bv-llm__page[dir="rtl"]{animation:none!important}.bv-llm__docs b{transform:none}}

/* Overall audit (12 October 2026), phones. The cards' "+" button had a column of its own beside the
   whole heading, so a title got 232 px of the card's 292 (the Arabic benchmark title ran to four lines
   at 34 px). The button now sits in the top corner, beside the logo, and the heading takes the full
   width. Small links get a tap area of about 40 px through an invisible ::before. */
@media (max-width:639px){
 .aai-bento__top{display:block}
 .aai-bento__top>.aai-bento__open{position:absolute;top:24px;inset-inline-end:24px}
 .aai-bento__head>:first-child{margin-inline-end:52px}
}
@media (max-width:767px){
 .aai-partner__link,header a.relative.w-max[href="/ar/"],[class*="max-w-[1472px]"] .flex.flex-wrap.gap-x-3.gap-y-1>a{position:relative}
 .aai-partner__link::before,header a.relative.w-max[href="/ar/"]::before,[class*="max-w-[1472px]"] .flex.flex-wrap.gap-x-3.gap-y-1>a::before{content:"";position:absolute;inset:-12px -6px}
 [class*="max-w-[1472px]"] button.absolute.right-3::before{content:"";position:absolute;inset:-8px}
}

/* Safari and every iOS browser (WebKit), 12 October 2026 (the user's note: "lagging and choppy on
   Safari"). WebKit redraws a backdrop blur on every frame in which anything under it moves, so the fixed
   headers (over the scrolling page, and over the hero's moving scene), the industry captions and the
   frosted materials in the product demos each cost a full blur per frame while scrolling. There they take
   the solid fills already used for reduced transparency, and the footer wordmark's code rain drops its
   overlay blend. clone-support.js marks the root (data-webkit). */
html[data-webkit]{--mat-blur:none}
html[data-webkit] header>div[class*="bg-(--nav-background)"]::before,html[data-webkit] header [class*="bg-(--nav-dropdown-background)"]{background:var(--nav-solid)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-webkit] header.pg-header::before,html[data-webkit] header .pg-flyouts{background:#FBFBFD;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-webkit] header.pg-header.is-dark::before{background:#161617}
html[data-webkit] .pg-header{-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-webkit] .aai-ever__chars{mix-blend-mode:normal;opacity:.55}
/* Touch screens: the card is CSS-only. Characters are filled once; the spotlight is the glow layer moving on a GPU transform. */
@media (hover:none){.aai-ever{--x:50%;--y:50%}.aai-ever__glow{inset:-45%;-webkit-mask-image:radial-gradient(230px at 50% 50%,#fff 0 30%,rgb(255 255 255/.6) 60%,transparent 90%);mask-image:radial-gradient(230px at 50% 50%,#fff 0 30%,rgb(255 255 255/.6) 60%,transparent 90%);animation:aai-ever-drift 11s ease-in-out infinite alternate;will-change:transform}@keyframes aai-ever-drift{0%{transform:translate(-9%,-7%)}35%{transform:translate(6%,-4%)}70%{transform:translate(7%,6%)}100%{transform:translate(-6%,7%)}}.aai-ever.is-touch .aai-ever__chars{position:absolute;inset:0}.aai-ever.is-touch .aai-ever__chars p{position:absolute;inset:0;opacity:0;animation:aai-ever-shimmer 2.4s linear infinite;will-change:opacity}.aai-ever.is-touch .aai-ever__chars p:nth-child(2){animation-delay:-.8s}.aai-ever.is-touch .aai-ever__chars p:nth-child(3){animation-delay:-1.6s}@keyframes aai-ever-shimmer{0%{opacity:0}20%{opacity:1}45%{opacity:1}65%{opacity:0}100%{opacity:0}}}
html[data-webkit] :is(.bv-dep__org,.aai-at__caption,.bv-ann__foot){background:#F6F5F9}
html[data-webkit] .aai-at__window{background:#fff}
html[data-webkit] .bv-flow ol{background:#141318}
html[data-webkit] .aai-morph__cap{background:rgb(12 7 22/.74);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-webkit] .aai-ever__chars{mix-blend-mode:normal}
html[data-webkit] .aai-ever__chars p{color:rgb(255 255 255/.3)}

/* ===== The models screen (12 October 2026, the user's note) ======================================
   The stack in the middle at the top and, below it, Speech, LLM and Vision side by side, each with its
   own logo, eyebrow, title, line and button. The three are stages of their own that show together (ef(),
   audit_fixes.py); the scene keeps the stack in the middle (its side tween stops at .483). Each stage's
   column spans the grid, is narrowed and moved sideways by a third; right to left the order mirrors, so
   it still reads Speech, LLM, Vision. From 1450px the stack would fill the middle of the screen, so while
   the trio is on (clone-support.js marks the hero, data-aai-trio) the canvas layer is lifted and scaled
   down and the columns sit lower. Phones keep the logo, the title and the button's arrow. */
.PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])){--trio-w:min(28vw,380px);--trio-gap:min(31vw,430px);--trio-y:0px}
.PullApartContent:has(.RichText.header4-regular[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "]){--trio-x:calc(-1 * var(--trio-gap))}
.PullApartContent:has(.RichText.header4-regular[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "]){--trio-x:0px}
.PullApartContent:has(.RichText.header4-regular[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]){--trio-x:var(--trio-gap)}
[dir=rtl] .PullApartContent:has(.RichText.header4-regular[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "]){--trio-x:var(--trio-gap)}
[dir=rtl] .PullApartContent:has(.RichText.header4-regular[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]){--trio-x:calc(-1 * var(--trio-gap))}
.PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div[class*="col-span"]{grid-column:1/-1!important;justify-self:center!important;width:var(--trio-w)!important;max-width:none!important;
  translate:var(--trio-x) var(--trio-y);container:aai-trio/inline-size;text-align:center!important}
.PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div[class*="col-span"] :is(.RichText,h2,.text-center,[class*="text-left"],[class*="text-right"],.AnimatedText div){text-align:center!important}
.PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div[class*="col-span"] :is(.items-start,[class*="flex-col"]){align-items:center!important}
.PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div[class*="col-span"] [class*="w-fit"]{margin-inline:auto!important}
.PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div>h2{justify-content:center!important;flex-wrap:wrap}
.PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div>[class*="__category"]::before{content:"";display:block;flex:0 0 100%;height:clamp(18px,2.4vw,30px);margin-bottom:clamp(14px,2vw,26px);
  background:var(--logo) center/contain no-repeat!important;transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.PullApartContent .RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])::before{white-space:normal;text-wrap:balance;font-size:min(1.25em,9cqi)!important}
.HomeHero .parallaxOut>div.z-1{transition-property:opacity,transform;transition-duration:1s,.9s;transition-timing-function:ease-out,cubic-bezier(.16,1,.3,1)}
/* From 768px (12 October 2026, the user's sketch, then "make all on the same line"): a smaller stack in
   the middle, centred 30% down the screen and sized by clone-support.js (fit: --trio-s, --trio-ty,
   --trio-half, --trio-hh); under it one row of three equal columns, Speech, LLM, Vision (right to left,
   Speech on the right), their tops level, spread evenly between the page's guide lines (which the scene
   draws about 8.7% in from each side, and never less than (100vw - 1604px) / 2) with 24px clear of
   each. The three take one title size, set by their width (never under 19px), and their eyebrows,
   titles and lines take the tallest of the three (align), so the buttons line up. The parallax layer
   that holds the columns sits 13.5dvh lower below 1450px and 39px lower from there, which the top
   allows for. */
@media (min-width:768px){
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])){--inset:max(8.7vw,calc((100vw - 1604px) / 2));--stack-y:30dvh;--layer-y:13.5dvh;
   --third:calc((100vw - 2 * var(--inset) - 48px) / 3);--side-w:min(calc(var(--third) - 32px),360px);--col:1}
 .PullApartContent:has(.RichText.header4-regular[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "]){--col:0}
 .PullApartContent:has(.RichText.header4-regular[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]){--col:2}
 [dir=rtl] .PullApartContent:has(.RichText.header4-regular[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "]){--col:2}
 [dir=rtl] .PullApartContent:has(.RichText.header4-regular[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]){--col:0}
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div[class*="col-span"]{position:absolute!important;grid-column:auto!important;margin:0!important;
   top:calc(var(--stack-y) + var(--trio-hh,9dvh) + 5dvh - var(--layer-y));left:calc(var(--inset) + 24px + var(--third) * (var(--col) + .5));right:auto;
   translate:-50% 0;width:var(--side-w)!important}
 .PullApartContent .RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])::before{font-size:max(19px,min(1.25em,calc(var(--side-w) * .09)))!important}
 .HomeHero[data-aai-trio] .parallaxOut>div.z-1{transform:translateY(var(--trio-ty,-12dvh)) scale(var(--trio-s,.72))}
 /* Narrow columns (tablets upright, under 200px): the eyebrow keeps its mark, the line is set smaller
    and the button is the phones' square with the arrow (its label stays for screen readers), since the
    labels would cross the guide line. */
 @container aai-trio (max-width:199px){
  .PullApartContent [class*="__category"]>div{display:none!important}
  .PullApartContent .RichText.body1{font-size:14px!important;line-height:1.45!important}
  .PullApartContent .FlatCta{width:44px!important;min-width:44px;padding:0!important;justify-content:center}
  .PullApartContent .FlatCta>div{padding:0!important;gap:0!important;justify-content:center}
  .PullApartContent .FlatCta span.cta{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 }
 /* The canvas carries the scene's black; scaled down, the layer behind it must be black too. It turns
    back only after the canvas has grown again, so nothing flashes on the way up. */
 .HomeHero .parallaxOut{transition:translate .9s cubic-bezier(.16,1,.3,1),background-color 0s linear 1s}
 .HomeHero[data-aai-trio] .parallaxOut{background-color:#000;transition:translate .9s cubic-bezier(.16,1,.3,1),background-color 0s}
}
@media (min-width:1450px){
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])){--layer-y:39px}
}
/* Phones (12 October 2026, the user's note on the cramped columns): each column is its logo, its title
   set one word to a line ("Our / speech / models"; Korean too, at its spaces; Arabic, Spanish and Chinese
   balance their lines), and a square button with the arrow (the label stays for screen readers), on one
   even rhythm, the block set a little lower so it sits in the space under the stack. */
@media (max-width:767px){
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])){--trio-w:30vw;--trio-gap:31.5vw;--trio-y:4dvh}
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div[class*="col-span"]{gap:0!important}
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div>[class*="__category"]>div,
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])) .RichText.body1{display:none!important}
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div>[class*="__category"]{margin:0 0 16px!important;padding:0!important}
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "]))>div>[class*="__category"]::before{height:16px;margin-bottom:0}
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])) .flex-col:has(>.RichText.header4-regular){margin:0 0 22px!important;gap:0!important}
 .PullApartContent .RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])::before{font-size:17px!important;line-height:1.14;letter-spacing:-.01em;margin-inline:auto}
 html:is(:lang(en),:lang(ko)) .PullApartContent .RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])::before{width:min-content;word-break:keep-all}
 html:lang(zh) .PullApartContent .RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])::before{word-break:keep-all;font-size:15px!important}
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])) .FlatCta{width:44px!important;min-width:44px;padding:0!important;justify-content:center}
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])) .FlatCta>div{padding:0!important;gap:0!important;justify-content:center}
 .PullApartContent:has(.RichText.header4-regular:is([aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \643 \644 \627 \645 \64a \629 "],[aria-label="\627 \644 \646 \645 \627 \630 \62c \20 \627 \644 \644 \63a \648 \64a \629 \20 \627 \644 \643 \628 \64a \631 \629 "],[aria-label="\646 \645 \627 \630 \62c \20 \627 \644 \645 \631 \626 \64a \627 \62a "])) .FlatCta span.cta{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Hero headline over the film (12 October 2026, the mobile design audit): some of the montage's frames
   are light grey interface shots or carry large lettering right behind "Sovereign AI. Enterprise-wide
   secure impact.", and white type over them was hard to read. A soft dark ellipse sits under the
   headline block, centred on it and above the film (which the scene draws in its canvas; the ellipse stays
   inside the film's inset frame at every width), and the type takes a soft shadow. */
.HomeHero section:has(>div>h1){isolation:isolate}
.HomeHero section:has(>div>h1)>div:has(>h1){position:relative}
.HomeHero section:has(>div>h1)>div:has(>h1)::before{content:"";position:absolute;inset:-72px -48px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgb(0 0 0/.62),rgb(0 0 0/.38) 55%,rgb(0 0 0/0))}
@media (max-width:767px){.HomeHero section:has(>div>h1)>div:has(>h1)::before{inset:-64px -4px}}
.HomeHero section:has(>div>h1) :is(h1,.HeroSubtext){text-shadow:0 1px 2px rgb(0 0 0/.25),0 2px 28px rgb(0 0 0/.45)}

/* Off screen, still (12 October 2026): a story card or the logo strip marked off screen by
   clone-support.js pauses every animation in it, so nothing out of sight is restyled each frame. */
.aai-off,.aai-off *,.aai-off::before,.aai-off::after,.aai-off *::before,.aai-off *::after{animation-play-state:paused!important}

/* 19 October 2026: WebKit desktop. clone-support.js adds .is-shimmer there: three character layers crossfade in CSS
   (the text is never refilled, Safari's layout of the card is too slow for that); the glow keeps following the pointer. */
.aai-ever.is-shimmer .aai-ever__chars{position:absolute;inset:0}
.aai-ever.is-shimmer .aai-ever__chars p{position:absolute;inset:0;opacity:0;animation:aai-ever-shimmer 2.4s linear infinite;will-change:opacity}
.aai-ever.is-shimmer .aai-ever__chars p:nth-child(2){animation-delay:-.8s}
.aai-ever.is-shimmer .aai-ever__chars p:nth-child(3){animation-delay:-1.6s}
@keyframes aai-ever-shimmer{0%{opacity:0}20%{opacity:1}45%{opacity:1}65%{opacity:0}100%{opacity:0}}