/* Hallmark · macrostructure: Map / Diagram (per team) · tone: practical, per-team · anchor hue: gold on ink + mist
   Hallmark · pre-emit critique (Oct 19 slop fix): P4 H4 E4 S5 R4 V5
   Humantic AI · Solution pages v2 (Website V2, Oct 16 2026; main sections rebuilt Oct 18-19): Sales, GTM
   Engineering, Marketing, Product and AI. Hero copy, the team's own scene on a mist stage, then ONE main
   section of its own per team (no shared template): Sales = surface dock + stage matrix (Gantt bars on ink),
   GTM Engineering = worked workflows ledger + MCP tool bar on ink, Marketing = ABM funnel + two doors,
   Product and AI = two lanes merging into one context band. Brand tokens only; Cabinet Grotesk + Manrope.
   Motion: the hero load sequence, plus one staged entrance per main section (solutions.js adds .is-in);
   reduced motion and no-JS show the final frame. */

.sl {
  --gold: #FFC61E; --gold-300: #FFE8A5; --ink: #110A33; --lav: #DDD6FF; --mist: #F6F4FF; --cream: #FFF4D2; --slate: #5B6478;
  --line: rgba(17,10,51,.1); --ease: cubic-bezier(.23, 1, .32, 1);
  --disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sh-sm: 0 2px 8px rgba(17,10,51,.08); --sh-md: 0 12px 32px -12px rgba(17,10,51,.22); --sh-lg: 0 32px 64px -24px rgba(17,10,51,.35);
}
html { scroll-behavior: smooth; }
body.sl { margin: 0; overflow-x: clip; background: #fff; color: var(--ink); }
.sl *, .sl *::before, .sl *::after { box-sizing: border-box; }
.sl h1, .sl h2, .sl h3, .sl p, .sl dl, .sl dd, .sl figure, .sl blockquote { margin: 0; }
.sl h1, .sl h2, .sl h3 { text-wrap: balance; overflow-wrap: anywhere; }
.sl p, .sl dd, .sl li { text-wrap: pretty; }
:where(.sl) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.sl a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sl-skip { position: absolute; left: -9999px; }
.sl-skip:focus { left: 8px; top: 8px; z-index: 2000; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 8px; }
.sl-shell { max-width: 1168px; margin: 0 auto; padding: 0 24px; }
.sl [id] { scroll-margin-top: 96px; }

/* Shared atoms: one label style, lavender chips (small only), text links, pill actions */
.sl-pane__top span, .sl-fields dt, .sl-acct__k, .sl-stage__cap, .sl-roles > span, .sl-plinks > span, .sl-flows__head span, .sl-lane__k, .sl-tbar__bar span {
  font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--slate);
}
.sl-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 700 13px/1.4 Manrope, Arial, sans-serif; white-space: nowrap; text-decoration: none; }
.sl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font: 700 15px/1.4 var(--disp); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sl-link svg { transition: transform .2s var(--ease); }
@media (hover: hover) { .sl-link:hover svg { transform: translateX(3px); } a.sl-chip:hover { background: var(--gold-300); } }
.sl .hx-btn { min-height: 50px; transition: background-color .15s, color .15s, transform .16s var(--ease); }
.sl .hx-btn:active { transform: scale(.96); }
.sl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Hero: centred copy, then the scene, then the proof ---------- */
.sl-hero { padding: 152px 0 64px; text-align: center; }
.sl-hero h1 { max-width: 19ch; margin: 0 auto; font: 700 clamp(38px, 6vw, 76px)/1.06 var(--disp); letter-spacing: -.035em; }
.sl-lead { max-width: 62ch; margin: 24px auto 0 !important; font-size: 18px; line-height: 1.65; color: var(--slate); }
.sl-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.sl-note { margin-top: 16px !important; font-size: 14px; line-height: 1.5; color: var(--slate); }
.sl-note code { margin-left: 4px; padding: 4px 12px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 600 13px/1.4 var(--mono); overflow-wrap: anywhere; }

