/* ==========================================================================
   Metrix AI landing page  |  assets/css/mxai.css
   --------------------------------------------------------------------------
   Scope: everything lives under #mxai-page. Classes are prefixed mxai-,
   custom properties are prefixed --mxai-. Nothing here touches html, body or
   bare elements outside the wrapper, so it can be enqueued inside any theme.
   ========================================================================== */

/* Montserrat under a name of our own. The files are Google Fonts' (Montserrat v31, one variable file per script,
   declared at the three weights the page uses: 100, 400, 700), but the family is not called "Montserrat" here,
   because a host page may define that name itself, and a later definition wins. metrix.bg does: its own
   "Montserrat" maps weight 400 to the Thin file, and for visitors that rule came after Google's, so all regular
   text on this page was drawn hairline thin (found on 5 October 2026, on a visitor's laptop; logged in, the
   order was the other way round and the text looked right). Nothing on a host page can redefine this name.
   The rules are a copy of fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700&display=swap with the
   family renamed and the Vietnamese subset left out; a file is only fetched when its characters are used. */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic-ext */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* cyrillic */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic-ext */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* cyrillic */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic-ext */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* cyrillic */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: "mxai-montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */

/* A stand-in for Montserrat while it loads: Arial stretched to Montserrat's measure, so the text does not
   jump when the real face arrives (the family name is ours, nothing else on the host page can pick it up). */
@font-face {
  font-family: "mxai-montserrat-fallback";
  src: local("Arial");
  size-adjust: 112.83%;
  ascent-override: 85.79%;
  descent-override: 22.25%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (the only place colors, sizes and curves are defined)
   -------------------------------------------------------------------------- */
#mxai-page {
  /* Typography */
  /* Montserrat, the face of metrix.bg (client request, 5 October 2026: bold for headings, regular for the rest),
     declared above as "mxai-montserrat" at three weights: 100, 400, 700. Every weight the rules below ask for
     lands on one of the last two: 400 and 500 are drawn Regular, 600 to 800 Bold. */
  --mxai-font: "mxai-montserrat", "mxai-montserrat-fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mxai-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mxai-fs-display: clamp(2.35rem, .6rem + 5.1vw, 4.75rem);
  --mxai-fs-h2: clamp(2rem, 1.25rem + 2.7vw, 3.35rem);
  --mxai-fs-h3: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  --mxai-fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --mxai-fs-body: 1rem;
  --mxai-fs-sm: .9rem;
  --mxai-fs-xs: .78rem;
  --mxai-lh-tight: 1.04;
  --mxai-lh-snug: 1.2;
  --mxai-lh-body: 1.6;
  --mxai-ls-tight: -.035em;
  --mxai-ls-snug: -.02em;
  --mxai-ls-wide: .14em;

  /* Colors: surfaces */
  --mxai-bg: #050506;
  --mxai-bg-rgb: 5, 5, 6;
  --mxai-bg-deep: #050506;
  --mxai-bg-hero-mid: #0c0c0f;
  --mxai-bg-hero-end: #0e0e12;
  --mxai-surface: #101012;
  --mxai-surface-2: #17171a;
  --mxai-surface-screen: #0b0b0d;
  --mxai-surface-glass: rgba(14, 14, 17, .8);
  --mxai-bezel: #0b0b0f;
  --mxai-bezel-edge: #2a2833;

  /* Colors: lines */
  --mxai-border: rgba(var(--mxai-white-rgb), .10);
  --mxai-border-soft: rgba(var(--mxai-white-rgb), .06);
  --mxai-border-strong: rgba(var(--mxai-white-rgb), .16);

  /* Colors: text */
  --mxai-text: #f4f2f8;
  --mxai-text-2: #ded9ea;
  --mxai-muted: #9a94ab;
  --mxai-muted-2: #7d7790;
  --mxai-on-accent: #120e1e;

  /* Colors: the white scene (integrations). Every ink colour is AA or better on the paper */
  --mxai-paper: #ffffff;
  --mxai-ink: #0c0a14;
  --mxai-ink-rgb: 12, 10, 20;
  --mxai-ink-2: #4a4560;
  --mxai-violet-ink: #af94c9; /* the brand purple itself (client request: no darker purple anywhere) */
  --mxai-violet-ink-rgb: 175, 148, 201;
  --mxai-blue-ink: #2b62d6;
  --mxai-blue-ink-rgb: 43, 98, 214;
  --mxai-rose-ink: #b3368c;
  --mxai-rose-ink-rgb: 179, 54, 140;
  --mxai-amber-ink: #a65a10;
  --mxai-amber-ink-rgb: 166, 90, 16;

  /* Colors: brand */
  --mxai-accent: #af94c9;
  --mxai-accent-light: #c9b8dd;
  --mxai-accent-lighter: #e6dcf3;
  --mxai-accent-hot: #f6f0ff;
  --mxai-accent-hot-rgb: 246, 240, 255;
  --mxai-accent-deep: #af94c9;
  --mxai-accent-deeper: #3a2560;
  --mxai-accent-rgb: 175, 148, 201;
  --mxai-accent-deep-rgb: 175, 148, 201;
  --mxai-gold: #e0a356;
  --mxai-blue: #7aa7f5;
  --mxai-blue-rgb: 122, 167, 245;
  --mxai-rose: #d18bc0;
  --mxai-rose-rgb: 209, 139, 192;
  --mxai-coral: #e37f7c;
  --mxai-coral-rgb: 227, 127, 124;
  --mxai-chrome-hi: #f6f5fb;
  --mxai-chrome-mid: #9a96a8;
  --mxai-chrome-lo: #3f3c4b;
  --mxai-brand-meta: #0a7cff;
  --mxai-brand-google-blue: #4285f4;
  --mxai-brand-google-yellow: #fbbc04;
  --mxai-brand-google-green: #34a853;
  --mxai-brand-tiktok: #fe2c55;
  --mxai-brand-ga: #f9ab00;
  --mxai-green: #a8cf6b;
  --mxai-red: #e5717a;
  --mxai-white: #ffffff;
  --mxai-white-rgb: 255, 255, 255;
  --mxai-black-rgb: 0, 0, 0;
  --mxai-glass-rgb: 14, 14, 17;
  --mxai-green-rgb: 168, 207, 107;
  --mxai-red-rgb: 229, 113, 122;
  --mxai-gold-rgb: 224, 163, 86;
  --mxai-accent-mid: #af94c9;
  --mxai-accent-mid-rgb: 175, 148, 201;
  --mxai-accent-deeper-rgb: 30, 20, 54;
  --mxai-bezel-hi: #17161c;
  --mxai-bezel-cam: #2b2a33;
  --mxai-bezel-cam-ring: #121116;
  --mxai-base-hi: #2b2934;
  --mxai-base-mid: #1a1921;
  --mxai-base-lo: #111015;
  --mxai-base-lip: #0d0c11;

  /* Gradients and glows */
  --mxai-gradient-text: linear-gradient(94deg, var(--mxai-accent-lighter) 0%, var(--mxai-accent) 48%, var(--mxai-accent-mid) 100%);
  --mxai-gradient-text-paper: linear-gradient(94deg, var(--mxai-accent) 0%, var(--mxai-accent-mid) 42%, var(--mxai-accent-deep) 100%);
  --mxai-gradient-btn: linear-gradient(180deg, var(--mxai-accent-light) 0%, var(--mxai-accent) 100%);
  --mxai-gradient-hero: linear-gradient(180deg, var(--mxai-bg-deep) 0%, var(--mxai-bg-hero-mid) 45%, var(--mxai-bg-hero-end) 78%, var(--mxai-bg) 100%);
  --mxai-glow-hero: none;
  /* ambient light over the whole page: two large soft lights and a small one per two screens, plus a faint veil */
  --mxai-ambient:
    radial-gradient(ellipse 54vw 48vh at 22% 17%, rgba(var(--mxai-accent-rgb), .22) 0%, rgba(var(--mxai-accent-deep-rgb), .11) 36%, transparent 72%),
    radial-gradient(ellipse 50vw 46vh at 82% 61%, rgba(var(--mxai-accent-rgb), .17) 0%, rgba(var(--mxai-accent-deep-rgb), .09) 38%, transparent 72%),
    radial-gradient(ellipse 34vw 28vh at 46% 91%, rgba(var(--mxai-accent-deep-rgb), .13) 0%, transparent 70%),
    linear-gradient(rgba(var(--mxai-accent-deep-rgb), .045), rgba(var(--mxai-accent-deep-rgb), .045));
  --mxai-glow-panel: radial-gradient(80% 70% at 50% 0%, rgba(var(--mxai-accent-deep-rgb), .34) 0%, rgba(var(--mxai-accent-deep-rgb), 0) 70%);
  --mxai-grid-line: rgba(var(--mxai-white-rgb), .03);
  --mxai-mask-on: #000;

  /* Shadows */
  --mxai-shadow-card: 0 30px 80px rgba(var(--mxai-black-rgb), .5), 0 2px 0 rgba(var(--mxai-white-rgb), .03) inset;
  --mxai-shadow-frame: 0 40px 100px rgba(var(--mxai-black-rgb), .55), 0 0 60px rgba(var(--mxai-accent-deep-rgb), .16);
  --mxai-shadow-btn: 0 10px 30px rgba(var(--mxai-accent-deep-rgb), .35), 0 1px 0 rgba(var(--mxai-white-rgb), .35) inset;
  --mxai-shadow-btn-hover: 0 14px 40px rgba(var(--mxai-accent-deep-rgb), .5), 0 1px 0 rgba(var(--mxai-white-rgb), .45) inset;
  --mxai-shadow-focus: 0 0 0 4px rgba(var(--mxai-accent-rgb), .22);
  --mxai-shadow-field: 0 20px 60px rgba(var(--mxai-black-rgb), .45), 0 1px 0 rgba(var(--mxai-white-rgb), .06) inset;

  /* Spacing */
  --mxai-space-1: .25rem;
  --mxai-space-2: .5rem;
  --mxai-space-3: .75rem;
  --mxai-space-4: 1rem;
  --mxai-space-5: 1.5rem;
  --mxai-space-6: 2rem;
  --mxai-space-7: 3rem;
  --mxai-space-8: 4rem;
  --mxai-space-9: 6rem;
  --mxai-section-pad: clamp(5rem, 9vw, 8.5rem);
  --mxai-container: 1200px;
  --mxai-gutter: clamp(1.25rem, 5vw, 3rem);

  /* Radii */
  --mxai-r-sm: 8px;
  --mxai-r-md: 14px;
  --mxai-r-lg: 22px;
  --mxai-r-xl: 30px;
  --mxai-r-pill: 999px;

  /* Motion */
  --mxai-ease: cubic-bezier(.22, 1, .36, 1);
  --mxai-ease-io: cubic-bezier(.65, 0, .35, 1);
  --mxai-dur-fast: .2s;
  --mxai-dur: .45s;
  --mxai-dur-slow: .8s;
  --mxai-t0: .95s; /* length of the intro curtain: every load-in animation of the hero starts after it */
  --mxai-intro-bg: #000000; /* the intro curtain: a black screen with white letters (client request) */
  --mxai-intro-ink: #ffffff;
  --mxai-halo: 150px;
  --mxai-sticky-top: 0px;
  --mxai-lap: clamp(9rem, 23vh, 12rem); /* how far the next section, as glass, lies over the foot of the hero */
  /* The host theme, measured and not designed: the script at the top of the wrapper writes these two on the
     element (see "0. host theme" in mxai.js). The values here are the ones of the standalone shell. */
  --mxai-host-cover: 0px;   /* how much of the top of the page lies under a fixed theme header */
  --mxai-host-top: 2.75rem; /* where the page starts on screen: under everything the theme puts above it */
}

/* --------------------------------------------------------------------------
   2. SCOPED BASELINE (defensive against the parent theme, never global)
   -------------------------------------------------------------------------- */
/* A section (or a block inside one, like the URL field in the hero) that is switched off for now: add
   data-mxai-off to it and it is not shown; its markup, copy and styles stay in place, so removing the
   attribute brings it back as it was. */
#mxai-page [data-mxai-off] { display: none !important; }
#mxai-page {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  /* the strip of the page that a fixed theme header lies over, in the colour of the first section (it shows
     only when the page is pulled down past its top) */
  border-top: var(--mxai-host-cover) solid var(--mxai-paper);
  overflow-x: clip;
  overflow-y: visible;
  background: var(--mxai-bg);
  color: var(--mxai-text-2);
  font-family: var(--mxai-font);
  /* Montserrat carries Bulgarian letterforms that switch on under lang="bg". metrix.bg is served as en-US and
     shows the international Cyrillic, so they are switched off here: the page looks the same in this shell
     and inside the site. font-feature-settings is inherited, so this one line covers everything. */
  font-feature-settings: "locl" 0;
  font-size: var(--mxai-fs-body);
  font-weight: 400;
  line-height: var(--mxai-lh-body);
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#mxai-page *,
#mxai-page *::before,
#mxai-page *::after { box-sizing: border-box; }

#mxai-page h1, #mxai-page h2, #mxai-page h3, #mxai-page h4,
#mxai-page p, #mxai-page ul, #mxai-page ol, #mxai-page li,
#mxai-page figure, #mxai-page figcaption, #mxai-page fieldset, #mxai-page legend {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--mxai-font);
}
#mxai-page ul, #mxai-page ol { list-style: none; }
#mxai-page img, #mxai-page svg { display: block; max-width: 100%; border: 0; }
#mxai-page img { height: auto; }
#mxai-page a { color: inherit; text-decoration: none; }
#mxai-page button, #mxai-page input {
  margin: 0;
  font-family: var(--mxai-font);
  font-feature-settings: inherit; /* form controls do not inherit it by themselves (see "locl" above) */
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
#mxai-page button { cursor: pointer; background: none; border: 0; padding: 0; }
/* a host theme's own button rules must not reach ours: Hello Elementor (metrix.bg) sets nowrap and no text
   selection on every button, and the questions of the FAQ, which are buttons, ran out of a phone screen */
#mxai-page button { white-space: normal; -webkit-user-select: auto; user-select: auto; }
#mxai-page :focus { outline: none; }
#mxai-page :focus-visible {
  outline: 2px solid var(--mxai-accent);
  outline-offset: 3px;
  border-radius: var(--mxai-r-sm);
}
#mxai-page ::selection { background: rgba(var(--mxai-accent-rgb), .35); color: var(--mxai-white); }

#mxai-page .mxai-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#mxai-page .mxai-icon { width: 1.125em; height: 1.125em; flex: 0 0 auto; }
#mxai-page .mxai-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES AND TYPOGRAPHY
   -------------------------------------------------------------------------- */
#mxai-page .mxai-container {
  width: 100%;
  max-width: calc(var(--mxai-container) + 2 * var(--mxai-gutter));
  margin: 0 auto;
  padding: 0 var(--mxai-gutter);
}
#mxai-page .mxai-section {
  position: relative;
  padding: var(--mxai-section-pad) 0;
  scroll-margin-top: 5rem;
}

#mxai-page .mxai-h2 {
  margin: 0 0 var(--mxai-space-5);
  color: var(--mxai-text);
  font-size: var(--mxai-fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--mxai-ls-tight);
  text-wrap: balance;
}
#mxai-page .mxai-h2--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 18ch; }
#mxai-page .mxai-lead {
  margin: 0;
  max-width: 56ch;
  color: var(--mxai-muted);
  font-size: var(--mxai-fs-lead);
  line-height: 1.55;
}
#mxai-page .mxai-lead--center { margin-left: auto; margin-right: auto; text-align: center; }
#mxai-page .mxai-eyebrow {
  margin: 0 0 var(--mxai-space-4);
  color: var(--mxai-accent);
  font-size: var(--mxai-fs-xs);
  font-weight: 600;
  letter-spacing: var(--mxai-ls-wide);
  line-height: 1.4;
  text-transform: uppercase;
}
#mxai-page .mxai-eyebrow--center { text-align: center; }

#mxai-page .mxai-gradient-text {
  background: var(--mxai-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Pill badge */
#mxai-page .mxai-badge {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin: 0 0 var(--mxai-space-5);
  padding: .5em 1em .5em .85em;
  border: 1px solid rgba(var(--mxai-accent-rgb), .3);
  border-radius: var(--mxai-r-pill);
  background: rgba(var(--mxai-accent-rgb), .08);
  color: var(--mxai-accent-lighter);
  font-size: var(--mxai-fs-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  box-shadow: 0 0 30px rgba(var(--mxai-accent-deep-rgb), .25);
}
#mxai-page .mxai-badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mxai-accent);
  box-shadow: 0 0 10px var(--mxai-accent);
}

/* Buttons */
#mxai-page .mxai-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  height: 3.25rem;
  margin: 0;
  padding: 0 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--mxai-r-pill);
  font-family: var(--mxai-font);
  font-size: .97rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--mxai-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--mxai-dur-fast) var(--mxai-ease), box-shadow var(--mxai-dur) var(--mxai-ease), background-color var(--mxai-dur-fast) ease, border-color var(--mxai-dur-fast) ease, color var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-btn:focus-visible { outline-offset: 3px; }
/* The buttons are the buttons of metrix.bg (client, 5 October 2026, with three screenshots of the site: "this is
   how they must become"): a thick lavender rim, the upper left corner square and the other three round, the
   label in regular weight. At rest the button is empty: white with dark text on a light section, clear with
   white text on a dark one. Under the pointer, and with keyboard focus, it fills with the lavender and the
   label turns white. Primary and secondary look the same; the section says which ground it stands on with
   --mxai-btn-bg and --mxai-btn-ink (see the list of light sections below). */
#mxai-page .mxai-btn--primary,
#mxai-page .mxai-btn--secondary {
  border: 3px solid var(--mxai-accent);
  border-radius: 0 var(--mxai-r-pill) var(--mxai-r-pill) var(--mxai-r-pill);
  background: var(--mxai-btn-bg, transparent);
  color: var(--mxai-btn-ink, var(--mxai-white));
  font-weight: 400;
  letter-spacing: 0;
  box-shadow: none;
}
#mxai-page .mxai-btn--primary:hover,
#mxai-page .mxai-btn--primary:focus-visible,
#mxai-page .mxai-btn--secondary:hover,
#mxai-page .mxai-btn--secondary:focus-visible { background: var(--mxai-accent); color: var(--mxai-white); }
#mxai-page .mxai-btn--primary:disabled { opacity: .45; cursor: not-allowed; }
#mxai-page .mxai-btn--primary:disabled:hover { background: var(--mxai-btn-bg, transparent); color: var(--mxai-btn-ink, var(--mxai-white)); }
/* the light sections: there the empty button is white and its label dark */
#mxai-page .mxai-hero--helix,
#mxai-page .mxai-integrations,
#mxai-page .mxai-faq { --mxai-btn-bg: var(--mxai-paper); --mxai-btn-ink: var(--mxai-ink); }
#mxai-page .mxai-btn--ghost { background: transparent; color: var(--mxai-muted); }
#mxai-page .mxai-btn--ghost:hover { color: var(--mxai-text); background: rgba(var(--mxai-white-rgb), .05); }
#mxai-page .mxai-btn--sm { height: 2.75rem; padding: 0 1.25rem; font-size: .92rem; }
#mxai-page .mxai-btn--lg { height: 3.6rem; padding: 0 2.1rem; font-size: 1.03rem; }
#mxai-page .mxai-btn .mxai-icon { width: 1.05em; height: 1.05em; }

/* Reveal on scroll (opt-in, disabled without JS and with reduced motion) */
#mxai-page.mxai-js .mxai-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--mxai-dur-slow) var(--mxai-ease), transform var(--mxai-dur-slow) var(--mxai-ease);
  transition-delay: var(--mxai-delay, 0s);
}
#mxai-page.mxai-js .mxai-reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   3a. INTRO CURTAIN
   A black screen covers the page on load, the wordmark is typed letter by letter
   (the same typed-letter keyframes as the "how it works" headline), then the
   screen lifts like a curtain and the hero plays its own entrance under it.
   Pure CSS and time based: it never waits for JS, fonts or images.
   --mxai-t0 is the moment the lift starts; the hero's load-in delays add to it.
   -------------------------------------------------------------------------- */
@keyframes mxai-intro-lift { from { transform: none; visibility: visible; } to { transform: translateY(-101%); visibility: hidden; } }
#mxai-page .mxai-intro {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--mxai-intro-bg);
  animation: mxai-intro-lift .55s cubic-bezier(.76, 0, .24, 1) var(--mxai-t0) both;
}
#mxai-page .mxai-intro__word {
  margin: 0;
  color: var(--mxai-intro-ink);
  font-family: var(--mxai-font);
  /* Montserrat Thin in capitals, widely spaced: M E T R I X  A I (client request). The padding on the left
     matches the space the tracking leaves after the last letter, so the word stays centred. */
  padding-left: .42em;
  font-size: clamp(1.25rem, 4vw, 2.75rem);
  font-weight: 100;
  line-height: 1.1;
  letter-spacing: .42em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes mxai-intro-char {
  0% { visibility: hidden; box-shadow: none; }
  1%, 99% { visibility: visible; box-shadow: .07em 0 0 var(--mxai-accent-deep); }
  100% { visibility: visible; box-shadow: none; }
}
#mxai-page .mxai-intro__word span { visibility: hidden; animation: mxai-intro-char 65ms linear calc(.12s + var(--mxai-c) * 65ms) both; }

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
/* Load-in sequence (pure CSS, plays once when the page opens, never waits for JS):
   headline sharpens and rises line by line, then the lead, the URL field, the buttons,
   the arc ignites and the dashboard slides up into its peeking position.
   Text starts at opacity .01 rather than 0 so the largest paint is still counted on the first frame.
   fill-mode is "backwards": once an animation ends, hover and scroll styles are free again. */
@keyframes mxai-in-blur { from { opacity: .01; transform: translateY(.45em); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mxai-in-rise { from { opacity: .01; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes mxai-in-pop { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes mxai-in-field { from { opacity: 0; transform: scaleX(.72) scaleY(.9); } to { opacity: 1; transform: none; } }
@keyframes mxai-in-shine { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(130%) skewX(-18deg); } }
@keyframes mxai-in-dash { from { opacity: 0; transform: translateY(160px); } to { opacity: 1; transform: none; } }
@keyframes mxai-in-bg { from { opacity: 0; } to { opacity: 1; } }
#mxai-page .mxai-hero__anim { animation: mxai-in-rise .9s var(--mxai-ease) var(--mxai-t0) backwards; }
#mxai-page .mxai-hero__title.mxai-hero__anim,
#mxai-page .mxai-hero__cta.mxai-hero__anim { animation: none; }
#mxai-page .mxai-hero__title-line { animation: mxai-in-blur 1.05s var(--mxai-ease) calc(var(--mxai-t0) + .05s) backwards; }
#mxai-page .mxai-hero__title-line:nth-child(2) { animation-delay: calc(var(--mxai-t0) + .2s); }
#mxai-page .mxai-hero__lead.mxai-hero__anim { animation-delay: calc(var(--mxai-t0) + .38s); }
#mxai-page .mxai-analyzer.mxai-hero__anim { animation: mxai-in-field .95s var(--mxai-ease) calc(var(--mxai-t0) + .55s) backwards; }
#mxai-page .mxai-hero__cta .mxai-btn { animation: mxai-in-pop .75s var(--mxai-ease) calc(var(--mxai-t0) + .78s) backwards; }
#mxai-page .mxai-hero__cta .mxai-btn:nth-child(2) { animation-delay: calc(var(--mxai-t0) + .88s); }
#mxai-page .mxai-hero__bg { animation: mxai-in-bg 1.6s ease var(--mxai-t0) backwards; }
#mxai-page .mxai-dash-wrap { animation: mxai-in-dash 1.3s var(--mxai-ease) calc(var(--mxai-t0) + 1.05s) backwards; }
/* one pass of light across the URL field once it has landed */
#mxai-page .mxai-analyzer__field { overflow: hidden; }
#mxai-page .mxai-analyzer__field::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--mxai-white-rgb), .16) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  animation: mxai-in-shine 1.1s var(--mxai-ease-io) calc(var(--mxai-t0) + 1.35s) 1 both;
  pointer-events: none;
}
#mxai-page .mxai-hero {
  position: relative;
  padding: 0;
  background: var(--mxai-bg);
  overflow-x: clip;
}
#mxai-page .mxai-hero__stage {
  position: relative;
  isolation: isolate;
  padding: clamp(4.25rem, 9vh, 7rem) 0 clamp(3rem, 6vw, 5rem);
}
#mxai-page .mxai-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#mxai-page .mxai-hero__glow {
  position: absolute; inset: 0;
  background: var(--mxai-glow-hero);
}
#mxai-page .mxai-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--mxai-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mxai-grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 46% at 50% 6%, var(--mxai-mask-on) 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 46% at 50% 6%, var(--mxai-mask-on) 0%, transparent 100%);
  opacity: .7;
}
#mxai-page .mxai-hero__chart-wrap {
  position: relative;
  height: clamp(150px, 19vw, 250px);
  cursor: crosshair;
  touch-action: pan-y;
}
/* The lines draw themselves only once the dashboard is on screen */
#mxai-page.mxai-js .mxai-dash:not(.is-inview) .mxai-hero__chart-line,
#mxai-page.mxai-js .mxai-dash:not(.is-inview) .mxai-hero__chart-area { animation: none; }
#mxai-page .mxai-hero__chart {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
#mxai-page .mxai-hero__chart-ui {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-hero__chart-ui.is-active { opacity: 1; }
#mxai-page .mxai-hero__cursor {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--mxai-white-rgb), .55) 18%, rgba(var(--mxai-white-rgb), .55) 82%, transparent);
  transition: transform .12s ease-out;
}
#mxai-page .mxai-hero__dot {
  position: absolute; left: 0; top: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid var(--mxai-bg-deep);
  background: var(--mxai-white);
  box-shadow: 0 0 0 4px rgba(var(--mxai-white-rgb), .14), 0 0 18px rgba(var(--mxai-accent-rgb), .9);
  transition: transform .12s ease-out;
}
#mxai-page .mxai-hero__dot--secondary {
  background: var(--mxai-gold);
  box-shadow: 0 0 0 4px rgba(var(--mxai-gold-rgb), .16), 0 0 14px rgba(var(--mxai-gold-rgb), .7);
}
#mxai-page .mxai-hero__tip {
  position: absolute; left: 0; top: 0;
  display: grid; gap: .3rem;
  min-width: 13.5rem;
  padding: .8rem 1rem .9rem;
  border: 1px solid var(--mxai-border);
  border-radius: var(--mxai-r-md);
  background: rgba(var(--mxai-glass-rgb), .92);
  box-shadow: var(--mxai-shadow-card);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: .92rem;
  line-height: 1.3;
  transition: transform .12s ease-out;
}
#mxai-page .mxai-hero__tip-date { color: var(--mxai-muted); font-family: var(--mxai-font-mono); font-size: .78rem; letter-spacing: .05em; }
#mxai-page .mxai-hero__tip-row { display: flex; align-items: center; gap: .55rem; color: var(--mxai-text-2); white-space: nowrap; }
#mxai-page .mxai-hero__tip-row b { margin-left: auto; padding-left: 1.25rem; color: var(--mxai-text); font-weight: 700; font-variant-numeric: tabular-nums; }
#mxai-page .mxai-hero__tip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mxai-accent-light); box-shadow: 0 0 8px rgba(var(--mxai-accent-rgb), .8); }
#mxai-page .mxai-hero__tip-dot--secondary { background: var(--mxai-gold); box-shadow: 0 0 8px rgba(var(--mxai-gold-rgb), .7); }
#mxai-page .mxai-hero__chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mxai-draw 2.8s var(--mxai-ease) .5s forwards;
}
#mxai-page .mxai-hero__chart-line--main { stroke: var(--mxai-accent-lighter); stroke-width: 2; }
#mxai-page .mxai-hero__chart-line--glow { stroke: var(--mxai-accent); stroke-width: 12; opacity: .22; }
#mxai-page .mxai-hero__chart-line--secondary { stroke: var(--mxai-gold); stroke-width: 1.25; opacity: .8; animation-delay: 1s; }
#mxai-page .mxai-hero__chart-area {
  opacity: 0;
  animation: mxai-fade-in 1.6s ease 1.8s forwards, mxai-breathe 7s ease-in-out 3.4s infinite;
}
@keyframes mxai-draw { to { stroke-dashoffset: 0; } }
@keyframes mxai-fade-in { to { opacity: 1; } }
@keyframes mxai-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

#mxai-page .mxai-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#mxai-page .mxai-hero__title {
  margin: 0 0 var(--mxai-space-5);
  max-width: 100%;
  color: var(--mxai-text);
  font-size: var(--mxai-fs-display);
  font-weight: 800;
  line-height: var(--mxai-lh-tight);
  letter-spacing: var(--mxai-ls-tight);
}
#mxai-page .mxai-hero__title-line { display: block; }
#mxai-page .mxai-hero__title-line.mxai-gradient-text { padding-bottom: .06em; margin-bottom: -.06em; }
#mxai-page .mxai-hero__lead {
  margin: 0 auto var(--mxai-space-6);
  max-width: 54ch;
  color: var(--mxai-text-2);
  font-size: var(--mxai-fs-lead);
  line-height: 1.55;
  opacity: .9;
}
#mxai-page .mxai-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mxai-space-3);
  margin: var(--mxai-space-6) 0 0;
}

/* Trust row */
#mxai-page .mxai-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--mxai-space-4) clamp(1.5rem, 4vw, 3rem);
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
}
#mxai-page .mxai-trust__item { display: inline-flex; align-items: center; gap: .7rem; }
/* Partner badges: real links to the Google Partners profile and the Credly certificate */
#mxai-page .mxai-trust__link {
  display: inline-flex; align-items: center; gap: .85rem;
  padding: .5rem 1rem .5rem .55rem;
  border: 1px solid var(--mxai-border);
  border-radius: var(--mxai-r-md);
  background: rgba(var(--mxai-white-rgb), .04);
  color: var(--mxai-text);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(var(--mxai-white-rgb), .05) inset, 0 10px 30px rgba(var(--mxai-black-rgb), .25);
  transition: border-color var(--mxai-dur-fast) ease, background-color var(--mxai-dur-fast) ease, transform var(--mxai-dur-fast) var(--mxai-ease), box-shadow var(--mxai-dur) ease;
}
#mxai-page .mxai-trust__link:hover {
  border-color: rgba(var(--mxai-accent-rgb), .55);
  background: rgba(var(--mxai-accent-rgb), .1);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(var(--mxai-white-rgb), .08) inset, 0 16px 40px rgba(var(--mxai-black-rgb), .35), 0 0 40px rgba(var(--mxai-accent-deep-rgb), .3);
}
#mxai-page .mxai-trust__link:focus-visible { border-radius: var(--mxai-r-md); }
#mxai-page .mxai-trust__badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.25rem; padding: .35rem .5rem;
  border-radius: var(--mxai-r-sm);
  background: var(--mxai-white);
  box-shadow: 0 6px 20px rgba(var(--mxai-black-rgb), .35);
}
#mxai-page .mxai-trust__badge img { width: auto; height: 2.55rem; max-width: none; }
#mxai-page .mxai-trust__text { display: flex; flex-direction: column; gap: .15rem; text-align: left; }
#mxai-page .mxai-trust__link .mxai-trust__label { color: var(--mxai-text); font-size: .98rem; font-weight: 600; line-height: 1.2; }
#mxai-page .mxai-trust__sub { color: var(--mxai-accent); font-size: var(--mxai-fs-xs); font-weight: 500; line-height: 1.2; }
#mxai-page .mxai-trust__ext {
  width: .95rem; height: .95rem;
  margin-left: .1rem;
  color: var(--mxai-muted);
  transform: rotate(-45deg);
  transition: color var(--mxai-dur-fast) ease, transform var(--mxai-dur-fast) var(--mxai-ease);
}
#mxai-page .mxai-trust__link:hover .mxai-trust__ext { color: var(--mxai-accent-lighter); transform: rotate(-45deg) translate(2px, -2px); }
#mxai-page .mxai-trust__num {
  color: var(--mxai-text);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: var(--mxai-ls-snug);
  line-height: 1;
}
#mxai-page .mxai-trust__label { color: var(--mxai-muted); font-size: var(--mxai-fs-sm); font-weight: 500; line-height: 1.3; text-align: left; }

