/* ==========================================================================
   01. Base & global overrides
   Used on: All SAP pages (main + inner)
   ========================================================================== */
p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--para_Text_Dark);
}
.sticky {
  position: sticky;
  top: 100px;
}
.banner .banner__inner:after {
  display: none;
}
/* ==========================================================================
   02. Button row layout & SAP badge (button styles: common § 03)
   Used on: SAP main page (shared button helpers)
   ========================================================================== */
.btn_Row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.sap_Badge {
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 9px 20px 9px 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  translate: none;
  rotate: none;
  scale: none;
  opacity: 1;
  transform: translate(0px, 0px);
}
.sap_Badge img {
  max-width: 70px;
  height: auto;
}
.dot_Devider {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(56, 189, 248);
  box-shadow: rgb(56, 189, 248) 0px 0px 10px;
}
/* ==========================================================================
   03. Banner / hero
   Used on: All SAP pages (main + inner)
   ========================================================================== */
   .sap.inner-page .content_Row div + div{
        padding-right: 0;
   }
.banner {
  background-size: cover;
  background-repeat: no-repeat;
}
.banner_Img img {
  border-radius: 43px;
  transform: rotateY(-24deg);
}
.banner_Img {
  border-radius: 45px;
  padding: 0;
  perspective: 400px;
  background: transparent;
}
.banner .banner__inner--title {
  font-size: clamp(2rem, 3.6vw, 5rem);
  font-weight: 300;
  letter-spacing: 0;
  margin-bottom: 1rem;
}
.banner .banner__inner--title span {
  font-weight: 600;
}

.hero_Btns {
  display: inline-block;
  width: 100%;
  margin-top: 2rem;
}
.content_Row {
  padding-top: 5rem;
  padding-bottom: 2rem;
}
.sap_Main_Banner {
  background: url(https://staging.yash.com/revamp/wp-content/uploads/2026/08/sap_Hero.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 3rem 0;
  text-align: center;
  border-radius: 0 0 60px 60px;
  position: relative;
  overflow: hidden;
}
.sap_Main_Banner:after {
  background: #000000ad;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
}
.banner_Contant {
  font-size: 4rem;
  position: relative;
  z-index: 2;
}
.hero_Title {
  font-size: clamp(2rem, 3.2vw, 4rem);
  color: #fff;
  letter-spacing: -1px;
  font-weight: 700;
}
.hero_Sub_Title {
  font-size: clamp(1rem, 1.3vw, 2rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 0;
}
.gradient_Text {
  text-transform: uppercase;
  background: linear-gradient(95deg, #7c58fd, #6a35e8) text;
  -webkit-text-fill-color: transparent;
}
.services_offering_Adhoc {
  background: #000;
}
/* ==========================================================================
   04. Header contact button — now the DS primary button (common § 03)
   Used on: All SAP pages (main + inner)
   ========================================================================== */

/* ==========================================================================
   05. Sticky tab slider (.bsf-slider) — services list
   Used on: SAP main, EHS, Business AI, Cloud ERP, Data & Analytics, LeanIX, RISE, Signavio, WalkMe
   ========================================================================== */

#bsf-slider {
  height: auto !important;
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.bsf-slider__pin {
  position: static !important; /* was position: sticky; top: 0 */
  height: auto !important;
  top: 20px;
  overflow: hidden;
}

.bsf-slider__inner {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 3rem 0 4rem;
}

/* === LEFT: numbered tab list === */
.bsf-tablist {
  list-style: none;
  padding: 0;
  position: relative;
  padding-right: 4rem;
}
.bsf-tablist li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bsf-tablist .bsf-tab span.right_arrow {
  position: absolute;
  right: 20px;
}
.bsf-tablist .bsf-tab span.right_arrow svg {
  transform: rotate(45deg);
}
.bsf-tab {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0.5rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  width: 100%;
  position: relative;
  border: 1px solid #b4b4b4;
  padding-left: 0;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 95% 56%;
  opacity: 1;
  transition: all 1s;
  margin-bottom: 1rem;
  border-radius: 15px;
  background: #fff;
}
.bsf-tab:hover,
.bsf-is-active {
  /* background: #5a00fa url(../images/icon/right_Arrow_radius_white.svg); */
  background: #5a00fa;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 95% 56%;
  opacity: 1;
  transition: all 1s;
  color: #fff;
  padding-left: 15px;
}
.bsf-tab__num {
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  transition: all 0.4s ease;
  z-index: 1;
  position: absolute !important;
  left: -43px;
  display: none;
}
.bsf-tab__label {
  transition: transform 0.4s ease;
}
.bsf-tab__label h3 {
  font-size: 1.25rem;
  font-weight: 600;
  padding-right: 3rem;
  padding-left: 1rem;
  margin-bottom: 0;
}
.bsf-tab.bsf-is-active .bsf-tab__num {
  color: #fff;
}
.bsf-tab.bsf-is-active .bsf-tab__label {
  transform: translateX(4px);
}

/* === RIGHT: stacked panels (only one visible at a time) === */
.bsf-panels {
  position: relative;
  height: 100%;
  min-height: 560px;
  padding: 1rem;
}
.bsf-panel {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  pointer-events: none;
}
.bsf-panel.bsf-is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* === progress bar at top of pinned area === */
.bsf-slider__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bsf-clr-border);
  z-index: 10;
}
.bsf-slider__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--bsf-clr-accent), var(--bsf-clr-accent-2));
  width: 0%;
  transition: width 0.3s ease;
}

/* === Mobile — stack on small screens, disable scroll-lock === */
@media (max-width: 860px) {
  .bsf-scroll-slider {
    height: auto !important;
  }
  .bsf-slider__pin {
    position: relative;
    height: auto;
    padding: 2rem 0;
  }
  .bsf-slider__inner {
    padding: 1.5rem 1rem;
  }
  .bsf-panels {
    display: grid;
    gap: 1rem;
    height: auto;
  }
  .bsf-panel {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .bsf-tablist {
    display: none;
  }
  .bsf-panels {
    padding: 0;
  }
}
/* ==========================================================================
   06. Service offerings panel
   Used on: SAP main, EHS, Business AI, Cloud ERP, Data & Analytics, LeanIX, RISE, Signavio
   ========================================================================== */
.offering_Right_panel .offering_panel {
  border-radius: 12px;
  margin: 0rem 1rem;
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover !important;
  background-position: top !important;
  padding-right: 0;
  padding-top: 15px;
  display: flex;
  align-items: end;
  padding-bottom: 0;
  padding-left: 0;
}
.offering_Right_panel .offering_panel:nth-child(1) {
  background-image: url(../images/bizNext/bizNext_services.jpg);

  margin: 0rem 1rem;
}
.service_Offerings_Para {
  margin-bottom: 2rem;
}
.service_Offerings_Para p {
  font-size: 1.1rem;
  color: var(--para_Text_Dark);
}

.offering_dicscriptions_box {
  padding: 1rem;
  background: rgb(0 0 0 / 80%);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgb(0 0 0 / 30%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 25%);
  width: 100%;
}
.offering_dicscriptions_box .sub_offrings_List ul {
  list-style: none;
  padding-left: 0;
}
.offering_dicscriptions_box .sub_offrings_List ul li a {
  background: #ffffffcc;
  color: #000000;
  border-radius: 6px;
  font-size: 1rem;
  padding: 10px 35px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
  margin-bottom: 15px;
  transition: all 1s;
}
.offering_dicscriptions_box .sub_offrings_List ul li a:hover {
  background: #fff;
}
.offering_dicscriptions_box .sub_offrings_List ul li a img {
  width: 15px;
  height: auto;
  transform: rotate(-45deg);
  margin-left: 20px;
}
.offering_dicscriptions_box .offerings_Content_Box ul {
  padding-left: 15px;
}
.offering_dicscriptions_box .offerings_Content_Box ul li {
  margin-bottom: 12px;
}
.offering_dicscriptions_box p {
  color: var(--light-gray-text);
}

/* ==========================================================================
   07. YASH perspectives / blog cards
   Used on: All pages except Data & Analytics and WalkMe
   ========================================================================== */

.yashPerspectives .commonTag {
  display: flex;
  width: 100%;
  color: #5a00fa;
  padding-left: 0;
}
.blogListing__Box--info {
  min-height: 100px;
}
.yashPerspectives h3 {
  min-height: auto;
}
.blogListing__Box--info {
  border: none;
  border-bottom: 1px solid #707070;
  border-radius: 0;
  padding: 2rem 4rem 2rem 0;
}
.yashPerspectives .blogListing .blogListing__Box .blogListing__Box--info h3 a {
  font-weight: 600;
}
.yashPerspectives .blogListing__Box:hover {
  background: url(../images/abstract/blog_background.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  transition: all 0.6s;
  padding-left: 2rem;
}
.blogListing__Box--info {
  background: url(../images/icon/right_Arrow_radius.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 95% 56%;
  opacity: 1;
  transition: all 1s;
}
.yashPerspectives .blogListing__Box:hover .blogListing__Box--info {
  background: url(../images/icon/right_Arrow_radius_white.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 95% 56%;
  opacity: 1;
  transition: all 1s;
}
.blogListing__Box--info:hover {
  opacity: 1;
}

.yashPerspectives .blogListing .blogListing__Box:hover .blogListing__Box--info h3 a {
  color: #fff;
}
.yashPerspectives {
  padding: 3rem 0 4rem;
}
@media (min-width: 1600px) {
  .container {
    max-width: 1440px;
  }
}
.yt_insights .yt_Section_title_main {
  text-align: center;
  color: #fff;
  font-size: 2.6rem;
  font-weight: 600;
  margin-bottom: 3rem;
  margin-top: 6rem;
}
.yt_Insight_img {
  min-height: 31rem;
}
.header_banners_content a.btn {
  margin: 20px 0;
  color: #fff;
  border: 1px solid #fff;
}
.header_banners_content a.btn i {
  margin-left: 1rem;
}
.header_banners_content a.btn:hover {
  border: none;
}

/* ==========================================================================
   08. Cards & differentiators
   Used on: Business AI, WalkMe (+ shared .card)
   ========================================================================== */

.card {
  background: var(--dark-Navy);
  padding: 1rem;
  color: #fff;
}
.card p {
  color: var(--light-gray-text);
}
.card ul {
  padding-left: 15px;
}
.card ul li {
  margin-bottom: 15px;
}
.differentiatorSec {
  position: relative;
}
.differentiatorSec:before {
  content: "";
  position: absolute;
  background: #000;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0.8;
}
.differentiatorSec .common_Title {
  color: #fff;
}

@media (max-width: 576px) {
  .banner .banner__inner--title {
    font-size: 2.3rem !important;
    font-weight: 600;
    letter-spacing: 0;
    padding-top: 2rem;
  }

  .offering_dicscriptions_box {
    background: #000000cc;
    border-radius: 12px;
  }
  .bsf-panel {
    grid-template-rows: auto;
  }
  .offering_dicscriptions_box .offerings_Content_Box h3 {
    color: #fff;
  }
  .breadcrumbSec {
    padding-left: 20px;
  }
}

/* ==========================================================================
   09. Page tokens (:root)
   Used on: All SAP pages (main + inner)
   ========================================================================== */

:root {
  --accent: #5a00fa;
  --accent-soft: #955cf9;
  --accent-deep: #5d40d0;
  --muted: #a89bcf;
  --line: rgba(147, 79, 252, 0.38);
  --dot: clamp(48px, 10vmin, 82px); /* headline navy */
  --ink-soft: #55608a; /* body copy */
  --plate: #ffffff;
  --rule: #e4e7f4;
  --violet: #6c3ce9; /* primary brand accent (CTA violet) */
  --blue: #23a9e8; /* secondary accent */
  --draw: #2c3e86; /* diagram structure lines */
  --draw-ghost: #aeb8dc; /* the unseen / duplicated / obsolete */
  --signal: #6c3ce9;
  --shadow-lift: 0 14px 38px rgba(63, 38, 150, 0.14);
  --wash: linear-gradient(180deg, #ffffff 0%, #f5f4fe 100%);
  --glow-a: rgba(108, 60, 233, 0.11);
  --glow-b: rgba(35, 169, 232, 0.11);
}

/* ---------- Detail panel ---------- */

@media (prefers-reduced-motion: reduce) {
  .eyebrow {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }
}
@media (max-width: 600px) {
  .yashPerspectives {
    padding: 2rem 0 4rem;
  }
  .bsf-slider__inner {
    padding: 1.5rem 1rem 0;
  }
  .why-sect-ibp-box-inner p {
    text-align: left !important;
  }
  .card {
    margin-bottom: 1rem;
  }
}

@media (min-width: 767.98px) and (max-width: 870px) {
  .bsf-panel {
    display: none;
  }
  .bsf-panel.bsf-is-active {
    display: flex;
  }
  .bsf-tablist {
    display: block;
  }

  .banner .banner__inner--title {
    font-size: 2.4rem !important;
    letter-spacing: 1px;
  }

  .yt_Insight_txt {
    min-height: 250px;
  }
  .banner {
    min-height: 50vh;
    background: #000000b5;
  }
}

@media (min-width: 1400px) {
  .bsf-panels {
    min-height: 500px;
  }
}

@media (min-width: 1160px) and (max-width: 1399px) {
  .bsf-panels {
    min-height: 450px;
  }
}
/* ==========================================================================
   10. Offering sub-list (ACF content inside .sub_offrings_List)
   Used on: Service offerings section
   ========================================================================== */
.offering_dicscriptions_box .sub_offrings_List ul li {
  margin-left: 15px;
}
.offering_dicscriptions_box .sub_offrings_List ul li.parent_Nav {
  position: relative;
  left: -15px;
}
.offering_dicscriptions_box .sub_offrings_List ul li.parent_Nav a {
  background-color: #000;
  color: #fff;
}
.offering_dicscriptions_box .sub_offrings_List ul li.parent_Nav a img {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   11. Insights slider (Swiper)
   Used on: All pages except Data & Analytics
   ========================================================================== */
.insights_Sec {
  padding: 40px 0 100px;
}
.insights_Sec .sec_Head {
  margin-bottom: 44px;
}
.insights_Nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.insights_Swiper {
  overflow: visible;
}
.insights_Swiper .swiper-slide {
  height: auto;
  display: flex;
}
/* ==========================================================================
   12. Accelerators — sticky stacking cards
   Used on: SAP main, EHS
   ========================================================================== */
.accelarator_Sec {
  padding: 40px 0 30px;
}
.accelarator_Sec .sec_Head {
  margin-bottom: 56px;
}

.accelarator_Card {
  position: sticky;
  margin-bottom: 26px;
  background: var(--dark);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  padding: 48px 52px;
  overflow: hidden;
  will-change: transform;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: border-color 0.35s ease;
}
.accelarator_Card:hover {
  border-color: rgba(178, 158, 255, 0.45);
}
.accelarator_Card:nth-child(1) {
  top: 110px;
  background: url(../images/abstract/accelarator_1.png);
}
.accelarator_Card:nth-child(2) {
  top: 126px;
  background: url(../images/abstract/accelarator_2.png);
}
.accelarator_Card:nth-child(3) {
  top: 142px;
  background: url(../images/abstract/accelarator_3.png);
}
.accelarator_Card:nth-child(4) {
  top: 158px;
  background: url(../images/abstract/accelarator_4.png);
}
.accel_Tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, rgba(6, 4, 16, 0.55), rgba(6, 4, 16, 0.18));
}
.accel_Shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--darker);
  opacity: 0;
  pointer-events: none;
}
.accel_Card_Row {
  position: relative;
  z-index: 2;
  align-items: center;
}
.accel_Num_Row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.accel_Num {
  font-size: clamp(40px, 3.6vw, 56px);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: -1px;
}
.accel_Rule {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(178, 158, 255, 0.4), transparent);
}
.accel_Title {
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: #fff;
}
.accel_Desc {
  font-size: clamp(12px, 1.4vw, 18px);
  line-height: 1.75;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.66);
  max-width: 560px;
}
.accel_Tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.accel_Tags span {
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease;
}
.accelarator_Card:hover .accel_Tags span {
  border-color: rgba(178, 158, 255, 0.55);
  background: rgba(124, 88, 253, 0.14);
  color: #fff;
}
.accel_Media {
  height: 280px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.accel_Media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.accelarator_Card:hover .accel_Media img {
  transform: scale(1.06);
}
.accel_Media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(124, 88, 253, 0.22), transparent 60%);
}
@media (max-width: 576px) {
  .accelarator_Card .accel_Media {
    display: none;
  }
}
/* ==========================================================================
   13. Lenis smooth scroll (required CSS)
   Used on: All SAP pages (main + inner)
   ========================================================================== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ==========================================================================
   14. Scroll progress bar, navbar, CTA, footer & reveal helpers
   Used on: All SAP pages (main + inner)
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: #6b25ff;
  z-index: 999;
  transition: width 0.1s linear;
}

/* ---------- NAVBAR ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  transition:
    background 0.4s ease,
    padding 0.4s ease;
}

/* ---------- SERVICES SECTION ---------- */
section.section {
  padding: 8rem 0;
  position: relative;
}
.bsf-scroll-slider .common_Title {
  text-align: left;
}

/* ---------- CTA ---------- */
.cta {
  text-align: center;
  background: var(--clr-surface);
  padding: 7rem 1.5rem;
  border-radius: var(--radius);
  margin: 0 1.5rem 4rem;
  position: relative;
  overflow: hidden;
}

.cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.cta p {
  color: var(--clr-muted);
  max-width: 540px;
  margin: 0 auto 2.5rem;
}

/* ---------- FOOTER ---------- */
footer {
  border-top: 1px solid var(--clr-line);
  padding: 3rem 0;
  color: var(--clr-muted);
  font-size: 0.9rem;
}

/* ---------- REVEAL ANIMATION HELPERS ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
}

.eyebrow {
  display: none;
}
.swiper-slide {
  background: #000;
  border-radius: 12px;
}
.yashPerspectives .commonTag::before {
  display: none;
}
.page_Navigation {
  position: sticky;
  top: 0;
  z-index: 999;
}
.page_Navigation .tabSec .nav-tabs .nav-link.active {
  border-bottom: 1px solid #5a00fa;
}

/* ---------- Journey section: responsive shell ---------- */
/* ==========================================================================
   15. Journey — SAP ECC to S/4HANA route
   Used on: SAP main
   ========================================================================== */
.journey-section {
  padding: 40px 64px 60px;
}
.journey-inner {
  max-width: 1240px;
}

.journey-head {
  margin-bottom: 6px;
  gap: 16px;
}
.journey-eyebrow {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(0, 0, 0, 0.72);
}
.journey-route {
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

/* Which of the two graphics is live. Desktop is the default. */
.journey-mobile {
  display: none;
}
.journey-desktop {
  display: block;
}

/* Tablet: the horizontal track still fits, just relax the gutters. */
@media (max-width: 1100px) {
  .journey-section {
    padding: 24px 32px 8px;
  }
}

/* Phone: swap to the vertical track and stack the header. */
@media (max-width: 900px) {
  .journey-section {
    padding: 24px 20px 8px;
  }
  .journey-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
    margin-bottom: 18px;
  }
  .journey-eyebrow {
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 1.45;
  }
  .journey-route {
    font-size: 14px;
    white-space: normal;
  }
  .journey-desktop {
    display: none;
  }
  .journey-mobile {
    display: block;
  }
}

/* Very narrow phones: give the labels a little more room. */
@media (max-width: 360px) {
  .journey-section {
    padding: 20px 14px 8px;
  }
}

/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  [data-journey-dot],
  [data-journey-dot-glow] {
    display: none;
  }
}

/* ---------- Marquee ---------- */
/* ==========================================================================
   16. Marquee (Swiper)
   Used on: SAP main, EHS, LeanIX
   ========================================================================== */
.marquee-swiper {
  overflow: hidden;
  padding: 26px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* These two rules are what make it read as a marquee rather than a carousel:
     linear timing kills Swiper's ease, auto width lets each label size itself. */
.marquee-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
  align-items: center;
}
.marquee-swiper .swiper-slide {
  width: auto;
}

.marquee-slide {
  gap: 56px;
  padding-right: 56px;
}

.marquee-link {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 3px;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s;
}
.marquee-link:hover,
.marquee-link:focus-visible {
  color: #000000;
}

.marquee-star {
  color: #54d2ff;
  font-size: 11px;
}

/* Soft fade at both edges so labels dissolve instead of clipping. */
.marquee-swiper::before,
.marquee-swiper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.marquee-swiper::before {
  left: 0;
  background: linear-gradient(90deg, #ffffff, rgba(250, 247, 246, 0));
}
.marquee-swiper::after {
  right: 0;
  background: linear-gradient(270deg, #ffffff, rgba(250, 247, 246, 0));
}

/* Tablet */
@media (max-width: 900px) {
  .marquee-swiper {
    padding: 20px 0;
  }
  .marquee-slide {
    gap: 36px;
    padding-right: 36px;
  }
  .marquee-link {
    font-size: 15px;
    letter-spacing: 2.4px;
  }
  .marquee-swiper::before,
  .marquee-swiper::after {
    width: 48px;
  }
}

/* Phone */
@media (max-width: 560px) {
  .marquee-swiper {
    padding: 16px 0;
  }
  .marquee-slide {
    gap: 24px;
    padding-right: 24px;
  }
  .marquee-link {
    font-size: 13px;
    letter-spacing: 1.8px;
  }
  .marquee-star {
    font-size: 9px;
  }
  .marquee-swiper::before,
  .marquee-swiper::after {
    width: 32px;
  }
}

/* Touch devices have no hover, so keep the resting colour readable. */
@media (hover: none) {
  .marquee-link {
    color: rgba(0, 0, 0, 0.62);
  }
}

/* Reduced motion: stop the scroll, let the row wrap and sit still. */
@media (prefers-reduced-motion: reduce) {
  .marquee-swiper .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    transform: none !important;
  }
  .marquee-swiper::before,
  .marquee-swiper::after {
    display: none;
  }
}

/* ---------- Shell ---------- */
/* ==========================================================================
   17. Lifecycle timeline (.lc-*)
   Used on: SAP main
   ========================================================================== */
.lc-section {
  padding: 30px 64px 80px;
  color: #000000;
}
.lc-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lc-dots {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 40px;
  top: 60px;
  background-image: radial-gradient(rgba(124, 88, 253, 0.2) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle, black, transparent 70%);
  mask-image: radial-gradient(circle, black, transparent 70%);
}
.lc-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  right: -190px;
  bottom: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 77, 255, 0.12), transparent 62%);
  filter: blur(50px);
}

.lc-grid {
  max-width: 1240px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
}

/* ---------- Left column (sticky) ---------- */
.lc-sticky {
  position: sticky;
  top: 130px;
}
.lc-eyebrow {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--sapAccent);
  margin-bottom: 16px;
}
.lc-title {
  font-size: clamp(42px, 4.5vw, 62px);
  font-weight: 300;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -1.6px;
}
.lc-title em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(95deg, #7c58fd, #6a35e8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lc-lede {
  font-size: 18px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.62);
  margin: 22px 0 0;
  max-width: 420px;
}

.lc-cta {
  margin-top: 30px;
}

/* ---------- Right column (timeline) ---------- */
.lc-track {
  padding-left: 44px;
}
.lc-rail {
  position: absolute;
  left: 13px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(0, 0, 0, 0.16);
}
.lc-rail-fill {
  position: absolute;
  left: 13px;
  top: 8px;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, var(--sapAccent, #7c58fd), #8f6fff);
}

.lc-step {
  padding-bottom: 36px;
}
.lc-badge {
  position: absolute;
  left: -44px;
  top: 4px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(178, 158, 255, 0.5);
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 500;
  color: #bcaaff;
}
.lc-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  padding: 28px 30px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  transition: all 0.25s;
}
.lc-card:hover {
  border-color: rgba(124, 88, 253, 0.5);
  background: #f7f3ff;
  transform: translateX(6px);
}
.lc-card-title {
  font-size: 23px;
  font-weight: 500;
  margin: 0 0 9px;
  letter-spacing: -0.2px;
  color: #000000;
}
.lc-card-desc {
  font-size: 16.5px;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.62);
  margin: 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .lc-section {
    padding: 28px 32px 64px;
  }
  .lc-grid {
    gap: 48px;
  }
  .lc-lede {
    max-width: none;
  }
}

/* ---------- Phone: collapse to one column, drop the sticky rail ---------- */
@media (max-width: 900px) {
  .lc-section {
    padding: 24px 20px 56px;
  }
  .lc-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .lc-sticky {
    position: static;
    top: auto;
  }
  .lc-title {
    letter-spacing: -0.8px;
  }
  .lc-lede {
    font-size: 16.5px;
    margin-top: 18px;
  }
  .lc-cta {
    margin-top: 24px;
  }

  .lc-track {
    padding-left: 40px;
  }
  .lc-badge {
    left: -40px;
    width: 26px;
    height: 26px;
    font-size: 12.5px;
    top: 3px;
  }
  .lc-rail,
  .lc-rail-fill {
    left: 12.5px;
  }
  .lc-step {
    padding-bottom: 26px;
  }
  .lc-card {
    padding: 20px 18px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }
  .lc-card-title {
    font-size: 19px;
  }
  .lc-card-desc {
    font-size: 15.5px;
    line-height: 1.65;
  }

  /* Decor is sized for a wide canvas; shrink it so it does not dominate. */
  .lc-dots {
    width: 180px;
    height: 180px;
    left: -20px;
    top: 20px;
  }
  .lc-glow {
    width: 340px;
    height: 340px;
    right: -150px;
    bottom: -120px;
  }
}

/* Touch devices get no hover, so drop the nudge and keep cards static. */
@media (hover: none) {
  .lc-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
    background: #ffffff;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-card {
    transition: none;
  }
}

/* ---------- Shell ---------- */
/* ==========================================================================
   18. Pillars accordion (.pl-*, .pillar)
   Used on: SAP main
   ========================================================================== */
.pl-section {
  padding: 90px 64px 100px;
  color: #000000;
}
.pl-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pl-ring {
  position: absolute;
  width: 640px;
  height: 640px;
  left: -240px;
  top: -200px;
  border-radius: 50%;
  border: 1px solid rgba(124, 88, 253, 0.13);
}
.pl-glow {
  position: absolute;
  width: 700px;
  height: 520px;
  right: -260px;
  bottom: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 88, 253, 0.12), transparent 62%);
  filter: blur(60px);
}
.pl-inner {
  max-width: 1240px;
}

.pl-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 44px;
}
.pl-eyebrow {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--sapAccent);
  margin-bottom: 16px;
}
.pl-title {
  font-size: clamp(42px, 4.5vw, 62px);
  font-weight: 300;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -1.6px;
}
.pl-title em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(95deg, #7c58fd, #6a35e8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pl-lede {
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.62);
  max-width: 440px;
  margin: 0 0 6px;
}

/* ---------- Accordion row ---------- */
.pillars-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  height: 460px;
}

.pillar {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
  transition:
    flex 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s ease,
    box-shadow 0.3s ease;
}
.pillar.is-open {
  flex: 4.6 1 0%;
  border-color: var(--border-hov);
}
.pillar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The one brand-coloured card */
.pillar--highlight {
  background: linear-gradient(150deg, #7c58fd 0%, #7b4dff 70%, #8f5bff 100%);
  border-color: rgba(255, 255, 255, 0.45);
  --accent: #ffffff;
  --icon-bg: rgba(255, 255, 255, 0.18);
  --border-hov: rgba(255, 255, 255, 0.45);
}
.pillar--highlight .pillar-num {
  color: rgba(255, 255, 255, 0.6);
}
.pillar--highlight .pillar-name-v,
.pillar--highlight .pillar-title {
  color: #ffffff;
}
.pillar--highlight .pillar-desc {
  color: rgba(255, 255, 255, 0.82);
}
.pillar--highlight .pillar-link {
  color: #ffffff;
}

/* Collapsed rail */
.pillar-rail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.pillar.is-open .pillar-rail {
  opacity: 0;
}

.pillar-num {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 1px;
}
.pillar-name-v {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 20px;
  font-weight: 500;
  color: #000000;
  max-height: 320px;
  overflow: hidden;
  text-align: center;
}
.pillar-glyph {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--icon-bg);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 18px;
  flex: none;
}
.pillar-glyph--lg {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  font-size: 20px;
}

/* Open panel */
.pillar-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease 0.1s;
}
.pillar.is-open .pillar-panel {
  opacity: 1;
}
.pillar-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pillar-title {
  font-size: clamp(22px, 1.8vw, 27px);
  font-weight: 500;
  margin: 24px 0 0;
  letter-spacing: -0.4px;
  line-height: 1.25;
  color: #000000;
  /* REFINED: was nowrap + ellipsis, which truncated the longest pillar name.
       Now wraps to at most two lines instead of cutting mid-word. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pillar-desc {
  font-size: 16.5px;
  line-height: 1.68;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.62);
  margin: 14px 0 0;
  min-width: 290px;
}
.pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 500;
  color: var(--accent);
  margin-top: auto;
  white-space: nowrap;
}
.pillar-arrow {
  width: 18px;
  height: auto;
  opacity: 0.85;
  flex: none;
  transition: transform 0.25s ease;
}
.pillar.is-open:hover .pillar-arrow {
  transform: translateX(3px);
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .pl-section {
    padding: 70px 32px 80px;
  }
  .pl-head {
    gap: 36px;
    margin-bottom: 36px;
  }
  .pillars-row {
    height: 420px;
    gap: 10px;
  }
  .pillar-panel {
    padding: 24px 22px 22px;
  }
  .pillar-desc {
    min-width: 0;
    font-size: 15.5px;
  }
}

/* ---------- Phone: horizontal accordion becomes a vertical one ---------- */
@media (max-width: 900px) {
  .pl-section {
    padding: 56px 20px 64px;
  }
  .pl-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
  }
  .pl-title {
    letter-spacing: -0.8px;
  }
  .pl-lede {
    max-width: none;
    font-size: 16px;
    margin: 0;
  }

  .pillars-row {
    flex-direction: column;
    height: auto;
    gap: 10px;
  }

  .pillar {
    flex: none;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }
  .pillar.is-open {
    flex: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  }

  /* Rail becomes a permanent horizontal header row. */
  .pillar-rail {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 18px;
    opacity: 1 !important;
  }
  .pillar-num {
    order: 1;
    min-width: 24px;
  }
  .pillar-name-v {
    order: 2;
    writing-mode: horizontal-tb;
    transform: none;
    max-height: none;
    font-size: 17px;
    line-height: 1.3;
    text-align: left;
    flex: 1;
  }
  .pillar-glyph {
    order: 3;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 16px;
  }

  /* Panel drops below the header and expands instead of cross-fading. */
  .pillar-panel {
    position: static;
    padding: 0 18px;
    opacity: 1;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition:
      max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      padding-bottom 0.42s ease;
  }
  .pillar.is-open .pillar-panel {
    max-height: 260px;
    padding-bottom: 20px;
  }
  .pillar-panel-head,
  .pillar-title {
    display: none;
  } /* already shown in the header row */
  .pillar-desc {
    margin: 0;
    min-width: 0;
    font-size: 15.5px;
    line-height: 1.6;
  }
  .pillar-link {
    margin-top: 14px;
    font-size: 15px;
  }

  .pl-ring {
    width: 360px;
    height: 360px;
    left: -160px;
    top: -120px;
  }
  .pl-glow {
    width: 420px;
    height: 340px;
    right: -200px;
    bottom: -140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar,
  .pillar-rail,
  .pillar-panel,
  .pillar-arrow {
    transition: none !important;
  }
}

/* ---------- Shell: this section is light-on-dark ---------- */
/* ==========================================================================
   19. Proof — global presence & globe (.pf-*)
   Used on: SAP main
   ========================================================================== */
.pf-section {
  position: relative;
  z-index: 1;
  padding: 100px 64px;
  color: #fff;
  background: linear-gradient(180deg, #050506 0%, #0b0b0d 55%, #050506 100%);
}
.pf-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.pf-head {
  max-width: 780px;
  margin: 0 auto 20px;
  text-align: center;
}
.pf-eyebrow {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 3px;
  color: #b3a1ff;
  margin-bottom: 16px;
}
.pf-title {
  font-size: clamp(42px, 4.5vw, 62px);
  font-weight: 300;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -1.6px;
}
.pf-title em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(95deg, #a18aff, #54d2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Three-column stage ---------- */
.pf-stage {
  display: grid;
  grid-template-columns: 1fr 470px 1fr;
  gap: 24px;
  align-items: center;
}

.pf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pf-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(6px);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.pf-card--left {
  justify-content: flex-end;
  text-align: right;
}
.pf-card--right {
  justify-content: flex-start;
  text-align: left;
}

.pf-card:hover {
  background: rgba(124, 88, 253, 0.09);
  border-color: rgba(161, 138, 255, 0.5);
}
.pf-card--left:hover {
  transform: translateX(4px);
}
.pf-card--right:hover {
  transform: translateX(-4px);
}

.pf-card-text {
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.pf-card-text strong {
  font-weight: 500;
  color: #fff;
}

.pf-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--dot);
  box-shadow: 0 0 12px var(--dot);
}

/* ---------- Globe ---------- */
.pf-globe {
  position: relative;
  display: grid;
  place-items: center;
}
.pf-globe-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}
.pf-stat-num {
  font-size: clamp(36px, 3.2vw, 50px);
  font-weight: 200;
  letter-spacing: -1.5px;
  background: linear-gradient(95deg, #fff, #b3a1ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pf-stat-label {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Industry chips ---------- */
.pf-industries {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.pf-industries-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.4);
  margin-right: 8px;
}
.pf-chip {
  font-size: 15px;
  font-weight: 400;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}
.pf-chip:hover {
  border-color: rgba(161, 138, 255, 0.5);
  color: #fff;
}

/* ---------- Tablet: globe on top, claims in two columns beneath ---------- */
@media (max-width: 1100px) {
  .pf-section {
    padding: 80px 32px;
  }
  .pf-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "globe globe" "left right";
    gap: 20px 24px;
    align-items: start;
  }
  .pf-globe {
    grid-area: globe;
    max-width: 420px;
    margin: 0 auto 34px;
    width: 100%;
  }
  .pf-list--left {
    grid-area: left;
  }
  .pf-list--right {
    grid-area: right;
  }

  /* Mirrored alignment only makes sense flanking the globe. */
  .pf-card--left {
    justify-content: flex-start;
    text-align: left;
    flex-direction: row-reverse;
  }
  .pf-card--left:hover {
    transform: translateX(-4px);
  }
}

/* ---------- Phone: one column ---------- */
@media (max-width: 780px) {
  .pf-section {
    padding: 56px 20px 64px;
  }
  .pf-title {
    letter-spacing: -0.8px;
  }
  .pf-head {
    margin-bottom: 28px;
  }

  .pf-stage {
    grid-template-columns: 1fr;
    grid-template-areas: "globe" "left" "right";
    gap: 14px;
  }
  .pf-globe {
    max-width: 300px;
    margin: 0 auto 30px;
  }
  .pf-list {
    gap: 14px;
  }

  .pf-card {
    padding: 18px 18px;
    border-radius: 14px;
    gap: 12px;
  }
  .pf-card-text {
    font-size: 15px;
    line-height: 1.6;
  }
  .pf-dot {
    align-self: flex-start;
    margin-top: 7px;
  }

  /* Dots read better leading every row once the mirror is gone. */
  .pf-card--left {
    flex-direction: row-reverse;
  }
  .pf-card--right {
    flex-direction: row-reverse;
  }

  .pf-globe-stat {
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 14px;
    flex-wrap: wrap;
    white-space: normal;
  }
  .pf-stat-label {
    font-size: 13.5px;
  }

  .pf-industries {
    margin-top: 36px;
    gap: 9px;
  }
  .pf-industries-label {
    width: 100%;
    text-align: center;
    margin: 0 0 6px;
    font-size: 13px;
  }
  .pf-chip {
    font-size: 13.5px;
    padding: 8px 15px;
  }
}

/* Touch devices: no hover, so keep cards at rest. */
@media (hover: none) {
  .pf-card:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.09);
    transform: none;
  }
}

/* The globe is entirely CSS/SMIL animation — freeze it on request. */
@media (prefers-reduced-motion: reduce) {
  .pf-globe svg * {
    animation: none !important;
  }
  .pf-card,
  .pf-chip {
    transition: none;
  }
}

/* ---------- Shell ---------- */
/* ==========================================================================
   20. CTA section (.cta-*)
   Used on: SAP main, Cloud ERP Public
   ========================================================================== */
.cta-section {
  position: relative;
  z-index: 1;
}

.cta-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: 1240px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  padding: 96px 64px;
  background: linear-gradient(160deg, #0b0b0d 0%, #050506 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.cta-card[data-zoom-wrap] {
  max-width: none; /* let the scroll animation control the width, not this cap */
  width: 62%;
}
@media (max-width: 991px) {
  .cta-card[data-zoom-wrap] {
    width: 100%;
  }
}

/* Hero Zoom */
/* Banner zoom-on-scroll: starts as an inset rounded card, expands to full width
   as the page is first scrolled. Same width/border-radius mechanic as .cta-card. */

@media (max-width: 991px) {
}
/* Aurora blobs */
.cta-aurora-a {
  position: absolute;
  width: 700px;
  height: 700px;
  left: 50%;
  top: -420px;
  margin-left: -350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 88, 253, 0.32), transparent 62%);
  filter: blur(70px);
  pointer-events: none;
  animation: auroraC 18s ease-in-out infinite alternate;
}
.cta-aurora-b {
  position: absolute;
  width: 500px;
  height: 500px;
  right: -180px;
  bottom: -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 62%);
  filter: blur(60px);
  pointer-events: none;
}
@keyframes auroraC {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(60px, -70px);
  }
}

.cta-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

.cta-eyebrow {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 3px;
  color: #bcaaff;
  margin-bottom: 20px;
}
.cta-title {
  font-size: clamp(46px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -2px;
  max-width: 920px;
}
.cta-title em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(95deg, #a18aff, #9d7bff, #54d2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-lede {
  font-size: 19px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.58);
  margin: 24px auto 0;
  max-width: 600px;
}

/* ---------- Buttons ---------- */
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 42px;
  flex-wrap: wrap;
}

/* ---------- Trust row ---------- */
.cta-trust {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
}
.cta-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cta-check {
  color: #54d2ff;
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .cta-section {
    padding: 10px 32px 72px;
  }
  .cta-card {
    padding: 72px 40px;
    border-radius: 28px;
  }
  .cta-lede {
    font-size: 18px;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 780px) {
  .cta-section {
    padding: 10px 16px 56px;
  }
  .cta-card {
    padding: 52px 22px;
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  }

  .cta-eyebrow {
    font-size: 13px;
    letter-spacing: 2.4px;
    margin-bottom: 14px;
  }
  .cta-title {
    letter-spacing: -1px;
  }
  .cta-lede {
    font-size: 16.5px;
    line-height: 1.65;
    margin-top: 18px;
  }

  /* Side-by-side pills do not fit; stack them full width so both are
       equally tappable rather than letting the second wrap awkwardly. */
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 32px;
    width: 100%;
  }
  .cta-btn {
    width: 100%;
  }

  .cta-trust {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    font-size: 14.5px;
  }

  /* Blobs are sized for a 1240px card; shrink so they stay inside it. */
  .cta-aurora-a {
    width: 420px;
    height: 420px;
    margin-left: -210px;
    top: -260px;
    filter: blur(50px);
  }
  .cta-aurora-b {
    width: 320px;
    height: 320px;
    right: -120px;
    bottom: -180px;
    filter: blur(45px);
  }
}

/* Touch: no hover, so keep buttons at rest. */
@media (hover: none) {
}

@media (prefers-reduced-motion: reduce) {
  .cta-aurora-a {
    animation: none;
  }
}

/* ==========================================================================
   21. Overview & infographics
   Used on: All 13 SAP inner pages
   ========================================================================== */

.overview_Infographic {
  background: url(../images/sap/overview_background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.overview,
.overview_Sec {
  padding: 3rem 0;
}
.overview_Sec p {
  font-size: 1.5rem;
  line-height: 1.7;
  color: #000;
  font-weight: 400;
}
.overview_Sec .common_Title {
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}
.overview_Sec .card {
  box-shadow: 0 20px 45px -25px rgba(43, 31, 140, 0.35);
  background: #fff;
  border: 1px solid #e4e3f4;
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
}
.overview_Sec .card h4 {
  font-size: 1.5rem;
  color: #000;
  font-weight: 700;
}
.card_Image {
  flex: 0 0 56px;
}
.card_Icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #ecebfb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card_Icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--accent);
}

/* ==========================================================================
   22. Rail process diagram (.rail-*)
   Used on: Business AI
   ========================================================================== */

.rail-panel {
  width: 100%;
  padding: 64px clamp(24px, 6vw, 90px);
}

.rail-frame {
  max-width: 1360px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(36px, 4vw, 54px) clamp(24px, 5vw, 64px) 44px;
  box-shadow: 0 40px 80px -48px rgba(43, 31, 140, 0.28);
  position: relative;
  overflow: hidden;
}

.rail-frame::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 52, 214, 0.1), transparent 70%);
  pointer-events: none;
}

.rail-kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 44px;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
}

.rail-kicker h2 {
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
}

.rail-kicker span {
  font-size: 0.9rem;
  color: var(--muted);
}

.rail-track-wrap {
  position: relative;
}

.rail-track-svg {
  position: absolute;
  top: 33px;
  left: 0;
  width: 100%;
  height: 6px;
  overflow: visible;
  z-index: 0;
}

.rail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.rail-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  min-width: 96px;
  cursor: default;
}

.rail-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 14px 28px -16px rgba(43, 31, 140, 0.35);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.rail-step:hover .rail-icon {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 22px 36px -16px rgba(43, 31, 140, 0.42);
}

.rail-icon.is-ai {
  width: 80px;
  height: 80px;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  border: none;
  box-shadow: 0 18px 34px -14px rgba(46, 31, 140, 0.55);
}

.rail-step:hover .rail-icon.is-ai {
  transform: translateY(-8px);
  box-shadow: 0 26px 42px -14px rgba(46, 31, 140, 0.6);
}

.rail-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--accent);
}

.rail-icon.is-ai span {
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}

.rail-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 6px;
}

.rail-step label {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
  color: #000;
}

.rail-step.is-ai label {
  font-size: 0.98rem;
}

@media (max-width: 900px) {
  .rail-track-svg {
    display: none;
  }
  .rail-row {
    flex-wrap: wrap;
    row-gap: 32px;
    justify-content: center;
  }
  .rail-step {
    min-width: 110px;
    flex: 0 0 28%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail-step,
  .rail-icon {
    transition: none !important;
  }
}

@media only screen and (max-width: 1600px) {
  main.mainContent {
    padding-top: 33px;
  }
}

/* ==========================================================================
   23. Case studies slider (.cs_*)
   Used on: All pages except Data & Analytics and WalkMe
   ========================================================================== */
.cs_Sec {
  padding: 3rem 0;
  background: #000;
}
.cs_Sec .common_Title {
  margin-bottom: 2rem;
  color: #fff;
}
.cs_Content {
  padding-top: 1rem;
}
.cs_Content .cs_Cat {
  display: flex;
}
.cs_Content .cs_Cat span {
  border: 1px solid var(--accent);
  border-radius: 20px;
  margin-right: 15px;
  color: var(--yt_Color_Dark);
  font-size: 0.9rem;
  padding: 0.3rem 1.2rem;
  background: #ffffff;
}
.cs_Content .cs_Main_Title {
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-weight: 600;
  line-height: 1.3;
  font-size: 2rem;
}
.cs_points {
  background: #fff;
  position: absolute;
  bottom: 39px;
  backdrop-filter: blur(20px);
  padding: 5px 11px;
  left: 40px;
  font-size: 1rem;
}
.cs_points span {
  font-size: 2rem;
}
/* Neighbouring slides are dimmed and blurred — but only after Swiper has
   initialised and marked the active slide. Before that (or with JS off)
   every slide stays sharp, so the section never opens blurred. */
.cs_Swiper .swiper-slide {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
}
.cs_Swiper.swiper-initialized .swiper-slide:not(.swiper-slide-active) {
  filter: blur(3px);
  opacity: 0.45;
  transform: scale(0.97);
  transform-origin: center center;
  transition:
    filter 0.5s ease,
    opacity 0.5s ease,
    transform 0.5s ease;
}
.cs_Swiper.swiper-initialized .swiper-slide-active {
  filter: none;
  opacity: 1;
  transform: scale(1);
}

/* A blurred slide is decorative, not readable — take its links out of the tab
   order visually and stop hover states firing on something the user can't read. */
.cs_Swiper.swiper-initialized
  .swiper-slide:not(.swiper-slide-active, .swiper-slide-visible.swiper-slide-active) {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cs_Swiper .swiper-slide {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   2. CASE STUDY CAROUSEL — badge anchoring

   .cs_points is position:absolute but .cs_Img had no positioned ancestor, so
   the client-logo badge was anchoring to a container much further up the tree.
   --------------------------------------------------------------------------- */

.cs_Img {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.cs_Img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   3. CASE STUDY CAROUSEL — arrow row

   .insights_Nav is display:flex already; this just gives it breathing room and
   right-aligns the pair under the carousel.
   --------------------------------------------------------------------------- */

.cs_Sec .cs_Nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 576px) {
  .cs_Sec .cs_Nav {
    justify-content: center;
  }
}

.cs_Swiper .row .col-sm-6:nth-child(1) {
  order: 2;
}

/* ==========================================================================
   24. Banner zoom-on-scroll & inner-page layout tweaks
   Used on: All SAP pages (main + inner)
   ========================================================================== */

.banner[data-zoom-wrap] {
  position: relative;
  width: 92%;
  height: 92vh; /* was 92% */
  max-width: none;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
}
@media (max-width: 991px) {
  .banner[data-zoom-wrap] {
    width: 100%;
    height: auto; /* don't force viewport height on mobile */
    border-radius: 0;
  }
}
.sap.inner-page .overview,
.overview_Sec,
.infographics {
  background: transparent;
}
.overview_Sec .card_Content p {
  margin-bottom: 0;
  font-size: 1.1rem;
  color: var(--para_Text_Dark);
}
.sap.inner-page .accelarator_Card .accel_Num_Row {
  display: none;
}
.sap.inner-page .accelarator_Card {
  background: #000 !important;
}
.sec_Head_Row {
  display: flex;
  align-items: center;
}
.sec_Head_Row p {
  font-size: 1.1rem;
  font-weight: 300;
  color: #000;
}

/* ==========================================================================
   25. IT sprawl section (.sprawl, .plate)
   Used on: LeanIX
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-soft: #97a2c8;
    --plate: #101736;
    --rule: rgba(160, 180, 255, 0.16);
    --violet: #8b5cff;
    --blue: #3fc1f0;
    --draw: #9dbef5;
    --draw-ghost: #4d5c90;
    --signal: #9b7bff;
    --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.5);
    --wash: linear-gradient(180deg, #070c24 0%, #0b1130 100%);
    --glow-a: rgba(124, 77, 255, 0.22);
    --glow-b: rgba(35, 169, 232, 0.16);
  }
}

.sprawl {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 11vw, 9rem) 0 clamp(4.5rem, 10vw, 8rem);
  background:
    radial-gradient(880px 520px at 10% -12%, var(--glow-a), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, var(--glow-b), transparent 64%), var(--wash);
}
/* flowing line motif */
.sprawl__waves {
  position: absolute;
  inset: -6% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  opacity: 0.5;
}
.sprawl__waves svg {
  width: 100%;
  height: 100%;
}
.sprawl__waves .s0 {
  stop-color: var(--violet);
  stop-opacity: 0;
}
.sprawl__waves .s1 {
  stop-color: var(--violet);
  stop-opacity: 0.55;
}
.sprawl__waves .s2 {
  stop-color: var(--blue);
  stop-opacity: 0.45;
}
.sprawl__waves .s3 {
  stop-color: var(--blue);
  stop-opacity: 0;
}
.sprawl .container {
  position: relative;
}

/* ---- header ---- */
.sprawl__eyebrow {
  display: inline-block;
  margin: 0 0 0.95rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
}
.sprawl__title {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1rem, 2.2vw, 1.5rem);
  max-width: 25ch;
}
.sprawl__lead {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 0 clamp(2.4rem, 4.6vw, 3.5rem);
}

/* ---- the four cards ---- */
.plate {
  height: 100%;
  border: 1px solid var(--rule);
  background: var(--plate);
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.4rem, 2.2vw, 1.85rem) clamp(1.7rem, 2.8vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
/* gradient hairline across the top, brand violet → blue */
.plate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--blue));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.plate__fig {
  display: block;
  width: 100%;
  height: auto;
  max-width: 224px;
}
.plate__fig .ln {
  fill: none;
  stroke: var(--draw);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.35s ease;
}
.plate__fig .ghost {
  stroke: var(--draw-ghost);
}
.plate__fig .dot {
  fill: var(--draw);
  stroke: none;
}
.plate__fig .dot-ghost {
  fill: var(--draw-ghost);
  stroke: none;
  transition: fill 0.35s ease;
}
.plate__fig .mark {
  stroke: var(--signal);
  stroke-width: 1.6;
}
.plate__body {
  margin-top: auto;
}
.plate__label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.06rem, 1.3vw, 1.19rem);
  line-height: 1.25;
  letter-spacing: -0.008em;
  margin: 0 0 0.5rem;
}
.plate__text {
  margin: 0;
  font-size: 0.965rem;
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* hover surfaces what the diagram is about — the only hover motion */
@media (hover: hover) {
  .plate:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: transparent;
  }
  .plate:hover::before {
    transform: scaleX(1);
  }
  .plate:hover .plate__fig .ghost {
    stroke: var(--signal);
  }
  .plate:hover .plate__fig .dot-ghost {
    fill: var(--signal);
  }
}

@media (prefers-reduced-motion: reduce) {
  .plate__fig * {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
  .plate {
    transition: none;
  }
}

/* ==========================================================================
   26. Custom cursor (dot + ring)
   Used on: All 13 SAP inner pages

   The #cursorDot / #cursorRing divs and the GSAP quickTo script already exist
   in the page, but no rules were ever written for them — so they render as
   0×0, static, transparent divs. These rules give them size, fixed
   positioning and a stacking context.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .cursor-dot,
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none; /* never swallow clicks */
    z-index: 100000; /* above header (9999) and modals */
    opacity: 0; /* hidden until the first mousemove */
    will-change: transform;
  }

  /* the ring transitions size/colour on hover — never transform,
     that belongs to GSAP's quickTo */
  .cursor-ring {
    transition:
      width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.28s ease,
      border-color 0.28s ease;
  }

  .cursor-dot {
    width: 7px;
    height: 7px;
    background: var(--yt_Color, #5a00fa);
  }

  .cursor-ring {
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(90, 0, 250, 0.55);
  }

  /* over links, buttons, accordion headers */
  .cursor-ring.is-hover {
    width: 62px;
    height: 62px;
    background-color: rgba(90, 0, 250, 0.1);
    border-color: var(--yt_Color, #5a00fa);
  }

  /* mousedown */
  .cursor-ring.is-click {
    width: 26px;
    height: 26px;
    background-color: rgba(90, 0, 250, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

/* ==========================================================================
   27. Animated section watermark (.animated_Ico)
   Used on: EHS, Business AI, Cloud ERP, Data & Analytics, LeanIX, RISE, Signavio, WalkMe

   The icon is absolutely positioned but the section was never a positioned
   ancestor, so it anchored to whatever container happened to be relative.
   Pin the section, start the icon at the top, and let GSAP move it down.
   ========================================================================== */

.inner_Services,
.bsf-scroll-slider {
  position: relative;
  background: var(--yt-light-gradient);
}

.animated_Ico {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Beats .animated_Ico.bottom { bottom: 0 } — the icon now begins at the
   top of the section and GSAP translates it down to the bottom. */
.inner_Services > .animated_Ico.bottom {
  top: 0;
  bottom: auto;
  will-change: transform;
}

.inner_Services > .animated_Ico.left {
  left: 0;
  display: flex;
  align-items: end;
  bottom: 0;
}
.inner_Services > .animated_Ico.right {
  right: 0;
}

/* The existing .animated_Ico img rule sets opacity: .1, which is almost
   invisible on white. Raise it a little for this section.

   transform-origin is the important bit: the image scales up from its
   bottom-left corner, so the bottom edge stays pinned to the wrapper. That
   keeps the travel distance correct no matter how large it grows — it lands
   flush with the section's bottom instead of spilling past it. */
.inner_Services > .animated_Ico img {
  opacity: 0.14;
  width: 160px;
  height: auto;
  transform-origin: left bottom;
  will-change: transform, opacity;
}

@media (max-width: 991px) {
  .inner_Services > .animated_Ico img {
    width: 100px;
  }
}

/* ==========================================================================
   28. Glass buttons — moved
   .glass_Btn is now the DS .btn-glass variant, defined with every other
   button in common-inner_revamp.css § 03.
   ========================================================================== */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
}

/* ==========================================================================
   29. Page-specific overrides (dark image sections, dark cards, misc)
   Used on: EHS, Cloud ERP, RISE, WalkMe + per-page body classes
   ========================================================================== */

.sap.inner-page .banner .container {
  padding-right: 0;
}
.sap.inner-page .marquee-link {
  color: #000;
  font-size: 1.3rem;
  letter-spacing: 1px;
}
.sap.inner-page .marquee-swiper .swiper-slide {
  background: transparent;
}
.sap.inner-page .marquee-swiper {
  background: #e1daff;
  border-top: 0;
  border-bottom: 0;
}
.sap.inner-page .marquee-star {
  font-size: 2rem;
  color: #5a00fa;
}
.bg_Dark_Img {
  background: url(../images/sap/ehs_BG_1.jpg);
  padding: 4rem 0 0 0;
  background-size: cover;
  background-repeat: no-repeat;
}
.sap-walkme .bg_Dark_Img {
  background: url(../images/sap/differentiator_BG.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.sap-rise-migration .bg_Dark_Img {
  background: url(../images/sap/why_YASH_BG_1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.sap-rise-migration .dark_Card {
  background: #000;
}
.sap-rise-migration ul.yt_Listing li {
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.dark_Card {
  background: rgb(0 0 0 / 76%);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgb(0 0 0 / 39%);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  color: #fff;
  padding: 2rem;
}
.dark_Card .common_Title {
  font-size: 3rem;
  font-weight: 400;
}
.dark_Card p {
  color: var(--light-gray-text);
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
}
.moreInformation,
.sub-top-fotter {
  display: none;
}
.commonBreadcrumb--gray .breadcrumb-item a {
  font-size: 1.1rem;
}
.sap_Home .bsf-tab {
  margin-bottom: 5px;
  padding: 1rem 0.5rem;
}
.sap_Home .bsf-tab__label h3 {
  font-size: 1.15rem;
}
/* Pillars are <a> links now (were <button>) — neutralise default link styling */
a.pillar,
a.pillar:hover,
a.pillar:focus,
a.pillar:visited {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.pillar * {
  text-decoration: none;
}
.sap-business-ai .overview_Sec p,
.sap-signavio-services .overview_Sec p,
.sap-walkme .overview_Sec p,
.sap-rise-migration .overview_Sec p,
.sap-cloud-erp .overview_Sec p {
  font-size: 1.1rem;
}
.sap-business-ai .overview_Sec .card_Content p {
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--para_Text_Dark);
}
.sap-walkme .inner_Services.bsf-scroll-slider {
  display: none;
}

/* ==========================================================================
   30. Bento tiles — shared heading style (.bt)
   Used on: Business AI, Signavio, LeanIX, WalkMe, RISE

   Radii step down with depth: tile 28px → chip 999px.
   ========================================================================== */
.bt h4 {
  font-size: clamp(1.1rem, 1.35vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin: 0 0 8px;
}

/* ==========================================================================
   31. Why YASH — bento grid (.why_*)
   Used on: Business AI

   One pointer light catches every tile edge; the two figures count up once.
   ========================================================================== */
.why_Sec {
  background: #000;
  padding: 110px 0;
  overflow: hidden;
}
.why_Sec .common_Title {
  color: #fff;
  max-width: 24ch;
  margin: 0 0 56px;
  text-wrap: balance;
}

.why_Grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(250px, auto));
  grid-template-areas:
    "labs labs msp   msp"
    "labs labs cert  trust";
  gap: 14px;
}
.why_Labs {
  grid-area: labs;
}
.why_Msp {
  grid-area: msp;
}
.why_Cert {
  grid-area: cert;
}
.why_Trust {
  grid-area: trust;
}

.why_Grid .bt {
  --mx: -500px;
  --my: -500px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  padding: 28px 30px;
  color: #fff;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Border light — a radial fill masked down to a 1px ring */
.why_Grid .bt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  z-index: 2;
  background: radial-gradient(
    340px circle at var(--mx) var(--my),
    rgb(var(--yt-400-rgb) / 0.95),
    transparent 45%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
/* Surface wash under the pointer */
.why_Grid .bt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    520px circle at var(--mx) var(--my),
    rgb(var(--yt-600-rgb) / 0.16),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .why_Grid:hover .bt::before,
  .why_Grid:hover .bt::after {
    opacity: 1;
  }
}
.why_Grid .bt p {
  color: rgb(255 255 255 / 0.66);
  max-width: 44ch;
}

/* Figures */
.why_Figure {
  display: block;
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 auto;
  padding-bottom: 28px;
}
.why_Figure sup {
  font-size: 0.5em;
  top: -0.72em;
  margin-left: 0.04em;
  font-weight: 300;
}

/* 900+ — the anchor tile. The figure is the one oversized element. */
.why_Labs {
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(var(--yt-600-rgb) / 0.38), transparent 60%),
    linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015)) !important;
  padding: 36px 40px !important;
}
.why_Labs .why_Figure {
  font-size: clamp(6rem, 7vw, 7.5rem);
  color: #fff;
}
.why_Labs .why_Figure sup {
  color: var(--yt-400);
}
.why_Labs p {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
  font-weight: 300;
  line-height: 1.55 !important;
  color: rgb(255 255 255 / 0.82) !important;
  max-width: 38ch !important;
}

/* Recognized Services Provider */
.why_Msp h4 {
  font-size: clamp(1.4rem, 1.9vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.6px;
  margin-bottom: 12px;
  max-width: 18ch;
}

/* 600+ — the brand-filled tile */
.why_Cert {
  background: var(--yt-ramp-gradient) !important;
  border-color: transparent !important;
}
.why_Cert .why_Figure {
  font-size: clamp(3.4rem, 5vw, 5rem);
  color: #fff;
}
.why_Cert .why_Figure sup {
  color: var(--yt-300);
}
.why_Cert p {
  color: rgb(255 255 255 / 0.84) !important;
}

/* Trusted Partner */
.why_Trust h4 {
  font-weight: 500;
}
.why_Trust p {
  font-size: 0.92rem !important;
}

@media (max-width: 1199px) {
  .why_Grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "labs labs"
      "msp  msp"
      "cert trust";
  }
  .why_Labs {
    min-height: 420px;
  }
  .why_Grid .bt {
    min-height: 240px;
  }
}
@media (max-width: 576px) {
  .why_Sec {
    padding: 72px 0;
  }
  .why_Sec .common_Title {
    margin-bottom: 36px;
  }
  .why_Grid {
    grid-template-columns: 1fr;
    grid-template-areas: "labs" "msp" "cert" "trust";
  }
  .why_Labs {
    min-height: 360px;
    padding: 28px 26px !important;
  }
  .why_Grid .bt {
    padding: 26px 24px;
    min-height: 200px;
  }
}

/* ---------- AMBIENT BACKGROUND — slow brand-ramp aurora, a dot field with a light
   that sweeps across it, and a faint horizon glow. Pure CSS, GPU-only
   properties (transform / opacity), and all of it stops for reduced motion. ---------- */
.why_Sec {
  position: relative;
  isolation: isolate;
}
.why_Sec > .container {
  position: relative;
  z-index: 1;
}

.why_Bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.why_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.why_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -18%;
  right: -10%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: whyDriftA 26s ease-in-out infinite alternate;
}
.why_Blob--b {
  width: 38vw;
  height: 38vw;
  max-width: 600px;
  max-height: 600px;
  bottom: -22%;
  left: -12%;
  background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
  animation: whyDriftB 32s ease-in-out infinite alternate;
}
.why_Blob--c {
  width: 28vw;
  height: 28vw;
  max-width: 440px;
  max-height: 440px;
  top: 38%;
  left: 42%;
  background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
  animation: whyDriftC 38s ease-in-out infinite alternate;
}
@keyframes whyDriftA {
  to {
    transform: translate(-14vw, 18vh) scale(1.15);
  }
}
@keyframes whyDriftB {
  to {
    transform: translate(18vw, -14vh) scale(0.9);
  }
}
@keyframes whyDriftC {
  to {
    transform: translate(-22vw, -10vh) scale(1.25);
  }
}

/* Dot field, faded out toward the edges */
.why_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
/* A brighter copy of the dots, revealed only inside a travelling band */
.why_Dots--lit {
  background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
  -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  animation: whySweep 9s linear infinite;
  opacity: 0.6;
}
@keyframes whySweep {
  from {
    -webkit-mask-position: 150% 0;
    mask-position: 150% 0;
  }
  to {
    -webkit-mask-position: -50% 0;
    mask-position: -50% 0;
  }
}

/* Horizon line under the grid */
.why_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
  animation: whyBreathe 6s ease-in-out infinite;
}
@keyframes whyBreathe {
  50% {
    opacity: 0.45;
  }
}

/* ---------- TILE ELEMENTS ---------- */
/* 900+ — four lab nodes on a slow orbit, linked to a data core */
.why_Orbit {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: -1;
  width: clamp(180px, 22vw, 300px);
  height: auto;
  overflow: visible;
}
.why_Orbit_Spin {
  transform-origin: 150px 150px;
  animation: whySpin 40s linear infinite;
}
.why_Orbit_Ring {
  fill: none;
  stroke: rgb(var(--yt-400-rgb) / 0.28);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}
.why_Orbit_Ring--in {
  stroke: rgb(var(--yt-400-rgb) / 0.16);
  stroke-dasharray: none;
}
.why_Orbit_Link {
  stroke: rgb(var(--yt-400-rgb) / 0.35);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  animation: whyFlow 2.4s linear infinite;
}
.why_Orbit_Node {
  fill: var(--yt-400);
}
.why_Orbit_Halo {
  fill: rgb(var(--yt-400-rgb) / 0.25);
  transform-box: fill-box;
  transform-origin: center;
  animation: whyPulse 3.2s ease-out infinite;
}
.why_Orbit_Halo:nth-of-type(2) {
  animation-delay: 0.8s;
}
.why_Orbit_Halo:nth-of-type(3) {
  animation-delay: 1.6s;
}
.why_Orbit_Halo:nth-of-type(4) {
  animation-delay: 2.4s;
}
.why_Orbit_Core {
  fill: #fff;
}
.why_Orbit_Core_Glow {
  fill: rgb(var(--yt-600-rgb) / 0.5);
  filter: blur(10px);
}
@keyframes whySpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes whyFlow {
  to {
    stroke-dashoffset: -20;
  }
}
@keyframes whyPulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* Recognized Services Provider — a scan line that crosses the tile */
.why_Scan {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--yt-400-rgb) / 0.12) 48%,
    rgb(var(--yt-400-rgb) / 0.35) 50%,
    transparent 52%
  );
  transform: translateX(-100%);
  animation: whyScan 7s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes whyScan {
  0%,
  15% {
    transform: translateX(-100%);
  }
  70%,
  100% {
    transform: translateX(100%);
  }
}

/* 600+ — a ring of ticks, one per certification band, turning slowly */
.why_Ticks {
  position: absolute;
  right: -60px;
  top: -60px;
  z-index: -1;
  width: 220px;
  height: 220px;
  opacity: 0.35;
  animation: whySpin 60s linear infinite reverse;
}
.why_Ticks line {
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Trusted Partner — industries as a slowly filling constellation */
.why_Net {
  position: absolute;
  right: 20px;
  top: 22px;
  z-index: -1;
  width: 120px;
  height: 80px;
  overflow: visible;
}
.why_Net line {
  stroke: rgb(var(--yt-400-rgb) / 0.3);
  stroke-width: 1;
}
.why_Net circle {
  fill: var(--yt-400);
  animation: whyTwinkle 4s ease-in-out infinite;
}
.why_Net circle:nth-child(odd) {
  animation-delay: 1.3s;
}
.why_Net circle:nth-child(3n) {
  animation-delay: 2.6s;
}
@keyframes whyTwinkle {
  50% {
    opacity: 0.25;
  }
}

@media (max-width: 576px) {
  .why_Orbit {
    width: 150px;
    top: 20px;
    right: 16px;
  }
  .why_Blob {
    filter: blur(60px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .why_Bg *,
  .why_Grid svg,
  .why_Grid svg *,
  .why_Scan {
    animation: none !important;
  }
  .why_Dots--lit,
  .why_Scan {
    display: none;
  }
}

/* ==========================================================================
   32. Proven impact — bento grid (.pi_*)
   Used on: Signavio
   ========================================================================== */
.pi_Sec {
  position: relative;
  isolation: isolate;
  background: var(--black);
  padding: 110px 0;
  overflow: hidden;
}
.pi_Sec > .container {
  position: relative;
  z-index: 1;
}

.pi_Grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(250px, auto));
  grid-template-areas:
    "hero  hero  hire  hire"
    "hero  hero  dso   cycle"
    "value value cost  cost";
  gap: 14px;
}
.pi_Hero {
  grid-area: hero;
}
.pi_Hire {
  grid-area: hire;
}
.pi_Dso {
  grid-area: dso;
}
.pi_Cycle {
  grid-area: cycle;
}
.pi_Value {
  grid-area: value;
}
.pi_Cost {
  grid-area: cost;
}

.pi_Grid .bt {
  --mx: -500px;
  --my: -500px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 28px 30px;
  color: #fff;
  display: flex;
  flex-direction: column;
}
/* Border light — a radial fill masked down to a 1px ring */
.pi_Grid .bt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  z-index: 3;
  background: radial-gradient(
    340px circle at var(--mx) var(--my),
    rgb(var(--yt-400-rgb) / 0.95),
    transparent 45%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
/* Surface wash under the pointer */
.pi_Grid .bt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    520px circle at var(--mx) var(--my),
    rgb(var(--yt-600-rgb) / 0.16),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .pi_Grid:hover .bt::before,
  .pi_Grid:hover .bt::after {
    opacity: 1;
  }
}
.pi_Grid .bt p {
  color: rgb(255 255 255 / 0.66);
  max-width: 40ch;
}

/* Top row of each stat tile: icon chip left, live visual right */
.pi_Top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: auto;
  padding-bottom: 24px;
}
.pi_Icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgb(var(--yt-600-rgb) / 0.18);
  border: 1px solid rgb(var(--yt-400-rgb) / 0.35);
  color: var(--yt-300);
}
.pi_Icon svg {
  width: 24px;
  height: 24px;
}

.pi_Figure {
  display: block;
  font-weight: 200;
  font-size: clamp(3rem, 4.4vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 12px;
  white-space: nowrap;
}
.pi_Figure sup {
  font-size: 0.48em;
  top: -0.8em;
  margin-left: 0.04em;
  font-weight: 300;
  color: var(--yt-400);
}
.pi_Figure small {
  font-size: 0.42em;
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-left: 0.18em;
  color: var(--yt-400);
}

/* ---------- Hero: photo tile carrying the section title */
.pi_Hero {
  padding: 0 !important;
  justify-content: flex-end;
  min-height: 520px;
}
.pi_Hero .bt_Img {
  animation: piKenBurns 24s ease-in-out infinite alternate;
  transform-origin: 60% 40%;
}
.pi_Hero_Shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(200deg, rgb(var(--yt-600-rgb) / 0.35) 0%, transparent 45%),
    linear-gradient(180deg, transparent 30%, rgb(0 0 0 / 0.88));
}
.pi_Hero_Body {
  padding: 36px 40px;
  position: absolute;
  z-index: 2;
}
.pi_Hero .common_Title {
  color: #fff;
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  letter-spacing: -2px;
  line-height: 1;
}
.pi_Hero_Rule {
  display: block;
  height: 2px;
  width: 120px;
  margin-top: 22px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.18);
  overflow: hidden;
  position: relative;
}
.pi_Hero_Rule::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--yt-400), transparent);
  animation: piSlide 2.8s ease-in-out infinite;
}
@keyframes piKenBurns {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.14) translate(-2%, -1%);
  }
}
@keyframes piSlide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

/* ---------- 40-50%: requisition → on-board track */
.pi_Track {
  flex: 1;
  max-width: 340px;
  padding-top: 8px;
}
.pi_Track_Bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  overflow: hidden;
}
.pi_Track_Fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--yt-600-rgb) / 0.5) 0 80%, var(--yt-400) 80% 100%);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pi_Track_Fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.6), transparent);
  width: 30%;
  animation: piShimmer 2.6s ease-in-out infinite;
}
@keyframes piShimmer {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(380%);
  }
}
.pi_Track_Dots {
  position: relative;
  height: 22px;
  margin-top: 12px;
}
.pi_Track_Dots::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed rgb(var(--yt-400-rgb) / 0.3);
}
.pi_Track_Dots i {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--yt-400);
  box-shadow: 0 0 10px rgb(var(--yt-400-rgb) / 0.9);
  animation: piTravel 4.2s linear infinite;
}
.pi_Track_Dots i:nth-child(2) {
  animation-delay: 1.4s;
}
.pi_Track_Dots i:nth-child(3) {
  animation-delay: 2.8s;
}
.pi_Track_Dots b {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--yt-400);
  background: var(--black);
}
.pi_Track_Dots b:first-of-type {
  left: 0;
}
.pi_Track_Dots b:last-of-type {
  right: 0;
  background: var(--yt-400);
}
@keyframes piTravel {
  0% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* ---------- 2 Days: a week strip with the two days taken out */
.pi_Dso {
  background: var(--yt-ramp-gradient) !important;
  border-color: transparent !important;
}
.pi_Dso .pi_Icon {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.3);
  color: #fff;
}
.pi_Dso .pi_Figure small {
  color: var(--yt-300);
}
.pi_Dso p {
  color: rgb(255 255 255 / 0.84) !important;
}
.pi_Week {
  display: flex;
  gap: 4px;
  padding-top: 6px;
}
.pi_Week i {
  width: 12px;
  height: 26px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.55);
}
.pi_Week i.is_Cut {
  background: transparent;
  border: 1px dashed rgb(255 255 255 / 0.7);
  animation: piBlink 2.4s ease-in-out infinite;
}
.pi_Week i.is_Cut + i.is_Cut {
  animation-delay: 0.3s;
}
@keyframes piBlink {
  50% {
    opacity: 0.25;
    transform: translateY(-3px);
  }
}

/* ---------- 20%: ring gauge */
.pi_Gauge {
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
}
.pi_Gauge circle {
  fill: none;
  stroke-width: 5;
}
.pi_Gauge_Track {
  stroke: rgb(255 255 255 / 0.1);
}
.pi_Gauge_Arc {
  stroke: var(--yt-400);
  stroke-linecap: round;
  stroke-dasharray: 163.36;
  stroke-dashoffset: 130.69; /* 20% of 2πr, r = 26 */
  transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}
.pi_Gauge_Orbit {
  transform-origin: 32px 32px;
  animation: piSpin 6s linear infinite;
}
.pi_Gauge_Orbit circle {
  fill: #fff;
  stroke: none;
}
@keyframes piSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 25%: rising line */
.pi_Spark {
  width: min(260px, 55%);
  height: auto;
  overflow: visible;
}
.pi_Spark_Line {
  fill: none;
  stroke: var(--yt-400);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}
.pi_Spark_Area {
  fill: url(#piSparkFill);
  transition: opacity 1s ease 0.9s;
}
.pi_Spark_End {
  fill: #fff;
}
.pi_Spark_Halo {
  fill: rgb(var(--yt-400-rgb) / 0.35);
  transform-box: fill-box;
  transform-origin: center;
  animation: piPulse 2.4s ease-out infinite;
}
@keyframes piPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* ---------- 15%: cost bars, the last one trimmed */
.pi_Bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 72px;
}
.pi_Bars i {
  width: 16px;
  border-radius: 6px 6px 3px 3px;
  background: rgb(255 255 255 / 0.16);
  transform-origin: bottom;
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pi_Bars i:nth-child(1) {
  height: 100%;
}
.pi_Bars i:nth-child(2) {
  height: 96%;
  transition-delay: 0.08s;
}
.pi_Bars i:nth-child(3) {
  height: 92%;
  transition-delay: 0.16s;
}
.pi_Bars i:nth-child(4) {
  height: 89%;
  transition-delay: 0.24s;
}
.pi_Bars i:nth-child(5) {
  height: 85%;
  transition-delay: 0.32s;
  background: var(--yt-400);
  position: relative;
}
.pi_Bars i:nth-child(5)::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 100%;
  height: 17.6%;
  border: 1px dashed rgb(var(--yt-400-rgb) / 0.8);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  animation: piBreathe 2.4s ease-in-out infinite;
}
@keyframes piBreathe {
  50% {
    opacity: 0.3;
  }
}

/* ---------- Reveal: JS adds .pi_Anim (start state), then .is_In.
       Without JS the visuals simply show their final state. */
.pi_Anim .pi_Track_Fill {
  transform: scaleX(0);
}
.pi_Anim .pi_Gauge_Arc {
  stroke-dashoffset: 163.36;
}
.pi_Anim .pi_Spark_Line {
  stroke-dashoffset: 320;
}
.pi_Anim .pi_Spark_Area {
  opacity: 0;
}
.pi_Anim .pi_Bars i {
  transform: scaleY(0);
}
.pi_Anim.is_In .pi_Track_Fill {
  transform: none;
}
.pi_Anim.is_In .pi_Gauge_Arc {
  stroke-dashoffset: 130.69;
}
.pi_Anim.is_In .pi_Spark_Line {
  stroke-dashoffset: 0;
}
.pi_Anim.is_In .pi_Spark_Area {
  opacity: 1;
}
.pi_Anim.is_In .pi_Bars i {
  transform: none;
}

/* ---------- AMBIENT BACKGROUND — same recipe as the Why YASH section ---------- */
.pi_Bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.pi_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.pi_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -20%;
  left: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: piDriftA 28s ease-in-out infinite alternate;
}
.pi_Blob--b {
  width: 38vw;
  height: 38vw;
  max-width: 600px;
  max-height: 600px;
  bottom: -22%;
  right: -10%;
  background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
  animation: piDriftB 34s ease-in-out infinite alternate;
}
.pi_Blob--c {
  width: 28vw;
  height: 28vw;
  max-width: 440px;
  max-height: 440px;
  top: 40%;
  left: 50%;
  background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
  animation: piDriftC 40s ease-in-out infinite alternate;
}
@keyframes piDriftA {
  to {
    transform: translate(16vw, 20vh) scale(1.15);
  }
}
@keyframes piDriftB {
  to {
    transform: translate(-18vw, -14vh) scale(0.9);
  }
}
@keyframes piDriftC {
  to {
    transform: translate(-24vw, -12vh) scale(1.25);
  }
}

.pi_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.pi_Dots--lit {
  background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
  -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  animation: piSweep 9s linear infinite;
  opacity: 0.6;
}
@keyframes piSweep {
  from {
    -webkit-mask-position: 150% 0;
    mask-position: 150% 0;
  }
  to {
    -webkit-mask-position: -50% 0;
    mask-position: -50% 0;
  }
}
.pi_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
  animation: piFade 6s ease-in-out infinite;
}
@keyframes piFade {
  50% {
    opacity: 0.45;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
  .pi_Grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "hero  hero"
      "hire  hire"
      "dso   cycle"
      "value value"
      "cost  cost";
  }
  .pi_Grid .pi_Hero {
    min-height: 420px;
  }
  .pi_Grid .bt {
    min-height: 240px;
  }
}
@media (max-width: 576px) {
  .pi_Sec {
    padding: 72px 0;
  }
  .pi_Grid {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "hire" "dso" "cycle" "value" "cost";
  }
  .pi_Grid .pi_Hero {
    min-height: 340px;
  }
  .pi_Hero_Body {
    padding: 26px 24px;
  }
  .pi_Grid .bt {
    padding: 26px 24px;
    min-height: 220px;
  }
  .pi_Blob {
    filter: blur(60px);
  }
  .pi_Track {
    max-width: 60%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi_Dots--lit {
    display: none;
  }
}

/* ==========================================================================
   33. Architecture data — bento grid (.ea_*)
   Used on: LeanIX
   ========================================================================== */
.ea_Sec {
  position: relative;
  isolation: isolate;
  background: var(--black);
  padding: 110px 0;
  overflow: hidden;
}
.ea_Sec > .container {
  position: relative;
  z-index: 1;
}
.ea_Sec .common_Title {
  color: #fff;
  max-width: 34ch;
  margin: 0 0 56px;
  text-wrap: balance;
}

.ea_Grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(250px, auto)) auto;
  grid-template-areas:
    "body body cons cert"
    "body body eng  tech"
    "out  out  out  out";
  gap: 14px;
}
.ea_Body {
  grid-area: body;
}
.ea_Cons {
  grid-area: cons;
}
.ea_Cert {
  grid-area: cert;
}
.ea_Out {
  grid-area: out;
}
.ea_Eng {
  grid-area: eng;
}
.ea_Tech {
  grid-area: tech;
}

.ea_Grid .bt {
  --mx: -500px;
  --my: -500px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 28px 30px;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.ea_Grid .bt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  z-index: 3;
  background: radial-gradient(
    340px circle at var(--mx) var(--my),
    rgb(var(--yt-400-rgb) / 0.95),
    transparent 45%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ea_Grid .bt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    520px circle at var(--mx) var(--my),
    rgb(var(--yt-600-rgb) / 0.16),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .ea_Grid:hover .bt::before,
  .ea_Grid:hover .bt::after {
    opacity: 1;
  }
}
.ea_Grid .bt p {
  color: rgb(255 255 255 / 0.68);
}

/* ---------- Body copy tile: photo on top, narrative below */
.ea_Body {
  padding: 14px 14px 32px !important;
}
.ea_Photo {
  position: relative;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 28px;
  isolation: isolate;
  background: var(--yt-950);
}
.ea_Photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: eaKenBurns 24s ease-in-out infinite alternate;
  transform-origin: 40% 50%;
}
.ea_Photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(200deg, rgb(var(--yt-600-rgb) / 0.4), transparent 55%),
    linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.55));
}
/* A LeanIX-style fact-sheet grid scanning across the photo */
.ea_Photo_Scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--yt-300-rgb) / 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--yt-300-rgb) / 0.18) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 55%, transparent 100%);
  -webkit-mask-size: 45% 100%;
  mask-size: 45% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: eaScan 6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes eaScan {
  0% {
    -webkit-mask-position: -80% 0;
    mask-position: -80% 0;
  }
  100% {
    -webkit-mask-position: 180% 0;
    mask-position: 180% 0;
  }
}
@keyframes eaKenBurns {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.14) translate(2%, -1%);
  }
}
.ea_Body p {
  padding: 0 18px;
  font-size: clamp(1rem, 1.05vw, 1.08rem) !important;
  line-height: 1.75 !important;
  color: rgb(255 255 255 / 0.74) !important;
  max-width: 62ch;
}

/* ---------- Outcome: brand tile over a live dependency graph */
.ea_Out {
  background: var(--yt-ramp-gradient) !important;
  border-color: transparent !important;
  justify-content: flex-end;
  padding: 34px 36px !important;
  min-height: 260px;
}
.ea_Out p {
  position: relative;
  font-size: clamp(1.25rem, 1.75vw, 1.75rem) !important;
  font-weight: 300;
  line-height: 1.4 !important;
  letter-spacing: -0.3px;
  color: #fff !important;
  max-width: 46ch;
}
.ea_Graph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.55;
}
.ea_Graph line {
  stroke: rgb(255 255 255 / 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  animation: eaFlow 2.2s linear infinite;
}
.ea_Graph circle {
  fill: #fff;
}
.ea_Graph circle.is_Hub {
  fill: var(--yt-300);
}
.ea_Graph .ea_Ping {
  fill: rgb(255 255 255 / 0.35);
  transform-box: fill-box;
  transform-origin: center;
  animation: eaPulse 3s ease-out infinite;
}
.ea_Graph .ea_Ping:nth-of-type(2) {
  animation-delay: 1s;
}
.ea_Graph .ea_Ping:nth-of-type(3) {
  animation-delay: 2s;
}
@keyframes eaFlow {
  to {
    stroke-dashoffset: -18;
  }
}
@keyframes eaPulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}
.ea_Out .ea_Icon {
  position: relative;
  margin-bottom: auto;
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.3);
  color: #fff;
}

/* ---------- Stat tiles */
.ea_Stat {
  justify-content: space-between;
  container-type: inline-size;
}
.ea_Stat_Top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.ea_Icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  background: rgb(var(--yt-600-rgb) / 0.18);
  border: 1px solid rgb(var(--yt-400-rgb) / 0.35);
  color: var(--yt-300);
}
.ea_Icon svg {
  width: 24px;
  height: 24px;
}
.ea_Figure {
  display: block;
  font-weight: 200;
  font-size: clamp(2.6rem, 26cqi, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 10px;
  white-space: nowrap;
}
.ea_Figure--long {
  font-size: clamp(2rem, 17cqi, 3.4rem);
}
.ea_Figure sup {
  font-size: 0.5em;
  top: -0.72em;
  margin-left: 0.04em;
  font-weight: 300;
  color: var(--yt-400);
}

/* 15+ consultants — avatar stack that breathes in */
.ea_Avatars {
  display: flex;
}
.ea_Avatars i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-left: -8px;
  border: 2px solid #0b0716;
  background: linear-gradient(160deg, var(--yt-400), var(--yt-700));
  animation: eaRise 3.6s ease-in-out infinite;
}
.ea_Avatars i:nth-child(2) {
  animation-delay: 0.25s;
  background: linear-gradient(160deg, var(--yt-300), var(--yt-600));
}
.ea_Avatars i:nth-child(3) {
  animation-delay: 0.5s;
  background: linear-gradient(160deg, var(--yt-500), var(--yt-800));
}
.ea_Avatars i:nth-child(4) {
  animation-delay: 0.75s;
  background: rgb(255 255 255 / 0.08);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 0.7rem;
  color: var(--yt-300);
}
@keyframes eaRise {
  0%,
  60%,
  100% {
    transform: none;
  }
  30% {
    transform: translateY(-4px);
  }
}

/* 23+ certifications — rotating seal ring around the icon */
.ea_Seal::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, var(--yt-400) 85%, transparent 100%);
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1.5px)
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: eaSpin 3.5s linear infinite;
}
.ea_Badges {
  display: flex;
  gap: 5px;
}
.ea_Badges i {
  width: 18px;
  height: 22px;
  background: rgb(var(--yt-400-rgb) / 0.25);
  clip-path: polygon(50% 0, 100% 22%, 100% 70%, 50% 100%, 0 70%, 0 22%);
  animation: eaGlint 3s ease-in-out infinite;
}
.ea_Badges i:nth-child(2) {
  animation-delay: 0.4s;
}
.ea_Badges i:nth-child(3) {
  animation-delay: 0.8s;
}
@keyframes eaGlint {
  0%,
  70%,
  100% {
    background: rgb(var(--yt-400-rgb) / 0.25);
  }
  35% {
    background: var(--yt-400);
  }
}
@keyframes eaSpin {
  to {
    transform: rotate(360deg);
  }
}

/* 200+ engagements globally — spinning wireframe globe */
.ea_Globe {
  width: 58px;
  height: 58px;
}
.ea_Globe ellipse,
.ea_Globe circle.ea_Globe_Rim,
.ea_Globe path {
  fill: none;
  stroke: rgb(var(--yt-400-rgb) / 0.55);
  stroke-width: 1;
}
.ea_Globe .ea_Meridian {
  transform-origin: 29px 29px;
  animation: eaMeridian 4s linear infinite;
}
.ea_Globe .ea_Meridian:nth-of-type(2) {
  animation-delay: -2s;
}
.ea_Globe .ea_Pin {
  fill: var(--yt-300);
  animation: eaBlinkDot 2.4s ease-in-out infinite;
}
.ea_Globe .ea_Pin:nth-of-type(2) {
  animation-delay: 0.8s;
}
.ea_Globe .ea_Pin:nth-of-type(3) {
  animation-delay: 1.6s;
}
@keyframes eaMeridian {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.05);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes eaBlinkDot {
  50% {
    opacity: 0.2;
  }
}

/* 262,000+ technologies — lifecycle strip with a moving "now" marker */
.ea_Life {
  position: relative;
  width: 110px;
  height: 10px;
  display: flex;
  gap: 3px;
}
.ea_Life i {
  flex: 1;
  border-radius: 3px;
}
.ea_Life i:nth-child(1) {
  background: rgb(var(--yt-400-rgb) / 0.35);
}
.ea_Life i:nth-child(2) {
  background: var(--yt-400);
}
.ea_Life i:nth-child(3) {
  background: var(--yt-500);
}
.ea_Life i:nth-child(4) {
  background: rgb(255 255 255 / 0.12);
  border: 1px dashed rgb(var(--yt-400-rgb) / 0.6);
}
.ea_Life::after {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 10px #fff;
  animation: eaNow 5s ease-in-out infinite alternate;
}
@keyframes eaNow {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 2px);
  }
}

/* ---------- AMBIENT BACKGROUND — same recipe as the other sections ---------- */
.ea_Bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ea_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.ea_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -16%;
  right: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: eaDriftA 28s ease-in-out infinite alternate;
}
.ea_Blob--b {
  width: 38vw;
  height: 38vw;
  max-width: 600px;
  max-height: 600px;
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
  animation: eaDriftB 34s ease-in-out infinite alternate;
}
.ea_Blob--c {
  width: 28vw;
  height: 28vw;
  max-width: 440px;
  max-height: 440px;
  top: 44%;
  left: 40%;
  background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
  animation: eaDriftC 40s ease-in-out infinite alternate;
}
@keyframes eaDriftA {
  to {
    transform: translate(-16vw, 20vh) scale(1.15);
  }
}
@keyframes eaDriftB {
  to {
    transform: translate(18vw, -14vh) scale(0.9);
  }
}
@keyframes eaDriftC {
  to {
    transform: translate(-20vw, -12vh) scale(1.25);
  }
}
.ea_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.ea_Dots--lit {
  background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
  -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  animation: eaDotSweep 9s linear infinite;
  opacity: 0.6;
}
@keyframes eaDotSweep {
  from {
    -webkit-mask-position: 150% 0;
    mask-position: 150% 0;
  }
  to {
    -webkit-mask-position: -50% 0;
    mask-position: -50% 0;
  }
}
.ea_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
  animation: eaFade 6s ease-in-out infinite;
}
@keyframes eaFade {
  50% {
    opacity: 0.45;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
  .ea_Grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "body body"
      "cons cert"
      "eng  tech"
      "out  out";
  }
  .ea_Grid .ea_Stat {
    min-height: 220px;
  }
  .ea_Grid .ea_Out {
    min-height: 300px;
  }
}
@media (max-width: 576px) {
  .ea_Sec {
    padding: 72px 0;
  }
  .ea_Sec .common_Title {
    margin-bottom: 36px;
  }
  .ea_Grid {
    grid-template-columns: 1fr;
    grid-template-areas: "body" "cons" "cert" "eng" "tech" "out";
  }
  .ea_Grid .bt {
    padding: 26px 24px;
  }
  .ea_Body {
    padding: 10px 10px 26px !important;
  }
  .ea_Body p {
    padding: 0 14px;
  }
  .ea_Photo {
    height: 180px;
  }
  .ea_Grid .ea_Stat {
    min-height: 200px;
  }
  .ea_Blob {
    filter: blur(60px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ea_Dots--lit,
  .ea_Photo_Scan {
    display: none;
  }
}

.sap-leanix .infographics_PostAdhoc {
  padding: 4rem 0 0;
}
.sap-leanix .infographics_PostAdhoc .marquee-swiper {
  margin-top: 2rem;
}

/* ==========================================================================
   34. WalkMe partner — bento grid (.wm_*)
   Used on: WalkMe
   ========================================================================== */
.wm_Sec {
  position: relative;
  isolation: isolate;
  background: var(--black);
  padding: 110px 0;
  overflow: hidden;
}
.wm_Sec > .container {
  position: relative;
  z-index: 1;
}
.wm_Sec .common_Title {
  color: #fff;
  max-width: 30ch;
  margin: 0 0 56px;
  text-wrap: balance;
}

.wm_Grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto minmax(240px, auto) minmax(250px, auto) auto;
  grid-template-areas:
    "intro intro ui    ui"
    "s30   s20   ui    ui"
    "fric  fric  track track"
    "cta   cta   cta   cta";
  gap: 14px;
}
.wm_Intro {
  grid-area: intro;
}
.wm_Ui {
  grid-area: ui;
}
.wm_S30 {
  grid-area: s30;
}
.wm_S20 {
  grid-area: s20;
}
.wm_Fric {
  grid-area: fric;
}
.wm_Track {
  grid-area: track;
}
.wm_Cta {
  grid-area: cta;
}

.wm_Grid .bt {
  --mx: -500px;
  --my: -500px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 28px 30px;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.wm_Grid .bt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  z-index: 3;
  background: radial-gradient(
    340px circle at var(--mx) var(--my),
    rgb(var(--yt-400-rgb) / 0.95),
    transparent 45%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.wm_Grid .bt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    520px circle at var(--mx) var(--my),
    rgb(var(--yt-600-rgb) / 0.16),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .wm_Grid:hover .bt::before,
  .wm_Grid:hover .bt::after {
    opacity: 1;
  }
}
.wm_Grid .bt p {
  color: rgb(255 255 255 / 0.68);
}

.wm_Icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  background: rgb(var(--yt-600-rgb) / 0.18);
  border: 1px solid rgb(var(--yt-400-rgb) / 0.35);
  color: var(--yt-300);
}
.wm_Icon svg {
  width: 24px;
  height: 24px;
}
.wm_Icon--sm {
  width: 40px;
  height: 40px;
}
.wm_Icon--sm svg {
  width: 19px;
  height: 19px;
}

/* ---------- Intro */
.wm_Intro {
  justify-content: center;
  padding: 34px 36px !important;
}
.wm_Intro p {
  font-size: clamp(1.1rem, 1.35vw, 1.35rem) !important;
  font-weight: 300;
  line-height: 1.6 !important;
  color: rgb(255 255 255 / 0.84) !important;
  max-width: 52ch;
}
.wm_Intro_Mark {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 22px;
  background: linear-gradient(90deg, var(--yt-600), var(--yt-400));
}

/* ---------- SAP screen with a WalkMe guide walking through it */
.wm_Ui {
  padding: 22px !important;
  background:
    radial-gradient(90% 70% at 100% 0%, rgb(var(--yt-600-rgb) / 0.3), transparent 60%),
    linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015)) !important;
}
.wm_Screen {
  position: relative;
  flex: 1;
  min-height: 360px;
  border-radius: 18px;
  overflow: hidden;
  background: #0c0817;
  border: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: 0 30px 60px -30px rgb(var(--yt-600-rgb) / 0.6);
  display: flex;
  flex-direction: column;
}
.wm_Chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  flex: none;
}
.wm_Chrome i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
}
.wm_Chrome b {
  flex: 1;
  max-width: 220px;
  height: 14px;
  margin-left: 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
}
.wm_App {
  flex: 1;
  display: grid;
  grid-template-columns: 56px 1fr;
  min-height: 0;
}
.wm_Side {
  border-right: 1px solid rgb(255 255 255 / 0.06);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.wm_Side i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgb(255 255 255 / 0.07);
}
.wm_Side i:first-child {
  background: rgb(var(--yt-600-rgb) / 0.6);
}
.wm_Main {
  padding: 22px 24px;
  position: relative;
}
.wm_Head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.wm_Head i {
  height: 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.2);
  width: 38%;
}
.wm_Head b {
  height: 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.07);
  width: 18%;
}

.wm_Form {
  position: relative;
}
.wm_Row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
}
.wm_Row i {
  width: 24%;
  height: 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  flex: none;
}
.wm_Row b {
  flex: 1;
  height: 32px;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.08);
}

/* Highlight ring + balloon + cursor move through fields 1 → 2 → 3 */
.wm_Ring,
.wm_Balloon,
.wm_Cursor {
  position: absolute;
  animation: wmStep 9s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
.wm_Ring {
  top: 6px;
  left: calc(24% + 12px);
  right: 0;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--yt-400);
  box-shadow:
    0 0 0 4px rgb(var(--yt-600-rgb) / 0.25),
    0 0 24px rgb(var(--yt-600-rgb) / 0.55);
}
.wm_Balloon {
  top: 50px;
  left: calc(24% + 12px);
  width: min(210px, 70%);
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 30px -10px rgb(0 0 0 / 0.6);
  animation-name: wmStep, wmFade;
  z-index: 2;
}
.wm_Balloon::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 2px;
}
.wm_Balloon i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--yt-200);
  margin-bottom: 7px;
}
.wm_Balloon i:nth-child(2) {
  width: 70%;
}
.wm_Balloon span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.wm_Balloon span em {
  display: flex;
  gap: 4px;
}
.wm_Balloon span em u {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yt-200);
}
.wm_Balloon span em u:nth-child(1) {
  animation: wmDot1 9s steps(1) infinite;
}
.wm_Balloon span em u:nth-child(2) {
  animation: wmDot2 9s steps(1) infinite;
}
.wm_Balloon span em u:nth-child(3) {
  animation: wmDot3 9s steps(1) infinite;
}
.wm_Balloon span b {
  width: 44px;
  height: 18px;
  border-radius: 999px;
  background: var(--yt-600);
}
.wm_Cursor {
  top: 20px;
  right: 18%;
  width: 18px;
  height: 18px;
  z-index: 3;
  animation-name: wmStep, wmClick;
}
@keyframes wmStep {
  0%,
  28% {
    transform: translateY(0);
  }
  33%,
  61% {
    transform: translateY(48px);
  }
  66%,
  94% {
    transform: translateY(96px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes wmFade {
  0%,
  3% {
    opacity: 0;
  }
  7%,
  27% {
    opacity: 1;
  }
  31%,
  36% {
    opacity: 0;
  }
  40%,
  60% {
    opacity: 1;
  }
  64%,
  69% {
    opacity: 0;
  }
  73%,
  93% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes wmClick {
  0%,
  14% {
    scale: 1;
  }
  17% {
    scale: 0.8;
  }
  20%,
  47% {
    scale: 1;
  }
  50% {
    scale: 0.8;
  }
  53%,
  80% {
    scale: 1;
  }
  83% {
    scale: 0.8;
  }
  86%,
  100% {
    scale: 1;
  }
}
@keyframes wmDot1 {
  0% {
    background: var(--yt-600);
  }
  33% {
    background: var(--yt-200);
  }
}
@keyframes wmDot2 {
  0% {
    background: var(--yt-200);
  }
  33% {
    background: var(--yt-600);
  }
  66% {
    background: var(--yt-200);
  }
}
@keyframes wmDot3 {
  0% {
    background: var(--yt-200);
  }
  66% {
    background: var(--yt-600);
  }
}

/* WalkMe launcher in the corner */
.wm_Launch {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--yt-600);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 10px 24px -6px rgb(var(--yt-600-rgb) / 0.8);
}
.wm_Launch svg {
  width: 20px;
  height: 20px;
}
.wm_Launch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--yt-400);
  animation: wmRipple 2.4s ease-out infinite;
}
@keyframes wmRipple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* ---------- Stat tiles */
.wm_Stat {
  justify-content: space-between;
  container-type: inline-size;
}
.wm_Stat_Top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.wm_Figure {
  display: block;
  font-weight: 200;
  font-size: clamp(2.8rem, 28cqi, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 10px;
}
.wm_Figure sup {
  font-size: 0.5em;
  top: -0.72em;
  margin-left: 0.04em;
  font-weight: 300;
  color: var(--yt-400);
}

/* 30+ — change curve: a dip, then adoption climbs */
.wm_Curve {
  width: 96px;
  height: 40px;
  overflow: visible;
}
.wm_Curve path {
  fill: none;
  stroke: var(--yt-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 130;
  animation: wmDraw 4s ease-in-out infinite;
}
.wm_Curve circle {
  fill: #fff;
  offset-path: path("M2 14 C 20 14, 26 36, 44 34 S 76 6, 94 4");
  animation: wmRide 4s ease-in-out infinite;
}
@keyframes wmDraw {
  0% {
    stroke-dashoffset: 130;
  }
  60%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes wmRide {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    offset-distance: 100%;
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

/* 20+ — build blocks stacking */
.wm_Blocks {
  display: grid;
  grid-template-columns: repeat(3, 14px);
  grid-auto-rows: 14px;
  gap: 4px;
  transform: rotate(180deg);
}
.wm_Blocks i {
  border-radius: 4px;
  background: rgb(var(--yt-400-rgb) / 0.2);
  animation: wmBuild 4.5s ease-in-out infinite;
}
.wm_Blocks i:nth-child(2) {
  animation-delay: 0.25s;
}
.wm_Blocks i:nth-child(3) {
  animation-delay: 0.5s;
}
.wm_Blocks i:nth-child(4) {
  animation-delay: 0.75s;
}
.wm_Blocks i:nth-child(5) {
  animation-delay: 1s;
}
.wm_Blocks i:nth-child(6) {
  animation-delay: 1.25s;
}
@keyframes wmBuild {
  0%,
  10% {
    background: rgb(var(--yt-400-rgb) / 0.2);
  }
  25%,
  75% {
    background: var(--yt-400);
  }
  90%,
  100% {
    background: rgb(var(--yt-400-rgb) / 0.2);
  }
}
.wm_Gear svg {
  animation: wmSpin 10s linear infinite;
}
@keyframes wmSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Friction points, not a feature list */
.wm_Fric {
  flex-direction: row !important;
  align-items: stretch;
  gap: 26px;
}
.wm_Fric_Copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.wm_Fric_Copy h4 {
  font-size: clamp(1.3rem, 1.75vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin: 0;
  max-width: 20ch;
}
.wm_Fric_Vis {
  flex: none;
  width: 46%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.wm_Feat {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  width: calc(100% - 96px);
}
.wm_Feat i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid rgb(255 255 255 / 0.25);
  flex: none;
}
.wm_Feat b {
  height: 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
}
.wm_Feat::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.5px;
  width: 100%;
  background: rgb(var(--yt-400-rgb) / 0.7);
  transform-origin: left;
  transform: scaleX(0);
  animation: wmStrike 6s ease-in-out infinite;
}
.wm_Feat:nth-child(1) b {
  width: 70%;
}
.wm_Feat:nth-child(1)::after {
  width: calc(70% + 24px);
}
.wm_Feat:nth-child(2) b {
  width: 55%;
}
.wm_Feat:nth-child(2)::after {
  width: calc(55% + 24px);
  animation-delay: 0.35s;
}
.wm_Feat:nth-child(3) b {
  width: 80%;
}
.wm_Feat:nth-child(3)::after {
  width: calc(80% + 24px);
  animation-delay: 0.7s;
}
.wm_Feat:nth-child(4) b {
  width: 48%;
}
.wm_Feat:nth-child(4)::after {
  width: calc(48% + 24px);
  animation-delay: 1.05s;
}
@keyframes wmStrike {
  0%,
  10% {
    transform: scaleX(0);
  }
  25%,
  80% {
    transform: scaleX(1);
  }
  95%,
  100% {
    transform: scaleX(0);
  }
}
/* The one real friction point, targeted */
.wm_Target {
  position: absolute;
  right: 4%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
}
.wm_Target::before,
.wm_Target::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--yt-400);
  animation: wmRipple 2.4s ease-out infinite;
}
.wm_Target::after {
  animation-delay: 1.2s;
}
.wm_Target span {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--yt-400);
  box-shadow: 0 0 20px rgb(var(--yt-400-rgb) / 0.9);
}

/* ---------- Track record: adoption up, tickets down, ROI up */
.wm_Track {
  justify-content: space-between;
  gap: 24px;
}
.wm_Kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.wm_Kpi {
  border-radius: 18px;
  padding: 14px;
  background: rgb(255 255 255 / 0.03);
  border: 1px solid rgb(255 255 255 / 0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wm_Kpi svg.wm_Chart {
  width: 100%;
  height: 44px;
  overflow: visible;
}
.wm_Chart .ln {
  fill: none;
  stroke: var(--yt-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 140;
  animation: wmDraw 5s ease-in-out infinite;
}
.wm_Chart .ar {
  fill: url(#wmFill);
}
.wm_Chart rect {
  fill: rgb(var(--yt-400-rgb) / 0.35);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: wmShrink 5s ease-in-out infinite;
}
.wm_Chart rect:last-of-type {
  fill: var(--yt-400);
}
.wm_Chart rect:nth-of-type(2) {
  animation-delay: 0.15s;
}
.wm_Chart rect:nth-of-type(3) {
  animation-delay: 0.3s;
}
.wm_Chart rect:nth-of-type(4) {
  animation-delay: 0.45s;
}
.wm_Chart rect:nth-of-type(5) {
  animation-delay: 0.6s;
}
@keyframes wmShrink {
  0% {
    transform: scaleY(0);
  }
  25%,
  85% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}
.wm_Chart .coin {
  fill: var(--yt-400);
  animation: wmCoin 2.6s ease-in-out infinite;
  transform-box: fill-box;
}
.wm_Chart .coin:nth-of-type(2) {
  animation-delay: 0.35s;
}
.wm_Chart .coin:nth-of-type(3) {
  animation-delay: 0.7s;
}
@keyframes wmCoin {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(-5px);
    opacity: 1;
  }
}
.wm_Track p {
  max-width: 52ch;
}

/* ---------- CTA banner */
.wm_Cta {
  background: var(--yt-ramp-gradient) !important;
  border-color: transparent !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 38px 40px !important;
  text-decoration: none;
}
.wm_Cta p {
  font-size: clamp(1.25rem, 1.9vw, 1.9rem) !important;
  font-weight: 300;
  line-height: 1.35 !important;
  letter-spacing: -0.4px;
  color: #fff !important;
  max-width: 40ch;
}
.wm_Cta_Go {
  flex: none;
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--yt-700);
  display: grid;
  place-items: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wm_Cta_Go svg {
  width: 26px;
  height: 26px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wm_Cta_Go::before,
.wm_Cta_Go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.6);
  animation: wmRipple 2.8s ease-out infinite;
}
.wm_Cta_Go::after {
  animation-delay: 1.4s;
}
.wm_Cta:hover .wm_Cta_Go,
.wm_Cta:focus-visible .wm_Cta_Go {
  transform: scale(1.06);
}
.wm_Cta:hover .wm_Cta_Go svg,
.wm_Cta:focus-visible .wm_Cta_Go svg {
  transform: translateX(4px);
}
.wm_Cta:focus-visible {
  outline: 2px solid var(--yt-300);
  outline-offset: 4px;
}
/* Flowing lines behind the CTA */
.wm_Waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.35;
}
.wm_Waves path {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 6 10;
  animation: wmFlow 3s linear infinite;
}
.wm_Waves path:nth-child(2) {
  opacity: 0.6;
  animation-duration: 4s;
}
.wm_Waves path:nth-child(3) {
  opacity: 0.35;
  animation-duration: 5s;
}
@keyframes wmFlow {
  to {
    stroke-dashoffset: -32;
  }
}

/* ---------- AMBIENT BACKGROUND — same recipe as the other sections ---------- */
.wm_Bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.wm_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.wm_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -16%;
  right: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: wmDriftA 28s ease-in-out infinite alternate;
}
.wm_Blob--b {
  width: 38vw;
  height: 38vw;
  max-width: 600px;
  max-height: 600px;
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
  animation: wmDriftB 34s ease-in-out infinite alternate;
}
.wm_Blob--c {
  width: 28vw;
  height: 28vw;
  max-width: 440px;
  max-height: 440px;
  top: 44%;
  left: 40%;
  background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
  animation: wmDriftC 40s ease-in-out infinite alternate;
}
@keyframes wmDriftA {
  to {
    transform: translate(-16vw, 20vh) scale(1.15);
  }
}
@keyframes wmDriftB {
  to {
    transform: translate(18vw, -14vh) scale(0.9);
  }
}
@keyframes wmDriftC {
  to {
    transform: translate(-20vw, -12vh) scale(1.25);
  }
}
.wm_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.wm_Dots--lit {
  background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
  -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  animation: wmDotSweep 9s linear infinite;
  opacity: 0.6;
}
@keyframes wmDotSweep {
  from {
    -webkit-mask-position: 150% 0;
    mask-position: 150% 0;
  }
  to {
    -webkit-mask-position: -50% 0;
    mask-position: -50% 0;
  }
}
.wm_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
  animation: wmFade2 6s ease-in-out infinite;
}
@keyframes wmFade2 {
  50% {
    opacity: 0.45;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
  .wm_Grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "intro intro"
      "ui    ui"
      "s30   s20"
      "fric  fric"
      "track track"
      "cta   cta";
  }
  .wm_Grid .wm_Stat {
    min-height: 220px;
  }
}
@media (max-width: 576px) {
  .wm_Sec {
    padding: 72px 0;
  }
  .wm_Sec .common_Title {
    margin-bottom: 36px;
  }
  .wm_Grid {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "ui" "s30" "s20" "fric" "track" "cta";
  }
  .wm_Grid .bt {
    padding: 26px 24px;
  }
  .wm_Intro {
    padding: 28px 24px !important;
  }
  .wm_Ui {
    padding: 12px !important;
  }
  .wm_App {
    grid-template-columns: 40px 1fr;
  }
  .wm_Main {
    padding: 18px 16px;
  }
  .wm_Fric {
    flex-direction: column !important;
  }
  .wm_Fric_Vis {
    width: 100%;
    min-height: 130px;
  }
  .wm_Kpis {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .wm_Kpi {
    padding: 10px;
  }
  .wm_Kpi .wm_Icon--sm {
    width: 34px;
    height: 34px;
  }
  .wm_Cta {
    flex-direction: column !important;
    align-items: flex-start;
    padding: 30px 26px !important;
  }
  .wm_Grid .wm_Stat {
    min-height: 200px;
  }
  .wm_Blob {
    filter: blur(60px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm_Dots--lit {
    display: none;
  }
  .wm_Feat::after {
    transform: scaleX(1);
  }
}

/* ==========================================================================
   35. Bento tiles — shared tile recipe (.bt)
   Used on: Business AI, Signavio, LeanIX, WalkMe, RISE

   Radii step down with depth: tile 28px → photo/stage 18px → icon chip 999px.
   ========================================================================== */
.bt {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
}
.bt p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   36. What this means for CFOs / CIOs — bento grid (.wf_*)
   Used on: RISE with SAP migration

   Left half = CFOs, right half = CIOs. Each half: a tall photo tile
   carrying the role, and its three points stacked beside it.
   ========================================================================== */
.wf_Sec {
  position: relative;
  isolation: isolate;
  background: var(--black);
  padding: 110px 0;
  overflow: hidden;
}
.wf_Sec > .container {
  position: relative;
  z-index: 1;
}
.wf_Sec .common_Title {
  color: #fff;
  margin: 0 0 56px;
}

.wf_Grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "cfo c1 cio i1"
    "cfo c2 cio i2"
    "cfo c3 cio i3";
  gap: 14px;
}
/* The <ul>s step aside so their <li>s sit directly in the grid */
.wf_List {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wf_Cfo {
  grid-area: cfo;
}
.wf_Cio {
  grid-area: cio;
}
.wf_C1 {
  grid-area: c1;
}
.wf_C2 {
  grid-area: c2;
}
.wf_C3 {
  grid-area: c3;
}
.wf_I1 {
  grid-area: i1;
}
.wf_I2 {
  grid-area: i2;
}
.wf_I3 {
  grid-area: i3;
}

.wf_Grid .bt {
  --mx: -500px;
  --my: -500px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
}
.wf_Grid .bt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  z-index: 3;
  background: radial-gradient(
    340px circle at var(--mx) var(--my),
    rgb(var(--yt-400-rgb) / 0.95),
    transparent 45%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.wf_Grid .bt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    520px circle at var(--mx) var(--my),
    rgb(var(--yt-600-rgb) / 0.16),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .wf_Grid:hover .bt::before,
  .wf_Grid:hover .bt::after {
    opacity: 1;
  }
}

/* ---------- Role tiles: full-bleed photo, role name at the foot */
.wf_Role {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 26px 24px;
  min-height: 420px;
}
.wf_Role img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: wfKenBurns 26s ease-in-out infinite alternate;
}
.wf_Cio img {
  animation-direction: alternate-reverse;
  transform-origin: 70% 40%;
}
@keyframes wfKenBurns {
  from {
    transform: scale(1.03);
  }
  to {
    transform: scale(1.15) translate(-1.5%, -1%);
  }
}
.wf_Role_Shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(200deg, rgb(var(--yt-600-rgb) / 0.4) 0%, transparent 50%),
    linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 0.9));
}
.wf_Cio .wf_Role_Shade {
  background:
    linear-gradient(160deg, rgb(var(--yt-600-rgb) / 0.4) 0%, transparent 50%),
    linear-gradient(180deg, transparent 35%, rgb(0 0 0 / 0.9));
}
.wf_Role h3 {
  margin: 0;
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.05;
  color: #fff;
}
.wf_Role_Rule {
  display: block;
  height: 2px;
  width: 72px;
  margin-top: 16px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.2);
  overflow: hidden;
  position: relative;
}
.wf_Role_Rule::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--yt-400), transparent);
  animation: wfSlide 2.8s ease-in-out infinite;
}
@keyframes wfSlide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

/* Floating glass panel on each role photo */
.wf_Glass {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgb(0 0 0 / 0.32);
  border: 1px solid rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: wfBob 6s ease-in-out infinite;
}
.wf_Cio .wf_Glass {
  animation-delay: -3s;
}
@keyframes wfBob {
  50% {
    transform: translateY(-5px);
  }
}
/* CFO: ledger bars settling into a steady line */
.wf_Ledger {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 54px;
}
.wf_Ledger i {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: rgb(var(--yt-400-rgb) / 0.35);
  animation: wfSteady 5s ease-in-out infinite;
  transform-origin: bottom;
}
.wf_Ledger i:nth-child(1) {
  --h0: 0.9;
  animation-delay: 0s;
}
.wf_Ledger i:nth-child(2) {
  --h0: 0.35;
  animation-delay: 0.1s;
}
.wf_Ledger i:nth-child(3) {
  --h0: 1;
  animation-delay: 0.2s;
}
.wf_Ledger i:nth-child(4) {
  --h0: 0.45;
  animation-delay: 0.3s;
}
.wf_Ledger i:nth-child(5) {
  --h0: 0.8;
  animation-delay: 0.4s;
}
.wf_Ledger i:nth-child(6) {
  --h0: 0.3;
  animation-delay: 0.5s;
}
.wf_Ledger i:nth-child(7) {
  --h0: 0.95;
  animation-delay: 0.6s;
  background: var(--yt-400);
}
.wf_Ledger i {
  height: 100%;
}
@keyframes wfSteady {
  0%,
  100% {
    transform: scaleY(var(--h0));
  }
  40%,
  75% {
    transform: scaleY(0.62);
  }
}
/* CIO: a live system pulse that never drops */
.wf_Pulse {
  display: block;
  width: 100%;
  height: 54px;
  overflow: visible;
}
.wf_Pulse path {
  fill: none;
  stroke: var(--yt-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60 240;
  animation: wfBeat 2.6s linear infinite;
}
.wf_Pulse .base {
  stroke: rgb(255 255 255 / 0.14);
  stroke-dasharray: none;
  animation: none;
}
.wf_Pulse circle {
  fill: #7ee2a8;
  animation: wfLive 1.4s ease-in-out infinite;
}
@keyframes wfBeat {
  from {
    stroke-dashoffset: 300;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes wfLive {
  50% {
    opacity: 0.3;
  }
}

/* ---------- Point tiles */
.wf_Point {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px 22px;
}
.wf_Point p {
  margin: 0;
  font-size: clamp(0.98rem, 1.05vw, 1.06rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.1px;
  color: rgb(255 255 255 / 0.8);
}
.wf_Mini {
  display: block;
  height: 36px;
  width: 115px;
  overflow: visible;
  color: var(--yt-400);
  flex: none;
}
.wf_Mini * {
  vector-effect: non-scaling-stroke;
}

/* c1 — audit checklist ticking */
.wf_Audit rect {
  fill: rgb(255 255 255 / 0.1);
}
.wf_Audit path {
  fill: none;
  stroke: var(--yt-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12;
  animation: wfTick 5s ease-in-out infinite;
}
.wf_Audit path:nth-of-type(2) {
  animation-delay: 0.4s;
}
.wf_Audit path:nth-of-type(3) {
  animation-delay: 0.8s;
}
@keyframes wfTick {
  0%,
  10% {
    stroke-dashoffset: 12;
  }
  25%,
  85% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 12;
  }
}
/* c2 — a jagged cost line smoothing out */
.wf_Cost path {
  fill: none;
  stroke: var(--yt-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wf_Cost .jag {
  stroke: rgb(255 255 255 / 0.2);
  animation: wfFadeOut 5s ease-in-out infinite;
}
.wf_Cost .flat {
  stroke-dasharray: 100;
  animation: wfDraw 5s ease-in-out infinite;
}
@keyframes wfFadeOut {
  0%,
  30% {
    opacity: 1;
  }
  55%,
  85% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes wfDraw {
  0%,
  20% {
    stroke-dashoffset: 100;
  }
  55%,
  85% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 100;
  }
}
/* c3 — exposure gauge swinging to low */
.wf_Gauge .trk {
  fill: none;
  stroke: rgb(255 255 255 / 0.14);
  stroke-width: 4;
  stroke-linecap: round;
}
.wf_Gauge .ndl {
  transform-origin: 20px 26px;
  animation: wfNeedle 5s ease-in-out infinite;
}
.wf_Gauge .ndl line {
  stroke: var(--yt-400);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.wf_Gauge .ndl circle {
  fill: #fff;
}
.wf_Gauge .dn {
  fill: none;
  stroke: var(--yt-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: wfDrop 5s ease-in-out infinite;
}
@keyframes wfNeedle {
  0%,
  10% {
    transform: rotate(70deg);
  }
  45%,
  85% {
    transform: rotate(-70deg);
  }
  100% {
    transform: rotate(70deg);
  }
}
@keyframes wfDrop {
  0%,
  20% {
    transform: translateY(-3px);
    opacity: 0.3;
  }
  45%,
  85% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(-3px);
    opacity: 0.3;
  }
}
/* i1 — shared accountability: two parties, signal both ways */
.wf_Share line {
  stroke: rgb(255 255 255 / 0.18);
  stroke-width: 2;
  stroke-dasharray: 3 4;
}
.wf_Share .end {
  fill: none;
  stroke: var(--yt-400);
  stroke-width: 2;
}
.wf_Share .end.b {
  fill: var(--yt-400);
}
.wf_Share .pk {
  fill: #fff;
  animation: wfShuttle 2.8s ease-in-out infinite;
}
.wf_Share .pk.b {
  fill: var(--yt-300);
  animation-delay: -1.4s;
}
@keyframes wfShuttle {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(46px);
  }
}
/* i2 — live system: heartbeat never breaks */
.wf_Live path {
  fill: none;
  stroke: var(--yt-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40 160;
  animation: wfBeat2 2.2s linear infinite;
}
.wf_Live .base {
  stroke: rgb(255 255 255 / 0.14);
  stroke-dasharray: none;
  animation: none;
}
.wf_Live circle {
  fill: #7ee2a8;
  animation: wfLive 1.4s ease-in-out infinite;
}
@keyframes wfBeat2 {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* i3 — controlled pace, step by step, to a future-ready spark */
.wf_Pace .trk {
  fill: none;
  stroke: rgb(255 255 255 / 0.16);
  stroke-width: 2;
  stroke-dasharray: 3 4;
}
.wf_Pace .run {
  fill: none;
  stroke: var(--yt-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120;
  animation: wfClimb 6s ease-in-out infinite;
}
.wf_Pace .spark {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  animation: wfSpark 6s ease-in-out infinite;
}
@keyframes wfClimb {
  0% {
    stroke-dashoffset: 120;
  }
  55%,
  85% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 120;
  }
}
@keyframes wfSpark {
  0%,
  50% {
    transform: scale(0.4);
    opacity: 0.3;
  }
  60% {
    transform: scale(1.25);
    opacity: 1;
  }
  66%,
  85% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.4);
    opacity: 0.3;
  }
}

/* ---------- AMBIENT BACKGROUND — same recipe as the LeanIX section ---------- */
.wf_Bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.wf_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.wf_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -16%;
  right: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: wfDriftA 28s ease-in-out infinite alternate;
}
.wf_Blob--b {
  width: 38vw;
  height: 38vw;
  max-width: 600px;
  max-height: 600px;
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
  animation: wfDriftB 34s ease-in-out infinite alternate;
}
.wf_Blob--c {
  width: 28vw;
  height: 28vw;
  max-width: 440px;
  max-height: 440px;
  top: 44%;
  left: 40%;
  background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
  animation: wfDriftC 40s ease-in-out infinite alternate;
}
@keyframes wfDriftA {
  to {
    transform: translate(-16vw, 20vh) scale(1.15);
  }
}
@keyframes wfDriftB {
  to {
    transform: translate(18vw, -14vh) scale(0.9);
  }
}
@keyframes wfDriftC {
  to {
    transform: translate(-20vw, -12vh) scale(1.25);
  }
}
.wf_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.wf_Dots--lit {
  background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
  -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  animation: wfDotSweep 9s linear infinite;
  opacity: 0.6;
}
@keyframes wfDotSweep {
  from {
    -webkit-mask-position: 150% 0;
    mask-position: 150% 0;
  }
  to {
    -webkit-mask-position: -50% 0;
    mask-position: -50% 0;
  }
}
.wf_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
  animation: wfFade 6s ease-in-out infinite;
}
@keyframes wfFade {
  50% {
    opacity: 0.45;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
  .wf_Grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "cfo c1"
      "cfo c2"
      "cfo c3"
      "cio i1"
      "cio i2"
      "cio i3";
  }
  .wf_Role {
    min-height: 380px;
  }
}
@media (max-width: 767px) {
  .wf_Grid {
    grid-template-columns: 1fr;
    grid-template-areas: "cfo" "c1" "c2" "c3" "cio" "i1" "i2" "i3";
  }
  .wf_Role {
    min-height: 300px;
  }
  .wf_Cio {
    margin-top: 18px;
  }
}
@media (max-width: 576px) {
  .wf_Sec {
    padding: 72px 0;
  }
  .wf_Sec .common_Title {
    margin-bottom: 36px;
  }
  .wf_Blob {
    filter: blur(60px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .wf_Dots--lit {
    display: none;
  }
}

/* ==========================================================================
   37. Featured solution — Demand-to-Delivery Intelligence (.fs_*)
   Used on: SAP Data & Analytics (ACF adhoc block)

   Left: copy, 3 stats with top rule + column dividers, CTAs.
   Right: 16:9 video frame. Ships as a placeholder; a <video> or <iframe>
   dropped inside .fs_Video fills the frame.
   ========================================================================== */
.fs_Sec {
  position: relative;
  isolation: isolate;
  background: var(--black);
  color: var(--text-on-dark-body);
  padding: var(--section-y) 0;
  overflow: hidden;
}
.fs_Sec .common_Title {
  color: #fff;
  margin: 0 0 var(--sp-5);
}
/* sap.css § 01 sets every <p> to dark text */
.fs_Sec p {
  color: var(--text-on-dark-body);
}
/* After the <p> reset so the eyebrow keeps its accent on black */
.fs_Sec .common_Small_Title {
  color: var(--yt-400);
}
.fs_Nb {
  white-space: nowrap;
}

/* ---------- Stats ---------- */
.fs_Stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-dark-strong);
}
.fs_Stats > div {
  padding-right: var(--sp-5);
}
.fs_Stats > div + div {
  padding-left: var(--sp-5);
  border-left: 1px solid var(--line-dark-strong);
}
.fs_Stats dt {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1;
  color: #fff;
}
.fs_Stats dd {
  margin: 0.4rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--text-on-dark-muted);
  max-width: 14ch;
}

/* ---------- CTAs ---------- */
.fs_Ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.fs_PlayIco {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ---------- Video frame ---------- */
.fs_Video {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, #16121f, #0b0910);
  border: 1px solid var(--line-dark-strong);
  box-shadow: 0 40px 100px -40px rgb(var(--yt-600-rgb) / 0.55);
}
.fs_Video::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* Real media fills the frame */
.fs_Video > video,
.fs_Video > iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: #000;
}

.fs_Video__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  text-align: center;
}
.fs_Video__play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--yt-600);
  box-shadow: 0 0 0 10px rgb(var(--yt-600-rgb) / 0.25);
}
.fs_Video__play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
}
.fs_Sec .fs_Video__label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
}

.fs_Video__tag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  color: var(--yt-400);
  background: rgb(var(--yt-600-rgb) / 0.18);
  border: 1px solid rgb(var(--yt-400-rgb) / 0.35);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
}
.fs_Video__time {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 1;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  background: rgb(0 0 0 / 0.6);
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-xs);
}

@media (max-width: 767.98px) {
  .fs_Stats > div {
    padding-right: var(--sp-3);
  }
  .fs_Stats > div + div {
    padding-left: var(--sp-3);
  }
  .fs_Video {
    border-radius: var(--r-lg);
  }
  .fs_Video__play {
    width: 60px;
    height: 60px;
  }
  .fs_Video__meta {
    display: none;
  }
}

/* ==========================================================================
   38. Tools & accelerators (.ta_*)
   Used on: SAP Data & Analytics (ACF adhoc block)

   Two stacked cards on a subtle grey band:
     .ta_Card        light — copy + list on the left, SAC → Datasphere →
                     S/4HANA stack with its two agents on the right
     .ta_Card--dark  black — headline + claim, 4-step loop, KPI tags + CTA
   Radii step down with depth: card 32px → stack 24px → row 16px → pill.
   Note: common § 02 colours every `ul li` light grey and sap.css § 01 every
   `p` dark, so text colours are set explicitly per card below.
   ========================================================================== */
.ta_Sec {
  position: relative;
  background: var(--surface-subtle);
  color: var(--text-body);
  padding: var(--section-y) 0;
}
.ta_Head {
  margin-bottom: var(--stack-head);
}
.ta_Sec .common_Title {
  color: var(--text-strong);
  margin: 0 0 var(--sp-4);
}
.ta_Sec .ta_Lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--text-body);
  max-width: 60ch;
  margin: 0;
}

/* ---------- Card (shared) ---------- */
.ta_Card {
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  background: #fff;
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-sm);
}
.ta_Card + .ta_Card {
  margin-top: var(--sp-5);
}
.ta_Card h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
  max-width: 24ch;
  margin: 0 0 var(--sp-4);
}
.ta_Card p {
  color: var(--text-body);
  max-width: 60ch;
}
.ta_Kind {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  color: var(--yt-700);
  background: var(--yt-50);
  border: 1px solid var(--yt-200);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}
.ta_Card .yt_Listing {
  margin: var(--sp-5) 0 var(--sp-6);
}
.ta_Card .yt_Listing li {
  align-items: flex-start;
  color: var(--text-body);
  line-height: 1.5;
}
/* Bullet sits on the first line when an item wraps */
.ta_Card .yt_Listing li::before {
  flex: none;
  margin-top: 0.55em;
}

/* ---------- Architecture stack ---------- */
.ta_Pipe {
  display: grid;
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  background: var(--surface-subtle);
  border: 1px solid var(--line-light);
}
.ta_Pipe__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line-light);
}
.ta_Pipe__row b {
  font-size: var(--fs-sm);
  color: var(--text-strong);
  text-align: right;
}
.ta_Pipe__role {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
}
.ta_Pipe__row:first-child {
  background: var(--yt-600);
  border-color: var(--yt-600);
}
.ta_Pipe__row:first-child b,
.ta_Pipe__row:first-child .ta_Pipe__role {
  color: #fff;
}
/* Upward arrow between layers */
.ta_Pipe__arrow {
  position: relative;
  height: 20px;
}
.ta_Pipe__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  bottom: 3px;
  border-left: 1.5px solid var(--yt-400);
}
.ta_Pipe__arrow::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  top: 2px;
  width: 8px;
  height: 8px;
  border-left: 1.5px solid var(--yt-400);
  border-top: 1.5px solid var(--yt-400);
  transform: rotate(45deg);
}

/* ---------- Agents ---------- */
.ta_Agents {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--line-light-strong);
}
.ta_Card .ta_Agents__lead {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong);
}
.ta_Agent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-body);
}
.ta_Agent::before {
  content: "";
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--yt-300), var(--yt-600) 70%);
  box-shadow: 0 0 0 4px var(--yt-100);
}
.ta_Agent b {
  color: var(--text-strong);
}
.ta_Card .ta_Agents__foot {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------- Dark card ---------- */
.ta_Card--dark {
  background: var(--black);
  border-color: var(--black);
  color: var(--text-on-dark-body);
  box-shadow: var(--shadow-lg);
}
.ta_Card--dark h3,
.ta_Card--dark h4 {
  color: #fff;
}
.ta_Card--dark p {
  color: var(--text-on-dark-body);
}
.ta_Card--dark .ta_Kind {
  color: var(--yt-300);
  background: rgb(var(--yt-400-rgb) / 0.14);
  border-color: rgb(var(--yt-400-rgb) / 0.4);
}
.ta_Card--dark .ta_Claim {
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--text-on-dark-body);
  margin: 0 0 var(--sp-4) auto;
}
.ta_Claim b {
  color: #fff;
}

/* ---------- 4-step loop ---------- */
.ta_Loop {
  list-style: none;
  padding: 0;
  margin: var(--sp-7) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.ta_Loop li {
  position: relative;
  display: block;
  margin: 0;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line-dark);
  background: rgb(255 255 255 / 0.03);
  color: var(--text-on-dark-body);
}
/* Connector into the next step */
.ta_Loop li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.05rem;
  right: calc(var(--sp-3) * -1 - 1px);
  width: calc(var(--sp-3) + 2px);
  height: 1.5px;
  background: var(--yt-400);
  z-index: 1;
}
.ta_Loop li:last-child {
  border-color: rgb(var(--yt-400-rgb) / 0.5);
  background: rgb(var(--yt-600-rgb) / 0.2);
}
.ta_Loop__n {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--yt-400);
  color: var(--yt-300);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.ta_Loop li:last-child .ta_Loop__n {
  background: var(--yt-400);
  color: #000;
}
.ta_Loop h4 {
  font-size: var(--fs-h5);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
}
.ta_Card--dark .ta_Loop p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin: 0;
}

/* ---------- Footer: tags + CTA ---------- */
.ta_Foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-dark);
}
.ta_Card--dark .ta_Foot__lead {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-on-dark-muted);
  margin: 0 0 var(--sp-3);
}
.ta_Tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ta_Tags li {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid var(--line-dark-strong);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .ta_Loop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ta_Loop li::after {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .ta_Card--dark .ta_Claim {
    margin-left: 0;
  }
}
@media (max-width: 767.98px) {
  .ta_Loop {
    grid-template-columns: 1fr;
  }
  .ta_Card .btn {
    width: 100%;
    white-space: normal;
  }
}

/* ==========================================================================
   39. See it in action — resource list (.sa_*)
   Used on: SAP Data & Analytics (ACF adhoc block)

   Ruled list of videos, dashboards and briefs on the subtle surface.
   Each row is one link (the <a> stretches over the whole <li>); the round
   arrow chip fills on hover. One column below 992px, two from 992px.
   Note: common § 02 colours every `ul li` light grey, so row colours are
   set explicitly here.
   ========================================================================== */
.sa_Sec {
  position: relative;
  background: var(--color-bg-subtle);
  color: var(--color-heading);
  padding: var(--section-y) 0;
}
.sa_Sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sa_Sec .common_Title {
  color: var(--color-heading);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0 0 var(--stack-head);
}

/* ---------- List ---------- */
.sa_List {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.sa_Item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  margin: 0;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-heading);
  font-size: var(--fs-body);
}
.sa_Meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--color-text-muted);
}
.sa_Meta svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sa_Name {
  grid-column: 1;
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-heading);
}
.sa_Name a {
  color: var(--color-heading);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
/* Whole row is the link target */
.sa_Name a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sa_Name a:focus-visible {
  outline: none;
}
.sa_Item:focus-within {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ---------- Arrow chip ---------- */
.sa_Go {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  color: var(--color-heading);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.sa_Go svg {
  width: 16px;
  height: 16px;
  overflow: visible;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sa_Item:hover .sa_Name a {
    color: var(--color-link);
  }
  .sa_Item:hover .sa_Go {
    background: var(--color-heading);
    color: #fff;
    box-shadow: none;
  }
  .sa_Item:hover .sa_Go svg {
    transform: translate(2px, -2px); /* travels along its own diagonal */
  }
}

/* ---------- Responsive ---------- */
@media (min-width: 992px) {
  .sa_List {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
    border-top: 0;
  }
  .sa_Item:nth-child(-n + 2) {
    border-top: 1px solid var(--color-border);
  }
}
@media (max-width: 575.98px) {
  .sa_Go {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sa_Go,
  .sa_Go svg,
  .sa_Name a {
    transition: none;
  }
}

/* ==========================================================================
   40. CTA band — ink card with brand glow (.cb_*)
   Used on: SAP Data & Analytics (ACF adhoc block)

   Text left, button right from 992px; stacked below. The button is the
   DS .btn .btn-light .btn-lg from common § 03 — only its focus colour and
   phone wrapping are adjusted here.
   ========================================================================== */
.cb_Sec {
  position: relative;
  padding: var(--section-y-sm) 0;
}

/* ---------- Card ---------- */
.cb_Card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: clamp(2.5rem, 1.75rem + 4vw, 5rem);
  border-radius: var(--radius-xl);
  background: rgb(var(--ink-rgb));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.cb_Card > * {
  min-width: 0;
}
/* Brand glow */
.cb_Card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(70% 120% at 100% 0%, rgb(var(--yt-600-rgb) / 0.55), transparent 65%),
    radial-gradient(50% 80% at 0% 100%, rgb(var(--yt-400-rgb) / 0.14), transparent 70%);
}
/* Faint grid lines, fading in from the left */
.cb_Card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask: linear-gradient(90deg, transparent 30%, #000);
  mask: linear-gradient(90deg, transparent 30%, #000);
}

/* ---------- Copy ---------- */
.cb_Title {
  max-width: 20ch;
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}
/* sap.css § 01 sets every <p> to dark text */
.cb_Card .cb_Text {
  max-width: 52ch;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.72);
  text-wrap: pretty;
}

/* ---------- Button (DS .btn-light .btn-lg) ---------- */
.cb_Card .btn {
  --color-focus: var(--color-focus-inverse); /* visible outline on ink */
}

/* ---------- Responsive ---------- */
@media (min-width: 992px) {
  .cb_Card {
    grid-template-columns: 1fr auto;
    gap: var(--sp-8);
  }
}
/* Phones: the long label wraps instead of widening the card */
@media (max-width: 575.98px) {
  .cb_Card .btn {
    height: auto;
    white-space: normal;
    padding-block: var(--sp-3);
    line-height: 1.2;
    text-align: left;
  }
}

/* ==========================================================================
   41. SAP Data Migration Services — paths + services (.ms_*)
   Used on: SAP Data Migration (ACF adhoc block)

   Two image-topped path cards (S/4HANA, SuccessFactors), then a 3 × 2
   ruled grid of services. Cards get a gradient edge, top bar and tint on
   hover. Note: sap.css § 01 colours every `p` and common § 02 every `ul li`,
   so text colours are set explicitly below.
   ========================================================================== */
.ms_Sec,
.ds_Sec {
  /* Brand gradients shared by § 41 and § 42 (built from the yt ramp) */
  --dm-grad-light: linear-gradient(100deg, var(--yt-600) 0%, var(--yt-700) 55%, var(--yt-500) 100%);
  --dm-grad-dark: linear-gradient(100deg, #fff 0%, var(--yt-300) 45%, var(--yt-200) 100%);
  --dm-grad-fill: linear-gradient(135deg, var(--yt-500) 0%, var(--yt-600) 50%, var(--yt-700) 100%);
  --dm-grad-bar: linear-gradient(90deg, var(--yt-600), var(--yt-500) 55%, var(--yt-200));
  --dm-pad: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); /* path card padding */
}

.ms_Sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-subtle);
  color: var(--text-strong);
  padding: var(--section-y) 0;
}
/* Soft violet glow, left */
.ms_Sec::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -260px;
  top: 30%;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--yt-100), transparent 65%);
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- Head (shared title treatment for § 41 and § 42) ---------- */
.ms_Sec .common_Title,
.ds_Sec .common_Title {
  font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.625rem); /* long titles: smaller than the default */
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-5);
}
.ms_Sec .common_Title {
  color: var(--text-strong);
}
.ms_Sec .common_Title span {
  background: var(--dm-grad-light);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ms_Head {
  margin-bottom: var(--sp-8);
}
.ms_Sec p {
  margin-top: 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-muted);
}
.ms_Sec .ms_Intro,
.ds_Sec .ds_Intro {
  max-width: 760px;
  font-size: var(--fs-lede);
  line-height: 1.68;
}
.ms_Sec strong {
  color: var(--text-strong);
  font-weight: 700;
}

/* ---------- Path cards ---------- */
.ms_Path {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--dm-pad);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  transition:
    background 0.4s ease,
    box-shadow 0.4s var(--ease-out);
}
/* Gradient edge, shown on hover */
.ms_Path::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(var(--yt-500-rgb) / 0.9), rgb(var(--yt-600-rgb) / 0.35) 45%, rgb(var(--yt-300-rgb) / 0.8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
/* Top bar, grows from the left on hover */
.ms_Path::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 3px;
  background: var(--dm-grad-bar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}
.ms_Path:hover {
  background: linear-gradient(180deg, var(--yt-50) 0%, #fff 70%);
  box-shadow: 0 26px 60px -28px rgb(var(--yt-600-rgb) / 0.35);
}
.ms_Path:hover::before {
  opacity: 1;
}
.ms_Path:hover::after {
  transform: scaleX(1);
}

.ms_Path__media {
  position: relative;
  aspect-ratio: 15 / 8;
  overflow: hidden;
  margin: calc(var(--dm-pad) * -1) calc(var(--dm-pad) * -1) 28px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: rgb(var(--ink-rgb));
}
.ms_Path__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, rgb(16 14 28 / 0), rgb(16 14 28 / 0.55));
}
.ms_Path__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.ms_Path:hover .ms_Path__media img {
  transform: scale(1.03);
}

.ms_Path__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
  margin: 0 0 var(--sp-2);
}
.ms_Eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yt-700);
  margin-bottom: var(--sp-3);
}
.ms_Sec .ms_Path__sub {
  font-size: var(--fs-lede);
  font-weight: 600;
  margin: 0 0 var(--sp-4);
  color: var(--yt-700); /* fallback where background-clip text is unsupported */
  background: var(--dm-grad-light);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ms_Sec .ms_Path__body {
  margin-bottom: var(--sp-5);
}

/* Check list, pinned to the card bottom */
.ms_Checks {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: auto 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--n-100);
}
.ms_Checks li {
  position: relative;
  margin: 0;
  padding-left: 32px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}
.ms_Checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--dm-grad-fill);
}

/* ---------- Services grid ---------- */
.ms_Svc {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.ms_Svc__title {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
  margin: 0 0 var(--sp-5);
}
.ms_Svc__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-radius: var(--r-md);
}
.ms_Svc__list li {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 28px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--text-muted);
  transition: background-color var(--dur-fast) ease;
}
.ms_Svc__list li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--dm-grad-bar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.ms_Svc__list li:hover {
  background: linear-gradient(180deg, var(--yt-50) 0%, #fff 100%);
}
.ms_Svc__list li:hover::before {
  transform: scaleX(1);
}
.ms_Svc__num {
  display: block;
  margin-bottom: 14px;
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--yt-700);
  background: var(--dm-grad-light);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ms_Svc__name {
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-strong);
  margin: 0 0 var(--sp-2);
}
.ms_Sec .ms_Svc__list p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 991.98px) {
  .ms_Svc__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .ms_Sec::before {
    width: 420px;
    height: 420px;
  }
  .ms_Svc__list {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ms_Path,
  .ms_Path::before,
  .ms_Path::after,
  .ms_Path__media img,
  .ms_Svc__list li,
  .ms_Svc__list li::before {
    transition: none;
  }
  .ms_Path:hover .ms_Path__media img {
    transform: none;
  }
}


/* ==========================================================================
   42. Data Migration Studio — features + nine-step pipeline (.ds_*)
   Used on: SAP Data Migration (ACF adhoc block)

   Dark band: title + intro, 4 feature cards, then the pipeline panel
   (3 stages × 3 steps, AI steps in brand fill). From 992px the steps sit
   on one horizontal rail; below that each stage stacks vertically.
   Rail fill animation: ds-pipeline.js (optional). Uses the gradients
   declared at the top of § 41.
   ========================================================================== */
.ds_Sec {
  --ds-ink: #05040d;
  --ds-card: rgb(16 14 28);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--section-y) 0;
  background: linear-gradient(180deg, var(--ds-ink) 0%, #0b0820 55%, var(--ds-ink) 100%);
  color: var(--text-on-dark);
  --color-focus: var(--color-focus-inverse);
}
/* Dot grid, fading out downwards */
.ds_Sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(247 247 250 / 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%);
  mask-image: linear-gradient(180deg, #000, transparent 55%);
  pointer-events: none;
}
/* Drifting brand glow at the bottom */
.ds_Sec::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto -15% -30% -15%;
  height: 80%;
  background:
    radial-gradient(35% 50% at 25% 60%, rgb(var(--yt-600-rgb) / 0.45), transparent 70%),
    radial-gradient(30% 45% at 75% 55%, rgb(var(--yt-500-rgb) / 0.3), transparent 70%),
    radial-gradient(25% 35% at 55% 85%, rgb(var(--yt-300-rgb) / 0.14), transparent 70%);
  filter: blur(40px);
  animation: ds-drift 26s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes ds-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-4%, 3%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(3%, -2%, 0) scale(0.98);
  }
}
.ds_Sec > .container {
  position: relative;
  z-index: 2;
}

/* ---------- Head ---------- */
.ds_Sec .common_Title {
  color: #fff;
}
.ds_Sec .common_Title span {
  color: #fff;
  background: var(--dm-grad-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* sap.css § 01 sets every <p> to dark text */
.ds_Sec p {
  margin-top: 0;
  color: var(--text-on-dark-body);
}

/* ---------- Feature cards ---------- */
.ds_Feat {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-8) 0 0;
  padding: 0;
}
.ds_Feat li {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: var(--sp-5);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, rgb(36 3 100 / 0.55) 0%, rgb(16 14 28 / 0.9) 55%);
  color: var(--text-on-dark-body);
  transition:
    background 0.4s ease,
    border-color var(--dur-fast) ease;
}
/* Hairline highlight along the top edge */
.ds_Feat li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--yt-500-rgb) / 0), var(--yt-500) 40%, var(--yt-200) 70%, rgb(var(--yt-300-rgb) / 0));
}
/* Corner glow, brightens on hover */
.ds_Feat li::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.28), transparent 70%);
  opacity: 0.5;
  transition:
    opacity 0.4s ease,
    transform 0.6s var(--ease-out);
  pointer-events: none;
}
.ds_Feat li:hover {
  border-color: var(--line-dark-strong);
  background: linear-gradient(160deg, rgb(var(--yt-600-rgb) / 0.38) 0%, rgb(36 3 100 / 0.55) 45%, rgb(16 14 28 / 0.95) 100%);
}
.ds_Feat li:hover::after {
  opacity: 1;
  transform: scale(1.2);
}
.ds_Feat__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: var(--r-sm);
  background: var(--dm-grad-fill);
  box-shadow: 0 10px 24px -10px rgb(var(--yt-600-rgb) / 0.9);
}
.ds_Feat__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
}
.ds_Feat__name {
  font-size: var(--fs-h5);
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--sp-2);
}
/* Top bar (sits on the card, drawn from the name), grows on hover */
.ds_Feat__name::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 3px;
  background: var(--dm-grad-bar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}
.ds_Feat li:hover .ds_Feat__name::before {
  transform: scaleX(1);
}
.ds_Sec .ds_Feat p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  margin: 0;
}

/* ---------- Pipeline panel ---------- */
.ds_Pipe {
  position: relative;
  isolation: isolate;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgb(16 14 28 / 0.92), rgb(16 14 28 / 0.75));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Gradient border */
.ds_Pipe::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(var(--yt-500-rgb) / 0.7), rgb(52 52 65 / 0.6) 40%, rgb(52 52 65 / 0.6) 60%, rgb(var(--yt-300-rgb) / 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.ds_Pipe__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-7);
}
.ds_Pipe__title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.ds_Sec .ds_Pipe__legend {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  color: var(--text-on-dark-muted);
  margin: 0;
}
.ds_Pipe__legendDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dm-grad-fill);
  box-shadow: 0 0 0 3px rgb(var(--yt-500-rgb) / 0.25);
}
.ds_Pipe__ast {
  color: var(--yt-300);
  font-weight: 800;
}

/* Rail: from the centre of node 1 to the centre of node 9
   (stage name 40px + half a 48px node = 64px from the top) */
.ds_Pipe__track {
  position: relative;
}
.ds_Pipe__rail,
.ds_Pipe__railFill {
  position: absolute;
  top: 64px;
  left: 32px;
  right: calc(100% / 9 - 34.67px);
  height: 1px;
}
.ds_Pipe__rail {
  background: rgb(var(--yt-500-rgb) / 0.28);
}
.ds_Pipe__railFill {
  height: 2px;
  margin-top: -0.5px;
  background: var(--dm-grad-bar);
  box-shadow: 0 0 14px rgb(var(--yt-500-rgb) / 0.7);
  transform-origin: left;
}

.ds_Pipe__stages {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}
.ds_Pipe__stage {
  margin: 0;
  padding: 0 var(--sp-2);
  border-left: 1px dashed var(--line-dark);
}
.ds_Pipe__stage:first-child {
  padding-left: 0;
  border-left: 0;
}
.ds_Pipe__stage:last-child {
  padding-right: 0;
}
.ds_Pipe__stageName {
  display: flex;
  align-items: flex-start;
  height: 40px;
  margin: 0;
  padding-left: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yt-300);
}
.ds_Pipe__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}
.ds_Pipe__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-on-dark-body);
}
.ds_Pipe__node {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  border: 1px solid var(--line-dark-strong);
  background: var(--ds-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.ds_Pipe__step.is-ai {
  color: #fff;
}
.ds_Pipe__step.is-ai .ds_Pipe__node {
  border-color: transparent;
  background: var(--dm-grad-fill);
  box-shadow:
    0 0 0 4px rgb(var(--yt-500-rgb) / 0.18),
    0 10px 26px -6px rgb(var(--yt-600-rgb) / 0.9);
}
/* Bootstrap provides .visually-hidden; kept here in case the theme does not */
.ds_Sec .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .ds_Feat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Below 992px: no horizontal rail; each stage stacks on its own line */
@media (max-width: 991.98px) {
  .ds_Pipe__rail,
  .ds_Pipe__railFill {
    display: none;
  }
  .ds_Pipe__stages {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ds_Pipe__stage {
    padding: 0;
    border-left: 0;
  }
  .ds_Pipe__stageName {
    height: auto;
    margin-bottom: var(--sp-4);
    padding-left: 0;
  }
  .ds_Pipe__steps {
    position: relative;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .ds_Pipe__steps::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 23.5px;
    width: 1px;
    background: rgb(var(--yt-500-rgb) / 0.28);
  }
  .ds_Pipe__step {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    padding: 0;
  }
  .ds_Pipe__node {
    flex: none;
    margin-bottom: 0;
  }
}
@media (max-width: 575.98px) {
  .ds_Feat {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds_Sec::after {
    animation: none;
  }
  .ds_Feat li,
  .ds_Feat li::after,
  .ds_Feat__name::before {
    transition: none;
  }
  .ds_Pipe__railFill {
    transform: none !important;
  }
}

/* ==========================================================================
   43. What sets YASH apart — ink band with a big figure (.ya_*)
   Used on: SAP Cloud ERP Public (ACF adhoc block)

   Top: title + lead (left), "1,000+" figure (right) from 992px.
   Bottom: three columns with top rules (ISG badge, two icons), from 768px.
   Count-up and column stagger come from sap-inner.php ([data-count],
   [data-anim-group]); no CSS hides content, so it shows without JS.
   Note: sap.css § 01 colours every `p` dark and common § 02 every `ul li`
   light grey, so text colours are set explicitly below.
   ========================================================================== */
.ya_Sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--section-y) 0;
  background: rgb(var(--ink-rgb));
  color: var(--text-on-dark-body);
  --color-focus: var(--color-focus-inverse);
}
/* Brand glow: top right + faint bottom left */
.ya_Sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 85% 0%, rgb(var(--yt-600-rgb) / 0.45), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgb(var(--yt-400-rgb) / 0.16), transparent 70%);
}
.ya_Sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Top: title + figure ---------- */
.ya_Top {
  display: grid;
  gap: var(--sp-7) var(--sp-9);
  align-items: end;
}
.ya_Sec .common_Title {
  font-size: var(--fs-h2); /* long title: DS h2 rather than the larger default */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
  margin: 0 0 var(--sp-5);
}
.ya_Sec .ya_Lead {
  max-width: 56ch;
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.72);
  text-wrap: pretty;
}
.ya_Sec .ya_Fig {
  margin: 0;
  color: inherit;
}
.ya_Fig__n {
  display: block;
  font-size: clamp(4.5rem, 2.8rem + 6.4vw, 8.75rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.ya_Fig__n sup {
  margin-left: 0.04em;
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 0.95em;
  color: var(--yt-300);
}
.ya_Fig__label {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: #fff;
}
.ya_Fig__note {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}

/* ---------- Bottom: three columns ---------- */
.ya_Cols {
  display: grid;
  gap: var(--sp-5);
  margin: clamp(3rem, 2rem + 3vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
}
.ya_Col {
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid rgb(255 255 255 / 0.16);
  color: var(--text-on-dark-body);
}
.ya_Col h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-heading);
  color: #fff;
}
.ya_Col--isg h3 {
  color: var(--yt-300);
}
.ya_Sec .ya_Col p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.66);
}
.ya_Icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: var(--radius-circle);
  color: var(--yt-300);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.2);
}
.ya_Icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ISG badge slot (striped placeholder until the image is added) */
.ya_Badge {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: var(--r-sm);
  text-align: center;
  font-size: 0.625rem;
  line-height: 1.3;
  color: rgb(255 255 255 / 0.6);
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgb(255 255 255 / 0.05) 9px 10px),
    rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
}
.ya_Badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .ya_Cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}
@media (min-width: 992px) {
  .ya_Top {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* ==========================================================================
   44. Why YASH — sticky heading + 2 × 2 strengths (.wy_*)
   Used on: SAP Cloud ERP Public (ACF adhoc block)

   Heading column (eyebrow + title) on the left, sticky from 992px.
   Right: large statement paragraph, then four white strength cards.
   The card stagger comes from sap-inner.php ([data-anim-group]).
   Note: sap.css § 01 colours every `p` and common § 02 every `ul li`,
   so text colours are set explicitly below.
   ========================================================================== */
.wy_Sec {
  position: relative;
  padding: var(--section-y) 0;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}
.wy_Sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.wy_Grid {
  display: grid;
  gap: var(--sp-7) var(--sp-9);
}

/* ---------- Heading column ---------- */
/* Eyebrow: DS .common_Small_Title, in brand violet with a short dash */
.wy_Head .common_Small_Title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  color: var(--color-brand);
}
.wy_Head .common_Small_Title::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.wy_Sec .common_Title {
  margin: 0;
  font-size: var(--fs-h2); /* long title: DS h2 rather than the larger default */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--color-heading);
  text-wrap: balance;
}

/* ---------- Statement ---------- */
.wy_Sec .wy_Statement {
  margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.wy_Statement strong {
  font-weight: 600;
  color: var(--color-heading);
}

/* ---------- Strength cards ---------- */
.wy_List {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wy_Item {
  margin: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--color-text-muted);
  box-shadow:
    0 0 0 1px rgb(var(--ink-rgb) / 0.06),
    0 1px 2px rgb(var(--ink-rgb) / 0.05);
}
.wy_Icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: var(--radius-circle);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1.5px var(--yt-200);
}
.wy_Icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wy_Item h3 {
  margin: 0 0 var(--sp-2);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-heading);
  color: var(--color-heading);
}
.wy_Sec .wy_Item p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .wy_List {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .wy_Grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  /* Heading stays in view while the strengths scroll past
     (100px = the template's .sticky offset, i.e. below the fixed header) */
  .wy_Head {
    position: sticky;
    top: 100px;
  }
}
/* ==========================================================================
   45. SAP Enterprise Asset Management — four sections (.eam_*)
   Used on: SAP Enterprise Asset Management (ACF adhoc blocks)

   Why YASH (proof bento, ink) · Portfolio (layer diagram) ·
   Differentiator (phased steps + measures, ink) · Industries (mosaic)
   Runtime: eam-sections.js (spotlight, layer narrative, step connector);
   counters use the template's [data-count]; group reveals use
   [data-anim-group]. Everything shows fully without JS.

   CONTENTS
   45.1 Scope tokens (only what common § 00 lacks) + ink surface
   45.2 Section shell, eyebrow, title, lead, sticky, icon chip, tags
   45.3 Image placeholder
   45.4 Why YASH — proof bento (ink)
   45.5 Portfolio — closed-loop layer diagram
   45.6 Differentiator — phased steps + measures (ink)
   45.7 Industries — editorial mosaic
   45.8 Ambient background (shared recipe)
   45.9 Reduced motion
   ========================================================================== */
/* ---------- 45.1 Scope tokens ----------
   Colours, type, radii, shadows and motion come from global-inner.css § 00.
   Only the tokens it does not define are added here, scoped to .eam_Sec. */
.eam_Sec {
  --color-bg: var(--neutral-0);
  --ink-700: #1c1b24;
  --fs-body-lg: var(--fs-lede);
  --fs-body-sm: var(--fs-sm);
  --fs-caption: var(--fs-xs);
  --lh-normal: 1.6;
  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-caps: 0.1em;
  --section-head-gap: var(--stack-head);
  --grid-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --shadow-3: 0 0 0 1px rgb(var(--ink-rgb) / 0.06), 0 8px 16px -4px rgb(var(--ink-rgb) / 0.08),
    0 32px 64px -12px rgb(var(--ink-rgb) / 0.18);
  --gradient-fade: linear-gradient(180deg, rgb(var(--ink-rgb) / 0) 30%, rgb(var(--ink-rgb) / 0.9) 100%);
  --dur-slow: 640ms;
  /* Below the fixed header + sticky .page_Navigation (same offset as the template's .sticky) */
  --eam-sticky-top: 100px;
  /* Anchor landing offset for #nav-* links (header + page navigation) */
  --eam-anchor-offset: 140px;
}

/* Inverse — the one ink surface. Re-maps roles, components adapt. */
.eam_Sec--ink {
  --color-bg: var(--ink-900);
  --color-surface: var(--ink-800);
  --color-heading: #ffffff;
  --color-text: rgb(255 255 255 / 0.72);
  --color-text-muted: rgb(255 255 255 / 0.62);
  --color-text-subtle: rgb(255 255 255 / 0.5);
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.24);
  --color-focus: var(--yt-300);
  color-scheme: dark;
}


/* ---------- 45.2 Section shell ---------- */
.eam_Sec {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow-x: clip;
  scroll-margin-top: var(--eam-anchor-offset);
}
.eam_Sec--subtle {
  --color-bg: var(--neutral-50);
}
.eam_Sec--ink {
  overflow: hidden;
}
/* Neutralise sap.css § 01 (p dark) and common § 02 (ul li grey) inside the scope */
.eam_Sec p,
.eam_Sec li {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.eam_Sec h2,
.eam_Sec h3,
.eam_Sec h4 {
  color: var(--color-heading);
  font-family: var(--font-sans);
  letter-spacing: var(--ls-snug);
}
.eam_Sec section {
  background: transparent;
}
.eam_Sec :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.eam_Head {
  display: grid;
  gap: 1rem;
  max-width: 60rem;
  margin-bottom: var(--section-head-gap);
}
@media (min-width: 992px) {
  .eam_Head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: end;
  }
}
.eam_Eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--color-brand) !important;
}
.eam_Eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.eam_Sec--ink .eam_Eyebrow {
  color: var(--yt-300) !important;
}
.eam_Head .eam_Eyebrow {
  margin-bottom: 0;
}
.eam_Title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight) !important;
  text-wrap: balance;
}
.eam_Title--md {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.eam_Lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.65 !important;
  color: var(--color-text-muted) !important;
  text-wrap: pretty;
}
@media (min-width: 992px) {
  .eam_Sticky {
    position: sticky;
    top: var(--eam-sticky-top);
  }
}

/* Icon chip — 44px, hairline ring */
.eam_Icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.eam_Icon svg {
  width: 22px;
  height: 22px;
}
.eam_Sec--ink .eam_Icon {
  background: rgb(var(--yt-600-rgb) / 0.18);
  color: var(--yt-300);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.35);
}

/* Tags */
.eam_Tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.eam_Tags li {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--yt-50);
  color: var(--yt-700) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 600;
  line-height: 1.3 !important;
}
.eam_Tags li::first-letter {
  text-transform: uppercase; /* source text keeps the content doc's casing */
}
.eam_Sec--ink .eam_Tags li {
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.84) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}


/* Bootstrap provides .visually-hidden; kept here in case the theme does not */
.eam_Sec .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ---------- 45.3 Image placeholder ----------
   Swap each .eam_Ph for <img class="eam_Img" src="" alt=""> from the media
   library. The tag text is a brief for the art director; it is not content. */
.eam_Ph {
  --ar: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: var(--ar);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
  color: var(--neutral-400);
}
.eam_Ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

.eam_Ph--ink {
  background: radial-gradient(80% 70% at 75% 20%, rgb(var(--yt-600-rgb) / 0.35), transparent 70%),
    linear-gradient(135deg, var(--ink-700), var(--ink-900));
  color: rgb(255 255 255 / 0.28);
}
.eam_Ph--ink::before {
  background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
}
.eam_Ph--ink .eam_Ph_Tag {
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eam_Img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


/* ---------- 45.4 Why YASH — proof bento (inverse) ---------- */
.eam_WhyGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a b b"
    "a a c d"
    "e e e e";
}
.eam_WhyGrid > [data-area="a"] { grid-area: a; }
.eam_WhyGrid > [data-area="b"] { grid-area: b; }
.eam_WhyGrid > [data-area="c"] { grid-area: c; }
.eam_WhyGrid > [data-area="d"] { grid-area: d; }
.eam_WhyGrid > [data-area="e"] { grid-area: e; }

.eam_Tile {
  --mx: -500px;
  --my: -500px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 240px;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  container-type: inline-size;
}
/* Border light — radial fill masked to a 1px ring (same recipe as LeanIX / Signavio) */
.eam_Tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.eam_Tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .eam_WhyGrid:hover .eam_Tile::before,
  .eam_WhyGrid:hover .eam_Tile::after {
    opacity: 1;
  }
}
.eam_Why_Intro {
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.eam_Why_Intro .eam_Title {
  max-width: 18ch;
}
.eam_Why_Intro p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.7 !important;
}
.eam_Why_Media {
  padding: 0;
  min-height: 260px;
}
.eam_Why_Media .eam_Ph {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.eam_Stat {
  justify-content: space-between;
  gap: 1.5rem;
}
.eam_Stat_Top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.eam_Figure {
  display: flex;
  align-items: flex-start;
  margin: 0 0 0.5rem;
  font-size: min(clamp(2.75rem, 2rem + 2.4vw, 4.25rem), 26cqi) !important;
  font-weight: 400;
  line-height: 0.95 !important;
  letter-spacing: -0.045em;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.eam_Figure sup {
  top: 0.15em;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--yt-400);
  margin-left: 0.04em;
}
.eam_Stat_Label {
  margin: 0;
  font-size: var(--fs-body) !important;
}

/* 4,500+ — avatar stack */
.eam_Avatars {
  display: flex;
}
.eam_Avatars i {
  width: 30px;
  height: 30px;
  margin-left: -9px;
  border-radius: 50%;
  border: 2px solid var(--ink-900);
  background: linear-gradient(140deg, var(--yt-400), var(--yt-700));
}
.eam_Avatars i:nth-child(2) { background: linear-gradient(140deg, #c9c9d1, #55555f); }
.eam_Avatars i:nth-child(3) { background: linear-gradient(140deg, var(--yt-300), var(--yt-600)); }
.eam_Avatars i:last-child {
  display: grid;
  place-items: center;
  background: var(--ink-700);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

/* 400+ — service ring */
.eam_Ring {
  width: 52px;
  height: 52px;
}
.eam_Ring circle {
  fill: none;
  stroke-width: 3;
}
.eam_Ring .eam_Ring_Bg { stroke: rgb(255 255 255 / 0.1); }
.eam_Ring .eam_Ring_Fg {
  stroke: var(--yt-400);
  stroke-linecap: round;
  stroke-dasharray: 113;
  stroke-dashoffset: 28;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: eamSpin 12s linear infinite;
}
@keyframes eamSpin {
  to { transform: rotate(270deg); }
}

/* 30+ — wide tile, accelerators named in the copy */
.eam_Stat--wide {
  min-height: 0;
}
@media (min-width: 768px) {
  .eam_Stat--wide {
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
  }
  .eam_Stat--wide .eam_Stat_Main {
    flex: none;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
}
.eam_Stat--wide .eam_Tags {
  justify-content: flex-start;
}
@media (min-width: 768px) {
  .eam_Stat--wide .eam_Tags {
    margin-left: auto;
    justify-content: flex-end;
  }
}

@media (max-width: 1199.98px) {
  .eam_WhyGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b b"
      "c d"
      "e e";
  }
}
@media (max-width: 575.98px) {
  .eam_WhyGrid {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d" "e";
  }
  .eam_Tile {
    padding: 1.5rem;
    min-height: 200px;
  }
}


/* ---------- 45.5 Portfolio — closed-loop layer diagram ---------- */
.eam_Port .eam_Lead {
  margin-top: 1.5rem;
}
.eam_Note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--neutral-50);
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-size: var(--fs-body-sm) !important;
  line-height: 1.55 !important;
}
.eam_Note svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--color-brand);
}

.eam_Stack {
  position: relative;
  margin: 0;
  padding-right: 48px;
}
.eam_Stack_Layers {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.eam_Layer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px 24px;
  margin: 0;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-standard);
}
.eam_Layer h3 {
  margin: 0;
  font-size: var(--fs-h5) !important;
  font-weight: 700;
  line-height: var(--lh-snug);
}
.eam_Layer p {
  margin: 0;
  font-size: var(--fs-body-sm) !important;
  line-height: 1.5 !important;
  color: var(--color-text-muted) !important;
}
@media (hover: hover) {
  .eam_Stack_Layers:hover .eam_Layer:not(:hover) {
    opacity: 0.5;
  }
  .eam_Layer:hover {
    transform: translateX(-6px);
    box-shadow: var(--shadow-3);
  }
}
/* AI spans every layer: dashed, light-brand */
.eam_Layer--ai {
  background: var(--yt-50);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-600-rgb) / 0.3);
  background-image: repeating-linear-gradient(135deg, rgb(var(--yt-600-rgb) / 0.05) 0 1px, transparent 1px 10px);
}
.eam_Layer--ai h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--yt-800) !important;
}
.eam_Layer--ai h3 svg {
  width: 18px;
  height: 18px;
  color: var(--color-brand);
}
.eam_Layer--ai p {
  color: var(--yt-700) !important;
  font-weight: 600;
}
/* The core — the page's one brand-filled element */
.eam_Layer--core {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 26px;
  background: var(--color-brand);
  box-shadow: 0 18px 40px -16px rgb(var(--yt-600-rgb) / 0.65);
}
.eam_Layer--core h3 {
  color: #fff !important;
  font-size: var(--fs-h4) !important;
}
.eam_Layer--core .eam_Tags li {
  background: rgb(255 255 255 / 0.14);
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}
/* Foundation */
.eam_Layer--base {
  background: var(--neutral-950);
  box-shadow: none;
}
.eam_Layer--base h3 { color: #fff !important; }
.eam_Layer--base p { color: rgb(255 255 255 / 0.66) !important; }

/* The loop: data rises from the field back into the core and AI */
.eam_Loop {
  position: absolute;
  top: 28px;
  bottom: 28px;
  right: 8px;
  width: 30px;
  border: 1.5px dashed var(--yt-300);
  border-left: 0;
  border-radius: 0 18px 18px 0;
  pointer-events: none;
}
.eam_Loop::before,
.eam_Loop::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 8px;
  height: 8px;
  border-left: 1.5px solid var(--yt-500);
  border-bottom: 1.5px solid var(--yt-500);
}
.eam_Loop::before {
  top: -5px;
  transform: rotate(45deg);
}
.eam_Loop::after {
  bottom: -5px;
  transform: rotate(45deg);
  opacity: 0;
}
.eam_Loop i {
  position: absolute;
  right: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow: 0 0 0 5px rgb(var(--yt-600-rgb) / 0.15);
  animation: eamRise 4.5s var(--ease-standard) infinite;
}
@keyframes eamRise {
  0% { top: 100%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 0%; opacity: 0; }
}
/* Scroll narrative: layers light top → bottom (class added by the script) */
.eam_Stack.is-armed .eam_Layer {
  opacity: 0.28;
  transform: translateY(10px);
}
.eam_Stack.is-armed .eam_Layer.is-lit {
  opacity: 1;
  transform: none;
}
@media (max-width: 767.98px) {
  .eam_Layer {
    grid-template-columns: 1fr;
    padding: 16px 18px;
  }
  .eam_Stack {
    padding-right: 36px;
  }
  .eam_Loop {
    width: 22px;
    right: 4px;
  }
}


/* ---------- 45.6 Differentiator — phased steps + measures (inverse) ---------- */
.eam_StepsWrap {
  position: relative;
  margin: 0 0 clamp(4rem, 3rem + 4vw, 7rem);
}
.eam_Steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.eam_Steps_Track {
  position: absolute;
  top: 27px;
  left: 28px;
  right: calc((100% - 3 * var(--grid-gap)) / 4 - 28px); /* ends at the centre of dot 4 */
  height: 2px;
  background: rgb(255 255 255 / 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.eam_Steps_Track span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--yt-500), var(--yt-300));
  transform: scaleX(var(--p, 1));
  transform-origin: left;
}
.eam_Step {
  position: relative;
  margin: 0;
  padding-right: 1rem;
}
.eam_Step_Dot {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-800);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  transition: background-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base);
}
/* All dots on until the script arms the list (no-JS / reduced motion = final state) */
.eam_StepsWrap:not(.is-armed) .eam_Step_Dot,
.eam_Step.is-on .eam_Step_Dot {
  background: var(--yt-600);
  box-shadow: 0 0 0 6px rgb(var(--yt-600-rgb) / 0.25);
}
.eam_Step h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: var(--fs-h4) !important;
  font-weight: 700;
}
.eam_Step p {
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 991.98px) {
  .eam_Steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .eam_Steps_Track {
    top: 28px;
    bottom: 28px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .eam_Steps_Track span {
    transform: scaleY(var(--p, 1));
    transform-origin: top;
  }
  .eam_Step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 1.25rem;
  }
  .eam_Step_Dot {
    grid-row: span 2;
  }
  .eam_Step h3 {
    margin: 0.75rem 0 0.25rem;
  }
}

.eam_Measures_Title {
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-h4) !important;
  font-weight: 600;
}
.eam_Measures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}
.eam_Measure {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}
.eam_Measure dt {
  margin: 0;
  color: #fff;
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.eam_Measure dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
.eam_Glyph {
  height: 56px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
/* availability — uptime ticks */
.eam_Glyph--up i {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: rgb(var(--yt-400-rgb) / 0.55);
}
.eam_Glyph--up i:nth-child(7) {
  background: rgb(255 255 255 / 0.12);
  height: 30%;
}
/* planned work — calendar cells */
.eam_Glyph--plan {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  align-items: stretch;
}
.eam_Glyph--plan i {
  border-radius: 3px;
  background: rgb(255 255 255 / 0.08);
}
.eam_Glyph--plan i.is-on {
  background: rgb(var(--yt-400-rgb) / 0.7);
}
/* productivity — rising line */
.eam_Glyph--prod svg,
.eam_Glyph--cost svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.eam_Glyph--prod path {
  fill: none;
  stroke: var(--yt-300);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.eam_Glyph--prod .eam_Area {
  fill: rgb(var(--yt-600-rgb) / 0.25);
  stroke: none;
}
/* cost — bars stepping down */
.eam_Glyph--cost i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: rgb(255 255 255 / 0.14);
}
.eam_Glyph--cost i:last-child {
  background: var(--yt-400);
}
@media (max-width: 1199.98px) {
  .eam_Measures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .eam_Measures {
    grid-template-columns: 1fr;
  }
}

/* ---------- 45.7 Industries — editorial mosaic ---------- */
.eam_IndGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.eam_IndCard {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  grid-column: span 3;
  min-height: 250px;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--ink-900);
}
.eam_IndCard:nth-child(1) { grid-column: span 5; grid-row: span 2; }
.eam_IndCard:nth-child(2) { grid-column: span 4; }
.eam_IndCard:nth-child(3) { grid-column: span 3; }
.eam_IndCard:nth-child(4) { grid-column: span 3; }
.eam_IndCard:nth-child(5) { grid-column: span 4; }
.eam_IndCard .eam_Ph {
  position: absolute;
  inset: 0;
  z-index: -2;
  aspect-ratio: auto;
  border-radius: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.eam_IndCard .eam_Ph_Tag {
  top: 14px;
  bottom: auto;
}
.eam_IndCard .eam_Ph_Icon {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 24px;
  height: 24px;
}
.eam_IndCard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-fade);
}
@media (hover: hover) {
  .eam_IndCard:hover .eam_Ph {
    transform: scale(1.06);
  }
}
.eam_IndCard_Body {
  padding: 1.5rem 1.5rem 1.625rem;
}
.eam_IndCard h3 {
  margin: 0 0 0.375rem;
  color: #fff !important;
  font-size: var(--fs-h4) !important;
  font-weight: 700;
}
.eam_IndCard p {
  margin: 0;
  max-width: 36ch;
  color: rgb(255 255 255 / 0.78) !important;
  font-size: var(--fs-body-sm) !important;
  line-height: 1.5 !important;
}
.eam_IndCard:nth-child(1) .eam_IndCard_Body {
  padding: 2rem;
}
.eam_IndCard:nth-child(1) h3 {
  font-size: var(--fs-h3) !important;
}
@media (max-width: 1199.98px) {
  .eam_IndGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .eam_IndCard,
  .eam_IndCard:nth-child(n) {
    grid-column: span 1;
    grid-row: auto;
  }
  .eam_IndCard:nth-child(1) {
    grid-column: span 2;
    min-height: 340px;
  }
}
/* Phone: a swipeable row instead of nine tall cards */
@media (max-width: 767.98px) {
  .eam_IndGrid {
    display: flex;
    gap: 12px;
    margin-inline: -12px;
    padding: 0 12px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
  }
  .eam_IndGrid::-webkit-scrollbar {
    display: none;
  }
  .eam_IndCard,
  .eam_IndCard:nth-child(n) {
    flex: none;
    width: 80%;
    min-height: 320px;
    scroll-snap-align: start;
  }
}


/* ---------- 45.8 Ambient background (shared recipe) ---------- */
.eam_Ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.eam_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.eam_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -18%;
  right: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: eamDriftA 28s ease-in-out infinite alternate;
}
.eam_Blob--b {
  width: 36vw;
  height: 36vw;
  max-width: 560px;
  max-height: 560px;
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgb(var(--yt-400-rgb) / 0.55), transparent 65%);
  animation: eamDriftB 34s ease-in-out infinite alternate;
}
@keyframes eamDriftA {
  to { transform: translate(-14vw, 18vh) scale(1.12); }
}
@keyframes eamDriftB {
  to { transform: translate(16vw, -12vh) scale(0.92); }
}
.eam_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.2) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.eam_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.3);
}
@media (max-width: 575.98px) {
  .eam_Blob {
    filter: blur(60px);
  }
}

/* ---------- 45.9 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .eam_Sec *,
  .eam_Sec *::before,
  .eam_Sec *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .eam_Stack.is-armed .eam_Layer {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   46. SAP SuccessFactors HCM — four sections (.sf_*)
   Used on: SF /coe/sap/successfactors/ (ACF adhoc blocks)

   Overview (before → after) · Why YASH (proof bento, ink) ·
   Capabilities (bento + Data Migration cross-link) · Differentiator (ink)
   Runtime: the "SF sections" block in sap-inner.php (spotlight + overview
   timeline); counters use the template's [data-count]; group reveals use
   [data-anim-group]. Everything shows in its final state without JS.
   Same component kit as § 45 (EAM) under its own prefix, so either page
   can change without touching the other.

   CONTENTS
   46.1 Scope tokens (only what common § 00 lacks) + ink surface
   46.2 Section shell, heading, icon chip, tags
   46.3 Image placeholder
   46.4 Why YASH — proof bento (ink)
   46.5 Ambient background
   46.6 Overview — before → after
   46.7 Why YASH — two-stat layout
   46.8 Capabilities — bento + cross-link
   46.9 Differentiator — feature glyphs
   46.10 Reduced motion
   ========================================================================== */
/* ---------- 46.1 Scope tokens ----------
   Colours, type, radii, shadows and motion come from global-inner.css § 00.
   Only the tokens it does not define are added here, scoped to .sf_Sec. */
.sf_Sec {
  --color-bg: var(--neutral-0);
  --ink-700: #1c1b24;
  --fs-body-lg: var(--fs-lede);
  --fs-body-sm: var(--fs-sm);
  --fs-caption: var(--fs-xs);
  --lh-normal: 1.6;
  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-caps: 0.1em;
  --section-head-gap: var(--stack-head);
  --grid-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --card-pad: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  --shadow-3: 0 0 0 1px rgb(var(--ink-rgb) / 0.06), 0 8px 16px -4px rgb(var(--ink-rgb) / 0.08),
    0 32px 64px -12px rgb(var(--ink-rgb) / 0.18);
  /* Below the fixed header + sticky .page_Navigation (same offset as the template's .sticky) */
  --sf-sticky-top: 100px;
  /* Anchor landing offset for #nav-* links (header + page navigation) */
  --sf-anchor-offset: 140px;
}

/* Inverse — the one ink surface. Re-maps roles, components adapt. */
.sf_Sec--ink {
  --color-bg: var(--ink-900);
  --color-surface: var(--ink-800);
  --color-heading: #ffffff;
  --color-text: rgb(255 255 255 / 0.72);
  --color-text-muted: rgb(255 255 255 / 0.62);
  --color-text-subtle: rgb(255 255 255 / 0.5);
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.24);
  --color-focus: var(--yt-300);
  color-scheme: dark;
}


/* ---------- 46.2 Section shell ---------- */
.sf_Sec {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow-x: clip;
  scroll-margin-top: var(--sf-anchor-offset);
}
.sf_Sec--subtle {
  --color-bg: var(--neutral-50);
}
.sf_Sec--ink {
  overflow: hidden;
}
/* Neutralise sap.css § 01 (p dark) and common § 02 (ul li grey) inside the scope */
.sf_Sec p,
.sf_Sec li {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.sf_Sec h2,
.sf_Sec h3,
.sf_Sec h4 {
  color: var(--color-heading);
  font-family: var(--font-sans);
  letter-spacing: var(--ls-snug);
}
.sf_Sec section {
  background: transparent;
}
.sf_Sec :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.sf_Head {
  display: grid;
  gap: 1rem;
  max-width: 60rem;
  margin-bottom: var(--section-head-gap);
}
@media (min-width: 992px) {
  .sf_Head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: end;
  }
}
.sf_Eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--color-brand) !important;
}
.sf_Eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.sf_Sec--ink .sf_Eyebrow {
  color: var(--yt-300) !important;
}
.sf_Head .sf_Eyebrow {
  margin-bottom: 0;
}
.sf_Title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight) !important;
  text-wrap: balance;
}
.sf_Title--md {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.sf_Lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.65 !important;
  color: var(--color-text-muted) !important;
  text-wrap: pretty;
}
@media (min-width: 992px) {
  .sf_Sticky {
    position: sticky;
    top: var(--sf-sticky-top);
  }
}

/* Icon chip — 44px, hairline ring */
.sf_Icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.sf_Icon svg {
  width: 22px;
  height: 22px;
}
.sf_Sec--ink .sf_Icon {
  background: rgb(var(--yt-600-rgb) / 0.18);
  color: var(--yt-300);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.35);
}

/* Tags */
.sf_Tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf_Tags li {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--yt-50);
  color: var(--yt-700) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 600;
  line-height: 1.3 !important;
}
.sf_Tags li::first-letter {
  text-transform: uppercase; /* source text keeps the content doc's casing */
}
.sf_Sec--ink .sf_Tags li {
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.84) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}


/* ---------- 46.3 Image placeholder ----------
   Swap each .sf_Ph for <img class="sf_Img" src="" alt=""> from the media
   library. The tag text is a brief for the art director; it is not content. */
.sf_Ph {
  --ar: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: var(--ar);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
  color: var(--neutral-400);
}
.sf_Ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.sf_Ph_Icon {
  position: relative;
  width: 40px;
  height: 40px;
}
.sf_Ph_Tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.85);
  color: var(--neutral-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sf_Ph--ink {
  background: radial-gradient(80% 70% at 75% 20%, rgb(var(--yt-600-rgb) / 0.35), transparent 70%),
    linear-gradient(135deg, var(--ink-700), var(--ink-900));
  color: rgb(255 255 255 / 0.28);
}
.sf_Ph--ink::before {
  background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
}
.sf_Ph--ink .sf_Ph_Tag {
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sf_Img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


/* ---------- 46.4 Why YASH — proof bento (inverse) ---------- */
.sf_WhyGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a b b"
    "a a c d"
    "e e e e";
}
.sf_WhyGrid > [data-area="a"] { grid-area: a; }
.sf_WhyGrid > [data-area="b"] { grid-area: b; }
.sf_WhyGrid > [data-area="c"] { grid-area: c; }
.sf_WhyGrid > [data-area="d"] { grid-area: d; }
.sf_WhyGrid > [data-area="e"] { grid-area: e; }

.sf_Tile {
  --mx: -500px;
  --my: -500px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 240px;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  container-type: inline-size;
}
/* Border light — radial fill masked to a 1px ring (same recipe as LeanIX / Signavio) */
.sf_Tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.sf_Tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .sf_WhyGrid:hover .sf_Tile::before,
  .sf_WhyGrid:hover .sf_Tile::after {
    opacity: 1;
  }
}
.sf_Why_Intro {
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.sf_Why_Intro .sf_Title {
  max-width: 18ch;
}
.sf_Why_Intro p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.7 !important;
}
.sf_Why_Media {
  padding: 0;
  min-height: 260px;
}
.sf_Why_Media .sf_Ph {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.sf_Stat {
  justify-content: space-between;
  gap: 1.5rem;
}
.sf_Stat_Top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sf_Figure {
  display: flex;
  align-items: flex-start;
  margin: 0 0 0.5rem;
  font-size: min(clamp(2.75rem, 2rem + 2.4vw, 4.25rem), 26cqi) !important;
  font-weight: 400;
  line-height: 0.95 !important;
  letter-spacing: -0.045em;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sf_Figure sup {
  top: 0.15em;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--yt-400);
  margin-left: 0.04em;
}
.sf_Stat_Label {
  margin: 0;
  font-size: var(--fs-body) !important;
}

/* 4,500+ — avatar stack */
.sf_Avatars {
  display: flex;
}
.sf_Avatars i {
  width: 30px;
  height: 30px;
  margin-left: -9px;
  border-radius: 50%;
  border: 2px solid var(--ink-900);
  background: linear-gradient(140deg, var(--yt-400), var(--yt-700));
}
.sf_Avatars i:nth-child(2) { background: linear-gradient(140deg, #c9c9d1, #55555f); }
.sf_Avatars i:nth-child(3) { background: linear-gradient(140deg, var(--yt-300), var(--yt-600)); }
.sf_Avatars i:last-child {
  display: grid;
  place-items: center;
  background: var(--ink-700);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

/* 400+ — service ring */
.sf_Ring {
  width: 52px;
  height: 52px;
}
.sf_Ring circle {
  fill: none;
  stroke-width: 3;
}
.sf_Ring .sf_Ring_Bg { stroke: rgb(255 255 255 / 0.1); }
.sf_Ring .sf_Ring_Fg {
  stroke: var(--yt-400);
  stroke-linecap: round;
  stroke-dasharray: 113;
  stroke-dashoffset: 28;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: sfSpin 12s linear infinite;
}
@keyframes sfSpin {
  to { transform: rotate(270deg); }
}

@media (max-width: 1199.98px) {
  .sf_WhyGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b b"
      "c d"
      "e e";
  }
}
@media (max-width: 575.98px) {
  .sf_WhyGrid {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d" "e";
  }
  .sf_Tile {
    padding: 1.5rem;
    min-height: 200px;
  }
}


/* ---------- 46.5 Ambient background (shared recipe) ---------- */
.sf_Ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.sf_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.sf_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -18%;
  right: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: sfDriftA 28s ease-in-out infinite alternate;
}
.sf_Blob--b {
  width: 36vw;
  height: 36vw;
  max-width: 560px;
  max-height: 560px;
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgb(var(--yt-400-rgb) / 0.55), transparent 65%);
  animation: sfDriftB 34s ease-in-out infinite alternate;
}
@keyframes sfDriftA {
  to { transform: translate(-14vw, 18vh) scale(1.12); }
}
@keyframes sfDriftB {
  to { transform: translate(16vw, -12vh) scale(0.92); }
}
.sf_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.2) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.sf_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.3);
}
@media (max-width: 575.98px) {
  .sf_Blob {
    filter: blur(60px);
  }
}


/* ---------- 46.6 Overview — before → after transformation ---------- */
.sf_Ov2_Stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: stretch;
  min-height: 400px;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  border-radius: 28px;
  background: var(--neutral-50);
  box-shadow: inset 0 0 0 1px var(--color-border);
  overflow: hidden;
}
.sf_Ov2_Stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgb(var(--ink-rgb) / 0.07) 1px, transparent 1.3px);
  background-size: 22px 22px;
}
/* the "after" half sits on a soft light so it reads as resolved */
.sf_Ov2_Stage::after {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  z-index: -1;
  background: radial-gradient(70% 70% at 60% 50%, rgb(var(--yt-600-rgb) / 0.1), transparent 70%),
    linear-gradient(90deg, transparent, rgb(255 255 255 / 0.7));
}

.sf_Ov2_Before {
  position: relative;
  min-height: 340px;
  margin: 2rem 0 2rem 2rem;
}
.sf_Ov2_Broken {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.sf_Ov2_Broken path {
  fill: none;
  stroke: var(--neutral-300);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
  vector-effect: non-scaling-stroke;
}
.sf_Ov2_Frag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  padding: 9px 14px;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--neutral-300);
  background: var(--neutral-0);
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(var(--r, 0deg));
}
.sf_Ov2_Frag::first-letter,
.sf_Ov2_Mod span::first-letter {
  text-transform: uppercase;
}

.sf_Ov2_Bridge {
  position: relative;
  display: grid;
  place-items: center;
}
.sf_Ov2_Bridge::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-border-strong) 20%, var(--color-border-strong) 80%, transparent);
}
.sf_Ov2_Arrow {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--neutral-0);
  color: var(--color-brand);
  box-shadow: var(--shadow-2), 0 0 0 8px rgb(var(--yt-600-rgb) / 0.06);
}
.sf_Ov2_Arrow svg {
  width: 22px;
  height: 22px;
}

.sf_Ov2_After {
  display: grid;
  place-items: center;
  padding: 2rem;
}
.sf_Ov2_Platform {
  width: min(100%, 380px);
  overflow: hidden;
  border-radius: 20px;
  background: var(--neutral-0);
  box-shadow: var(--shadow-3);
}
.sf_Ov2_Platform_Head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  background: var(--color-brand);
  color: #fff;
  font-size: var(--fs-h5);
  font-weight: 700;
}
.sf_Ov2_Pulse {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}
.sf_Ov2_Pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.6);
  animation: sfPulse 2.4s ease-out infinite;
}
@keyframes sfPulse {
  from { transform: scale(0.6); opacity: 1; }
  to { transform: scale(1.8); opacity: 0; }
}
.sf_Ov2_Mods {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
.sf_Ov2_Mod {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 22px;
  color: var(--color-heading) !important;
  font-size: var(--fs-body) !important;
  font-weight: 600;
  line-height: 1.3 !important;
}
.sf_Ov2_Mod span {
  display: block;
}
.sf_Ov2_Mod + .sf_Ov2_Mod {
  border-top: 1px solid var(--neutral-100);
}
.sf_Ov2_Mod i {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yt-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a00fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: inset 0 0 0 1px rgb(var(--yt-600-rgb) / 0.2);
}

.sf_Ov2_Statement {
  margin: 0 !important;
  font-size: var(--fs-h4) !important;
  font-weight: 500;
  line-height: 1.45 !important;
  letter-spacing: var(--ls-snug);
  color: var(--color-heading) !important;
  text-wrap: pretty;
}
.sf_Ov2_Outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf_Ov2_Outcome {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.sf_Ov2_Outcome::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--color-brand);
}
.sf_Ov2_Ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--yt-50);
  color: var(--color-brand);
}
.sf_Ov2_Ico svg {
  width: 20px;
  height: 20px;
}
.sf_Ov2_Outcome p {
  margin: 0;
  font-size: var(--fs-body) !important;
  line-height: 1.55 !important;
}
.sf_Ov2_Outcome p strong {
  color: var(--color-heading);
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .sf_Ov2_Stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 72px auto;
  }
  .sf_Ov2_Stage::after {
    inset: 50% 0 0 0;
  }
  .sf_Ov2_Before {
    min-height: 260px;
    margin: 1.5rem;
  }
  .sf_Ov2_Bridge::before {
    top: 50%;
    bottom: auto;
    left: 12%;
    right: 12%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border-strong) 20%, var(--color-border-strong) 80%, transparent);
  }
  .sf_Ov2_Arrow svg {
    transform: rotate(90deg);
  }
  .sf_Ov2_After {
    padding: 0.5rem 1.5rem 2rem;
  }
}
@media (max-width: 575.98px) {
  .sf_Ov2_Before {
    min-height: 240px;
    margin: 1.25rem 1rem;
  }
  .sf_Ov2_Frag {
    font-size: 12px;
    padding: 7px 10px;
  }
  .sf_Ov2_Frag:nth-of-type(2) { left: 46% !important; }
  .sf_Ov2_Frag:nth-of-type(4) { left: 48% !important; }
  .sf_Ov2_Outcomes {
    grid-template-columns: 1fr;
  }
}

/* ---------- 46.7 Why YASH — two-stat layout ---------- */
.sf_WhyGrid {
  grid-template-areas:
    "a a b b"
    "a a c d";
}
@media (max-width: 1199.98px) {
  .sf_WhyGrid {
    grid-template-areas:
      "a a"
      "b b"
      "c d";
  }
}
@media (max-width: 575.98px) {
  .sf_WhyGrid {
    grid-template-areas: "a" "b" "c" "d";
  }
}
/* 30+ years — rising bars */
.sf_Years {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30px;
}
.sf_Years i {
  width: 5px;
  border-radius: 2px;
  background: rgb(var(--yt-400-rgb) / 0.55);
}
.sf_Years i:nth-child(1) { height: 25%; }
.sf_Years i:nth-child(2) { height: 37%; }
.sf_Years i:nth-child(3) { height: 50%; }
.sf_Years i:nth-child(4) { height: 62%; }
.sf_Years i:nth-child(5) { height: 75%; }
.sf_Years i:nth-child(6) { height: 87%; }
.sf_Years i:nth-child(7) { height: 100%; background: var(--yt-300); }

/* ---------- 46.8 Capabilities — bento + cross-link ---------- */
.sf_CapGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a b c"
    "a a d e";
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf_CapGrid > [data-area="a"] { grid-area: a; }
.sf_CapGrid > [data-area="b"] { grid-area: b; }
.sf_CapGrid > [data-area="c"] { grid-area: c; }
.sf_CapGrid > [data-area="d"] { grid-area: d; }
.sf_CapGrid > [data-area="e"] { grid-area: e; }
.sf_Cap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 240px;
  margin: 0;
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .sf_Cap:hover {
    box-shadow: var(--shadow-3);
    transform: translateY(-3px);
  }
}
.sf_Cap .sf_Icon {
  margin-bottom: auto;
}
.sf_Cap h3 {
  margin: 1.5rem 0 0;
  font-size: var(--fs-h5) !important;
  font-weight: 700;
  line-height: var(--lh-snug);
}
.sf_Cap p {
  margin: 0;
  font-size: var(--fs-body-sm) !important;
  line-height: 1.55 !important;
  color: var(--color-text-muted) !important;
}
.sf_Cap--lead {
  padding: 12px;
  background: var(--neutral-950);
}
.sf_Cap--lead .sf_Ph {
  --ar: 16 / 10;
  flex: 1 1 auto;
  min-height: 220px;
  aspect-ratio: auto;
}
.sf_Cap_Body {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem 1rem 1rem;
}
.sf_Cap--lead .sf_Icon {
  margin-bottom: 0;
  background: rgb(var(--yt-600-rgb) / 0.22);
  color: var(--yt-300);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.35);
}
.sf_Cap--lead h3 {
  margin: 0.5rem 0 0;
  color: #fff !important;
  font-size: var(--fs-h4) !important;
}
.sf_Cap--lead p {
  color: rgb(255 255 255 / 0.72) !important;
  font-size: var(--fs-body) !important;
}
@media (max-width: 1199.98px) {
  .sf_CapGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "a a"
      "b c"
      "d e";
  }
}
@media (max-width: 575.98px) {
  .sf_CapGrid {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d" "e";
  }
  .sf_Cap {
    min-height: 0;
  }
}

.sf_Xlink {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: var(--grid-gap);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-xl);
  background: var(--yt-50);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-600-rgb) / 0.2);
  color: var(--color-heading);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast);
}
.sf_Xlink:hover {
  color: var(--color-heading);
  background: var(--yt-100);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-600-rgb) / 0.4);
}
.sf_Xlink .sf_Icon {
  background: var(--neutral-0);
}
.sf_Xlink_Text {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.4;
}
.sf_Xlink_Go {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
}
.sf_Xlink_Go .c-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}
.sf_Xlink:hover .c-arrow {
  transform: translate(2px, -2px);
}

/* ---------- 46.9 Differentiator — feature tiles with glyphs ---------- */
.sf_Features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf_Feature {
  gap: 0.75rem;
  min-height: 0;
}
.sf_Feature h3 {
  margin: 0;
  color: #fff !important;
  font-size: var(--fs-h5) !important;
  font-weight: 700;
  line-height: var(--lh-snug);
}
.sf_Feature p {
  margin: 0;
  font-size: var(--fs-body-sm) !important;
  line-height: 1.6 !important;
}
.sf_Glyph {
  height: 56px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.sf_Glyph--steps i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: rgb(255 255 255 / 0.12);
}
.sf_Glyph--steps i:nth-child(4) { background: rgb(var(--yt-400-rgb) / 0.5); }
.sf_Glyph--steps i:nth-child(5) { background: var(--yt-400); }
.sf_Glyph--map {
  align-items: stretch;
  gap: 0;
}
.sf_Map_Col {
  flex: none;
  width: 34%;
  display: grid;
  gap: 4px;
}
.sf_Map_Col i {
  border-radius: 3px;
  background: rgb(255 255 255 / 0.14);
}
.sf_Map_Col--to i {
  background: rgb(var(--yt-400-rgb) / 0.6);
}
.sf_Glyph--map svg {
  flex: 1 1 auto;
  height: 100%;
}
.sf_Glyph--map path {
  fill: none;
  stroke: var(--yt-300);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
  animation: sfConverge 1.6s linear infinite reverse;
}
@keyframes sfConverge {
  to { stroke-dashoffset: -14; } /* two dash periods (3 + 4) for a seamless loop */
}
.sf_Glyph--suite svg,
.sf_Glyph--shield svg {
  height: 100%;
  width: auto;
  overflow: visible;
}
.sf_Glyph--suite path {
  fill: none;
  stroke: rgb(255 255 255 / 0.22);
  stroke-width: 1.2;
}
.sf_Glyph--suite circle {
  fill: rgb(var(--yt-400-rgb) / 0.6);
}
.sf_Glyph--suite circle.is-hub {
  fill: var(--yt-300);
}
.sf_Glyph--shield path {
  fill: rgb(var(--yt-600-rgb) / 0.22);
  stroke: var(--yt-300);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.sf_Glyph--shield .is-check {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: sfCheck 3.2s var(--ease-out) infinite;
}
@keyframes sfCheck {
  0%, 15% { stroke-dashoffset: 30; }
  45%, 100% { stroke-dashoffset: 0; }
}
@media (max-width: 1199.98px) {
  .sf_Features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .sf_Features {
    grid-template-columns: 1fr;
  }
}

/* ---------- 46.10 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sf_Sec *,
  .sf_Sec *::before,
  .sf_Sec *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .sf_Glyph--shield .is-check {
    stroke-dashoffset: 0;
  }
} 

/* ==========================================================================
   47. FleXtremeBIMS — three sections (.fx_*)
   Used on: FleXtremeBIMS page on sap-inner.php (ACF adhoc blocks)

   Overview (isometric layer stack) · Why YASH (six-figure proof bento, ink) ·
   Differentiator (tool bento + outcomes, ink)
   Runtime: the "FX sections" block in sap-inner.php (tile spotlight only);
   counters use [data-count], reveals .fade-up / [data-anim-group].
   Same component kit as § 45 / § 46 under its own prefix.

   CONTENTS
   47.1 Scope tokens (only what common § 00 lacks) + ink surface
   47.2 Section shell, heading, icon chip, tags
   47.3 Proof tile recipe (ink)
   47.4 Ambient background
   47.5 Overview — isometric layer stack
   47.6 Why YASH — intro + six figures
   47.7 Differentiator — tools + outcomes
   47.8 Template fit (wpautop safety net)
   47.9 Reduced motion
   ========================================================================== */
/* ---------- 47.1 Scope tokens ----------
   Colours, type, radii, shadows and motion come from global-inner.css § 00
   (the source file re-declared the purple ramp with different values).
   Only the tokens it does not define are added here, scoped to .fx_Sec. */
.fx_Sec {
  --color-bg: var(--neutral-0);
  --ink-700: #1c1b24;
  --fs-body-lg: var(--fs-lede);
  --fs-body-sm: var(--fs-sm);
  --fs-caption: var(--fs-xs);
  --lh-normal: 1.6;
  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-caps: 0.1em;
  --section-head-gap: var(--stack-head);
  --grid-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --card-pad: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  --shadow-3: 0 0 0 1px rgb(var(--ink-rgb) / 0.06), 0 8px 16px -4px rgb(var(--ink-rgb) / 0.08),
    0 32px 64px -12px rgb(var(--ink-rgb) / 0.18);
  /* Below the fixed header + sticky .page_Navigation (same offset as the template's .sticky) */
  --fx-sticky-top: 100px;
}

/* Inverse — the one ink surface. Re-maps roles, components adapt. */
.fx_Sec--ink {
  --color-bg: var(--ink-900);
  --color-surface: var(--ink-800);
  --color-heading: #ffffff;
  --color-text: rgb(255 255 255 / 0.72);
  --color-text-muted: rgb(255 255 255 / 0.62);
  --color-text-subtle: rgb(255 255 255 / 0.5);
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.24);
  --color-focus: var(--yt-300);
  color-scheme: dark;
}


/* ---------- 47.2 Section shell ---------- */
.fx_Sec {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow-x: clip;
  scroll-margin-top: 140px; /* header + page navigation, for #nav-* links */
}
.fx_Sec--subtle {
  --color-bg: var(--neutral-50);
}
.fx_Sec--ink {
  overflow: hidden;
}
/* Neutralise sap.css § 01 (p dark) and common § 02 (ul li grey) inside the scope */
.fx_Sec p,
.fx_Sec li {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.fx_Sec h2,
.fx_Sec h3,
.fx_Sec h4 {
  color: var(--color-heading);
  font-family: var(--font-sans);
  letter-spacing: var(--ls-snug);
}
.fx_Sec section {
  background: transparent;
}
.fx_Sec :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.fx_Head {
  display: grid;
  gap: 1rem;
  max-width: 60rem;
  margin-bottom: var(--section-head-gap);
}
@media (min-width: 992px) {
  .fx_Head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: end;
  }
}
.fx_Eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--color-brand) !important;
}
.fx_Eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.fx_Sec--ink .fx_Eyebrow {
  color: var(--yt-300) !important;
}
.fx_Head .fx_Eyebrow {
  margin-bottom: 0;
}
.fx_Title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight) !important;
  text-wrap: balance;
}
.fx_Title--md {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.fx_Lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.65 !important;
  color: var(--color-text-muted) !important;
  text-wrap: pretty;
}
@media (min-width: 992px) {
  .fx_Sticky {
    position: sticky;
    top: var(--fx-sticky-top);
  }
}

/* Icon chip — 44px, hairline ring */
.fx_Icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.fx_Icon svg {
  width: 22px;
  height: 22px;
}
.fx_Sec--ink .fx_Icon {
  background: rgb(var(--yt-600-rgb) / 0.18);
  color: var(--yt-300);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.35);
}

/* Tags */
.fx_Tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fx_Tags li {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--yt-50);
  color: var(--yt-700) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 600;
  line-height: 1.3 !important;
}
.fx_Tags li::first-letter {
  text-transform: uppercase; /* source text keeps the content doc's casing */
}
.fx_Sec--ink .fx_Tags li {
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.84) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}


/* ---------- 47.3 Proof tile recipe (inverse) ---------- */

.fx_Tile {
  --mx: -500px;
  --my: -500px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 240px;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  container-type: inline-size;
}
/* Border light — radial fill masked to a 1px ring (same recipe as LeanIX / Signavio) */
.fx_Tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.fx_Tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .fx_WhyGrid:hover .fx_Tile::before,
  .fx_WhyGrid:hover .fx_Tile::after {
    opacity: 1;
  }
}
.fx_Why_Intro {
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.fx_Why_Intro .fx_Title {
  max-width: 18ch;
}
.fx_Why_Intro p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.7 !important;
}
.fx_Why_Media {
  padding: 0;
  min-height: 260px;
}
.fx_Why_Media .fx_Ph {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.fx_Stat {
  justify-content: space-between;
  gap: 1.5rem;
}
.fx_Stat_Top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fx_Figure {
  display: flex;
  align-items: flex-start;
  margin: 0 0 0.5rem;
  font-size: min(clamp(2.75rem, 2rem + 2.4vw, 4.25rem), 26cqi) !important;
  font-weight: 400;
  line-height: 0.95 !important;
  letter-spacing: -0.045em;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fx_Figure sup {
  top: 0.15em;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--yt-400);
  margin-left: 0.04em;
}
.fx_Stat_Label {
  margin: 0;
  font-size: var(--fs-body) !important;
}

/* ---------- 47.4 Ambient background (shared recipe) ---------- */
.fx_Ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fx_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.fx_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -18%;
  right: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: fxDriftA 28s ease-in-out infinite alternate;
}
.fx_Blob--b {
  width: 36vw;
  height: 36vw;
  max-width: 560px;
  max-height: 560px;
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgb(var(--yt-400-rgb) / 0.55), transparent 65%);
  animation: fxDriftB 34s ease-in-out infinite alternate;
}
@keyframes fxDriftA {
  to { transform: translate(-14vw, 18vh) scale(1.12); }
}
@keyframes fxDriftB {
  to { transform: translate(16vw, -12vh) scale(0.92); }
}
.fx_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.2) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.fx_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.3);
}
@media (max-width: 575.98px) {
  .fx_Blob {
    filter: blur(60px);
  }
}


/* ---------- 47.5 Overview — isometric layer stack ----------
   Four plates drawn in isometric (rotateX + rotateZ). Hovering a layer in
   the list lifts its plate (CSS :has, no JS); at rest the plates breathe
   in sequence. Automation is the foundation plate and the brand fill. */
.fx_Ov2_Grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.fx_Iso {
  /* geometry: plate side --pw, isometric = rotateX(58deg) rotateZ(-45deg)
     projected half-width = pw × 0.7071, right corner sits pw × 0.3747 below the top */
  --pw: 230px;
  --gap: 66px;
  --top0: 34px;
  --cx: 40%;
  position: relative;
  height: 460px;
  border-radius: 28px;
  background: radial-gradient(closest-side, var(--neutral-0) 40%, var(--neutral-50));
  box-shadow: inset 0 0 0 1px var(--color-border);
  overflow: hidden;
}
.fx_Iso::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--ink-rgb) / 0.08) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, transparent 55%, #000 100%);
  mask-image: radial-gradient(closest-side, transparent 55%, #000 100%);
}
.fx_Iso_Plate {
  --lift: 0px;
  position: absolute;
  left: var(--cx);
  top: calc(var(--top0) + var(--y) * var(--gap) - var(--lift));
  z-index: calc(10 - var(--i));
  width: var(--pw);
  height: var(--pw);
  margin-left: calc(var(--pw) / -2);
  margin-top: calc(var(--pw) * -0.5 + var(--pw) * 0.3747);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--neutral-0), var(--neutral-50));
  box-shadow: inset 0 0 0 1px var(--color-border-strong), 0 16px 0 -4px rgb(var(--ink-rgb) / 0.06),
    0 30px 40px -18px rgb(var(--ink-rgb) / 0.35);
  transform: rotateX(58deg) rotateZ(-45deg);
  transition: top 0.45s var(--ease-out), box-shadow 0.45s var(--ease-standard), opacity 0.45s;
  animation: fxBreathe 8s var(--ease-standard) infinite;
  animation-delay: calc(var(--i) * 2s);
}
.fx_Iso_Plate--auto {
  background: linear-gradient(135deg, var(--yt-500), var(--yt-700));
  box-shadow: 0 16px 0 -4px rgb(58 0 166 / 0.5), 0 34px 50px -16px rgb(var(--yt-600-rgb) / 0.6);
}
@keyframes fxBreathe {
  0%, 18%, 100% { translate: 0 0; }
  8% { translate: 0 -12px; }
}
/* upright tags at each plate's right corner (never covered by the plate above) */
.fx_Iso_Tag {
  position: absolute;
  z-index: 20;
  left: calc(var(--cx) + var(--pw) * 0.7071 + 10px);
  top: calc(var(--top0) + var(--y) * var(--gap) + var(--pw) * 0.3747 - 14px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--neutral-0);
  box-shadow: var(--shadow-2);
  color: var(--color-heading);
  font-size: var(--fs-caption);
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.45s var(--ease-out), box-shadow var(--dur-base), opacity var(--dur-base);
}
.fx_Iso_Tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--neutral-300);
}
.fx_Iso_Tag--auto::before { background: var(--color-brand); }
.fx_Iso_Shadow {
  position: absolute;
  left: var(--cx);
  top: calc(var(--top0) + 3 * var(--gap) + var(--pw) * 0.62);
  width: calc(var(--pw) * 1.3);
  height: 54px;
  margin-left: calc(var(--pw) * -0.65);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--yt-600-rgb) / 0.3), transparent);
  filter: blur(6px);
}
/* list */
.fx_Ov2_List {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fx_Ov2_Item {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 16px;
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  transition: background-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base);
}
.fx_Ov2_Item + .fx_Ov2_Item::before {
  content: "";
  position: absolute;
  left: 30px;
  top: -14px;
  height: 28px;
  border-left: 1.5px dashed var(--color-border-strong);
}
.fx_Ov2_Dot {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 7px;
  background: var(--neutral-0);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
  transform: rotate(45deg) scale(0.8);
  transition: background-color var(--dur-base), box-shadow var(--dur-base);
}
.fx_Ov2_Item--auto .fx_Ov2_Dot { background: var(--color-brand); box-shadow: none; }
.fx_Ov2_Item h3 {
  margin: 0 0 4px;
  font-size: var(--fs-h5) !important;
  font-weight: 700;
  line-height: var(--lh-snug);
}
.fx_Ov2_Item p {
  margin: 0;
  font-size: var(--fs-body-sm) !important;
  line-height: 1.55 !important;
  color: var(--color-text-muted) !important;
}
@media (hover: hover) {
  .fx_Ov2_Item:hover {
    background: var(--neutral-0);
    box-shadow: var(--shadow-2);
  }
  .fx_Ov2_Item:hover .fx_Ov2_Dot { background: var(--color-brand); box-shadow: 0 0 0 5px rgb(var(--yt-600-rgb) / 0.15); }
  /* hovering the list pauses the breathing and lifts the matching plate */
  .fx_Ov2_Grid:has(.fx_Ov2_Item:hover) .fx_Iso_Plate { animation: none; opacity: 0.5; }
  .fx_Ov2_Grid:has(.fx_Ov2_Item:hover) .fx_Iso_Tag { opacity: 0.45; }
  .fx_Ov2_Grid:has(.fx_Ov2_Item[data-l="app"]:hover)   .fx_Iso_Tag[data-l="app"],
  .fx_Ov2_Grid:has(.fx_Ov2_Item[data-l="os"]:hover)    .fx_Iso_Tag[data-l="os"],
  .fx_Ov2_Grid:has(.fx_Ov2_Item[data-l="infra"]:hover) .fx_Iso_Tag[data-l="infra"],
  .fx_Ov2_Grid:has(.fx_Ov2_Item[data-l="auto"]:hover)  .fx_Iso_Tag[data-l="auto"] {
    opacity: 1;
    transform: translateY(-26px);
    box-shadow: 0 0 0 2px var(--color-brand), var(--shadow-3);
  }
  .fx_Ov2_Grid:has(.fx_Ov2_Item[data-l="app"]:hover)   .fx_Iso_Plate[data-l="app"],
  .fx_Ov2_Grid:has(.fx_Ov2_Item[data-l="os"]:hover)    .fx_Iso_Plate[data-l="os"],
  .fx_Ov2_Grid:has(.fx_Ov2_Item[data-l="infra"]:hover) .fx_Iso_Plate[data-l="infra"],
  .fx_Ov2_Grid:has(.fx_Ov2_Item[data-l="auto"]:hover)  .fx_Iso_Plate[data-l="auto"] {
    --lift: 26px;
    opacity: 1;
    box-shadow: inset 0 0 0 2px var(--color-brand), 0 40px 50px -16px rgb(var(--yt-600-rgb) / 0.45);
  }
}
/* rail */
.fx_Rail {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: clamp(1.5rem, 1rem + 1vw, 2rem);
  border-top: 1px solid var(--color-border);
}
.fx_Rail_Text {
  margin: 0 !important;
  max-width: 80ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.55 !important;
  color: var(--color-heading) !important;
  font-weight: 500;
}
.fx_Rail_List {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fx_Rail_List li {
  position: relative;
  margin: 0;
  padding: 8px 18px 8px 0;
  color: var(--color-brand) !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: 700;
  line-height: 1.3 !important;
}
.fx_Rail_List li::first-letter { text-transform: uppercase; }
.fx_Rail_List li + li { padding-left: 18px; }
.fx_Rail_List li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 2px;
  background: var(--yt-300);
  transform: rotate(45deg);
}
@media (max-width: 991.98px) {
  .fx_Ov2_Grid { grid-template-columns: 1fr; }
  .fx_Iso { --cx: 42%; }
}
@media (max-width: 575.98px) {
  .fx_Iso { --pw: 140px; --gap: 46px; --top0: 26px; --cx: 31%; height: 310px; }
  .fx_Iso_Plate { border-radius: 16px; }
  .fx_Iso_Tag { font-size: 11px; padding: 5px 10px 5px 7px; }
}

/* ---------- 47.6 Why YASH — intro + six figures ---------- */
.fx_WhyGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a  a  s1 s2"
    "a  a  s3 s4"
    "s5 s5 s6 s6";
}
.fx_WhyGrid > [data-area="a"]  { grid-area: a; }
.fx_WhyGrid > [data-area="s1"] { grid-area: s1; }
.fx_WhyGrid > [data-area="s2"] { grid-area: s2; }
.fx_WhyGrid > [data-area="s3"] { grid-area: s3; }
.fx_WhyGrid > [data-area="s4"] { grid-area: s4; }
.fx_WhyGrid > [data-area="s5"] { grid-area: s5; }
.fx_WhyGrid > [data-area="s6"] { grid-area: s6; }
@media (hover: hover) {
  .fx_WhyGrid:hover .fx_Tile::before,
  .fx_WhyGrid:hover .fx_Tile::after,
  .fx_ToolGrid:hover .fx_Tile::before,
  .fx_ToolGrid:hover .fx_Tile::after { opacity: 1; }
}
.fx_Stat { min-height: 220px; }
.fx_Figure small {
  margin-left: 0.18em;
  align-self: flex-end;
  padding-bottom: 0.12em;
  font-size: 0.36em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--yt-300);
}
.fx_Figure small.fx_Lt {
  margin: 0 0.12em 0 0;
  align-self: center;
  padding: 0;
  font-size: 0.6em;
  font-weight: 400;
  color: var(--yt-400);
}
.fx_Stat--wide { min-height: 0; }
@media (min-width: 768px) {
  .fx_Stat--wide { flex-direction: row-reverse; align-items: center; justify-content: space-between; }
  .fx_Stat--wide .fx_Stat_Top { flex-direction: row-reverse; gap: 1.25rem; }
}
/* 99% — gauge */
.fx_Gauge { width: 52px; height: 52px; transform: rotate(-90deg); }
.fx_Gauge circle { fill: none; stroke-width: 3.5; }
.fx_Gauge_Bg { stroke: rgb(255 255 255 / 0.1); }
.fx_Gauge_Fg { stroke: var(--yt-400); stroke-linecap: round; stroke-dasharray: 125.7; stroke-dashoffset: 1.3; }
/* 99.6% — uptime ticks, one short dip */
.fx_Ticks { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.fx_Ticks i { width: 4px; height: 100%; border-radius: 2px; background: rgb(var(--yt-400-rgb) / 0.6); }
.fx_Ticks i:nth-child(8) { height: 70%; background: rgb(255 255 255 / 0.18); }
/* 1.5 days — sweep */
.fx_Sweep { position: relative; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.16); }
.fx_Sweep i { position: absolute; left: 50%; top: 6px; width: 1.5px; height: 14px; margin-left: -0.75px; border-radius: 1px; background: var(--yt-300); transform-origin: 50% 14px; animation: fxSpin 6s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }
/* < 4 weeks — four blocks filled */
.fx_Weeks { display: flex; gap: 4px; }
.fx_Weeks i { width: 12px; height: 24px; border-radius: 3px; background: rgb(var(--yt-400-rgb) / 0.7); }
.fx_Weeks i:last-child { background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.7); }
/* 1,350+ — VM grid */
.fx_Rack { display: grid; grid-template-columns: repeat(12, 7px); gap: 3px; }
.fx_Rack i { width: 7px; height: 7px; border-radius: 2px; background: rgb(var(--yt-400-rgb) / 0.45); animation: fxBlink 4s ease-in-out infinite; }
.fx_Rack i:nth-child(3n) { animation-delay: 1.3s; }
.fx_Rack i:nth-child(5n) { animation-delay: 2.6s; background: var(--yt-300); }
@keyframes fxBlink { 50% { opacity: 0.35; } }
/* 24×7 — dial */
.fx_Dial { width: 52px; height: 52px; }
.fx_Dial_Ring { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 3; stroke-dasharray: 1.2 4.3; }
.fx_Dial_Hand { stroke: var(--yt-300); stroke-width: 2; stroke-linecap: round; transform-origin: 26px 26px; animation: fxSpin 12s linear infinite; }
.fx_Dial_Hub { fill: #fff; }
@media (max-width: 1199.98px) {
  .fx_WhyGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "a a" "s1 s2" "s3 s4" "s5 s5" "s6 s6";
  }
}
@media (max-width: 575.98px) {
  .fx_WhyGrid { grid-template-columns: 1fr; grid-template-areas: "a" "s1" "s2" "s3" "s4" "s5" "s6"; }
  .fx_Stat { min-height: 180px; }
}

/* ---------- 47.7 Differentiator — tool bento + outcomes (ink) ---------- */
.fx_ToolGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "amu amu basis cure"
    "amu amu sol   ewa";
  margin: 0 0 clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding: 0;
  list-style: none;
}
.fx_ToolGrid > [data-area="amu"]   { grid-area: amu; }
.fx_ToolGrid > [data-area="basis"] { grid-area: basis; }
.fx_ToolGrid > [data-area="cure"]  { grid-area: cure; }
.fx_ToolGrid > [data-area="sol"]   { grid-area: sol; }
.fx_ToolGrid > [data-area="ewa"]   { grid-area: ewa; }
.fx_Tool { gap: 0.75rem; min-height: 250px; margin: 0; }
.fx_Tool h3 {
  margin: 0;
  color: #fff !important;
  font-size: var(--fs-h5) !important;
  font-weight: 700;
  line-height: var(--lh-snug);
}
.fx_Tool p { margin: 0; font-size: var(--fs-body-sm) !important; line-height: 1.6 !important; }
.fx_Tool--amu {
  justify-content: flex-end;
  padding: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  background:
    radial-gradient(90% 70% at 100% 0%, rgb(var(--yt-600-rgb) / 0.32), transparent 60%),
    linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
}
.fx_Tool--amu h3 { font-size: var(--fs-h3) !important; }
.fx_Tool--amu p { max-width: 46ch; font-size: var(--fs-body) !important; }
/* AMURAA — the five tools orbiting their platform */
.fx_Orbit {
  --r: clamp(90px, 9vw, 128px);
  position: relative;
  width: calc(var(--r) * 2 + 40px);
  height: calc(var(--r) * 2 + 40px);
  margin: 0 auto auto;
}
.fx_Orbit::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px dashed rgb(var(--yt-400-rgb) / 0.4);
}
.fx_Orbit_Core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--neutral-950);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 0 0 8px rgb(var(--yt-600-rgb) / 0.25), 0 0 40px rgb(var(--yt-600-rgb) / 0.6);
}
.fx_Orbit_Chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.45);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* small glyphs on the four other tiles */
.fx_Glyph { height: 48px; margin-bottom: auto; display: flex; align-items: center; }
.fx_Glyph--pipe { gap: 0; }
.fx_Glyph--pipe i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(var(--yt-400-rgb) / 0.6); flex: none; }
.fx_Glyph--pipe i.is-main { width: 34px; height: 34px; background: var(--yt-500); box-shadow: 0 0 0 5px rgb(var(--yt-600-rgb) / 0.25); }
.fx_Glyph--pipe b { flex: 1; max-width: 36px; height: 2px; background: repeating-linear-gradient(90deg, var(--yt-400) 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: fxDash 1s linear infinite; }
@keyframes fxDash { to { background-position: 16px 0; } }
.fx_Glyph--click { position: relative; width: 96px; }
.fx_Btn { width: 72px; height: 28px; border-radius: var(--radius-pill); background: var(--yt-500); box-shadow: 0 0 0 0 rgb(var(--yt-400-rgb) / 0.6); animation: fxPress 2.8s ease-in-out infinite; }
.fx_Glyph--click svg { position: absolute; left: 52px; top: 22px; width: 20px; height: 20px; fill: #fff; stroke: var(--neutral-950); stroke-width: 1.2; }
@keyframes fxPress { 0%, 40%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(var(--yt-400-rgb) / 0.6); } 50% { transform: scale(0.94); } 70% { box-shadow: 0 0 0 12px rgb(var(--yt-400-rgb) / 0); } }
.fx_Glyph--sync { gap: 8px; }
.fx_Glyph--sync > i { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgb(var(--yt-400-rgb) / 0.6); }
.fx_Glyph--sync > i:last-child { background: rgb(var(--yt-600-rgb) / 0.4); }
.fx_Glyph--sync span { position: relative; width: 56px; height: 18px; }
.fx_Glyph--sync b { position: absolute; left: 0; right: 0; height: 1.5px; background: rgb(255 255 255 / 0.2); }
.fx_Glyph--sync b:first-child { top: 4px; }
.fx_Glyph--sync b:last-child { bottom: 4px; }
.fx_Glyph--sync b::after { content: ""; position: absolute; top: -2.25px; width: 6px; height: 6px; border-radius: 50%; background: var(--yt-300); animation: fxRight 2.2s ease-in-out infinite; }
.fx_Glyph--sync b:last-child::after { animation-name: fxLeft; animation-delay: 1.1s; }
@keyframes fxRight { from { left: 0; } to { left: calc(100% - 6px); } }
@keyframes fxLeft { from { left: calc(100% - 6px); } to { left: 0; } }
.fx_Glyph--ewa { align-items: flex-end; gap: 5px; }
.fx_Glyph--ewa i { width: 10px; border-radius: 3px 3px 0 0; background: rgb(var(--yt-400-rgb) / 0.4); }
.fx_Glyph--ewa i:last-child { background: var(--yt-300); }
@media (max-width: 1199.98px) {
  .fx_ToolGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "amu amu" "basis cure" "sol ewa"; }
}
@media (max-width: 575.98px) {
  .fx_ToolGrid { grid-template-columns: 1fr; grid-template-areas: "amu" "basis" "cure" "sol" "ewa"; }
  .fx_Orbit { --r: 96px; }
}

.fx_Outcomes_Title {
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-h4) !important;
  font-weight: 600;
}
.fx_Outcomes_List {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fx_Outcomes_List li {
  position: relative;
  margin: 0;
  padding-left: 34px;
  color: rgb(255 255 255 / 0.84) !important;
  font-size: var(--fs-body) !important;
  line-height: 1.5 !important;
}
.fx_Outcomes_List li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgb(var(--yt-600-rgb) / 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.5);
}
@media (max-width: 1199.98px) { .fx_Outcomes_List { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .fx_Outcomes_List { grid-template-columns: 1fr; } }

/* ---------- 47.8 Template fit ----------
   § 03 paints .services_offering_Adhoc black; let the section surface show.
   Safety net in case WordPress still injects <br>/<p> into an ACF block. */
.services_offering_Adhoc:has(.fx_Sec) { background: transparent; }
.fx_Sec .fx_Icon > br,
.fx_Sec .fx_Stat_Top > br,
.fx_Sec .fx_Orbit > br,
.fx_Sec .fx_Glyph > br,
.fx_Sec .fx_Ambient > br { display: none; }
.fx_Sec p:empty { display: none; }

/* ---------- 47.9 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx_Sec *,
  .fx_Sec *::before,
  .fx_Sec *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}
/* ==========================================================================
   48. SAP Data Archiving — five sections (.ar_*)
   Used on: SAP Data Archiving page on sap-inner.php (ACF adhoc blocks)

   Stat strip · Overview (footprint flow + five benefits) · Why YASH (ink) ·
   Offerings (lifecycle timeline) · Differentiator (tool pipeline, ink)
   Runtime: the "AR sections" block in sap-inner.php (tile spotlight only);
   counters use [data-count], reveals .fade-up / [data-anim-group].
   Same component kit as § 45–47 under its own prefix.

   CONTENTS
   48.1  Scope tokens (only what common § 00 lacks) + ink surface
   48.2  Section shell, heading, icon chip, tags
   48.3  Image placeholder
   48.4  Proof tile recipe (ink)
   48.5  Ambient background
   48.6  Stat strip
   48.7  Overview — footprint flow + benefits
   48.8  Why YASH — intro + media + tiles
   48.9  Offerings — lifecycle timeline
   48.10 Differentiator — tool pipeline
   48.11 Template fit (wpautop safety net)
   48.12 Reduced motion
   ========================================================================== */
/* ---------- 48.1 Scope tokens ----------
   Colours, type, radii, shadows and motion come from global-inner.css § 00
   (the source file re-declared the purple ramp with different values).
   Only the tokens it does not define are added here, scoped to .ar_Sec. */
.ar_Sec {
  --color-bg: var(--neutral-0);
  --ink-700: #1c1b24;
  --fs-body-lg: var(--fs-lede);
  --fs-body-sm: var(--fs-sm);
  --fs-caption: var(--fs-xs);
  --lh-normal: 1.6;
  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-caps: 0.1em;
  --section-head-gap: var(--stack-head);
  --grid-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --card-pad: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  --shadow-3: 0 0 0 1px rgb(var(--ink-rgb) / 0.06), 0 8px 16px -4px rgb(var(--ink-rgb) / 0.08),
    0 32px 64px -12px rgb(var(--ink-rgb) / 0.18);
  /* Below the fixed header + sticky .page_Navigation (same offset as the template's .sticky) */
  --ar-sticky-top: 100px;
}

/* Inverse — the one ink surface. Re-maps roles, components adapt. */
.ar_Sec--ink {
  --color-bg: var(--ink-900);
  --color-surface: var(--ink-800);
  --color-heading: #ffffff;
  --color-text: rgb(255 255 255 / 0.72);
  --color-text-muted: rgb(255 255 255 / 0.62);
  --color-text-subtle: rgb(255 255 255 / 0.5);
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.24);
  --color-focus: var(--yt-300);
  color-scheme: dark;
}


/* ---------- 48.2 Section shell ---------- */
.ar_Sec {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow-x: clip;
  scroll-margin-top: 140px; /* header + page navigation, for #nav-* links */
}
.ar_Sec--subtle {
  --color-bg: var(--neutral-50);
}
.ar_Sec--ink {
  overflow: hidden;
}
/* Neutralise sap.css § 01 (p dark) and common § 02 (ul li grey) inside the scope */
.ar_Sec p,
.ar_Sec li {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.ar_Sec h2,
.ar_Sec h3,
.ar_Sec h4 {
  color: var(--color-heading);
  font-family: var(--font-sans);
  letter-spacing: var(--ls-snug);
}
.ar_Sec section {
  background: transparent;
}
.ar_Sec :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.ar_Head {
  display: grid;
  gap: 1rem;
  max-width: 60rem;
  margin-bottom: var(--section-head-gap);
}
@media (min-width: 992px) {
  .ar_Head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: end;
  }
}
.ar_Eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--color-brand) !important;
}
.ar_Eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.ar_Sec--ink .ar_Eyebrow {
  color: var(--yt-300) !important;
}
.ar_Head .ar_Eyebrow {
  margin-bottom: 0;
}
.ar_Title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight) !important;
  text-wrap: balance;
}
.ar_Title--md {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.ar_Lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.65 !important;
  color: var(--color-text-muted) !important;
  text-wrap: pretty;
}
@media (min-width: 992px) {
  .ar_Sticky {
    position: sticky;
    top: var(--ar-sticky-top);
  }
}

/* Icon chip — 44px, hairline ring */
.ar_Icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.ar_Icon svg {
  width: 22px;
  height: 22px;
}
.ar_Sec--ink .ar_Icon {
  background: rgb(var(--yt-600-rgb) / 0.18);
  color: var(--yt-300);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.35);
}

/* Tags */
.ar_Tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar_Tags li {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--yt-50);
  color: var(--yt-700) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 600;
  line-height: 1.3 !important;
}
.ar_Tags li::first-letter {
  text-transform: uppercase; /* source text keeps the content doc's casing */
}
.ar_Sec--ink .ar_Tags li {
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.84) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}


/* ---------- 48.3 Image placeholder ----------
   Swap each .ar_Ph for <img class="ar_Img" src="" alt=""> from the media
   library. The tag text is a brief for the art director; it is not content. */
.ar_Ph {
  --ar: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: var(--ar);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
  color: var(--neutral-400);
}
.ar_Ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ar_Ph_Icon {
  position: relative;
  width: 40px;
  height: 40px;
}
.ar_Ph_Tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.85);
  color: var(--neutral-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ar_Ph--ink {
  background: radial-gradient(80% 70% at 75% 20%, rgb(var(--yt-600-rgb) / 0.35), transparent 70%),
    linear-gradient(135deg, var(--ink-700), var(--ink-900));
  color: rgb(255 255 255 / 0.28);
}
.ar_Ph--ink::before {
  background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
}
.ar_Ph--ink .ar_Ph_Tag {
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ar_Img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


/* ---------- 48.4 Proof tile recipe (inverse) ---------- */

.ar_Tile {
  --mx: -500px;
  --my: -500px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 240px;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  container-type: inline-size;
}
/* Border light — radial fill masked to a 1px ring (same recipe as LeanIX / Signavio) */
.ar_Tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ar_Tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .ar_WhyGrid:hover .ar_Tile::before,
  .ar_WhyGrid:hover .ar_Tile::after {
    opacity: 1;
  }
}
.ar_Why_Intro {
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.ar_Why_Intro .ar_Title {
  max-width: 18ch;
}
.ar_Why_Intro p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.7 !important;
}
.ar_Why_Media {
  padding: 0;
  min-height: 260px;
}
.ar_Why_Media .ar_Ph {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.ar_Stat {
  justify-content: space-between;
  gap: 1.5rem;
}
.ar_Stat_Top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ar_Figure {
  display: flex;
  align-items: flex-start;
  margin: 0 0 0.5rem;
  font-size: min(clamp(2.75rem, 2rem + 2.4vw, 4.25rem), 26cqi) !important;
  font-weight: 400;
  line-height: 0.95 !important;
  letter-spacing: -0.045em;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ar_Figure sup {
  top: 0.15em;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--yt-400);
  margin-left: 0.04em;
}
.ar_Stat_Label {
  margin: 0;
  font-size: var(--fs-body) !important;
}

/* ---------- 48.5 Ambient background (shared recipe) ---------- */
.ar_Ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ar_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.ar_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -18%;
  right: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: arDriftA 28s ease-in-out infinite alternate;
}
.ar_Blob--b {
  width: 36vw;
  height: 36vw;
  max-width: 560px;
  max-height: 560px;
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgb(var(--yt-400-rgb) / 0.55), transparent 65%);
  animation: arDriftB 34s ease-in-out infinite alternate;
}
@keyframes arDriftA {
  to { transform: translate(-14vw, 18vh) scale(1.12); }
}
@keyframes arDriftB {
  to { transform: translate(16vw, -12vh) scale(0.92); }
}
.ar_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.2) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.ar_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.3);
}
@media (max-width: 575.98px) {
  .ar_Blob {
    filter: blur(60px);
  }
}


/* ---------- 48.6 Stat strip ---------- */
.ar_Stats { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); border-bottom: 1px solid var(--color-border); }
.ar_StatRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.ar_StatItem { padding: 0 clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.ar_StatItem:first-child { padding-left: 0; }
.ar_StatItem + .ar_StatItem { border-left: 1px solid var(--color-border); }
.ar_StatFig {
  display: flex;
  align-items: flex-start;
  margin: 0 0 0.5rem;
  font-size: clamp(2.75rem, 2rem + 2.6vw, 4.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ar_StatFig sup { top: 0.15em; margin-left: 0.04em; font-size: 0.48em; font-weight: 600; letter-spacing: 0; color: var(--color-brand); }
.ar_StatFig small { align-self: flex-end; margin-left: 0.18em; padding-bottom: 0.1em; font-size: 0.34em; font-weight: 700; letter-spacing: 0; color: var(--color-brand); }
.ar_StatItem dd { margin: 0; max-width: 30ch; color: var(--color-text-muted); font-size: var(--fs-body); line-height: 1.5; }
@media (max-width: 767.98px) {
  .ar_StatRow { grid-template-columns: 1fr; gap: 1.5rem; }
  .ar_StatItem, .ar_StatItem:first-child { padding: 0; }
  .ar_StatItem + .ar_StatItem { border-left: 0; border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
}

/* ---------- 48.7 Overview — footprint flow + five benefits ---------- */
.ar_Overview .ar_Lead { margin-top: 1.5rem; }
.ar_Flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(60px, 1fr) 1fr;
  align-items: center;
  gap: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: 28px;
  background: radial-gradient(closest-side, var(--neutral-0) 40%, var(--neutral-50));
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.ar_Flow_Db, .ar_Flow_Vault {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 26px 18px 18px;
  border-radius: 18px;
  background: var(--neutral-0);
  box-shadow: var(--shadow-2);
}
.ar_Flow_Db i, .ar_Flow_Vault i { display: block; height: 14px; border-radius: 4px; }
.ar_Flow_Db i.is-hot { background: var(--color-brand); }
.ar_Flow_Db i.is-cold { background: var(--neutral-200); animation: arFade 6s var(--ease-standard) infinite; }
.ar_Flow_Db i.is-cold:nth-of-type(4) { animation-delay: 0.6s; }
.ar_Flow_Db i.is-cold:nth-of-type(5) { animation-delay: 1.2s; }
.ar_Flow_Db i.is-cold:nth-of-type(6) { animation-delay: 1.8s; }
@keyframes arFade { 0%, 15% { opacity: 1; } 40%, 70% { opacity: 0.25; } 95%, 100% { opacity: 1; } }
.ar_Flow_Vault { background: var(--neutral-950); }
.ar_Flow_Vault i { background: rgb(255 255 255 / 0.16); }
.ar_Flow_Vault i:nth-child(odd) { background: rgb(var(--yt-400-rgb) / 0.45); }
.ar_Flow_Ico { position: absolute; top: -14px; left: 50%; width: 28px; height: 28px; margin-left: -14px; padding: 4px; border-radius: 9px; background: var(--neutral-0); color: var(--color-brand); box-shadow: var(--shadow-2); }
.ar_Flow_Vault .ar_Flow_Ico { background: var(--neutral-800); color: var(--yt-300); }
.ar_Flow_Path { position: relative; height: 2px; margin: 0 10px; background: repeating-linear-gradient(90deg, var(--neutral-300) 0 5px, transparent 5px 10px); }
.ar_Flow_Path b { position: absolute; top: -5px; left: 0; width: 18px; height: 12px; border-radius: 3px; background: var(--neutral-300); opacity: 0; animation: arPacket 3.2s var(--ease-standard) infinite; }
.ar_Flow_Path b:nth-child(2) { animation-delay: 0.8s; }
.ar_Flow_Path b:nth-child(3) { animation-delay: 1.6s; }
.ar_Flow_Path b:nth-child(4) { animation-delay: 2.4s; }
@keyframes arPacket { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; background: var(--yt-400); } 100% { left: calc(100% - 18px); opacity: 0; } }

.ar_Benefits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: clamp(3rem, 2rem + 3vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
}
.ar_Benefit {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
@media (hover: hover) { .ar_Benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); } }
.ar_Benefit p { margin: 0; color: var(--color-heading) !important; font-size: var(--fs-body) !important; font-weight: 600; line-height: 1.45 !important; }
.ar_Statement {
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0 !important;
  max-width: 80%;
  text-align: center;
  font-size: var(--fs-h4) !important;
  font-weight: 500;
  line-height: 1.45 !important;
  letter-spacing: var(--ls-snug);
  color: var(--color-heading) !important;
  text-wrap: balance;
}
@media (max-width: 1199.98px) { .ar_Benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .ar_Benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .ar_Benefits { grid-template-columns: 1fr; }
  .ar_Benefit { flex-direction: row; align-items: center; }
  .ar_Flow { padding: 1.25rem; }
  .ar_Flow_Db, .ar_Flow_Vault { padding: 22px 12px 12px; }
}

/* ---------- 48.8 Why YASH — intro + media + scan tiles ---------- */
.ar_WhyGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a b b"
    "a a c d";
}
.ar_WhyGrid > [data-area="a"] { grid-area: a; }
.ar_WhyGrid > [data-area="b"] { grid-area: b; }
.ar_WhyGrid > [data-area="c"] { grid-area: c; }
.ar_WhyGrid > [data-area="d"] { grid-area: d; }
@media (hover: hover) {
  .ar_Tools:hover .ar_Tile::before,
  .ar_Tools:hover .ar_Tile::after { opacity: 1; }
}
.ar_Gauge { width: 52px; height: 52px; transform: rotate(-90deg); }
.ar_Gauge circle { fill: none; stroke-width: 3.5; }
.ar_Gauge_Bg { stroke: rgb(255 255 255 / 0.1); }
.ar_Gauge_Fg { stroke: var(--yt-400); stroke-linecap: round; stroke-dasharray: 125.7; stroke-dashoffset: 1.3; }
.ar_Approach { justify-content: space-between; gap: 1.5rem; }
.ar_Approach .ar_Tags { flex-direction: column; align-items: flex-start; }
@media (max-width: 1199.98px) {
  .ar_WhyGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b b" "c d"; }
}
@media (max-width: 575.98px) {
  .ar_WhyGrid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
}

/* ---------- 48.9 Offerings — lifecycle timeline ----------
   Desktop: a centre rail with cards alternating left / right.
   Below 992px: rail on the left, cards stacked. */
.ar_Head--center { max-width: 46rem; margin-inline: auto; text-align: center; justify-items: center; }
.ar_Timeline {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.ar_Timeline::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--yt-300), var(--color-brand) 50%, var(--yt-700));
}
.ar_Step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: center;
  margin: 0;
  padding: 10px 0;
}
.ar_Step_No {
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  justify-self: center;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--neutral-0);
  box-shadow: 0 0 0 4px var(--color-bg), inset 0 0 0 2px var(--color-brand);
  color: var(--color-brand);
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-base), color var(--dur-base);
}
.ar_Step_Card {
  grid-row: 1;
  grid-column: 1;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ar_Step:nth-child(even) .ar_Step_Card { grid-column: 3; }
.ar_Step_Card h3 { margin: 0 0 0.5rem; font-size: var(--fs-h4) !important; font-weight: 700; line-height: var(--lh-snug); }
.ar_Step_Card p { margin: 0; font-size: var(--fs-body-sm) !important; line-height: 1.6 !important; }
@media (hover: hover) {
  .ar_Step:hover .ar_Step_Card { box-shadow: var(--shadow-3); transform: translateY(-3px); }
  .ar_Step:hover .ar_Step_No { background: var(--color-brand); color: #fff; }
}
@media (min-width: 992px) {
  /* cards on opposite sides interleave, halving the timeline's height */
  .ar_Step + .ar_Step { margin-top: -44px; }
}
@media (max-width: 991.98px) {
  .ar_Timeline::before { left: 28px; }
  .ar_Step { grid-template-columns: 56px 1fr; column-gap: 1.25rem; }
  .ar_Step_No { grid-column: 1; }
  .ar_Step_Card, .ar_Step:nth-child(even) .ar_Step_Card { grid-column: 2; }
}

/* ---------- 48.10 Differentiator — tool pipeline (ink) ---------- */
.ar_Diff .ar_Title--md { max-width: 34ch; }
.ar_Tools {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar_Tool { gap: 1rem; min-height: 0; margin: 0; }
.ar_Tool_Top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ar_Tool_Fig { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: #fff; white-space: nowrap; }
.ar_Tool_Fig sup { top: -0.5em; font-size: 0.5em; font-weight: 600; color: var(--yt-400); }
.ar_Tool h3 { margin: 0; color: #fff !important; font-size: var(--fs-h5) !important; font-weight: 700; line-height: var(--lh-snug); }
.ar_Tool p { margin: 0; font-size: var(--fs-body-sm) !important; line-height: 1.6 !important; }
/* ArchIQ — scan finds archivable rows */
.ar_Scan { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; height: 44px; margin-block: 0.5rem; overflow: hidden; }
.ar_Scan i { border-radius: 4px; background: rgb(255 255 255 / 0.08); }
.ar_Scan i.is-hit { background: rgb(var(--yt-400-rgb) / 0.55); }
.ar_Scan::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, rgb(var(--yt-300-rgb) / 0.35), transparent); animation: arScan 3.6s ease-in-out infinite; }
@keyframes arScan { from { left: -30%; } to { left: 100%; } }
/* accelerator — blocks move from one system to the other */
.ar_Move { display: flex; align-items: center; gap: 8px; height: 44px; margin-block: 0.5rem; }
.ar_Move > span { flex: none; width: 40px; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgb(var(--yt-400-rgb) / 0.55); }
.ar_Move > span.is-to { background: rgb(var(--yt-600-rgb) / 0.4); }
.ar_Move b { position: relative; flex: 1; height: 12px; }
.ar_Move b::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: rgb(255 255 255 / 0.18); }
.ar_Move b i { position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 3px; background: var(--yt-300); opacity: 0; animation: arPacket 2.7s var(--ease-standard) infinite; }
.ar_Move b i:nth-child(2) { animation-delay: 0.9s; }
.ar_Move b i:nth-child(3) { animation-delay: 1.8s; }
/* CarveIQ — selected cells lifted out */
.ar_Carve { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; height: 44px; margin-block: 0.5rem; align-items: end; }
.ar_Carve i { height: 24px; border-radius: 4px; background: rgb(255 255 255 / 0.1); }
.ar_Carve i.is-out { background: var(--yt-400); animation: arLift 3s var(--ease-standard) infinite; }
.ar_Carve i.is-out:nth-child(5) { animation-delay: 0.3s; }
.ar_Carve i.is-out:nth-child(8) { animation-delay: 0.6s; }
@keyframes arLift { 0%, 20%, 100% { transform: none; } 45%, 75% { transform: translateY(-14px); } }
/* dashed connector behind the three tools (desktop) */
@media (min-width: 992px) {
  .ar_Tools::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 8%;
    right: 8%;
    height: 1.5px;
    z-index: -1;
    background: repeating-linear-gradient(90deg, rgb(var(--yt-400-rgb) / 0.5) 0 6px, transparent 6px 12px);
  }
}
@media (max-width: 991.98px) { .ar_Tools { grid-template-columns: 1fr; } }

.ar_Together {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem 3rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: clamp(1.5rem, 1rem + 1vw, 2rem);
  border-top: 1px solid var(--color-border);
}
.ar_Together p { margin: 0 !important; color: #fff !important; font-size: var(--fs-body-lg) !important; line-height: 1.55 !important; }
.ar_Together_Flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ar_Chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ar_Chip { padding: 7px 13px; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); color: rgb(255 255 255 / 0.86); font-size: var(--fs-caption); font-weight: 700; white-space: nowrap; }
.ar_Chip::first-letter { text-transform: uppercase; }
.ar_Chip--from { background: var(--yt-600); box-shadow: none; color: #fff; }
.ar_Arrow { width: 28px; height: 2px; background: var(--yt-300); position: relative; }
.ar_Arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--yt-300); border-right: 2px solid var(--yt-300); transform: rotate(45deg); }
@media (max-width: 991.98px) { .ar_Together { grid-template-columns: 1fr; } }

/* ---------- 48.11 Template fit ----------
   § 03 paints .services_offering_Adhoc black; let the section surface show.
   Safety net in case WordPress still injects <br>/<p> into an ACF block. */
.services_offering_Adhoc:has(.ar_Sec) { background: transparent; }
.ar_Sec .ar_Icon > br,
.ar_Sec .ar_Stat_Top > br,
.ar_Sec .ar_Flow > br,
.ar_Sec .ar_Flow_Db > br,
.ar_Sec .ar_Flow_Vault > br,
.ar_Sec .ar_Ambient > br,
.ar_Sec .ar_Together_Flow > br { display: none; }
.ar_Sec p:empty { display: none; }

/* ---------- 48.12 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ar_Sec *,
  .ar_Sec *::before,
  .ar_Sec *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   49. SAP Upgrade (FleXtremElevate) — four sections (.up_*)
   Used on: SAP Upgrade page on sap-inner.php (ACF adhoc blocks)

   Stat strip · Overview (questions → FleXtremElevate → focus areas) ·
   Why YASH (proof bento, ink) · Differentiator (feature steps + dashboards, ink)
   Runtime: the "UP sections" block in sap-inner.php (tile spotlight only);
   counters use [data-count], reveals .fade-up / [data-anim-group].
   Same component kit as § 45–48 under its own prefix.

   CONTENTS
   49.1  Scope tokens (only what common § 00 lacks) + ink surface
   49.2  Section shell, heading, icon chip, tags
   49.3  Image placeholder
   49.4  Proof tile recipe (ink)
   49.5  Ambient background
   49.6  Stat strip
   49.7  Overview — questions → hub → focus areas
   49.8  Why YASH — intro + media + detail tiles
   49.9  Differentiator — feature steps + layered dashboards
   49.10 Template fit (wpautop safety net)
   49.11 Reduced motion
   ========================================================================== */
/* ---------- 49.1 Scope tokens ----------
   Colours, type, radii, shadows and motion come from global-inner.css § 00
   (the source file re-declared the purple ramp with different values).
   Only the tokens it does not define are added here, scoped to .up_Sec. */
.up_Sec {
  --color-bg: var(--neutral-0);
  --ink-700: #1c1b24;
  --fs-body-lg: var(--fs-lede);
  --fs-body-sm: var(--fs-sm);
  --fs-caption: var(--fs-xs);
  --lh-normal: 1.6;
  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-caps: 0.1em;
  --section-head-gap: var(--stack-head);
  --grid-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --card-pad: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  --shadow-3: 0 0 0 1px rgb(var(--ink-rgb) / 0.06), 0 8px 16px -4px rgb(var(--ink-rgb) / 0.08),
    0 32px 64px -12px rgb(var(--ink-rgb) / 0.18);
  /* Below the fixed header + sticky .page_Navigation (same offset as the template's .sticky) */
  --up-sticky-top: 100px;
}

/* Inverse — the one ink surface. Re-maps roles, components adapt. */
.up_Sec--ink {
  --color-bg: var(--ink-900);
  --color-surface: var(--ink-800);
  --color-heading: #ffffff;
  --color-text: rgb(255 255 255 / 0.72);
  --color-text-muted: rgb(255 255 255 / 0.62);
  --color-text-subtle: rgb(255 255 255 / 0.5);
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.24);
  --color-focus: var(--yt-300);
  color-scheme: dark;
}


/* ---------- 49.2 Section shell ---------- */
.up_Sec {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow-x: clip;
  scroll-margin-top: 140px; /* header + page navigation, for #nav-* links */
}
.up_Sec--subtle {
  --color-bg: var(--neutral-50);
}
.up_Sec--ink {
  overflow: hidden;
}
/* Neutralise sap.css § 01 (p dark) and common § 02 (ul li grey) inside the scope */
.up_Sec p,
.up_Sec li {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.up_Sec h2,
.up_Sec h3,
.up_Sec h4 {
  color: var(--color-heading);
  font-family: var(--font-sans);
  letter-spacing: var(--ls-snug);
}
.up_Sec section {
  background: transparent;
}
.up_Sec :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.up_Head {
  display: grid;
  gap: 1rem;
  max-width: 60rem;
  margin-bottom: var(--section-head-gap);
}
@media (min-width: 992px) {
  .up_Head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: end;
  }
}
.up_Eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--color-brand) !important;
}
.up_Eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.up_Sec--ink .up_Eyebrow {
  color: var(--yt-300) !important;
}
.up_Head .up_Eyebrow {
  margin-bottom: 0;
}
.up_Title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight) !important;
  text-wrap: balance;
}
.up_Title--md {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.up_Lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.65 !important;
  color: var(--color-text-muted) !important;
  text-wrap: pretty;
}
@media (min-width: 992px) {
  .up_Sticky {
    position: sticky;
    top: var(--up-sticky-top);
  }
}

/* Icon chip — 44px, hairline ring */
.up_Icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.up_Icon svg {
  width: 22px;
  height: 22px;
}
.up_Sec--ink .up_Icon {
  background: rgb(var(--yt-600-rgb) / 0.18);
  color: var(--yt-300);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.35);
}

/* Tags */
.up_Tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.up_Tags li {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--yt-50);
  color: var(--yt-700) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 600;
  line-height: 1.3 !important;
}
.up_Tags li::first-letter {
  text-transform: uppercase; /* source text keeps the content doc's casing */
}
.up_Sec--ink .up_Tags li {
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.84) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}


/* ---------- 49.3 Image placeholder ----------
   Swap each .up_Ph for <img class="up_Img" src="" alt=""> from the media
   library. The tag text is a brief for the art director; it is not content. */
.up_Ph {
  --ar: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: var(--ar);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
  color: var(--neutral-400);
}
.up_Ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

.up_Ph--ink {
  background: radial-gradient(80% 70% at 75% 20%, rgb(var(--yt-600-rgb) / 0.35), transparent 70%),
    linear-gradient(135deg, var(--ink-700), var(--ink-900));
  color: rgb(255 255 255 / 0.28);
}
.up_Ph--ink::before {
  background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
}
.up_Ph--ink .up_Ph_Tag {
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.up_Img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


/* ---------- 49.4 Proof tile recipe (inverse) ---------- */
.up_WhyGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a b b"
    "a a c d"
    "e e e e";
}
.up_WhyGrid > [data-area="a"] { grid-area: a; }
.up_WhyGrid > [data-area="b"] { grid-area: b; }
.up_WhyGrid > [data-area="c"] { grid-area: c; }
.up_WhyGrid > [data-area="d"] { grid-area: d; }
.up_WhyGrid > [data-area="e"] { grid-area: e; }

.up_Tile {
  --mx: -500px;
  --my: -500px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 240px;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  container-type: inline-size;
}
/* Border light — radial fill masked to a 1px ring (same recipe as LeanIX / Signavio) */
.up_Tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.up_Tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .up_WhyGrid:hover .up_Tile::before,
  .up_WhyGrid:hover .up_Tile::after {
    opacity: 1;
  }
}
.up_Why_Intro {
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.up_Why_Intro .up_Title {
  max-width: 18ch;
}
.up_Why_Intro p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.7 !important;
}
.up_Why_Media {
  padding: 0;
  min-height: 260px;
}
.up_Why_Media .up_Ph {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.up_Stat {
  justify-content: space-between;
  gap: 1.5rem;
}
.up_Stat_Top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.up_Figure {
  display: flex;
  align-items: flex-start;
  margin: 0 0 0.5rem;
  font-size: min(clamp(2.75rem, 2rem + 2.4vw, 4.25rem), 26cqi) !important;
  font-weight: 400;
  line-height: 0.95 !important;
  letter-spacing: -0.045em;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.up_Figure sup {
  top: 0.15em;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--yt-400);
  margin-left: 0.04em;
}
.up_Stat_Label {
  margin: 0;
  font-size: var(--fs-body) !important;
}

/* ---------- 49.5 Ambient background (shared recipe) ---------- */
.up_Ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.up_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.up_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -18%;
  right: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: upDriftA 28s ease-in-out infinite alternate;
}
.up_Blob--b {
  width: 36vw;
  height: 36vw;
  max-width: 560px;
  max-height: 560px;
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgb(var(--yt-400-rgb) / 0.55), transparent 65%);
  animation: upDriftB 34s ease-in-out infinite alternate;
}
@keyframes upDriftA {
  to { transform: translate(-14vw, 18vh) scale(1.12); }
}
@keyframes upDriftB {
  to { transform: translate(16vw, -12vh) scale(0.92); }
}
.up_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.2) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.up_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.3);
}
@media (max-width: 575.98px) {
  .up_Blob {
    filter: blur(60px);
  }
}


/* ---------- 49.6 Stat strip ---------- */
.up_Stats { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); border-bottom: 1px solid var(--color-border); }
.up_StatRow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.up_StatItem { padding: 0 clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.up_StatItem:first-child { padding-left: 0; }
.up_StatItem + .up_StatItem { border-left: 1px solid var(--color-border); }
.up_StatFig {
  display: flex;
  align-items: flex-start;
  margin: 0 0 0.5rem;
  font-size: clamp(2.75rem, 2rem + 2.6vw, 4.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.up_StatFig sup { top: 0.15em; margin-left: 0.04em; font-size: 0.48em; font-weight: 600; letter-spacing: 0; color: var(--color-brand); }
.up_StatFig small { align-self: flex-end; margin-left: 0.04em; padding-bottom: 0.08em; font-size: 0.62em; font-weight: 400; letter-spacing: -0.03em; color: var(--color-heading); }
.up_StatFig--ai {
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--yt-600), var(--yt-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.up_StatItem dd { margin: 0; max-width: 30ch; color: var(--color-text-muted); font-size: var(--fs-body); line-height: 1.5; }
@media (max-width: 767.98px) {
  .up_StatRow { grid-template-columns: 1fr; gap: 1.5rem; }
  .up_StatItem, .up_StatItem:first-child { padding: 0; }
  .up_StatItem + .up_StatItem { border-left: 0; border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
}

/* ---------- 49.7 Overview — questions → hub → focus areas ---------- */
.up_Overview .up_Lead { margin-top: 1.5rem; }
.up_Qs {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(48px, 0.6fr) auto;
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 28px;
  background: radial-gradient(closest-side, var(--neutral-0) 40%, var(--neutral-50));
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.up_Qs_List { display: grid; gap: 14px; }
.up_Q {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--neutral-0);
  box-shadow: var(--shadow-2);
  color: var(--color-heading);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.3;
  animation: upAsk 6s var(--ease-standard) infinite;
}
.up_Q:nth-child(2) { animation-delay: 2s; }
.up_Q:nth-child(3) { animation-delay: 4s; }
.up_Q > span::first-letter { text-transform: uppercase; }
.up_Q > span { display: block; }
.up_Q b {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yt-50);
  color: var(--color-brand);
  font-size: 13px;
  font-weight: 800;
}
@keyframes upAsk { 0%, 25%, 100% { transform: none; } 8% { transform: translateX(6px); box-shadow: var(--shadow-3); } }
.up_Qs_Lines { grid-column: 2; width: 100%; height: 100%; min-height: 160px; overflow: visible; }
.up_Qs_Lines path { fill: none; stroke: var(--yt-300); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; animation: upFlow 1.4s linear infinite; }
@keyframes upFlow { to { stroke-dashoffset: -20; } }
.up_Qs_Hub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: #fff;
  font-size: var(--fs-body-sm);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 0 0 8px rgb(var(--yt-600-rgb) / 0.12), 0 18px 40px -14px rgb(var(--yt-600-rgb) / 0.7);
}
.up_Qs_Hub i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.3); }
.up_Ov_Body { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.up_Statement {
  margin: 0 !important;
  font-size: var(--fs-h4) !important;
  font-weight: 500;
  line-height: 1.45 !important;
  letter-spacing: var(--ls-snug);
  color: var(--color-heading) !important;
  text-wrap: pretty;
}
.up_Focus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.up_FocusItem {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
@media (hover: hover) { .up_FocusItem:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); } }
.up_FocusItem p { margin: 0; color: var(--color-heading) !important; font-size: var(--fs-body) !important; font-weight: 600; line-height: 1.45 !important; }
@media (max-width: 575.98px) {
  .up_Qs { grid-template-columns: 1fr; gap: 1rem; justify-items: start; }
  .up_Qs_Lines { display: none; }
  .up_Focus { grid-template-columns: 1fr; }
  .up_FocusItem { flex-direction: row; align-items: center; }
}

/* ---------- 49.8 Why YASH — intro + media + detail tiles ---------- */
.up_WhyGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "a a b b" "a a c d";
}
.up_WhyGrid > [data-area="a"] { grid-area: a; }
.up_WhyGrid > [data-area="b"] { grid-area: b; }
.up_WhyGrid > [data-area="c"] { grid-area: c; }
.up_WhyGrid > [data-area="d"] { grid-area: d; }
.up_Mini { justify-content: space-between; gap: 1.5rem; }
.up_Steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.up_Steps li {
  position: relative;
  margin: 0;
  padding: 7px 12px 7px 34px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  color: rgb(255 255 255 / 0.86) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 700;
  line-height: 1.3 !important;
}
.up_Steps li::first-letter { text-transform: uppercase; }
.up_Steps li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: rgb(var(--yt-400-rgb) / 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.up_Dash { display: grid; gap: 10px; }
.up_Dash_Label { color: #fff; font-size: var(--fs-body-sm); font-weight: 700; }
.up_Dash_Bars { display: grid; gap: 7px; }
.up_Dash_Bars i { display: block; height: 8px; border-radius: 4px; background: rgb(255 255 255 / 0.08); position: relative; overflow: hidden; }
.up_Dash_Bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--yt-600), var(--yt-300)); transform-origin: left; animation: upGrow 5s var(--ease-out) infinite; }
.up_Dash_Bars i:nth-child(2)::after { animation-delay: 0.3s; }
.up_Dash_Bars i:nth-child(3)::after { animation-delay: 0.6s; }
@keyframes upGrow { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0.4; } }
@media (max-width: 1199.98px) { .up_WhyGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b b" "c d"; } }
@media (max-width: 575.98px) { .up_WhyGrid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; } }

/* ---------- 49.9 Differentiator — feature steps + layered dashboards (ink) ---------- */
.up_Feats { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.up_Feats::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 23px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--yt-500), rgb(var(--yt-400-rgb) / 0.2));
}
.up_Feat { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 1.25rem; margin: 0; padding: 0 0 2rem; }
.up_Feat:last-child { padding-bottom: 0; }
.up_Feat_Dot {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--ink-800);
  color: var(--yt-300);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.45), 0 0 0 6px var(--ink-900);
  transition: background-color var(--dur-base), color var(--dur-base);
}
.up_Feat_Dot svg { width: 22px; height: 22px; }
.up_Feat h3 { margin: 0.6rem 0 0.35rem; color: #fff !important; font-size: var(--fs-h5) !important; font-weight: 700; line-height: var(--lh-snug); }
.up_Feat p { margin: 0; font-size: var(--fs-body-sm) !important; line-height: 1.6 !important; }
@media (hover: hover) {
  .up_Feat:hover .up_Feat_Dot { background: var(--yt-600); color: #fff; }
}
.up_Screens { position: relative; padding: 0 0 18% 12%; }
@media (min-width: 992px) { .up_Screens { position: sticky; top: var(--up-sticky-top); } }
.up_Screen {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--ink-800);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 40px 80px -30px rgb(0 0 0 / 0.7);
}
.up_Screen .up_Ph { --ar: 16 / 10; border-radius: 0; }
.up_Screen_Bar { display: flex; gap: 6px; padding: 10px 14px; background: rgb(255 255 255 / 0.04); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.up_Screen_Bar i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.2); }
.up_Screen--front { position: absolute; left: 0; bottom: 0; width: 72%; z-index: 2; background: var(--neutral-0); }
.up_Screen--front .up_Screen_Bar { background: var(--neutral-50); border-bottom-color: var(--color-border); }
.up_Screen--front .up_Screen_Bar i { background: var(--neutral-300); }
.up_Screen--back { width: 100%; transform: translateY(0); animation: upFloat 9s ease-in-out infinite; }
@keyframes upFloat { 50% { transform: translateY(-8px); } }
@media (max-width: 575.98px) {
  .up_Screens { padding: 0 0 22% 6%; }
  .up_Screen--front { width: 78%; }
}

/* ---------- 49.10 Template fit ----------
   § 03 paints .services_offering_Adhoc black; let the section surface show.
   Safety net in case WordPress still injects <br>/<p> into an ACF block. */
.services_offering_Adhoc:has(.up_Sec) { background: transparent; }
.up_Sec .up_Icon > br,
.up_Sec .up_Qs > br,
.up_Sec .up_Qs_List > br,
.up_Sec .up_Feat_Dot > br,
.up_Sec .up_Screen_Bar > br,
.up_Sec .up_Ambient > br { display: none; }
.up_Sec p:empty { display: none; }

/* ---------- 49.11 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .up_Sec *,
  .up_Sec *::before,
  .up_Sec *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   50. SAP Business Transformation Management — three sections (.bt_*)
   Used on: SAP Business Transformation Management page on sap-inner.php
            (ACF adhoc blocks)

   Overview (three questions → LeanIX / Signavio / WalkMe) ·
   Why YASH (proof bento, ink) · Differentiator (five stages + outcomes, ink)
   Runtime: the "BT sections" block in sap-inner.php (tile spotlight only);
   reveals use .fade-up / [data-anim-group].
   Same component kit as § 45–49 under its own prefix.

   CONTENTS
   50.1  Scope tokens (only what common § 00 lacks) + ink surface
   50.2  Section shell, heading, icon chip, tags
   50.3  Image placeholder
   50.4  Proof tile recipe (ink)
   50.5  Ambient background
   50.6  Overview — three questions → three solutions
   50.7  Why YASH — intro + media + engagement outcomes
   50.8  Differentiator — five stages + outcomes
   50.9  Template fit (wpautop safety net)
   50.10 Imagery bands
   50.11 Reduced motion
   ========================================================================== */
/* ---------- 50.1 Scope tokens ----------
   Colours, type, radii, shadows and motion come from global-inner.css § 00
   (the source file re-declared the purple ramp with different values).
   Only the tokens it does not define are added here, scoped to .bt_Sec. */
.bt_Sec {
  --color-bg: var(--neutral-0);
  --ink-700: #1c1b24;
  --fs-body-lg: var(--fs-lede);
  --fs-body-sm: var(--fs-sm);
  --fs-caption: var(--fs-xs);
  --lh-normal: 1.6;
  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-caps: 0.1em;
  --section-head-gap: var(--stack-head);
  --grid-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  /* Below the fixed header + sticky .page_Navigation (same offset as the template's .sticky) */
  --bt-sticky-top: 100px;
}

/* Inverse — the one ink surface. Re-maps roles, components adapt. */
.bt_Sec--ink {
  --color-bg: var(--ink-900);
  --color-surface: var(--ink-800);
  --color-heading: #ffffff;
  --color-text: rgb(255 255 255 / 0.72);
  --color-text-muted: rgb(255 255 255 / 0.62);
  --color-text-subtle: rgb(255 255 255 / 0.5);
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.24);
  --color-focus: var(--yt-300);
  color-scheme: dark;
}


/* ---------- 50.2 Section shell ---------- */
.bt_Sec {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow-x: clip;
  scroll-margin-top: 140px; /* header + page navigation, for #nav-* links */
}
.bt_Sec--subtle {
  --color-bg: var(--neutral-50);
}
.bt_Sec--ink {
  overflow: hidden;
}
/* Neutralise sap.css § 01 (p dark) and common § 02 (ul li grey) inside the scope */
.bt_Sec p,
.bt_Sec li {
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.bt_Sec h2,
.bt_Sec h3,
.bt_Sec h4 {
  color: var(--color-heading);
  font-family: var(--font-sans);
  letter-spacing: var(--ls-snug);
}
.bt_Sec section {
  background: transparent;
}
.bt_Sec :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.bt_Head {
  display: grid;
  gap: 1rem;
  max-width: 60rem;
  margin-bottom: var(--section-head-gap);
}
@media (min-width: 992px) {
  .bt_Head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: end;
  }
}
.bt_Eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--color-brand) !important;
}
.bt_Eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.bt_Sec--ink .bt_Eyebrow {
  color: var(--yt-300) !important;
}
.bt_Head .bt_Eyebrow {
  margin-bottom: 0;
}
.bt_Title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight) !important;
  text-wrap: balance;
}
.bt_Title--md {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.bt_Lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.65 !important;
  color: var(--color-text-muted) !important;
  text-wrap: pretty;
}
@media (min-width: 992px) {
  .bt_Sticky {
    position: sticky;
    top: var(--bt-sticky-top);
  }
}

/* Icon chip — 44px, hairline ring */
.bt_Icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.bt_Icon svg {
  width: 22px;
  height: 22px;
}
.bt_Sec--ink .bt_Icon {
  background: rgb(var(--yt-600-rgb) / 0.18);
  color: var(--yt-300);
  box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.35);
}

/* Tags */
.bt_Tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bt_Tags li {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--yt-50);
  color: var(--yt-700) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 600;
  line-height: 1.3 !important;
}
.bt_Tags li::first-letter {
  text-transform: uppercase; /* source text keeps the content doc's casing */
}
.bt_Sec--ink .bt_Tags li {
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.84) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}


/* ---------- 50.3 Image placeholder ----------
   Swap each .bt_Ph for <img class="bt_Img" src="" alt=""> from the media
   library. The tag text is a brief for the art director; it is not content. */
.bt_Ph {
  --ar: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: var(--ar);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
  color: var(--neutral-400);
}
.bt_Ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

.bt_Ph--ink {
  background: radial-gradient(80% 70% at 75% 20%, rgb(var(--yt-600-rgb) / 0.35), transparent 70%),
    linear-gradient(135deg, var(--ink-700), var(--ink-900));
  color: rgb(255 255 255 / 0.28);
}
.bt_Ph--ink::before {
  background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
}
.bt_Ph--ink .bt_Ph_Tag {
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bt_Img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


/* ---------- 50.4 Proof tile recipe (inverse) ---------- */
.bt_WhyGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a b b"
    "a a c d"
    "e e e e";
}
.bt_WhyGrid > [data-area="a"] { grid-area: a; }
.bt_WhyGrid > [data-area="m"] { grid-area: m; }
.bt_WhyGrid > [data-area="b"] { grid-area: b; }
.bt_WhyGrid > [data-area="c"] { grid-area: c; }
.bt_WhyGrid > [data-area="d"] { grid-area: d; }
.bt_WhyGrid > [data-area="e"] { grid-area: e; }

.bt_Tile {
  --mx: -500px;
  --my: -500px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 240px;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  container-type: inline-size;
}
/* Border light — radial fill masked to a 1px ring (same recipe as LeanIX / Signavio) */
.bt_Tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.bt_Tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .bt_WhyGrid:hover .bt_Tile::before,
  .bt_WhyGrid:hover .bt_Tile::after {
    opacity: 1;
  }
}
.bt_Why_Intro {
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.bt_Why_Intro .bt_Title {
  max-width: 18ch;
}
.bt_Why_Intro p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.7 !important;
}
.bt_Why_Media {
  padding: 0;
  min-height: 260px;
}
.bt_Why_Media .bt_Ph {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.bt_Stat {
  justify-content: space-between;
  gap: 1.5rem;
}
.bt_Stat_Top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bt_Figure {
  display: flex;
  align-items: flex-start;
  margin: 0 0 0.5rem;
  font-size: min(clamp(2.75rem, 2rem + 2.4vw, 4.25rem), 26cqi) !important;
  font-weight: 400;
  line-height: 0.95 !important;
  letter-spacing: -0.045em;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bt_Figure sup {
  top: 0.15em;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--yt-400);
  margin-left: 0.04em;
}
.bt_Stat_Label {
  margin: 0;
  font-size: var(--fs-body) !important;
}

/* ---------- 50.5 Ambient background (shared recipe) ---------- */
.bt_Ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bt_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.bt_Blob--a {
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  top: -18%;
  right: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: btDriftA 28s ease-in-out infinite alternate;
}
.bt_Blob--b {
  width: 36vw;
  height: 36vw;
  max-width: 560px;
  max-height: 560px;
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgb(var(--yt-400-rgb) / 0.55), transparent 65%);
  animation: btDriftB 34s ease-in-out infinite alternate;
}
@keyframes btDriftA {
  to { transform: translate(-14vw, 18vh) scale(1.12); }
}
@keyframes btDriftB {
  to { transform: translate(16vw, -12vh) scale(0.92); }
}
.bt_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.2) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.bt_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.3);
}
@media (max-width: 575.98px) {
  .bt_Blob {
    filter: blur(60px);
  }
}


/* ---------- 50.6 Overview — three questions → three solutions ---------- */
.bt_Overview .bt_Head { margin-bottom: 1.5rem; }
.bt_Statement {
  margin: 0 !important;
  font-size: var(--fs-h4) !important;
  font-weight: 500;
  line-height: 1.45 !important;
  letter-spacing: var(--ls-snug);
  color: var(--color-heading) !important;
  text-wrap: pretty;
}
.bt_Triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.bt_Pair {
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  padding: 1.25rem;
  border-radius: 24px;
  background: var(--neutral-50);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.bt_Pair_Q {
  position: relative;
  width: 100%;
  padding: 16px 16px 16px 50px;
  border-radius: 16px;
  background: var(--neutral-0);
  box-shadow: var(--shadow-2);
  color: var(--color-heading);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.4;
}
.bt_Pair_Q b {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yt-50);
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 800;
}
.bt_Pair_Link { position: relative; width: 2px; height: 46px; background: repeating-linear-gradient(180deg, var(--yt-300) 0 4px, transparent 4px 8px); }
.bt_Pair_Link i { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); animation: btDrop 2.4s var(--ease-standard) infinite; }
.bt_Pair:nth-child(2) .bt_Pair_Link i { animation-delay: 0.8s; }
.bt_Pair:nth-child(3) .bt_Pair_Link i { animation-delay: 1.6s; }
@keyframes btDrop { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
.bt_Pair_A {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--neutral-950);
  color: #fff;
  font-size: var(--fs-body-sm);
  font-weight: 800;
  white-space: nowrap;
}
.bt_Pair_A svg { width: 18px; height: 18px; color: var(--yt-300); }
@media (max-width: 991.98px) { .bt_Triad { grid-template-columns: 1fr; } .bt_Pair { grid-template-rows: auto; } }

/* ---------- 50.7 Why YASH — intro + media + engagement outcomes ---------- */
.bt_WhyGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "a a m m" "a a s l" "a a w y";
}
.bt_WhyGrid > [data-area="a"] { grid-area: a; }
.bt_WhyGrid > [data-area="m"] { grid-area: m; }
.bt_WhyGrid > [data-area="s"] { grid-area: s; }
.bt_WhyGrid > [data-area="l"] { grid-area: l; }
.bt_WhyGrid > [data-area="w"] { grid-area: w; }
.bt_WhyGrid > [data-area="y"] { grid-area: y; }
.bt_Deliv { justify-content: flex-start; gap: 0.75rem; min-height: 230px; }
.bt_Deliv_Tool { color: var(--yt-300); font-size: var(--fs-caption); font-weight: 800; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.bt_Deliv_Out { color: #fff; font-size: var(--fs-h5); font-weight: 700; line-height: 1.35; }
.bt_Deliv_Out::first-letter { text-transform: uppercase; }
.bt_Deliv_Glyph { margin-top: auto; height: 40px; display: flex; align-items: center; }
.bt_Deliv_Glyph--flow i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgb(var(--yt-400-rgb) / 0.7); }
.bt_Deliv_Glyph--flow i:last-child { background: var(--yt-500); box-shadow: none; }
.bt_Deliv_Glyph--flow b { width: 24px; height: 1.5px; background: rgb(var(--yt-400-rgb) / 0.5); }
.bt_Deliv_Glyph--grid { display: grid; grid-template-columns: repeat(4, 16px); gap: 4px; height: auto; }
.bt_Deliv_Glyph--grid i { height: 16px; border-radius: 4px; background: rgb(255 255 255 / 0.1); }
.bt_Deliv_Glyph--grid i.is-on { background: var(--yt-400); }
.bt_Deliv_Glyph--tip { position: relative; }
.bt_Deliv_Glyph--tip i { width: 90px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--yt-400); }
.bt_Deliv_Glyph--tip b { position: absolute; left: 70px; top: -8px; width: 44px; height: 22px; border-radius: 8px; background: #fff; animation: btTip 3s ease-in-out infinite; }
@keyframes btTip { 50% { transform: translateY(-4px); } }
.bt_Stat { justify-content: flex-end; gap: 0.25rem; min-height: 230px; }
.bt_Badge { margin-top: 0.75rem; align-self: flex-start; padding: 6px 12px; border-radius: var(--radius-pill); background: rgb(var(--yt-600-rgb) / 0.3); box-shadow: inset 0 0 0 1px rgb(var(--yt-400-rgb) / 0.5); color: #fff; font-size: var(--fs-caption); font-weight: 700; }
.bt_Why_Intro { justify-content: flex-start; gap: 1.5rem; }
/* Media tile: the image fills the tile edge to edge */
.bt_Why_Pic { padding: 0; min-height: 260px; }
.bt_Why_Pic .bt_Ph, .bt_Why_Pic .bt_Img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
@media (max-width: 1199.98px) { .bt_WhyGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "m m" "s l" "w y"; } }
@media (max-width: 575.98px) { .bt_WhyGrid { grid-template-columns: 1fr; grid-template-areas: "a" "m" "s" "l" "w" "y"; } .bt_Deliv, .bt_Stat { min-height: 0; } }

/* ---------- 50.8 Differentiator — five stages + outcomes (ink) ---------- */
.bt_Diff .bt_Head { margin-bottom: 2rem; }
.bt_Stages { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0 0 clamp(3rem, 2rem + 3vw, 5rem); padding: 0; list-style: none; }
.bt_Stages::before { content: ""; position: absolute; top: 27px; left: 28px; right: calc((100% - 4 * var(--grid-gap)) / 5 - 28px); height: 2px; background: linear-gradient(90deg, var(--yt-500), var(--yt-300)); }
.bt_Stage { position: relative; margin: 0; }
.bt_Stage_No { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--yt-600); color: #fff; font-size: 1.125rem; font-weight: 800; box-shadow: 0 0 0 6px var(--ink-900); }
.bt_Stage h3 { margin: 1.5rem 0 0.4rem; color: #fff !important; font-size: var(--fs-h4) !important; font-weight: 700; }
.bt_Stage p { margin: 0; font-size: var(--fs-body-sm) !important; line-height: 1.6 !important; max-width: 26ch; }
.bt_Outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bt_Out { gap: 1.25rem; min-height: 0; margin: 0; }
.bt_Out p { margin: 0; color: rgb(255 255 255 / 0.86) !important; font-size: var(--fs-body) !important; line-height: 1.55 !important; }
@media (max-width: 991.98px) {
  .bt_Stages { grid-template-columns: 1fr; gap: 1.5rem; }
  .bt_Stages::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--yt-500), var(--yt-300)); }
  .bt_Stage { display: grid; grid-template-columns: 56px 1fr; column-gap: 1.25rem; }
  .bt_Stage_No { grid-row: span 2; }
  .bt_Stage h3 { margin: 0.6rem 0 0.25rem; }
  .bt_Outs { grid-template-columns: 1fr; }
}

/* ---------- 50.9 Template fit ---------- */
.services_offering_Adhoc:has(.bt_Sec) { background: transparent; }
.bt_Sec .bt_Icon > br, .bt_Sec .bt_Triad > br, .bt_Sec .bt_Pair > br, .bt_Sec .bt_Deliv > br, .bt_Sec .bt_Ambient > br { display: none; }
.bt_Sec p:empty { display: none; }

/* ---------- 50.10 Imagery bands ----------
   Placeholders (.bt_Ph) ship in each section; swap for <img class="bt_Img">. */
.bt_Band { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.bt_Band .bt_Ph { --ar: 21 / 8; border-radius: 28px; }
.bt_Band--ink { margin: 0 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.bt_Band--ink .bt_Ph { --ar: 21 / 7; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); }
.bt_Band .bt_Img { aspect-ratio: 21 / 8; border-radius: 28px; }
.bt_Band--ink .bt_Img { aspect-ratio: 21 / 7; }
@media (max-width: 767.98px) {
  .bt_Band .bt_Ph, .bt_Band--ink .bt_Ph { --ar: 16 / 10; }
  .bt_Band .bt_Img { aspect-ratio: 16 / 10; }
}

/* ---------- 50.11 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bt_Sec *,
  .bt_Sec *::before,
  .bt_Sec *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   SAP Supply Chain Management — extracted section styles
   Append to sap.css. Depends on DS tokens in global-inner.css
   (--yt-*, --neutral-*, --color-*, --radius-*, --shadow-*, --fs-*, --section-y, --stack-head).
   ========================================================================== */

/* Shared image placeholder — skip this block if already added with the SAP Upgrade page */
/* ---------- Image placeholder (swap each .img_Ph for an <img class="img-fluid">) ---------- */
.img_Ph {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; height: 100%; padding: 1rem; text-align: center;
  background: repeating-linear-gradient(135deg, var(--neutral-100) 0 14px, var(--neutral-50) 14px 28px);
  border: 1px dashed var(--neutral-300); border-radius: inherit;
  color: var(--neutral-500); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
}
.img_Ph svg { width: 28px; height: 28px; opacity: .7; }
.img_Ph--dark {
  background: repeating-linear-gradient(135deg, rgb(255 255 255 / .045) 0 14px, rgb(255 255 255 / .015) 14px 28px);
  border-color: rgb(255 255 255 / .18); color: rgb(255 255 255 / .55);
}



:root {
  --sc-area-plan: var(--yt-600);
  --sc-area-proc: var(--yt-800);
  --sc-area-mfg: var(--yt-500);
  --sc-area-log: var(--yt-950);
}
.sc_Section { padding: var(--section-y) 0; }
.sc_Sub { font-size: var(--fs-h4); font-weight: 700; color: var(--color-heading); letter-spacing: -0.01em; margin: 0 0 1rem; }
.sc_Lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--color-heading); }
.sc_Note { font-style: italic; color: var(--color-text-muted); font-size: 1rem; }

/* ---------- Addressing supply chain complexity (Overview) — sticky problem, layered visuals ---------- */
.sc_Overview { background: #fff; }
.sc_Overview .overview__content p { color: var(--color-text); }
.sc_Layers { position: relative; margin-top: 2.5rem; padding-bottom: 18%; }
.sc_Layers .back { width: 78%; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); }
.sc_Layers .front {
  position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 1 / 1; border-radius: var(--radius-xl);
  background: #fff; padding: 10px; box-shadow: var(--shadow-lg);
}
.sc_Layers .front .img_Ph { border-radius: 16px; }
@media (max-width: 991.98px) { .sc_Section .sticky { position: static; } }

/* ---------- Why YASH — dark bento with pointer light ---------- */
.sc_Why { background: #000; color: #fff; }
.sc_Why .common_Title { color: #fff; max-width: 22ch; margin-bottom: var(--stack-head); }
.sc_Bento {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "a a b" "a a c";
}
.sc_Bento .bt {
  --mx: -500px; --my: -500px;
  position: relative; isolation: isolate; border-radius: 28px; overflow: hidden;
  background: linear-gradient(160deg, rgb(255 255 255 / .045), rgb(255 255 255 / .015));
  border: 1px solid rgb(255 255 255 / .09); padding: clamp(1.5rem, 2.4vw, 2.5rem);
}
.sc_Bento .bt::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / .95), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
}
.sc_Bento .bt::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / .16), transparent 50%);
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) { .sc_Bento:hover .bt::before, .sc_Bento:hover .bt::after { opacity: 1; } }
.sc_Bento .a { grid-area: a; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; }
.sc_Bento .b { grid-area: b; display: flex; align-items: flex-end; }
.sc_Bento .c { grid-area: c; padding: 0; min-height: 220px; }
.sc_Bento .a p { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-weight: 300; line-height: 1.45; color: #fff; margin: 0; }
.sc_Bento .b p { color: var(--text-on-dark-body); font-size: 1.125rem; margin: 0; }
.sc_Bento .c .img_Ph { border: 0; border-radius: 0; }
@media (max-width: 991.98px) {
  .sc_Bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c"; }
  .sc_Bento .a { min-height: 0; }
}

/* ---------- Offerings — asymmetric bento of four bricks ---------- */
.sc_Offer { background: var(--color-bg-subtle); }
.sc_Bricks {
  display: grid; gap: 1.25rem; margin-top: var(--stack-head);
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-areas: "p l l" "p m r";
}
.sc_Brick {
  position: relative; display: flex; flex-direction: column; gap: .75rem;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  padding: 1.75rem; overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.sc_Brick::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.sc_Brick:hover { border-color: var(--yt-300); box-shadow: var(--shadow-2); }
.sc_Brick--plan { grid-area: p; --c: var(--sc-area-plan); background: var(--yt-950); border-color: var(--yt-900); }
.sc_Brick--log  { grid-area: l; --c: var(--sc-area-log); }
.sc_Brick--mfg  { grid-area: m; --c: var(--sc-area-mfg); }
.sc_Brick--proc { grid-area: r; --c: var(--sc-area-proc); }
.sc_Brick__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--yt-50); color: var(--c); }
.sc_Brick--plan .sc_Brick__icon { background: rgb(255 255 255 / .08); color: var(--yt-300); }
.sc_Brick__icon svg { width: 24px; height: 24px; }
.sc_Brick h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-heading); margin: .5rem 0 0; }
.sc_Brick p { font-size: 1rem; line-height: 1.6; color: var(--color-text); margin: 0; }
.sc_Brick--plan h3 { color: #fff; }
.sc_Brick--plan p { color: var(--text-on-dark-body); font-size: 1.125rem; }
.sc_Brick__media { margin-top: auto; padding-top: 1rem; }
.sc_Brick__media .img_Ph { aspect-ratio: 4 / 3; height: auto; border-radius: var(--radius-lg); }
.sc_Inside { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.sc_Inside__label { font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); margin-bottom: .5rem; }
.sc_Inside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sc_Inside li { font-size: var(--fs-xs); font-weight: 600; color: var(--color-heading); background: var(--neutral-100); border-radius: var(--radius-pill); padding: .35rem .75rem; }
@media (max-width: 991.98px) {
  .sc_Bricks { grid-template-columns: 1fr 1fr; grid-template-areas: "p p" "l l" "m r"; }
}
@media (max-width: 575.98px) {
  .sc_Bricks { grid-template-columns: 1fr; grid-template-areas: "p" "l" "m" "r"; }
}

/* ---------- Business challenges — coverage map — interactive diagram ---------- */
.sc_Map { margin-top: 0; }
.sc_Challenges { padding-top: 0; } /* sits directly under Offerings on the same grey */
.sc_Map__head { margin-bottom: 2rem; }
.sc_Map__head h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--ls-heading); margin: 0 0 1rem; }
.sc_Map__head p { color: var(--color-text-muted); margin: 0; }
.sc_Map__scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: .5rem; }
.sc_Grid { min-width: 980px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 14px; }
.sc_Stage { display: flex; flex-direction: column; outline: none; cursor: default; transition: opacity var(--dur-base) var(--ease-standard); }
.sc_Chev {
  height: 56px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .02em;
  background: var(--c);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  transform-origin: left center;
}
.sc_Stage:first-child .sc_Chev { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.sc_Cell {
  flex: 1; margin-top: 14px; background: #fff; border-radius: var(--radius-lg); border-left: 4px solid var(--c);
  padding: 1.25rem 1.1rem; display: flex; flex-direction: column; box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.sc_Cell small { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: .35rem; }
.sc_Cell .ch { font-weight: 700; color: var(--color-heading); line-height: 1.35; font-size: 1rem; margin: 0; min-height: 5.4em; }
.sc_Cell hr { margin: 1rem 0; border-color: var(--color-border); opacity: 1; }
.sc_Cell .so { font-weight: 800; color: var(--c); font-size: 1.0625rem; line-height: 1.3; margin: 0; }
.sc_Stage[data-area="plan"], .sc_Bracket[data-area="plan"] { --c: var(--sc-area-plan); }
.sc_Stage[data-area="proc"], .sc_Bracket[data-area="proc"] { --c: var(--sc-area-proc); }
.sc_Stage[data-area="mfg"],  .sc_Bracket[data-area="mfg"]  { --c: var(--sc-area-mfg); }
.sc_Stage[data-area="log"],  .sc_Bracket[data-area="log"]  { --c: var(--sc-area-log); }
.sc_Text li[data-area="plan"] { --c: var(--sc-area-plan); }
.sc_Text li[data-area="proc"] { --c: var(--sc-area-proc); }
.sc_Text li[data-area="mfg"]  { --c: var(--sc-area-mfg); }
.sc_Text li[data-area="log"]  { --c: var(--sc-area-log); }
.sc_Text li[data-area="hc"]   { --c: var(--yt-cyan); }
.sc_Bracket { margin-top: 1.25rem; text-align: center; color: var(--c); font-weight: 700; font-size: var(--fs-sm); cursor: default; outline: none; transition: opacity var(--dur-base); }
.sc_Bracket::before { content: ""; display: block; height: 10px; border: 2px solid var(--c); border-top: 0; margin: 0 8px .6rem; }
.sc_Bracket:focus-visible { text-decoration: underline; text-underline-offset: .25em; }
.sc_Bracket--1 { grid-column: span 1; } .sc_Bracket--2 { grid-column: span 2; }
/* focus state: one solution area at a time */
.sc_Map[data-active="plan"] .sc_Stage:not([data-area="plan"]), .sc_Map[data-active="plan"] .sc_Bracket:not([data-area="plan"]),
.sc_Map[data-active="proc"] .sc_Stage:not([data-area="proc"]), .sc_Map[data-active="proc"] .sc_Bracket:not([data-area="proc"]),
.sc_Map[data-active="mfg"]  .sc_Stage:not([data-area="mfg"]),  .sc_Map[data-active="mfg"]  .sc_Bracket:not([data-area="mfg"]),
.sc_Map[data-active="log"]  .sc_Stage:not([data-area="log"]),  .sc_Map[data-active="log"]  .sc_Bracket:not([data-area="log"]) { opacity: .28; }
.sc_Map[data-active="plan"] .sc_Stage[data-area="plan"] .sc_Cell,
.sc_Map[data-active="proc"] .sc_Stage[data-area="proc"] .sc_Cell,
.sc_Map[data-active="mfg"]  .sc_Stage[data-area="mfg"]  .sc_Cell,
.sc_Map[data-active="log"]  .sc_Stage[data-area="log"]  .sc_Cell { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.sc_Bar {
  margin-top: 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--yt-950); color: #fff; border-radius: var(--radius-lg); padding: 1.1rem 1.5rem;
}
.sc_Bar strong { font-size: 1.125rem; font-weight: 700; }
.sc_Bar a { color: var(--yt-300); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.sc_Bar a:hover { color: #fff; }
.sc_Bar a:hover .c-arrow { transform: translateX(3px); }
/* text version (mobile + screen-reader friendly) */
.sc_Text { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sc_Text li { background: #fff; border-radius: var(--radius-lg); border-left: 4px solid var(--c, var(--yt-600)); padding: 1rem 1.1rem; box-shadow: var(--shadow-1); }
.sc_Text small { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.sc_Text .ch { font-weight: 700; color: var(--color-heading); margin: .15rem 0 .6rem; line-height: 1.4; }
.sc_Text .so { font-weight: 800; color: var(--c, var(--yt-600)); margin: .15rem 0 0; }

/* ---------- A Data-Driven Starting Point (Health Check) — sticky "at a glance" + evaluation story ---------- */
.sc_Hc { background: #fff; }
.sc_Glance { background: var(--yt-950); color: #fff; border-radius: var(--r-xl); padding: clamp(1.75rem, 3vw, 2.5rem); }
.sc_Glance h3 { color: #fff; font-size: var(--fs-h4); font-weight: 700; margin: 0 0 1.5rem; }
.sc_Glance dl { margin: 0; }
.sc_Glance dt { font-size: var(--fs-xs); font-weight: 700; color: var(--yt-300); margin: 0; }
.sc_Glance dd { margin: .35rem 0 0; color: #fff; font-size: 1.0625rem; line-height: 1.5; }
.sc_Glance dd.big { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; }
.sc_Glance .row_ { padding: 1.25rem 0; border-top: 1px solid var(--line-dark); }
.sc_Glance .row_:first-child { border-top: 0; padding-top: 0; }
.sc_Eval { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.sc_Eval li { display: grid; grid-template-columns: 52px 1fr; gap: 1.25rem; padding: 1.75rem 0; border-bottom: 1px solid var(--color-border); }
.sc_Eval__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--yt-50); color: var(--yt-600); transition: background-color var(--dur-base), color var(--dur-base); }
.sc_Eval li.is-on .sc_Eval__icon { background: var(--yt-600); color: #fff; }
.sc_Eval__icon svg { width: 24px; height: 24px; }
.sc_Eval h4 { font-size: var(--fs-h4); font-weight: 700; margin: .1rem 0 .4rem; }
.sc_Eval p { margin: 0; font-size: 1.0625rem; color: var(--color-text); }
.sc_Receive { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 1rem; }
.sc_Receive li { display: grid; grid-template-columns: 28px 1fr; gap: .9rem; font-size: 1.125rem; line-height: 1.55; color: var(--color-heading); }
.sc_Receive svg { width: 28px; height: 28px; color: var(--yt-600); }

/* ---------- Accelerators ---------- */
.sc_AccSec { background: #fff; padding-top: 0; }
.sc_AccSec .sc_Acc { margin-top: 0; }
/* Accelerators — editorial four-up with one number-led card */
.sc_Acc { margin-top: var(--section-y); }
.sc_AccCard { height: 100%; display: flex; flex-direction: column; border-radius: var(--radius-xl); border: 1px solid var(--color-border); padding: 1.75rem; background: var(--color-bg-subtle); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.sc_AccCard:hover { border-color: var(--yt-300); box-shadow: var(--shadow-2); }
.sc_AccCard h4 { font-size: var(--fs-h4); font-weight: 700; margin: auto 0 .5rem; letter-spacing: -0.01em; }
.sc_AccCard p { margin: 0; font-size: 1rem; color: var(--color-text); }
.sc_AccCard__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--yt-600); box-shadow: var(--shadow-1); margin-bottom: 3rem; }
.sc_AccCard__icon svg { width: 22px; height: 22px; }
.sc_AccCard--num { background: var(--yt-600); border-color: var(--yt-600); }
.sc_AccCard--num h4, .sc_AccCard--num p { color: #fff; }
.sc_AccCard__fig { font-size: 5rem; font-weight: 200; line-height: .85; letter-spacing: -0.05em; color: #fff; margin-bottom: 2rem; font-variant-numeric: tabular-nums; }

/* ---------- Agentic AI — layered dark section with agent loop ---------- */
.sc_Ai { background: #000; color: #fff; position: relative; overflow: hidden; }
.sc_Ai .common_Title { color: #fff; }
.sc_Ai p { color: var(--text-on-dark-body); }
.sc_Ai__media { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.sc_Loop { position: relative; margin-top: var(--stack-head); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.sc_Loop__line { position: absolute; top: 28px; left: 28px; right: calc(20% - 1rem - 28px); height: 2px; background: rgb(255 255 255 / .14); }
.sc_Loop__line span { position: absolute; inset: 0; background: var(--yt-400); transform: scaleX(0); transform-origin: left; }
.sc_Step { position: relative; z-index: 1; }
.sc_Step__dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #000; border: 2px solid rgb(255 255 255 / .2); color: rgb(255 255 255 / .5); transition: all var(--dur-base) var(--ease-out); }
.sc_Step__dot svg { width: 24px; height: 24px; }
.sc_Step p { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.5; color: rgb(255 255 255 / .55); max-width: 22ch; transition: color var(--dur-base); }
.sc_Step.is-on .sc_Step__dot { background: var(--yt-600); border-color: var(--yt-600); color: #fff; box-shadow: 0 0 0 8px rgb(var(--yt-600-rgb) / .2); }
.sc_Step.is-on p { color: #fff; }
.sc_Step--human.is-on .sc_Step__dot { background: var(--yt-cyan); border-color: var(--yt-cyan); color: #000; box-shadow: 0 0 0 8px rgb(56 189 248 / .18); }
.sc_Agents { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sc_Agents span { font-size: var(--fs-sm); font-weight: 600; color: #fff; border: 1px solid rgb(255 255 255 / .18); border-radius: var(--radius-pill); padding: .5rem 1rem; background: rgb(255 255 255 / .04); }
@media (max-width: 991.98px) {
  .sc_Loop { grid-template-columns: 1fr; gap: 1.75rem; }
  .sc_Step { display: grid; grid-template-columns: 56px 1fr; gap: 1.25rem; align-items: center; }
  .sc_Step p { margin: 0; max-width: none; }
  .sc_Loop__line { left: 27px; right: auto; width: 2px; top: 28px; bottom: 28px; height: auto; }
  .sc_Loop__line span { transform: scaleY(0); transform-origin: top; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sc_Section *, .sc_Section *::before, .sc_Section *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   WordPress integration guards
   1. The editor's auto-paragraph filter (wpautop) injects <p>, </p> and <br>
      into pasted markup. These rules neutralise that output so the layout
      holds even if the filter can't be switched off.
   2. The sap-inner.php wrappers (.overview_Infographic, *_Adhoc) carry their
      own backgrounds; let the section surfaces show through, matching the
      existing :has(.fx_Sec) / :has(.up_Sec) convention in sap.css.
   ========================================================================== */
.sc_Section p:empty,
.sc_Section > p,
.sc_Section > .container > p:empty { display: none; }
.sc_Bar br, .sc_Cell br, .sc_Brick br, .sc_AccCard br { display: none; }
.sc_Cell > p:not(.ch):not(.so),
.sc_Text li > p:not(.ch):not(.so) { margin: 0; }
.sc_Cell > p:not(.ch):not(.so) small,
.sc_Text li > p:not(.ch):not(.so) small { display: block; }
.sc_Brick > p:empty, .sc_AccCard > p:empty { display: none; }

.overview_Infographic:has(.sc_Section),
.overview_Adhoc:has(.sc_Section),
.services_offerings_pre_Adhoc:has(.sc_Section),
.services_offering_Adhoc:has(.sc_Section),
.differentiators_pre_Adhoc:has(.sc_Section) { background: transparent; overflow: visible; }

/* sap.css styles every .overview_Sec paragraph at 1.5rem; keep this section's scale */
.sc_Overview.overview_Sec .overview__content p { font-size: 1.1rem; color: var(--color-text); }
.sc_Overview.overview_Sec p.sc_Lede { font-size: var(--fs-lede); color: var(--color-heading); }
.overview_Adhoc:has(.sc_Section) > p,
.services_offerings_pre_Adhoc:has(.sc_Section) > p,
.services_offering_Adhoc:has(.sc_Section) > p,
.differentiators_pre_Adhoc:has(.sc_Section) > p { display: none; } /* wpautop-wrapped HTML comments */


/* ==========================================================================
   SAP Cloud Management — extracted section styles
   Append to sap.css. Depends on DS tokens in global-inner.css
   (--yt-*, --neutral-*, --color-*, --radius-*, --shadow-*, --fs-*, --section-y, --stack-head).
   Sections: Running SAP in the cloud · Why YASH · Shared Responsibility Model · Cloud lifecycle
   ========================================================================== */

/* Shared image placeholder — skip this block if already added with an earlier SAP page */
/* ---------- Image placeholder (swap each .img_Ph for an <img class="img-fluid">) ---------- */


.cm_Section { padding: var(--section-y) 0; }
.cm_Lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--color-heading); }

/* ---------- Overview: sticky question + 2027 marker ---------- */
.cm_Overview { background: #fff; }
.cm_Overview p { font-size: 1.1rem; line-height: 1.7; color: var(--color-text); }
.cm_Overview p.cm_Lede { font-size: var(--fs-lede); color: var(--color-heading); }
.cm_Year {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem;
  margin: 2.5rem 0; padding: 1.75rem; border-radius: var(--radius-xl); background: var(--yt-950); color: #fff; overflow: hidden; position: relative;
}
.cm_Year__fig { font-size: clamp(3.5rem, 2rem + 5vw, 6.5rem); font-weight: 200; line-height: .9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.cm_Year__label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-on-dark-body); line-height: 1.5; }
.cm_Year__label b { display: block; color: var(--yt-300); font-size: var(--fs-xs); margin-bottom: .25rem; }
.cm_Overview__media { aspect-ratio: 16 / 9; border-radius: var(--radius-xl); }
@media (max-width: 991.98px) { .cm_Overview .sticky { position: static; } }

/* ---------- Why YASH: dark bento with four stat tiles ---------- */
.cm_Why { background: #000; color: #fff; }
.cm_Why .common_Title { color: #fff; max-width: 22ch; margin-bottom: var(--stack-head); }
.cm_Bento { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "t t s1 s2" "t t s3 s4"; }
.cm_Bento .bt {
  --mx: -500px; --my: -500px; position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px; border: 1px solid rgb(255 255 255 / .09);
  background: linear-gradient(160deg, rgb(255 255 255 / .045), rgb(255 255 255 / .015));
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
}
.cm_Bento .bt::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / .95), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
}
.cm_Bento .bt::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / .16), transparent 50%); opacity: 0; transition: opacity .35s ease; }
@media (hover: hover) { .cm_Bento:hover .bt::before, .cm_Bento:hover .bt::after { opacity: 1; } }
.cm_Bento .t { grid-area: t; display: flex; align-items: flex-end; }
.cm_Bento .t p { font-size: clamp(1.125rem, .95rem + .6vw, 1.4rem); font-weight: 300; line-height: 1.6; color: #fff; margin: 0; }
.cm_Bento .t b { font-weight: 700; color: var(--yt-300); }
.cm_Bento .s { display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; }
.cm_Bento .s1 { grid-area: s1; } .cm_Bento .s2 { grid-area: s2; } .cm_Bento .s3 { grid-area: s3; } .cm_Bento .s4 { grid-area: s4; }
.cm_Bento .s2 { background: var(--yt-600); border-color: var(--yt-600); }
.cm_Stat__fig { font-size: clamp(2.5rem, 1.6rem + 2.4vw, 4rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm_Stat__unit { font-size: .42em; font-weight: 600; letter-spacing: 0; }
.cm_Stat__label { margin: 1rem 0 0; font-size: var(--fs-sm); color: var(--text-on-dark-body); line-height: 1.45; }
.cm_Bento .s2 .cm_Stat__label { color: rgb(255 255 255 / .85); }
@media (max-width: 991.98px) { .cm_Bento { grid-template-columns: 1fr 1fr; grid-template-areas: "t t" "s1 s2" "s3 s4"; } .cm_Bento .s { min-height: 160px; } }
@media (max-width: 479.98px) { .cm_Bento { grid-template-columns: 1fr; grid-template-areas: "t" "s1" "s2" "s3" "s4"; } }

/* ---------- Differentiator: shared responsibility stack + feature grid ---------- */
.cm_Diff { background: #fff; }
.cm_Diff .common_Title { max-width: 20ch; }
.cm_Stack { border-radius: var(--r-xl); background: var(--color-bg-subtle); padding: clamp(1.25rem, 2.5vw, 2rem); }
.cm_Stack__head { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-muted); margin-bottom: 1rem; }
.cm_Layer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem; border-radius: 12px; margin-top: 8px; font-weight: 700; font-size: 1rem; }
.cm_Layer small { font-size: var(--fs-xs); font-weight: 700; padding: .25rem .65rem; border-radius: var(--radius-pill); white-space: nowrap; }
.cm_Layer--yash { background: var(--yt-600); color: #fff; }
.cm_Layer--yash small { background: rgb(255 255 255 / .18); }
.cm_Layer--sap { background: #fff; color: var(--color-heading); border: 1px dashed var(--neutral-300); }
.cm_Layer--sap small { background: var(--neutral-100); color: var(--color-text-muted); }
.cm_Features { margin-top: var(--section-y); }
.cm_Feature { height: 100%; padding: 1.75rem 0 0; border-top: 2px solid var(--neutral-200); transition: border-color var(--dur-base); }
.cm_Feature:hover, .cm_Feature.is-in { border-color: var(--yt-600); }
.cm_Feature__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--yt-50); color: var(--yt-600); margin-bottom: 1.5rem; }
.cm_Feature__icon svg { width: 22px; height: 22px; }
.cm_Feature h3 { font-size: var(--fs-h4); font-weight: 700; margin: 0 0 .6rem; }
.cm_Feature p { font-size: 1rem; line-height: 1.6; color: var(--color-text); margin: 0; }

/* ---------- Lifecycle: interactive five-stage diagram ---------- */
.cm_LifeSec { background: #fff; padding-top: 0; } /* sits under the Differentiator; remove padding-top:0 if used on its own */
.cm_Life { margin-top: 0; border-radius: var(--r-xl); background: #000; color: #fff; padding: clamp(1.75rem, 4vw, 3.5rem); }
.cm_Life .cm_Life__title { color: #fff; font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-heading); margin: 0 0 2.5rem; }
.cm_Stages { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.cm_Stages__line { position: absolute; left: 10%; right: 10%; top: 27px; height: 2px; background: rgb(255 255 255 / .15); }
.cm_Stages__line span { position: absolute; inset: 0; background: var(--yt-400); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease-out); }
.cm_Stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .85rem; background: none; border: 0; color: rgb(255 255 255 / .55); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; padding: 0; }
.cm_Stage__dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #000; border: 2px solid rgb(255 255 255 / .2); font-size: 1.125rem; font-weight: 800; transition: all var(--dur-base) var(--ease-out); }
.cm_Stage.is-done .cm_Stage__dot { border-color: var(--yt-400); color: var(--yt-300); }
.cm_Stage.is-on { color: #fff; }
.cm_Stage.is-on .cm_Stage__dot { background: var(--yt-600); border-color: var(--yt-600); color: #fff; box-shadow: 0 0 0 8px rgb(var(--yt-600-rgb) / .25); }
.cm_Stage:hover .cm_Stage__dot { border-color: var(--yt-400); }
.cm_Stage:focus-visible { outline: 2px solid var(--color-focus-inverse); outline-offset: 6px; border-radius: 12px; }
.cm_StagePanel { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.cm_StagePanel[hidden] { display: none; }
.cm_StagePanel dt { font-size: var(--fs-xs); font-weight: 700; color: var(--yt-300); margin-bottom: .5rem; }
.cm_StagePanel dd { margin: 0; font-size: var(--fs-lede); line-height: 1.5; color: #fff; font-weight: 300; }
.cm_Where { display: flex; flex-wrap: wrap; gap: .5rem; }
.cm_Where a { font-size: var(--fs-sm); font-weight: 600; color: #fff; text-decoration: none; border: 1px solid rgb(255 255 255 / .2); border-radius: var(--radius-pill); padding: .45rem .95rem; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.cm_Where a:hover { background: rgb(255 255 255 / .08); border-color: var(--yt-400); }
.cm_Where a:focus-visible { outline: 2px solid var(--color-focus-inverse); outline-offset: 2px; }
@media (max-width: 991.98px) {
  .cm_Stages, .cm_Stages__line { display: none; }
  .cm_StagePanel, .cm_StagePanel[hidden] { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 0; padding: 1.5rem 0; }
  .cm_StagePanel:first-of-type { padding-top: 0; border-top: 0; }
  .cm_StagePanel__title { display: block !important; }
}
.cm_StagePanel__title { display: none; font-size: var(--fs-h4); font-weight: 700; color: #fff; }

/* ---------- WordPress integration guards (wpautop) ---------- */
.cm_Section p:empty, .cm_Section > p, .cm_Section > .container > p:empty { display: none; }
.cm_Layer br, .cm_Feature br, .cm_StagePanel br, .cm_Bento br { display: none; }
.overview_Infographic:has(.cm_Section),
.overview_Adhoc:has(.cm_Section),
.services_offerings_pre_Adhoc:has(.cm_Section),
.services_offering_Adhoc:has(.cm_Section),
.differentiators_pre_Adhoc:has(.cm_Section) { background: transparent; overflow: visible; }
.overview_Adhoc:has(.cm_Section) > p,
.services_offerings_pre_Adhoc:has(.cm_Section) > p,
.services_offering_Adhoc:has(.cm_Section) > p,s
.differentiators_pre_Adhoc:has(.cm_Section) > p { display: none; }
.cm_Overview.overview_Sec p { font-size: 1.1rem; }
.cm_Overview.overview_Sec p.cm_Lede { font-size: var(--fs-lede); }

@media (prefers-reduced-motion: reduce) {
  .cm_Section *, .cm_Section *::before, .cm_Section *::after { transition-duration: .01ms !important; }
}


/* ==========================================================================
   SAP S/4HANA Conversion — extracted section styles
   Append to sap.css. Depends on DS tokens in global-inner.css
   (--yt-*, --neutral-*, --color-*, --radius-*, --r-xl, --shadow-*, --fs-*, --section-y, --stack-head,
    --line-dark, --text-on-dark-*).
   Sections: Stat strip · The conversion decision · Why YASH · Two assessment options ·
             FleXtremeTransform · YASH4HANA accelerators
   ========================================================================== */

/* Shared image placeholder — skip this block if already added with an earlier SAP page */
/* ---------- Image placeholder (swap each .img_Ph for an <img class="img-fluid">) ---------- */
.img_Ph {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; height: 100%; padding: 1rem; text-align: center;
  background: repeating-linear-gradient(135deg, var(--neutral-100) 0 14px, var(--neutral-50) 14px 28px);
  border: 1px dashed var(--neutral-300); border-radius: inherit;
  color: var(--neutral-500); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
}
.img_Ph svg { width: 28px; height: 28px; opacity: .7; }
.img_Ph--dark {
  background: repeating-linear-gradient(135deg, rgb(255 255 255 / .045) 0 14px, rgb(255 255 255 / .015) 14px 28px);
  border-color: rgb(255 255 255 / .18); color: rgb(255 255 255 / .55);
}


/* ---------- Stat strip (as its own dark band) ---------- */
.cv_StatSec { background: #000; color: #fff; padding: clamp(1rem, 2vw, 1.5rem) 0; }
.cv_StatSec .su_Stats { margin-top: 0; border-top: 0; }
/* Shared stat-strip rules — skip if already in sap.css from an earlier SAP page */
.su_Stats { margin-top: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line-dark); }
.su_Stat { padding: 1.75rem 0 2.25rem; }
.su_Stat + .su_Stat { border-left: 1px solid var(--line-dark); }
.su_Stat__fig { font-size: clamp(2.75rem, 1.8rem + 3.8vw, 5rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; gap: .15em; }
.su_Stat__fig .dot { width: .14em; height: .14em; margin-top: .12em; border-radius: 50%; background: var(--yt-cyan); box-shadow: 0 0 12px var(--yt-cyan); }
.su_Stat__label { margin: .75rem 0 0; font-size: var(--fs-sm); color: var(--text-on-dark-muted); line-height: 1.5; max-width: 22ch; }
@media (max-width: 767.98px) {
  .su_Stat + .su_Stat { border-left: 0; border-top: 1px solid var(--line-dark); }
  .su_Stat { padding: 1.25rem 0; display: flex; align-items: baseline; gap: 1rem; }
  .su_Stat__label { margin: 0; }
}

.cv_Section { padding: var(--section-y) 0; }
.cv_Lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--color-heading); }
.cv_Sub { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-heading); color: var(--color-heading); margin: 0 0 1.25rem; }
.cv_Pending { display: inline-block; font-style: normal; font-weight: 700; color: #8a5a00; background: #fff4d6; border: 1px dashed #e0b24a; border-radius: 6px; padding: .1rem .5rem; }

/* ---------- Overview: sticky story + ECC -> S/4HANA diagram ---------- */
.cv_Overview { background: #fff; }
.cv_Overview p { font-size: 1.1rem; line-height: 1.7; color: var(--color-text); }
.cv_Overview p.cv_Lede { font-size: var(--fs-lede); color: var(--color-heading); }
.cv_Move { position: relative; border-radius: var(--r-xl); background: var(--color-bg-subtle); padding: clamp(1.25rem, 2.5vw, 2rem); margin-top: 2.5rem; }
.cv_Move__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 1rem; align-items: stretch; }
.cv_Sys { min-width: 0; border-radius: var(--radius-lg); padding: 1rem; display: grid; gap: .6rem; align-content: start; }
.cv_Sys--ecc { background: #fff; border: 1px dashed var(--neutral-300); }
.cv_Sys--s4 { background: var(--yt-950); }
.cv_Sys__name { font-size: var(--fs-xs); font-weight: 800; color: var(--color-text-muted); margin-bottom: .25rem; }
.cv_Sys--s4 .cv_Sys__name { color: var(--yt-300); }
.cv_Chip { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 700; border-radius: 10px; padding: .6rem .75rem; line-height: 1.25; }
.cv_Chip i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cv_Chip--issue { background: var(--neutral-50); border: 1px solid var(--neutral-200); color: var(--color-heading); }
.cv_Chip--issue i { background: transparent; border: 2px solid var(--neutral-400); }
.cv_Chip--clean { background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); color: #fff; }
.cv_Chip--clean i { background: var(--yt-cyan); box-shadow: 0 0 8px var(--yt-cyan); }
.cv_Gate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 0 .25rem; }
.cv_Gate span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--fs-xs); font-weight: 800; color: var(--yt-600); letter-spacing: .04em; }
.cv_Gate::before, .cv_Gate::after { content: ""; flex: 1; width: 2px; background: linear-gradient(var(--yt-300), var(--yt-600)); border-radius: 2px; }
@media (max-width: 991.98px) { .cv_Overview .sticky { position: static; } }
@media (max-width: 575.98px) { .cv_Sys { padding: .75rem; } .cv_Chip { font-size: var(--fs-xs); padding: .5rem .55rem; overflow-wrap: anywhere; } .cv_Move__grid { gap: 0 .5rem; } }

/* ---------- Why YASH: dark editorial, sentence reveal ---------- */
.cv_Why { background: #000; color: #fff; }
.cv_Why .common_Title { color: #fff; max-width: 20ch; }
.cv_Why__media { max-width: 360px; }
.cv_Why__media { aspect-ratio: 4 / 5; border-radius: var(--r-xl); margin-top: 2.5rem; }
.cv_Why__text { font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem); font-weight: 300; line-height: 1.45; color: #fff; margin: 0; }
.cv_Why__text .s { opacity: .22; transition: opacity .2s linear; }
@media (max-width: 991.98px) { .cv_Why .sticky { position: static; } .cv_Why__media { aspect-ratio: 16 / 9; margin: 1.5rem 0 2.5rem; } }

/* ---------- Assessments: side-by-side comparison (toggle on mobile) ---------- */
.cv_Assess { background: #fff; }
.cv_Toggle { display: none; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--neutral-100); margin-bottom: 1.25rem; }
.cv_Toggle button { flex: 1; border: 0; background: transparent; border-radius: var(--radius-pill); padding: .7rem 1rem; font: inherit; font-weight: 700; font-size: var(--fs-sm); color: var(--color-text-muted); }
.cv_Toggle button[aria-pressed="true"] { background: #fff; color: var(--yt-600); box-shadow: var(--shadow-1); }
.cv_Toggle button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cv_Compare { width: 100%; border-collapse: separate; border-spacing: 0; }
.cv_Compare th, .cv_Compare td { padding: 1.25rem 1.5rem; vertical-align: top; text-align: left; font-size: 1.0625rem; line-height: 1.6; color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.cv_Compare thead th { border-bottom: 0; padding-top: 1.75rem; padding-bottom: 1.5rem; font-size: var(--fs-h4); font-weight: 700; color: var(--color-heading); }
.cv_Compare tbody th { width: 18%; font-size: var(--fs-xs); font-weight: 800; color: var(--color-text-muted); padding-left: 0; }
.cv_Compare .q { background: var(--yt-50); }
.cv_Compare .p { background: var(--yt-950); color: var(--text-on-dark-body); border-bottom-color: rgb(255 255 255 / .1); }
.cv_Compare thead .q { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.cv_Compare thead .p { border-radius: var(--radius-xl) var(--radius-xl) 0 0; color: #fff; }
.cv_Compare tbody tr:last-child .q { border-radius: 0 0 var(--radius-xl) var(--radius-xl); border-bottom: 0; }
.cv_Compare tbody tr:last-child .p { border-radius: 0 0 var(--radius-xl) var(--radius-xl); border-bottom: 0; }
.cv_Compare td + td { border-left: 10px solid #fff; }
.cv_Compare thead th + th { border-left: 10px solid #fff; }
.cv_Dur { display: block; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 200; letter-spacing: -0.03em; line-height: 1; color: var(--yt-600); margin-bottom: .9rem; }
.cv_Compare .p .cv_Dur { color: #fff; }
.cv_DurBar { display: block; height: 8px; border-radius: 6px; background: rgb(var(--yt-600-rgb) / .15); overflow: hidden; }
.cv_Compare .p .cv_DurBar { background: rgb(255 255 255 / .12); }
.cv_DurBar b { display: block; height: 100%; width: var(--w); border-radius: 6px; background: var(--yt-600); transform-origin: left; }
.cv_Compare .p .cv_DurBar b { background: var(--yt-cyan); }
.cv_DurScale { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--color-text-muted); margin-top: .35rem; }
.cv_Compare .p .cv_DurScale { color: rgb(255 255 255 / .5); }
.cv_Components { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cv_Components li { display: flex; gap: .6rem; }
.cv_Components li::before { content: ""; width: 6px; height: 6px; margin-top: .65em; border-radius: 50%; background: var(--yt-600); flex-shrink: 0; }
.cv_Compare .p .cv_Components li::before { background: var(--yt-cyan); }
.cv_Areas { margin-top: var(--section-y); }
.cv_Areas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.cv_Areas li { font-size: 1rem; font-weight: 600; color: var(--color-heading); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: .6rem 1.1rem; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.cv_Areas li:hover { background: var(--yt-600); border-color: var(--yt-600); color: #fff; }
@media (max-width: 767.98px) {
  .cv_Toggle { display: flex; }
  .cv_Compare thead { display: none; }
  .cv_Compare tr { display: grid; grid-template-columns: 1fr; }
  .cv_Compare tbody th { width: auto; padding: 1rem 0 .4rem; border-bottom: 0; }
  .cv_Compare td { border-left: 0 !important; border-radius: var(--radius-lg) !important; border-bottom: 0; }
  .cv_Compare[data-show="q"] .p, .cv_Compare[data-show="p"] .q { display: none; }
}

/* ---------- FleXtremeTransform: component cards ---------- */
.cv_Flex { background: #fff; }
.cv_Comp { height: 100%; border-radius: var(--radius-xl); border: 1px solid var(--color-border); padding: 1.75rem; background: var(--color-bg-subtle); display: flex; flex-direction: column; transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out); }
.cv_Comp:hover { border-color: var(--yt-300); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.cv_Comp__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--yt-600); box-shadow: var(--shadow-1); margin-bottom: 2.5rem; }
.cv_Comp__icon svg { width: 22px; height: 22px; }
.cv_Comp h3 { font-size: var(--fs-h4); font-weight: 700; margin: auto 0 .5rem; }
.cv_Comp p { font-size: 1rem; line-height: 1.6; color: var(--color-text); margin: 0; }
.cv_Comp--ai { background: var(--yt-950); border-color: var(--yt-900); }
.cv_Comp--ai h3 { color: #fff; }
.cv_Comp--ai p { color: var(--text-on-dark-body); }
.cv_Comp--ai .cv_Comp__icon { background: rgb(255 255 255 / .08); color: var(--yt-300); box-shadow: none; }
.cv_Comp__tag { align-self: flex-start; font-size: 11px; font-weight: 800; color: var(--yt-300); border: 1px solid rgb(255 255 255 / .2); border-radius: var(--radius-pill); padding: .2rem .6rem; margin-bottom: .75rem; }
/* YASH4HANA accelerators: dark panel, screenshot-led tool cards + BTP extension bento */
.cv_AccSec { background: #fff; padding-top: 0; } /* sits under FleXtremeTransform; remove padding-top:0 if used on its own */
.cv_Acc { margin-top: 0; background: #000; color: #fff; border-radius: var(--r-xl); padding: clamp(1.75rem, 4vw, 3.5rem); position: relative; overflow: hidden; isolation: isolate; }
.cv_Acc::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 20% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 80% 60% at 20% 0%, #000 10%, transparent 70%); }
.cv_Acc__title { color: #fff; font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-heading); margin: 0 0 2rem; }
.cv_Acc__sub { color: #fff; font-size: var(--fs-h4); font-weight: 700; margin: 0; }
.cv_Acc__subRow { display: flex; align-items: center; gap: 1.25rem; margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; }
.cv_Acc__subRow::after { content: ""; flex: 1; height: 1px; background: var(--line-dark); }

.cv_Tool { height: 100%; display: flex; flex-direction: column; border-radius: var(--radius-xl); padding: 10px 10px 1.5rem; background: linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02)); border: 1px solid rgb(255 255 255 / .1); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.cv_Tool:hover { border-color: rgb(var(--yt-400-rgb) / .6); transform: translateY(-4px); }
.cv_Shot { border-radius: 16px; overflow: hidden; background: #0d0b16; border: 1px solid rgb(255 255 255 / .08); }
.cv_Shot__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.cv_Shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.cv_Shot__bar span { margin-left: .5rem; height: 8px; flex: 0 1 40%; border-radius: 4px; background: rgb(255 255 255 / .08); }
.cv_Shot .img_Ph { aspect-ratio: 16 / 10; height: auto; border: 0; border-radius: 0; }
.cv_Tool__body { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding: 1.5rem 1rem 0; }
.cv_Tool__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--yt-600); color: #fff; }
.cv_Tool__icon svg { width: 22px; height: 22px; }
.cv_Tool h4 { color: #fff; font-size: var(--fs-h4); font-weight: 700; margin: 0 0 .35rem; }
.cv_Tool p { color: var(--text-on-dark-body); font-size: 1.0625rem; line-height: 1.55; margin: 0; }

.cv_Ext { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "a a b c" "a a d e"; }
.cv_ExtCard {
  --mx: -500px; --my: -500px; position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-xl); border: 1px solid rgb(255 255 255 / .09); background: linear-gradient(160deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015));
}
.cv_ExtCard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / .95), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) { .cv_Ext:hover .cv_ExtCard::before { opacity: 1; } }
.cv_ExtCard:nth-child(1) { grid-area: a; } .cv_ExtCard:nth-child(2) { grid-area: b; } .cv_ExtCard:nth-child(3) { grid-area: c; }
.cv_ExtCard:nth-child(4) { grid-area: d; } .cv_ExtCard:nth-child(5) { grid-area: e; }
.cv_ExtCard__media { overflow: hidden; }
.cv_ExtCard__media .img_Ph { aspect-ratio: 16 / 10; height: auto; border: 0; border-radius: 0; transition: transform .8s var(--ease-out); }
.cv_ExtCard:hover .cv_ExtCard__media .img_Ph { transform: scale(1.04); }
.cv_ExtCard:nth-child(1) .cv_ExtCard__media { flex: 1; }
.cv_ExtCard:nth-child(1) .cv_ExtCard__media .img_Ph { aspect-ratio: auto; height: 100%; min-height: 260px; }
.cv_ExtCard__body { padding: 1.25rem 1.35rem 1.5rem; }
.cv_ExtCard h4 { color: #fff; font-size: 1.0625rem; font-weight: 700; margin: 0 0 .35rem; line-height: 1.3; }
.cv_ExtCard:nth-child(1) h4 { font-size: var(--fs-h4); }
.cv_ExtCard p { color: var(--text-on-dark-body); font-size: .9375rem; line-height: 1.55; margin: 0; }
.cv_ExtCard:nth-child(1) p { font-size: 1.0625rem; }
.cv_ExtCard__tag { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 11px; font-weight: 800; color: #fff; background: rgb(0 0 0 / .55); border: 1px solid rgb(255 255 255 / .18); border-radius: var(--radius-pill); padding: .25rem .6rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 991.98px) { .cv_Ext { grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b c" "d e"; } }
@media (max-width: 575.98px) { .cv_Ext { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e"; } }

/* ---------- WordPress integration guards (wpautop) ---------- */
.cv_Section p:empty, .cv_StatSec p:empty, .cv_Section > p, .cv_Section > .container > p:empty { display: none; }
.cv_Move br, .cv_Compare br, .cv_Comp br, .cv_Tool__body br, .cv_ExtCard__body br, .cv_Areas br { display: none; }
.overview_Infographic:has(.cv_Section),
.overview_Adhoc:has(.cv_Section),
.services_offerings_pre_Adhoc:has(.cv_Section),
.services_offering_Adhoc:has(.cv_Section),
.differentiators_pre_Adhoc:has(.cv_Section) { background: transparent; overflow: visible; }
.overview_Adhoc:has(.cv_Section) > p,
.services_offerings_pre_Adhoc:has(.cv_Section) > p,
.services_offering_Adhoc:has(.cv_Section) > p,
.differentiators_pre_Adhoc:has(.cv_Section) > p { display: none; }
.cv_Overview.overview_Sec p { font-size: 1.1rem; }
.cv_Overview.overview_Sec p.cv_Lede { font-size: var(--fs-lede); }

@media (prefers-reduced-motion: reduce) {
  .cv_Why__text .s { opacity: 1; }
  .cv_Section *, .cv_Section *::before, .cv_Section *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   SAP Cloud ALM — extracted section styles
   Append to sap.css. Depends on DS tokens in global-inner.css
   (--yt-*, --neutral-*, --color-*, --radius-*, --r-xl, --shadow-*, --fs-*, --section-y, --stack-head,
    --line-dark, --text-on-dark-*).
   Sections: Stat strip · Why SAP Cloud ALM · Why YASH · Offerings · SAP Cloud ALM in the SAP toolchain ·
             Joule and SAP Business AI
   ========================================================================== */

/* Shared image placeholder — skip this block if already added with an earlier SAP page */
/* ---------- Image placeholder (swap each .img_Ph for an <img class="img-fluid">) ---------- */
.img_Ph {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; height: 100%; padding: 1rem; text-align: center;
  background: repeating-linear-gradient(135deg, var(--neutral-100) 0 14px, var(--neutral-50) 14px 28px);
  border: 1px dashed var(--neutral-300); border-radius: inherit;
  color: var(--neutral-500); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
}
.img_Ph svg { width: 28px; height: 28px; opacity: .7; }
.img_Ph--dark {
  background: repeating-linear-gradient(135deg, rgb(255 255 255 / .045) 0 14px, rgb(255 255 255 / .015) 14px 28px);
  border-color: rgb(255 255 255 / .18); color: rgb(255 255 255 / .55);
}


/* ---------- Stat strip (as its own dark band) ---------- */
.al_StatSec { background: #000; color: #fff; padding: clamp(1rem, 2vw, 1.5rem) 0; }
.al_StatSec .su_Stats { margin-top: 0; border-top: 0; }
/* Shared stat-strip rules — skip if already in sap.css from an earlier SAP page */
.su_Stats { margin-top: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line-dark); }
.su_Stat { padding: 1.75rem 0 2.25rem; }
.su_Stat + .su_Stat { border-left: 1px solid var(--line-dark); }
.su_Stat__fig { font-size: clamp(2.75rem, 1.8rem + 3.8vw, 5rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; gap: .15em; }
.su_Stat__fig .dot { width: .14em; height: .14em; margin-top: .12em; border-radius: 50%; background: var(--yt-cyan); box-shadow: 0 0 12px var(--yt-cyan); }
.su_Stat__label { margin: .75rem 0 0; font-size: var(--fs-sm); color: var(--text-on-dark-muted); line-height: 1.5; max-width: 22ch; }
@media (max-width: 767.98px) {
  .su_Stat + .su_Stat { border-left: 0; border-top: 1px solid var(--line-dark); }
  .su_Stat { padding: 1.25rem 0; display: flex; align-items: baseline; gap: 1rem; }
  .su_Stat__label { margin: 0; }
}

.al_Section { padding: var(--section-y) 0; }
.al_Lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--color-heading); }
.al_Sub { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-heading); color: var(--color-heading); margin: 0 0 1rem; }

/* ---------- Overview: one-record traceability diagram ---------- */
.al_Overview { background: #fff; }
.al_Overview p { font-size: 1.1rem; line-height: 1.7; color: var(--color-text); }
.al_Overview p.al_Lede { font-size: var(--fs-lede); color: var(--color-heading); }
.al_Record { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-xl); background: var(--color-bg-subtle); overflow: hidden; }
.al_Record svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.al_Record line { stroke: var(--yt-300); stroke-width: 2; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.al_Record__core { position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--yt-600); color: #fff; display: grid; place-items: center; text-align: center; font-weight: 800; font-size: clamp(.95rem, .8rem + .5vw, 1.25rem); line-height: 1.2; box-shadow: 0 0 0 12px rgb(var(--yt-600-rgb) / .12), 0 0 0 26px rgb(var(--yt-600-rgb) / .06); }
.al_Node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: .6rem 1rem; font-size: var(--fs-sm); font-weight: 700; color: var(--color-heading); box-shadow: var(--shadow-2); white-space: nowrap; }
.al_Node svg { position: static; width: 18px; height: 18px; color: var(--yt-600); }
.al_Record__team { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--fs-xs); font-weight: 800; color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 991.98px) { .al_Overview .sticky { position: static; } }
@media (max-width: 479.98px) { .al_Node { font-size: var(--fs-xs); padding: .45rem .7rem; } .al_Node svg { display: none; } }

/* ---------- Why YASH: split full-bleed visual + layered text ---------- */
.al_Why { background: #000; color: #fff; padding: 0; position: relative; overflow: hidden; }
.al_Why__media { position: absolute; top: 0; bottom: 0; left: 0; width: 46%; }
.al_Why__media .img_Ph { border: 0; border-radius: 0; }
.al_Why__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #000 100%); pointer-events: none; }
.al_Why__body { padding: var(--section-y) 0; }
.al_Why .common_Title { color: #fff; }
.al_Why p { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 300; line-height: 1.65; color: var(--text-on-dark-body); margin: 1.75rem 0 0; }
.al_Why p b { color: #fff; font-weight: 700; }
.al_Why__badge { display: inline-flex; align-items: center; gap: .75rem; margin-top: 2rem; padding: .85rem 1.25rem; border-radius: var(--radius-pill); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); font-size: var(--fs-sm); font-weight: 700; color: #fff; }
.al_Why__badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--yt-cyan); box-shadow: 0 0 10px var(--yt-cyan); }
@media (max-width: 991.98px) {
  .al_Why__media { position: relative; width: 100%; height: 300px; }
  .al_Why__media::after { background: linear-gradient(180deg, transparent 50%, #000 100%); }
  .al_Why__body { padding-top: 2rem; }
}

/* ---------- Offerings: four-area bento + "We also offer" ---------- */
.al_Offer { background: var(--color-bg-subtle); }
.al_Areas { display: grid; gap: 1.25rem; margin-top: var(--stack-head); grid-template-columns: 1.15fr 1fr; grid-template-areas: "a b" "a c" "a d"; }
.al_Area { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.75rem; transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out); }
.al_Area:hover { border-color: var(--yt-300); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.al_Area__num { font-size: 3rem; font-weight: 200; line-height: .9; letter-spacing: -0.05em; color: var(--yt-600); font-variant-numeric: tabular-nums; }
.al_Area h3 { font-size: var(--fs-h4); font-weight: 700; margin: 0 0 .5rem; }
.al_Area p { font-size: 1rem; line-height: 1.6; color: var(--color-text); margin: 0; }
.al_Area--a { grid-area: a; grid-template-columns: 1fr; align-content: start; background: var(--yt-950); border-color: var(--yt-900); }
.al_Area--a h3 { color: #fff; font-size: var(--fs-h3); }
.al_Area--a p { color: var(--text-on-dark-body); font-size: 1.0625rem; }
.al_Area--a .al_Area__num { color: var(--yt-400); font-size: 4.5rem; }
.al_Area__media { margin-top: .5rem; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
.al_Area:nth-child(2) { grid-area: b; } .al_Area:nth-child(3) { grid-area: c; } .al_Area:nth-child(4) { grid-area: d; }
.al_Also { margin-top: var(--section-y); }
.al_AlsoItem { height: 100%; display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem 0 0; border-top: 2px solid var(--neutral-200); transition: border-color var(--dur-base); }
.al_AlsoItem.is-in, .al_AlsoItem:hover { border-color: var(--yt-600); }
.al_AlsoItem__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--yt-600); box-shadow: var(--shadow-1); }
.al_AlsoItem__icon svg { width: 22px; height: 22px; }
.al_AlsoItem p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--color-heading); font-weight: 600; }
@media (max-width: 991.98px) { .al_Areas { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; } }

/* ---------- Toolchain: integration orbit ---------- */
.al_Tool { background: #fff; }
.al_Orbit { position: relative; aspect-ratio: 2.2 / 1; margin-top: var(--stack-head); }
.al_Orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.al_Orbit line { stroke: var(--yt-200); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.al_Orbit ellipse { fill: none; stroke: var(--neutral-200); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.al_Hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 15%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--yt-950); color: #fff; font-weight: 800; font-size: clamp(.875rem, .7rem + .5vw, 1.125rem); line-height: 1.2; padding: 1rem; box-shadow: 0 0 0 14px rgb(var(--yt-600-rgb) / .1), 0 20px 40px -18px rgb(17 0 54 / .6); z-index: 2; }
.al_Orbit ul { list-style: none; margin: 0; padding: 0; }
.al_Orbit li { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: .55rem 1rem; font-size: var(--fs-sm); font-weight: 700; color: var(--color-heading); white-space: nowrap; box-shadow: var(--shadow-1); transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); z-index: 1; }
.al_Orbit li:hover { background: var(--yt-600); border-color: var(--yt-600); color: #fff; z-index: 3; }
.al_Orbit__label { font-size: var(--fs-xs); font-weight: 800; color: var(--color-text-muted); margin-top: 1.5rem; }
@media (max-width: 1199.98px) {
  .al_Orbit { aspect-ratio: auto; }
  .al_Orbit svg, .al_Hub { display: none; }
  .al_Orbit ul { display: flex; flex-wrap: wrap; gap: .5rem; }
  .al_Orbit li { position: static; transform: none !important; white-space: normal; }
}

/* ---------- Differentiator: Joule capability console ---------- */
.al_Joule { background: #000; color: #fff; }
.al_Joule .common_Title { color: #fff; max-width: 20ch; }
.al_Joule .al_Lede { color: var(--text-on-dark-body); }
.al_Caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.al_Cap { width: 100%; display: flex; align-items: center; gap: 1rem; text-align: left; background: transparent; border: 1px solid rgb(255 255 255 / .1); border-radius: 14px; padding: 1rem 1.15rem; color: rgb(255 255 255 / .7); font: inherit; font-weight: 700; font-size: 1.0625rem; transition: all var(--dur-base) var(--ease-standard); cursor: pointer; }
.al_Cap span { font-size: var(--fs-xs); font-weight: 800; color: rgb(255 255 255 / .4); font-variant-numeric: tabular-nums; }
.al_Cap:hover { border-color: rgb(var(--yt-400-rgb) / .5); color: #fff; }
.al_Cap[aria-selected="true"] { background: var(--yt-600); border-color: var(--yt-600); color: #fff; }
.al_Cap[aria-selected="true"] span { color: rgb(255 255 255 / .8); }
.al_Cap:focus-visible { outline: 2px solid var(--color-focus-inverse); outline-offset: 2px; }
.al_Console { position: sticky; top: 110px; border-radius: var(--r-xl); background: linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02)); border: 1px solid rgb(255 255 255 / .1); overflow: hidden; }
.al_Console__bar { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.5rem; border-bottom: 1px solid rgb(255 255 255 / .08); font-weight: 800; }
.al_Console__bar svg { width: 20px; height: 20px; color: var(--yt-cyan); }
.al_Console__bar small { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; color: rgb(255 255 255 / .5); }
.al_Console__body { padding: clamp(1.5rem, 3vw, 2.5rem); min-height: 340px; display: flex; flex-direction: column; gap: 1rem; }
.al_Console__media { aspect-ratio: 16 / 7; border-radius: 16px; }
.al_Msg { max-width: 88%; border-radius: 18px; padding: 1rem 1.25rem; line-height: 1.55; }
.al_Msg--q { align-self: flex-end; background: var(--yt-600); color: #fff; font-weight: 700; border-bottom-right-radius: 6px; }
.al_Msg--a { align-self: flex-start; background: rgb(255 255 255 / .08); color: #fff; font-size: 1.0625rem; border-bottom-left-radius: 6px; }
.al_Msg--a small { display: block; font-size: var(--fs-xs); font-weight: 800; color: var(--yt-300); margin-bottom: .35rem; }
.al_CapPanel[hidden] { display: none; }
.al_CapPanel.is-swap .al_Msg { animation: alIn .5s var(--ease-out) both; }
.al_CapPanel.is-swap .al_Msg--a { animation-delay: .15s; }
@keyframes alIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.al_CapPanel__title { display: none; }
@media (max-width: 991.98px) {
  .al_CapsCol { display: none; }
  .al_Console { position: static; }
  .al_Console__body { min-height: 0; }
  .al_CapPanel, .al_CapPanel[hidden] { display: flex; flex-direction: column; gap: .75rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgb(255 255 255 / .08); }
  .al_CapPanel:last-child { border-bottom: 0; padding-bottom: 0; }
  .al_CapPanel .al_Msg--q { display: none; }
  .al_CapPanel__title { display: block; font-size: var(--fs-h4); font-weight: 700; color: #fff; }
  .al_Msg { max-width: 100%; }
}

/* ---------- WordPress integration guards (wpautop) ---------- */
.al_Section p:empty, .al_StatSec p:empty, .al_Section > p, .al_Section > .container > p:empty { display: none; }
.al_Area h3 br, .al_Area p br, .al_AlsoItem br, .al_Orbit li br, .al_Cap br, .al_Msg br { display: none; }
.overview_Infographic:has(.al_Section),
.overview_Adhoc:has(.al_Section),
.services_offerings_pre_Adhoc:has(.al_Section),
.services_offering_Adhoc:has(.al_Section),
.differentiators_pre_Adhoc:has(.al_Section) { background: transparent; overflow: visible; }
.overview_Adhoc:has(.al_Section) > p,
.services_offerings_pre_Adhoc:has(.al_Section) > p,
.services_offering_Adhoc:has(.al_Section) > p,
.differentiators_pre_Adhoc:has(.al_Section) > p { display: none; }
.al_Overview.overview_Sec p { font-size: 1.1rem; }
.al_Overview.overview_Sec p.al_Lede { font-size: var(--fs-lede); }

@media (prefers-reduced-motion: reduce) {
  .al_Section *, .al_Section *::before, .al_Section *::after { transition-duration: .01ms !important; animation: none !important; }
}


/* ==========================================================================
   37. The YASH Advantage — bento grid (.yd_*)
   Used on: SAP Cloud ERP Private (reusable on any SAP inner page)

   Same tile recipe as .wm_ / .wf_ (shared .bt base, section 35).
   Layout (desktop):   top  top  roll roll
                       top  top  adv  adv
                       core core core core
   Reuses keyframes already in sap.css: wmDriftA/B/C, wmDotSweep, wmFade2.
   ========================================================================== */
.yd_Sec {
  position: relative;
  isolation: isolate;
  background: var(--black, #000);
  padding: 110px 0;
  overflow: hidden;
  color: #fff;
}
.yd_Sec > .container {
  position: relative;
  z-index: 1;
}
.yd_Sec .common_Title {
  color: #fff;
  max-width: 30ch;
  margin: 0 0 56px;
  text-wrap: balance;
}

/* ---------- Ambient background (mirrors .wm_Bg) */
.yd_Bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.yd_Blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.yd_Blob--a {
  width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
  top: -16%; right: -12%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.9), transparent 65%);
  animation: wmDriftA 28s ease-in-out infinite alternate;
}
.yd_Blob--b {
  width: 38vw; height: 38vw; max-width: 600px; max-height: 600px;
  bottom: -20%; left: -10%;
  background: radial-gradient(circle, rgb(var(--yt-500-rgb) / 0.7), transparent 65%);
  animation: wmDriftB 34s ease-in-out infinite alternate;
}
.yd_Blob--c {
  width: 28vw; height: 28vw; max-width: 440px; max-height: 440px;
  top: 44%; left: 40%;
  background: radial-gradient(circle, rgb(163 36 163 / 0.45), transparent 65%);
  animation: wmDriftC 40s ease-in-out infinite alternate;
}
.yd_Dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--yt-400-rgb) / 0.22) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 75%);
}
.yd_Dots--lit {
  background-image: radial-gradient(rgb(var(--yt-300-rgb) / 0.9) 1.1px, transparent 1.6px);
  -webkit-mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
          mask-image: linear-gradient(105deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 250% 100%;
          mask-size: 250% 100%;
  animation: wmDotSweep 9s linear infinite;
  opacity: 0.6;
}
.yd_Horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--yt-400-rgb) / 0.6), transparent);
  box-shadow: 0 0 60px 18px rgb(var(--yt-600-rgb) / 0.35);
  animation: wmFade2 6s ease-in-out infinite;
}

/* ---------- Grid */
.yd_Grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "top  top  roll roll"
    "top  top  adv  adv"
    "core core core core";
  gap: 14px;
}
.yd_Top  { grid-area: top; }
.yd_Roll { grid-area: roll; }
.yd_Adv  { grid-area: adv; }
.yd_Core { grid-area: core; }

/* ---------- Tile recipe (pointer spotlight driven by --mx/--my) */
.yd_Grid .bt {
  --mx: -500px;
  --my: -500px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  border: 1px solid rgb(255 255 255 / 0.09);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  color: #fff;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.yd_Grid .bt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  z-index: 3;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(var(--yt-400-rgb) / 0.95), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.yd_Grid .bt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--yt-600-rgb) / 0.16), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .yd_Grid:hover .bt::before,
  .yd_Grid:hover .bt::after { opacity: 1; }
}
.yd_Grid .bt p {
  color: rgb(255 255 255 / 0.72);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   Tile 1 · Top 25 — photo + rank matrix
   ========================================================================== */
.yd_Top { padding: 14px; }
.yd_Photo {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  border-radius: 18px;
  overflow: hidden;
  /* placeholder look when no image is set */
  background:
    radial-gradient(80% 80% at 20% 10%, rgb(var(--yt-600-rgb) / 0.45), transparent 60%),
    linear-gradient(160deg, #1a1130, #0b0716);
}
.yd_Photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.yd_Top:hover .yd_Photo img { transform: scale(1.04); }
.yd_Photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgb(8 4 20 / 0.75) 100%);
  pointer-events: none;
}
.yd_Rank {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 10px);
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: rgb(10 6 22 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.yd_Rank i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.2);
  animation: ydBlink 3.2s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 0.12s);
}
.yd_Rank i.is_Us {
  background: rgb(var(--yt-300-rgb));
  box-shadow: 0 0 0 4px rgb(var(--yt-600-rgb) / 0.45), 0 0 18px rgb(var(--yt-400-rgb) / 0.9);
  animation: ydUs 2.4s ease-in-out infinite;
}
@keyframes ydBlink { 50% { opacity: 0.35; } }
@keyframes ydUs    { 50% { transform: scale(1.3); } }

.yd_Top_Body { padding: 26px 16px 12px; }
.yd_Top_Body p {
  font-size: clamp(1.05rem, 1.25vw, 1.25rem) !important;
  line-height: 1.6 !important;
  color: rgb(255 255 255 / 0.8) !important;
  max-width: 48ch;
}
.yd_Hl {
  font-weight: 800;
  font-size: 1.3em;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, #fff, rgb(var(--yt-300-rgb)));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ==========================================================================
   Tiles 2 & 3 · Side tiles — visual stage + copy
   ========================================================================== */
.yd_Side { padding: 14px 14px 26px; }
.yd_Stage {
  position: relative;
  height: 170px;
  margin-bottom: 22px;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 90% at 50% 60%, rgb(var(--yt-600-rgb) / 0.22), transparent 70%),
    rgb(255 255 255 / 0.025);
  border: 1px solid rgb(255 255 255 / 0.06);
}
.yd_Stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1.3px);
  background-size: 14px 14px;
  pointer-events: none;
}
.yd_Side_Body { padding: 0 12px; }

/* ---------- Roll-outs map */
.yd_Map { position: relative; width: 100%; height: 100%; }
.yd_Map .arc {
  fill: none;
  stroke: rgb(var(--yt-400-rgb) / 0.6);
  stroke-width: 1.4;
  stroke-dasharray: 4 6;
  animation: ydDash 2.4s linear infinite;
}
.yd_Map .pin { fill: rgb(var(--yt-300-rgb)); }
.yd_Map .ping {
  fill: none;
  stroke: rgb(var(--yt-400-rgb));
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ydPing 2.6s ease-out infinite;
}
.yd_Map .ping:nth-of-type(7)  { animation-delay: 0.5s; }
.yd_Map .ping:nth-of-type(8)  { animation-delay: 1s; }
.yd_Map .ping:nth-of-type(9)  { animation-delay: 1.5s; }
.yd_Map .ping:nth-of-type(10) { animation-delay: 2s; }
.yd_Map .hubRing {
  fill: rgb(var(--yt-600-rgb) / 0.2);
  stroke: rgb(var(--yt-400-rgb) / 0.55);
  transform-box: fill-box;
  transform-origin: center;
  animation: ydBeat 3s ease-in-out infinite;
}
.yd_Map .hub { fill: rgb(var(--yt-600-rgb)); stroke: #fff; stroke-width: 1.5; }
@keyframes ydDash { to { stroke-dashoffset: -40; } }
@keyframes ydPing {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}
@keyframes ydBeat { 50% { transform: scale(1.1); } }

/* ---------- Advisory layers + gear + shield */
.yd_Layers {
  position: relative;
  width: 78%;
  max-width: 250px;
  height: 128px;
}
.yd_Layer {
  position: absolute;
  left: 0;
  right: 0;
  height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03));
  border: 1px solid rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.yd_Layer:nth-child(1) { top: 0;    transform: translateX(-14px); opacity: 0.55; }
.yd_Layer:nth-child(2) { top: 42px; opacity: 0.8; }
.yd_Layer:nth-child(3) { top: 84px; transform: translateX(14px); border-color: rgb(var(--yt-400-rgb) / 0.5); }
.yd_Adv:hover .yd_Layer:nth-child(1) { transform: translate(-14px, -6px); }
.yd_Adv:hover .yd_Layer:nth-child(3) { transform: translate(14px, 6px); }
.yd_Layer span { display: flex; align-items: center; gap: 8px; }
.yd_Layer u {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--yt-400-rgb));
}
.yd_Layer b {
  display: block;
  width: 56px;
  height: 6px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.35);
}
.yd_Layer i {
  display: block;
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.12);
}
.yd_Gear {
  position: absolute;
  top: -12px;
  right: -14px;
  width: 32px;
  height: 32px;
  color: rgb(var(--yt-300-rgb));
  animation: ydSpin 10s linear infinite;
}
.yd_Shield {
  position: absolute;
  right: -10px;
  bottom: -16px;
  z-index: 2;
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 8px 18px rgb(var(--yt-600-rgb) / 0.6));
}
.yd_Shield .s { fill: rgb(var(--yt-600-rgb)); stroke: rgb(var(--yt-300-rgb)); stroke-width: 2; }
.yd_Shield .c {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: ydCheck 3.6s ease-in-out infinite;
}
@keyframes ydSpin  { to { transform: rotate(360deg); } }
@keyframes ydCheck {
  25%, 75% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 40; }
}

/* ==========================================================================
   Tile 4 · Clean core — copy + orbit diagram
   ========================================================================== */
.yd_Grid .yd_Core {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 280px;
  padding: 44px 56px;
  background:
    radial-gradient(60% 130% at 100% 50%, rgb(var(--yt-600-rgb) / 0.3), transparent 60%),
    linear-gradient(160deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
}
.yd_Waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 70%;
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
}
.yd_Waves path {
  fill: none;
  stroke: rgb(var(--yt-400-rgb) / 0.3);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 6 10;
  animation: ydDash 3s linear infinite;
}
.yd_Waves path:nth-child(2) { stroke: rgb(var(--yt-500-rgb) / 0.22); animation-duration: 4.2s; }
.yd_Waves path:nth-child(3) { stroke: rgb(var(--yt-300-rgb) / 0.18); animation-duration: 5.4s; }

.yd_Core_Body {
  position: relative;
  flex: 1 1 auto;
  max-width: 60ch;
}
.yd_Core_Body::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 22px;
  background: linear-gradient(90deg, var(--yt-600, #5a00fa), rgb(var(--yt-400-rgb)));
}
.yd_Grid .yd_Core_Body p {
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.88);
}

.yd_Orbit {
  position: relative;
  flex: none;
  width: 240px;
  height: 240px;
}
.yd_Ring1,
.yd_Ring2,
.yd_Ring3 {
  position: absolute;
  border-radius: 50%;
}
.yd_Ring3 {
  inset: 0;
  border: 1px dashed rgb(var(--yt-400-rgb) / 0.35);
  animation: ydSpin 46s linear infinite reverse;
}
.yd_Ring2 {
  inset: 16%;
  border: 1px solid rgb(var(--yt-400-rgb) / 0.35);
  animation: ydSpin 30s linear infinite;
}
.yd_Ring1 {
  inset: 32%;
  background: radial-gradient(circle, rgb(var(--yt-600-rgb) / 0.4), transparent 70%);
  border: 1px solid rgb(var(--yt-400-rgb) / 0.2);
}
.yd_Sat {
  position: absolute;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #140b2a;
  border: 1px solid rgb(var(--yt-400-rgb) / 0.45);
  color: rgb(var(--yt-300-rgb));
}
.yd_Sat svg { width: 18px; height: 18px; }
/* keep icons upright while their ring turns */
.yd_Ring2 .yd_Sat svg { animation: ydSpin 30s linear infinite reverse; }
.yd_Ring3 .yd_Sat svg { animation: ydSpin 46s linear infinite; }
.yd_Sat--ai {
  background: linear-gradient(135deg, rgb(var(--yt-600-rgb)), rgb(var(--yt-500-rgb)));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 18px rgb(var(--yt-400-rgb) / 0.7);
}
.yd_Heart {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, rgb(var(--yt-600-rgb)), rgb(var(--yt-500-rgb)));
  box-shadow: 0 0 0 8px rgb(var(--yt-600-rgb) / 0.15), 0 18px 40px -10px rgb(var(--yt-600-rgb) / 0.8);
  animation: ydBeat 3s ease-in-out infinite;
}
.yd_Heart svg { width: 30px; height: 30px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199.98px) {
  .yd_Grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "top  top"
      "roll adv"
      "core core";
  }
  .yd_Photo { min-height: 280px; }
  .yd_Grid .yd_Core { padding: 40px; }
}
@media (max-width: 767.98px) {
  .yd_Sec { padding: 72px 0; }
  .yd_Sec .common_Title { margin-bottom: 36px; }
  .yd_Grid {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "roll" "adv" "core";
  }
  .yd_Photo { min-height: 220px; }
  .yd_Rank { grid-template-columns: repeat(5, 8px); gap: 6px; padding: 10px; right: 12px; bottom: 12px; }
  .yd_Rank i { width: 8px; height: 8px; }
  .yd_Top_Body { padding: 22px 10px 8px; }
  .yd_Grid .yd_Core {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 30px 24px 36px;
  }
  .yd_Orbit { width: 200px; height: 200px; align-self: center; }
  .yd_Blob { filter: blur(60px); }
}

@media (prefers-reduced-motion: reduce) {
  .yd_Sec *,
  .yd_Sec *::before,
  .yd_Sec *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .yd_Dots--lit { display: none; }
  .yd_Shield .c { stroke-dashoffset: 0; }
}

.sap-cloud-erp-private .bg_Dark_Img{
  background: url(../images/sap/full_BG_2.jpg);
      background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
}