/* ============================================================
   B2B Commerce page (src/pages/solutions/b2b-new.astro), loaded only on that
   page, after public/home/tokens.css, public/home/home.css,
   public/search/search.css (buttons, the dark glow ground, hero, logo strip,
   tab rails, platform cards, FAQ, resource tiles) and
   public/b2b-oms/b2b-oms.css (analyst rows, outline button, closing-band
   icon). Brand colors: src/styles/tokens.css (--kh-blue and --kh-sky from
   home.css). Sections in page order; each group names its component in
   src/components/sections/b2b-commerce/.
   Breakpoints: 1000 (problem band stacks), 880 (rails become accordions),
   760, 640.
   ============================================================ */

/* ==== Hero (B2bcHero.astro): the Search hero; each headline line kept whole ==== */
.kb2bc-hero .ks-hero__in { padding-top: 96px; padding-bottom: 104px; }
.kb2bc-hero h1 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.06; text-wrap: balance; }
.kb2bc-hero h1 span, .kb2bc-hero h1 em { white-space: nowrap; }
.kb2bc-hero .ks-hero__lede { line-height: 1.42; }

/* ==== Customer quote (B2bcProof.astro) ==== */
.kb2bc-proof__in { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 112px var(--ks-gutter) 96px; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
/* Video testimonial player that replaces the Watch button on click */
.kb2bc-proof__player { width: min(100%, 640px); aspect-ratio: 16 / 9; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: #000; display: block; }
.kb2bc-proof__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.kb2bc-proof__quote { margin: 0; max-width: 960px; font-family: var(--font-testimonial); font-size: clamp(24px, 2.7vw, 34px); line-height: 1.28; color: var(--kibo-white); text-wrap: balance; }
.kb2bc-proof__by { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.kb2bc-proof__logo { display: block; height: 40px; width: auto; filter: brightness(0) invert(1); }
.kb2bc-proof__about { margin: 0; max-width: 640px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.85); text-wrap: balance; }
.kb2bc-proof__about strong { font-weight: 600; color: var(--kibo-yellow); }

/* ==== Problem (B2bcProblem.astro): blue band, Today / With KIBO switch, diagram ==== */
.kb2bc-problem { position: relative; overflow: hidden; background: var(--kh-blue); color: var(--kibo-white); padding: 120px var(--ks-gutter); }
.kb2bc-problem__in { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.kb2bc-problem__h { max-width: none; text-align: center; text-wrap: balance; }
.kb2bc-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; padding: 6px; border-radius: 60px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); }
.kb2bc-switch__thumb { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 60px; background: var(--kibo-yellow); z-index: 0; transition: transform .52s var(--ks-ease); }
.kb2bc-switch.is-kibo .kb2bc-switch__thumb { transform: translateX(100%); }
.kb2bc-switch__btn { position: relative; z-index: 1; height: 44px; padding: 0 28px; border: 0; border-radius: 60px; background: transparent; cursor: pointer; font-family: var(--font-base); font-weight: 500; font-size: 16px; white-space: nowrap; color: var(--kibo-white); transition: color .42s var(--ks-ease); }
.kb2bc-switch__btn[aria-selected="true"] { color: var(--kibo-dark-grey); }
.kb2bc-switch__btn:focus-visible { outline: 2px solid var(--kibo-white); outline-offset: 3px; }
.kb2bc-problem__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, 1fr); gap: 40px 48px; align-items: center; }
.kb2bc-problem__left, .kb2bc-problem__right { margin: 0; font-size: 19px; line-height: 1.42; color: var(--kibo-white); text-wrap: pretty; }
.kb2bc-problem__left { text-align: right; }
.kb2bc-problem__right { max-width: 340px; }
.kb2bc-problem__right strong { font-weight: 600; }
.kb2bc-problem__art { min-width: 0; aspect-ratio: 600 / 420; }