/* Light rays falling in from the top left */
#mxai-page .mxai-hero__rays {
  position: absolute; inset: 0;
  background: conic-gradient(from 112deg at 6% -14%,
    transparent 0deg, rgba(var(--mxai-white-rgb), .045) 6deg, transparent 14deg,
    rgba(var(--mxai-white-rgb), .028) 21deg, transparent 30deg,
    rgba(var(--mxai-white-rgb), .02) 37deg, transparent 49deg);
  -webkit-mask-image: linear-gradient(180deg, var(--mxai-mask-on) 0%, transparent 64%);
  mask-image: linear-gradient(180deg, var(--mxai-mask-on) 0%, transparent 64%);
}

/* Eclipse: a lit sphere with a dark sphere centred in front of it, so the light shows as a ring.
   It is part of the hero itself and opaque, so it can pass in front of the content while the page scrolls.
   .mxai-eclipse        position, and the scroll-synced rise in the pinned scene
   .mxai-eclipse__body  side fade mask and the load-in
   __bloom  light scattered above the ring
   __disc   the lit sphere: light travels round it, deep on the left, brightest right of the top
   __flare  white-hot glow hugging the limb, and the soft atmosphere outside it
   __shade  the dark sphere in front, with a faint rim of its own and a soft shadow on the ring
   __rim    hairline on the limb, __glint a glint that travels along it
   __hit    hover area, __probe the point and tooltip that follow the pointer along the limb
   Everything is a plain gradient (cheap to paint, no blurred shadows, no filters). */
#mxai-page .mxai-eclipse {
  --mxai-cap: clamp(110px, 19vw, 260px);
  --mxai-disc: min(1240px, 100vw);
  --mxai-crescent: clamp(36px, 8.4vw, 118px);
  --mxai-shade-soft: calc(var(--mxai-crescent) * .42);
  position: relative;
  z-index: 0;
  height: calc(var(--mxai-halo) + var(--mxai-cap));
  margin: calc(2rem - var(--mxai-halo)) 0 0;
  pointer-events: none;
}
#mxai-page .mxai-eclipse__body {
  position: absolute; inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 54% 130% at 50% 0%, var(--mxai-mask-on) 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 130% at 50% 0%, var(--mxai-mask-on) 50%, transparent 100%);
  transform-origin: 50% 100%;
  animation: mxai-eclipse-ignite 2.3s linear calc(var(--mxai-t0) + .45s) both;
}
#mxai-page .mxai-eclipse__disc,
#mxai-page .mxai-eclipse__flare,
#mxai-page .mxai-eclipse__shade,
#mxai-page .mxai-eclipse__rim,
#mxai-page .mxai-eclipse__glint,
#mxai-page .mxai-eclipse__hit {
  position: absolute;
  left: 50%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
}
/* light scattered above the ring */
#mxai-page .mxai-eclipse__bloom {
  position: absolute;
  left: 53%; top: calc(var(--mxai-halo) - 150px);
  width: min(66%, 820px); height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(var(--mxai-accent-rgb), .22) 0%,
    rgba(var(--mxai-accent-deep-rgb), .2) 24%,
    rgba(var(--mxai-accent-deep-rgb), .08) 50%,
    transparent 72%);
  animation: mxai-eclipse-surge 2.3s linear calc(var(--mxai-t0) + .45s) backwards, mxai-eclipse-breathe 7s ease-in-out calc(var(--mxai-t0) + 2.8s) infinite;
}
/* the lit sphere: colour travels round the ring, and it falls into shadow towards the dark sphere */
#mxai-page .mxai-eclipse__disc {
  top: var(--mxai-halo);
  width: var(--mxai-disc);
  background:
    radial-gradient(circle closest-side,
      rgba(var(--mxai-black-rgb), .8) calc(100% - var(--mxai-crescent)),
      rgba(var(--mxai-black-rgb), .56) calc(100% - var(--mxai-crescent) * .66),
      rgba(var(--mxai-black-rgb), .26) calc(100% - var(--mxai-crescent) * .32),
      rgba(var(--mxai-black-rgb), .06) calc(100% - var(--mxai-crescent) * .1),
      transparent calc(100% - 3px)),
    conic-gradient(from -70deg at 50% 50%,
      var(--mxai-accent-deeper) 0deg,
      var(--mxai-accent-deeper) 22deg,
      var(--mxai-accent-deep) 62deg,
      var(--mxai-accent-mid) 92deg,
      var(--mxai-accent-mid) 106deg,
      var(--mxai-accent-deep) 128deg,
      var(--mxai-accent-deeper) 158deg,
      var(--mxai-bg) 200deg,
      var(--mxai-bg) 330deg,
      var(--mxai-accent-deeper) 360deg);
}
/* white-hot glow on the limb plus the atmosphere outside it: a ring profile, strongest right of the top */
#mxai-page .mxai-eclipse__flare {
  top: 0;
  width: calc(var(--mxai-disc) + 2 * var(--mxai-halo));
  background: radial-gradient(circle closest-side,
    transparent calc(100% - var(--mxai-halo) - var(--mxai-crescent) * .34),
    rgba(var(--mxai-accent-rgb), .16) calc(100% - var(--mxai-halo) - var(--mxai-crescent) * .18),
    rgba(var(--mxai-accent-hot-rgb), .5) calc(100% - var(--mxai-halo) - var(--mxai-crescent) * .06),
    rgba(var(--mxai-accent-hot-rgb), .97) calc(100% - var(--mxai-halo) - 2px),
    rgba(var(--mxai-accent-hot-rgb), .97) calc(100% - var(--mxai-halo)),
    rgba(var(--mxai-accent-hot-rgb), .46) calc(100% - var(--mxai-halo) + 4px),
    rgba(var(--mxai-accent-rgb), .22) calc(100% - var(--mxai-halo) + 14px),
    rgba(var(--mxai-accent-deep-rgb), .1) calc(100% - var(--mxai-halo) + 44px),
    transparent calc(100% - var(--mxai-halo) + 108px));
  -webkit-mask-image: conic-gradient(from -70deg at 50% 50%, transparent 0deg, rgba(var(--mxai-black-rgb), .3) 16deg, rgba(var(--mxai-black-rgb), .46) 62deg, var(--mxai-mask-on) 88deg, var(--mxai-mask-on) 104deg, rgba(var(--mxai-black-rgb), .46) 124deg, transparent 142deg, transparent 360deg);
  mask-image: conic-gradient(from -70deg at 50% 50%, transparent 0deg, rgba(var(--mxai-black-rgb), .3) 16deg, rgba(var(--mxai-black-rgb), .46) 62deg, var(--mxai-mask-on) 88deg, var(--mxai-mask-on) 104deg, rgba(var(--mxai-black-rgb), .46) 124deg, transparent 142deg, transparent 360deg);
}
/* the dark sphere in front, centred on the lit one: the ring keeps the same width all the way round */
#mxai-page .mxai-eclipse__shade {
  top: calc(var(--mxai-halo) + var(--mxai-crescent) - var(--mxai-shade-soft));
  width: calc(var(--mxai-disc) - var(--mxai-crescent) * 1.9 + 2 * var(--mxai-shade-soft));
  background:
    radial-gradient(circle closest-side,
      transparent calc(100% - var(--mxai-shade-soft) - 64px),
      rgba(var(--mxai-accent-deep-rgb), .1) calc(100% - var(--mxai-shade-soft) - 18px),
      rgba(var(--mxai-accent-rgb), .16) calc(100% - var(--mxai-shade-soft) - 5px),
      rgba(var(--mxai-accent-hot-rgb), .38) calc(100% - var(--mxai-shade-soft) - 1px),
      transparent calc(100% - var(--mxai-shade-soft))),
    radial-gradient(circle closest-side,
      var(--mxai-bg) calc(100% - var(--mxai-shade-soft)),
      rgba(var(--mxai-black-rgb), .84) calc(100% - var(--mxai-shade-soft) + 1px),
      rgba(var(--mxai-black-rgb), .5) calc(100% - var(--mxai-shade-soft) * .62),
      rgba(var(--mxai-black-rgb), .18) calc(100% - var(--mxai-shade-soft) * .28),
      transparent 100%);
}
/* the limb: a hair of light along the whole arc, hottest right of the top */
#mxai-page .mxai-eclipse__rim,
#mxai-page .mxai-eclipse__glint,
#mxai-page .mxai-eclipse__hit {
  top: var(--mxai-halo);
  width: var(--mxai-disc);
}
#mxai-page .mxai-eclipse__rim,
#mxai-page .mxai-eclipse__glint {
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 2.5px), var(--mxai-mask-on) calc(100% - 1.5px), var(--mxai-mask-on) 100%);
  mask: radial-gradient(circle closest-side, transparent calc(100% - 2.5px), var(--mxai-mask-on) calc(100% - 1.5px), var(--mxai-mask-on) 100%);
}
#mxai-page .mxai-eclipse__rim {
  background: conic-gradient(from -70deg at 50% 50%,
    transparent 0deg,
    rgba(var(--mxai-accent-rgb), .5) 12deg,
    rgba(var(--mxai-accent-hot-rgb), .85) 52deg,
    var(--mxai-accent-hot) 86deg,
    var(--mxai-accent-hot) 108deg,
    rgba(var(--mxai-accent-rgb), .6) 128deg,
    transparent 142deg,
    transparent 360deg);
}
/* a glint of light that travels along the limb */
#mxai-page .mxai-eclipse__glint {
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 5px), var(--mxai-mask-on) calc(100% - 2px), var(--mxai-mask-on) 100%);
  mask: radial-gradient(circle closest-side, transparent calc(100% - 5px), var(--mxai-mask-on) calc(100% - 2px), var(--mxai-mask-on) 100%);
  background: conic-gradient(from -5deg at 50% 50%, transparent 0deg, var(--mxai-accent-hot) 5deg, transparent 10deg, transparent 360deg);
  animation: mxai-eclipse-glint 7.5s cubic-bezier(.45, 0, .55, 1) calc(var(--mxai-t0) + 3.2s) infinite;
  opacity: 0;
}
/* The ring answers the pointer (pointer devices): a point travels along the limb under the cursor and a
   tooltip shows that day's numbers, the same series as the dashboard chart. JS sets --mxai-a (the angle)
   and the values; the block is decorative and hidden from assistive tech. */
#mxai-page .mxai-eclipse__hit { pointer-events: auto; }
#mxai-page .mxai-eclipse__probe {
  position: absolute;
  left: 50%; top: calc(var(--mxai-halo) + var(--mxai-disc) / 2);
  width: 0; height: 0;
  transform: rotate(var(--mxai-a, 0deg));
  opacity: 0;
  transition: opacity var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-eclipse__probe.is-active { opacity: 1; }
#mxai-page .mxai-eclipse__dot {
  position: absolute;
  left: -5px; top: calc(var(--mxai-disc) / -2 - 5px);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--mxai-accent-hot);
  box-shadow: 0 0 0 5px rgba(var(--mxai-accent-rgb), .2), 0 0 18px rgba(var(--mxai-accent-rgb), .95);
}
#mxai-page .mxai-eclipse__tip {
  position: absolute;
  left: 0; top: calc(var(--mxai-disc) / -2 - 22px);
  display: grid; gap: .4rem;
  min-width: 13.5rem;
  padding: .75rem .95rem .85rem;
  border: 1px solid rgba(var(--mxai-white-rgb), .12);
  border-radius: var(--mxai-r-md);
  background: rgba(var(--mxai-glass-rgb), .94);
  box-shadow: 0 18px 44px rgba(var(--mxai-black-rgb), .6), 0 0 34px rgba(var(--mxai-accent-deep-rgb), .3);
  font-family: var(--mxai-font);
  font-size: .86rem;
  line-height: 1.3;
  text-align: left;
  transform-origin: 0 0;
  transform: rotate(calc(-1 * var(--mxai-a, 0deg))) translate(-50%, -100%);
}
/* over the middle of the arc the tooltip drops inside the ring, so it never covers the buttons above it */
#mxai-page .mxai-eclipse__probe.is-in .mxai-eclipse__tip {
  top: calc(var(--mxai-disc) / -2 + 22px);
  transform: rotate(calc(-1 * var(--mxai-a, 0deg))) translate(-50%, 0);
}
@keyframes mxai-eclipse-glint {
  0% { transform: translateX(-50%) rotate(-30deg); opacity: 0; }
  12% { opacity: 1; }
  44% { opacity: 1; }
  56%, 100% { transform: translateX(-50%) rotate(12deg); opacity: 0; }
}
@keyframes mxai-eclipse-breathe { 0%, 100% { opacity: .82; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.07); } }
@keyframes mxai-eclipse-surge {
  0% { opacity: 0; transform: translateX(-50%) scale(.55); }
  52% { opacity: 1; transform: translateX(-50%) scale(1.45); }
  100% { opacity: .82; transform: translateX(-50%) scale(1); }
}
/* On load the disc rises from below, overshoots a little higher while its atmosphere swells (the bloom surges), then settles */
@keyframes mxai-eclipse-ignite {
  0% { opacity: 0; transform: translateY(110px) scale(.9); animation-timing-function: cubic-bezier(.2, .8, .25, 1); }
  52% { opacity: 1; transform: translateY(-46px) scale(1.035); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  100% { opacity: 1; transform: none; }
}

/* Dashboard: the product, rising from behind the horizon while the page scrolls */
#mxai-page .mxai-dash-wrap {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * clamp(56px, 8.5vw, 124px));
  perspective: 1600px;
}
#mxai-page .mxai-dash {
  --mxai-rise: 1;
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  border: 1px solid var(--mxai-border);
  border-radius: var(--mxai-r-lg);
  background:
    linear-gradient(180deg, rgba(var(--mxai-white-rgb), .04), transparent 22%),
    rgba(var(--mxai-glass-rgb), .95);
  box-shadow: 0 24px 60px rgba(var(--mxai-black-rgb), .5);
  transform-origin: 50% 0%;
  font-family: var(--mxai-font);
  line-height: 1.3;
  text-align: left;
}
@keyframes mxai-dash-rise {
  from { transform: translateY(64px) rotateX(14deg) scale(.92); opacity: .7; }
  to { transform: none; opacity: 1; }
}
@supports (animation-timeline: view()) {
  #mxai-page.mxai-js .mxai-dash {
    animation: mxai-dash-rise linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 42%;
  }
}
/* Browsers without scroll timelines: IntersectionObserver feeds --mxai-rise (0 to 1) */
#mxai-page.mxai-no-sda .mxai-dash {
  transform: translateY(calc((1 - var(--mxai-rise)) * 64px)) rotateX(calc((1 - var(--mxai-rise)) * 14deg)) scale(calc(.92 + .08 * var(--mxai-rise)));
  transition: transform .14s linear;
}
#mxai-page .mxai-dash__inner { position: relative; border-radius: inherit; overflow: hidden; }
#mxai-page .mxai-dash__bar {
  display: flex; align-items: center; gap: 1.25rem;
  height: 3.25rem;
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--mxai-border-soft);
  background: rgba(var(--mxai-white-rgb), .02);
}
#mxai-page .mxai-dash__brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--mxai-text); font-size: .88rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
#mxai-page .mxai-dash__brand img { width: 1.5rem; height: 1.5rem; border-radius: 50%; }
#mxai-page .mxai-dash__nav { display: flex; gap: .2rem; margin: 0 auto; min-width: 0; }
#mxai-page .mxai-dash__nav-item { margin: 0; padding: .45rem .8rem; border: 0; border-radius: var(--mxai-r-pill); background: none; color: var(--mxai-muted); font-family: var(--mxai-font); font-size: .8rem; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: color var(--mxai-dur-fast) ease, background-color var(--mxai-dur-fast) ease, box-shadow var(--mxai-dur-fast) ease; }
#mxai-page .mxai-dash__nav-item:hover { color: var(--mxai-text); }
/* The tabs of the illustration switch its view (mouse only: the real, accessible tabs are in the showcase section).
   All views share one grid cell, so the dashboard keeps the height of the KPI view. */
#mxai-page .mxai-dash__views { display: grid; }
#mxai-page .mxai-dash__view {
  grid-area: 1 / 1;
  display: grid; gap: clamp(.75rem, 1.5vw, 1.1rem);
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.985);
  transition: opacity var(--mxai-dur) var(--mxai-ease), transform var(--mxai-dur) var(--mxai-ease), visibility 0s linear var(--mxai-dur);
}
#mxai-page .mxai-dash__view.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
#mxai-page .mxai-dash__view--mock { position: relative; border: 1px solid var(--mxai-border-soft); border-radius: var(--mxai-r-md); overflow: hidden; }
#mxai-page .mxai-dash__nav-item.is-active { color: var(--mxai-text); background: rgba(var(--mxai-accent-rgb), .16); box-shadow: 0 0 0 1px rgba(var(--mxai-accent-rgb), .35) inset; }
#mxai-page .mxai-dash__range { padding: .45rem .8rem; border: 1px solid var(--mxai-border); border-radius: var(--mxai-r-pill); color: var(--mxai-text-2); font-size: .76rem; line-height: 1; white-space: nowrap; }
#mxai-page .mxai-dash__body { display: grid; gap: clamp(.75rem, 1.5vw, 1.1rem); padding: clamp(.9rem, 2.2vw, 1.6rem); }
#mxai-page .mxai-dash__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#mxai-page .mxai-dash__title { color: var(--mxai-text); font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); font-weight: 700; letter-spacing: var(--mxai-ls-snug); }
#mxai-page .mxai-dash__sync { display: inline-flex; align-items: center; gap: .45rem; color: var(--mxai-muted); font-size: .76rem; white-space: nowrap; }
#mxai-page .mxai-dash__sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--mxai-green); box-shadow: 0 0 8px rgba(var(--mxai-green-rgb), .9); }
#mxai-page .mxai-dash__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.55rem, 1.2vw, .9rem); }
#mxai-page .mxai-dash__kpi {
  position: relative;
  display: grid; gap: .3rem;
  padding: .8rem .95rem .65rem;
  border: 1px solid var(--mxai-border-soft);
  border-radius: var(--mxai-r-md);
  background: rgba(var(--mxai-white-rgb), .03);
  overflow: hidden;
}
#mxai-page .mxai-dash__kpi-label { color: var(--mxai-muted); font-size: .74rem; font-weight: 500; }
#mxai-page .mxai-dash__kpi-row { display: flex; align-items: baseline; gap: .5rem; }
#mxai-page .mxai-dash__kpi-value { color: var(--mxai-text); font-size: clamp(1.05rem, .85rem + .8vw, 1.5rem); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#mxai-page .mxai-dash__delta { color: var(--mxai-green); font-size: .72rem; font-weight: 600; }
#mxai-page .mxai-dash__spark { width: 100%; height: 1.5rem; margin-top: .1rem; overflow: visible; }
#mxai-page .mxai-dash__spark path { fill: none; stroke: var(--mxai-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#mxai-page .mxai-dash__kpi:nth-child(3) .mxai-dash__spark path { stroke: var(--mxai-gold); }
#mxai-page .mxai-dash__panels { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: clamp(.55rem, 1.2vw, .9rem); }
#mxai-page .mxai-dash__panel {
  position: relative;
  min-width: 0;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--mxai-border-soft);
  border-radius: var(--mxai-r-md);
  background: rgba(var(--mxai-white-rgb), .03);
}
#mxai-page .mxai-dash__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; }
#mxai-page .mxai-dash__panel-title { color: var(--mxai-text); font-size: .86rem; font-weight: 600; }
#mxai-page .mxai-dash__legend { display: inline-flex; align-items: center; gap: .4rem; color: var(--mxai-muted); font-size: .72rem; white-space: nowrap; }
#mxai-page .mxai-dash__legend-dot { width: 7px; height: 7px; margin-left: .5rem; border-radius: 50%; background: var(--mxai-accent-light); }
#mxai-page .mxai-dash__legend-dot--secondary { background: var(--mxai-gold); }
#mxai-page .mxai-dash__channels { display: grid; gap: .85rem; margin: .2rem 0 0; }
#mxai-page .mxai-dash__channel { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr) auto; align-items: center; column-gap: .6rem; row-gap: .4rem; color: var(--mxai-text-2); font-size: .8rem; }
#mxai-page .mxai-dash__channel-logo { width: 1.15rem; height: 1.15rem; padding: 2px; border-radius: 5px; background: var(--mxai-white); object-fit: contain; }
#mxai-page .mxai-dash__channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mxai-page .mxai-dash__channel-value { color: var(--mxai-text); font-weight: 700; font-variant-numeric: tabular-nums; }
#mxai-page .mxai-dash__channel-bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: var(--mxai-r-pill); background: rgba(var(--mxai-white-rgb), .07); overflow: hidden; }
#mxai-page .mxai-dash__channel-bar i { display: block; width: var(--mxai-v, 50%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--mxai-accent-deep-rgb), .9), var(--mxai-accent)); }
/* The dashboard stays alive at rest: the sync dot sends out a ring and a glint runs along each channel bar */
@keyframes mxai-live-ring { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
@keyframes mxai-live-glint { 0%, 50% { transform: translateX(-120%); } 100% { transform: translateX(520%); } }
@media (prefers-reduced-motion: no-preference) {
  #mxai-page .mxai-dash__sync i { position: relative; }
  #mxai-page .mxai-dash__sync i::after {
    content: "";
    position: absolute; inset: 0;
    border: 1px solid var(--mxai-green);
    border-radius: 50%;
    animation: mxai-live-ring 2.6s ease-out infinite;
  }
  #mxai-page .mxai-dash__channel-bar i { position: relative; overflow: hidden; }
  #mxai-page .mxai-dash__channel-bar i::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(var(--mxai-white-rgb), .45), transparent);
    animation: mxai-live-glint 4.6s ease-in-out infinite;
  }
  #mxai-page .mxai-dash__channel:nth-child(2) .mxai-dash__channel-bar i::after { animation-delay: .45s; }
  #mxai-page .mxai-dash__channel:nth-child(3) .mxai-dash__channel-bar i::after { animation-delay: .9s; }
  #mxai-page .mxai-dash__channel:nth-child(4) .mxai-dash__channel-bar i::after { animation-delay: 1.35s; }
}

/* --------------------------------------------------------------------------
   4a. PINNED HERO SCENE
   The hero is taller than the screen and its stage sticks to the viewport.
   One named view timeline (--mxai-hero) drives every move, so content, arc,
   dashboard and chart stay locked to the scroll position in both directions.
   Applies on desktop when scroll timelines exist (.mxai-sda, set by JS).
   Elsewhere the same markup simply flows: content, arc, dashboard.
   -------------------------------------------------------------------------- */
/* The content drifts up slowly and goes out of focus while the arc passes in front of it */
@keyframes mxai-hero-out {
  0% { opacity: 1; transform: none; filter: blur(0); }
  100% { opacity: 0; transform: translateY(-12vh) scale(.97); filter: blur(18px); visibility: hidden; }
}
/* The arc rises with the page at scroll speed, covering the buttons and the field,
   then evaporates: it stretches upward, blurs and fades away */
@keyframes mxai-eclipse-up {
  0% { transform: none; opacity: 1; filter: blur(0); }
  42% { transform: translateY(-31vh); opacity: 1; filter: blur(0); }
  100% { transform: translateY(-80vh) scale(1.08, 1.6); opacity: 0; filter: blur(22px); }
}
/* Dashboard: rises to the centre and stays there, whole. When the pin ends it simply scrolls away with the
   page and the next section follows it (nothing tips away, nothing is laid over it). */
@keyframes mxai-dash-pin {
  from { transform: translateY(62vh) rotateX(18deg) scale(.88); }
  to { transform: none; }
}
@keyframes mxai-pop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mxai-rays-out { to { opacity: 0; } }

@media (min-width: 1024px) and (min-height: 660px) and (prefers-reduced-motion: no-preference) {
  /* 120vh of pin: the scene takes the first 90vh (its ranges are lengths, as it was timed for a longer pin),
     then the dashboard rests for a moment and the stage lets go */
  #mxai-page.mxai-sda .mxai-hero {
    height: 220vh;
    view-timeline: --mxai-hero block;
  }
  #mxai-page.mxai-sda .mxai-hero__stage {
    --mxai-u: min(1vh, 9px); /* one unit = 1% of the viewport height, frozen above 900px */
    position: sticky;
    top: var(--mxai-sticky-top);
    height: 100vh;
    padding: 0;
    overflow: hidden;
  }
  #mxai-page.mxai-sda .mxai-hero__rays {
    animation: mxai-rays-out linear both;
    animation-timeline: --mxai-hero;
    animation-range: contain 0vh contain 39.6vh;
  }
  /* content: sized in viewport-height units so the arc always fits on the first screen */
  #mxai-page.mxai-sda .mxai-hero__inner {
    padding-top: calc(var(--mxai-u) * 9.5);
    animation: mxai-hero-out linear both;
    animation-timeline: --mxai-hero;
    animation-range: contain 0vh contain 32.4vh;
  }
  /* an opened analyzer card stays in front of the arc and the dashboard */
  #mxai-page.mxai-sda .mxai-hero__inner:has(.mxai-analyzer.is-card) { z-index: 4; }
  #mxai-page.mxai-sda .mxai-hero .mxai-badge { margin-bottom: calc(var(--mxai-u) * 2.4); }
  #mxai-page.mxai-sda .mxai-hero__title { margin-bottom: calc(var(--mxai-u) * 2.4); font-size: min(var(--mxai-fs-display), calc(var(--mxai-u) * 8.4)); }
  #mxai-page.mxai-sda .mxai-hero__lead { max-width: 47rem; margin-bottom: calc(var(--mxai-u) * 3.4); font-size: min(var(--mxai-fs-lead), calc(var(--mxai-u) * 2.25)); }
  #mxai-page.mxai-sda .mxai-hero .mxai-analyzer__hint { margin-top: calc(var(--mxai-u) * 1.5); }
  #mxai-page.mxai-sda .mxai-hero__cta { margin-top: calc(var(--mxai-u) * 3); }

  /* arc: sits under the buttons on the first screen and passes in front of the content as the page scrolls */
  #mxai-page.mxai-sda .mxai-eclipse {
    --mxai-cap: 35vh;
    position: absolute;
    z-index: 2;
    left: 0; right: 0;
    top: calc(64vh - var(--mxai-halo));
    margin: 0;
    transform-origin: 50% 100%;
    animation: mxai-eclipse-up linear both;
    animation-timeline: --mxai-hero;
    animation-range: contain 0vh contain 75.6vh;
  }

  /* dashboard: peeks over the bottom edge, then rises to the centre of the stage */
  #mxai-page.mxai-sda .mxai-dash-wrap {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    margin: 0 auto; /* left and right are both 0, so auto margins centre the max-width box */
    pointer-events: none;
  }
  #mxai-page.mxai-sda .mxai-dash {
    width: 100%;
    pointer-events: auto;
    transform-origin: 50% 50%;
    animation: mxai-dash-pin linear both;
    animation-timeline: --mxai-hero;
    animation-range: contain 0vh contain 72vh;
  }
  /* the chart is drawn by the scroll itself */
  #mxai-page.mxai-sda .mxai-dash .mxai-hero__chart-line {
    animation: mxai-draw linear both;
    animation-timeline: --mxai-hero;
    animation-range: contain 7.2vh contain 54vh;
  }
  #mxai-page.mxai-sda .mxai-dash .mxai-hero__chart-line--secondary { animation-range: contain 12.6vh contain 59.4vh; }
  #mxai-page.mxai-sda .mxai-dash .mxai-hero__chart-area {
    animation: mxai-fade-in linear both;
    animation-timeline: --mxai-hero;
    animation-range: contain 36vh contain 63vh;
  }
  #mxai-page.mxai-sda .mxai-dash__channel-bar i {
    transform-origin: 0 50%;
    animation: mxai-grow-x linear both;
    animation-timeline: --mxai-hero;
    animation-range: contain 12.6vh contain 52.2vh;
  }
  /* the dashboard is switched off (data-mxai-off on .mxai-dash-wrap): the hero is its first screen only, with
     no pin and no scroll scene. It scrolls away as it is and the next section follows it. */
  #mxai-page.mxai-sda .mxai-hero:has(.mxai-dash-wrap[data-mxai-off]):not(.mxai-hero--helix) { height: 100vh; }
  #mxai-page.mxai-sda .mxai-hero:has(.mxai-dash-wrap[data-mxai-off]) .mxai-hero__rays,
  #mxai-page.mxai-sda .mxai-hero:has(.mxai-dash-wrap[data-mxai-off]) .mxai-hero__inner,
  #mxai-page.mxai-sda .mxai-hero:has(.mxai-dash-wrap[data-mxai-off]) .mxai-eclipse { animation: none; }
}
@keyframes mxai-grow-x { from { transform: scaleX(0); } to { transform: none; } }

/* --------------------------------------------------------------------------
   4a-gl. THE DASHBOARD IN REAL 3D (WebGL, see initHeroGL in mxai.js)
   When the script has its 3D scene ready it adds .is-gl to the hero. The canvas
   then draws the dashboard on its way from the first screen to its place, and
   the real dashboard waits there, hidden, until the 3D one lands on it (the
   script fades it in). The ring is the same CSS ring: it keeps rising with the
   page until it crowns the scene and stays there with the dashboard.
   Without .is-gl nothing here applies and the CSS scene above runs as before.
   -------------------------------------------------------------------------- */
#mxai-page .mxai-hero__gl { display: none; }
/* while the script measures the dashboard it has to lie in its resting place, whatever the scroll position */
#mxai-page .mxai-hero.is-measure .mxai-dash-wrap { visibility: visible !important; opacity: 1 !important; transform: none !important; }
#mxai-page .mxai-hero.is-measure .mxai-dash,
#mxai-page .mxai-hero.is-measure .mxai-dash__channel-bar i { transform: none !important; }
@keyframes mxai-eclipse-crown { from { transform: none; } to { transform: translateY(-60vh); } }
@media (min-width: 1024px) and (min-height: 660px) and (prefers-reduced-motion: no-preference) {
  #mxai-page.mxai-sda .mxai-hero.is-gl .mxai-hero__gl {
    display: block;
    position: absolute; inset: 0;
    z-index: 3;
    width: 100%; height: 100%;
    pointer-events: none;
  }
  #mxai-page.mxai-sda .mxai-hero.is-gl .mxai-eclipse {
    animation-name: mxai-eclipse-crown;
    animation-range: contain 0vh contain 60vh;
  }
  /* the headline is gone before the floor of the 3D scene appears */
  #mxai-page.mxai-sda .mxai-hero.is-gl .mxai-hero__inner { animation-range: contain 0vh contain 19.8vh; }
  #mxai-page.mxai-sda .mxai-hero.is-gl .mxai-dash-wrap { animation: none; }
  #mxai-page.mxai-sda .mxai-hero.is-gl .mxai-dash { animation: none; } /* it waits in its place for the 3D one */
  #mxai-page.mxai-sda .mxai-hero.is-gl .mxai-dash .mxai-hero__chart-line { animation: none; stroke-dashoffset: 0; }
  #mxai-page.mxai-sda .mxai-hero.is-gl .mxai-dash .mxai-hero__chart-area { animation: none; opacity: 1; }
  #mxai-page.mxai-sda .mxai-hero.is-gl .mxai-dash__channel-bar i { animation: none; }
}