.sl .sl-stage { position: relative; margin-top: 56px; padding: 48px 40px 40px; border-radius: 24px; background: var(--mist); text-align: left; }
.sl-stage__cap { position: absolute; top: 16px; right: 24px; }
.sl-scene { display: grid; align-items: center; font-size: 14px; line-height: 1.5; }
.sl-scene--sales { grid-template-columns: minmax(0, 1.3fr) 64px minmax(0, 1fr); }
.sl-scene--gtm-engineering { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.05fr) 48px minmax(0, 1fr); }
.sl-scene--marketing { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
.sl-scene--product-ai { grid-template-columns: minmax(0, 1.15fr) 64px minmax(0, 1fr); }

.sl-pane { padding: 16px 20px 20px; border-radius: 16px; background: #fff; box-shadow: var(--sh-md); }
.sl-pane__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 16px !important; border-bottom: 1px solid var(--line); }
.sl-pane__top b { font: 700 17px/1.2 var(--disp); }
.sl-pane--ink { background: var(--ink); color: #fff; }
.sl-pane--ink .sl-pane__top { border-color: rgba(255,255,255,.14); }
.sl-pane--ink .sl-pane__top span { color: var(--gold-300); }
.sl-scene code { font: 600 12.5px/1.45 var(--mono); overflow-wrap: anywhere; }

/* The connector between panes: a line, an arrowhead, and a dot that travels it once */
.sl-wire { position: relative; height: 2px; margin: 0 8px; background: rgba(17,10,51,.18); overflow: visible; }
.sl-wire::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid rgba(17,10,51,.35); border-right: 0; }
.sl-wire i { position: absolute; inset: 0; overflow: hidden; }
.sl-wire i::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(255,198,30,.3); opacity: 0; }

/* People and fields */
.sl-person { display: flex; align-items: center; gap: 12px; }
.sl-person span { display: grid; color: var(--slate); font-size: 13px; }
.sl-person b { color: var(--ink); font: 700 16px/1.25 var(--disp); }
.sl-ava { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-300); font: 700 15px/1 var(--disp); font-style: normal; }
.sl-fields { display: grid; gap: 12px; }
.sl-fields div { display: grid; gap: 2px; }
.sl-fields dd { font-weight: 600; }

/* Sales: profile page + Agent Pi extension, then the CRM record */
.sl-prof__body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.sl-bars { display: grid; gap: 8px; margin-top: 16px !important; }
.sl-bars i, .sl-ghost i { display: block; height: 8px; border-radius: 4px; background: #E7E5F0; }
.sl-bars i:nth-child(2) { width: 80%; } .sl-bars i:nth-child(3) { width: 60%; }
.sl-ext { padding: 12px 16px 16px; border-radius: 12px; background: #fff; box-shadow: var(--sh-lg), 0 0 0 1px var(--line); }
.sl-ext .sl-pane__top { margin-bottom: 12px !important; padding-bottom: 8px; }
.sl-ext .sl-pane__top b { font-size: 15px; }
.sl-disc { display: flex; align-items: center; gap: 12px; }
.sl-disc > b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); font: 700 20px/1 var(--disp); }
.sl-disc span { display: grid; color: var(--slate); font-size: 13px; line-height: 1.4; }
.sl-disc strong { color: var(--ink); font: 700 15px/1.2 var(--disp); }
.sl-tip { display: flex; gap: 8px; align-items: baseline; margin-top: 10px !important; font-size: 13px; line-height: 1.45; }
.sl-tip i { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--gold-300); font: 800 12px/16px Manrope, Arial, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.sl-tip--no i { background: var(--mist); }
.sl-fakebtn { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 12px/1.3 Manrope, Arial, sans-serif; }

/* GTM Engineering: contacts, Humantic AI, three destinations */
.sl-rows { display: grid; gap: 8px; }
.sl-rows li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--mist); }
.sl-rows i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--gold); }
.sl-lanes { display: grid; gap: 12px; }
.sl-lanes li { display: grid; gap: 4px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.07); }
.sl-lanes b { color: var(--gold); font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .04em; }
.sl-outs { display: grid; gap: 12px; }
.sl-outs .sl-pane { display: grid; gap: 2px; padding: 12px 16px; }
.sl-outs b { font: 700 15px/1.3 var(--disp); }
.sl-outs span { color: var(--slate); font-size: 13px; }

/* Marketing: Vidar + Intent into the week's ABM list */
.sl-src { display: grid; gap: 16px; }
.sl-src .sl-tags { margin-top: 12px; }
.sl-src .sl-chip { font-size: 12px; padding: 2px 10px; }
.sl-feed { display: grid; gap: 8px; }
.sl-feed li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.45; }
.sl-feed b, .sl-layers i { flex: none; display: inline-grid; place-items: center; min-width: 30px; padding: 1px 6px; border-radius: 6px; background: var(--ink); color: var(--gold); font: 800 12px/16px Manrope, Arial, sans-serif; font-style: normal; }
.sl-acct { padding: 16px; border-radius: 12px; background: var(--cream); }
.sl-acct__name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sl-acct__name > b { font: 700 18px/1.2 var(--disp); }
.sl-layers { display: flex; gap: 4px; }
.sl-acct__k { margin-top: 14px !important; }
.sl-disc4 { display: flex; gap: 6px; margin-top: 6px !important; }
.sl-disc4 i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); font: 700 15px/1 var(--disp); font-style: normal; }
.sl-disc4 i:first-child { background: var(--gold); }
.sl-acct__v { margin-top: 4px !important; font-weight: 600; }
.sl-ghost { display: grid; grid-template-columns: 40% 1fr; gap: 16px; margin-top: 16px !important; padding: 0 16px; }
.sl-ghost i:last-child { width: 60%; justify-self: end; }