/* ==== Tab rails (B2bcRail.astro): the Search rail with the design's sizes ==== */
.kb2bc-rail .ks-head { margin-bottom: 48px; }
.kb2bc-rail--caps .ks-head { margin-bottom: 40px; gap: 14px 24px; }
.kb2bc-rail .ks-h2 span { font-weight: 400; }
.kb2bc-rail__sub { max-width: 720px; line-height: 1.38; }
.kb2bc-rail .ks-rail { grid-template-columns: 332px minmax(0, 1fr); }
.kb2bc-rail .ks-rail__tab { line-height: 1.3; }
.kb2bc-rail--caps .ks-rail__tabs { padding-top: 0; }
.kb2bc-rail--caps .ks-rail__tab { padding: 16px 22px; line-height: 1.28; }
.kb2bc-rail__panel { padding: 52px 48px 48px; min-height: 380px; }
.kb2bc-rail--caps .kb2bc-rail__panel { padding-bottom: 44px; }
.kb2bc-rail--caps .ks-rail__content h3 { max-width: 28ch; }
.kb2bc-rail .ks-rail__body { font-size: 17px; line-height: 1.55; max-width: 62ch; }
.kb2bc-rail--caps .ks-rail__body { font-size: 16px; max-width: none; text-wrap: balance; }
.kb2bc-bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; color: var(--kibo-white); }
.kb2bc-bullets li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.3; text-wrap: pretty; }
.kb2bc-bullets li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 1.5px; background: var(--kibo-yellow); }
/* the rail icons: the yellow hexagon turns slowly */
.kb2bc-icon { display: block; color: var(--kibo-white); }
.kb2bc-icon .ks-hex { transform-box: fill-box; transform-origin: center; animation: ks-hex-spin 14s linear infinite; }
/* the capability diagrams (web components, created by the page script) */
.kb2bc-art { min-width: 0; margin: 0 -36px; }
.kb2bc-art--wide { aspect-ratio: 1263 / 459; }
.kb2bc-art--mid { aspect-ratio: 1242 / 459; }
.kb2bc-art--tall { aspect-ratio: 1242 / 507; }
.kb2bc-art > * { display: block; }
#capabilities { scroll-margin-top: 96px; }

/* ==== Analyst rows (B2bcAnalysts.astro): the B2B OMS proof band, a stronger glow, and a cross-fade ==== */
.kb2bc-analysts .kb2b-band__shade { background: var(--ks-glow), var(--ks-glow), linear-gradient(to right, rgba(46,52,62,.92) 0%, rgba(46,52,62,.72) 32%, rgba(46,52,62,0) 64%); }
.kb2bc-roll { outline: none; }
.kb2bc-roll:focus-visible { outline: 2px solid var(--kibo-yellow); outline-offset: 4px; border-radius: 2px; }
.kb2bc-roll__box { display: grid; overflow: hidden; }
.kb2bc-roll__a, .kb2bc-roll__b { grid-area: 1 / 1; display: block; align-self: center; will-change: opacity; transition: opacity .5s cubic-bezier(.4,0,.2,1); }
.kb2bc-roll__a { transition-delay: .12s; }
.kb2bc-roll__b { opacity: 0; transition-delay: 0s; }
.kb2bc-roll:hover .kb2bc-roll__a, .kb2bc-roll:focus .kb2bc-roll__a { opacity: 0; transition-delay: 0s; }
.kb2bc-roll:hover .kb2bc-roll__b, .kb2bc-roll:focus .kb2bc-roll__b { opacity: 1; transition-delay: .12s; }