/* --------------------------------------------------------------------------
   4a-helix. THE HERO WITH THE DATA HELIX (.mxai-hero--helix)
   A light hero: the text on the left, on the right a double helix made of data
   (WebGL points, see initHelix in mxai.js). One strand stands for the people,
   the other for the AI, the rungs between them carry the colours of the
   channels, and small tags with figures and channel names ride on it. The ring
   and the dashboard of the dark hero are switched off in the markup
   (data-mxai-off) and none of their scroll scene runs. The next section starts
   over the foot of the hero as glass (see section 7).
   -------------------------------------------------------------------------- */
#mxai-page .mxai-hero--helix {
  background:
    /* plain paper well before the foot (the last stretch is pure white), so no band shows where the section below takes over */
    linear-gradient(180deg, rgba(var(--mxai-white-rgb), 0) 78%, rgba(var(--mxai-white-rgb), .5) 88%, rgba(var(--mxai-white-rgb), .9) 93.5%, var(--mxai-paper) 97%),
    radial-gradient(ellipse 46% 62% at 76% 44%, rgba(var(--mxai-accent-rgb), .3) 0%, rgba(var(--mxai-accent-rgb), 0) 70%),
    radial-gradient(ellipse 26% 24% at 34% 82%, rgba(var(--mxai-rose-ink-rgb), .2) 0%, rgba(var(--mxai-rose-ink-rgb), 0) 70%), /* pools of colour for the glass to catch */
    radial-gradient(ellipse 30% 30% at 62% 86%, rgba(var(--mxai-blue-ink-rgb), .14) 0%, rgba(var(--mxai-blue-ink-rgb), 0) 70%),
    radial-gradient(ellipse 40% 44% at 8% 88%, rgba(var(--mxai-accent-deep-rgb), .24) 0%, rgba(var(--mxai-accent-deep-rgb), 0) 70%),
    var(--mxai-paper);
  color: var(--mxai-ink);
}
#mxai-page.mxai-sda .mxai-hero.mxai-hero--helix { height: auto; }
#mxai-page .mxai-hero--helix .mxai-hero__bg { display: none; }
#mxai-page .mxai-hero--helix .mxai-hero__stage {
  position: relative;
  display: flex; align-items: center;
  /* one screen in the standalone shell, whose header is 2.75rem; under a taller theme header it gives up the
     difference, so the glass of the next section meets the foot of the screen at the same place */
  height: auto; min-height: max(calc(100vh - var(--mxai-host-top) + 2.75rem), 40rem);
  padding: clamp(5.5rem, 13vh, 8.5rem) 0 calc(var(--mxai-lap) + clamp(1.5rem, 5vh, 3.5rem));
  overflow: hidden;
}
#mxai-page .mxai-hero--helix .mxai-hero__inner {
  position: relative; z-index: 2;
  align-items: flex-start;
  padding-top: 0;
  text-align: left;
  animation: none;
}
/* the line over the headline is the big one: HUMAN-LED in ink, a bar, AI-POWERED in violet. The headline under
   it is set smaller (it stays the h1 of the page) and is all in ink (client, 5 October 2026: "this subheading
   all black"; its second line used to be violet). */
#mxai-page .mxai-hero--helix .mxai-hero__motto {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .38em;
  margin: 0 0 var(--mxai-space-4);
  color: var(--mxai-ink);
  font-size: clamp(1.9rem, .6rem + 2.7vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
#mxai-page .mxai-hero--helix .mxai-hero__motto-bar { color: rgba(var(--mxai-violet-ink-rgb), .4); font-weight: 400; }
#mxai-page .mxai-hero--helix .mxai-hero__motto-ai {
  background-image: var(--mxai-gradient-text-paper);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
#mxai-page .mxai-hero--helix .mxai-hero__title {
  max-width: 22em;
  margin-bottom: var(--mxai-space-5);
  color: var(--mxai-ink);
  font-size: clamp(1.3rem, .9rem + 1.25vw, 2.05rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
#mxai-page .mxai-hero--helix .mxai-hero__title-line { display: inline-block; }
#mxai-page .mxai-hero--helix .mxai-hero__title .mxai-gradient-text { background-image: var(--mxai-gradient-text-paper); }
#mxai-page .mxai-hero--helix .mxai-hero__lead {
  max-width: 35rem;
  margin: 0 0 var(--mxai-space-6);
  color: var(--mxai-ink-2);
  font-size: var(--mxai-fs-lead);
  opacity: 1;
}
#mxai-page .mxai-hero--helix .mxai-hero__cta { justify-content: flex-start; margin-top: 0; }
#mxai-page .mxai-hero--helix :focus-visible { outline-color: var(--mxai-violet-ink); }

/* the helix: the right part of the stage, full height */
#mxai-page .mxai-helix {
  position: absolute; z-index: 1;
  top: 0; right: 0; bottom: 0;
  width: min(60%, 62rem);
  pointer-events: none;
}
#mxai-page .mxai-helix__gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
#mxai-page .mxai-hero--helix.is-3d .mxai-helix__gl { opacity: 1; }
/* without WebGL (.is-flat) or without the script: the same figure as a still drawing */
#mxai-page .mxai-helix__still { position: absolute; left: 50%; top: 4%; width: auto; height: 92%; max-width: none; transform: translateX(-42%) rotate(-19deg); opacity: .55; }
#mxai-page.mxai-js .mxai-hero--helix:not(.is-flat) .mxai-helix__still { display: none; }
#mxai-page .mxai-helix__strand { fill: none; stroke: var(--mxai-violet-ink); stroke-width: 3; stroke-linecap: round; }
#mxai-page .mxai-helix__strand--b { stroke: var(--mxai-rose-ink); }
#mxai-page .mxai-helix__rungs { fill: none; stroke: rgba(var(--mxai-violet-ink-rgb), .45); stroke-width: 1.5; }
/* the tags: the script gives each one its place on the turning helix (transform) and its opacity */
#mxai-page .mxai-helix__tags { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
#mxai-page .mxai-helix__tag {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: .5em;
  margin: 0;
  padding: .5em .8em;
  border: 1px solid rgba(var(--mxai-white-rgb), .9);
  border-radius: var(--mxai-r-pill);
  background: rgba(var(--mxai-white-rgb), .72);
  color: var(--mxai-ink-2);
  font-size: .86rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 .6em 1.6em rgba(var(--mxai-violet-ink-rgb), .16), 0 1px 2px rgba(var(--mxai-ink-rgb), .06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .25s linear;
  will-change: transform, opacity;
}
#mxai-page .mxai-helix__tag b { color: var(--mxai-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
#mxai-page .mxai-helix__logo { width: 1.25em; height: 1.25em; object-fit: contain; }
/* the short line from the tag to its point on the helix (the tag sits to the right of it, or to the left: .is-left) */
#mxai-page .mxai-helix__tag::before {
  content: "";
  position: absolute; top: 50%; right: 100%;
  width: 1.1rem; height: 1px;
  background: linear-gradient(90deg, rgba(var(--mxai-violet-ink-rgb), .7), rgba(var(--mxai-violet-ink-rgb), .2));
}
#mxai-page .mxai-helix__tag.is-left::before { right: auto; left: 100%; transform: scaleX(-1); }
/* the reading under the pointer: it follows the mouse over the helix and names the rung it is on */
#mxai-page .mxai-helix__tip {
  --mxai-tint: var(--mxai-accent);
  position: absolute; z-index: 3; left: 0; top: 0;
  display: grid; grid-template-columns: auto auto; align-items: baseline; gap: .2rem .7rem;
  padding: .65rem .85rem .7rem;
  border-radius: var(--mxai-r-md);
  background: var(--mxai-ink);
  color: var(--mxai-white);
  font-size: .8rem;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 1rem 2.4rem rgba(var(--mxai-ink-rgb), .28);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  will-change: transform, opacity;
}
#mxai-page .mxai-helix__tip.is-on { opacity: 1; }
#mxai-page .mxai-helix__tip-channel { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .45em; color: var(--mxai-accent-lighter); font-size: .72rem; letter-spacing: .02em; }
#mxai-page .mxai-helix__tip-channel::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--mxai-tint); box-shadow: 0 0 0 3px rgba(var(--mxai-white-rgb), .12); }
#mxai-page .mxai-helix__tip-value { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#mxai-page .mxai-helix__tip-label { color: var(--mxai-accent-lighter); }
#mxai-page .mxai-helix__tip[data-tint="google"] { --mxai-tint: var(--mxai-brand-google-blue); }
#mxai-page .mxai-helix__tip[data-tint="ga"] { --mxai-tint: var(--mxai-brand-ga); }
#mxai-page .mxai-helix__tip[data-tint="tiktok"] { --mxai-tint: var(--mxai-brand-tiktok); }
#mxai-page .mxai-helix__tip[data-tint="meta"] { --mxai-tint: var(--mxai-brand-meta); }
#mxai-page .mxai-helix__data { display: none; }
#mxai-page .mxai-helix__tag--strand { padding: .45em .9em; border-color: rgba(var(--mxai-violet-ink-rgb), .3); background: var(--mxai-violet-ink); color: var(--mxai-white); font-weight: 700; letter-spacing: .04em; }
#mxai-page .mxai-helix__tag--ai { border-color: rgba(var(--mxai-rose-ink-rgb), .3); background: var(--mxai-rose-ink); }
@media (max-width: 899px) {
  /* A phone (client, 5 October 2026, with phone screenshots of the reference: "the text and the button at the foot
     on the left, the spiral above, running down into the glass section"; a version with the text on a pane of
     glass of its own under the first screen was tried the same evening and taken back: "include this text too,
     only smaller, the way the reference set it, so it does not take half the screen"). The first screen is the
     helix, from under the header of the theme to the fold. The line, the headline, the text (set small here)
     and the button stand at its foot on the left; the helix goes on behind them, veiled there by its own
     shader (uCopy in initHelix), into the glass of the next section, whose edge shows at the fold
     (--mxai-peek). */
  #mxai-page .mxai-hero--helix .mxai-hero__motto-bar { display: none; } /* the two halves stand one over the other */
  #mxai-page .mxai-hero--helix .mxai-hero__motto { flex-direction: column; margin-bottom: .8rem; }
  #mxai-page .mxai-hero--helix .mxai-hero__stage {
    --mxai-peek: 1.25rem;
    flex-direction: column; justify-content: flex-end; align-items: stretch;
    min-height: calc(100vh - var(--mxai-host-top) + var(--mxai-lap) - var(--mxai-peek));
    min-height: calc(100svh - var(--mxai-host-top) + var(--mxai-lap) - var(--mxai-peek)); /* the screen with the bars of the phone browser showing */
    padding-top: 8.5rem; /* the least the helix keeps to itself above the text on a short screen */
    padding-bottom: calc(var(--mxai-lap) + 1.5rem);
  }
  #mxai-page .mxai-hero--helix .mxai-hero__title { margin-bottom: .7rem; }
  #mxai-page .mxai-hero--helix .mxai-hero__lead { max-width: 26rem; margin-bottom: 1.2rem; font-size: .92rem; line-height: 1.45; text-wrap: pretty; }
  /* the box of the helix is the whole stage: it runs on to the foot of the hero, behind the glass */
  #mxai-page .mxai-helix { left: 0; width: 100%; }
  #mxai-page .mxai-helix__tag { font-size: .7rem; }
  /* the reading under the pointer is for a laptop only (client request): not in this layout */
  #mxai-page .mxai-helix__tip { display: none; }
}

/* --------------------------------------------------------------------------
   4b. AMBIENT LIGHT (the page is not flat black: large soft lights lie over it)
   One layer over the whole page, blended as light (screen), so it lifts the
   background, the cards and the 3D canvases alike and never leaves a seam where
   a canvas meets the page. The pattern (--mxai-ambient) repeats every two
   screens. It is static: nothing follows the pointer any more.
   -------------------------------------------------------------------------- */
#mxai-page::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 6;
  background: var(--mxai-ambient);
  background-size: 100% 200vh;
  background-repeat: repeat-y;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. ANALYZER (interactive hero tool)
   -------------------------------------------------------------------------- */
#mxai-page .mxai-analyzer {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--mxai-r-xl);
  background: transparent;
  text-align: left;
  transition: background-color var(--mxai-dur) ease, border-color var(--mxai-dur) ease, padding var(--mxai-dur) var(--mxai-ease), box-shadow var(--mxai-dur) ease;
}
#mxai-page .mxai-analyzer.is-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-color: var(--mxai-border);
  background: var(--mxai-surface-glass);
  box-shadow: var(--mxai-shadow-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#mxai-page .mxai-analyzer__form { display: block; margin: 0; }

#mxai-page .mxai-analyzer__head {
  display: flex;
  align-items: center;
  gap: var(--mxai-space-4);
  margin: 0 0 var(--mxai-space-5);
}
#mxai-page .mxai-analyzer__head[hidden] { display: none; }
#mxai-page .mxai-analyzer__back {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .7rem .4rem .5rem;
  border-radius: var(--mxai-r-pill);
  color: var(--mxai-muted);
  font-size: var(--mxai-fs-sm);
  font-weight: 500;
  line-height: 1;
  transition: color var(--mxai-dur-fast) ease, background-color var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-analyzer__back:hover { color: var(--mxai-text); background: rgba(var(--mxai-white-rgb), .06); }
#mxai-page .mxai-analyzer__progress { display: flex; flex: 1; gap: 6px; }
#mxai-page .mxai-analyzer__progress-bar {
  flex: 1; height: 4px;
  border-radius: var(--mxai-r-pill);
  background: rgba(var(--mxai-white-rgb), .1);
  overflow: hidden;
}
#mxai-page .mxai-analyzer__progress-bar i {
  display: block; width: 0; height: 100%;
  border-radius: inherit;
  background: var(--mxai-accent);
  box-shadow: 0 0 10px rgba(var(--mxai-accent-rgb), .8);
  transition: width var(--mxai-dur) var(--mxai-ease);
}
#mxai-page .mxai-analyzer__progress-bar.is-done i { width: 100%; }
#mxai-page .mxai-analyzer__count { color: var(--mxai-muted-2); font-family: var(--mxai-font-mono); font-size: var(--mxai-fs-xs); letter-spacing: .05em; }

#mxai-page .mxai-analyzer__viewport { position: relative; overflow: hidden; transition: height var(--mxai-dur) var(--mxai-ease); }
#mxai-page .mxai-analyzer__viewport.is-static { transition: none; }
#mxai-page .mxai-analyzer__step { display: block; }
#mxai-page .mxai-analyzer__step[hidden] { display: none; }
#mxai-page .mxai-analyzer__step.is-entering { animation: mxai-step-in var(--mxai-dur) var(--mxai-ease) both; }
#mxai-page .mxai-analyzer__step.is-entering-back { animation: mxai-step-in-back var(--mxai-dur) var(--mxai-ease) both; }
@keyframes mxai-step-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes mxai-step-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

#mxai-page .mxai-analyzer__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 4.25rem;
  padding: .45rem .45rem .45rem 1.4rem;
  border: 1px solid rgba(var(--mxai-white-rgb), .14);
  border-radius: var(--mxai-r-pill);
  background: rgba(var(--mxai-white-rgb), .05);
  box-shadow: var(--mxai-shadow-field);
  transition: border-color var(--mxai-dur-fast) ease, box-shadow var(--mxai-dur) ease, background-color var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-analyzer__field:hover { border-color: rgba(var(--mxai-white-rgb), .22); }
#mxai-page .mxai-analyzer__field:focus-within {
  border-color: rgba(var(--mxai-accent-rgb), .7);
  background: rgba(var(--mxai-white-rgb), .07);
  box-shadow: var(--mxai-shadow-focus), 0 20px 60px rgba(var(--mxai-black-rgb), .45), 0 0 70px rgba(var(--mxai-accent-deep-rgb), .3);
}
#mxai-page .mxai-analyzer__field-icon { width: 1.35rem; height: 1.35rem; color: var(--mxai-muted); flex: 0 0 auto; }
#mxai-page .mxai-analyzer__field:focus-within .mxai-analyzer__field-icon { color: var(--mxai-accent); }
#mxai-page .mxai-analyzer__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 .5rem;
  border: 0;
  background: transparent;
  color: var(--mxai-text);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  outline: none;
  box-shadow: none;
}
#mxai-page .mxai-analyzer__input::placeholder { color: var(--mxai-muted); opacity: 1; }
#mxai-page .mxai-analyzer__input:focus-visible { outline: none; }
#mxai-page .mxai-analyzer__go {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 3.35rem; height: 3.35rem;
  border-radius: 50%;
  background: var(--mxai-gradient-btn);
  color: var(--mxai-on-accent);
  box-shadow: var(--mxai-shadow-btn);
  transition: transform var(--mxai-dur-fast) var(--mxai-ease), box-shadow var(--mxai-dur) ease;
}
#mxai-page .mxai-analyzer__go .mxai-icon { width: 1.35rem; height: 1.35rem; }
#mxai-page .mxai-analyzer__go:hover { transform: scale(1.05); box-shadow: var(--mxai-shadow-btn-hover); }
#mxai-page .mxai-analyzer__go:focus-visible { outline-offset: 2px; border-radius: 50%; }
#mxai-page .mxai-analyzer__submit { height: 3.35rem; flex: 0 0 auto; }
#mxai-page .mxai-analyzer__hint {
  margin: var(--mxai-space-4) 0 0;
  color: var(--mxai-muted);
  font-size: var(--mxai-fs-sm);
  text-align: center;
}
#mxai-page .mxai-analyzer__error {
  margin: var(--mxai-space-3) 0 0;
  padding-left: 1.4rem;
  color: var(--mxai-red);
  font-size: var(--mxai-fs-sm);
  font-weight: 500;
}
#mxai-page .mxai-analyzer__error[hidden] { display: none; }
#mxai-page .mxai-analyzer__field.is-invalid { border-color: rgba(var(--mxai-red-rgb), .7); }

#mxai-page .mxai-analyzer__fieldset { display: block; min-width: 0; }
#mxai-page .mxai-analyzer__question {
  display: block;
  margin: 0 0 var(--mxai-space-4);
  color: var(--mxai-text);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--mxai-ls-snug);
}
#mxai-page .mxai-analyzer__sub { margin: calc(-1 * var(--mxai-space-2)) 0 var(--mxai-space-4); color: var(--mxai-muted); font-size: var(--mxai-fs-sm); }
#mxai-page .mxai-analyzer__chips { display: flex; flex-wrap: wrap; gap: .6rem; }
#mxai-page .mxai-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.2rem;
  border: 1px solid var(--mxai-border);
  border-radius: var(--mxai-r-pill);
  background: rgba(var(--mxai-white-rgb), .04);
  color: var(--mxai-text-2);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.1;
  transition: background-color var(--mxai-dur-fast) ease, border-color var(--mxai-dur-fast) ease, color var(--mxai-dur-fast) ease, transform var(--mxai-dur-fast) var(--mxai-ease), box-shadow var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-chip::before {
  content: "";
  width: .55rem; height: .55rem;
  border-radius: 50%;
  border: 1.5px solid var(--mxai-muted-2);
  transition: background-color var(--mxai-dur-fast) ease, border-color var(--mxai-dur-fast) ease, box-shadow var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-chip:hover { background: rgba(var(--mxai-white-rgb), .08); border-color: var(--mxai-border-strong); color: var(--mxai-text); transform: translateY(-1px); }
#mxai-page .mxai-chip[aria-checked="true"] {
  background: rgba(var(--mxai-accent-rgb), .16);
  border-color: rgba(var(--mxai-accent-rgb), .7);
  color: var(--mxai-accent-lighter);
  box-shadow: 0 0 24px rgba(var(--mxai-accent-deep-rgb), .3);
}
#mxai-page .mxai-chip[aria-checked="true"]::before { background: var(--mxai-accent); border-color: var(--mxai-accent); box-shadow: 0 0 8px var(--mxai-accent); }
#mxai-page .mxai-chip:focus-visible { border-radius: var(--mxai-r-pill); outline-offset: 2px; }
#mxai-page .mxai-analyzer__actions { display: flex; justify-content: flex-end; gap: var(--mxai-space-3); margin: var(--mxai-space-5) 0 0; }
#mxai-page .mxai-analyzer__actions--center { justify-content: center; }

#mxai-page .mxai-analyzer__step--status { padding: var(--mxai-space-4) 0; text-align: center; }
#mxai-page .mxai-analyzer__step--status .mxai-analyzer__question { margin-bottom: var(--mxai-space-2); }
#mxai-page .mxai-analyzer__step--status .mxai-analyzer__sub { margin: 0 auto; max-width: 42ch; }
#mxai-page .mxai-analyzer__spinner {
  width: 3rem; height: 3rem;
  margin: 0 auto var(--mxai-space-5);
  border-radius: 50%;
  border: 3px solid rgba(var(--mxai-accent-rgb), .18);
  border-top-color: var(--mxai-accent);
  animation: mxai-spin 1s linear infinite;
}
#mxai-page .mxai-analyzer__status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem;
  margin: 0 0 var(--mxai-space-5);
  border-radius: 50%;
}
#mxai-page .mxai-analyzer__status-icon .mxai-icon { width: 1.5rem; height: 1.5rem; }
#mxai-page .mxai-analyzer__status-icon--ok { background: rgba(var(--mxai-green-rgb), .14); color: var(--mxai-green); box-shadow: 0 0 40px rgba(var(--mxai-green-rgb), .25); }
#mxai-page .mxai-analyzer__status-icon--err { background: rgba(var(--mxai-red-rgb), .14); color: var(--mxai-red); }
@keyframes mxai-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   6. CLIENT LOGOS
   -------------------------------------------------------------------------- */
/* The clients section is a section of its own, plain black from its first line: the white above ends straight and
   the black starts there. For a few hours it started as a band of smoked glass (a lighter, tinted strip with
   pools of colour and a line of light on its edge; client, 5 October 2026: "the black section must be glass");
   the same evening the client had the band removed on every width ("what is this, why is it there, it should
   not be on either").
   The wall is the design of the first dark wall (client, the same day, with a screenshot of it: "the logos
   and the section positioned like this, this is the design, with the logos as they are now"): no tiles, the
   logos stand free on the black in rows of five with air around them and one soft pool of violet light lies
   behind the wall. The logos are the active clients of today, all shown white and without any hover state
   (client, a few minutes later: "white as in the example, but with no hover, they simply stay white").
   Like Integrations the section is not tied to the scroll: it appears by itself when it is reached (.is-in,
   set once by initLogoWall). */
#mxai-page .mxai-clients {
  background: var(--mxai-bg);
  color: var(--mxai-text);
}
/* a soft pool of violet light behind the wall */
#mxai-page .mxai-logos-stage { position: relative; isolation: isolate; }
#mxai-page .mxai-logos-stage::before {
  content: "";
  position: absolute; z-index: -1;
  left: 50%; top: 50%;
  width: 110%; height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side, rgba(var(--mxai-accent-deep-rgb), .24) 0%, rgba(var(--mxai-accent-deep-rgb), .07) 55%, rgba(var(--mxai-accent-deep-rgb), 0) 100%);
  pointer-events: none;
}
/* the heading is a whole sentence, so it is set smaller and wider than the two-word headings of the page */
#mxai-page .mxai-clients .mxai-h2 { max-width: 25em; color: var(--mxai-text); font-size: clamp(1.45rem, 1rem + 1.7vw, 2.3rem); line-height: 1.22; letter-spacing: var(--mxai-ls-snug); }
/* from 1101px the sentence is one line in one size across the container (client request) */
@media (min-width: 1101px) {
  #mxai-page .mxai-clients .mxai-h2 {
    max-width: none;
    font-size: min(calc(min(var(--mxai-container), 100vw - 2 * var(--mxai-gutter)) / 24), var(--mxai-fs-h2));
    line-height: 1.12;
    white-space: nowrap;
  }
}
/* the violet half of the heading starts in a clear lavender, so it reads apart from the white words before it */
#mxai-page .mxai-clients .mxai-gradient-text { background-image: linear-gradient(94deg, var(--mxai-accent-light) 0%, var(--mxai-accent) 42%, var(--mxai-accent-mid) 100%); }
#mxai-page .mxai-logos {
  --mxai-logo: clamp(2.9rem, 3.5vw, 3.6rem);
  --mxai-cols: 2;
  --mxai-wall-gap: .5rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mxai-wall-gap);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0;
  list-style: none;
}
/* a logo stands free on the black: no tile, only air around it */
#mxai-page .mxai-logos__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the cell, not the logo, sets the width: a long wordmark is capped by it */
  place-items: center;
  flex: 0 0 calc((100% - (var(--mxai-cols) - 1) * var(--mxai-wall-gap)) / var(--mxai-cols) - .1px);
  min-width: 0; /* a long wordmark is capped by its cell, it does not widen it */
  min-height: 5.75rem;
  margin: 0;
  padding: 1.1rem 1.5rem;
  border-radius: var(--mxai-r-md);
}
/* Every logo is drawn by what it contains, not by its file: the inline style on each item carries the box of
   the mark inside the image (--mxai-cl/ct/cw/ch, fractions of the file) and its aspect ratio (--mxai-ar).
   The mark window crops the empty margins away. Its width follows --mxai-lw (aspect^0.55, a little smaller
   for dense marks), so a square badge and a long wordmark carry the same visual weight. */
#mxai-page .mxai-logos__mark {
  position: relative; z-index: 1;
  display: block;
  box-sizing: border-box;
  width: calc(var(--mxai-logo) * var(--mxai-lw, 1));
  max-width: 100%;
  margin: 0;
  aspect-ratio: var(--mxai-ar, 1);
  overflow: hidden;
}
#mxai-page .mxai-logos__mark img {
  position: absolute;
  left: calc(-100% * var(--mxai-cl, 0) / var(--mxai-cw, 1));
  top: calc(-100% * var(--mxai-ct, 0) / var(--mxai-ch, 1));
  width: calc(100% / var(--mxai-cw, 1));
  height: auto;
  max-width: none; max-height: none;
  margin: 0;
  /* every logo is a white mark: the artwork has a clear ground, so its whole shape is painted white */
  filter: brightness(0) invert(1);
  opacity: .9;
}
/* an emblem that is one solid shape with its detail drawn inside (it would turn into a white blob) keeps its
   shading instead: it is shown in greys, lifted towards white */
#mxai-page .mxai-logos__item--shade .mxai-logos__mark img { filter: grayscale(1) brightness(2.1) contrast(1.1); }
@media (min-width: 520px) { #mxai-page .mxai-logos { --mxai-cols: 3; } }
@media (min-width: 860px) { #mxai-page .mxai-logos { --mxai-cols: 4; } }
@media (min-width: 1101px) {
  #mxai-page .mxai-logos { --mxai-cols: 5; }
  /* a count that would leave one logo alone in the last row of five is set in rows of six instead */
  #mxai-page .mxai-logos:has(> .mxai-logos__item:nth-child(5n+1):last-child) { --mxai-cols: 6; }
}
@media (max-width: 519px) { #mxai-page .mxai-logos__item { min-height: 5rem; padding: 1rem; } }
/* the entrance, by the clock: the headline, the logos in a quick wave (each has its own delay, --mxai-d, from
   initLogoWall), the trust row. Without the script, or with reduced motion, everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  #mxai-page.mxai-sda .mxai-section.mxai-clients .mxai-container .mxai-h2 > span { animation: none; }
  #mxai-page.mxai-js .mxai-clients .mxai-h2 > span { display: inline-block; transition: opacity .6s ease, translate .7s var(--mxai-ease); }
  #mxai-page.mxai-js .mxai-clients .mxai-h2 > span:last-child { transition-delay: .1s; }
  #mxai-page.mxai-js .mxai-clients .mxai-logos__item { transition: opacity .5s ease var(--mxai-d, 0ms), translate .65s var(--mxai-ease) var(--mxai-d, 0ms), scale .65s var(--mxai-ease) var(--mxai-d, 0ms); }
  #mxai-page.mxai-js .mxai-clients .mxai-trust { transition: opacity .6s ease .75s, translate .8s var(--mxai-ease) .75s; }
  #mxai-page.mxai-js .mxai-clients:not(.is-in) .mxai-h2 > span { opacity: 0; translate: 0 .5em; }
  #mxai-page.mxai-js .mxai-clients:not(.is-in) .mxai-logos__item { opacity: 0; translate: 0 1rem; scale: .94; }
  #mxai-page.mxai-js .mxai-clients:not(.is-in) .mxai-trust { opacity: 0; translate: 0 1.5rem; }
  /* the pool of light comes up with the logos */
  #mxai-page.mxai-js .mxai-clients .mxai-logos-stage::before { transition: opacity 1.2s ease .2s; }
  #mxai-page.mxai-js .mxai-clients:not(.is-in) .mxai-logos-stage::before { opacity: 0; }
}

/* --------------------------------------------------------------------------
   7. INTEGRATIONS: THE CHANNELS FEED METRIX (the white scene)
   --------------------------------------------------------------------------
   One markup, two presentations:
   - below 1101px: a flat column (the sources as a wrap of chips, a line down into Metrix, the cards);
   - from 1101px: a 3D rig. The sources stand as pins on a tilted, dotted floor (CSS perspective), their lanes
     lie on the floor and run into the Metrix sphere, a pulse in each channel's colour travels along its lane,
     and one stream per result leaves the sphere for its card (those links are drawn by initFlow).
   The section is not tied to the scroll (it was a pinned scene for a day): it is an ordinary white panel that
   builds itself by the clock when it is reached, see "the entrance" below.
   Every size of the rig derives from --mxai-rw (its width), so it scales as one piece. */
/* The section starts over the foot of the hero (--mxai-lap). Over that stretch the section itself is the glass,
   from edge to edge: the helix runs on behind it and shows through, blurred. From the foot of the hero down
   the section is plain white, and the glass runs into that white without a line. */
#mxai-page .mxai-integrations {
  margin: calc(-1 * var(--mxai-lap)) 0 0;
  padding-top: calc(var(--mxai-lap) * .2);
  padding-bottom: clamp(4rem, 7vw, 6rem); /* the white ends in a straight line, at the upper edge of the dark glass of the next section */
  /* the white starts 2px above the foot of the hero (which is pure white there): where the two ended on the same
     line, a row of the dark page showed between them as a hairline once the strip above carried a backdrop filter */
  background: linear-gradient(180deg, rgba(var(--mxai-white-rgb), 0) 0, rgba(var(--mxai-white-rgb), 0) calc(var(--mxai-lap) - 2px), var(--mxai-paper) calc(var(--mxai-lap) - 2px));
  color: var(--mxai-ink);
}
/* the glass: the full width of the section, clear at its upper edge and pure white over its last stretch. Only
   this strip carries the backdrop filter. Its one edge is the upper one, a line of light. */
#mxai-page .mxai-integrations::before {
  content: "";
  position: absolute; z-index: 0;
  left: 0; right: 0; top: 0;
  height: calc(var(--mxai-lap) + 1px);
  background: linear-gradient(180deg, rgba(var(--mxai-white-rgb), .14) 0%, rgba(var(--mxai-white-rgb), .26) 42%, rgba(var(--mxai-white-rgb), .62) 70%, rgba(var(--mxai-white-rgb), .93) 88%, var(--mxai-paper) 96%);
  box-shadow:
    0 1px 0 rgba(var(--mxai-white-rgb), .95) inset,
    0 2rem 2.5rem -1.75rem rgba(var(--mxai-white-rgb), .6) inset;
  -webkit-backdrop-filter: blur(9px) saturate(1.5);
  backdrop-filter: blur(9px) saturate(1.5);
  pointer-events: none;
}
/* the shadow the glass throws on the hero: a strip over its upper edge (a box-shadow would also fall on the
   white under the glass and draw a band there) */