/* Product and AI: the agent's tool calls, then the context it gets back */
.sl-ask { margin-left: auto !important; max-width: 94%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--mist); }
.sl-calls { display: grid; gap: 10px; margin-top: 16px !important; }
.sl-calls li { display: flex; gap: 10px; align-items: flex-start; }
.sl-calls i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: var(--gold); }
.sl-calls span { display: grid; min-width: 0; color: var(--slate); font-size: 13px; }
.sl-calls code { color: var(--ink); }
.sl-ctx .sl-fields div { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sl-ctx .sl-fields div:last-child { padding-bottom: 0; border: 0; }

/* Load sequence: panes rise, the wire carries its dot, rows fill in. Reduced motion: none of it. */
@media (prefers-reduced-motion: no-preference) {
  .sl-scene > .sl-pane, .sl-scene > .sl-src, .sl-scene > .sl-outs { animation: slUp .7s var(--ease) both; animation-delay: calc(var(--d) * 140ms + 120ms); }
  .sl-ext { animation: slSide .6s var(--ease) both .55s; }
  .sl-wire i::before { animation: slDot 1.1s var(--ease) both .75s; }
  .sl-fields div, .sl-rows li, .sl-feed li, .sl-calls li, .sl-outs .sl-pane, .sl-disc4 i { animation: slIn .45s var(--ease) both; animation-delay: calc(var(--k) * 160ms + 1.1s); }
  .sl-rows i { animation: slPop .3s var(--ease) both; animation-delay: calc(var(--k) * 160ms + 1.5s); }
}
@keyframes slUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slSide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes slIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes slDot { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--run, 48px)); } }
.sl-scene--sales .sl-wire, .sl-scene--marketing .sl-wire, .sl-scene--product-ai .sl-wire { --run: 40px; }
.sl-scene--gtm-engineering .sl-wire { --run: 24px; }

/* Proof under the scene: the numbers, then the six customers in one row */
.sl-proof { margin-top: 48px; }
.sl-proof p { font: 600 18px/1.5 var(--disp); }
.sl-proof b { font-weight: 700; box-shadow: inset 0 -8px 0 var(--gold-300); padding: 0 2px; }
.sl-logos { display: grid; grid-template-columns: repeat(6, auto); justify-content: center; align-items: center; gap: 24px 48px; margin-top: 24px; }
.sl-logos img { display: block; max-width: 100%; height: 32px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; }

/* ---------- Sections ---------- */
.sl-sec { padding: 80px 0; background: #fff; }
.sl-sec--mist { background: var(--mist); }
.sl-sec--cream { background: var(--cream); }
.sl-sec--ink { background: var(--ink); color: #fff; }
body.hai .sl-sec--ink h2, body.hai .sl-sec--ink h3 { color: #fff; }
.sl-h2 { max-width: 24ch; margin: 0 auto !important; text-align: center; font: 700 clamp(27px, 3.4vw, 44px)/1.12 var(--disp); letter-spacing: -.02em; }
.sl-sub { max-width: 60ch; margin: 16px auto 0 !important; text-align: center; font-size: 17.5px; font-weight: 400; line-height: 1.6; color: var(--slate); }
.sl-foot { margin-top: 32px !important; text-align: center; font-size: 15px; color: var(--slate); }
.sl-foot a { color: var(--ink); font-weight: 700; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.sl-sec--tight { padding: 72px 0 64px; }
.sl-sec--ink a:focus-visible { outline-color: var(--gold); }

/* Shared lines under each main section: prompt links, role links, the surface order, the full suite */
.sl-more { display: grid; justify-items: center; gap: 12px; margin-top: 32px; }
.sl-plinks, .sl-roles { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 20px; font-size: 15px; line-height: 1.6; }
.sl-plinks > span, .sl-roles > span { margin-right: -4px; }
.sl-plinks a, .sl-roles a, .sl-order a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .15s; }
@media (hover: hover) { .sl-plinks a:hover, .sl-roles a:hover, .sl-order a:hover { text-decoration-color: var(--ink); } }
.sl-order { max-width: 72ch; margin: 24px auto 0 !important; text-align: center; font-size: 15px; line-height: 1.6; color: var(--slate); }
.sl-suite { max-width: 80ch; margin: 16px auto 0 !important; text-align: center; font-size: 14px; line-height: 1.7; color: var(--slate); }
.sl-suite a { color: var(--ink); font-weight: 700; text-decoration: none; }
@media (hover: hover) { .sl-suite a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } }
.sl-sec--ink .sl-plinks a, .sl-sec--ink .sl-roles a, .sl-sec--ink .sl-order a, .sl-sec--ink .sl-suite a { color: #fff; }
.sl-sec--ink .sl-plinks > span, .sl-sec--ink .sl-roles > span { color: var(--gold-300); }
.sl-sec--ink .sl-order, .sl-sec--ink .sl-suite, .sl-sec--ink .sl-sub { color: rgba(255,255,255,.78); }
.sl-hosts { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.sl-hosts img { display: block; width: 20px; height: 20px; border-radius: 5px; object-fit: contain; outline: 1px solid rgba(0,0,0,.08); outline-offset: -1px; }
.sl-hosts span { font: 600 12.5px/1 var(--mono); color: var(--slate); }

/* Sales · dock: one hairline strip in Amar's order; the first three lead, MCP and API trail on mist */
.sl-dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1.4fr)) repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 40px; border-radius: 24px; background: var(--line); box-shadow: 0 0 0 1px var(--line); overflow: hidden; text-align: left; }
.sl-dock__c { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #fff; }
.sl-dock__c.is-also { background: var(--mist); }
.sl-dock h3 { margin-top: 8px !important; font: 700 19px/1.15 var(--disp); }
.sl-dock .is-also h3 { font-size: 17px; }
.sl-dock h3 a, .sl-door h3 a, .sl-lane h3 a, .sl-flow h3 a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .15s; }
@media (hover: hover) { .sl-dock h3 a:hover, .sl-door h3 a:hover, .sl-lane h3 a:hover, .sl-flow h3 a:hover { text-decoration-color: var(--gold); } }
.sl-dock__c > p:not([class]) { color: var(--slate); font-size: 15px; line-height: 1.55; }
.sl-dock__ft { display: grid; gap: 2px; margin-top: auto !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--slate); }
.sl-dock__ft svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; color: var(--ink); }
.sl-dock__ft b { color: var(--ink); font-weight: 700; }

