/* /solutions/sales rebuild (AK Oct 28; views/v2/solutions.ejs when p.v2). Hero visual (.bio), role sections (.slv-role), and the
   surfaces and Sales Excellence Council blocks shared with /start (their rules copied from public/v2/start/start.css, under .sr).
   Brand tokens only: gold #FFC61E, ink #110A33, violet #341D99, lavender #DDD6FF, mist #F6F4FF, cream #FFF4D2, slate #5B6478, white. */

/* ---------- hero visual: Buyer Intelligence in the centre (Nov 2 rebuild; views/v2/solutions/bi-orbit.ejs) ----------
   Finished picture by default. .is-armed (JS, motion allowed) hides the moving parts; .is-go plays one pass: tile i lights at i x 560ms,
   its comet runs down the spoke, its ring part fills, then the core glows once. Transform/opacity/stroke-dashoffset only. */
.bio { --e: cubic-bezier(.23,1,.32,1); margin: 0 auto; width: 100%; max-width: 560px; }
.bio svg { display: block; width: 100%; height: auto; overflow: visible; }
.bio-sp { stroke: #DDD6FF; stroke-width: 2; stroke-linecap: round; fill: none; }
.bio-cm { stroke: #FFC61E; stroke-width: 4; stroke-linecap: round; fill: none; stroke-dasharray: 22 200; stroke-dashoffset: 22; opacity: 0; }
.bio-seg { fill: none; stroke: #DDD6FF; stroke-width: 6; stroke-linecap: round; }
.bio-seg--on { stroke: #FFC61E; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.bio-core { fill: #110A33; }
.bio-core__t { fill: #FFC61E; font: 800 15px/1 Manrope, Arial, sans-serif; letter-spacing: .08em; text-anchor: middle; }
.bio-glow { transform-box: fill-box; transform-origin: center; opacity: .8; }
.bio-n { transform-box: fill-box; transform-origin: center; }
.bio-n__c { fill: #fff; stroke: #FFC61E; stroke-width: 2; filter: drop-shadow(0 10px 18px rgba(17,10,51,.12)); }
.bio-n__t { fill: #110A33; font: 700 15px/1 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; text-anchor: middle; }
.bio-n__t tspan + tspan { fill: #5B6478; font: 600 12px/1 Manrope, Arial, sans-serif; }
@media (prefers-reduced-motion: no-preference) {
  .bio.is-armed .bio-n { opacity: 0; transform: scale(.9); }
  .bio.is-armed .bio-n__c { stroke: #DDD6FF; }
  .bio.is-armed .bio-seg--on { stroke-dashoffset: 1; }
  .bio.is-armed .bio-glow { opacity: 0; transform: scale(.85); }
  .bio.is-go .bio-n { animation: bio-in .32s var(--e) both; animation-delay: calc(var(--i) * 560ms); }
  .bio.is-go .bio-n__c { animation: bio-lit .9s ease both; animation-delay: calc(var(--i) * 560ms + 120ms); }
  .bio.is-go .bio-cm { animation: bio-run .44s cubic-bezier(.55,0,.3,1) both; animation-delay: calc(var(--i) * 560ms + 220ms); }
  .bio.is-go .bio-seg--on { animation: bio-fill .26s var(--e) both; animation-delay: calc(var(--i) * 560ms + 600ms); }
  .bio.is-go .bio-glow { animation: bio-glow .9s var(--e) 3.1s both; }
}
@keyframes bio-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes bio-lit { 0% { stroke: #DDD6FF; } 30% { stroke: #FFC61E; } 100% { stroke: #FFC61E; } }
@keyframes bio-run { 0% { stroke-dashoffset: 22; opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes bio-fill { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bio-glow { 0% { opacity: 0; transform: scale(.85); } 45% { opacity: 1; transform: scale(1.08); } 100% { opacity: .8; transform: none; } }

/* ---------- one section per role ---------- */
.slv-role { padding: 72px 0; background: #fff; }
.slv-role:nth-of-type(even) { background: #F6F4FF; }
.slv-role__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; max-width: 1168px; margin: 0 auto; padding: 0 24px; }
.slv-role--flip .slv-role__txt { order: 2; }
/* Nov 1 (Phase 1b): the role tag is a lavender chip with ink text (brand rule), not a violet small-caps eyebrow */
.slv-role__who { display: inline-flex; align-items: center; min-height: 28px; margin: 0 0 12px; padding: 0 12px; border-radius: 999px; background: #DDD6FF; font: 700 13px/1.3 Manrope, Arial, sans-serif; letter-spacing: 0; color: #110A33; }
body.hai .slv-role h2 { margin: 0 0 14px; font: 700 clamp(28px, 3.2vw, 42px)/1.1 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; letter-spacing: -.02em; color: #110A33; text-wrap: balance; }
.slv-role__lead { margin: 0 0 24px; font: 400 18px/1.55 Manrope, Arial, sans-serif; color: #5B6478; max-width: 34em; text-wrap: pretty; }
.slv-role__go { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: #110A33; color: #fff; font: 800 15px/1 Manrope, Arial, sans-serif; text-decoration: none; transition: background .15s; }
.slv-role__go:hover { background: #341D99; }
.slv-role__go:focus-visible { outline: 3px solid #FFC61E; outline-offset: 2px; }
/* the use-case visual is being made: until then, its use cases stand in, in a card the visual will replace */
.slv-asset { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 340px; padding: 28px; border-radius: 24px; background: #fff; border: 1.5px dashed #DDD6FF; }
.slv-role:nth-of-type(odd) .slv-asset { background: #F6F4FF; }
.slv-asset__k { margin: 0; font: 800 12px/1.3 Manrope, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5B6478; }
.slv-asset ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.slv-asset li { padding: 9px 16px; border-radius: 999px; background: #FFF4D2; border: 1px solid #FFC61E; font: 700 15px/1.2 Manrope, Arial, sans-serif; color: #110A33; }
@media (max-width: 899px) {
  .slv-role { padding: 48px 0; }
  .slv-role__in { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0 16px; }
  .slv-role--flip .slv-role__txt { order: 0; }
  .slv-asset { min-height: 0; padding: 20px; }
  .slv-asset li { font-size: 14px; padding: 7px 13px; }
}

/* ---------- shared with /start: tokens, section shell, surfaces, Council ---------- */
.sr { --ink:#110A33; --ink-2:#1E1650; --violet:#341D99; --gold:#FFC61E; --gold-3:#FFE8A5; --lav:#DDD6FF; --mist:#F6F4FF; --cream:#FFF4D2; --slate:#5B6478; --line:#E6E8EF;
  --ease: cubic-bezier(.16,1,.3,1); --disp: "Cabinet Grotesk", Arial, sans-serif;
  --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);
  font-family: Manrope, Arial, sans-serif; color: var(--ink); }
.sr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.sr a:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 999px; }
body.hai .sr-h2 { margin: 0 0 48px; text-align:center; font: 700 clamp(27px, 3.4vw, 44px)/1.12 var(--disp); letter-spacing:-.035em; color: inherit; text-wrap: balance; }
.sr-sec { padding: 64px 0; }
.sr-sec--mist { background: var(--mist); }
body.hai .sr .sr-sub2 { max-width: 640px; margin: -32px auto 32px; text-align: center; font: 400 17px/1.55 Manrope, Arial, sans-serif; color: var(--slate); text-wrap: balance; }
.sr-sf { background: #fff; }
.sr-sf__grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1180px; }
.sr-sf__g { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 22px; border: 1px solid var(--lav); border-radius: 22px; background: var(--mist); }
body.hai .sr-sf__g h3 { margin: 0; font: 700 20px/1.2 var(--disp); color: var(--ink); }
.sr-sf__g > p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--slate); }
.sr-sf__logos { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: auto; padding-top: 10px; }
.sr-sf__it { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; color: var(--ink); text-decoration: none; }
.sr-sf__it img { display: block; width: 44px; height: 44px; padding: 9px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--lav); object-fit: contain; transition: transform .2s, box-shadow .2s; }
.sr-sf__it small { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--slate); text-align: center; }
.sr-sf__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink) !important; }
/* the install message on hover or focus */
a.sr-sf__it::after { content: attr(data-tip); position: absolute; left: 50%; top: -30px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--gold); font: 800 12px/1.3 Manrope, Arial, sans-serif; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .18s, transform .18s; }
a.sr-sf__it:hover::after, a.sr-sf__it:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
a.sr-sf__it:hover img, a.sr-sf__it:focus-visible img { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--violet), 0 6px 14px rgba(17,10,51,.12); }
a.sr-sf__it:hover small { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a.sr-sf__it:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 12px; }
@media (max-width: 1023px) { .sr-dif__box, .sr-sf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-dif__box li:nth-child(3) { border-left: 0; } .sr-dif__box li:nth-child(n+3) { border-top: 1px solid var(--lav); } }
@media (max-width: 599px) { .sr-dif__box, .sr-sf__grid { grid-template-columns: minmax(0, 1fr); } .sr-dif__box li { border-left: 0; } .sr-dif__box li + li { border-top: 1px solid var(--lav); } body.hai .sr .sr-sub2 { margin-top: -28px; } }
.sr-sf__grid { grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); }
.sr-cnc__people { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px; max-width: 980px; }
.sr-cnc__people li { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; width: 132px; text-align: center; }
.sr-cnc__people img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold); margin-bottom: 6px; }
.sr-cnc__people b { font: 700 15px/1.2 var(--disp); color: var(--ink); }
.sr-cnc__people span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--violet); }
.sr-cnc__ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; }
.sr-cnc__ways span { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--lav); font-size: 14px; font-weight: 700; color: var(--ink); }
.sr-cnc__go { margin: 22px 0 0; text-align: center; }
@media (max-width: 1023px) { .sr-sf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-con__cols { grid-template-columns: minmax(0, 1fr); max-width: 560px; } .sr-con__c.is-us { transform: none; } }
@media (max-width: 599px) { .sr-sf__grid { grid-template-columns: minmax(0, 1fr); } .sr-cnc__people li { width: 110px; } }
@media (max-width: 767px) { .sr-sec { padding: 44px 0; } body.hai .sr-h2 { margin-bottom: 28px; } }
/* the stage-by-stage flow on this page: the page's own shell and heading, the sub line under it */
.sl .pjr { padding: 72px 0; }
.sl .pjr .sl-h2 { max-width: none; margin: 0 auto 12px !important; }
.sl .pjr__sub { max-width: 640px; margin: 0 auto 32px; text-align: center; font: 400 17px/1.55 Manrope, Arial, sans-serif; color: #5B6478; text-wrap: balance; }
@media (max-width: 767px) { .sl .pjr { padding: 44px 0; } }
@media (max-width: 599px) { .bio-n__t { font-size: 19px; } .bio-n__t tspan + tspan { font-size: 15px; } .bio-core__t { font-size: 17px; } }

/* ---------- GTM Engineering hero visual: the context graph (AK Oct 28; views/v2/solutions/ctx-graph.ejs) ---------- */
/* Nov 2 rebuild: finished graph by default; .is-armed hides the parts, .is-go draws three passes (0s internal, 1.1s external, 2.1s Humantic AI) */
.cgx { --e: cubic-bezier(.23,1,.32,1); margin: 0 auto; width: 100%; max-width: 540px; }
.cgx__card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 28px; background: #110A33; color: #fff; box-shadow: 0 24px 48px -24px rgba(17, 10, 51, .6); }
.cgx__k { margin: 0; font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #FFC61E; }
.cgx__g { display: block; width: 100%; height: auto; overflow: visible; }
.cgx__e { stroke: rgba(221, 214, 255, .3); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.cgx__e--1 { stroke: rgba(184, 188, 200, .35); }
.cgx__e--2 { stroke: #FFC61E; stroke-opacity: .75; stroke-width: 2; }
.cgx__n { transform-box: fill-box; transform-origin: center; }
.cgx__n--0 circle { fill: #DDD6FF; } .cgx__n--1 circle { fill: #5B6478; stroke: rgba(221,214,255,.45); stroke-width: 1; } .cgx__n--2 circle { fill: #FFC61E; }
.cgx__t { fill: #FFE8A5; font: 700 11px/1 Manrope, Arial, sans-serif; text-anchor: middle; }
.cgx__core circle { fill: #fff; stroke: #FFC61E; stroke-width: 4; }
.cgx__core { transform-box: fill-box; transform-origin: center; }
.cgx__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cgx__l { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(221, 214, 255, .06); box-shadow: inset 0 0 0 1px rgba(221, 214, 255, .14); }
.cgx__l--2 { background: rgba(255, 198, 30, .12); box-shadow: inset 0 0 0 1px rgba(255, 198, 30, .7); }
.cgx__l i { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.cgx__l--0 i { background: #DDD6FF; } .cgx__l--1 i { background: #5B6478; box-shadow: inset 0 0 0 1px rgba(221, 214, 255, .5); } .cgx__l--2 i { background: #FFC61E; }
.cgx__l span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font: 500 13px/1.3 Manrope, Arial, sans-serif; color: #DDD6FF; }
.cgx__l b { font: 700 16px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .cgx.is-armed .cgx__e { stroke-dashoffset: 1; }
  .cgx.is-armed .cgx__n { opacity: 0; transform: scale(.4); }
  .cgx.is-armed .cgx__l { opacity: .45; }
  .cgx.is-armed .cgx__l--2 { background: rgba(221, 214, 255, .06); box-shadow: inset 0 0 0 1px rgba(221, 214, 255, .14); }
  .cgx.is-go .cgx__e { animation: cgx-draw .34s var(--e) both; }
  .cgx.is-go .cgx__n { animation: cgx-pop .3s var(--e) both; }
  .cgx.is-go .cgx__e--0 { animation-delay: calc(var(--d) * 50ms); } .cgx.is-go .cgx__n--0 { animation-delay: calc(var(--d) * 50ms + 220ms); }
  .cgx.is-go .cgx__e--1 { animation-delay: calc(var(--d) * 60ms + 1100ms); } .cgx.is-go .cgx__n--1 { animation-delay: calc(var(--d) * 60ms + 1320ms); }
  .cgx.is-go .cgx__e--2 { animation-delay: calc(var(--d) * 90ms + 2100ms); } .cgx.is-go .cgx__n--2 { animation: cgx-pop2 .42s var(--e) both; animation-delay: calc(var(--d) * 90ms + 2300ms); }
  .cgx.is-go .cgx__l--0 { animation: cgx-lit .3s ease 120ms both; }
  .cgx.is-go .cgx__l--1 { animation: cgx-lit .3s ease 1200ms both; }
  .cgx.is-go .cgx__l--2 { animation: cgx-lit2 .4s ease 2200ms both; }
  .cgx.is-go .cgx__core { animation: cgx-core .5s var(--e) 3.0s both; }
}
@keyframes cgx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cgx-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes cgx-pop2 { 0% { opacity: 0; transform: scale(.4); } 65% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes cgx-lit { from { opacity: .45; } to { opacity: 1; } }
@keyframes cgx-lit2 { from { opacity: .45; background: rgba(221, 214, 255, .06); box-shadow: inset 0 0 0 1px rgba(221, 214, 255, .14); } to { opacity: 1; background: rgba(255, 198, 30, .12); box-shadow: inset 0 0 0 1px rgba(255, 198, 30, .7); } }
@keyframes cgx-core { 0% { transform: none; } 45% { transform: scale(1.14); } 100% { transform: none; } }
@media (max-width: 599px) { .cgx__card { padding: 18px; border-radius: 22px; } .cgx__l b { font-size: 15px; } .cgx__t { font-size: 13px; } }

/* ---------- GTM Engineering: the nowhere-else points, the two enrichment sections, the build callout ---------- */
.slv-dif { padding: 72px 0; background: #fff; }
.slv-dif__in { max-width: 1168px; margin: 0 auto; padding: 0 24px; }
.slv-dif .sl-h2 { max-width: none; margin: 0 auto 12px !important; }
.slv-sub { max-width: 640px; margin: 0 auto 36px; text-align: center; font: 400 17px/1.55 Manrope, Arial, sans-serif; color: #5B6478; text-wrap: balance; }
.slv-dif__box { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #DDD6FF; border-radius: 24px; background: #F6F4FF; overflow: hidden; }
.slv-dif__box li { padding: 28px 24px; border-left: 1px solid #DDD6FF; }
.slv-dif__box li:first-child { border-left: 0; }
.slv-dif__n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: #FFC61E; font: 800 14px/1 Manrope, Arial, sans-serif; color: #110A33; }
body.hai .slv-dif__box h3 { margin: 0 0 8px; font: 700 20px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #110A33; }
.slv-dif__box p { margin: 0; font: 400 15px/1.5 Manrope, Arial, sans-serif; color: #5B6478; }
@media (max-width: 1023px) { .slv-dif__box { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slv-dif__box li:nth-child(3) { border-left: 0; } .slv-dif__box li:nth-child(n+3) { border-top: 1px solid #DDD6FF; } }
@media (max-width: 599px) { .slv-dif { padding: 44px 0; } .slv-dif__in { padding: 0 16px; } .slv-dif__box { grid-template-columns: minmax(0, 1fr); } .slv-dif__box li { border-left: 0; padding: 20px; } .slv-dif__box li + li { border-top: 1px solid #DDD6FF; } }
/* an enrichment block: words on one side, the self-running visual on the other */
.slv-role__in--wide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
/* Nov 1 (Phase 1b): lavender chips with ink text (brand rule), was cream with a gold border */
.slv-pts { list-style: none; margin: 16px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.slv-pts li { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: #DDD6FF; font: 700 13px/1.3 Manrope, Arial, sans-serif; color: #110A33; }
.slv-vis .tv { margin: 0; }
@media (max-width: 899px) { .slv-role__in--wide { grid-template-columns: minmax(0, 1fr); } }
/* build with MCP and API */
.slv-build { padding: 56px 0; background: #fff; }
.slv-build__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; max-width: 1120px; margin: 0 auto; padding: 32px 36px; border-radius: 28px; background: #110A33; color: #fff; }
body.hai .slv-build h2 { margin: 0 0 8px; font: 700 clamp(26px, 2.8vw, 36px)/1.12 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #fff; text-wrap: balance; }
.slv-build p { margin: 0; font: 400 17px/1.5 Manrope, Arial, sans-serif; color: #DDD6FF; }
.slv-build__links { display: flex; flex-wrap: wrap; gap: 12px; }
.slv-build__links a { display: inline-flex; flex-direction: column; gap: 4px; min-width: 210px; padding: 14px 18px; border-radius: 18px; background: rgba(221, 214, 255, .08); border: 1px solid rgba(221, 214, 255, .2); color: #fff; text-decoration: none; transition: border-color .15s, background .15s; }
.slv-build__links a b { font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #FFC61E; }
.slv-build__links a span { display: inline-flex; align-items: center; gap: 6px; font: 800 15px/1.2 Manrope, Arial, sans-serif; }
.slv-build__links a:hover { border-color: #FFC61E; background: rgba(255, 198, 30, .1); }
.slv-build__links a:focus-visible { outline: 3px solid #FFC61E; outline-offset: 2px; }
@media (max-width: 899px) { .slv-build { padding: 40px 16px; } .slv-build__in { grid-template-columns: minmax(0, 1fr); padding: 24px; } .slv-build__links a { flex: 1 1 100%; } }
/* enrichment blocks: the words on top in two columns, the visual full width under them (the data rows need the room) */
.slv-role__in--wide { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.slv-role__in--wide .slv-role__txt { order: 0 !important; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 56px; align-items: start; }
.slv-role__in--wide .slv-role__who, .slv-role__in--wide h2 { grid-column: 1; }
.slv-role__in--wide .slv-role__lead, .slv-role__in--wide .slv-pts, .slv-role__in--wide .slv-role__go { grid-column: 2; }
.slv-role__in--wide .slv-role__lead { grid-row: 1 / 3; margin-top: 4px; }
.slv-role__in--wide .slv-role__go { justify-self: start; }
.slv-vis { width: 100%; max-width: 1000px; margin: 0 auto; }
.slv-sub { margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 899px) {
  .slv-role__in--wide .slv-role__txt { display: block; }
}
/* marketing hero: a placeholder card until its visual is made */
.slv-hph { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; width: 100%; max-width: 540px; min-height: 380px; margin: 0 auto; border-radius: 28px; border: 1.5px dashed #DDD6FF; background: repeating-linear-gradient(135deg, #F6F4FF 0 14px, #fff 14px 28px); }
.slv-hph img { width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px #fff, 0 8px 20px -8px rgba(17, 10, 51, .25); }
@media (max-width: 599px) { .slv-hph { min-height: 240px; } }

/* ---------- Product and AI hero: a grey record turns vivid (AK Oct 28; views/v2/solutions/pai-hero.ejs) ---------- */
.pai { --e: cubic-bezier(.23,1,.32,1); margin: 0 auto; width: 100%; max-width: 540px; }
.pai__win { border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #E6E1FF, 0 24px 48px -24px rgba(17, 10, 51, .3); overflow: hidden; }
.pai__bar { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border-bottom: 1px solid #EEEBFA; font: 700 14px/1.2 Manrope, Arial, sans-serif; color: #110A33; }
.pai__dots { display: inline-flex; gap: 5px; } .pai__dots i { width: 9px; height: 9px; border-radius: 50%; background: #DDD6FF; }
.pai__api { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 10px 5px 6px; border-radius: 999px; background: #110A33; color: #FFC61E; font: 800 11px/1.2 Manrope, Arial, sans-serif; }
.pai__body { display: grid; gap: 0; padding: 4px 20px 8px; }
.pai__rec { padding: 16px 0 14px; }
.pai__rec + .pai__rec { border-top: 1px solid #EEEBFA; }
.pai__who { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.pai__who > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pai__who b { font: 700 17px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; color: #110A33; }
.pai__who small { font: 600 12px/1.3 Manrope, Arial, sans-serif; color: #5B6478; }
.pai__av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #DDD6FF; color: #110A33; font: 800 13px/1 Manrope, Arial, sans-serif; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #FFC61E; }
.pai__av--co { border-radius: 12px; }
.pai__disc { display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; background: #FFC61E; color: #110A33; font: 800 13px/1 Manrope, Arial, sans-serif; font-style: normal; }
.pai__f { list-style: none; margin: 0; padding: 0; display: grid; }
.pai__f li { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; font: 600 12px/1.3 Manrope, Arial, sans-serif; color: #5B6478; }
.pai__f li + li { border-top: 1px dashed #EEEBFA; }
.pai__f b { position: relative; display: block; min-height: 20px; }
.pai__sk, .pai__v { position: absolute; inset: 0; display: flex; align-items: center; font-style: normal; }
.pai__sk { top: 6px; bottom: 6px; width: 70%; border-radius: 6px; background: #EEEBFA; opacity: 0; }
.pai__v { color: #110A33; font: 700 14px/1.2 Manrope, Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .pai.is-armed .pai__sk { opacity: 1; }
  .pai.is-armed .pai__v { opacity: 0; clip-path: inset(0 100% 0 0); }
  .pai.is-armed .pai__api { opacity: .4; }
  .pai.is-armed .pai__av { background: #EEEBFA; color: #5B6478; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #EEEBFA; }
  .pai.is-armed .pai__disc { opacity: 0; transform: scale(.8); }
  .pai.is-go .pai__api { animation: pai-on .3s ease .2s both; }
  .pai.is-go .pai__av { animation: pai-av .4s var(--e) .55s both; }
  .pai.is-go .pai__disc { animation: pai-pop .3s var(--e) 1.1s both; }
  .pai.is-go .pai__sk { animation: pai-off .2s ease both; animation-delay: calc(var(--i) * 170ms + 650ms); }
  .pai.is-go .pai__v { animation: pai-write .42s var(--e) both; animation-delay: calc(var(--i) * 170ms + 680ms); }
}
@keyframes pai-on { from { opacity: .4; } to { opacity: 1; } }
@keyframes pai-av { from { background: #EEEBFA; color: #5B6478; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #EEEBFA; } to { background: #DDD6FF; color: #110A33; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #FFC61E; } }
@keyframes pai-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes pai-off { from { opacity: 1; } to { opacity: 0; } }
@keyframes pai-write { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (max-width: 599px) { .pai__body { padding: 4px 14px 6px; } .pai__f li { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; } .pai__v { font-size: 13px; white-space: normal; } .pai__api { font-size: 10px; } .pai__bar b { display: none; } }

/* ---------- Product and AI section scenes (views/v2/solutions/pai-scene.ejs) ---------- */
.pas { display: grid; gap: 12px; width: 100%; max-width: 640px; margin: 0 auto; font: 600 13px/1.4 Manrope, Arial, sans-serif; color: #110A33; }
:where(.pas) p, :where(.pas) ul { margin: 0; padding: 0; list-style: none; }
.pas__card { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #DDD6FF; box-shadow: 0 12px 32px -16px rgba(17, 10, 51, .25); }
.pas__code { display: grid; gap: 8px; background: #110A33; border-color: #110A33; color: #DDD6FF; font: 600 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pas__req { color: #fff; word-break: break-word; }
.pas__req em { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: #341D99; color: #FFC61E; font-style: normal; font-weight: 800; }
.pas__req span { display: block; color: #DDD6FF; opacity: .75; }
.pas__res { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; border-bottom: 1px dashed rgba(221, 214, 255, .2); }
.pas__res b { color: #FFC61E; }
.pas__res span { padding: 1px 8px; border-radius: 999px; background: rgba(255, 198, 30, .14); color: #FFF4D2; }
.pas__req--hook em { background: #FFC61E; color: #110A33; }
.pas__bill { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px 20px; border-radius: 14px; background: #FFF4D2; font: 700 13px/1.3 Manrope, Arial, sans-serif; }
.pas__bill i { position: absolute; left: 14px; right: 14px; bottom: 9px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, #FFC61E var(--w), rgba(17, 10, 51, .1) var(--w)); }
.pas__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.pas__p { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.pas__av { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #DDD6FF; font: 800 13px/1 Manrope, Arial, sans-serif; }
.pas__av--g { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #FFC61E; }
.pas__p b { font: 700 16px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; }
.pas__p small { grid-column: 2; color: #5B6478; font-size: 12px; }
.pas__disc { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; min-width: 30px; height: 26px; border-radius: 8px; background: #110A33; color: #FFC61E; font-style: normal; font-weight: 800; }
.pas__t { grid-column: 1 / -1; margin-top: 10px; padding: 6px 10px; border-radius: 10px; background: #F6F4FF; font-weight: 700; }
.pas__x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #FFC61E; font: 800 18px/1 Manrope, Arial, sans-serif; }
.pas__k { margin-bottom: 8px !important; font: 800 11px/1.3 Manrope, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #341D99; }
.pas__how ul { display: grid; gap: 6px; }
.pas__how li { padding: 8px 12px; border-radius: 10px; background: #FFF4D2; font-weight: 700; }
.pas__msg { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #110A33; color: #fff; font: 600 14px/1.4 Manrope, Arial, sans-serif; }
.pas__msg img { flex: none; border-radius: 50%; background: #fff; }
.pas__grid { display: grid; gap: 10px; }
.pas__grid li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; }
.pas__grid img { grid-row: 1 / 4; border-radius: 50%; }
.pas__grid b { font: 700 17px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; }
.pas__grid code { font: 700 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #341D99; word-break: break-all; }
.pas__grid span { color: #5B6478; }
@media (max-width: 599px) { .pas__pair { grid-template-columns: minmax(0, 1fr); } .pas__x { justify-self: center; } }
/* Product and AI blocks: words beside the scene (not stacked like GTM) */
.slv-role__in--pai { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 899px) { .slv-role__in--pai { grid-template-columns: minmax(0, 1fr); } }
.pas__bill { align-items: baseline; padding-bottom: 24px; }
.pas__bill i { bottom: 10px; }

/* ---------- Nov 2 (AK shots 9 + 10): role blocks get their own rhythm, clearly apart from the stage-by-stage band ----------
   The global p/h2 resets zeroed the role tag and lead margins (the CTA sat flush under the paragraph). Each role is now an inset mist
   panel on a white page (the stage band above stays a full-bleed mist band), with a 4px-scale stack: tag 16, heading 16, lead 24, list 28. */
body.hai .slv-role { padding: 16px 0; background: #fff; }
body.hai :not(.slv-role) + .slv-role { padding-top: 80px; }
body.hai .slv-role + .slv-role { box-shadow: none; }
body.hai .slv-role:nth-of-type(even) { background: #fff; }
body.hai .slv-role__in { max-width: 1216px; padding: 56px; border-radius: 32px; background: #F6F4FF; box-shadow: inset 0 0 0 1px #ECE8FF; gap: 56px; }
body.hai .slv-role + :not(.slv-role) { margin-top: 0; }
body.hai .slv-role .slv-role__who { margin: 0 0 16px; }
body.hai .slv-role h2 { margin: 0 0 16px; }
body.hai .slv-role .slv-role__lead { margin: 0 0 24px; }
body.hai .slv-role .slv-pts { margin: 0 0 28px; }
body.hai .slv-role .slv-role__lead:last-of-type + .slv-role__go { margin-top: 4px; }
/* the last role block before the next band keeps a full section gap under it */
body.hai .slv-role:has(+ :not(.slv-role)) { padding-bottom: 80px; }
.slv-role__go:active { transform: scale(.96); }
.slv-role__go { transition: background .15s, transform .16s cubic-bezier(.23,1,.32,1); }
/* the stage-by-stage band: its own full-bleed band with a hairline edge, so it never reads as part of the role blocks */
.sl .pjr { box-shadow: inset 0 -1px 0 #E6E1FF, inset 0 1px 0 #E6E1FF; }
@media (max-width: 1279px) { body.hai .slv-role__in { margin: 0 24px; padding: 48px 40px; gap: 40px; } }
@media (max-width: 899px) {
  body.hai .slv-role { padding: 12px 0; }
  body.hai :not(.slv-role) + .slv-role { padding-top: 48px; }
  body.hai .slv-role:has(+ :not(.slv-role)) { padding-bottom: 48px; }
  body.hai .slv-role__in { margin: 0 12px; padding: 32px 20px 20px; border-radius: 24px; gap: 28px; }
}
@media (max-width: 374px) { body.hai .slv-role__in { margin: 0 8px; padding: 28px 14px 14px; } }
body.hai .slv-role .slv-ucl { margin: 0 0 28px; }
@media (max-width: 599px) {
  body.hai .slv-role .slv-ucl { margin-bottom: 24px; }
  body.hai .slv-role .slv-role__go { display: flex; justify-content: center; width: 100%; min-height: 48px; padding: 12px 20px; font-size: 14px; line-height: 1.3; text-align: center; text-wrap: balance; }
}

/* Nov 2 (AK shot 11): the Council block's ways and button were flush under the names (the global p reset zeroed their margins).
   Names, then the ways as one calm row 40px below, then the button 32px below that: three clear tiers. */
body.hai .sr .sr-cnc__people { row-gap: 24px; }
body.hai .sr .sr-cnc__ways { gap: 8px 10px; margin: 40px auto 0; max-width: 720px; }
body.hai .sr .sr-cnc__ways span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; border: 0; box-shadow: inset 0 0 0 1px #DDD6FF; font: 700 14px/1.2 Manrope, Arial, sans-serif; color: #110A33; }
body.hai .sr .sr-cnc__go { margin: 32px 0 0; }
@media (max-width: 599px) { body.hai .sr .sr-cnc__ways { margin-top: 32px; } body.hai .sr .sr-cnc__ways span { min-height: 32px; padding: 0 12px; font-size: 13px; } body.hai .sr .sr-cnc__go { margin-top: 24px; } }
/* Nov 2: enrichment blocks (GTM): heading column and a words column that stacks lead, chips and button with no hole between them */
.slv-role__side { display: contents; }
.slv-role__in--wide .slv-role__side { display: block; grid-column: 2; grid-row: 1 / 3; }
body.hai .slv-role__in--wide .slv-role__lead { margin-top: 0; }
.slv-role__in--wide .slv-role__who { justify-self: start; }
.slv-role__in--wide .slv-role__txt { row-gap: 0; }
/* the agent trace only needs the room its finished frame uses (it held 452px and left a dark empty band under the calls) */
@media (min-width: 768px) { .slv-vis .tv--ai { height: auto; min-height: 332px; } }
.slv-role__in--wide .slv-role__txt { grid-template-rows: auto 1fr; }
.slv-role__in--wide .slv-role__txt > h2 { align-self: start; grid-row: 2; }
@media (prefers-reduced-motion: no-preference) {
  .bio.is-armed .bio-sp { opacity: 0; }
  .bio.is-go .bio-sp { animation: bio-sp .3s ease both; animation-delay: calc(var(--i, 0) * 560ms + 80ms); }
}
@keyframes bio-sp { from { opacity: 0; } to { opacity: 1; } }
/* values may wrap on phones: skeleton and value share one grid cell instead of absolute layers */
.pai__f b { display: grid; align-items: center; min-height: 20px; }
.pai__sk, .pai__v { position: static; grid-area: 1 / 1; }
.pai__sk { height: 8px; align-self: center; }
.pai__f li { padding: 8px 0; }
/* Nov 2: the hero ring's labels stay readable on the smallest phones (the SVG scales down to ~290px) */
@media (max-width: 419px) { .bio-n__t { font-size: 21px; } .bio-n__t tspan + tspan { font-size: 15px; } .bio-core__t { font-size: 18px; } }

/* Nov 2 final review (backup: 04-build/backups/nov02-final/review2):
   1) Council strip: 5 people sat 2+2+1 on phones and 4+1 at 768 (lone Scott Gillum). Same grid as the /start pages: one row of 5
      from 600px, 3+2 on phones.
   2) "Right Where You Work": 4 SEP/CRM logos wrapped 3+1 (lone Salesforce) in the 4-column row; 2+2 there instead. */
body.sl .sr-cnc__people { gap: 18px 16px; }
body.sl .sr-cnc__people li { width: 120px; }
@media (max-width: 599px) { body.sl .sr-cnc__people { gap: 16px 8px; } body.sl .sr-cnc__people li { width: calc((100% - 16px) / 3); } body.sl .sr-cnc__people b { font-size: 14px; } }
/* (the 2+2 SEP/CRM logo grid that sat here is replaced by the one-row logo dock at the end of this file, Nov 2 late) */
/* 320px: the 4 engagement chips wrapped 2+1+1; stack them as one centred list under 360px. */
@media (max-width: 359px) { body.sl .sr-cnc__ways { flex-direction: column; align-items: center; } }

/* Nov 2 leftovers: the 3 (or 4) feature tags under each Product and AI block never leave a lone tag on phones.
   Phones: an even 2-column grid; an odd last tag spans the row so the rows are all full. Under 360px: one column. */
@media (max-width: 599px) {
  .slv-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .slv-pts li { justify-content: center; text-align: center; min-height: 32px; padding: 4px 12px; }
  .slv-pts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 359px) {
  .slv-pts { grid-template-columns: minmax(0, 1fr); }
}

/* Nov 2 late (AK, qa/nov02-final/ak-nov02-late/1-solutions-surfaces-cards-alignment.png): the "Right Where You Work" / "How Marketing
   Uses It" cards. Logo rows never lined up (Web app's one logo floated left, SEPs and CRMs sat 2x2 while the rest were one row), the
   app.humantic.ai label was a different (mono) style, and the cards had uneven empty space. Now every card is the same shape:
   centred title and line, then ONE logo dock pinned to the card's bottom edge, the same height in every card, one row, logos centred
   on the same 64px pitch, every label in the same style. 2 columns below 1200px (4 logos need the width), 1 column on phones.
   Same block in public/v2/start/start.css for the /start role pages. Backup: 04-build/backups/nov02-final/solutions-ak/. */
.sr .sr-sf__g { gap: 8px; padding: 24px 20px 0; text-align: center; }
.sr .sr-sf__g > p { margin: 0 0 20px; text-wrap: pretty; }
.sr .sr-sf__logos { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 10px; margin: auto -20px 0; padding: 16px 8px 18px; border-top: 1px solid var(--lav); border-radius: 0 0 21px 21px; background: #fff; }
.sr .sr-sf__it { flex: 0 0 auto; min-width: 52px; gap: 6px; }
.sr .sr-sf__it img { width: 44px; height: 44px; }
.sr .sr-sf__it small, .sr .sr-sf__it .sr-sf__code { font: 600 12px/1.2 Manrope, Arial, sans-serif; color: var(--slate) !important; white-space: nowrap; }
@media (max-width: 1199px) { .sr .sr-sf__grid[style*="--c:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sr .sr-sf__grid[style*="--c:4"], .sr .sr-sf__grid[style*="--c:3"] { grid-template-columns: minmax(0, 1fr); } .sr .sr-sf__g { padding: 20px 20px 0; } .sr .sr-sf__g > p { margin-bottom: 16px; } .sr .sr-sf__logos { margin-inline: -20px; } }

/* AK Nov 5: stack grid (views/v2/solutions/stack-grid.ejs), the Sales team hero visual from Amar's image, turned vertical */
.sgd { --c-lav: #DDD6FF; display: grid; gap: 8px; width: 100%; max-width: 540px; margin: 0 auto; font-family: Manrope, Arial, sans-serif; color: #110A33; }
.sgd__head, .sgd__row { display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.sgd__head p { margin: 0; padding: 0 4px 2px; text-align: center; }
.sgd__head b { display: block; font: 800 12px/1.2 Manrope, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #110A33; }
.sgd__head small { display: block; font-size: 12px; font-weight: 500; color: #5B6478; }
.sgd__side { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 800 12px/1 Manrope, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #5B6478; }
.sgd__side::after { content: ""; flex: 1; height: 1px; background: var(--c-lav); }
.sgd__side.is-their { color: #341D99; }
.sgd__k { display: flex; align-items: center; margin: 0; font: 700 20px/1.1 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; }
.sgd__c { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 84px; padding: 10px 8px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--c-lav); text-align: center; }
.sgd__c.is-us { background: #FFF4D2; box-shadow: inset 0 0 0 1.5px #FFC61E; }
.sgd__c small { font-size: 12.5px; line-height: 1.3; font-weight: 500; color: #5B6478; }
.sgd__c.is-us small { color: #110A33; font-weight: 600; }
.sgd__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(17,10,51,.1), inset 0 0 0 1px rgba(17,10,51,.06); font-size: 14px; font-weight: 700; white-space: nowrap; }
.sgd__chip img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }
@media (max-width: 599px) { .sgd__head, .sgd__row { grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; } .sgd__k { font-size: 16px; } .sgd__c { min-height: 72px; padding: 8px 4px; } .sgd__chip { padding: 4px 8px 4px 6px; font-size: 12.5px; gap: 6px; } .sgd__c small { font-size: 11.5px; } }

/* AK Nov 5: GTM Engineering "One Layer For Every GTM Workflow": one frame, the site's toggle on top, each panel the enrichment layout */
body.hai .slv-tabs { padding: 64px 0; background: #fff; }
.slv-tabs__head { max-width: 1152px; margin: 0 auto 28px; padding: 0 24px; box-sizing: content-box; text-align: center; }
body.hai .slv-tabs .slv-tabs__head h2 { margin: 0; font: 500 clamp(40px, 3.9vw, 50px)/1.2 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; letter-spacing: 0; color: #110A33; }
.slv-tabs__head .slv-sub { margin: 12px auto 24px; }
.slv-tabs__head .uct__pick { margin-bottom: 0; background: #F6F4FF; }
.slv-tabs__p[hidden] { display: none; }
body.hai .slv-tabs .slv-tabs__h { margin: 0 0 14px; font: 700 clamp(28px, 3.2vw, 42px)/1.1 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; letter-spacing: -.02em; color: #110A33; text-wrap: balance; }
.slv-role__in--wide .slv-tabs__h { grid-column: 1; }
@media (max-width: 767px) { body.hai .slv-tabs .slv-tabs__head h2 { font-size: 26px; font-weight: 700; } }

/* AK Nov 5 (Amar: "the height is small, see the current Humantic website"): the adoption section at the live humantic.ai size: a 50px
   heading and a tall orbit (the live picture is about 740px tall; this one fills the card to the screen) */
@media (min-width: 961px) {
  body.sl .hp2-adopt .ad-card { max-width: 1152px; }
  body.sl .hp2-adopt .ad-orbit { height: min(660px, calc(100svh - 150px)); }
  body.sl .hp2-adopt .ad-stage { left: 96px; transform: translateY(-50%) scale(1.12); }
  body.sl .hp2-adopt .ad-body h2 { font-size: clamp(40px, 3.9vw, 50px); font-weight: 500; line-height: 1.15; }
  body.sl .hp2-adopt .ad-body .ad-sub { font-size: 19px; }
}
/* AK Nov 5: "Build It, Roll It Out, Or Both": the words on top (one-line heading), the three options in a row under them */
body.sl .slv-build__in { grid-template-columns: minmax(0, 1fr); max-width: 1152px; box-sizing: border-box; padding: 48px; text-align: center; }
body.hai.sl .slv-build h2 { font-size: clamp(32px, 3.4vw, 44px); }
body.sl .slv-build__in > div > p { max-width: 46rem; margin: 0 auto; }
body.sl .slv-build__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; }
body.sl .slv-build__links a { min-width: 0; padding: 20px 22px; }
body.sl .slv-build__links a b { font: 800 13px/1.2 Manrope, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
body.sl .slv-build__links a span { font-size: 17px; }
@media (max-width: 767px) { body.sl .slv-build__in { padding: 28px 20px; } body.sl .slv-build__links { grid-template-columns: minmax(0, 1fr); } }
/* AK Nov 5: each workflow tab is words left, visual right, so the frame fits one screen; on desktop the four panels share one grid
   cell (the hidden ones keep their space but do not show), so switching tabs never changes the section's height */
@media (min-width: 900px) {
  body.hai .slv-tabs .slv-role__in--wide { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; align-items: center; max-width: 1152px; margin: 0 auto; padding: 0 24px; box-sizing: content-box; }
  body.hai .slv-tabs .slv-role__in--wide .slv-role__txt { display: block; }
  body.hai .slv-tabs .slv-tabs__h { font-size: clamp(28px, 2.6vw, 36px); }
  body.sl main section.slv-tabs > .slv-tabs__head { grid-row: 1; grid-column: 1; }
  body.sl main section.slv-tabs > .slv-tabs__p { grid-row: 2; grid-column: 1; }
  body.sl main section.slv-tabs > .slv-tabs__p[hidden] { display: block; visibility: hidden; pointer-events: none; }
}
@media (min-width: 961px) { body.sl .hp2-adopt .ad-stage { transform: translateY(-50%) scale(1.04); } }

/* Nov 5 hero fix (Sales hero grid, Amar 7bd86c7): below ~380px the 78px label column plus two chip columns were wider than the phone, so
   "Salesforce" and "Humantic AI" were cut at the right edge, "Intelligence" ran off and the page scrolled sideways at 320px. Narrow
   phones get a slimmer label column and slimmer chips; every word stays whole. */
@media (max-width: 379px) {
  .sgd__head, .sgd__row { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
  .sgd__head p { padding: 0 0 2px; }
  .sgd__head b { font-size: 11px; letter-spacing: .02em; }
  .sgd__head small { font-size: 11px; line-height: 1.25; }
  .sgd__k { font-size: 13px; letter-spacing: -.01em; }
  .sgd__c { padding: 8px 2px; border-radius: 14px; }
  .sgd__chip { flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 12px; font-size: 12px; line-height: 1.2; }
  .sgd__chip img { width: 18px; height: 18px; }
  .sgd__c small { font-size: 11px; }
}

/* AK Nov 5 r3: the GTM workflow panels show a screenshot tour on the right (views/v2/solutions.ejs .slv-tvis) */
.slv-tvis { width: 100%; min-width: 0; }
.slv-tvis .hxt { margin: 0; }
/* r3 (mobile): the four workflow tabs sit 2 x 2 on phones, so no tab wraps alone onto its own row */
@media (max-width: 599px) { .slv-tabs__head .uct__pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; box-sizing: border-box; } .slv-tabs__head .uct__b { padding: 0 8px; } }
/* Nov 5 late (Krish 59:04; AK: no arrow): a quiet footnote under the logo grid, lined up with the grid's left edge (views/v2/solutions.ejs) */
.sr .sr-sf__note { max-width: 1180px; margin: 16px auto 0; font: 500 13px/1.45 Manrope, "Manrope Fallback", Arial, sans-serif; color: #5B6478; text-align: left; }

/* AK Nov 6 (Amar: "one extra line above the logos"): the hero and the logo strip are one lavender frame, so no hairline between them */
html body.sl #proof.hx-seam { box-shadow: none; }
/* AK Nov 6: the build options size to how many there are; each can carry a short description */
body.sl .slv-build__links { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
body.sl .slv-build__links a small { display: block; margin: 2px 0 6px; font: 400 15px/1.5 Manrope, Arial, sans-serif; color: #DDD6FF; }
@media (max-width: 767px) { body.sl .slv-build__links { grid-template-columns: minmax(0, 1fr); } }
/* Product and AI tabs: words left, scene right, like the GTM tabs */
@media (min-width: 900px) {
  body.hai .slv-tabs .slv-role__in--pai { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 48px; align-items: center; max-width: 1152px; margin: 0 auto; padding: 0 24px; box-sizing: content-box; }
}
/* AK Nov 6: on shorter laptop screens (720 to 820px tall) the tab frames tighten so they stay one screen */
@media (min-width: 900px) and (max-height: 820px) {
  body.hai.sl main section.slv-tabs { padding-top: 28px; padding-bottom: 28px; }
  body.hai .slv-tabs .slv-tabs__head { margin-bottom: 14px; }
  body.hai .slv-tabs .slv-tabs__head .slv-sub { margin: 6px auto 12px; }
  body.hai .slv-tabs .slv-tabs__h { font-size: 28px; margin-bottom: 10px; }
  body.hai .slv-tabs .slv-role__lead { font-size: 15px; line-height: 1.5; }
  body.hai .slv-tabs .slv-pts { margin-top: 10px; margin-bottom: 10px; }
}

/* Nov 7 (AK): Nowhere Else section in the product-page colours: cream panel, lavender cards. Colours only.
   Same values as the "...You Can't Get Anywhere Else" block in product-pages/pm-clean.css (Nov 6). Backup: 04-build/backups/nov07-dif-colours/ */
.slv-dif__in { box-sizing: border-box; width: min(1168px, calc(100% - 32px)); max-width: 1168px; margin: 0 auto; padding: 48px 40px 56px; border: 1px solid #FFE8A5; border-radius: 24px; background: #FFF4D2; }
@media (max-width: 899px) { .slv-dif__in { padding: 32px 20px 36px; } }
@media (max-width: 479px) { .slv-dif__in { padding: 28px 12px 28px; } }
.slv-dif__box { border: 1px solid #DDD6FF; background: #DDD6FF; }
.slv-dif__box li { background: #DDD6FF; border-left: 2px solid #FFF4D2; }
.slv-dif__box li:first-child { border-left: 0; }
.slv-dif__box li p { color: rgba(17,10,51,.82); }
@media (max-width: 1023px) { .slv-dif__box li:nth-child(3) { border-left: 0; } .slv-dif__box li:nth-child(n+3) { border-top: 2px solid #FFF4D2; } }
@media (max-width: 599px) { .slv-dif__box li { border-left: 0; } .slv-dif__box li + li { border-top: 2px solid #FFF4D2; } }

/* AK Nov 7: the sub-line under "What You Get With Humantic AI, And Nowhere Else" sat tight on the cards (gap 0 on GTM Engineering and Marketing); same 32px gap as the product pages' panel. The small quote (hx-pq) closes the cream panel. */
body.hai .slv-dif .slv-sub { margin: 0 auto 32px; }