/* Humantic AI · /solutions as ONE page with four tabs (Krish review Oct 19, A7: K-219, K-217). Loads after solutions.css, which still
   styles every scene and section (unchanged). This file adds only the pill tab bar (the same bar as /start) and the one platform row
   that replaces the repeated product line. Brand tokens only. */

.sl-tabs { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 0 40px; text-align: left; }
.sl-tabs .sr-pick__lab { flex: none; font: 700 16px/1 var(--disp); color: var(--slate); }
.sl-tabs ul { margin: 0; padding: 4px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: var(--mist); border-radius: 999px; max-width: 100%; }
.sl-tabs ul::-webkit-scrollbar { display: none; }
.sl-tabs .sr-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 700 15px/1 Manrope, Arial, sans-serif; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, transform .16s var(--ease); }
@media (hover: hover) { .sl-tabs .sr-pill:not(.is-on):hover { background: #fff; } }
.sl-tabs .sr-pill:active { transform: scale(.96); }
.sl-tabs .sr-pill.is-on { background: var(--ink); color: #fff; box-shadow: var(--sh-sm); }
.sl-tabs .sr-pill:focus-visible { outline: 3px solid #341D99; outline-offset: 3px; }

/* Hero = the product hero template (hero-template.css) on the mist wash, with the tab bar above it */
.sl-hxh { background: #F6F4FF; }
html body section.section_miia-hero.hxh.sl-hxh { padding-top: 96px; }
.sl-hxh .padding-global { padding: 0 24px; }
.sl-hxh .container-large { max-width: 1120px; margin: 0 auto; }
.sl-hxh .sl-tabs { justify-content: flex-start; margin-bottom: 28px; }
.sl-hxh .sl-tabs ul { background: #fff; box-shadow: inset 0 0 0 1px rgba(52,29,153,.16); }
@media (hover: hover) { .sl-hxh .sl-tabs .sr-pill:not(.is-on):hover { background: #F6F4FF; } }
.sl-hxh .hxh-ctas .hx-btn { margin: 0; }

/* One platform row at the end of the tab's section (same row as /start); .sr-out--ink on the dark sections */
.sl .sr-out { display: grid; justify-items: center; gap: 12px; margin-top: 8px; }
.sl .sr-out--ink .sr-out__lab { color: var(--gold-300); }
.sl .sr-out--ink .sr-out__all a { color: rgba(255,255,255,.72); text-decoration-color: rgba(255,255,255,.3); }
.sl .sr-out--ink .sr-out__all a.is-mine { color: #fff; text-decoration-color: var(--gold); }
@media (hover: hover) { .sl .sr-out--ink .sr-out__all a:hover { color: #fff; } }
.sl .sr-out__all { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 14px; margin: 0; max-width: 960px; font-size: 14px; line-height: 1.6; color: var(--slate); }
.sl .sr-out__lab { margin-right: 2px; font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.sl .sr-out__all a { color: var(--slate); text-decoration: underline; text-decoration-color: rgba(91,100,120,.35); text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
.sl .sr-out__all a.is-mine { color: var(--ink); font-weight: 800; text-decoration-color: var(--gold); }
@media (hover: hover) { .sl .sr-out__all a:hover { color: var(--ink); text-decoration-color: var(--gold); } }

@media (max-width: 640px) {
  .sl-tabs { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 28px; }
  .sl-tabs ul { mask-image: linear-gradient(90deg, #000 85%, transparent); }
  html body section.section_miia-hero.hxh.sl-hxh { padding-top: 88px; }
  .sl-hxh .sl-tabs { align-items: stretch; }
  .sl .sr-out__lab { flex-basis: 100%; text-align: center; margin: 0 0 2px; }
  .sl .sr-out__all { gap: 0 4px; }
  .sl .sr-out__all a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; }
}

/* Critique fix: a white section that ends the tab no longer stacks its 80px bottom padding on the FAQ's own 96px (a 180px hole) */
#role-view > .sl-sec:last-child:not(.sl-sec--ink):not(.sl-sec--mist) { padding-bottom: 24px; }

/* AK Nov 5 (Amar, Teams pages): the hero copies the home hero (views/hp2-hero-rep.ejs): 1200px frame with 24px sides, words 560px,
   H1 clamp(40px, 5.2vw, 72px)/1.04 at 700, the line clamp(18px, 1.6vw, 22px)/1.45 at 600. The logo strip sits on the hero's own
   mist background, and together they fill the first screen. */
html body section.section_miia-hero.hxh.sl-hxh .container-large { max-width: 1152px; }
html body section.section_miia-hero.hxh.sl-hxh .miia-h1 { font: 700 clamp(40px, 5.2vw, 72px)/1.04 Cabinetgrotesk, "Cabinet Grotesk", Manrope, Arial, sans-serif; letter-spacing: -.02em; max-width: 560px; }
html body section.section_miia-hero.hxh.sl-hxh .hxh-line { max-width: 560px; margin-top: 20px; font: 600 clamp(18px, 1.6vw, 22px)/1.45 Manrope, Arial, sans-serif; color: #110A33; }
@media (min-width: 992px) { html body section.section_miia-hero.hxh.sl-hxh .miia_hero-component { grid-template-columns: minmax(0, 560px) minmax(0, 1fr) !important; column-gap: 56px !important; } }
html body.sl #proof { background: #F6F4FF; }

/* AK Nov 5 (Amar: "align the pages"): on desktop every Teams section fills one screen, content centred (same rule as the role and
   product pages). The hero and the logo strip are one frame; the small "How does Humantic AI compare" link strip is the exception. */
@media (min-width: 900px) and (min-height: 600px) {
  html body.sl main section:not(.sl-hxh):not(#proof):not(.hxp):not(.sl-cmp):not(section section) { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; box-sizing: border-box; }
  html body.sl main section:not(.sl-hxh):not(#proof):not(.hxp):not(.sl-cmp):not(section section) > * { width: 100%; box-sizing: border-box; }
}