#mxai-page .mxai-integrations::after {
  content: "";
  position: absolute; z-index: 0;
  left: 0; right: 0; top: -2.75rem;
  height: 2.75rem;
  background: linear-gradient(180deg, rgba(var(--mxai-violet-ink-rgb), 0) 0%, rgba(var(--mxai-violet-ink-rgb), .025) 55%, rgba(var(--mxai-violet-ink-rgb), .09) 100%);
  pointer-events: none;
}
#mxai-page .mxai-integrations .mxai-h2 { max-width: none; color: var(--mxai-ink); }
/* the title is one line on a desktop (client request): sized to the width so the whole sentence fits */
@media (min-width: 1024px) {
  #mxai-page .mxai-integrations .mxai-flow__head .mxai-h2 { font-size: min(var(--mxai-fs-h2), (100vw - 6rem) / 28.5, 2.65rem); white-space: nowrap; /* the sentence is about 28 em wide: it fits the container at any width */ }
  #mxai-page .mxai-integrations .mxai-flow__head .mxai-lead { max-width: 88ch; } /* three lines under the one-line title */
}
#mxai-page .mxai-integrations .mxai-gradient-text { background-image: var(--mxai-gradient-text-paper); }
#mxai-page .mxai-integrations .mxai-lead { max-width: 56rem; color: var(--mxai-ink-2); }
#mxai-page .mxai-flow { position: relative; display: flow-root; isolation: isolate; } /* its layers: the links 1, the rig 2, the notes and the cards 3 */
#mxai-page .mxai-flow__head { position: relative; z-index: 2; }
@media (max-width: 899px) {
  #mxai-page { --mxai-lap: 6.5rem; }
  /* the points of the helix are smaller here, so the glass blurs less: the helix still reads behind it */
  #mxai-page .mxai-integrations::before { -webkit-backdrop-filter: blur(5px) saturate(1.5); backdrop-filter: blur(5px) saturate(1.5); }
  /* on a phone the headline stands over the picture and the paragraph under it is left out (client, 5 October
     2026, after trying the text under the picture: "this text we remove, the headline goes on top over the
     animation") */
  #mxai-page .mxai-integrations .mxai-flow__head .mxai-lead { display: none; }
  /* later the same evening, from a real phone: the headline goes too and so do the two notes under the
     picture ("we leave only the animation"). The headline stays in the markup for screen readers and the outline. */
  #mxai-page .mxai-integrations .mxai-flow__head .mxai-h2 {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
  }
  #mxai-page .mxai-integrations .mxai-flow__notes { display: none; }
}

#mxai-page .mxai-flow__rig { position: relative; z-index: 2; margin: var(--mxai-space-7) 0 0; }
#mxai-page .mxai-flow__floor { display: flex; flex-direction: column; align-items: center; }
#mxai-page .mxai-flow__lanes,
#mxai-page .mxai-flow__mlanes,
#mxai-page .mxai-flow__ripples,
#mxai-page .mxai-flow__ring,
#mxai-page .mxai-flow__links,
#mxai-page .mxai-flow__arrow { display: none; }
#mxai-page .mxai-flow__sources {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  max-width: 36rem;
  margin: 0; padding: 0;
  list-style: none;
}
#mxai-page .mxai-flow__src { margin: 0; padding: 0; }
#mxai-page .mxai-flow__chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .62em 1.05em .62em .85em;
  border: 1px solid rgba(var(--mxai-ink-rgb), .1);
  border-radius: var(--mxai-r-pill);
  background: var(--mxai-paper);
  color: var(--mxai-ink);
  font-size: .86rem;
  font-weight: 400; /* client request: the channel names are not bold */
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 .7em 1.7em rgba(var(--mxai-ink-rgb), .1), 0 1px 2px rgba(var(--mxai-ink-rgb), .08);
}
#mxai-page .mxai-flow__logo { width: 1.2em; height: 1.2em; object-fit: contain; flex: 0 0 auto; }
#mxai-page .mxai-flow__logo--m { display: none; } /* a mark that only the narrow drawing shows (the website as Shopify) */
#mxai-page .mxai-flow__chip .mxai-icon { width: 1.15em; height: 1.15em; color: var(--mxai-violet-ink); }

/* Metrix: the logo disc, flat (client, 5 October 2026: "this sphere, on the phone and on the web, is to be flat").
   It used to be lit like a sphere: a sheen above, a lavender bounce from below, a glow around it and a pool of
   shadow on the floor. What is left is the black disc with the mark and the ring around it. */
#mxai-page .mxai-flow__core { position: relative; margin: 3rem 0 0; }
#mxai-page .mxai-flow__core::before {
  content: "";
  position: absolute; left: 50%; bottom: 100%;
  width: 2px; height: 3rem;
  margin-left: -1px;
  background: repeating-linear-gradient(180deg, rgba(var(--mxai-accent-deep-rgb), .6) 0 6px, rgba(var(--mxai-accent-deep-rgb), 0) 6px 12px);
}
#mxai-page .mxai-flow__ball {
  --mxai-ball: 6.5rem;
  position: relative;
  width: var(--mxai-ball); height: var(--mxai-ball);
  border-radius: 50%;
  background: var(--mxai-bg);
}
#mxai-page .mxai-flow__ball img { display: block; width: 100%; height: 100%; clip-path: circle(48.6%); }
/* what comes out */
#mxai-page .mxai-flow__out { position: relative; }
#mxai-page .mxai-flow__notes { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: var(--mxai-space-5) 0 0; }
#mxai-page .mxai-flow__note {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0;
  padding: .5rem .9rem .5rem .7rem;
  border: 1px dashed rgba(var(--mxai-accent-deep-rgb), .45);
  border-radius: var(--mxai-r-pill);
  background: rgba(var(--mxai-accent-rgb), .1);
  color: var(--mxai-ink-2);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.2;
}
#mxai-page .mxai-flow__note .mxai-icon { width: 1rem; height: 1rem; color: var(--mxai-violet-ink); }
#mxai-page .mxai-flow__cards {
  --mxai-gap: 1rem;
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mxai-gap);
  margin: var(--mxai-space-6) 0 0; padding: 0;
  list-style: none;
}
#mxai-page .mxai-flow__card {
  --mxai-tint: var(--mxai-violet-ink-rgb);
  --mxai-tint-ink: var(--mxai-violet-ink);
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin: 0;
  padding: 1.6rem 1.25rem 1.35rem;
  /* one colour for all four (client, with a card of the reference: "these cards should be of one colour like
     these"): white, a fine grey edge, a soft grey shadow, and the brand violet as the only accent (the port,
     the icon). The blue, rose and amber of the single cards are gone. */
  border: 1px solid rgba(var(--mxai-ink-rgb), .1);
  border-radius: var(--mxai-r-lg);
  background: var(--mxai-paper);
  text-align: center;
  box-shadow: 0 1.1rem 2.6rem rgba(var(--mxai-ink-rgb), .07), 0 1px 2px rgba(var(--mxai-ink-rgb), .05);
}
/* the port where the stream enters the card */
#mxai-page .mxai-flow__card::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: .56rem; height: .56rem;
  margin: -.28rem 0 0 -.28rem;
  border-radius: 50%;
  background: var(--mxai-tint-ink);
  box-shadow: 0 0 0 3px var(--mxai-paper), 0 0 0 4px rgba(var(--mxai-tint), .34);
}
/* the mark of a card: a thin line drawing in ink that stands by itself, without a badge (client, 5 October 2026:
   "industry style icons, Stripe style, super clean", for the phone and the laptop alike; chosen from sets shown
   side by side, with a lamp in place of the sparks: "these stars scream AI"). Before that: solid glyphs in a
   tinted circle, then two-tone drawings. */
#mxai-page .mxai-flow__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--mxai-ink); }
#mxai-page .mxai-flow__icon .mxai-icon { width: 2.1rem; height: 2.1rem; }
#mxai-page .mxai-flow__title { margin: .95rem 0 .45rem; color: var(--mxai-ink); font-size: 1rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
#mxai-page .mxai-flow__text { margin: 0; color: var(--mxai-ink-2); font-size: .92rem; line-height: 1.5; }
/* the closing line of a card: Montserrat Thin (a hairline weight, so it is set larger), in black (client: the
   brand violet was too faint to read at this weight on white) */
#mxai-page .mxai-flow__stat { margin: auto 0 0; padding-top: .9rem; color: var(--mxai-ink); font-size: 1rem; font-weight: 100; line-height: 1.3; letter-spacing: .01em; }
@media (min-width: 600px) {
  #mxai-page .mxai-flow__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the lines of both drawings (wide and narrow): one violet, a hairline (the ink), round dots on it at even steps
   (the track) and a larger point that runs down it (the comet) */
#mxai-page .mxai-flow__ink,
#mxai-page .mxai-flow__track,
#mxai-page .mxai-flow__comet { fill: none; stroke: var(--mxai-violet-ink); stroke-linecap: round; }
#mxai-page .mxai-flow__ink { stroke-dasharray: 1; opacity: .45; }
#mxai-page .mxai-flow__track { stroke-dasharray: 0 var(--mxai-step); }
/* a short dash parked before the start of the path: it only shows while it travels (mxai-flow-comet) */
#mxai-page .mxai-flow__comet { stroke-dasharray: .045 1.2; stroke-dashoffset: .045; }

/* ---- up to 1100px: the diagram on a phone or a tablet
   The same picture as on a wide screen, set upright as a comb (client, 5 October 2026: "the same sections for the
   phone", "the feeding must be there on the phone too", "the cards not one under the other but with arrows at
   the sides"; then "only the logos, the Shopify logo for the website, remove the competitors", and of ten moving
   sketches the client chose this one, after a bundle of parallel lanes and a stem with named chips). Six sources
   stand in one row as round marks without their names (the names stay for screen readers); their lanes run
   down and close into Metrix. The lanes are a drawing of their own (.mxai-flow__mlanes, 360 x 370) and every
   source takes its place in the same box from --mxai-mx and --mxai-my, so marks and lanes stay together at any
   width. One link feeds the card on screen; the cards are a strip that snaps card by card, turned by a swipe or
   by the two arrows (initFlow). */
@media (max-width: 1100px) {
  #mxai-page .mxai-flow { --mxai-rw: min(100vw - 1rem, 25rem); --mxai-drop: 3.75rem; }
  #mxai-page .mxai-flow__rig {
    width: var(--mxai-rw); height: calc(var(--mxai-rw) * 1.0278);
    margin: var(--mxai-space-6) calc((100% - var(--mxai-rw)) / 2) 0;
  }
  #mxai-page .mxai-flow__floor { display: block; position: absolute; inset: 0; }
  /* dotted paper with a pool of lavender light where Metrix stands. The mask lies inside the box, so the dots
     fade to nothing and never end in an edge. In this box Metrix stands at 50% 55.8%. */
  #mxai-page .mxai-flow__floor::before {
    content: "";
    position: absolute; inset: 32% -4% -20%;
    background:
      radial-gradient(circle calc(var(--mxai-rw) * .4) at 50% 55.8%, rgba(var(--mxai-accent-rgb), .3) 0%, rgba(var(--mxai-accent-rgb), 0) 100%),
      radial-gradient(circle, rgba(var(--mxai-ink-rgb), .22) 1.1px, rgba(var(--mxai-ink-rgb), 0) 1.6px) 50% 50% / calc(var(--mxai-rw) * .05) calc(var(--mxai-rw) * .05);
    -webkit-mask-image: radial-gradient(ellipse 50% 48% at 50% 55.8%, var(--mxai-mask-on) 18%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 48% at 50% 55.8%, var(--mxai-mask-on) 18%, transparent 100%);
    pointer-events: none;
  }
  #mxai-page .mxai-flow__spin { position: absolute; inset: 0; }
  #mxai-page .mxai-flow__mlanes { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
  #mxai-page .mxai-flow__lane { --mxai-step: 11; }
  #mxai-page .mxai-flow__lane .mxai-flow__ink { stroke-width: 1.3; }
  #mxai-page .mxai-flow__lane .mxai-flow__track { stroke-width: 3.4; }
  #mxai-page .mxai-flow__lane .mxai-flow__comet { stroke-width: 6.5; }
  /* no running points here, only the marching dots (client, on the phone: "remove these big purple buses, only
     the dots stay"). They stay on the wide rig. */
  #mxai-page .mxai-flow__comet { display: none; }
  #mxai-page .mxai-flow__sources { display: block; position: absolute; inset: 0; max-width: none; }
  #mxai-page .mxai-flow__src { position: absolute; left: var(--mxai-mx); top: var(--mxai-my); width: 0; height: 0; }
  /* a source is a round mark here: the logo alone, centred on the point where its lane starts. Its name is kept
     for screen readers only. The seventh source is left out, and the website shows the Shopify mark. */
  #mxai-page .mxai-flow__src:nth-child(7) { display: none; }
  #mxai-page .mxai-flow__chip {
    position: absolute; left: 0; top: 0;
    justify-content: center; gap: 0;
    box-sizing: border-box;
    width: calc(var(--mxai-rw) * .125); height: calc(var(--mxai-rw) * .125);
    padding: 0;
    border-radius: 50%;
    translate: -50% -50%;
  }
  #mxai-page .mxai-flow__chip > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #mxai-page .mxai-flow__chip .mxai-flow__logo,
  #mxai-page .mxai-flow__chip .mxai-icon { width: 52%; height: 52%; }
  #mxai-page .mxai-flow__chip .mxai-flow__logo--m { display: block; }
  #mxai-page .mxai-flow__chip:has(.mxai-flow__logo--m) .mxai-icon { display: none; }

  /* rings spreading around Metrix (no pool of shadow under it: the disc is flat) */
  #mxai-page .mxai-flow__ripples { display: block; position: absolute; left: 50%; top: 81.08%; width: 0; height: 0; }
  #mxai-page .mxai-flow__ripples i {
    position: absolute; left: calc(var(--mxai-rw) * -.26); top: calc(var(--mxai-rw) * -.26);
    width: calc(var(--mxai-rw) * .52); height: calc(var(--mxai-rw) * .52);
    border: 1.5px solid rgba(var(--mxai-accent-deep-rgb), .5);
    border-radius: 50%;
    opacity: 0;
  }
  /* Metrix stands where the lanes close: they end behind its middle */
  #mxai-page .mxai-flow__core { position: absolute; left: 50%; top: 81.08%; width: 0; height: 0; margin: 0; }
  #mxai-page .mxai-flow__core::before { display: none; }
  #mxai-page .mxai-flow__ball {
    --mxai-ball: calc(var(--mxai-rw) * .2667);
    position: absolute; left: calc(var(--mxai-ball) / -2); top: calc(var(--mxai-ball) / -2);
  }
  #mxai-page .mxai-flow__ring {
    --mxai-fill: 100%;
    display: block;
    position: absolute; inset: -12%;
    border-radius: 50%;
    background: conic-gradient(var(--mxai-violet-ink) var(--mxai-fill), rgba(var(--mxai-violet-ink-rgb), .16) 0);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 3px), var(--mxai-mask-on) calc(100% - 2.5px));
    mask-image: radial-gradient(closest-side, transparent calc(100% - 3px), var(--mxai-mask-on) calc(100% - 2.5px));
  }

  /* what comes out: one link from behind the middle of Metrix (--mxai-hub above the foot of the rig, measured
     by initFlow) straight down to the port of the card on screen */
  #mxai-page .mxai-flow__out { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  #mxai-page .mxai-flow__links {
    --mxai-up: var(--mxai-hub, calc(var(--mxai-rw) * .1944));
    display: block;
    position: absolute; z-index: 1; left: 50%; top: calc(-1 * var(--mxai-up));
    width: 2rem; height: calc(var(--mxai-up) + var(--mxai-drop));
    margin-left: -1rem;
    max-width: none;
    overflow: visible;
    pointer-events: none;
  }
  #mxai-page .mxai-flow__link { --mxai-step: 11; }
  #mxai-page .mxai-flow__link:not(:first-child) { display: none; } /* every card is fed from the same place: the one on screen stands under Metrix */
  #mxai-page .mxai-flow__link .mxai-flow__ink { stroke-width: 1.3; }
  #mxai-page .mxai-flow__link .mxai-flow__track { stroke-width: 3.4; }
  #mxai-page .mxai-flow__link .mxai-flow__comet { stroke-width: 6.5; }
  /* the strip of cards: as wide as the screen, one card to a screen, the next ones out of sight beside it */
  #mxai-page .mxai-flow__cards {
    grid-column: 1 / -1; grid-row: 1;
    display: flex; gap: calc(var(--mxai-gutter) + .5rem);
    margin: calc(var(--mxai-drop) - .6rem) calc(-1 * var(--mxai-gutter)) 0;
    padding: .6rem var(--mxai-gutter) 3rem; /* room for the port above the card and for its shadow under it */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--mxai-gutter);
    scrollbar-width: none;
  }
  #mxai-page .mxai-flow__cards::-webkit-scrollbar { display: none; }
  #mxai-page .mxai-flow__card { flex: 0 0 100%; box-sizing: border-box; padding-inline: 3.2rem; scroll-snap-align: center; scroll-snap-stop: always; }
  /* the arrows: over the left and the right edge of the card, at half its height */
  #mxai-page .mxai-flow__arrow {
    grid-row: 1; align-self: center; z-index: 4;
    display: grid; place-items: center;
    box-sizing: border-box;
    width: 2.6rem; height: 2.6rem;
    margin: 0; padding: 0;
    border: 2px solid var(--mxai-accent);
    border-radius: 50%;
    background: var(--mxai-paper);
    color: var(--mxai-ink);
    font-family: var(--mxai-font);
    line-height: 1;
    box-shadow: 0 .5rem 1.2rem rgba(var(--mxai-ink-rgb), .12);
    translate: 0 calc(var(--mxai-drop) / 2 - 1.5rem); /* the middle of the card, not of the strip with its margins */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--mxai-dur-fast) ease, color var(--mxai-dur-fast) ease;
  }
  #mxai-page .mxai-flow__arrow--prev { grid-column: 1; justify-self: start; margin-left: -.45rem; }
  #mxai-page .mxai-flow__arrow--next { grid-column: 3; justify-self: end; margin-right: -.45rem; }
  #mxai-page .mxai-flow__arrow .mxai-icon { width: 1.15rem; height: 1.15rem; rotate: 90deg; }
  #mxai-page .mxai-flow__arrow--next .mxai-icon { rotate: -90deg; }
  #mxai-page .mxai-flow__arrow:active { background: var(--mxai-accent); color: var(--mxai-white); }
  #mxai-page .mxai-flow__arrow:focus-visible { outline: 2px solid var(--mxai-violet-ink); outline-offset: 3px; }
  #mxai-page .mxai-flow__notes { grid-column: 1 / -1; grid-row: 2; margin: -.4rem 0 0; }
}
@media (max-width: 1100px) and (hover: hover) {
  #mxai-page .mxai-flow__arrow:hover { background: var(--mxai-accent); color: var(--mxai-white); }
}
/* without the script the strip still turns under a finger, but the arrows would do nothing */
#mxai-page:not(.mxai-js) .mxai-flow__arrow { display: none; }
/* a tablet: the strip keeps the measure of a card */
@media (min-width: 600px) and (max-width: 1100px) {
  #mxai-page .mxai-flow__out { max-width: 30rem; margin-inline: auto; }
}

/* ---- from 1101px: the 3D rig */
@media (min-width: 1101px) {
  /* --mxai-meet: where the lanes meet on the floor, as a share of its depth. It is the point that lies exactly
     behind the middle of the sphere as the viewer sees it (measured in the browser: the sphere stands in front
     of it, at 83.871%), so lines, rings and sphere share one centre on screen. In the lane drawing it is
     y = 425.1 of 620. */
  #mxai-page .mxai-flow { --mxai-rw: min(66.25rem, 100vw - 2 * var(--mxai-gutter)); --mxai-drop: 6.5rem; --mxai-meet: 68.561%; }
  #mxai-page .mxai-flow__rig {
    width: var(--mxai-rw); height: calc(var(--mxai-rw) * .31);
    margin: var(--mxai-space-5) auto 0;
    perspective: calc(var(--mxai-rw) * 1.3);
    perspective-origin: 50% 30%;
  }
  /* the floor is hinged on its near edge (the bottom of the rig), so that edge never moves with the camera */
  #mxai-page .mxai-flow__floor {
    display: block;
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: calc(var(--mxai-rw) * .5167);
    transform-origin: 50% 100%;
    transform: rotateX(var(--mxai-tilt));
    transform-style: preserve-3d;
  }
  /* dotted paper with a pool of lavender light where Metrix stands. It reaches well past the floor on every
     side (towards the viewer too, under the streams) and its mask is an ellipse that lies wholly inside it, so
     the dots fade to nothing and never end in a cut edge. In this box the lanes meet at 50% 47.5%. */
  #mxai-page .mxai-flow__floor::before {
    content: "";
    position: absolute; inset: -16% -16% -62%;
    background:
      radial-gradient(circle calc(var(--mxai-rw) * .3) at 50% 47.5%, rgba(var(--mxai-accent-rgb), .3) 0%, rgba(var(--mxai-accent-rgb), 0) 100%),
      radial-gradient(circle, rgba(var(--mxai-ink-rgb), .24) 1.2px, rgba(var(--mxai-ink-rgb), 0) 1.7px) 50% 50% / calc(var(--mxai-rw) * .026) calc(var(--mxai-rw) * .026);
    -webkit-mask-image: radial-gradient(ellipse 50% 44% at 50% 53%, var(--mxai-mask-on) 22%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 44% at 50% 53%, var(--mxai-mask-on) 22%, transparent 100%);
    pointer-events: none;
  }
  /* everything that turns around Metrix (the lanes and the pins): it turns about the point where the lanes meet */
  #mxai-page .mxai-flow__spin {
    position: absolute; inset: 0;
    transform-origin: 50% var(--mxai-meet);
    transform: rotateZ(calc(var(--mxai-yaw) + var(--mxai-turn)));
    transform-style: preserve-3d;
  }
  #mxai-page .mxai-flow__lanes { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  /* The lines, as on the reference the client pointed to ("their lines are purple, I want ours like that, more
     precise"): one violet for every line, a hairline (the ink) with small round dots on it at even steps (the
     track: a dash of no length with round caps is a dot; --mxai-step is the distance from dot to dot) that
     march towards the sphere, and from the sphere to the cards. The lines feed all the time (client, right
     after: "why are they not animated now, they must be feeding constantly"): the dots never stop marching, and
     a larger point of the same violet (the comet) runs down every line again and again, one line after the
     other. No channel colours. */
  #mxai-page .mxai-flow__lane { --mxai-step: 13; }
  #mxai-page .mxai-flow__lane .mxai-flow__ink { stroke-width: 1.6; }
  #mxai-page .mxai-flow__lane .mxai-flow__track { stroke-width: 4.4; }
  #mxai-page .mxai-flow__lane .mxai-flow__comet { stroke-width: 8.5; }

  #mxai-page .mxai-flow__sources { display: block; position: absolute; inset: 0; max-width: none; transform-style: preserve-3d; }
  #mxai-page .mxai-flow__src { position: absolute; left: var(--mxai-x); top: var(--mxai-y); width: 0; height: 0; transform-style: preserve-3d; }
  /* the point on the floor where a lane starts */
  #mxai-page .mxai-flow__src::before {
    content: "";
    position: absolute; left: -5px; top: -5px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--mxai-violet-ink);
    box-shadow: 0 0 0 4px rgba(var(--mxai-accent-rgb), .28);
  }
  /* a pin: the chip undoes the turn and the tilt of the floor, so it faces the viewer upright and sharp while
     the perspective scales it by depth; it stands on a stem above its point */
  #mxai-page .mxai-flow__chip {
    --mxai-stem: calc(var(--mxai-rw) * .034);
    position: absolute; left: 0; bottom: 0;
    font-size: clamp(.72rem, calc(var(--mxai-rw) * .0142), .98rem);
    translate: -50% 0;
    transform-origin: 50% 100%;
    transform: rotateZ(calc(-1 * (var(--mxai-yaw) + var(--mxai-turn)))) rotateX(calc(-1 * var(--mxai-tilt))) translateY(calc(-1 * var(--mxai-stem)));
    transition: border-color var(--mxai-dur-fast) ease, box-shadow var(--mxai-dur-fast) ease;
  }
  #mxai-page .mxai-flow__chip::after {
    content: "";
    position: absolute; left: 50%; top: 100%;
    width: 1.5px; height: var(--mxai-stem);
    margin-left: -.75px;
    background: linear-gradient(180deg, rgba(var(--mxai-violet-ink-rgb), .65), rgba(var(--mxai-violet-ink-rgb), .2));
  }
  #mxai-page .mxai-flow__src:hover .mxai-flow__chip { border-color: rgba(var(--mxai-violet-ink-rgb), .55); box-shadow: 0 .9em 2em rgba(var(--mxai-violet-ink-rgb), .22), 0 1px 2px rgba(var(--mxai-ink-rgb), .08); }
  /* pointing at a source brings its lane forward: the hairline becomes a full line */
  #mxai-page .mxai-flow__spin:has(.mxai-flow__src:nth-child(1):hover) .mxai-flow__lane:nth-child(1) .mxai-flow__ink,
  #mxai-page .mxai-flow__spin:has(.mxai-flow__src:nth-child(2):hover) .mxai-flow__lane:nth-child(2) .mxai-flow__ink,
  #mxai-page .mxai-flow__spin:has(.mxai-flow__src:nth-child(3):hover) .mxai-flow__lane:nth-child(3) .mxai-flow__ink,
  #mxai-page .mxai-flow__spin:has(.mxai-flow__src:nth-child(4):hover) .mxai-flow__lane:nth-child(4) .mxai-flow__ink,
  #mxai-page .mxai-flow__spin:has(.mxai-flow__src:nth-child(5):hover) .mxai-flow__lane:nth-child(5) .mxai-flow__ink,
  #mxai-page .mxai-flow__spin:has(.mxai-flow__src:nth-child(6):hover) .mxai-flow__lane:nth-child(6) .mxai-flow__ink,
  #mxai-page .mxai-flow__spin:has(.mxai-flow__src:nth-child(7):hover) .mxai-flow__lane:nth-child(7) .mxai-flow__ink { opacity: 1; stroke-width: 2.6; }

  /* rings spreading over the floor around Metrix, centred where the lanes meet (no pool of shadow under it: the
     disc is flat) */
  #mxai-page .mxai-flow__ripples { display: block; position: absolute; left: 50%; top: var(--mxai-meet); width: 0; height: 0; }
  #mxai-page .mxai-flow__ripples i {
    position: absolute; left: calc(var(--mxai-rw) * -.16); top: calc(var(--mxai-rw) * -.16);
    width: calc(var(--mxai-rw) * .32); height: calc(var(--mxai-rw) * .32);
    border: 1.5px solid rgba(var(--mxai-accent-deep-rgb), .6);
    border-radius: 50%;
    opacity: 0;
  }
  /* the sphere stands on the floor in front of the point where the lanes meet and faces the viewer: seen from
     the camera its middle covers that point exactly */
  #mxai-page .mxai-flow__core { position: absolute; left: 50%; top: 83.871%; width: 0; height: 0; margin: 0; transform-style: preserve-3d; }
  #mxai-page .mxai-flow__core::before { display: none; }
  #mxai-page .mxai-flow__ball {
    --mxai-ball: calc(var(--mxai-rw) * .1);
    position: absolute; left: calc(var(--mxai-ball) / -2); bottom: 0;
    transform-origin: 50% 100%;
    transform: rotateX(calc(-1 * var(--mxai-tilt)));
  }
  /* the ring around it fills as the channels connect (--mxai-fill) */
  #mxai-page .mxai-flow__ring {
    --mxai-fill: 100%;
    display: block;
    position: absolute; inset: -12%;
    border-radius: 50%;
    background: conic-gradient(var(--mxai-violet-ink) var(--mxai-fill), rgba(var(--mxai-violet-ink-rgb), .16) 0);
    -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 3px), var(--mxai-mask-on) calc(100% - 2.5px));
    mask-image: radial-gradient(closest-side, transparent calc(100% - 3px), var(--mxai-mask-on) calc(100% - 2.5px));
  }

  /* the links come straight out of the sphere: they start behind its middle (--mxai-hub above the bottom of
     the rig, measured by initFlow; the sphere is a layer above them) and end on the port of each card */
  #mxai-page .mxai-flow__links {
    --mxai-up: var(--mxai-hub, calc(var(--mxai-rw) * .105));
    display: block;
    position: absolute; z-index: 1; left: calc(var(--mxai-gap) / -2); top: calc(-1 * var(--mxai-up));
    width: calc(100% + var(--mxai-gap)); height: calc(var(--mxai-up) + var(--mxai-drop));
    max-width: none; /* the page caps every svg at 100%: with the cap the drawing was one gap too narrow and every link ended a little to the left of its port, more so with each card */
    overflow: visible;
    pointer-events: none;
  }
  #mxai-page .mxai-flow__link { --mxai-step: 11; }
  #mxai-page .mxai-flow__link .mxai-flow__ink { stroke-width: 1.4; }
  #mxai-page .mxai-flow__link .mxai-flow__track { stroke-width: 3.6; }
  #mxai-page .mxai-flow__link .mxai-flow__comet { stroke-width: 7; }
  #mxai-page .mxai-flow__out { --mxai-gap: 1.1rem; display: flow-root; } /* flow-root: its top stays at the bottom of the rig */
  #mxai-page .mxai-flow__notes {
    position: absolute; left: 0; right: 0; top: calc(var(--mxai-hub, calc(var(--mxai-rw) * .105)) * -.4);
    justify-content: space-between;
    margin: 0;
  }
  #mxai-page .mxai-flow__cards { --mxai-gap: 1.1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--mxai-drop); }
}
/* initFlow measures where the sphere stands with the camera at rest, whatever the scroll is doing to it */
#mxai-page .mxai-integrations.is-measure .mxai-flow__rig,
#mxai-page .mxai-integrations.is-measure .mxai-flow__floor { --mxai-tilt: 56deg !important; --mxai-yaw: 0deg !important; --mxai-turn: 0deg !important; }
#mxai-page .mxai-integrations.is-measure .mxai-flow__core { scale: none !important; }
#mxai-page .mxai-integrations.is-still .mxai-flow__rig,
#mxai-page .mxai-integrations.is-still .mxai-flow__core { transition: none !important; }

/* the motion that runs by itself, only while the section is on screen (.is-live, set by initFlow) */
@keyframes mxai-flow-march { to { stroke-dashoffset: calc(-1px * var(--mxai-step)); } } /* exactly one step, so the loop has no jump. A length (px), not a bare number: from 0 to a number the browser cannot interpolate, the offset then flips by one whole step half way and nothing seems to move */
@keyframes mxai-flow-comet { from { stroke-dashoffset: .045; } to { stroke-dashoffset: -1; } }
@keyframes mxai-flow-ripple { from { scale: .3; opacity: .75; } to { scale: 1; opacity: 0; } }
@keyframes mxai-flow-sway { from { --mxai-turn: -3deg; } to { --mxai-turn: 3deg; } }
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
  #mxai-page .mxai-integrations.is-live .mxai-flow__floor { animation: mxai-flow-sway 9s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: no-preference) {
  /* a calm feed (the first speeds were "like Formula 1" for the client): a step of the dots takes 1.8s, a point
     takes 6s down a lane and 4.6s down a link */
  #mxai-page .mxai-integrations.is-live .mxai-flow__track { animation: mxai-flow-march 1.8s linear infinite; }
  #mxai-page .mxai-integrations.is-live .mxai-flow__comet { animation: mxai-flow-comet 6s linear infinite; animation-delay: calc(var(--mxai-k) * -.86s); }
  #mxai-page .mxai-integrations.is-live .mxai-flow__link .mxai-flow__comet { animation-duration: 4.6s; animation-delay: calc(var(--mxai-k) * -1.15s - .3s); }
  #mxai-page .mxai-integrations.is-live .mxai-flow__ripples i { animation: mxai-flow-ripple 3.6s linear infinite; }
  #mxai-page .mxai-integrations.is-live .mxai-flow__ripples i:nth-child(2) { animation-delay: -1.2s; }
  #mxai-page .mxai-integrations.is-live .mxai-flow__ripples i:nth-child(3) { animation-delay: -2.4s; }
}
/* ---- the entrance. The section is not tied to the scroll: when it is reached (.is-in, set once by initFlow) it
   builds itself by the clock in about two seconds: the headline, the sphere, the pins, the lanes, the ring,
   the streams and the cards, while the camera settles. Without the script, or with reduced motion, everything
   is simply there. */