/* Sales · stage matrix (ink): stages across, products down; a product's lit stages join into one bar,
   Signals is the gold bar under all five. Desktop is a subgrid; phones read it stage by stage. */
.sl-mx { display: grid; grid-template-columns: 8.5em repeat(5, minmax(0, 1fr)); grid-template-rows: auto repeat(5, 40px) 56px; margin-top: 48px; text-align: left; }
.sl-mx__rows { grid-column: 1; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
.sl-mx__rows li { display: flex; align-items: center; font: 700 15px/1.2 var(--disp); color: #fff; }
.sl-mx__rows a { color: #fff; text-decoration: none; }
@media (hover: hover) { .sl-mx__rows a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; } }
.sl-mx__stages { grid-column: 2 / -1; grid-row: 1 / 7; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.sl-mx__st { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; box-shadow: inset 1px 0 0 rgba(255,255,255,.1); }
.sl-mx__st h3 { display: grid; gap: 4px; align-content: end; padding: 0 12px 16px; font: 700 16px/1.2 var(--disp); }
.sl-mx__st h3 span { font: 500 13px/1.35 Manrope, Arial, sans-serif; color: rgba(255,255,255,.72); }
.sl-mx__st ul { display: contents; }
.sl-mx__st li { position: relative; }
.sl-mx__st li.on::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 12px; margin-top: -6px; border-radius: 999px; background: var(--lav); transform-origin: left center; }
.sl-mx__st li.on.l::before { left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sl-mx__st li.on.r::before { right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sl-mx__st li.on span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sl-mx__sig { grid-column: 2 / -1; grid-row: 7; align-self: end; padding: 10px 20px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.sl-mx__sig a { color: var(--ink); font: 700 16px/1 var(--disp); text-decoration: none; }
.sl-sec--ink .sl-mx__sig a:focus-visible { outline-color: var(--ink); }

/* GTM Engineering · worked workflows (ink): one ledger, input, the Humantic step, what is written back */
.sl-flows { margin-top: 48px; text-align: left; }
.sl-flows__head, .sl-flow { display: grid; grid-template-columns: 10em minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 48px; }
.sl-flows__head { padding-bottom: 12px; }
.sl-sec--ink .sl-flows__head span { color: var(--gold-300); }
.sl-flow { align-items: start; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); }
.sl-flow h3 { display: grid; justify-items: start; gap: 6px; font: 700 19px/1.15 var(--disp); }
.sl-flow h3 .sl-flow__p { font: 700 13px/1.4 Manrope, Arial, sans-serif; color: var(--gold-300); text-decoration: underline; text-decoration-color: rgba(255,232,165,.45); text-underline-offset: 3px; }
.sl-flow__in, .sl-flow__out { position: relative; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82); }
.sl-flow__out { color: #fff; font-weight: 600; }
.sl-flow__step { position: relative; display: grid; justify-items: start; gap: 6px; font-size: 15px; line-height: 1.55; }
.sl-flow__in::after, .sl-flow__step::after { content: ""; position: absolute; top: 4px; right: -36px; width: 20px; height: 16px; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.sl-lane-tag { padding: 2px 10px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .04em; }
.sl-flow__step code { font: 600 13px/1.45 var(--mono); color: var(--lav); overflow-wrap: anywhere; }
.sl-flow__step span { color: #fff; }

/* GTM Engineering · the 13 MCP tools as one bar, sized by tool count (no tool-id grid) */
.sl-tbar { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.14); }
.sl-tbar__h { text-align: center; font: 700 19px/1.2 var(--disp); color: #fff; }
.sl-tbar__bar { display: flex; gap: 4px; max-width: 960px; margin: 16px auto 0; }
.sl-tbar__bar li { flex: var(--n) 1 0; min-width: max-content; display: grid; gap: 2px; padding: 12px 16px; border-radius: 8px; background: var(--gold); color: var(--ink); }
.sl-tbar__bar li:first-child { border-radius: 16px 8px 8px 16px; }
.sl-tbar__bar li:last-child { border-radius: 8px 16px 16px 8px; }
.sl-tbar__bar li:nth-child(2) { background: var(--gold-300); }
.sl-tbar__bar li:nth-child(3) { background: #fff; }
.sl-tbar__bar li:nth-child(4) { background: var(--lav); }
.sl-tbar__bar a { color: var(--ink); font: 700 16px/1.2 var(--disp); text-decoration: none; }
.sl-tbar__bar a:focus-visible { outline-color: var(--ink); }
.sl-tbar__bar span { color: var(--ink); opacity: .78; }
.sl-tbar__ft { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin-top: 16px !important; font-size: 14px; }
.sl-tbar__ft a { color: var(--gold-300); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,232,165,.45); text-underline-offset: 3px; }

/* Marketing · the ABM funnel: four ink bands narrowing left to right, the last one gold */
.sl-fun { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3px; margin-top: 48px; text-align: left; }
.sl-fun li { display: flex; flex-direction: column; gap: 8px; padding-right: 16px; }
.sl-fun li:nth-child(1) { --t0: 0px; --t1: 11px; }
.sl-fun li:nth-child(2) { --t0: 11px; --t1: 22px; }
.sl-fun li:nth-child(3) { --t0: 22px; --t1: 33px; }
.sl-fun li:nth-child(4) { --t0: 33px; --t1: 44px; }
.sl-fun__band { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 136px; margin: 0 -16px 12px 0 !important; padding: 0 24px; background: var(--ink); color: #fff; clip-path: polygon(0 var(--t0), 100% var(--t1), 100% calc(100% - var(--t1)), 0 calc(100% - var(--t0))); }
.sl-fun li:last-child .sl-fun__band { margin-right: 0 !important; background: var(--gold); color: var(--ink); }
.sl-fun__band a { color: inherit; font: 700 19px/1.15 var(--disp); text-decoration: none; }
.sl-fun__band a:focus-visible { outline-color: var(--gold); outline-offset: -4px; }
.sl-fun li:last-child .sl-fun__band a:focus-visible { outline-color: var(--ink); }
.sl-fun__band span { font-size: 13px; line-height: 1.35; opacity: .8; }
.sl-fun h3 { font: 700 19px/1.15 var(--disp); }
.sl-fun li > p:last-child { color: var(--slate); font-size: 15px; line-height: 1.55; }
.sl-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 48px; border-radius: 24px; background: var(--line); box-shadow: 0 0 0 1px var(--line); overflow: hidden; text-align: left; }
.sl-door { padding: 24px 28px; background: var(--mist); }
.sl-door h3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font: 700 19px/1.15 var(--disp); }
.sl-door > p { margin-top: 8px !important; color: var(--slate); font-size: 15px; line-height: 1.55; }
.sl-door .sl-plinks { justify-content: flex-start; margin-top: 4px !important; }

/* Product and AI · two lanes (MCP, API) piping into one ink context band */
.sl-y { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin-top: 48px; text-align: left; }
.sl-lane { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 24px; background: var(--mist); }
.sl-lane h3 { font: 700 19px/1.15 var(--disp); }
.sl-lane p:not([class]) { color: var(--slate); font-size: 15.5px; line-height: 1.55; }
.sl-lane__k { margin-top: auto !important; padding-top: 8px; }
.sl-lane code { align-self: flex-start; max-width: 100%; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 600 13.5px/1.4 var(--mono); overflow-wrap: anywhere; }
.sl-lane::after { content: ""; position: absolute; left: 50%; bottom: -32px; width: 2px; height: 32px; background: rgba(17,10,51,.25); }
.sl-ctx2 { grid-column: 1 / -1; padding: 28px 32px; border-radius: 24px; background: var(--ink); color: #fff; }
.sl-ctx2 h3 { text-align: center; font: 700 19px/1.2 var(--disp); color: #fff; }
body.hai .sl-ctx2 h3 { color: #fff; }
.sl-ctx2 dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; margin-top: 20px; }
.sl-ctx2 dt { font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-300); }
.sl-ctx2 dd { margin-top: 4px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.85); }
.sl-plinks--ink { margin-top: 24px !important; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.sl-plinks--ink a { color: #fff; }
.sl-plinks--ink > span { color: var(--gold-300); }
.sl-ctx2 a:focus-visible { outline-color: var(--gold); }

/* One staged entrance per main section (solutions.js adds data-rv, then .is-in). No JS or reduced motion: final frame. */
@media (prefers-reduced-motion: no-preference) {
  .sl .reveal[data-rv] > * { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--rv, 0) * 70ms); }
  .sl .reveal[data-rv].is-in > * { opacity: 1; transform: none; }
  .sl-mx.reveal[data-rv] li.on::before { transform: scaleX(.2); opacity: 0; transition: transform .6s var(--ease), opacity .3s var(--ease); transition-delay: calc(var(--c, 0) * 90ms + 200ms); }
  .sl-mx.reveal[data-rv].is-in li.on::before { transform: none; opacity: 1; }
}


/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sl-logos { grid-template-columns: repeat(3, auto); }
  /* Dock: the three lead surfaces full width, MCP and API side by side (no lone item) */
  .sl-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-dock__c:not(.is-also) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; }
  .sl-dock__c:not(.is-also) .sl-hosts, .sl-dock__c:not(.is-also) h3 { grid-column: 1; }
  .sl-dock__c:not(.is-also) > p:not([class]) { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .sl-dock__c:not(.is-also) .sl-dock__ft { grid-column: 2; grid-row: 3; margin-top: 8px !important; }
  .sl-flows__head, .sl-flow { grid-template-columns: 8.5em minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 40px; }
  .sl-flow__in::after, .sl-flow__step::after { right: -30px; }
  .sl-ctx2 dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones and small tablets: the matrix reads stage by stage, the ledger row by row, the funnel top to bottom */
@media (max-width: 820px) {
  .sl-mx { display: block; }
  .sl-mx__rows { display: none; }
  .sl-mx__stages { display: block; }
  .sl-mx__st { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 14px 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.14); }
  .sl-mx__st h3 { padding: 0; align-content: center; }
  .sl-mx__st ul { display: flex; flex-wrap: wrap; gap: 2px 0; }
  .sl-mx__st li[aria-hidden] { display: none; }
  .sl-mx__st li.on::before { display: none; }
  .sl-mx__st li.on span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font: 700 15px/1.4 var(--disp); color: var(--lav); }
  .sl-mx__st li.on + li.on span::before { content: "·"; margin: 0 8px; color: rgba(255,255,255,.5); }
  .sl-mx__sig { margin-top: 20px !important; border-radius: 20px; }
  .sl-flows__head { display: none; }
  .sl-flow { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .sl-flow h3 { grid-auto-flow: column; justify-content: space-between; align-items: baseline; }
  .sl-flow__in::after, .sl-flow__step::after { display: none; }
  .sl-flow__in::before, .sl-flow__step::before, .sl-flow__out::before { content: attr(data-k); display: block; margin-bottom: 2px; font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-300); }
  .sl-flow__step::before { margin-bottom: 0; }
  .sl-tbar__bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-tbar__bar li, .sl-tbar__bar li:first-child, .sl-tbar__bar li:last-child { min-width: 0; border-radius: 12px; }
  .sl-fun { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .sl-fun li { padding-right: 0; }
  .sl-fun li:nth-child(1) { --t0: 0%; --t1: 4%; }
  .sl-fun li:nth-child(2) { --t0: 4%; --t1: 8%; }
  .sl-fun li:nth-child(3) { --t0: 8%; --t1: 12%; }
  .sl-fun li:nth-child(4) { --t0: 12%; --t1: 16%; }
  .sl-fun__band { height: auto; min-height: 72px; margin: 0 0 4px !important; padding: 12px calc(var(--t1) + 20px); text-align: center; clip-path: polygon(var(--t0) 0, calc(100% - var(--t0)) 0, calc(100% - var(--t1)) 100%, var(--t1) 100%); }
  .sl-fun li > h3, .sl-fun li > p:last-child { text-align: center; }
  .sl-doors { grid-template-columns: minmax(0, 1fr); }
  .sl-y { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sl-lane::after { display: none; }
}
@media (max-width: 960px) {
  .sl-scene { grid-template-columns: minmax(0, 1fr) !important; max-width: 560px; margin: 0 auto; }
  .sl-wire { justify-self: center; width: 2px; height: 32px; margin: 8px 0; }
  .sl-wire::after { right: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid rgba(17,10,51,.35); border-bottom: 0; }
  .sl-wire i::before { left: -3px; top: 0; }
  @keyframes slDot { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(24px); } }
}
@media (max-width: 640px) {
  .sl-shell { padding: 0 16px; }
  .sl-hero { padding: 120px 0 48px; }
  .sl-lead { font-size: 17px; }
  .sl .sl-stage { margin-top: 40px; padding: 40px 12px 12px; border-radius: 20px; }
  .sl-stage__cap { right: 16px; top: 14px; }
  .sl-prof__body { grid-template-columns: minmax(0, 1fr); }
  .sl-sec { padding: 56px 0; }
  .sl-sec--tight { padding: 56px 0 48px; }
  .sl-logos { gap: 20px 24px; }
  .sl-logos img { height: 26px; }
  .sl-dock, .sl-mx, .sl-flows, .sl-fun, .sl-y { margin-top: 32px; }
  /* Dock on phones: heading and host logos share the first row; MCP and API stay side by side */
  .sl-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-dock__c, .sl-dock__c:not(.is-also) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; gap: 8px 12px; padding: 18px 20px; }
  .sl-dock__c:not(.is-also) { grid-column: 1 / -1; }
  .sl-dock__c h3, .sl-dock__c:not(.is-also) h3 { grid-column: 1; grid-row: 1; margin: 0 !important; }
  .sl-dock__c .sl-hosts, .sl-dock__c:not(.is-also) .sl-hosts { grid-column: 2; grid-row: 1; }
  .sl-dock__c > p:not([class]), .sl-dock__c:not(.is-also) > p:not([class]), .sl-dock__c .sl-dock__ft, .sl-dock__c:not(.is-also) .sl-dock__ft { grid-column: 1 / -1; grid-row: auto; margin-top: 0 !important; }
  .sl-dock .is-also { grid-template-columns: minmax(0, 1fr); }
  .sl-dock .is-also .sl-hosts { grid-column: 1; grid-row: auto; }
  /* Link lists on phones: two columns under the label; an odd last link takes the full row, centred */
  .sl-plinks, .sl-roles { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; justify-items: center; }
  .sl-plinks > span, .sl-roles > span { grid-column: 1 / -1; margin: 0; }
  .sl-plinks > span ~ a:last-child:nth-child(even), .sl-roles > span ~ a:last-child:nth-child(even) { grid-column: 1 / -1; }
  .sl-door .sl-plinks { justify-content: start; justify-items: start; }
  .sl-door .sl-plinks a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sl-door, .sl-lane, .sl-ctx2 { padding: 20px; }
  .sl-ctx2 dl { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sl-plinks, .sl-roles { gap: 0 16px; }
}
/* Touch targets (Oct 17, mobile fixes): stand-alone links and chip links are at least 44px tall on phones. */
@media (max-width: 767px) {
  .sl-link, a.sl-chip, main h3 > a, .sl-foot a, .sl-plinks a, .sl-roles a, .sl-tbar__ft a { display: inline-flex; align-items: center; min-height: 44px; }
  a.sl-chip { padding-top: 0; padding-bottom: 0; }
  .sl-flow h3 .sl-flow__p { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- AK Oct 20: hero = team chip, ONE benefit H1 (under 52px at 1280), one short line, the two CTAs ---------- */
.sl-for { display: inline-flex; align-self: flex-start; align-items: center; margin: 0 0 16px; padding: 4px 12px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 700 13px/1.4 Manrope, Arial, sans-serif; }
html body section.section_miia-hero.hxh.sl-hxh .miia-h1 { font-size: 48px; line-height: 54px; font-weight: 700; letter-spacing: -.02em; max-width: 14em; }
html body section.section_miia-hero.hxh.sl-hxh .hxh-line { margin-top: 20px; margin-bottom: 8px; font-size: 18px; line-height: 27px; max-width: 30rem; }
@media (max-width: 991px) {
  html body section.section_miia-hero.hxh.sl-hxh .miia-h1 { font-size: 40px; line-height: 46px; }
}
@media (max-width: 767px) {
  .sl-for { align-self: center; }
  html body section.section_miia-hero.hxh.sl-hxh .miia-h1 { font-size: 32px; line-height: 37px; }
  html body section.section_miia-hero.hxh.sl-hxh .hxh-line { font-size: 17px; line-height: 26px; }
}
@media (max-width: 359px) {
  html body section.section_miia-hero.hxh.sl-hxh .miia-h1 { font-size: 28px; line-height: 33px; }
}

/* ---------- AK Oct 20: ONE calm outcomes section per team (a role, a short title, one line, the product that does it) ---------- */
.sl-out { padding: 64px 0 72px; background: #fff; }
.sl-outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px !important; }
.sl-o { display: flex; flex-direction: column; gap: 8px; padding: 24px 20px 20px; border-radius: 24px; background: var(--mist); }
.sl-o__who { font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.sl-o h3 { font: 700 21px/1.2 var(--disp); letter-spacing: -.01em; color: var(--ink); }
.sl-o__line { font-size: 15px; line-height: 1.55; color: var(--slate); }
.sl-o__by { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto !important; padding-top: 12px; }
.sl-chip--via { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.sl-out__more { display: flex; justify-content: center; margin-top: 32px !important; }
@media (max-width: 1099px) { .sl-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .sl-out { padding: 48px 0 56px; }
  .sl-outs { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px !important; }
  .sl-o { padding: 20px 18px 18px; }
  .sl-o h3 { font-size: 20px; }
}

/* MOBILE-B (Oct 21): shorter /solutions on phones; the four outcome tiles sit two to a row (one per row only below 360px) */
@media (max-width: 767px) {
  .sl-sec { padding: 36px 0; }
  .sl-sec--tight { padding: 36px 0 32px; }
  .sl-out { padding: 32px 0 36px; }
  .sl-outs { margin-top: 20px !important; }
  .sl-out__more { margin-top: 20px !important; }
}
@media (max-width: 599px) {
  .sl-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px !important; }
  .sl-o { padding: 14px 12px 12px; gap: 6px; border-radius: 20px; }
  .sl-o h3 { font-size: 17px; }
  .sl-o__line { font-size: 14px; line-height: 1.45; }
  .sl-o__by { padding-top: 6px; }
  a.sl-chip { padding-left: 10px; padding-right: 10px; font-size: 12.5px; }
}
@media (max-width: 359px) {
  .sl-outs { grid-template-columns: minmax(0, 1fr); }
}
/* AK Oct 21: space between the CTA buttons and the trial note */
html body section.section_miia-hero.hxh.sl-hxh .hx-hnote { margin-top: 20px; }

/* Oct 27 final QA: product chips inside the outcome rows took the row's slate span colour (4.28:1 on lavender). Chips are ink on lavender. */
.sl-outs .sl-chip { color: var(--ink); }
/* Oct 27 final QA: on a 390px phone the "Account Research Agent" chip was wider than its outcome card on /solutions/product-ai (stuck out
   30px and made the page 2px wide). A chip may now wrap inside the card instead of overflowing it. */
.sl-o__by .sl-chip { max-width: 100%; white-space: normal; }

/* ---------- Oct 28 review fixes (R5; backup 04-build/backups/oct28-review-fixes). Amar's copy and design unchanged. ----------
   1. One hero frame for all 4 team pages (the hero opts out of the shell fitter with data-fold="off"): the same top padding, so the tab
      row sits at the same height on every tab; hero + logo strip fill one screen; the visual scales down on short laptop screens so the
      CTA row is above the fold at 1280x633.
   2. Closing block: the heading and the trust note get back the spacing close.css gives them (.sl h2 / .sl p { margin: 0 } beat it).
   3. Phones: the tab row's edge fades follow the scroll (start.js sets .is-start / .is-end), so the last pill is never faded out.
   4. 768 and below: the hero visual is centred; the Sales network stays inside the page gutter. */
@media (min-width: 992px) {
  html body section.section_miia-hero.hxh.sl-hxh { display: flex; flex-direction: column; min-height: calc(100svh - 104px); padding-top: 128px !important; padding-bottom: 40px !important; }
  .sl-hxh > .padding-global { flex: 1; display: flex; flex-direction: column; }
  .sl-hxh > .padding-global > .container-large { flex: 1; display: flex; flex-direction: column; width: 100%; }
  .sl-hxh .miia_hero-component { flex: 1; align-items: center; }
  .sl-hxh .miia-hero-right { zoom: .9; }
  .sl-hxh .miia-hero-right > * { margin-inline: auto; }
}
@media (min-width: 992px) and (max-height: 760px) {
  html body section.section_miia-hero.hxh.sl-hxh { padding-top: 108px !important; padding-bottom: 32px !important; }
  .sl-hxh .sl-tabs { margin-bottom: 20px; }
  .sl-hxh .miia-hero-right { zoom: .76; }
}
.sl .hxc-h2 { margin-bottom: 24px; }
.sl .hxc-note { margin-top: 20px; }
@media (max-width: 767px) { .sl .hxc-h2 { margin-bottom: 16px; } .sl .hxc-note { margin-top: 12px; } }
@media (max-width: 640px) {
  .sl-tabs ul.is-start { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .sl-tabs ul.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
  .sl-tabs ul.is-mid { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .sl-tabs ul.is-all { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 991px) {
  .sl-hxh .miia-hero-right > * { margin-inline: auto; }
  .sl-hxh .miia-hero-right { padding-inline: 4px; overflow: visible; }
}