/* ==== Platform (B2bcPlatform.astro): the Search cards; the first title is a link ==== */
.kb2bc-plat .ks-plat { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.kb2bc-plat .ks-plat__card h3 { line-height: 1.35; display: block; }
.kb2bc-plat .ks-plat__card h3 span span { white-space: nowrap; }
.kb2bc-plat__link { color: var(--kibo-white); text-decoration: none; transition: color .2s; }
.kb2bc-plat__link:hover { color: var(--kibo-yellow); }
.kb2bc-plat__link:focus-visible { outline: 2px solid var(--kibo-yellow); outline-offset: 3px; border-radius: 2px; }
.kb2bc-grow { display: inline-block; margin-left: 6px; vertical-align: -2px; overflow: visible; stroke: var(--kibo-yellow); }
.kb2bc-grow__tail { transform-box: fill-box; transform-origin: left center; transition: transform .38s var(--ks-ease); }
.kb2bc-grow__head { transition: transform .38s var(--ks-ease); }
.kb2bc-plat__link:hover .kb2bc-grow__tail { transform: scaleX(1.6); }
.kb2bc-plat__link:hover .kb2bc-grow__head { transform: translateX(8.4px); }

/* ==== FAQ (B2bcFaq.astro): the Search FAQ with a line under the heading ==== */
.kb2bc-faq__sub { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--kibo-dark-grey); }

/* ==== Resources (B2bcResources.astro): the Search tiles with a heading and three icons ==== */
.kb2bc-res__h { margin-bottom: 40px; }
.kb2bc-res__tile { padding-top: 48px; transition: box-shadow .25s var(--ks-ease); }
a.kb2bc-res__tile:hover { box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.kb2bc-res__icon { display: flex; align-items: flex-end; height: 57px; color: var(--kibo-dark-grey); }
.kb2bc-res__icon svg { display: block; overflow: visible; }
.kb2bc-res__fill { fill: var(--kibo-yellow); }

/* ==== Closing band (B2bcFinalCta.astro): the homepage band with the B2B OMS icon ==== */
.kb2bc-finalcta { padding: 96px var(--ks-gutter); }
.kb2bc-finalcta__icon { width: 184px; max-width: 100%; margin: 0 auto 26px; }
.ks-page .kb2bc-finalcta h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.12; max-width: 24ch; margin: 0 auto 26px; }
.ks-page .kb2bc-finalcta p { font-size: 18px; line-height: 1.45; max-width: 560px; margin: 0 auto 26px; }
.kb2bc-cube--y { fill: var(--kibo-yellow); stroke: var(--kibo-yellow); }
.kb2bc-cube--w { fill: var(--kibo-white); stroke: var(--kibo-white); }
.kb2bc-cube--s { fill: var(--kh-sky); stroke: var(--kh-sky); }

/* =================== Responsive =================== */

/* problem band: the two paragraphs above and below the diagram */
@media (max-width: 1000px) {
  .kb2bc-problem__grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; gap: 32px; }
  .kb2bc-problem__left, .kb2bc-problem__right { text-align: center; max-width: none; }
}

@media (max-width: 880px) {
  .kb2bc-rail .ks-head { margin-bottom: 36px; }
  .kb2bc-rail .ks-acc__panel .ks-rail__body { font-size: 16px; }
  .kb2bc-rail .ks-acc__panel .kb2bc-art { margin: 0 -12px; }
}

@media (max-width: 760px) {
  .kb2bc-problem { padding-top: 88px; padding-bottom: 88px; }
}

@media (max-width: 640px) {
  .kb2bc-hero h1 span { white-space: normal; }
  .kb2bc-proof__in { padding-top: 80px; padding-bottom: 72px; gap: 32px; }
  .kb2bc-problem { padding: 72px var(--ks-gutter); }
  .kb2bc-problem__in { gap: 36px; }
  .kb2bc-problem__left, .kb2bc-problem__right { font-size: 17px; }
  .kb2bc-switch__btn { padding: 0 22px; font-size: 15px; }
  .kb2bc-res__tile { padding-top: 40px; }
  .kb2bc-finalcta { padding: 72px var(--ks-gutter); }
  .ks-page .kb2bc-finalcta p { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .kb2bc-icon .ks-hex { animation: none !important; }
  .kb2bc-switch__thumb, .kb2bc-switch__btn, .kb2bc-roll__a, .kb2bc-roll__b, .kb2bc-grow__tail, .kb2bc-grow__head, .kb2bc-plat__link, .kb2bc-res__tile { transition: none !important; }
}