@media (prefers-reduced-motion: no-preference) {
  /* the page-wide scroll reveal of headings does not apply here */
  #mxai-page.mxai-sda .mxai-section.mxai-integrations .mxai-flow__head .mxai-h2 > span { animation: none; }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__rig { transition: --mxai-tilt 1.6s var(--mxai-ease), --mxai-yaw 1.6s var(--mxai-ease); }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__floor::before { transition: opacity 1s ease; }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__core { transition: scale .75s cubic-bezier(.34, 1.4, .64, 1) .1s; }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__ripples { transition: opacity .8s ease .6s; }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__src { --mxai-d: calc(.25s + var(--mxai-k) * 70ms); }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__src::before { transition: opacity .4s ease var(--mxai-d); }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__chip { transition: opacity .45s ease var(--mxai-d), scale .6s var(--mxai-ease) var(--mxai-d), border-color var(--mxai-dur-fast) ease, box-shadow var(--mxai-dur-fast) ease; }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__lane .mxai-flow__ink { transition: stroke-dashoffset .9s var(--mxai-ease-io) calc(.5s + var(--mxai-k) * 80ms), opacity var(--mxai-dur-fast) ease; }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__lane .mxai-flow__track { transition: opacity .5s ease calc(.9s + var(--mxai-k) * 80ms); }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__lane .mxai-flow__comet { transition: visibility 0s linear calc(1.4s + var(--mxai-k) * 80ms); }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__ring { transition: --mxai-fill 1.1s ease .7s; }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__link .mxai-flow__ink { transition: stroke-dashoffset .7s var(--mxai-ease-io) calc(1.05s + var(--mxai-k) * 90ms); }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__link .mxai-flow__track { transition: opacity .5s ease calc(1.35s + var(--mxai-k) * 90ms); }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__link .mxai-flow__comet { transition: visibility 0s linear calc(1.75s + var(--mxai-k) * 90ms); }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__note { transition: opacity .6s ease 1.3s; }
  #mxai-page.mxai-js .mxai-integrations .mxai-flow__card { transition: opacity .6s ease calc(1.2s + var(--mxai-k) * 100ms), translate .7s var(--mxai-ease) calc(1.2s + var(--mxai-k) * 100ms); }
  /* how it waits before it is reached */
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__rig { --mxai-tilt: 68deg; --mxai-yaw: -18deg; }
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__floor::before,
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__ripples,
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__src::before,
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__chip,
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__track,
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__note,
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__card { opacity: 0; }
  /* scales are given on all three axes: these elements lie in the floor and what they carry stands up from it */
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__core { scale: .001 .001 .001; }
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__chip { scale: .4 .4 .4; }
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__ink { stroke-dashoffset: 1; }
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__comet { visibility: hidden; }
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__ring { --mxai-fill: 0%; }
  #mxai-page.mxai-js .mxai-integrations:not(.is-in) .mxai-flow__card { translate: 0 1.75rem; }
}

/* --------------------------------------------------------------------------
   8. OLD WAY VS THE METRIX WAY
   -------------------------------------------------------------------------- */
#mxai-page .mxai-compare__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 1040px;
  border: 1px solid var(--mxai-border);
  border-radius: var(--mxai-r-xl);
  background: var(--mxai-surface);
  box-shadow: var(--mxai-shadow-card);
}
#mxai-page .mxai-compare__col { padding: clamp(1.75rem, 4vw, 3rem); }
#mxai-page .mxai-compare__heading {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 var(--mxai-space-5);
  color: var(--mxai-muted);
  font-size: var(--mxai-fs-h3);
  font-weight: 700;
  letter-spacing: var(--mxai-ls-snug);
  line-height: 1.2;
}
#mxai-page .mxai-compare__heading .mxai-icon { width: 1.25em; height: 1.25em; color: var(--mxai-accent); }
#mxai-page .mxai-compare__list { display: grid; gap: 1rem; }
#mxai-page .mxai-compare__row { display: flex; align-items: flex-start; gap: .9rem; color: var(--mxai-muted); font-size: 1rem; line-height: 1.45; }
#mxai-page .mxai-compare__ico {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem;
  margin-top: .05rem;
  border-radius: 50%;
  background: rgba(var(--mxai-white-rgb), .06);
  color: var(--mxai-muted-2);
}
#mxai-page .mxai-compare__ico .mxai-icon { width: .9rem; height: .9rem; }
#mxai-page .mxai-compare__col--new {
  position: relative;
  margin: -1.25rem -1px -1.25rem 0;
  border: 1px solid rgba(var(--mxai-accent-rgb), .45);
  border-radius: var(--mxai-r-xl);
  background:
    var(--mxai-glow-panel),
    linear-gradient(180deg, rgba(var(--mxai-accent-rgb), .12) 0%, rgba(var(--mxai-accent-deep-rgb), .05) 100%),
    var(--mxai-surface-2);
  box-shadow: 0 40px 90px rgba(var(--mxai-black-rgb), .55), 0 0 80px rgba(var(--mxai-accent-deep-rgb), .28), 0 1px 0 rgba(var(--mxai-white-rgb), .08) inset;
}
#mxai-page .mxai-compare__col--new .mxai-compare__heading { color: var(--mxai-text); }
#mxai-page .mxai-compare__col--new .mxai-compare__row { color: var(--mxai-text-2); }
#mxai-page .mxai-compare__col--new .mxai-compare__ico { background: rgba(var(--mxai-accent-rgb), .16); color: var(--mxai-accent-lighter); }

/* --------------------------------------------------------------------------
   9. GALLERY (bento) AND SCREENSHOT FRAMES
   -------------------------------------------------------------------------- */
#mxai-page .mxai-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  gap: 1.25rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}
#mxai-page .mxai-bento__item--a { grid-column: 1 / 3; grid-row: 1 / 3; }
#mxai-page .mxai-bento__item--b { grid-column: 3; grid-row: 1; }
#mxai-page .mxai-bento__item--c { grid-column: 3; grid-row: 2; }
#mxai-page .mxai-bento__item--d { grid-column: 1; grid-row: 3; }
#mxai-page .mxai-bento__item--e { grid-column: 2 / 4; grid-row: 3; }

#mxai-page .mxai-shot { display: flex; flex-direction: column; min-width: 0; }
#mxai-page .mxai-shot__frame {
  position: relative;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--mxai-border);
  border-radius: var(--mxai-r-lg);
  background: var(--mxai-surface-screen);
  box-shadow: var(--mxai-shadow-frame);
  overflow: hidden;
  transition: transform var(--mxai-dur-slow) var(--mxai-ease), border-color var(--mxai-dur) ease;
}
#mxai-page .mxai-shot:hover .mxai-shot__frame { transform: translateY(-4px); border-color: rgba(var(--mxai-accent-rgb), .35); }
#mxai-page .mxai-shot__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--mxai-white-rgb), .03), transparent 30%);
  pointer-events: none;
}
#mxai-page .mxai-shot__bar {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
  height: 2.1rem;
  padding: 0 .9rem;
  border-bottom: 1px solid var(--mxai-border-soft);
  background: rgba(var(--mxai-white-rgb), .025);
}
#mxai-page .mxai-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--mxai-white-rgb), .12); }
#mxai-page .mxai-shot__bar i:first-child { background: rgba(var(--mxai-accent-rgb), .55); }
#mxai-page .mxai-shot__body { position: relative; flex: 1 1 auto; min-height: 180px; }
#mxai-page .mxai-shot__caption {
  display: flex; align-items: center; gap: .75rem;
  margin: .9rem 0 0;
  color: var(--mxai-muted);
  font-size: var(--mxai-fs-sm);
}
#mxai-page .mxai-shot__tag {
  padding: .25rem .55rem;
  border: 1px solid var(--mxai-border);
  border-radius: var(--mxai-r-sm);
  color: var(--mxai-muted-2);
  font-family: var(--mxai-font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}

/* Real platform screenshots (already blurred on disk by tools/blur-screenshots.sh) */
#mxai-page .mxai-shot__img,
#mxai-page .mxai-tabs__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 0 0;
}
#mxai-page .mxai-shot__body--photo::after,
#mxai-page .mxai-tabs__panel--photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--mxai-glass-rgb), .08), rgba(var(--mxai-glass-rgb), .38));
  box-shadow: 0 0 0 1px rgba(var(--mxai-white-rgb), .06) inset;
  pointer-events: none;
}

/* Placeholder UI patterns (until real screenshots are dropped into assets/screenshots) */
#mxai-page .mxai-mock { --mxai-mock-line: rgba(var(--mxai-white-rgb), .08); --mxai-mock-tile: rgba(var(--mxai-white-rgb), .04); position: absolute; inset: 0; padding: 4.5%; background: radial-gradient(90% 60% at 50% 0%, rgba(var(--mxai-accent-deep-rgb), .16), transparent 70%); }
#mxai-page .mxai-mock i, #mxai-page .mxai-mock b, #mxai-page .mxai-mock em { display: block; }
#mxai-page .mxai-mock--dashboard { display: grid; grid-template-columns: 17% 1fr; gap: 4.5%; }
#mxai-page .mxai-mock__side { display: grid; align-content: start; gap: 10%; padding-top: 4%; border-right: 1px solid var(--mxai-border-soft); padding-right: 12%; }
#mxai-page .mxai-mock__side i { height: 7px; border-radius: 4px; background: var(--mxai-mock-line); }
#mxai-page .mxai-mock__side i:first-child { background: rgba(var(--mxai-accent-rgb), .55); width: 80%; }
#mxai-page .mxai-mock__main { display: grid; grid-template-rows: auto 1fr auto; gap: 5%; min-height: 0; }
#mxai-page .mxai-mock__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5%; }
#mxai-page .mxai-mock__tiles b { height: clamp(28px, 18%, 54px); aspect-ratio: 2.6; border-radius: 8px; border: 1px solid var(--mxai-border-soft); background: var(--mxai-mock-tile); position: relative; }
#mxai-page .mxai-mock__tiles b::before { content: ""; position: absolute; left: 12%; top: 22%; width: 40%; height: 5px; border-radius: 3px; background: var(--mxai-mock-line); }
#mxai-page .mxai-mock__tiles b::after { content: ""; position: absolute; left: 12%; bottom: 22%; width: 26%; height: 8px; border-radius: 3px; background: rgba(var(--mxai-accent-rgb), .55); }
#mxai-page .mxai-mock__tiles b:nth-child(3)::after { background: rgba(var(--mxai-green-rgb), .6); }
#mxai-page .mxai-mock__chart { width: 100%; height: 100%; min-height: 60px; border-radius: 8px; border: 1px solid var(--mxai-border-soft); background: var(--mxai-mock-tile); }
#mxai-page .mxai-mock__chart path { fill: none; stroke: var(--mxai-accent-lighter); stroke-width: 2; vector-effect: non-scaling-stroke; }
#mxai-page .mxai-mock__chart .mxai-mock__chart-2 { stroke: var(--mxai-gold); stroke-width: 1.25; opacity: .8; }
#mxai-page .mxai-mock__rows { display: grid; gap: 7px; }
#mxai-page .mxai-mock__rows i { height: 7px; border-radius: 4px; background: var(--mxai-mock-line); }
#mxai-page .mxai-mock__rows i:nth-child(2) { width: 72%; }
#mxai-page .mxai-mock__rows i:nth-child(3) { width: 86%; }
#mxai-page .mxai-mock__rows i:nth-child(4) { width: 60%; }

#mxai-page .mxai-mock--table { display: grid; align-content: start; gap: 6%; }
#mxai-page .mxai-mock__thead, #mxai-page .mxai-mock__trow { display: grid; grid-template-columns: 2.2fr 1fr 1fr .9fr; gap: 5%; align-items: center; }
#mxai-page .mxai-mock__thead i { height: 6px; border-radius: 3px; background: rgba(var(--mxai-white-rgb), .14); }
#mxai-page .mxai-mock__trow { padding: 4% 0; border-top: 1px solid var(--mxai-border-soft); }
#mxai-page .mxai-mock__trow i { height: 8px; border-radius: 4px; background: var(--mxai-mock-line); }
#mxai-page .mxai-mock__pill { height: 12px; border-radius: 6px; background: rgba(var(--mxai-white-rgb), .1); }
#mxai-page .mxai-mock__pill--ok { background: rgba(var(--mxai-green-rgb), .45); }
#mxai-page .mxai-mock__pill--warn { background: rgba(var(--mxai-gold-rgb), .5); }

#mxai-page .mxai-mock--bars { display: grid; align-content: center; gap: 9%; }
#mxai-page .mxai-mock__bar { position: relative; height: 12px; border-radius: 6px; background: var(--mxai-mock-tile); overflow: hidden; }
#mxai-page .mxai-mock__bar i { width: var(--mxai-v, 50%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--mxai-accent-deep-rgb), .8), var(--mxai-accent)); }
#mxai-page .mxai-mock__bar:nth-child(2) i { background: linear-gradient(90deg, rgba(var(--mxai-white-rgb), .12), rgba(var(--mxai-white-rgb), .28)); }
#mxai-page .mxai-mock__bar:nth-child(n+3) i { background: rgba(var(--mxai-white-rgb), .12); }

#mxai-page .mxai-mock--chat { display: grid; align-content: end; gap: 5%; }
#mxai-page .mxai-mock__msg { width: 62%; height: 14%; min-height: 28px; margin-left: auto; border-radius: 14px 14px 4px 14px; background: rgba(var(--mxai-accent-rgb), .18); border: 1px solid rgba(var(--mxai-accent-rgb), .25); }
#mxai-page .mxai-mock__msg--ai { width: 78%; height: 26%; min-height: 40px; margin-left: 0; margin-right: auto; border-radius: 14px 14px 14px 4px; background: var(--mxai-mock-tile); border-color: var(--mxai-border-soft); position: relative; }
#mxai-page .mxai-mock__msg--ai::before, #mxai-page .mxai-mock__msg--ai::after { content: ""; position: absolute; left: 8%; height: 6px; border-radius: 3px; background: var(--mxai-mock-line); }
#mxai-page .mxai-mock__msg--ai::before { top: 28%; width: 70%; }
#mxai-page .mxai-mock__msg--ai::after { top: 55%; width: 45%; }
#mxai-page .mxai-mock__msg--short { height: 16%; min-height: 30px; width: 46%; }

#mxai-page .mxai-mock--launcher { display: grid; grid-template-columns: 1fr 1.1fr; gap: 6%; }
#mxai-page .mxai-mock__form { display: grid; align-content: start; gap: 8%; }
#mxai-page .mxai-mock__form i { height: 22px; border-radius: 6px; border: 1px solid var(--mxai-border-soft); background: var(--mxai-mock-tile); }
#mxai-page .mxai-mock__form-wide { min-height: 44px; }
#mxai-page .mxai-mock__form b { height: 24px; width: 48%; border-radius: 12px; background: var(--mxai-gradient-btn); opacity: .9; }
#mxai-page .mxai-mock__preview { display: grid; align-content: start; gap: 6%; padding: 6%; border-radius: 10px; border: 1px solid var(--mxai-border-soft); background: var(--mxai-mock-tile); }
#mxai-page .mxai-mock__preview em { aspect-ratio: 1.9; border-radius: 6px; background: linear-gradient(135deg, rgba(var(--mxai-accent-deep-rgb), .5), rgba(var(--mxai-accent-rgb), .15)); }
#mxai-page .mxai-mock__preview i { height: 6px; border-radius: 3px; background: var(--mxai-mock-line); }
#mxai-page .mxai-mock__preview i:last-child { width: 60%; }

/* --------------------------------------------------------------------------
   10. PRODUCT SHOWCASE (tabs + CSS laptop)
   -------------------------------------------------------------------------- */
#mxai-page .mxai-tabs { margin: clamp(2rem, 4vw, 3rem) 0 0; }
#mxai-page .mxai-tabs__list {
  display: flex;
  gap: .25rem;
  width: max-content;
  max-width: 100%;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: .3rem;
  border: 1px solid var(--mxai-border);
  border-radius: var(--mxai-r-pill);
  background: rgba(var(--mxai-white-rgb), .04);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#mxai-page .mxai-tabs__list::-webkit-scrollbar { display: none; }
#mxai-page .mxai-tabs__tab {
  flex: 0 0 auto;
  padding: .7rem 1.15rem;
  border-radius: var(--mxai-r-pill);
  color: var(--mxai-muted);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--mxai-dur-fast) ease, background-color var(--mxai-dur-fast) ease, box-shadow var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-tabs__tab:hover { color: var(--mxai-text); }
#mxai-page .mxai-tabs__tab[aria-selected="true"] {
  color: var(--mxai-text);
  background: rgba(var(--mxai-accent-rgb), .16);
  box-shadow: 0 0 0 1px rgba(var(--mxai-accent-rgb), .4) inset, 0 0 24px rgba(var(--mxai-accent-deep-rgb), .3);
}
#mxai-page .mxai-tabs__tab:focus-visible { border-radius: var(--mxai-r-pill); outline-offset: -2px; }

#mxai-page .mxai-laptop {
  position: relative;
  isolation: isolate;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 4%;
  transform-origin: 50% 100%;
}
/* The ring of light from the compare scene lands here, behind the laptop (see mxai-s-ring-fly in section 18) */
#mxai-page .mxai-showcase__ring {
  position: absolute; z-index: -1;
  /* centred on the laptop and sized from its width: the bright line sits just outside the top and bottom
     edges and the glow ends before the tabs, so nothing lies behind the tab labels */
  left: 50%; top: 50%;
  width: 68%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side,
    transparent 64%,
    rgba(var(--mxai-accent-deep-rgb), .4) 76%,
    var(--mxai-accent-mid) 85%,
    var(--mxai-accent-hot) 88%,
    var(--mxai-accent) 91%,
    rgba(var(--mxai-accent-deep-rgb), .5) 96%,
    transparent 100%);
  opacity: .9;
  pointer-events: none;
}
#mxai-page .mxai-showcase .mxai-h2,
#mxai-page .mxai-showcase .mxai-tabs__list { position: relative; z-index: 2; }
/* blueprint and data cards belong to the pinned desktop scene (section 18) */
#mxai-page .mxai-showcase__plan, #mxai-page .mxai-showcase__cards, #mxai-page .mxai-showcase__ui, #mxai-page .mxai-showcase__gl { display: none; }
/* text and extra cards that only the 3D board reads */
#mxai-page .mxai-showcase__meta, #mxai-page .mxai-drop--gl { display: none !important; }
#mxai-page .mxai-showcase__copy { display: flex; flex-direction: column; align-items: center; }
#mxai-page .mxai-showcase__cta { margin: 0 0 clamp(2rem, 4vw, 3rem); }
/* Desktop: heading, tabs and laptop fit on one screen */
@media (min-width: 1024px) and (min-height: 640px) {
  #mxai-page .mxai-showcase { padding: clamp(2.5rem, 6vh, 4.5rem) 0; }
  #mxai-page .mxai-showcase .mxai-laptop { max-width: min(980px, calc((100vh - 22rem) * 1.48)); }
}
#mxai-page .mxai-laptop__lid {
  position: relative;
  padding: 1.8% 1.8% 0;
  border: 1px solid var(--mxai-bezel-edge);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, var(--mxai-bezel-hi), var(--mxai-bezel));
  box-shadow: var(--mxai-shadow-frame);
}
#mxai-page .mxai-laptop__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px 10px 0 0;
  background: var(--mxai-surface-screen);
  border: 1px solid rgba(var(--mxai-white-rgb), .06);
  border-bottom: 0;
  overflow: hidden;
}
#mxai-page .mxai-laptop__camera {
  position: absolute; left: 50%; top: 6px; z-index: 3;
  width: 6px; height: 6px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--mxai-bezel-cam);
  box-shadow: 0 0 0 2px var(--mxai-bezel-cam-ring);
}
#mxai-page .mxai-laptop__base {
  position: relative;
  height: 20px;
  margin: 0 -4%;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, var(--mxai-base-hi) 0%, var(--mxai-base-mid) 40%, var(--mxai-base-lo) 100%);
  border-top: 1px solid rgba(var(--mxai-white-rgb), .14);
  box-shadow: 0 30px 60px rgba(var(--mxai-black-rgb), .55);
}
#mxai-page .mxai-laptop__base i {
  position: absolute; left: 50%; top: 0;
  width: 14%; height: 5px;
  transform: translateX(-50%);
  border-radius: 0 0 6px 6px;
  background: var(--mxai-base-lip);
}
#mxai-page .mxai-laptop::after {
  content: "";
  position: absolute; left: 10%; right: 10%; bottom: -40px;
  height: 80px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--mxai-accent-deep-rgb), .35), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}
#mxai-page .mxai-tabs__panels { position: absolute; inset: 0; }
#mxai-page .mxai-tabs__panel {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .55s var(--mxai-ease-io), transform .55s var(--mxai-ease);
}
#mxai-page .mxai-tabs__panel.is-active { opacity: 1; transform: none; }
#mxai-page .mxai-tabs__panel[hidden] { display: none; }
#mxai-page .mxai-tabs__panel:focus-visible { outline-offset: -3px; border-radius: 0; }
#mxai-page .mxai-mock--screen { padding: 4% 4.5%; }

@supports (animation-timeline: view()) {
  #mxai-page.mxai-js .mxai-laptop {
    animation: mxai-laptop-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
}
@keyframes mxai-laptop-enter {
  from { transform: perspective(1600px) rotateX(9deg) translateY(36px); opacity: .55; }
  to { transform: perspective(1600px) rotateX(0) translateY(0); opacity: 1; }
}

/* --------------------------------------------------------------------------
   11. RESULTS
   -------------------------------------------------------------------------- */
#mxai-page .mxai-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  border: 1px solid var(--mxai-border-soft);
  border-radius: var(--mxai-r-xl);
  background: linear-gradient(180deg, rgba(var(--mxai-white-rgb), .03), transparent);
  overflow: hidden;
}
#mxai-page .mxai-stat {
  position: relative;
  display: flex; flex-direction: column;
  gap: .4rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.25rem);
  border-left: 1px solid var(--mxai-border-soft);
}
#mxai-page .mxai-stat:first-child { border-left: 0; }
#mxai-page .mxai-stat::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--mxai-accent-rgb), .6), transparent);
  opacity: .6;
}
#mxai-page .mxai-stat__value {
  display: inline-flex; align-items: baseline;
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--mxai-ls-tight);
  background: var(--mxai-gradient-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
#mxai-page .mxai-stat__suffix { font-size: .55em; margin-left: .05em; }
#mxai-page .mxai-stat__label { color: var(--mxai-text-2); font-size: 1rem; font-weight: 500; line-height: 1.35; }
#mxai-page .mxai-stat__source {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .35rem;
  color: var(--mxai-muted-2);
  font-size: var(--mxai-fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#mxai-page .mxai-stat__source::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mxai-accent); opacity: .8; }

/* --------------------------------------------------------------------------
   12. HOW IT WORKS
   -------------------------------------------------------------------------- */
#mxai-page .mxai-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 1040px;
  counter-reset: mxai-step;
}
#mxai-page .mxai-steps::before {
  content: "";
  position: absolute;
  left: calc(100% / 6); right: calc(100% / 6); top: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--mxai-accent-rgb), .5) 20%, rgba(var(--mxai-accent-rgb), .5) 80%, transparent);
  -webkit-mask-image: repeating-linear-gradient(90deg, var(--mxai-mask-on) 0 8px, transparent 8px 14px);
  mask-image: repeating-linear-gradient(90deg, var(--mxai-mask-on) 0 8px, transparent 8px 14px);
}
#mxai-page .mxai-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
#mxai-page .mxai-step__num {
  position: relative;
  display: grid; place-items: center;
  width: 4rem; height: 4rem;
  margin: 0 0 var(--mxai-space-5);
  border: 1px solid rgba(var(--mxai-accent-rgb), .35);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(var(--mxai-accent-rgb), .22), rgba(var(--mxai-glass-rgb), .95) 70%), var(--mxai-surface);
  color: var(--mxai-accent-lighter);
  box-shadow: 0 0 0 8px var(--mxai-bg), 0 0 40px rgba(var(--mxai-accent-deep-rgb), .35);
}
#mxai-page .mxai-step__num .mxai-icon { width: 1.5rem; height: 1.5rem; }
#mxai-page .mxai-step__index {
  position: absolute; top: -.35rem; right: -.35rem;
  display: grid; place-items: center;
  width: 1.45rem; height: 1.45rem;
  border-radius: 50%;
  background: var(--mxai-gradient-btn);
  color: var(--mxai-on-accent);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(var(--mxai-black-rgb), .4);
}
#mxai-page .mxai-step__title {
  margin: 0 0 var(--mxai-space-3);
  color: var(--mxai-text);
  font-size: var(--mxai-fs-h3);
  font-weight: 700;
  letter-spacing: var(--mxai-ls-snug);
  line-height: 1.25;
}
#mxai-page .mxai-step__text { max-width: 30ch; color: var(--mxai-muted); font-size: var(--mxai-fs-body); line-height: 1.55; }

/* Typed heading: JS splits [data-mxai-type] into letters (.mxai-type__char, --mxai-c is the index).
   Each letter switches on in turn and carries the caret while it is the newest one.
   Timed when the heading comes into view; written by the scroll itself in the pinned scene (section 18). */
@keyframes mxai-type-char {
  0% { visibility: hidden; box-shadow: none; }
  1%, 99% { visibility: visible; box-shadow: .07em 0 0 var(--mxai-accent); }
  100% { visibility: visible; box-shadow: none; }
}
#mxai-page .mxai-type .mxai-type__char { visibility: hidden; }
#mxai-page .mxai-type.is-visible .mxai-type__char { animation: mxai-type-char 70ms linear calc(.25s + var(--mxai-c) * 46ms) both; }

/* Floating pieces of the product: only shown in the pinned desktop scene */
#mxai-page .mxai-how__floats { display: none; }
/* WebGL version of the pieces (initHowGL adds .is-gl): the canvas is only shown in the pinned scene.
   While the script paints the pieces onto its texture they have to stand still and be visible. */
#mxai-page .mxai-how__gl { display: none; }
#mxai-page .mxai-how.is-measure .mxai-float { visibility: visible !important; transform: none !important; }
#mxai-page .mxai-float {
  position: absolute; left: var(--mxai-x); top: var(--mxai-y);
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid rgba(var(--mxai-white-rgb), .12);
  border-radius: var(--mxai-r-lg);
  background: rgba(var(--mxai-glass-rgb), .78);
  box-shadow: 0 24px 60px rgba(var(--mxai-black-rgb), .55), 0 1px 0 rgba(var(--mxai-white-rgb), .07) inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--mxai-text-2);
  font-family: var(--mxai-font);
  font-size: .82rem;
  line-height: 1.25;
  white-space: nowrap;
}
#mxai-page .mxai-float b { color: var(--mxai-text); font-weight: 700; font-variant-numeric: tabular-nums; }
#mxai-page .mxai-float--stat { flex-direction: column; gap: .5rem; padding: 1rem 1.1rem .9rem; }
#mxai-page .mxai-float__ring {
  display: grid; place-items: center;
  width: 5.4rem; height: 5.4rem;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--mxai-surface) calc(100% - 6px), transparent calc(100% - 5px)),
    conic-gradient(var(--mxai-accent-lighter) 0deg, var(--mxai-accent-deep) 290deg, rgba(var(--mxai-white-rgb), .1) 292deg);
}
#mxai-page .mxai-float__ring b { font-size: 1.15rem; letter-spacing: var(--mxai-ls-snug); }
#mxai-page .mxai-float--logo { padding: .8rem; border-radius: var(--mxai-r-md); background: var(--mxai-white); }
#mxai-page .mxai-float--logo img { width: 2.4rem; height: 2.4rem; object-fit: contain; }
#mxai-page .mxai-float--tile {
  padding: 1.25rem;
  border-color: rgba(var(--mxai-white-rgb), .3);
  background: linear-gradient(160deg, var(--mxai-accent-light), var(--mxai-accent-deep));
  box-shadow: 0 24px 60px rgba(var(--mxai-black-rgb), .55), 0 0 50px rgba(var(--mxai-accent-deep-rgb), .5);
  color: var(--mxai-on-accent);
}
#mxai-page .mxai-float--tile .mxai-icon { width: 2rem; height: 2rem; }
#mxai-page .mxai-float--pill { padding: .7rem 1rem; border-radius: var(--mxai-r-pill); font-size: .9rem; }
#mxai-page .mxai-float--pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--mxai-accent-light); box-shadow: 0 0 8px rgba(var(--mxai-accent-rgb), .8); }
#mxai-page .mxai-float--pill svg { width: 4rem; height: 1.25rem; fill: none; stroke: var(--mxai-accent-lighter); stroke-width: 1.6; stroke-linecap: round; }
#mxai-page .mxai-float--note { align-items: flex-start; gap: .75rem; padding: .95rem 1.15rem; }
#mxai-page .mxai-float--note .mxai-icon { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; padding: .5rem; border-radius: 50%; background: rgba(var(--mxai-accent-rgb), .16); color: var(--mxai-accent-lighter); }
#mxai-page .mxai-float--note > span { display: flex; flex-direction: column; gap: .2rem; }

/* --------------------------------------------------------------------------
   13. FAQ ACCORDION
   -------------------------------------------------------------------------- */
#mxai-page .mxai-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
#mxai-page .mxai-faq__head { position: sticky; top: 6rem; }
#mxai-page .mxai-faq__head .mxai-h2 { max-width: 12ch; }
#mxai-page .mxai-faq__head .mxai-lead { margin-bottom: var(--mxai-space-5); max-width: 34ch; }

#mxai-page .mxai-accordion { border-top: 1px solid var(--mxai-border); }
#mxai-page .mxai-accordion__item { border-bottom: 1px solid var(--mxai-border); }
#mxai-page .mxai-accordion__heading { margin: 0; font-size: inherit; font-weight: 700; line-height: var(--mxai-lh-body); } /* weight and leading named here: the theme has its own for every h3 */
#mxai-page .mxai-accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  width: 100%;
  padding: 1.35rem 0;
  color: var(--mxai-text);
  font-size: clamp(1.02rem, 1rem + .25vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  text-align: left;
  transition: color var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-accordion__trigger:hover { color: var(--mxai-accent-lighter); }
#mxai-page .mxai-accordion__trigger:focus-visible { outline-offset: 4px; border-radius: var(--mxai-r-sm); }
#mxai-page .mxai-accordion__icon {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 2rem; height: 2rem;
  border: 1px solid var(--mxai-border-strong);
  border-radius: 50%;
  color: var(--mxai-muted);
  transition: transform var(--mxai-dur) var(--mxai-ease), background-color var(--mxai-dur-fast) ease, color var(--mxai-dur-fast) ease, border-color var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-accordion__icon .mxai-icon { width: .9rem; height: .9rem; }
#mxai-page .mxai-accordion__trigger[aria-expanded="true"] .mxai-accordion__icon {
  transform: rotate(45deg);
  background: rgba(var(--mxai-accent-rgb), .16);
  border-color: rgba(var(--mxai-accent-rgb), .5);
  color: var(--mxai-accent-lighter);
}
#mxai-page .mxai-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mxai-dur) var(--mxai-ease);
}
#mxai-page .mxai-accordion__content {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--mxai-dur);
}
#mxai-page .mxai-accordion__content p {
  margin: 0;
  padding: 0 3.25rem 1.5rem 0;
  color: var(--mxai-muted);
  font-size: 1rem;
  line-height: 1.6;
}
#mxai-page .mxai-accordion__item.is-open .mxai-accordion__panel { grid-template-rows: 1fr; }
#mxai-page .mxai-accordion__item.is-open .mxai-accordion__content { visibility: visible; transition-delay: 0s; }
/* Without JS every answer stays readable */
#mxai-page:not(.mxai-js) .mxai-accordion__panel { grid-template-rows: 1fr; }
#mxai-page:not(.mxai-js) .mxai-accordion__content { visibility: visible; }

