/* AiXCEL finish layer. Linked last in every page's <head>, so it wins over page styles.
   Type: Geist + Geist Mono. Motion: word-by-word headline reveal, staggered grid pop-in.
   Material: "liquid glass" (light and dark) - frosted, saturated backdrop, a bright gradient rim, an inner
   bottom glow and a specular highlight that follows the cursor (--lx/--ly, set by wf-motion.js). */

:root:root {
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lg-fill: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.48));
  --lg-rim: linear-gradient(150deg, #fff 0%, rgba(255,255,255,.4) 32%, rgba(206,210,204,.55) 62%, rgba(255,255,255,.95) 100%);
  --lg-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -10px 18px -12px rgba(255,255,255,.85), 0 1px 1px rgba(16,24,40,.04), 0 10px 26px -12px rgba(16,24,40,.16), 0 34px 64px -34px rgba(16,24,40,.2);
  --dg-fill: linear-gradient(180deg, rgba(30,30,32,.78), rgba(15,15,16,.86));  /* smoked, not milky */
  --dg-rim: linear-gradient(150deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.07) 34%, rgba(255,255,255,.025) 66%, rgba(255,255,255,.14) 100%);
  --dg-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -16px 28px -22px rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.95);
}

/* ---------- type: Geist, calmer tracking and real word spacing (audit: headings were crushed) ---------- */
:root:root { --mute: #626368; --faint: #7A7B7F; --ink-2: #3E3F44; }
html body { font-family: var(--sans); font-size: 16px; font-feature-settings: "ss01", "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html body h1, html body h2, html body h3, html body .h1, html body .h2, html body .d1, html body .d2, html body .d3 { font-family: var(--sans); letter-spacing: -.024em; word-spacing: .05em; font-feature-settings: "ss01"; text-wrap: balance; }
html body h1, html body .h1, html body .d1 { font-weight: 350; line-height: 1.04; }
html body h2, html body .h2, html body .d2 { font-weight: 350; line-height: 1.08; }
html body h1 b, html body h2 b, html body .h1 b, html body .h2 b, html body em.i { font-weight: 560; letter-spacing: -.028em; }
html body h3 { letter-spacing: -.014em; }
html body p { text-wrap: pretty; }
html body .badge, html body .kicker { font-family: var(--mono); font-size: 11.5px !important; letter-spacing: .08em !important; }
html body .eg, html body small[class], html body .pv-cap { font-family: var(--mono); }
html body input, html body select, html body textarea, html body button { font-family: inherit; }
svg.hg { width: .62em; height: .62em; vertical-align: .06em; margin-right: .08em; }

/* ---------- layout bugs from the audit ---------- */
.foot.wf-x { overflow: clip !important; margin-bottom: 0 !important; }
html, body { overflow-x: clip; }
.form .fld label, .form .fld input { text-align: left !important; }
.wall img { height: 28px !important; opacity: .62 !important; }
.wall img.sq { height: 38px !important; }
.wall a:hover img, .wall a:focus-visible img { opacity: 1 !important; }
.hx-in { gap: 4px; }
.motion-toggle { min-height: 36px !important; height: 36px; padding: 0 12px !important; font-size: 12px !important; border-radius: 999px !important; }
@media (max-width: 700px) { .motion-toggle { width: 36px; padding: 0 !important; font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6v12M16 6v12' stroke='%230B0B0C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"), var(--lg-fill) !important; background-repeat: no-repeat; background-position: center; background-size: 14px, auto; } }

/* ---------- motion: headline words rise out of their own line ---------- */
.wf-words .ww { display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: top; padding-block: .06em; margin-block: -.06em; }
.wf-words .ww > span { display: inline-block; translate: 0 108%; opacity: .001; transition: translate 1s cubic-bezier(.16,.84,.2,1) calc(var(--i, 0) * 60ms), opacity .7s ease calc(var(--i, 0) * 60ms); }
.wf-words.wf-in .ww > span { translate: 0 0; opacity: 1; }
.wf-pop { opacity: 0; translate: 0 14px; scale: .96; transition: opacity .6s ease calc(var(--i, 0) * 45ms), translate .8s cubic-bezier(.16,.84,.2,1) calc(var(--i, 0) * 45ms), scale .8s cubic-bezier(.16,.84,.2,1) calc(var(--i, 0) * 45ms); }
.wf-popwrap.wf-in .wf-pop { opacity: 1; translate: 0 0; scale: 1; }
html.motion-off .wf-words .ww > span, html.motion-off .wf-pop { translate: none; scale: none; opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .wf-words .ww > span, .wf-pop { translate: none !important; scale: none !important; opacity: 1 !important; } }

/* ---------- liquid glass, light ---------- */
.hx.c .hx-logo, .hx.c .hx-links, .hx.c .hx-cta, .hx-m summary, .hx-m nav, .hx-list, .hx-pv,
.motion-toggle, .hero form.form, main .badge {
  border: 1px solid transparent !important;
  background:
    radial-gradient(160px 90px at var(--lx, 30%) var(--ly, -30%), rgba(255,255,255,.7), rgba(255,255,255,0) 70%) padding-box,
    var(--lg-fill) padding-box,
    var(--lg-rim) border-box !important;
  -webkit-backdrop-filter: blur(22px) saturate(190%) contrast(1.04);
  backdrop-filter: blur(22px) saturate(190%) contrast(1.04);
  box-shadow: var(--lg-shadow) !important;
}
.hx.c .hx-mk { background: linear-gradient(180deg, #fff, #F1F2EF) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.06) !important; }
.hx-row:hover, .hx-row.on, .hx-row:focus-visible { background: rgba(255,255,255,.75) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16,24,40,.06); }
.hx-l:hover, .hx-l[aria-current="page"], .hx-dd:hover > .hx-l, .hx-dd.open > .hx-l { background: rgba(255,255,255,.7) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16,24,40,.06); }

/* ---------- liquid glass, dark (over black sections, and every glass panel inside them) ---------- */
html.wf-navdark .hx.c .hx-logo, html.wf-navdark .hx.c .hx-links, html.wf-navdark .hx.c .hx-cta, html.wf-navdark .hx-m summary,
.wf-glass, .dark .badge, .band .badge, .foot .panel, .cta-band .badge, .wf-x .badge {
  border: 1px solid transparent !important;
  background:
    radial-gradient(200px 120px at var(--lx, 30%) var(--ly, -40%), rgba(255,255,255,.07), rgba(255,255,255,0) 70%) padding-box,
    var(--dg-fill) padding-box,
    var(--dg-rim) border-box !important;
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  backdrop-filter: blur(22px) saturate(115%);
  box-shadow: var(--dg-shadow) !important;
}
.dark .badge, .band .badge, .cta-band .badge, .wf-x .badge, .wf-glass .badge { color: #C9C9CC !important; }
html.wf-navdark .hx.c .hx-mk { background: linear-gradient(180deg, #F7F4EC, #E9E5DA) !important; }
html.wf-navdark .hx-l:hover, html.wf-navdark .hx-l[aria-current="page"], html.wf-navdark .hx-dd:hover > .hx-l, html.wf-navdark .hx-dd.open > .hx-l { background: rgba(255,255,255,.1) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.dark form.form, .foot form.form, .cta-band form.form, .wf-x form.form {
  border: 1px solid transparent !important;
  background: var(--dg-fill) padding-box, var(--dg-rim) border-box !important;
  box-shadow: var(--dg-shadow) !important;
}

/* ---------- primary buttons: a lit lime surface rather than a flat fill ---------- */
html body .btn:not(.plain):not(.alt):not(.btn-line), html body .btn-primary, .hx-cta i, .axbk .go {
  background: linear-gradient(180deg, #D9FF5C 0%, #C8FF2E 48%, #B6EE1C 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.08), 0 1px 2px rgba(60,80,0,.18), 0 8px 20px -10px rgba(120,170,0,.55) !important;
}
html body .btn:not(.plain):not(.alt):hover, html body .btn-primary:hover, .axbk .go:hover { filter: brightness(1.03) saturate(1.05); }

/* ---------- cursor label + footer AI summary ---------- */
.wf-curs { background: rgba(14,14,15,.82) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -10px rgba(0,0,0,.6); translate: 14px 14px !important; font-family: var(--sans) !important; letter-spacing: -.01em; white-space: nowrap; }
.wf-ai { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); color: #E8E8E6; font-size: 15px; letter-spacing: -.02em; }
.wf-ai span { margin-right: 6px; }
.wf-ai a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #F2F2F0; text-decoration: none; font-weight: 500;
  border: 1px solid transparent; background: var(--dg-fill) padding-box, var(--dg-rim) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); transition: translate .3s cubic-bezier(.2,.7,.1,1), color .25s, box-shadow .3s; }
.wf-ai a svg { width: 17px; height: 17px; }
.wf-ai a:hover, .wf-ai a:focus-visible { translate: 0 -2px; color: #0B0B0C; background: linear-gradient(180deg, #D9FF5C, #B6EE1C) padding-box, linear-gradient(#C8FF2E, #C8FF2E) border-box; box-shadow: 0 8px 20px -8px rgba(160,220,0,.6); }
@media (max-width: 640px) { .wf-ai { justify-content: flex-start; } .wf-ai span { width: 100%; } }

/* ---------- small finishing ---------- */
::selection { background: #C8FF2E; color: #0B0B0C; }
html body :focus-visible { outline-offset: 3px; }

/* header parts never shrink or wrap while the pill joins (audit: layout shift) */
.hx-logo, .hx-links, .hx-cta { flex-shrink: 0; }
.hx-links { flex-wrap: nowrap; }

/* footer: one baseline for the legal row; client tiles give wide logos more room */
.foot .legal { align-items: center !important; }
.cl .t img { max-width: 80% !important; max-height: 30px !important; }
.cl .t img[src*="hrmny"] { max-height: 40px !important; }
.cl .t img[src*="ai-product-accelerator"] { max-width: 88% !important; max-height: 34px !important; }

/* ---------- UX pass (UXPin "Web UI Design Best Practices" review) ---------- */
/* readable floor: no UI text under 12px */
html body .fld label, html body .cell .kind, html body .kd, html body .pv-cap, html body .foot h3, html body .foot h4, html body .kp span, html body .eg { font-size: max(12px, 1em) !important; }
html body .fld label { font-size: 12px !important; }
/* lime is for the primary action: arrow chips stay neutral until hover */
html body .ulink .sq { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(11,11,12,.2) !important; transition: background .25s, box-shadow .25s; }
html body .ulink:hover .sq, html body .ulink:focus-visible .sq { background: linear-gradient(180deg, #D9FF5C, #B6EE1C) !important; box-shadow: none !important; }
.dark .ulink .sq, .wf-darkpage .ulink .sq, .band .ulink .sq, .foot .ulink .sq { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) !important; }
/* orientation: breadcrumb on service sub-pages (injected by wf-nav.js) */
.wf-crumb { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.wf-crumb a { color: inherit; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.wf-crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.wf-darkpage .wf-crumb, .dark .wf-crumb { color: #9D9EA2; }
.wf-darkpage .wf-crumb a:hover { color: #fff; }
.wf-crumb span[aria-current] { color: var(--ink); }
.wf-darkpage .wf-crumb span[aria-current] { color: #F2F2F0; }
/* comfortable tap targets on touch screens */
@media (pointer: coarse) { .hx-all, .ulink, .foot ul a, .wf-crumb a, .faq summary, details > summary { min-height: 44px; } }
/* stories carousel controls */
.wf-cnav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.wf-cnav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink);
  background: var(--lg-fill) padding-box, var(--lg-rim) border-box; box-shadow: var(--lg-shadow); transition: translate .25s; }
.wf-cnav button:hover { translate: 0 -2px; }
.wf-cnav button:disabled { opacity: .35; cursor: default; translate: none; }
.wf-cnav svg { width: 16px; height: 16px; }
.hx-l[aria-current="true"] { color: #0B0B0C; background: rgba(255,255,255,.7) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16,24,40,.06); }
html.wf-navdark .hx-l[aria-current="true"] { color: #fff !important; background: rgba(255,255,255,.1) !important; }
.hx-mpause { margin-top: 4px; min-height: 44px; border: 0; border-top: 1px solid #E3E4E0; background: none; text-align: left; padding: 0 12px; font: 500 14px var(--sans); color: #6E6F72; cursor: pointer; }
@media (max-width: 980px) { .motion-toggle, .mtog { display: none !important; } }

/* secondary buttons: quiet glass, never a second lime */
html body .btn.alt { background: var(--lg-fill) padding-box, var(--lg-rim) border-box !important; border: 1px solid transparent !important; box-shadow: var(--lg-shadow) !important; color: var(--ink) !important; }

/* neutral arrow chips stay visible on dark surfaces */
html body .ulink .sq { color: var(--ink); }
.dark .ulink .sq, .wf-darkpage .ulink .sq, .band .ulink .sq, .foot .ulink .sq, .wf-x .ulink .sq { color: #F2F2F0 !important; }
html body .ulink:hover .sq, html body .ulink:focus-visible .sq { color: #0B0B0C !important; }

/* No visible pause-motion controls (Ahmad, 2026-10-11). OS "reduce motion" is still honoured everywhere. */
.motion-toggle, .mtog, .hx-mpause, button#pause { display: none !important; }

/* Film grain over the whole page: a little tactile realism on flat fills */
body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media print { body::after { display: none; } }

/* audit pass: readable small labels, the footer motion preference */
html body .badge, html body .kicker { font-size: 12px !important; }
.wf-mpref { font: 500 12px var(--sans, inherit); color: inherit; opacity: .7; background: none; border: 1px solid currentColor; border-radius: 999px; padding: 4px 10px; min-height: 28px; cursor: pointer; margin-left: 12px; }
.wf-mpref:hover, .wf-mpref:focus-visible { opacity: 1; }

/* motion-graphics video figure (product and service pages) */
.mo-vid { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mo-vid video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 20px; background: #0B0B0C; border: 1px solid rgba(17,19,16,.12); box-shadow: 0 30px 60px -32px rgba(16,24,40,.45); display: block; }
.mo-vid figcaption { font-size: 13px; color: var(--mute, #62655F); }
.mo-sec { padding-block: clamp(32px, 5vw, 64px); }
.mo-sec .mo-in { max-width: 1040px; margin-inline: auto; padding-inline: 16px; display: flex; flex-direction: column; gap: 18px; }
.mo-sec h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 400; letter-spacing: -.02em; }
.mo-sec h2 b { font-weight: 600; }