/* Questions as numbered glass cards (all widths). On phones the answer opens inside the card. */
#mxai-page .mxai-faq .mxai-accordion { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; border-top: 0; counter-reset: mxai-faq; } /* minmax(0, …): a question that cannot wrap (a theme rule on buttons) must not widen the column */
#mxai-page .mxai-faq .mxai-accordion__item {
  position: relative;
  counter-increment: mxai-faq;
  /* glass: a light sheen from the top left, a bright top edge, a thin rim, and the violet glow behind
     the questions (.mxai-faq__inner::before) blurred through it */
  border: 1px solid rgba(var(--mxai-white-rgb), .1);
  border-radius: var(--mxai-r-md);
  background:
    linear-gradient(135deg, rgba(var(--mxai-white-rgb), .09) 0%, rgba(var(--mxai-white-rgb), .025) 45%, rgba(var(--mxai-white-rgb), .015) 100%),
    rgba(var(--mxai-glass-rgb), .3);
  box-shadow:
    inset 0 1px 0 rgba(var(--mxai-white-rgb), .16),
    inset 0 -1px 0 rgba(var(--mxai-white-rgb), .03),
    0 12px 32px rgba(var(--mxai-black-rgb), .35);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  transition: border-color var(--mxai-dur) ease, background-color var(--mxai-dur) ease, box-shadow var(--mxai-dur) ease, transform var(--mxai-dur) var(--mxai-ease);
}
#mxai-page .mxai-faq .mxai-accordion__item:hover { border-color: rgba(var(--mxai-white-rgb), .2); }
#mxai-page .mxai-faq .mxai-accordion__item.is-open {
  border-color: rgba(var(--mxai-accent-rgb), .55);
  background:
    linear-gradient(135deg, rgba(var(--mxai-white-rgb), .1) 0%, rgba(var(--mxai-white-rgb), .03) 45%),
    linear-gradient(100deg, rgba(var(--mxai-accent-deep-rgb), .32), rgba(var(--mxai-accent-deep-rgb), .06) 75%),
    rgba(var(--mxai-glass-rgb), .3);
  box-shadow:
    inset 0 1px 0 rgba(var(--mxai-white-rgb), .2),
    0 0 0 1px rgba(var(--mxai-accent-rgb), .14),
    0 14px 44px rgba(var(--mxai-accent-deep-rgb), .35);
}
#mxai-page .mxai-faq .mxai-accordion__trigger { justify-content: flex-start; gap: 1rem; padding: .95rem 1.1rem; font-size: 1.02rem; }
#mxai-page .mxai-faq .mxai-accordion__trigger::before {
  content: counter(mxai-faq, decimal-leading-zero);
  flex: 0 0 auto;
  min-width: 1.6rem;
  color: rgba(var(--mxai-accent-rgb), .75);
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
#mxai-page .mxai-faq .mxai-accordion__trigger > span:first-child { flex: 1 1 auto; min-width: 0; }
#mxai-page .mxai-faq .mxai-accordion__item.is-open .mxai-accordion__trigger::before { color: var(--mxai-accent-lighter); }
#mxai-page .mxai-faq .mxai-accordion__icon { width: 1.8rem; height: 1.8rem; }
#mxai-page .mxai-faq .mxai-accordion__content p { padding: 0 1.25rem 1.2rem 3.7rem; }
@media (max-width: 600px) {
  #mxai-page .mxai-faq .mxai-accordion__content p { padding: 0 1.1rem 1.1rem; }
}

/* The conversation pane (desktop, once initFaqChat has switched the section to .mxai-faq--chat) */
#mxai-page .mxai-faq__chat { display: none; }
@media (min-width: 1024px) {
  /* title and cards on the left; the conversation on the right runs the full height, and the "not found?"
     line with its button sits in the conversation's footer, where a message box would be */
  #mxai-page .mxai-faq--chat .mxai-faq__inner {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "title chat" "cards chat";
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: clamp(1.5rem, 3.5vh, 2.25rem);
    align-items: stretch;
  }
  /* coloured light behind the glass, so the blur of the cards and the pane has something to show */
  #mxai-page .mxai-faq--chat .mxai-faq__inner::before {
    content: "";
    position: absolute; z-index: -1;
    inset: 8% -4% -6% -6%;
    background:
      radial-gradient(28% 34% at 18% 62%, rgba(var(--mxai-accent-deep-rgb), .55), transparent 70%),
      radial-gradient(22% 30% at 46% 92%, rgba(var(--mxai-accent-rgb), .3), transparent 70%),
      radial-gradient(30% 40% at 86% 30%, rgba(var(--mxai-accent-deep-rgb), .45), transparent 70%),
      radial-gradient(18% 24% at 70% 86%, rgba(var(--mxai-accent-rgb), .22), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
  }
  #mxai-page .mxai-faq--chat .mxai-faq__head { display: contents; }
  #mxai-page .mxai-faq--chat .mxai-faq__head .mxai-h2 { grid-area: title; align-self: end; margin: 0; }
  #mxai-page .mxai-faq--chat .mxai-accordion { grid-area: cards; align-content: start; }
  #mxai-page .mxai-faq--chat .mxai-faq__chat { grid-area: chat; }
  #mxai-page .mxai-faq--chat .mxai-faq__intro {
    grid-area: chat;
    align-self: end;
    z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    margin: 0 1px 1px;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(var(--mxai-white-rgb), .07);
    border-radius: 0 0 var(--mxai-r-xl) var(--mxai-r-xl);
    background: rgba(var(--mxai-white-rgb), .025);
  }
  #mxai-page .mxai-faq--chat .mxai-faq__intro .mxai-lead { margin: 0; max-width: 24rem; font-size: .92rem; line-height: 1.45; }
  #mxai-page .mxai-faq--chat .mxai-faq__intro .mxai-btn { flex: 0 0 auto; }
  #mxai-page .mxai-faq--chat .mxai-faq__chat-hint { display: none; }
  /* the answer is read in the conversation: the panel stays in the accessibility tree, out of sight */
  #mxai-page .mxai-faq--chat .mxai-accordion__panel {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* the plus becomes a chevron pointing at the conversation */
  #mxai-page .mxai-faq--chat .mxai-accordion__icon .mxai-icon { display: none; }
  #mxai-page .mxai-faq--chat .mxai-accordion__icon::before {
    content: "";
    width: .42rem; height: .42rem;
    margin-left: -.15rem;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  #mxai-page .mxai-faq--chat .mxai-accordion__trigger .mxai-accordion__icon,
  #mxai-page .mxai-faq--chat .mxai-accordion__trigger[aria-expanded="true"] .mxai-accordion__icon { transform: none; }
  #mxai-page .mxai-faq--chat .mxai-accordion__trigger[aria-expanded="true"] .mxai-accordion__icon { transform: translateX(3px); }
  #mxai-page .mxai-faq--chat .mxai-accordion__trigger[aria-expanded="true"] .mxai-accordion__icon {
    background: rgba(var(--mxai-accent-rgb), .2);
    border-color: rgba(var(--mxai-accent-rgb), .55);
    color: var(--mxai-accent-lighter);
  }

  #mxai-page .mxai-faq--chat .mxai-faq__chat {
    position: relative;
    display: flex; flex-direction: column;
    box-sizing: border-box;
    min-height: max(100%, 31rem); /* tall enough for the longest answer, so the section does not jump between answers */
    margin: 0;
    border: 1px solid rgba(var(--mxai-white-rgb), .1);
    border-radius: var(--mxai-r-xl);
    padding-bottom: 5.4rem; /* the footer (.mxai-faq__intro) is laid over this */
    background:
      linear-gradient(140deg, rgba(var(--mxai-white-rgb), .08) 0%, rgba(var(--mxai-white-rgb), .02) 40%, rgba(var(--mxai-white-rgb), .01) 100%),
      radial-gradient(90% 60% at 80% 0%, rgba(var(--mxai-accent-deep-rgb), .22), transparent 70%),
      rgba(var(--mxai-glass-rgb), .32);
    box-shadow: 0 40px 100px rgba(var(--mxai-black-rgb), .5), inset 0 1px 0 rgba(var(--mxai-white-rgb), .16);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    backdrop-filter: blur(26px) saturate(1.5);
    overflow: hidden;
  }
  #mxai-page .mxai-faq__chat-bar {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(var(--mxai-white-rgb), .07);
  }
  #mxai-page .mxai-faq__chat-mark {
    display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mxai-accent-lighter), var(--mxai-accent-deep));
    color: var(--mxai-white);
    box-shadow: 0 0 24px rgba(var(--mxai-accent-rgb), .45);
  }
  #mxai-page .mxai-faq__chat-mark .mxai-icon { width: 1.05rem; height: 1.05rem; }
  #mxai-page .mxai-faq__chat-who { display: flex; flex-direction: column; gap: .1rem; }
  #mxai-page .mxai-faq__chat-name { color: var(--mxai-text); font-size: .95rem; font-weight: 600; line-height: 1.2; }
  #mxai-page .mxai-faq__chat-status { display: inline-flex; align-items: center; gap: .4rem; color: var(--mxai-muted); font-size: .78rem; line-height: 1.2; }
  #mxai-page .mxai-faq__chat-status::before {
    content: ""; width: .45rem; height: .45rem; border-radius: 50%;
    background: var(--mxai-accent-lighter);
    box-shadow: 0 0 8px var(--mxai-accent);
    animation: mxai-faq-live 2s ease-in-out infinite;
  }
  #mxai-page .mxai-faq__chat-log {
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: flex-end; gap: .85rem;
    padding: 1.4rem 1.25rem 1.1rem;
  }
  #mxai-page .mxai-faq__msg {
    box-sizing: border-box;
    max-width: 88%;
    margin: 0;
    padding: .8rem 1rem;
    font-size: .98rem;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: opacity .35s ease, transform .5s var(--mxai-ease);
  }
  #mxai-page .mxai-faq__msg.is-in { opacity: 1; transform: none; }
  #mxai-page .mxai-faq__msg--me {
    align-self: flex-end;
    border: 1px solid rgba(var(--mxai-accent-rgb), .32);
    border-radius: 18px 18px 5px 18px;
    background: rgba(var(--mxai-accent-rgb), .16);
    color: var(--mxai-text);
    font-weight: 500;
  }
  #mxai-page .mxai-faq__msg--ai {
    align-self: flex-start;
    border: 1px solid rgba(var(--mxai-white-rgb), .08);
    border-radius: 18px 18px 18px 5px;
    background: rgba(var(--mxai-white-rgb), .04);
    color: var(--mxai-text-2);
  }
  #mxai-page .mxai-faq__dots { display: inline-flex; gap: .3rem; padding: .3rem 0; }
  #mxai-page .mxai-faq__dots i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--mxai-accent-lighter); animation: mxai-faq-dot 1s ease-in-out infinite; }
  #mxai-page .mxai-faq__dots i:nth-child(2) { animation-delay: .15s; }
  #mxai-page .mxai-faq__dots i:nth-child(3) { animation-delay: .3s; }
  #mxai-page .mxai-faq__caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--mxai-accent-lighter); animation: mxai-faq-live 1s steps(1) infinite; }
  #mxai-page .mxai-faq__chat-log:not(:empty) + .mxai-faq__chat-hint { visibility: hidden; }
  #mxai-page .mxai-faq__chat-hint { margin: 0; padding: 0 1.25rem 1.1rem; color: var(--mxai-muted); opacity: .75; font-size: .8rem; line-height: 1.4; }
}
@keyframes mxai-faq-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes mxai-faq-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ---- FAQ on white (client request: "white and glass, with glass elements"). A white sheet with pools of
        violet, rose and blue light; the cards and the conversation are frosted white glass over them, with a
        bright rim, a soft coloured shadow and a sheen. In the pinned desktop page the sheet itself slides in
        with the pan (see .mxai-faq__sheet in 18); everywhere else the section is simply white. */
#mxai-page .mxai-faq {
  overflow: clip;
  border-radius: 0; /* straight edges top and bottom (client request) */
  background: var(--mxai-paper);
  color: var(--mxai-ink);
}
#mxai-page .mxai-faq .mxai-h2 { color: var(--mxai-ink); }
#mxai-page .mxai-faq .mxai-gradient-text { background-image: var(--mxai-gradient-text-paper); }
#mxai-page .mxai-faq .mxai-lead { color: var(--mxai-ink-2); }
/* the light behind the glass */
#mxai-page .mxai-faq__inner { position: relative; isolation: isolate; }
#mxai-page .mxai-faq .mxai-faq__inner::before,
#mxai-page .mxai-faq--chat .mxai-faq__inner::before {
  content: "";
  position: absolute; z-index: -1;
  inset: -6% -8% -10% -8%;
  background:
    radial-gradient(26% 34% at 14% 58%, rgba(var(--mxai-accent-deep-rgb), .55), transparent 70%),
    radial-gradient(22% 30% at 40% 96%, rgba(var(--mxai-blue-ink-rgb), .35), transparent 70%),
    radial-gradient(28% 36% at 84% 22%, rgba(var(--mxai-rose-ink-rgb), .38), transparent 70%),
    radial-gradient(24% 30% at 70% 88%, rgba(var(--mxai-accent-rgb), .5), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
/* the pools drift slowly, so the frosted glass always has something moving behind it */
@media (prefers-reduced-motion: no-preference) {
  #mxai-page .mxai-faq .mxai-faq__inner::before,
  #mxai-page .mxai-faq--chat .mxai-faq__inner::before { animation: mxai-faq-drift 16s ease-in-out infinite alternate; }
}
/* client request: the background stays plain white, so the pools of light are switched off */
#mxai-page .mxai-faq .mxai-faq__inner::before,
#mxai-page .mxai-faq--chat .mxai-faq__inner::before { content: none; }
@keyframes mxai-faq-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, -4%) scale(1.06); }
  100% { transform: translate(-3%, 3%) scale(.97); }
}
/* plain white cards, no glass and no purple (client request): a hairline, a soft grey shadow, ink text */
#mxai-page .mxai-faq .mxai-accordion__item {
  border: 1px solid rgba(var(--mxai-ink-rgb), .09);
  background: var(--mxai-paper);
  box-shadow: 0 .5rem 1.4rem rgba(var(--mxai-ink-rgb), .05), 0 1px 2px rgba(var(--mxai-ink-rgb), .04);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#mxai-page .mxai-faq .mxai-accordion__item:hover {
  border-color: rgba(var(--mxai-ink-rgb), .18);
  transform: translateY(-2px);
  box-shadow: 0 .9rem 2rem rgba(var(--mxai-ink-rgb), .08), 0 1px 2px rgba(var(--mxai-ink-rgb), .04);
}
#mxai-page .mxai-faq .mxai-accordion__item.is-open {
  border-color: var(--mxai-ink);
  background: var(--mxai-paper);
  box-shadow: 0 1rem 2.4rem rgba(var(--mxai-ink-rgb), .1), 0 1px 2px rgba(var(--mxai-ink-rgb), .04);
}
#mxai-page .mxai-faq .mxai-accordion__trigger { color: var(--mxai-ink); }
#mxai-page .mxai-faq .mxai-accordion__trigger:hover { color: var(--mxai-ink); }
#mxai-page .mxai-faq .mxai-accordion__trigger::before { color: rgba(var(--mxai-ink-rgb), .35); }
#mxai-page .mxai-faq .mxai-accordion__item.is-open .mxai-accordion__trigger::before { color: var(--mxai-ink); }
#mxai-page .mxai-faq .mxai-accordion__icon { border-color: rgba(var(--mxai-ink-rgb), .14); background: var(--mxai-paper); color: var(--mxai-ink-2); }
#mxai-page .mxai-faq .mxai-accordion__trigger[aria-expanded="true"] .mxai-accordion__icon {
  border-color: var(--mxai-ink);
  background: var(--mxai-ink);
  color: var(--mxai-paper);
}
#mxai-page .mxai-faq .mxai-accordion__content p { color: var(--mxai-ink-2); }
/* the conversation keeps its colours (only the cards behind the questions are plain): a pane of frosted
   white glass, the visitor's message on the brand purple */
#mxai-page .mxai-faq--chat .mxai-faq__chat {
  border: 1px solid rgba(var(--mxai-white-rgb), .95);
  background:
    linear-gradient(150deg, rgba(var(--mxai-white-rgb), .56) 0%, rgba(var(--mxai-white-rgb), .2) 50%, rgba(var(--mxai-white-rgb), .32) 100%);
  box-shadow:
    inset 0 1px 0 var(--mxai-paper),
    0 2rem 4rem rgba(var(--mxai-violet-ink-rgb), .16),
    0 1px 3px rgba(var(--mxai-ink-rgb), .06);
  -webkit-backdrop-filter: blur(11px) saturate(1.6);
  backdrop-filter: blur(11px) saturate(1.6);
}
#mxai-page .mxai-faq--chat .mxai-faq__chat-bar { border-bottom-color: rgba(var(--mxai-ink-rgb), .07); }
/* the assistant's avatar is a black disc with the white mark, like the ChatGPT one (client request) */
#mxai-page .mxai-faq--chat .mxai-faq__chat-mark {
  background: var(--mxai-ink);
  color: var(--mxai-paper);
  box-shadow: 0 .3rem .8rem rgba(var(--mxai-ink-rgb), .18);
}
#mxai-page .mxai-faq--chat .mxai-faq__chat-name { color: var(--mxai-ink); }
#mxai-page .mxai-faq--chat .mxai-faq__chat-status { color: var(--mxai-ink-2); }
#mxai-page .mxai-faq--chat .mxai-faq__chat-status::before { content: none; } /* no status dot (client request) */
#mxai-page .mxai-faq--chat .mxai-faq__msg--me {
  border: 0;
  background: linear-gradient(135deg, var(--mxai-accent-mid), var(--mxai-violet-ink));
  color: var(--mxai-paper);
  box-shadow: 0 .6rem 1.4rem rgba(var(--mxai-violet-ink-rgb), .28);
}
#mxai-page .mxai-faq--chat .mxai-faq__msg--ai {
  border: 1px solid rgba(var(--mxai-white-rgb), .95);
  background: rgba(var(--mxai-white-rgb), .8);
  color: var(--mxai-ink-2);
  box-shadow: inset 0 1px 0 var(--mxai-paper), 0 .5rem 1.4rem rgba(var(--mxai-ink-rgb), .06);
}
#mxai-page .mxai-faq--chat .mxai-faq__dots i,
#mxai-page .mxai-faq--chat .mxai-faq__caret { background: var(--mxai-violet-ink); }
#mxai-page .mxai-faq--chat .mxai-faq__intro {
  border-top-color: rgba(var(--mxai-ink-rgb), .07);
  background: rgba(var(--mxai-white-rgb), .45);
}
#mxai-page .mxai-faq--chat .mxai-faq__intro .mxai-lead { color: var(--mxai-ink-2); }
/* the footer is part of the pane: it arrives with it, its line and button do not slide in on their own (their
   scroll reveal ended late, near the bottom of the screen, and left them half way in) */
#mxai-page.mxai-sda .mxai-faq--chat .mxai-faq__intro .mxai-reveal { animation: none; opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   14. FINAL CTA
   -------------------------------------------------------------------------- */
/* The page closes on one full screen: a photo of the city under a dark veil, and over it, centred and white,
   one large sentence with the name of the product in the brand purple, a short
   paragraph and the buttons. The photo comes from --mxai-cta-photo (set on the section in the markup); without
   it a deep night gradient with a violet glow stands in. The content arrives as one block (.mxai-reveal) and
   the photo settles slowly from a slight zoom while the section scrolls in (section 18). */
#mxai-page .mxai-cta {
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(100vh, 62rem);
  padding: clamp(5rem, 12vh, 8rem) 0;
  overflow: hidden;
  background: var(--mxai-bg);
  color: var(--mxai-white);
}
#mxai-page .mxai-cta__media { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#mxai-page .mxai-cta__photo {
  position: absolute; inset: 0;
  background:
    var(--mxai-cta-photo, none) center / cover no-repeat,
    radial-gradient(60% 55% at 50% 100%, rgba(var(--mxai-accent-rgb), .3), transparent 70%),
    radial-gradient(40% 40% at 18% 20%, rgba(var(--mxai-accent-rgb), .12), transparent 70%),
    linear-gradient(180deg, var(--mxai-bg) 0%, var(--mxai-surface-2) 100%);
  transform-origin: 50% 60%;
}
/* the veil: dark enough for white text anywhere on the photo, a little darker at the top and the foot */
#mxai-page .mxai-cta__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--mxai-black-rgb), .55) 0%, rgba(var(--mxai-black-rgb), .4) 35%, rgba(var(--mxai-black-rgb), .45) 70%, rgba(var(--mxai-black-rgb), .7) 100%),
    radial-gradient(50% 45% at 50% 50%, rgba(var(--mxai-black-rgb), .15), transparent 100%);
}
#mxai-page .mxai-cta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
#mxai-page .mxai-cta__title {
  max-width: 16ch;
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
  color: var(--mxai-white);
  font-family: var(--mxai-font);
  font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: var(--mxai-ls-tight);
  text-wrap: balance;
}
#mxai-page .mxai-cta__brand { color: var(--mxai-accent); }
#mxai-page .mxai-cta__lead {
  max-width: 52ch;
  margin: 0 0 clamp(2rem, 4.5vh, 2.75rem);
  color: rgba(var(--mxai-white-rgb), .9);
  font-family: var(--mxai-font);
  font-size: var(--mxai-fs-lead);
  line-height: 1.55;
}
#mxai-page .mxai-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mxai-space-3); }
/* the two partner statuses under the buttons */
#mxai-page .mxai-cta__proof {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .9rem;
  margin: clamp(1.5rem, 3.5vh, 2.25rem) 0 0;
  color: rgba(var(--mxai-white-rgb), .78);
  font-family: var(--mxai-font);
  font-size: var(--mxai-fs-sm);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
}
#mxai-page .mxai-cta__sep { color: rgba(var(--mxai-white-rgb), .35); }

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  #mxai-page .mxai-faq__inner { grid-template-columns: minmax(0, 1fr); }
  #mxai-page .mxai-faq__head { position: static; }
}

@media (max-width: 1023px) {
  #mxai-page .mxai-dash__nav-item:not(.is-active) { display: none; }
  #mxai-page .mxai-dash__panels { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  #mxai-page .mxai-stats { grid-template-columns: repeat(2, 1fr); }
  #mxai-page .mxai-stat:nth-child(3) { border-left: 0; }
  #mxai-page .mxai-stat:nth-child(n+3) { border-top: 1px solid var(--mxai-border-soft); }
  #mxai-page .mxai-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); }
  #mxai-page .mxai-bento__item--a { grid-column: 1 / 3; grid-row: 1; min-height: 340px; }
  #mxai-page .mxai-bento__item--b { grid-column: 1; grid-row: 2; }
  #mxai-page .mxai-bento__item--c { grid-column: 2; grid-row: 2; }
  #mxai-page .mxai-bento__item--d { grid-column: 1; grid-row: 3; }
  #mxai-page .mxai-bento__item--e { grid-column: 2; grid-row: 3; }
}

@media (max-width: 767px) {
  #mxai-page .mxai-hero__stage { padding-top: clamp(4rem, 12vh, 6rem); padding-bottom: 2.5rem; }
  #mxai-page .mxai-hero__cta .mxai-btn { flex: 1 1 100%; }
  #mxai-page .mxai-eclipse { --mxai-disc: 150vw; --mxai-cap: 176px; --mxai-crescent: 40px; }
  #mxai-page .mxai-eclipse__probe, #mxai-page .mxai-eclipse__hit { display: none; }
  #mxai-page .mxai-dash-wrap { margin-top: -78px; }
  #mxai-page .mxai-dash { border-radius: var(--mxai-r-md); }
  #mxai-page .mxai-dash__bar { height: 2.75rem; gap: .6rem; padding: 0 .75rem; }
  #mxai-page .mxai-dash__nav { margin: 0 0 0 auto; }
  #mxai-page .mxai-dash__range, #mxai-page .mxai-dash__sync { display: none; }
  #mxai-page .mxai-dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mxai-page .mxai-dash__kpi { padding: .65rem .7rem .5rem; }
  #mxai-page .mxai-dash__panels { grid-template-columns: minmax(0, 1fr); }
  #mxai-page .mxai-dash__panel--channels { display: none; }
  #mxai-page .mxai-dash__panel { padding: .7rem .75rem .8rem; }
  #mxai-page .mxai-hero__tip { min-width: 11rem; padding: .6rem .75rem .7rem; font-size: .8rem; }
  #mxai-page .mxai-trust { gap: var(--mxai-space-3) var(--mxai-space-5); }
  #mxai-page .mxai-trust__item--badge { flex: 1 1 100%; justify-content: center; }
  #mxai-page .mxai-trust__link { width: 100%; max-width: 22rem; }
  #mxai-page .mxai-analyzer__field { height: 3.75rem; padding-left: 1rem; }
  #mxai-page .mxai-analyzer__input { font-size: 1rem; }
  #mxai-page .mxai-analyzer__go { width: 2.9rem; height: 2.9rem; }
  #mxai-page .mxai-analyzer__hint { font-size: var(--mxai-fs-xs); }
  #mxai-page .mxai-analyzer__head { gap: var(--mxai-space-3); }
  #mxai-page .mxai-analyzer__count { display: none; }
  #mxai-page .mxai-chip { padding: .7rem 1rem; font-size: .9rem; }
  #mxai-page .mxai-analyzer__step[data-step-key="email"] .mxai-analyzer__field { height: auto; flex-wrap: wrap; padding: .6rem .6rem .6rem 1rem; border-radius: var(--mxai-r-lg); }
  #mxai-page .mxai-analyzer__step[data-step-key="email"] .mxai-analyzer__input { height: 2.9rem; flex: 1 1 60%; }
  #mxai-page .mxai-analyzer__submit { flex: 1 1 100%; height: 2.9rem; }
  #mxai-page .mxai-compare__card { grid-template-columns: 1fr; }
  #mxai-page .mxai-compare__col--new { margin: 0 -1px -1px; }
  #mxai-page .mxai-bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 1rem; }
  #mxai-page .mxai-bento__item--a, #mxai-page .mxai-bento__item--b, #mxai-page .mxai-bento__item--c,
  #mxai-page .mxai-bento__item--d, #mxai-page .mxai-bento__item--e { grid-column: auto; grid-row: auto; min-height: 0; }
  #mxai-page .mxai-shot__frame { flex: 0 0 auto; }
  #mxai-page .mxai-shot__body { flex: 0 0 auto; min-height: 0; height: 0; padding-bottom: 62.5%; }
  #mxai-page .mxai-tabs__list { width: auto; margin-left: calc(-1 * var(--mxai-gutter)); margin-right: calc(-1 * var(--mxai-gutter)); padding: .3rem var(--mxai-gutter); border-radius: 0; border-left: 0; border-right: 0; }
  #mxai-page .mxai-laptop { padding: 0; }
  #mxai-page .mxai-laptop__lid { border-radius: 12px 12px 0 0; padding: 2.4% 2.4% 0; }
  #mxai-page .mxai-laptop__screen { border-radius: 6px 6px 0 0; }
  #mxai-page .mxai-laptop__base { height: 12px; margin: 0 -3%; border-radius: 0 0 10px 10px; }
  #mxai-page .mxai-laptop__camera { display: none; }
  #mxai-page .mxai-stats { grid-template-columns: 1fr 1fr; }
  #mxai-page .mxai-stat { padding: 1.5rem 1.1rem; }
  #mxai-page .mxai-steps { grid-template-columns: 1fr; gap: var(--mxai-space-6); }
  #mxai-page .mxai-steps::before { display: none; }
  #mxai-page .mxai-step { flex-direction: row; align-items: flex-start; gap: 1.25rem; text-align: left; }
  #mxai-page .mxai-step__num { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; margin: 0; }
  #mxai-page .mxai-step__body { min-width: 0; }
  #mxai-page .mxai-step:not(:last-child)::after {
    content: "";
    position: absolute; left: 1.75rem; top: 3.5rem; bottom: calc(-1 * var(--mxai-space-6));
    width: 1px;
    background: linear-gradient(180deg, rgba(var(--mxai-accent-rgb), .5), rgba(var(--mxai-accent-rgb), .1));
  }
  #mxai-page .mxai-accordion__content p { padding-right: 1rem; }
  #mxai-page .mxai-cta__actions .mxai-btn { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  #mxai-page .mxai-stats { grid-template-columns: 1fr; }
  #mxai-page .mxai-stat { border-left: 0; border-top: 1px solid var(--mxai-border-soft); }
  #mxai-page .mxai-stat:first-child { border-top: 0; }
  #mxai-page .mxai-trust__item { flex: 1 1 40%; }
  #mxai-page .mxai-trust__item--badge { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   17. SCROLL-SYNCED SECTION TRANSITIONS
   Every section enters with its own movement, tied to the scroll position
   (CSS view timelines), so it plays forward and backward with the wheel.
   Only where scroll timelines exist (.mxai-sda) and motion is allowed;
   everywhere else the IntersectionObserver reveal above stays in charge.
   -------------------------------------------------------------------------- */
@keyframes mxai-sx-rise { from { opacity: 0; transform: translateY(64px); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-left { from { opacity: 0; transform: translateX(-16vw); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-right { from { opacity: 0; transform: translateX(16vw); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-down { from { opacity: 0; transform: translateY(-110%); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-up { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-flip { from { opacity: 0; transform: perspective(900px) rotateX(-78deg); } to { opacity: 1; transform: perspective(900px) rotateX(0); } }
@keyframes mxai-sx-zoom { from { opacity: 0; transform: scale(1.7); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-track { from { opacity: 0; letter-spacing: .32em; } to { opacity: 1; letter-spacing: var(--mxai-ls-tight); } }
@keyframes mxai-sx-pop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-read { to { background-position: 0 0; } }
@keyframes mxai-sx-card-l { from { opacity: 0; transform: translate(-12vw, 40px) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-card-r { from { opacity: 0; transform: translate(12vw, -30px) rotate(5deg); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-card-br { from { opacity: 0; transform: translate(14vw, 70px) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-card-bl { from { opacity: 0; transform: translate(-14vw, 80px) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-card-b { from { opacity: 0; transform: translate(6vw, 120px) rotate(2deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-swing { from { opacity: 0; transform: translateX(11vw) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes mxai-sx-line { from { transform: scaleX(0); } to { transform: none; } }
@keyframes mxai-sx-settle { from { transform: scale(1.14); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* default: everything that used to fade in now rises with the scroll */
  #mxai-page.mxai-sda .mxai-section .mxai-reveal {
    opacity: 1; transform: none; transition: none;
    animation: mxai-sx-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }

  /* headings: the two halves assemble differently in every section */
  #mxai-page.mxai-sda .mxai-section .mxai-h2.mxai-reveal { animation: none; overflow: visible; }
  #mxai-page.mxai-sda .mxai-section .mxai-h2:not(.mxai-cta__title) > span {
    display: inline-block;
    animation: mxai-sx-rise linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 32%;
  }
  #mxai-page.mxai-sda .mxai-compare .mxai-h2 > span:first-child { animation-name: mxai-sx-right; }
  #mxai-page.mxai-sda .mxai-compare .mxai-h2 > span:last-child { animation-name: mxai-sx-left; }
  #mxai-page.mxai-sda .mxai-gallery .mxai-h2 > span { animation-name: mxai-sx-zoom; }
  #mxai-page.mxai-sda .mxai-showcase .mxai-h2 > span:first-child { animation-name: mxai-sx-down; }
  #mxai-page.mxai-sda .mxai-showcase .mxai-h2 > span:last-child { animation-name: mxai-sx-up; }
  #mxai-page.mxai-sda .mxai-results .mxai-h2 > span { animation-name: mxai-sx-track; }
  #mxai-page.mxai-sda .mxai-how .mxai-h2 > span { animation: none; } /* this headline is typed instead (see 12) */
  #mxai-page.mxai-sda .mxai-faq .mxai-h2 > span:first-child { animation-name: mxai-sx-down; }
  #mxai-page.mxai-sda .mxai-faq .mxai-h2 > span:last-child { animation-name: mxai-sx-up; }

  /* compare: the old way arrives first, the Metrix way swings in over it */
  #mxai-page.mxai-sda .mxai-compare__card.mxai-reveal { animation-range: entry 0% cover 30%; }
  #mxai-page.mxai-sda .mxai-compare__col--new {
    transform-origin: 100% 100%;
    animation: mxai-sx-swing linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
  }

  /* gallery: the frames fly in from different sides and lock into the grid */
  #mxai-page.mxai-sda .mxai-bento.mxai-reveal { animation: none; }
  #mxai-page.mxai-sda .mxai-bento__item {
    animation: mxai-sx-card-l linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 34%;
  }
  #mxai-page.mxai-sda .mxai-bento__item--b { animation-name: mxai-sx-card-r; }
  #mxai-page.mxai-sda .mxai-bento__item--c { animation-name: mxai-sx-card-br; }
  #mxai-page.mxai-sda .mxai-bento__item--d { animation-name: mxai-sx-card-bl; }
  #mxai-page.mxai-sda .mxai-bento__item--e { animation-name: mxai-sx-card-b; }

  /* showcase: the laptop already tilts open with the scroll (mxai-laptop-enter) */
  #mxai-page.mxai-sda .mxai-tabs.mxai-reveal { animation: none; }

  /* results: the numbers flip up one after another */
  #mxai-page.mxai-sda .mxai-stats.mxai-reveal { animation: none; overflow: visible; }
  #mxai-page.mxai-sda .mxai-stat {
    transform-origin: 50% 100%;
    animation: mxai-sx-flip linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }
  #mxai-page.mxai-sda .mxai-stat:nth-child(2) { animation-range: entry 25% cover 30%; }
  #mxai-page.mxai-sda .mxai-stat:nth-child(3) { animation-range: entry 50% cover 34%; }
  #mxai-page.mxai-sda .mxai-stat:nth-child(4) { animation-range: entry 75% cover 38%; }

  /* how it works: the connecting line is drawn by the scroll, steps land in order */
  #mxai-page.mxai-sda .mxai-steps.mxai-reveal { animation: none; view-timeline: --mxai-steps block; }
  #mxai-page.mxai-sda .mxai-steps::before {
    transform-origin: 0 50%;
    animation: mxai-sx-line linear both;
    animation-timeline: --mxai-steps;
    animation-range: entry 40% cover 46%;
  }
  #mxai-page.mxai-sda .mxai-step {
    animation: mxai-sx-pop linear both;
    animation-timeline: --mxai-steps;
    animation-range: entry 20% cover 28%;
  }
  #mxai-page.mxai-sda .mxai-step:nth-child(2) { animation-range: entry 60% cover 37%; }
  #mxai-page.mxai-sda .mxai-step:nth-child(3) { animation-range: cover 22% cover 46%; }

  /* faq: the intro slides in from the left, the questions from the right */
  #mxai-page.mxai-sda .mxai-faq__head .mxai-reveal:not(.mxai-h2) { animation-name: mxai-sx-left; }
  #mxai-page.mxai-sda .mxai-accordion.mxai-reveal { animation: none; }
  #mxai-page.mxai-sda .mxai-accordion__item {
    animation: mxai-sx-right linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }

  /* final screen: the photo settles from a slight zoom while the section scrolls in */
  #mxai-page.mxai-sda .mxai-cta__photo {
    animation: mxai-sx-settle linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
}

/* --------------------------------------------------------------------------
   18. PINNED SECTION SCENES (desktop, scroll timelines)
   Clients, Integrations, Compare and Gallery are taller than the screen and
   their container sticks to the viewport. One named view timeline per section
   drives everything inside it, so each scene is a small choreography that
   plays forward and backward with the scroll and hands over to the next one.
   Phones, short windows, reduced motion and browsers without scroll timelines
   keep the flowing layout and the simpler entrances from section 17.
   -------------------------------------------------------------------------- */
@property --mxai-tilt { syntax: "<angle>"; inherits: true; initial-value: 56deg; }
@property --mxai-yaw { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --mxai-on { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --mxai-h { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --mxai-k { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --mxai-ex { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mxai-ey { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --mxai-draw { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --mxai-rise { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mxai-grow { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --mxai-turn { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --mxai-fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --mxai-show { syntax: "<number>"; inherits: false; initial-value: 1; }

@keyframes mxai-s-giant { from { transform: translateY(30vh) scale(2.3); } to { transform: none; } }
@keyframes mxai-s-giant-xl { from { transform: translateY(33vh) scale(2.15); } to { transform: none; } }
@keyframes mxai-s-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mxai-s-on { from { --mxai-on: 0; } to { --mxai-on: 1; } }
@keyframes mxai-s-show { from { visibility: hidden; } to { visibility: visible; } }
@keyframes mxai-s-dim { to { opacity: .62; } }
@keyframes mxai-s-swing { from { opacity: 0; transform: translateX(72%) rotate(9deg); } to { opacity: 1; transform: none; } }
@keyframes mxai-s-fly-a { from { transform: translateY(120vh) rotate(-7deg); } to { transform: none; } }
@keyframes mxai-s-fly-b { from { transform: translateY(150vh) rotate(8deg); } to { transform: none; } }
@keyframes mxai-s-fly-c { from { transform: translateY(135vh) rotate(-5deg); } to { transform: none; } }
@keyframes mxai-s-fly-d { from { transform: translateY(170vh) rotate(6deg); } to { transform: none; } }
@keyframes mxai-s-fly-e { from { transform: translateY(145vh) rotate(-4deg); } to { transform: none; } }
@keyframes mxai-s-ring { from { transform: translate(-50%, -50%) scale(.5) rotate(-60deg); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1) rotate(150deg); opacity: 1; } }
@keyframes mxai-s-ring-fly {
  0% { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1) rotate(150deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(104vh) scale(.6) rotate(330deg); }
}
/* with the 3D showcase below: the ring flies down into it, lies down on the ground (squashed like a circle seen
   from the camera of that scene) and fades as the ring drawn in the 3D scene takes over at the same place and size */
@keyframes mxai-s-ring-land {
  0% { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1, 1) rotate(150deg); }
  55% { opacity: 1; transform: translate(-50%, -50%) translateY(calc(var(--mxai-ring-land, 104vh) * .6)) scale(.8, .72) rotate(250deg); }
  /* landed: from here on it rides with the next section, exactly on the ring of the 3D scene, and fades into it */
  92% { opacity: 1; transform: translate(-50%, -50%) translateY(var(--mxai-ring-land, 104vh)) scale(var(--mxai-ring-sx, .46), var(--mxai-ring-sy, .29)) rotate(330deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(var(--mxai-ring-land, 104vh)) scale(var(--mxai-ring-sx, .46), var(--mxai-ring-sy, .29)) rotate(330deg); }
}
@keyframes mxai-sx-ring { from { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-40deg); } to { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(110deg); } }
@keyframes mxai-s-defocus { to { filter: blur(2.2px); } }
/* showcase: the board is assembled the way the reference does it. The camera path is one animation on the board:
   far and out of focus, push in on the isometric plate, swing over to look straight down while the cards land,
   then swing out to the final pose on the right. --mxai-k is the inverse of the scale, so the hairlines and dots
   of the drawing keep their weight on screen. */
@keyframes mxai-s-board {
  /* A: the plan, as in the reference at 1.8 to 2.4 s (measured from the frame: tilt 46deg, turn -19deg) */
  0% { --mxai-k: 4.2; --mxai-ex: -.33; --mxai-ey: 1; filter: blur(7px); transform: translate3d(0, 12vh, 0) rotateX(46deg) rotateZ(-19deg) scale(.22); }
  9% { --mxai-k: 3.2; --mxai-ex: -.33; --mxai-ey: 1; filter: none; transform: translate3d(0, 10vh, 0) rotateX(46deg) rotateZ(-19deg) scale(.3); }
  24% { --mxai-k: 2.1; --mxai-ex: -.33; --mxai-ey: 1; filter: none; transform: translate3d(0, 7vh, 0) rotateX(46deg) rotateZ(-19deg) scale(.47); }
  40% { --mxai-k: 1.2; --mxai-ex: -.3; --mxai-ey: 1; filter: none; transform: translate3d(0, 3vh, 0) rotateX(47deg) rotateZ(-16deg) scale(.86); }
  /* B: the plate with the blocks on its far edge, turned the other way (2.85 to 3.0 s) */
  50% { --mxai-k: 1.15; --mxai-ex: .42; --mxai-ey: 1; filter: none; transform: translate3d(0, 2vh, 0) rotateX(50deg) rotateZ(25deg) scale(.9); }
  /* C: almost straight down, the cards land (3.3 to 3.75 s) */
  62% { --mxai-k: 1.1; --mxai-ex: 0; --mxai-ey: .15; filter: none; transform: translate3d(0, 0, 0) rotateX(10deg) rotateZ(0deg) scale(.92); }
  70% { --mxai-k: 1.1; --mxai-ex: 0; --mxai-ey: .15; filter: none; transform: translate3d(0, -1vh, 0) rotateX(8deg) rotateZ(-2deg) scale(.94); }
  /* D: tips back a little (4.05 to 4.35 s) */
  80% { --mxai-k: 1.05; --mxai-ex: -.18; --mxai-ey: .7; filter: none; transform: translate3d(4vw, 0, 0) rotateX(40deg) rotateZ(-10deg) scale(1); }
  /* E: the final pose on the right, turned clockwise (measured: tilt 57deg, turn +27deg) */
  100% { --mxai-k: .7; --mxai-ex: .454; --mxai-ey: 1; filter: none; transform: translate3d(29vw, 13vh, 0) rotateX(57deg) rotateZ(27deg) scale(1.5); }
}
@keyframes mxai-s-mark { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
/* the lines of the drawing never stand still (time based, on top of the scroll): the marks stretch and slide,
   the frame is a dashed line that keeps travelling, a measuring line sweeps the plate, the ruler runs */
@keyframes mxai-line-live { 0% { scale: .7 1.25; translate: calc(-9px * var(--mxai-k)) 0; } 50% { scale: 1.3 .8; translate: calc(7px * var(--mxai-k)) calc(-6px * var(--mxai-k)); } 100% { scale: .9 1.3; translate: 0 calc(8px * var(--mxai-k)); } }
/* the measuring line crosses the plate again and again (the four edges keep their place) */
@keyframes mxai-line-march { to { background-position: 0 100%, 100% 0, 0 100%, 100% 0, 0 104%; } }
/* the frame is drawn like a plan: the edges grow out of two opposite corners, the dimension lines follow */
@keyframes mxai-s-draw { from { --mxai-draw: 0%; } to { --mxai-draw: 100%; } }

@keyframes mxai-line-run { to { background-position: 0 20px, 0 100px; } }
@keyframes mxai-line-turn { to { rotate: 360deg; } }
@keyframes mxai-s-plan { 0% { opacity: 0; } 12% { opacity: 1; } 76% { opacity: 1; } 100% { opacity: 0; } }
/* the dot field spreads outward from the middle of the plate */
@keyframes mxai-s-dots { 0% { --mxai-grow: 0%; opacity: 1; } 62% { --mxai-grow: 100%; opacity: 1; } 84% { --mxai-grow: 100%; opacity: 1; } 100% { --mxai-grow: 100%; opacity: 0; } }
@keyframes mxai-s-liquid {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(.5); }
  56% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  82% { opacity: 1; transform: translate(-50%, 18%) scale(1.2, .4); }
  100% { opacity: 0; transform: translate(-50%, 40%) scale(1.15, .1); }
}
@keyframes mxai-liquid-flow { to { background-position: 300% 0, -300% 0, 0 0; } }
/* the tiles: each one rises (its extrusion grows), the matrix slides to the back edge, then they sink */
@keyframes mxai-s-tiles {
  0% { transform: translate(-50%, -50%); }
  52% { transform: translate(-50%, -50%); }
  80% { transform: translate(-50%, -150%); }
  100% { transform: translate(-50%, -150%); }
}
@keyframes mxai-s-tile {
  0% { opacity: 0; --mxai-h: 0; }
  30% { opacity: 1; --mxai-h: 1; }
  74% { opacity: 1; --mxai-h: 1.6; }
  100% { opacity: 0; --mxai-h: 0; }
}
@keyframes mxai-s-slab { from { opacity: 0; } to { opacity: 1; } }
@keyframes mxai-s-guides { 0% { opacity: 0; transform: scale(.55) rotate(-40deg); } 34% { opacity: 1; transform: none; } 74% { opacity: 1; } 100% { opacity: 0; } }
/* a card falls from above the plate, a little too far, and settles */
@keyframes mxai-s-drop {
  0% { opacity: 0; transform: translate3d(var(--mxai-dx, 0), -82vh, 0) rotate(var(--mxai-rz, -8deg)) scale(1.35); }
  14% { opacity: 1; }
  76% { opacity: 1; transform: translate3d(0, 9px, 4px) rotate(calc(var(--mxai-rz, -8deg) * -.08)) scale(.97); }
  100% { opacity: 1; transform: translate3d(0, 0, var(--mxai-z, 30px)) rotate(0deg) scale(1); }
}
/* once landed the cards keep breathing a little, each at its own pace */
@keyframes mxai-card-float { from { translate: 0 0 0; } to { translate: 0 -6px 22px; } }
@keyframes mxai-s-stroke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mxai-s-copy-up { from { opacity: 0; transform: translateY(46vh); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes mxai-s-blast {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}
@keyframes mxai-s-rays { 0% { opacity: 0; transform: translateX(-9%); } 45% { opacity: 1; } 100% { opacity: 1; transform: translateX(4%); } }
@keyframes mxai-s-how-title { from { transform: translateY(15vh) scale(2.15); } to { transform: none; } }
@keyframes mxai-s-drift { from { transform: translateY(105vh) rotate(var(--mxai-r0, -8deg)); } to { transform: translateY(-125vh) rotate(var(--mxai-r1, 6deg)); } }
@keyframes mxai-s-land { from { transform: translateY(112vh) rotate(var(--mxai-r0, -6deg)); } to { transform: none; } }
/* the pan from the steps to the FAQ: one camera move (ease in and out) shared by both screens, so what leaves
   and what arrives travel together and never cross; depth and a little parallax give it the 3D feel */
@keyframes mxai-s-pan-out-title {
  from { transform: none; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  to { transform: translateX(-118vw); }
}
@keyframes mxai-s-pan-out {
  from { transform: none; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  to { transform: translateX(-110vw) translateZ(-180px) rotateY(28deg); }
}
@keyframes mxai-s-lock { from { transform: translateY(-100vh); } to { transform: none; } }
@keyframes mxai-s-pan-in {
  from { transform: translateX(100vw); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  to { transform: none; }
}
@keyframes mxai-s-pan-in-row {
  from { transform: translateX(112vw) translateZ(-160px) rotateY(-30deg); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  to { transform: none; }
}
@keyframes mxai-s-streak {
  0% { opacity: 0; transform: translateX(10vw); }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-110vw); }
}
/* a scene that leaves by the pan without a screen of its own for it: its container is held where it is while the
   page scrolls one screen (the opposite of mxai-s-lock); both use the translate property, so the transforms of
   the scene itself are left alone */
@keyframes mxai-s-hold { from { translate: 0 0; } to { translate: 0 100vh; } }
@keyframes mxai-s-pan-slide {
  from { translate: 0 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  to { translate: -112vw 0; }
}

@media (min-width: 1101px) and (min-height: 660px) and (prefers-reduced-motion: no-preference) {
  /* shared scene frame */
  #mxai-page.mxai-sda .mxai-scene { padding: 0; }
  #mxai-page.mxai-sda .mxai-scene > .mxai-container {
    position: sticky;
    top: var(--mxai-sticky-top);
    display: flex; flex-direction: column; justify-content: center;
    height: 100vh;
  }
  #mxai-page.mxai-sda .mxai-scene .mxai-reveal,
  #mxai-page.mxai-sda .mxai-scene .mxai-section .mxai-h2 > span { animation: none; }

  /* ---- CLIENTS and INTEGRATIONS are not pinned scenes any more: they are the white sheet of the page and
          appear by themselves when they are reached (sections 6 and 7). */

  /* ---- COMPARE: the old way arrives whole behind frosted glass, then goes out of focus
          as the Metrix way swings in as a pane of clear glass */
  #mxai-page.mxai-sda .mxai-scene.mxai-compare { height: 180vh; view-timeline: --mxai-s-compare block; }
  #mxai-page.mxai-sda .mxai-scene.mxai-compare .mxai-h2 > span {
    display: inline-block;
    animation: mxai-sx-right linear both;
    animation-timeline: --mxai-s-compare;
    animation-range: entry 35% contain 2%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-compare .mxai-h2 > span:last-child { animation-name: mxai-sx-left; }
  #mxai-page.mxai-sda .mxai-scene.mxai-compare .mxai-compare__card {
    isolation: isolate;
    border-color: transparent;
    background: none;
    box-shadow: none;
    animation: mxai-sx-rise linear both;
    animation-timeline: --mxai-s-compare;
    animation-range: entry 55% contain 6%;
  }
  /* one ring of light sits behind both panes and turns with the scroll: the old way sees it through
     frosted glass (blurred, washed out), the Metrix way through clear glass (sharp) */
  #mxai-page.mxai-sda .mxai-scene.mxai-compare .mxai-compare__card::before {
    content: "";
    position: absolute; z-index: -1;
    left: 50%; top: 50%;
    width: min(74vh, 700px); aspect-ratio: 1 / 1;
    border-radius: 50%;
    background:
      conic-gradient(from 200deg at 50% 50%, rgba(var(--mxai-black-rgb), .6) 0deg, transparent 80deg, transparent 200deg, rgba(var(--mxai-black-rgb), .55) 300deg, rgba(var(--mxai-black-rgb), .6) 360deg),
      radial-gradient(circle closest-side,
        transparent 46%,
        rgba(var(--mxai-accent-deep-rgb), .5) 54%,
        var(--mxai-accent-mid) 64%,
        var(--mxai-accent-hot) 70%,
        var(--mxai-accent) 75%,
        rgba(var(--mxai-accent-deep-rgb), .75) 86%,
        transparent 100%);
    -webkit-mask-image: radial-gradient(circle closest-side, transparent 44%, var(--mxai-mask-on) 52%, var(--mxai-mask-on) 90%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, transparent 44%, var(--mxai-mask-on) 52%, var(--mxai-mask-on) 90%, transparent 100%);
    /* it turns behind the panes, then leaves them and flies down into the next section, where the ring behind the laptop takes over */
    animation: mxai-s-ring linear both, mxai-s-ring-fly linear forwards;
    animation-timeline: --mxai-s-compare, --mxai-s-compare;
    animation-range: entry 60% contain 70%, contain 72% exit 74%;
    pointer-events: none;
  }
  /* when the showcase below runs in 3D (initShowcaseGL adds .is-land): this section is stacked above the next one,
     so the ring is not cut at the border between them, and it flies all the way to its landing place */
  #mxai-page.mxai-sda .mxai-scene.mxai-compare.is-land { z-index: 2; }
  #mxai-page.mxai-sda .mxai-scene.mxai-compare.is-land .mxai-compare__card::before {
    animation-name: mxai-s-ring, mxai-s-ring-land;
    animation-range: entry 60% contain 70%, contain 72% exit 100%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-compare .mxai-compare__col--old {
    border: 1px solid var(--mxai-border);
    border-radius: var(--mxai-r-xl) 0 0 var(--mxai-r-xl);
    background: rgba(var(--mxai-glass-rgb), .5);
    -webkit-backdrop-filter: blur(30px) saturate(.5);
    backdrop-filter: blur(30px) saturate(.5);
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-compare .mxai-compare__col--old .mxai-compare__heading,
  #mxai-page.mxai-sda .mxai-scene.mxai-compare .mxai-compare__col--old .mxai-compare__list {
    animation: mxai-s-defocus linear both;
    animation-timeline: --mxai-s-compare;
    animation-range: contain 14% contain 36%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-compare .mxai-compare__col--new {
    background: linear-gradient(180deg, rgba(var(--mxai-accent-deep-rgb), .2), rgba(var(--mxai-glass-rgb), .5));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* the rows are part of their pane: they arrive with it, never one by one */
  #mxai-page.mxai-sda .mxai-scene.mxai-compare .mxai-compare__col--old {
    animation: mxai-s-dim linear both;
    animation-timeline: --mxai-s-compare;
    animation-range: contain 14% contain 36%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-compare .mxai-compare__col--new {
    transform-origin: 100% 100%;
    animation: mxai-s-swing linear both;
    animation-timeline: --mxai-s-compare;
    animation-range: contain 8% contain 34%;
  }

  /* ---- GALLERY: frames fly up over a giant headline, then everything locks into the grid */
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery { height: 280vh; view-timeline: --mxai-s-gallery block; }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-h2 {
    position: relative; z-index: 0;
    margin-bottom: 1vh;
    animation: mxai-s-giant-xl linear both;
    animation-timeline: --mxai-s-gallery;
    animation-range: contain 34% contain 56%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-h2 > span {
    display: inline-block;
    animation: mxai-sx-up linear both;
    animation-timeline: --mxai-s-gallery;
    animation-range: entry 35% entry 85%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-h2 > span:last-child { animation-range: entry 62% contain 2%; }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-lead {
    animation: mxai-s-fade linear both;
    animation-timeline: --mxai-s-gallery;
    animation-range: contain 56% contain 66%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-bento {
    position: relative; z-index: 1;
    grid-auto-rows: 19vh;
    gap: 1rem;
    margin-top: 2.4vh;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-shot__body { min-height: 0; }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-shot__caption { margin-top: .45rem; font-size: .78rem; }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-bento__item {
    animation: mxai-s-fly-a linear both;
    animation-timeline: --mxai-s-gallery;
    animation-range: contain 0% contain 46%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-bento__item--b { animation-name: mxai-s-fly-b; animation-range: contain 5% contain 52%; }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-bento__item--c { animation-name: mxai-s-fly-c; animation-range: contain 10% contain 58%; }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-bento__item--d { animation-name: mxai-s-fly-d; animation-range: contain 15% contain 64%; }
  #mxai-page.mxai-sda .mxai-scene.mxai-gallery .mxai-bento__item--e { animation-name: mxai-s-fly-e; animation-range: contain 20% contain 70%; }
  /* ---- HOW: the headline is written out letter by letter at full screen size, small pieces of the
          product drift up across it, then the three steps land as glass cards under the shrunk headline */
  /* ---- SHOWCASE: built after the reference, step by step.
          1 long corner marks draw themselves, 2 an isometric frame with a dot field holds a blob of liquid metal,
          3 the camera pushes in while the metal spreads and a matrix of tiles rises, 4 the metal drains to the
          front edge and leaves a plate, the tiles move to the back edge and flatten, guide lines (circle and
          cross) are drawn on the plate, 5 the plate turns to face the viewer and the data cards drop onto it
          in rows, 6 light falls across the scene, the plate tips into its final isometric pose on the right
          and the headline arrives on the left. */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase { height: 440vh; view-timeline: --mxai-s-showcase block; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase > .mxai-container { max-width: none; perspective: 1050px; overflow: hidden; } /* a short lens: strong depth */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase > .mxai-container::before {
    content: "";
    position: absolute; inset: -10%;
    background: repeating-linear-gradient(118deg, transparent 0 8%, rgba(var(--mxai-white-rgb), .04) 11% 15%, transparent 18% 27%, rgba(var(--mxai-white-rgb), .025) 30% 32%, transparent 35% 44%);
    pointer-events: none;
    animation: mxai-s-rays linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain 54% contain 100%;
  }
  /* the whole text block comes up from below in one piece, at the moment the board settles into its final pose */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__copy {
    position: absolute; z-index: 3;
    left: max(var(--mxai-gutter), calc((100vw - var(--mxai-container)) / 2 + var(--mxai-gutter)));
    top: 50%;
    align-items: flex-start;
    max-width: 27rem;
    translate: 0 -50%;
    animation: mxai-s-copy-up linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain 78% contain 90%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-h2 { margin: 0 0 var(--mxai-space-4); font-size: clamp(2rem, 3.3vw, 3.3rem); text-align: left; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-h2 > span { display: block; animation: none; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__lead { margin: 0 0 var(--mxai-space-5); text-align: left; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__cta { margin: 0; }
  /* a wave of light goes out from the board as it lands */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase > .mxai-container::after {
    content: "";
    position: absolute; z-index: 0;
    left: 72%; top: 56%;
    width: 60vmin; height: 60vmin;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, transparent 58%, rgba(var(--mxai-accent-deep-rgb), .3) 70%, rgba(var(--mxai-accent-hot-rgb), .85) 80%, rgba(var(--mxai-accent-rgb), .4) 86%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    animation: mxai-s-blast linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain 82% contain 96%;
  }
  /* WebGL version (initShowcaseGL adds .is-gl when it runs): the canvas fills the stage and the CSS build is hidden */
  /* the canvas is one and a half screens tall and fades out at its lower end: when the scene lets go, the board
     is not cut off at the fold but carries on into the top of the next section */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase.is-gl > .mxai-container { overflow: visible; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase.is-gl .mxai-showcase__gl {
    display: block;
    position: absolute; left: 0; top: 0;
    width: 100%; height: 155vh;
    -webkit-mask-image: linear-gradient(180deg, var(--mxai-mask-on) 78%, transparent 100%);
    mask-image: linear-gradient(180deg, var(--mxai-mask-on) 78%, transparent 100%);
    pointer-events: none;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase.is-gl .mxai-tabs { visibility: hidden; }
  /* the 3D scene brings its own light, so the CSS light wave and rays are not drawn over it */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase.is-gl > .mxai-container::before,
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase.is-gl > .mxai-container::after { display: none; }
  /* the whole 3D scene leans with the pointer, so the depth between plate, menu and cards can be felt */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-tabs {
    width: 100%;
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--mxai-ty, 0) * -8deg)) rotateY(calc(var(--mxai-tx, 0) * 11deg));
    transition: transform .6s var(--mxai-ease);
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-laptop {
    isolation: auto;
    transform-style: preserve-3d; /* the cards stand above the plate in real depth */
    transform-origin: 50% 50%;
    animation: mxai-s-board linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain 0% contain 86%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-laptop::after,
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-laptop__base,
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-laptop__camera,
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-tabs__panels,
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__ring { display: none; }

  /* the drawing: frame, dot field, corner marks, ruler */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan {
    display: block;
    position: absolute; z-index: -1;
    inset: -18% -12%;
    animation: mxai-s-plan linear both, mxai-s-draw linear both;
    animation-timeline: --mxai-s-showcase, --mxai-s-showcase;
    animation-range: contain 2% contain 58%, contain 3% contain 17%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan::before {
    content: "";
    position: absolute; inset: -45% -40%;
    background: radial-gradient(circle, rgba(var(--mxai-white-rgb), .6) calc(1.1px * var(--mxai-k)), transparent calc(1.7px * var(--mxai-k))) 0 0 / 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse closest-side, var(--mxai-mask-on) calc(var(--mxai-grow) * .5), transparent var(--mxai-grow));
    mask-image: radial-gradient(ellipse closest-side, var(--mxai-mask-on) calc(var(--mxai-grow) * .5), transparent var(--mxai-grow));
    animation: mxai-s-dots linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain 7% contain 58%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan > i {
    position: absolute;
    width: calc(150px * var(--mxai-k)); height: calc(150px * var(--mxai-k));
    margin: calc(-75px * var(--mxai-k));
    background:
      linear-gradient(var(--mxai-accent-hot), var(--mxai-accent-hot)) 50% 0 / calc(1px * var(--mxai-k)) 100% no-repeat,
      linear-gradient(var(--mxai-accent-hot), var(--mxai-accent-hot)) 0 50% / 100% calc(1px * var(--mxai-k)) no-repeat;
    animation: mxai-s-mark linear both, mxai-line-live 3.4s ease-in-out infinite alternate;
    animation-timeline: --mxai-s-showcase, auto;
    animation-range: contain 0% contain 6%, normal;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan > i:nth-child(2) { animation-duration: auto, 4.3s; animation-direction: normal, alternate-reverse; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan > i:nth-child(3) { animation-duration: auto, 2.9s; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan > i:nth-child(4) { animation-duration: auto, 3.8s; animation-direction: normal, alternate-reverse; }
  /* the frame itself: dashes that keep travelling round it, and a measuring line that sweeps down the plate */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan::after {
    content: "";
    position: absolute; inset: calc(-1px * var(--mxai-k));
    background:
      linear-gradient(var(--mxai-accent-hot), var(--mxai-accent-hot)) 0 100% / var(--mxai-draw) calc(1.5px * var(--mxai-k)) no-repeat,
      linear-gradient(var(--mxai-accent-hot), var(--mxai-accent-hot)) 100% 0 / var(--mxai-draw) calc(1.5px * var(--mxai-k)) no-repeat,
      linear-gradient(var(--mxai-accent-hot), var(--mxai-accent-hot)) 0 100% / calc(1.5px * var(--mxai-k)) var(--mxai-draw) no-repeat,
      linear-gradient(var(--mxai-accent-hot), var(--mxai-accent-hot)) 100% 0 / calc(1.5px * var(--mxai-k)) var(--mxai-draw) no-repeat,
      linear-gradient(180deg, transparent, rgba(var(--mxai-accent-rgb), .55) 45%, var(--mxai-accent-hot) 50%, rgba(var(--mxai-accent-rgb), .55) 55%, transparent) 0 -4% / 100% 7% no-repeat;
    animation: mxai-line-march 4.8s linear infinite;
    pointer-events: none;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan > i::after {
    content: attr(data-l);
    position: absolute; left: 56%; top: 30%;
    color: var(--mxai-muted);
    font-family: var(--mxai-font-mono);
    font-size: calc(9px * var(--mxai-k));
    font-style: normal;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan > i:nth-child(1) { left: 0; top: 0; animation-range: contain 4% contain 10%; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan > i:nth-child(2) { right: 0; top: 0; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan > i:nth-child(3) { left: 0; bottom: 0; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan > i:nth-child(4) { right: 0; bottom: 0; animation-range: contain 4% contain 10%; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__plan b {
    position: absolute; right: calc(-40px * var(--mxai-k)); top: 8%; bottom: 8%;
    width: calc(16px * var(--mxai-k));
    background:
      repeating-linear-gradient(180deg, rgba(var(--mxai-white-rgb), .6) 0 calc(1px * var(--mxai-k)), transparent calc(1px * var(--mxai-k)) 20px) 0 0 / 50% 100% no-repeat,
      repeating-linear-gradient(180deg, rgba(var(--mxai-white-rgb), .6) 0 calc(1px * var(--mxai-k)), transparent calc(1px * var(--mxai-k)) 100px);
    animation: mxai-line-run 1.4s linear infinite, mxai-s-fade linear both;
    animation-timeline: auto, --mxai-s-showcase;
    animation-range: normal, contain 44% contain 52%;
  }
  /* the liquid: as in the reference it is a clear, rippling sheet that fills most of the frame, soft at the
     edges, with long bright ridges running along the plate. Thin highlights on a faint tint, bent by the
     displacement filter (whose noise keeps moving), and flowing along the plate on their own. */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__liquid {
    position: absolute; left: 50%; top: 50%;
    width: 74%; height: 66%;
    background:
      repeating-linear-gradient(4deg, transparent 0 7%, rgba(var(--mxai-white-rgb), .1) 9%, rgba(var(--mxai-white-rgb), .85) 10.4%, rgba(var(--mxai-white-rgb), .12) 12%, transparent 15.5%) 0 0 / 300% 100%,
      repeating-linear-gradient(-3deg, transparent 0 11%, rgba(var(--mxai-white-rgb), .5) 12.2%, transparent 14% 23%) 0 0 / 300% 100%,
      linear-gradient(rgba(var(--mxai-white-rgb), .13), rgba(var(--mxai-white-rgb), .07));
    -webkit-mask-image: radial-gradient(ellipse closest-side, var(--mxai-mask-on) 58%, transparent 100%);
    mask-image: radial-gradient(ellipse closest-side, var(--mxai-mask-on) 58%, transparent 100%);
    filter: url(#mxai-liquid);
    animation: mxai-s-liquid linear both, mxai-liquid-flow 11s linear infinite;
    animation-timeline: --mxai-s-showcase, auto;
    animation-range: contain 6% contain 50%, normal;
  }
  /* the matrix of blocks, 10 by 5: the middle row comes up first, then the rows beside it. Each block is
     extruded with a stack of shadows that points at the viewer's "down" in this isometric view, and every
     block has its own height, so the matrix reads as a model of buildings on the plan. */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__tiles {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 7% 2.4%;
    position: absolute; left: 50%; top: 50%;
    width: 52%;
    animation: mxai-s-tiles linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain 22% contain 56%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__tiles i {
    --mxai-row: round(down, var(--mxai-t) / 10);
    --mxai-col: mod(var(--mxai-t), 10);
    --mxai-e: calc(var(--mxai-h) * 1px * (5 + mod(var(--mxai-t) * 7, 5) * 3.5));
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 14%;
    background: linear-gradient(140deg, var(--mxai-chrome-hi), var(--mxai-chrome-mid));
    /* --mxai-ex follows the camera: it is the sideways part of "towards the viewer" in the plane of the board */
    translate: calc(var(--mxai-e) * var(--mxai-ex) * -1) calc(var(--mxai-e) * -.93);
    box-shadow:
      calc(var(--mxai-e) * var(--mxai-ex) * .25) calc(var(--mxai-e) * .23) 0 var(--mxai-chrome-mid),
      calc(var(--mxai-e) * var(--mxai-ex) * .5) calc(var(--mxai-e) * .46) 0 var(--mxai-chrome-mid),
      calc(var(--mxai-e) * var(--mxai-ex) * .75) calc(var(--mxai-e) * .7) 0 var(--mxai-chrome-lo),
      calc(var(--mxai-e) * var(--mxai-ex)) calc(var(--mxai-e) * .93) 0 var(--mxai-chrome-lo),
      calc(var(--mxai-e) * var(--mxai-ex) * 1.45) calc(var(--mxai-e) * 1.3) calc(6px * var(--mxai-k)) rgba(var(--mxai-black-rgb), .55);
    animation: mxai-s-tile linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain calc(21% + max(var(--mxai-row) - 2, 2 - var(--mxai-row)) * 2.6% + var(--mxai-col) * .32%) contain calc(51% + var(--mxai-col) * .4%);
  }
  /* the plate: the lid without the laptop around it, with guide lines drawn on its face */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-laptop__lid {
    transform-style: preserve-3d;
    border-radius: 26px;
    padding: 1.8%;
    /* the edge of the plate: a stack of shadows towards the viewer, like the tiles */
    box-shadow:
      calc(var(--mxai-ex) * 3px) calc(var(--mxai-ey) * 2.8px) 0 var(--mxai-bezel-edge), calc(var(--mxai-ex) * 6px) calc(var(--mxai-ey) * 5.6px) 0 var(--mxai-bezel-edge),
      calc(var(--mxai-ex) * 9px) calc(var(--mxai-ey) * 8.4px) 0 var(--mxai-bezel), calc(var(--mxai-ex) * 12px) calc(var(--mxai-ey) * 11.2px) 0 var(--mxai-bezel),
      calc(var(--mxai-ex) * 40px) calc(var(--mxai-ey) * 36px) 60px rgba(var(--mxai-black-rgb), .7), 0 0 60px rgba(var(--mxai-accent-deep-rgb), .18);
    animation: mxai-s-slab linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain 34% contain 44%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-laptop__lid::before { content: ""; position: absolute; inset: -14px; border: 1px solid rgba(var(--mxai-white-rgb), .16); border-radius: 38px; pointer-events: none; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-laptop__screen { border-radius: 14px; border-bottom: 1px solid rgba(var(--mxai-white-rgb), .06); background: var(--mxai-surface); }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-laptop__screen::after {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle closest-side, transparent calc(62% - 1px), rgba(var(--mxai-accent-rgb), .6) 62%, transparent calc(62% + 1px)),
      linear-gradient(rgba(var(--mxai-accent-rgb), .4), rgba(var(--mxai-accent-rgb), .4)) 50% 0 / 1px 100% no-repeat,
      linear-gradient(rgba(var(--mxai-accent-rgb), .4), rgba(var(--mxai-accent-rgb), .4)) 0 50% / 100% 1px no-repeat;
    pointer-events: none;
    animation: mxai-s-guides linear both, mxai-line-turn 9s linear infinite;
    animation-timeline: --mxai-s-showcase, auto;
    animation-range: contain 38% contain 62%, normal;
  }
  /* the data cards: laid out like the report, dropped onto the plate from above, two by two */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: 2.2%;
    position: absolute; inset: 0; z-index: 5;
    margin: 1.8%;
    padding: 9% 4% 4.5% 19%;
    transform-style: preserve-3d;
    pointer-events: none;
  }
  /* what makes the plate a product screen at the end: a title and a side menu */
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__ui {
    display: grid; align-content: start; gap: 5.5%;
    position: absolute; inset: 0; z-index: 5;
    margin: 1.8%;
    padding: 3.2% 0 0 3.5%;
    translate: 0 0 16px;
    pointer-events: none;
    animation: mxai-s-fade linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain 70% contain 80%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__ui b { margin-bottom: 4%; color: var(--mxai-text); font-family: var(--mxai-font); font-size: clamp(.8rem, 1.1vw, 1rem); font-weight: 700; line-height: 1; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__ui i {
    display: block;
    width: 11.5%; height: 0; padding-bottom: 1.5%;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(var(--mxai-accent-rgb), .6) 0 16%, transparent 16% 26%, rgba(var(--mxai-white-rgb), .16) 26% 100%);
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__ui i:nth-of-type(2) { width: 9.5%; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-showcase__ui i:nth-of-type(4) { width: 10.5%; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop {
    display: flex; flex-direction: column; gap: .35rem;
    min-width: 0;
    padding: .8rem .9rem .9rem;
    --mxai-tint: var(--mxai-accent-deep-rgb);
    position: relative;
    border: 1px solid rgba(var(--mxai-white-rgb), .22);
    border-radius: var(--mxai-r-md);
    background: linear-gradient(150deg, rgba(var(--mxai-tint), 1), rgba(var(--mxai-tint), .78) 60%, rgba(var(--mxai-tint), .5));
    box-shadow: calc(var(--mxai-ex) * 14px) calc(var(--mxai-ey) * 9px) 0 rgba(var(--mxai-black-rgb), .35), calc(var(--mxai-ex) * 40px) calc(var(--mxai-ey) * 26px) 34px rgba(var(--mxai-black-rgb), .55);
    color: var(--mxai-text);
    font-family: var(--mxai-font);
    line-height: 1.2;
    --mxai-pair: round(down, var(--mxai-n) / 2);
    --mxai-z: calc(34px + var(--mxai-n) * 16px); /* every card stands at its own height above the plate */
    animation: mxai-s-drop linear both, mxai-card-float calc(3.2s + var(--mxai-n) * .45s) ease-in-out calc(var(--mxai-n) * -.7s) infinite alternate;
    animation-timeline: --mxai-s-showcase, auto;
    animation-range: contain calc(44% + var(--mxai-pair) * 8% + var(--mxai-n) * .8%) contain calc(58% + var(--mxai-pair) * 8% + var(--mxai-n) * .8%), normal;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop:nth-child(4n+1) { --mxai-tint: var(--mxai-blue-rgb); }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop:nth-child(4n+2) { --mxai-tint: var(--mxai-accent-deep-rgb); }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop:nth-child(4n+3) { --mxai-tint: var(--mxai-rose-rgb); }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop:nth-child(4n) { --mxai-tint: var(--mxai-coral-rgb); }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop--chart { --mxai-tint: var(--mxai-accent-deep-rgb); }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop--list { --mxai-tint: var(--mxai-blue-rgb); }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop em { position: absolute; right: .7rem; top: .7rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--mxai-chrome-hi); box-shadow: 0 0 0 2px rgba(var(--mxai-white-rgb), .3); }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop small { color: var(--mxai-chrome-hi); font-size: .68rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop b { font-size: clamp(.95rem, 1.5vw, 1.35rem); font-weight: 700; font-variant-numeric: tabular-nums; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop--chart { grid-column: 1 / 4; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop--chart svg { flex: 1 1 auto; width: 100%; min-height: 0; fill: none; stroke: var(--mxai-accent-lighter); stroke-width: 2; stroke-linecap: round; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop--chart path {
    stroke-dasharray: 1;
    animation: mxai-s-stroke linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain 70% contain 84%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop__line2 { stroke: var(--mxai-gold); stroke-width: 1.2; opacity: .85; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop--list i {
    transform-origin: 0 50%;
    animation: mxai-grow-x linear both;
    animation-timeline: --mxai-s-showcase;
    animation-range: contain 76% contain 86%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop--list { gap: .7rem; }
  #mxai-page.mxai-sda .mxai-scene.mxai-showcase .mxai-drop--list i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--mxai-accent) 0 var(--mxai-v), rgba(var(--mxai-white-rgb), .1) var(--mxai-v) 100%); }

  #mxai-page.mxai-sda .mxai-showcase__ring {
    animation: mxai-sx-ring linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%; /* complete by the time the section fills the screen */
  }

  /* ranges are lengths (vh) from the start of the pin, so the last screen added for the pan to the FAQ
     (see "HOW -> FAQ" below) does not shift them */
  #mxai-page.mxai-sda .mxai-scene.mxai-how { height: 440vh; overflow-x: clip; view-timeline: --mxai-s-how block; }
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-h2 {
    position: relative; z-index: 0;
    animation: mxai-s-how-title linear both, mxai-s-pan-out-title linear forwards;
    animation-timeline: --mxai-s-how, --mxai-s-faq;
    animation-range: contain 129.6vh contain 187.2vh, entry 6% entry 86%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-h2 > span { display: block; }
  /* typed from the last third of the entry to just after the pin (66vh into the cover range, 1.45vh per letter) */
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-type__char {
    animation: mxai-type-char linear both;
    animation-timeline: --mxai-s-how;
    animation-range: cover calc(66vh + var(--mxai-c) * 1.452vh) cover calc(67.45vh + var(--mxai-c) * 1.452vh);
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-how__floats { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-float {
    animation: mxai-s-drift linear both;
    animation-timeline: --mxai-s-how;
    animation-range: contain var(--mxai-from) contain var(--mxai-to);
  }
  /* with the 3D pieces running, the canvas takes the place of the CSS ones (it spans the whole screen, so a
     piece that comes close to the viewer is not cut at the edge of the container) */
  #mxai-page.mxai-sda .mxai-scene.mxai-how.is-gl .mxai-how__gl {
    display: block;
    position: absolute; z-index: 1;
    left: calc(50% - 50vw); top: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-how.is-gl .mxai-float { visibility: hidden; animation: none; }
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-steps { z-index: 2; gap: 1.25rem; max-width: 1080px; margin-top: 5vh; perspective: 1400px; }
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-steps::before { display: none; }
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-step {
    --mxai-r0: -7deg;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 1.65rem;
    border: 1px solid rgba(var(--mxai-white-rgb), .12);
    border-radius: var(--mxai-r-lg);
    background: rgba(var(--mxai-glass-rgb), .74);
    box-shadow: 0 30px 70px rgba(var(--mxai-black-rgb), .6), 0 1px 0 rgba(var(--mxai-white-rgb), .07) inset;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    text-align: left;
    animation: mxai-s-land linear both, mxai-s-pan-out linear forwards;
    animation-timeline: --mxai-s-how, --mxai-s-faq;
    animation-range: contain 43.2vh contain 168vh, entry 4% entry 84%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-step:nth-child(2) { --mxai-r0: 6deg; animation-range: contain 64.8vh contain 189.6vh, entry 8% entry 88%; }
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-step:nth-child(3) { --mxai-r0: -4deg; animation-range: contain 86.4vh contain 211.2vh, entry 12% entry 92%; }

  /* ---- HOW -> FAQ: the camera pans to the right. The FAQ section is laid over the last screen of the
          pinned steps (margin-top: -100vh) and held at the top of the screen while it enters (mxai-s-lock
          cancels its upward travel), so the scroll only moves things sideways: the headline and then the
          three cards leave to the left, tipping away in depth and in a staggered order, streaks of light
          rush past, and the FAQ comes in from the right in layers (intro slower, questions faster, each
          one swinging round to face the viewer). Both scenes read the FAQ's timeline (timeline-scope). */
  #mxai-page.mxai-sda { timeline-scope: --mxai-s-faq; }
  /* exactly one screen, content centred in it, so nothing empty is left under the questions */
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) {
    z-index: 1;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100vh;
    margin-top: -100vh;
    padding-top: 0; padding-bottom: 0;
    overflow-x: clip;
    view-timeline: --mxai-s-faq block;
  }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) > .mxai-container {
    position: relative;
    isolation: isolate;
    animation: mxai-s-lock linear both;
    animation-timeline: --mxai-s-faq;
    animation-range: entry 0% entry 100%;
  }
  /* the white sheet of the FAQ slides in with the pan, like the next page coming in from the right: it lives in
     the held container (so it does not rise with the section) and covers exactly the one screen of the section */
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) { overflow-y: visible; border-radius: 0; background: none; }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) > .mxai-container::before {
    content: "";
    position: absolute; z-index: -2;
    left: calc(50% - 50vw); top: 50%;
    width: 100vw; height: 100vh;
    margin-top: -50vh;
    background: var(--mxai-paper);
    box-shadow: -2rem 0 5rem rgba(var(--mxai-black-rgb), .45);
    pointer-events: none;
    animation: mxai-s-pan-in linear both;
    animation-timeline: --mxai-s-faq;
    animation-range: entry 6% entry 90%;
  }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-faq__head { position: static; }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-faq__head .mxai-reveal,
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-faq__head .mxai-h2 > span { animation: none; }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-faq__head,
  #mxai-page.mxai-sda .mxai-faq--chat:not(.is-plain) .mxai-faq__head .mxai-h2 {
    animation: mxai-s-pan-in linear both;
    animation-timeline: --mxai-s-faq;
    animation-range: entry 10% entry 92%;
  }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-accordion { perspective: 1200px; }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-accordion__item {
    transform-origin: 0 50%;
    animation: mxai-s-pan-in-row linear both;
    animation-timeline: --mxai-s-faq;
    animation-range: entry 12% entry 90%;
  }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-accordion__item:nth-child(2) { animation-range: entry 14% entry 92%; }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-accordion__item:nth-child(3) { animation-range: entry 16% entry 94%; }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-accordion__item:nth-child(4) { animation-range: entry 18% entry 96%; }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-accordion__item:nth-child(5) { animation-range: entry 20% entry 98%; }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-accordion__item:nth-child(6) { animation-range: entry 22% entry 100%; }
  #mxai-page.mxai-sda .mxai-faq:not(.is-plain) .mxai-faq__chat,
  #mxai-page.mxai-sda .mxai-faq--chat:not(.is-plain) .mxai-faq__intro {
    animation: mxai-s-pan-in linear both;
    animation-timeline: --mxai-s-faq;
    animation-range: entry 16% entry 100%;
  }
  /* streaks of light and a travelling glow, drawn on the pinned steps screen while the camera moves */
  #mxai-page.mxai-sda .mxai-scene.mxai-how > .mxai-container::after {
    content: "";
    position: absolute; z-index: 3;
    left: calc(50% - 50vw); top: 0;
    width: 200vw; height: 100vh;
    background:
      radial-gradient(ellipse 30vw 40vh at 62% 55%, rgba(var(--mxai-accent-deep-rgb), .32), transparent 70%),
      linear-gradient(90deg, transparent, rgba(var(--mxai-accent-rgb), .7) 40%, rgba(var(--mxai-white-rgb), .9) 50%, transparent) no-repeat 20% 22% / 34vw 1px,
      linear-gradient(90deg, transparent, rgba(var(--mxai-accent-rgb), .55), transparent) no-repeat 64% 34% / 22vw 1px,
      linear-gradient(90deg, transparent, rgba(var(--mxai-accent-hot-rgb), .8) 45%, rgba(var(--mxai-white-rgb), .8) 55%, transparent) no-repeat 38% 47% / 46vw 2px,
      linear-gradient(90deg, transparent, rgba(var(--mxai-accent-rgb), .5), transparent) no-repeat 80% 61% / 28vw 1px,
      linear-gradient(90deg, transparent, rgba(var(--mxai-accent-rgb), .65) 40%, rgba(var(--mxai-white-rgb), .7) 50%, transparent) no-repeat 12% 73% / 38vw 1px,
      linear-gradient(90deg, transparent, rgba(var(--mxai-accent-rgb), .45), transparent) no-repeat 56% 86% / 20vw 1px;
    opacity: 0;
    pointer-events: none;
    animation: mxai-s-streak linear both;
    animation-timeline: --mxai-s-faq;
    animation-range: entry 4% entry 96%;
  }
  #mxai-page.mxai-sda .mxai-scene.mxai-how .mxai-step__num { box-shadow: 0 0 34px rgba(var(--mxai-accent-deep-rgb), .4); }
  /* ---- the steps are switched off (data-mxai-off): the FAQ has no last screen of theirs to lie on, so it
          follows in the normal flow, and the scene that is now the last one before it (.is-pan, set by
          initSwitch) takes over the pan. While the FAQ enters, the container of that scene is held on
          screen instead of scrolling away (mxai-s-hold) and slides out to the left as one piece. */
  #mxai-page.mxai-sda [data-mxai-off] + .mxai-faq { margin-top: 0; }
  /* .is-plain (initSwitch): what comes before the FAQ is not a pinned scene, so none of the pan applies and the
     FAQ is an ordinary section with the ordinary scroll reveals */
  #mxai-page.mxai-sda .mxai-scene.is-pan > .mxai-container {
    animation: mxai-s-hold linear both, mxai-s-pan-out-title linear forwards;
    animation-timeline: --mxai-s-faq, --mxai-s-faq;
    animation-range: entry 0% entry 100%, entry 4% entry 88%;
  }

}

/* --------------------------------------------------------------------------
   19. LEAD FORM PAGE ("Заявете интерес", interest.html)
   A second page that uses the same wrapper, tokens and script.
   The block is called mxai-interest: .mxai-lead is already the lead paragraph.
   -------------------------------------------------------------------------- */
/* the content is centred on the screen and sized to fit it without scrolling on a laptop */
#mxai-page.mxai-page--lead { border-top-color: var(--mxai-bg); }
#mxai-page .mxai-interest { position: relative; display: flex; align-items: center; min-height: calc(100vh - var(--mxai-host-top)); padding: clamp(1.5rem, 4vh, 3rem) 0; overflow: hidden; }
/* Behind the form: a faint grid, a pool of light and the data helix of the home page as points of light on
   black (client: "keep it black, but instead of these dots take the dots of the DNA"). The helix is drawn by
   initLeadHelix on this canvas; on a narrow screen it stands behind the form and is dimmed. */
/* The foot of the page settles into its plain ground, above the ambient light of the wrapper (z-index 6), within
   the padding under the form. Whatever follows the page (the footer of the theme) then starts from one flat
   colour, and no line shows where the page ends. */
#mxai-page .mxai-interest::after {
  content: "";
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0;
  height: clamp(1.5rem, 4vh, 3rem);
  background: linear-gradient(180deg, rgba(var(--mxai-bg-rgb), 0) 0%, var(--mxai-bg) 88%);
  pointer-events: none;
}
#mxai-page .mxai-interest__field { position: absolute; inset: 0; pointer-events: none; }
#mxai-page .mxai-interest__helix { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity 1.2s ease; }
#mxai-page .mxai-interest__helix.is-on { opacity: 1; }
@media (max-width: 899px) { #mxai-page .mxai-interest__helix.is-on { opacity: .5; } }
#mxai-page .mxai-interest__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--mxai-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mxai-grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, var(--mxai-mask-on) 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, var(--mxai-mask-on) 20%, transparent 100%);
}
#mxai-page .mxai-interest__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 46% 52% at 50% 52%, rgba(var(--mxai-accent-deep-rgb), .3) 0%, rgba(var(--mxai-accent-deep-rgb), .1) 50%, transparent 100%);
}
/* the points are in two groups that sway in opposite directions around the middle of the form,
   so they keep moving against each other while every line stays attached to the form */
@keyframes mxai-orbit-sway { from { --mxai-turn: -9deg; } to { --mxai-turn: 9deg; } }
#mxai-page .mxai-interest__orbit {
  position: absolute; inset: 0;
  transform-origin: var(--mxai-cx, 50%) var(--mxai-cy, 50%);
  transform: rotate(var(--mxai-turn));
  animation: mxai-orbit-sway 15s ease-in-out infinite alternate;
}
#mxai-page .mxai-interest__orbit--b { animation-duration: 21s; animation-direction: alternate-reverse; }
#mxai-page .mxai-interest__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#mxai-page .mxai-interest__lines line { stroke: rgba(var(--mxai-accent-rgb), .15); stroke-width: 1; }
/* a point: --mxai-x / --mxai-y place it, --mxai-fx / --mxai-fy point back to the middle of the form */
@keyframes mxai-node-out { from { opacity: 0; transform: translate(var(--mxai-fx, 0), var(--mxai-fy, 0)) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes mxai-node-flow {
  0% { opacity: 0; transform: translate(var(--mxai-fx, 0), var(--mxai-fy, 0)); }
  14% { opacity: .9; }
  86% { opacity: .9; }
  100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes mxai-node-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
#mxai-page .mxai-node {
  --mxai-c: var(--mxai-accent-light);
  position: absolute;
  left: var(--mxai-x); top: var(--mxai-y);
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  margin: -1rem 0 0 -1rem;
  pointer-events: auto;
  animation: mxai-node-out 1s var(--mxai-ease) calc(.1s + var(--mxai-n) * 50ms) backwards;
}
#mxai-page .mxai-node:hover { z-index: 3; }
#mxai-page .mxai-node__dot {
  width: var(--mxai-d, 8px); height: var(--mxai-d, 8px);
  border-radius: 50%;
  background: var(--mxai-c);
  box-shadow: 0 0 0 4px rgba(var(--mxai-white-rgb), .06), 0 0 14px var(--mxai-c);
  animation: mxai-node-float calc(5s + var(--mxai-n) * .23s) ease-in-out calc(var(--mxai-n) * -.6s) infinite;
  transition: scale var(--mxai-dur-fast) var(--mxai-ease), box-shadow var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-node:hover .mxai-node__dot { scale: 1.6; box-shadow: 0 0 0 6px rgba(var(--mxai-white-rgb), .12), 0 0 22px var(--mxai-c); }
/* a pulse of data that keeps travelling from the form to the point */
#mxai-page .mxai-node__pulse {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--mxai-c);
  box-shadow: 0 0 8px var(--mxai-c);
  opacity: 0;
  animation: mxai-node-flow calc(3.4s + var(--mxai-n) * .17s) linear calc(1.2s + var(--mxai-n) * .41s) infinite;
  pointer-events: none;
}
#mxai-page .mxai-node__tip {
  position: absolute; left: 50%; bottom: calc(100% + .25rem);
  display: grid; gap: .4rem;
  min-width: 13.5rem;
  padding: .75rem .95rem .85rem;
  border: 1px solid rgba(var(--mxai-white-rgb), .12);
  border-radius: var(--mxai-r-md);
  background: rgba(var(--mxai-glass-rgb), .96);
  box-shadow: 0 18px 44px rgba(var(--mxai-black-rgb), .6), 0 0 34px rgba(var(--mxai-accent-deep-rgb), .3);
  font-family: var(--mxai-font);
  font-size: .86rem;
  line-height: 1.3;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  rotate: calc(-1 * var(--mxai-turn)); /* stays upright while its group sways */
  transform: translate(-50%, 8px);
  transition: opacity var(--mxai-dur-fast) ease, transform var(--mxai-dur) var(--mxai-ease), visibility 0s linear var(--mxai-dur-fast);
  pointer-events: none;
}
#mxai-page .mxai-node.is-below .mxai-node__tip { bottom: auto; top: calc(100% + .25rem); }
#mxai-page .mxai-node.is-start .mxai-node__tip { left: 0; transform: translate(0, 8px); }
#mxai-page .mxai-node.is-end .mxai-node__tip { left: auto; right: 0; transform: translate(0, 8px); }
#mxai-page .mxai-node:hover .mxai-node__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
#mxai-page .mxai-node.is-start:hover .mxai-node__tip, #mxai-page .mxai-node.is-end:hover .mxai-node__tip { transform: none; }
@media (max-width: 1023px) {
  /* no room beside the form: the points and their lines are left out */
  #mxai-page .mxai-interest__orbit { display: none; }
}
#mxai-page .mxai-interest__inner { position: relative; width: 100%; max-width: 42rem; }
#mxai-page .mxai-interest__back {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 clamp(1rem, 2.6vh, 1.75rem);
  color: var(--mxai-muted);
  font-size: var(--mxai-fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-interest__back:hover { color: var(--mxai-text); }
#mxai-page .mxai-interest__title {
  margin: 0 0 var(--mxai-space-4);
  color: var(--mxai-text);
  font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.4rem);
  font-weight: 800;
  line-height: var(--mxai-lh-tight);
  letter-spacing: var(--mxai-ls-tight);
}
#mxai-page .mxai-interest__intro { margin: 0 0 clamp(1.25rem, 3vh, 2rem); max-width: 38rem; color: var(--mxai-text-2); font-size: var(--mxai-fs-lead); line-height: 1.55; opacity: .9; }
#mxai-page .mxai-form {
  padding: clamp(1.4rem, 4vw, 2.25rem);
  border: 1px solid var(--mxai-border);
  border-radius: var(--mxai-r-xl);
  background: rgba(var(--mxai-glass-rgb), .78);
  box-shadow: var(--mxai-shadow-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#mxai-page .mxai-form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; margin: 0 0 1.5rem; }
#mxai-page .mxai-field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
#mxai-page .mxai-field__label { color: var(--mxai-text-2); font-size: var(--mxai-fs-sm); font-weight: 600; line-height: 1.3; }
#mxai-page .mxai-field__optional { margin-left: .35rem; color: var(--mxai-muted-2); font-weight: 400; }
#mxai-page .mxai-field__input {
  width: 100%; height: 3.25rem;
  margin: 0;
  padding: 0 1rem;
  border: 1px solid rgba(var(--mxai-white-rgb), .14);
  border-radius: var(--mxai-r-md);
  background: rgba(var(--mxai-white-rgb), .05);
  color: var(--mxai-text);
  font-family: var(--mxai-font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  transition: border-color var(--mxai-dur-fast) ease, box-shadow var(--mxai-dur-fast) ease, background-color var(--mxai-dur-fast) ease;
}
#mxai-page .mxai-field__input::placeholder { color: var(--mxai-muted-2); font-weight: 400; opacity: 1; }
#mxai-page .mxai-field__input:hover { border-color: rgba(var(--mxai-white-rgb), .24); }
#mxai-page .mxai-field__input:focus-visible { border-color: var(--mxai-accent); background: rgba(var(--mxai-white-rgb), .07); box-shadow: var(--mxai-shadow-focus); outline: none; }
#mxai-page .mxai-field.is-invalid .mxai-field__input { border-color: rgba(var(--mxai-red-rgb), .75); }
#mxai-page .mxai-field__error { margin: 0; color: var(--mxai-red); font-size: var(--mxai-fs-xs); line-height: 1.35; }
#mxai-page .mxai-field__error[hidden], #mxai-page .mxai-form__status[hidden], #mxai-page .mxai-interest__done[hidden], #mxai-page .mxai-form[hidden] { display: none; }
#mxai-page .mxai-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#mxai-page .mxai-form__submit { width: 100%; }
#mxai-page .mxai-form.is-loading .mxai-form__submit { opacity: .7; pointer-events: none; }
#mxai-page .mxai-form.is-loading .mxai-form__submit::after {
  content: "";
  width: 1rem; height: 1rem;
  margin-left: .6rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: mxai-spin .7s linear infinite;
}
#mxai-page .mxai-form__status { margin: 1rem 0 0; color: var(--mxai-red); font-size: var(--mxai-fs-sm); line-height: 1.45; text-align: center; }
#mxai-page .mxai-form__note { margin: 1rem 0 0; color: var(--mxai-muted-2); font-size: var(--mxai-fs-xs); line-height: 1.5; text-align: center; }
#mxai-page .mxai-interest__done {
  display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
  padding: clamp(1.6rem, 4vw, 2.5rem);
  border: 1px solid rgba(var(--mxai-accent-rgb), .35);
  border-radius: var(--mxai-r-xl);
  background: linear-gradient(180deg, rgba(var(--mxai-accent-deep-rgb), .18), rgba(var(--mxai-glass-rgb), .8));
  box-shadow: var(--mxai-shadow-card);
  animation: mxai-pop var(--mxai-dur-slow) var(--mxai-ease) both;
}
#mxai-page .mxai-interest__done:focus { outline: none; }
#mxai-page .mxai-interest__done-ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(var(--mxai-green-rgb), .16); color: var(--mxai-green); }
#mxai-page .mxai-interest__done-ico .mxai-icon { width: 1.4rem; height: 1.4rem; }
#mxai-page .mxai-interest__done-title { margin: 0; color: var(--mxai-text); font-size: var(--mxai-fs-h3); font-weight: 700; line-height: 1.25; }
#mxai-page .mxai-interest__done-text { margin: 0 0 .4rem; color: var(--mxai-text-2); font-size: var(--mxai-fs-body); line-height: 1.55; }
@media (max-width: 767px) {
  #mxai-page .mxai-interest { align-items: flex-start; }
}
@media (max-width: 560px) {
  #mxai-page .mxai-form__fields { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   16. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #mxai-page *,
  #mxai-page *::before,
  #mxai-page *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
  #mxai-page { --mxai-t0: 0s; }
  #mxai-page .mxai-node, #mxai-page .mxai-node__dot, #mxai-page .mxai-interest__orbit { animation: none; }
  #mxai-page .mxai-node__pulse { display: none; }
  #mxai-page .mxai-intro { display: none; }
  #mxai-page.mxai-js .mxai-reveal { opacity: 1; transform: none; }
  #mxai-page .mxai-hero__chart-line { stroke-dashoffset: 0; animation: none; }
  #mxai-page .mxai-hero__chart-area { opacity: 1; animation: none; }
  #mxai-page .mxai-hero__cursor, #mxai-page .mxai-hero__dot, #mxai-page .mxai-hero__tip { transition: none; }
  #mxai-page .mxai-laptop { animation: none; }
  #mxai-page .mxai-hero__anim, #mxai-page .mxai-hero__title-line, #mxai-page .mxai-hero__cta .mxai-btn, #mxai-page .mxai-hero__bg, #mxai-page .mxai-dash-wrap { animation: none; }
  #mxai-page .mxai-analyzer__field::before { display: none; }
  #mxai-page .mxai-eclipse, #mxai-page .mxai-eclipse__body, #mxai-page .mxai-dash { animation: none !important; }
  #mxai-page .mxai-eclipse__bloom { animation: none; }
  #mxai-page .mxai-eclipse__glint { display: none; }
  #mxai-page .mxai-dash { transform: none !important; opacity: 1; }
}