/* ── Global Typography Scale — matches index.html so headings,
       subheadings and body text read the same across both pages ── */
    :root {
      --fs-badge:     13px;
      --fs-h2:        clamp(1.8rem, 3vw, 2.6rem);   /* all section headings */
      --fs-h2-weight: 600;
      --fs-sub:       20px;                          /* all subheadings */
      --fs-body:      14px;                          /* all body/description text */
      --ls-heading:   -0.02em;
      /* Product brand gradient — green → blue, the same two anchor colors
         used across the top bar's two halves. Reused by the top-bar
         buttons so no new colors are introduced. */
      --brand-gradient: linear-gradient(90deg, #78CB9B 0%, #2C5BFD 100%);
    }
    /* ─── RESET & BASE ──────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Poppins', sans-serif; background: #fff; color: #1E1E1E; overflow-x: hidden; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; }

    /* ═══════════════════════════════════════════════════════════
       TOP BAR — split supplier / buyer
    ═══════════════════════════════════════════════════════════ */
    /* #top-bar is now the sticky "nav" — see NAVBAR below, which has had
       its own sticky + shadow removed in favor of this. */
    #top-bar {
      display: flex;
      width: 100%;
      height: 52px;
      overflow: hidden;
      position: sticky;
      top: 0;
      z-index: 1001;
      background: #fff;
      border-bottom: 1px solid #f0f2f5;
      box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    }

    /* Each half — white by default; color only shows on hover or once a
       side is the active/selected mode (::before fill, per-side gradient
       below). ::after is a shared subtle shine highlight. Both sit behind
       the label/button (z-index:-1 / contained by overflow:hidden). */
    .tb-half {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 32px;
      cursor: pointer;
      background: #fff;
      transition: transform 0.3s cubic-bezier(.22,.61,.36,1),
                  box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    .tb-half::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.32s cubic-bezier(.22,.61,.36,1);
    }
    .tb-half:hover::before,
    .tb-half.tb-active::before {
      transform: scaleX(1);
    }
    .tb-half::after {
      content: '';
      position: absolute;
      top: 0; left: -75%;
      width: 45%; height: 100%;
      background: linear-gradient(115deg, transparent, rgba(255,255,255,0.45), transparent);
      transform: skewX(-20deg);
      transition: left 0.45s ease;
      pointer-events: none;
    }
    .tb-half:hover::after { left: 130%; }
    .tb-half:hover {
      transform: translateY(-2.5px);
      z-index: 2;
    }
    .tb-half:active {
      transform: translateY(0) scale(0.985);
      transition-duration: 0.15s;
    }

    /* Active/selected half — same fill as hover (via the shared ::before
       rule above), slightly larger so it reads as "selected" at a glance. */
    .tb-half.tb-active {
      transform: scale(1.02);
      z-index: 2;
    }
    .tb-half.tb-active:hover {
      transform: scale(1.02) translateY(-2.5px);
    }
    .tb-half.tb-active:active {
      transform: scale(1.01) translateY(0);
      transition-duration: 0.15s;
    }

    /* Supplier side — green gradient fill on hover/active */
    .tb-supplier::before {
      background: linear-gradient(90.97deg, #78CB9B -2.94%, #F4F9D9 120.67%);
    }
    /* Buyer side — blue gradient fill on hover/active */
    .tb-buyer::before {
      background: linear-gradient(89.15deg, #D5F9FF 1.6%, #2C5BFD 136.47%);
    }

    /* Mode label */
    .tb-mode-label {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.04em;
      flex: 1;
      text-align: center;
    }

    /* Buttons — kept as plain, quiet pills. The premium sweep/lift/glow/
       shine/press interaction now lives on .tb-half (the whole panel)
       above, not on these — see that block instead. */
    .tb-btn {
      background: transparent;
      border: 1px solid #1E1E1E;
      color: #232323;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 600;
      padding: 7px 20px;
      border-radius: 6px;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s ease;
    }
    .tb-btn:hover { background: rgba(0,0,0,0.08); }
    /* Buyer button — same border/text color */
    .tb-buyer .tb-btn { border-color: #1E1E1E; color: #232323; }
    .tb-buyer .tb-btn:hover { background: rgba(255,255,255,0.2); }

    /* Mode labels — supplier's dark green reads fine on white (rest) and
       on its own green gradient (hover/active), so it never needs to
       change. Buyer's label stays a fixed dark navy in both states. */
    .tb-supplier .tb-mode-label { color: #1a4a2e; transition: color 0.25s ease; }
    .tb-buyer .tb-mode-label { color: #0a0f34; }


    /* ═══════════════════════════════════════════════════════════
       NAVBAR
    ═══════════════════════════════════════════════════════════ */
    #mainNav {
      /* No longer sticky and no shadow — #top-bar is now the sticky nav
         with the drop shadow; this scrolls away normally underneath it. */
      position: static;
      background: #fff;
      padding: 14px 0 12px;
      /* Split top border: green left, blue right */
      border-top: 3px solid transparent;
      background-clip: padding-box;
    }
    /* Two-color top border via pseudo */
    #mainNav::before {
      content: '';
      position: absolute;
      top: -3px; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #78CB9B 50%, #2C5BFD 50%);
    }
    /* ═══════════════════════════════════════════════════════════
       PAGE VIEWS — show/hide supplier vs buyer
    ═══════════════════════════════════════════════════════════ */
    .view-supplier { display: block; }
    .view-buyer    { display: none; }
    body.buyer-mode .view-supplier { display: none; }
    body.buyer-mode .view-buyer    { display: block; }

    /* ═══════════════════════════════════════════════════════════
       HERO — SUPPLIER
    ═══════════════════════════════════════════════════════════ */
    #hero-supplier {
      /* background: #fff url(images/herobg_supply.png) right / contain no-repeat; */
      padding: 20px 0 20px;
      position: relative;
      overflow: hidden;
    }

    /* — Left copy — */
    .hero-sup-tag {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: #444;
      font-weight: 500;
      margin-bottom: 22px;
      font-family: 'Space Mono', monospace;
      letter-spacing: 0.01em;
    }
    .hero-sup-tag .dot {
      width: 9px; height: 9px;
      background: #4CAF50;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .hero-h1 {
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      font-weight: 400;
      line-height: 1.18;
      color: #1E1E1E;
      margin-bottom: 4px;
    }
    .hero-h1 em {
      font-style: italic;
      font-weight: 600;
      color: #1E1E1E;
      position: relative;
      display: inline-block;
    }
    /* Green underline under "not ready," — draws left→right */
    .hero-h1 em::after {
      content: '';
      position: absolute;
      left: 0; bottom: -3px;
      width: 100%; height: 3px;
      background: #4CAF50;
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: left;
      animation: drawUnderline 1.2s 0.7s ease-out forwards;
    }
    @keyframes drawUnderline {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    /* "Be Ready Before Buyers Ask." line */
    .hero-h1-highlight {
      display: block;
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      font-weight: 600;
      line-height: 1.15;
      margin-top: 8px;
      margin-bottom: 15px;
    }
    .hl-green {
      background: #78CB9B;
      color: #fff;
      padding: 4px 14px 6px;
      border-radius: 5px;
      display: inline-block;
      transform-origin: center;
      animation: beReadyFloat 2.2s 1.5s ease-in-out infinite alternate;
    }
    @keyframes beReadyFloat {
      from { transform: rotate(358deg) translateY(0px); }
      to   { transform: rotate(357deg) translateY(-5px); }
    }
    .hl-blue {
      color: #4a7fe8;
    }

    /* "supplier program." — gradient box highlight, buyer hero */
    .bp-highlight {
      background: linear-gradient(90.29deg, #2C5BFD -11.3%, #5EE0F7 99.49%);
      color: #fff;
      padding: 6px 18px 9px;
      border-radius: 12px;
      display: inline-block;
      /* gentle continuous float, same keyframes as .ctab-pill/.ui-pill */
      animation: ctabPillFloat 2.2s 1.1s ease-in-out infinite alternate;
    }
    @media (prefers-reduced-motion: reduce) {
      .bp-highlight { animation: none !important; }
    }

    .hero-sub {
      font-size: 18px;
      color: #404858;
      line-height: 1.3;
      margin-bottom: 15px;
    }
    .hero-sub-bold {
      font-size: 20px;
      font-weight: 600;
      color: #1E1E1E;
      line-height: 1.3;
      margin-bottom: 28px;
      max-width: 500px;
    }

    .hero-ctas {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }
    .btn-green-solid {
      background: linear-gradient(88.79deg, #78CB9B 0.58%, #C1D177 105.62%);
      color: #fff !important;
      border: none;
      border-radius: 14px;
      padding: 10px 20px;
      font-size: 12px;
      font-weight: 600;
      font-family: 'Poppins', sans-serif;
      cursor: pointer;
      transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      display: inline-block;
    }
    .btn-green-solid:hover { opacity: 0.9; transform: translateY(-1px); }
    .btn-green-solid:active { transform: translateY(0) scale(0.97); }
    .btn-dark-arrow {
      background: #111;
      color: #fff !important;
      border: none;
      border-radius: 8px;
      padding: 8px 15px;
      font-size: 12px;
      font-weight: 500;
      font-family: 'Poppins', sans-serif;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .btn-dark-arrow .arrow-circle {
      width: 28px; height: 28px;
      background: #fff;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .btn-dark-arrow .arrow-circle i { color: #1E1E1E; font-size: 11px; }
    .btn-dark-arrow:hover { background: #222; }
    .btn-dark-arrow:active { transform: scale(0.97); }

    .hero-tagline {
      font-family: 'Space Mono', monospace;
      font-size: 16px;
      color: #888;
      letter-spacing: 0.08em;
    }
    .hero-tagline span { color: #1E1E1E; font-weight: 700; }


    /* ═══════════════════════════════════════════════════════════
       BUYER PAGE GLOBALS — overrides scoped to buyer-mode only
    ═══════════════════════════════════════════════════════════ */
    body.buyer-mode .ui-badge {
      background: linear-gradient(87.31deg, rgba(44,91,253,0.5) 0%, rgba(94,224,247,0.5) 100%);
    }

    /* Buyer CTA buttons — blue gradient replaces solid black everywhere */
    body.buyer-mode .hiw-cta-dark,
    body.buyer-mode .wif-btn {
      background: #1E1E1E;
      border-color: transparent;
    }
    body.buyer-mode .hiw-cta-dark:hover,
    body.buyer-mode .wif-btn:hover {
      background: linear-gradient(90.72deg, rgba(44,91,253,1) 2.93%, rgba(94,224,247,1) 110.73%);
      color: #fff;
      text-decoration: none;
    }

    /* Buyer hero primary CTA — blue solid button (same as btn-green-solid, color only differs) */
    .btn-blue-solid {
      background: linear-gradient(90.72deg, rgba(44,91,253,0.8) 2.93%, rgba(94,224,247,0.8) 110.73%);
      color: #fff !important;
      border: none;
      border-radius: 14px;
      padding: 10px 20px;
      font-size: 12px;
      font-weight: 600;
      font-family: 'Poppins', sans-serif;
      cursor: pointer;
      transition: opacity 0.2s ease, transform 0.2s ease;
      display: inline-block;
    }
    .btn-blue-solid:hover {
      background: linear-gradient(90.72deg, rgba(44,91,253,1) 2.93%, rgba(94,224,247,1) 110.73%);
      opacity: 0.9;
      transform: translateY(-1px);
    }

    /* ═══════════════════════════════════════════════════════════
       HERO — BUYER
    ═══════════════════════════════════════════════════════════ */
    #hero-buyer {
      padding: 20px 0 0px;
      position: relative;
      overflow: hidden;
    }
    #hero-buyer .hero-h1 { font-weight: 600; }

    /* Buyer hero sub-copy — single paragraph/column: plain line, then
       the closing line inline-bold right below it (no separate block). */
    #hero-buyer .hero-sub-buyer { margin: 15px 0 15px 0; }
    #hero-buyer .hero-sub-buyer .hero-sub-bold {
      display: inline-block;
      margin-top: 4px;
    }

    /* "find" — muted + animated strike-through (reuses drawUnderline keyframe) */
    .bh-strike {
      font-weight: inherit;
      color: #b0b0b0;
      position: relative;
      display: inline-block;
    }
    .bh-strike::after {
      content: '';
      position: absolute;
      left: 0; top: 50%; margin-top: 0px;
      width: 100%; height: 5px;
      background: linear-gradient(89.03deg, #2C5BFD -16.44%, #5EE0F7 123.06%);
      border-radius: 2px;
      rotate: -5deg;
      transform-origin: left;
      animation: drawUnderline 1.2s 0.7s ease-out both;
    }

    /* "suppliers." — green/yellow gradient text (same gradient as btn-green-solid) */
    .bh-grad-green {
      background: linear-gradient(88.79deg, #78CB9B 0.58%, #C1D177 105.62%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* "Understand" — blue gradient text */
    .bh-grad-blue {
      background: linear-gradient(90.29deg, #2C5BFD -11.3%, #5EE0F7 99.49%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ═══════════════════════════════════════════════════════════
       LOGO STRIP — reusable infinite ease slider
    ═══════════════════════════════════════════════════════════ */
    .logo-strip { background: #fff; }
    .ls-slider-wrap { overflow: hidden; width: 100%; }
    .ls-track {
      display: flex;
      align-items: center;
      will-change: transform;
    }
    .ls-slide {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24px;
    }
    .ls-slide img {
      max-height: 48px;
      width: auto;
      max-width: 160px;
      object-fit: contain;
      opacity: 0.78;
      filter: grayscale(100%);
      transition: opacity 0.3s ease, transform 0.3s ease;
      display: block;
    }
    .ls-slide img:hover { opacity: 1; transform: scale(1.03); }

    /* ═══════════════════════════════════════════════════════════
       BUYER STORYTELLING — pinned, scroll-driven cross-fade
       (desktop only; mobile keeps native horizontal swipe below)
       Reuses all .story-* class styles; only ID overrides here
    ═══════════════════════════════════════════════════════════ */
    #buyer-story-wrap { height: 250vh; position: relative; }
    /* Same pinned scroll-stage as #scroll-story — see the note there. */
    #buyer-story {
      position: sticky;
      top: 52px; /* below sticky top-bar (nav is no longer sticky) */
      height: calc(100vh - 52px);
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }

    /* Centered header */
    #buyer-story .story-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      margin-bottom: 0;
    }
    #buyer-story .section-heading { text-align: center; }
    #buyer-story .section-subheading { text-align: center; }

    /* Horizontal progress bar below subtitle */
    #buyer-story .ui-progress {
      position: relative;          /* stays in flow AND contains the thumb */
      right: auto; top: auto; bottom: auto;
      width: 70%;
      height: 4px;
      margin: 18px auto 26px;
      z-index: auto;
    }
    /* Override the global vertical-bar thumb (3px wide, 50% tall) */
    #buyer-story .ui-progress-thumb {
      position: absolute;
      top: 0; left: 0;
      width: 50%;
      height: 4px;                 /* full height of the 4px bar */
    }

    /* Panel-left / image-right: put .story-panel first in HTML, image second */
    #buyer-story .story-panel { padding-right: 0; padding-left: 0; }

    /* "This leads to:" label */
    .bs-leads-label {
      font-size: 12px;
      font-weight: 700;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin: 8px 0 10px;
    }

    /* PNG icon inside list items (buyer uses images instead of FA icons) */
    .ui-item-img-icon {
      width: 30px;
      height: 30px;
      object-fit: contain;
      flex-shrink: 0;
    }

    /* Buyer story list items — bordered card style */
    #buyer-story .ui-list-item {
      border: 1.5px solid #e0e4ec;
      background: #f8f9fc;
      align-items: center;
    }

    /* Buyer icon — white card chip with shadow */
    #buyer-story .ui-item-img-icon {
      box-sizing: border-box;
      width: 45px;
      height: 45px;
      padding: 12px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
      flex-shrink: 0;
    }

    /* ═══════════════════════════════════════════════════════════
       BUYER PROGRAM — 6-step timeline (click-based, no pin)
    ═══════════════════════════════════════════════════════════ */
    #buyer-prog-wrap { position: relative; }
    #buyer-prog {
      position: relative;
      background: #fff;
      display: flex;
      flex-direction: column;
      overflow: visible;
    }
    /* Make the Bootstrap container fill and flex as a column */
    #buyer-prog > .container {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    /* Header row: text left, CTA right */
    .bprog-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 28px;
      flex-shrink: 0;
    }
    .bprog-header-left { max-width: 560px; }
    .bprog-header-left .section-heading {
      color: #1E1E1E;
      line-height: 1.2;
      margin: 10px 0 6px;
    }
    .bprog-header-left .section-subheading { color: #404858; margin: 0; }
    /* CTA override — smaller/lighter than global .hiw-cta */
    .bprog-header-right .hiw-cta { font-size: 12px; font-weight: 500; }
    /* Four Steps only — its header-right holds 2 CTAs (bprog's own
       only ever has 1, so it never needed explicit flex/gap here). */
    #four-steps .bprog-header-right { display: flex; align-items: center; gap: 12px; }

    /* Four Steps only — centered header (no right-hand CTA column;
       the CTAs now live below the steps, see .fs-cta-row). */
    #four-steps .bprog-header {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }
    #four-steps .bprog-header-left { max-width: 900px; }

    /* CTA row — left grid column, hugging the bottom of .bprog-timeline.
       The video spans both rows so row 1's height is set by the timeline
       alone; otherwise the tall video pushed the CTAs way down. */
    #four-steps .bprog-body {
      grid-template-rows: auto 1fr;
      row-gap: 0;
    }
    #four-steps .bprog-timeline   { grid-column: 1; grid-row: 1; }
    #four-steps .bprog-video-wrap { grid-column: 2; grid-row: 1 / span 2; }
    #four-steps .fs-cta-row {
      grid-column: 1; grid-row: 2;
      align-self: start;
      justify-content: flex-start;
      margin-top: 24px;
    }

    /* Body: 50/50 grid, fills remaining height */
    .bprog-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      flex: 1;
      min-height: 0;
      align-items: start;
    }
    /* ── Timeline ── */
    .bprog-timeline {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    /* Vertical connecting line */
    .bprog-line {
      position: absolute;
      left: 19px;   /* horizontal centre of 40px circle */
      top: 20px; bottom: 20px;
      width: 2px;
      background: #e4e4e4;
      border-radius: 1px;
      z-index: 0;
    }

    /* Each step row */
    .bprog-step {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
      border: none; background: none;
      text-align: left;
      width: 100%;
      padding: 15px 0;
    }
    .bprog-step:focus        { outline: none; }
    .bprog-step:focus-visible { outline: 2px solid #2C5BFD; outline-offset: 4px; border-radius: 4px; }

    /* Numbered circle */
    .bprog-circle {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 2px solid #ccc;
      background: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 600;
      color: #555;
      flex-shrink: 0;
      transition: transform  0.35s cubic-bezier(.22,1,.36,1),
                  background 0.3s  ease,
                  border-color 0.3s ease,
                  color       0.3s  ease;
      position: relative; z-index: 2;
    }
    .bprog-step.bp-active .bprog-circle {
      background: #1E1E1E;
      border-color: #1E1E1E;
      color: #fff;
      transform: scale(1.12);
    }

    /* Step text */
    .bprog-step-content { padding-top: 9px; flex: 1; }
    .bprog-step-title {
      font-size: 14.5px;
      font-weight: 500;
      color: #1E1E1E;
      line-height: 1.4;
      margin: 0;
      transition: font-size 0.3s ease;
    }
    .bprog-step.bp-active .bprog-step-title { font-size: 15px; font-weight: 500; }

    /* Description: smooth expand / collapse */
    .bprog-desc-wrap {
      overflow: hidden;
      max-height: 0; opacity: 0; margin-top: 0;
      transition: max-height 0.45s cubic-bezier(.22,1,.36,1),
                  opacity    0.35s ease,
                  margin-top 0.3s  ease;
    }
    .bprog-step.bp-active .bprog-desc-wrap {
      max-height: 160px; opacity: 1; margin-top: 6px;
    }
    .bprog-desc { font-size: 14px; color: #666; line-height: 1.65; margin: 0; }

    /* ── Video panel — one clip per step, all pre-loaded and playing,
       stacked on top of each other and cross-faded via opacity so
       switching steps is instant (no reload/decode delay from
       swapping a single element's src). Panel height is measured
       once from the first clip's real intrinsic size (JS) so the
       box never depends on which clip happens to be visible. ── */
    .bprog-video-wrap {
      border-radius: 20px;
      overflow: hidden;
      min-height: 0;
      /* background: #f3f5f7; */
      position: relative;
    }
    .bprog-video-wrap video {
      width: 100%; height: 100%;
      object-fit: contain; display: block;
    }
    .bprog-video-wrap .bp-video {
      position: absolute; inset: 0;
      opacity: 0;
      transition: opacity .35s ease;
    }
    .bprog-video-wrap .bp-video.bp-video-active { opacity: 1; z-index: 1; }
    /* Video was rendering too tall. Narrowing the panel by 25% (its
       height is derived from this same width in JS) shrinks it
       proportionally, with no letterboxing. Buyer page (Supplier
       Program) instead uses full width to match the steps column. */
    #buyer-prog .bprog-video-wrap { width: 100%; margin: 0 auto; }
    #four-steps .bprog-video-wrap { width: 75%; margin: 0 auto; }

    /* ═══════════════════════════════════════════════════════════
       BUYER REQUIREMENTS — 3-stage accordion (click-based, no pin)
    ═══════════════════════════════════════════════════════════ */
    #buyer-reqs-wrap { position: relative; }
    #buyer-reqs {
      position: relative;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: visible;
    }
    #buyer-reqs > .container {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column;
    }

    /* Centered header (same pattern as #buyer-story header) */
    #buyer-reqs .story-header {
      flex-direction: column; align-items: center;
      text-align: center; gap: 8px; margin-bottom: 0px;
    }
    #buyer-reqs .section-heading { text-align: center; }
    #buyer-reqs .section-subheading {
      text-align: center;
      margin: 0 auto; line-height: 1.6;
      max-width: 80%;
    }

    /* Body grid: stages left, video right */
    .breqs-body {
      display: grid;
      grid-template-columns: 3fr 7fr;
      gap: 48px;
      flex: 1; min-height: 0;
      align-items: center;
    }
    /* Stretch video to fill body height */
    #buyer-reqs .story-image-wrap {
      height: 100%;
      max-height: calc(100vh - 52px - 240px);
    }

    /* Stages column */
    .breqs-stages { display: flex; flex-direction: column; }

    /* Item: wrapper for tab + description (no border itself) */
    .breqs-item { margin-bottom: 16px; }
    .breqs-item:last-child { margin-bottom: 0; }
    .breqs-item.breqs-active { margin-bottom: 30px; }

    /* Tab button — the ONLY element with a border */
    .breqs-tab {
      border: 2px solid #89929C;
      border-radius: 12px;
      padding: 14px 20px;
      cursor: pointer; background: #fff;
      text-align: left; width: 100%;
      font-family: inherit;
      transition: background 0.3s ease;
    }
    .breqs-tab:hover { background: #fafbff; }
    /* Gradient border on active tab — unique gradient per stage */
    /* 1. Readiness Layer — green/yellow-green */
    .breqs-item:nth-child(1).breqs-active .breqs-tab {
      border: 2px solid transparent;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90.95deg, #78CB9B 22.1%, #C1D177 120.65%) border-box;
    }
    /* 2. Custom Evaluation Layer — blue */
    .breqs-item:nth-child(2).breqs-active .breqs-tab {
      border: 2px solid transparent;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(91.15deg, #2C5BFD -15.48%, #5EE0F7 109.63%) border-box;
    }
    /* 3. The Final Outcome — multi-colour spectrum */
    .breqs-item:nth-child(3).breqs-active .breqs-tab {
      border: 2px solid transparent;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(87.37deg, #2C5BFD -0.94%, #5EE0F7 25.57%, #78CB9B 52.62%, #C1D177 83.92%, #EF9B4E 109.4%) border-box;
    }
    .breqs-tab:focus         { outline: none; }
    .breqs-tab:focus-visible { outline: 2px solid #2C5BFD; outline-offset: 3px; border-radius: 12px; }

    /* Stage title */
    .breqs-title { font-size: 15px; font-weight: 600; color: #1E1E1E; line-height: 1.4; margin: 0; }

    /* Description: sibling to tab, outside the border, no bg */
    .breqs-desc-wrap {
      overflow: hidden;
      max-height: 0; opacity: 0; margin-top: 0;
      transform: translateY(-8px);
      transition: max-height 0.45s cubic-bezier(.22,1,.36,1),
                  opacity    0.35s ease,
                  margin-top 0.3s  ease,
                  transform  0.4s  cubic-bezier(.22,1,.36,1);
    }
    .breqs-item.breqs-active .breqs-desc-wrap {
      max-height: 220px; opacity: 1; margin-top: 20px; transform: translateY(0);
    }
    .breqs-desc { font-size: 14px; color: #555; line-height: 1.65; margin: 0; padding: 0 4px; }

    /* ═══════════════════════════════════════════════════════════
       MOBILE
    ═══════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
      #hero-supplier {
        /* background: #fff url(images/herobg_supply.png) right / contain no-repeat; */
        padding: 20px 0 0px;
        position: relative;
        overflow: hidden;
      }

      /* Top bar — both halves side by side, stacked button + label in each */
      #top-bar { height: 52px; }
      .tb-half {
        flex: 0 0 50%; max-width: 50%;
        flex-direction: column; justify-content: center; align-items: center;
        gap: 3px; padding: 6px 8px;
      }
      /* Mobile: hide the "Free Registration" / "Book a Demo" buttons —
         only the mode labels remain in the top bar */
      .tb-btn { display: none !important; }
      /* Spacer <span>s existed only to balance the now-hidden buttons —
         they were still holding a row and pushing the label off-centre */
      .tb-half > span:not(.tb-mode-label) { display: none !important; }
      .tb-mode-label {
        font-size: 12px; font-weight: 600;
        letter-spacing: 0; white-space: nowrap;
        text-align: center; order: 1;
        /* desktop sets flex:1 — in this column layout that stretched the
           label to full height and pinned the text to the top */
        flex: 0 0 auto;
      }

      /* Hero heading — override clamp with fixed 2rem on mobile */
      .hero-h1 { font-size: 2rem; }

      /* Hero CTA buttons — single row on mobile */
      .hero-ctas { flex-wrap: nowrap; gap: 10px; margin-bottom: 24px; }
      .hero-ctas .btn-green-solid {
        flex: 1; min-width: 0; text-align: center;
        font-size: 12px; padding: 12px 0px; border-radius: 10px;
      }
      .btn-blue-solid {
        background: linear-gradient(90.72deg, rgba(44,91,253,0.8) 2.93%, rgba(94,224,247,0.8) 110.73%);
        color: #fff !important;
        border: none;
        border-radius: 8px;
        padding: 12px 8px;
        font-size: 10px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: opacity 0.2s ease, transform 0.2s ease;
        display: inline-block;
      }
      .hero-ctas .btn-dark-arrow {
        flex: 1; min-width: 0; justify-content: center;
        font-size: 10px; padding: 12px 8px; gap: 5px;
      }
      .hero-ctas .btn-dark-arrow .arrow-circle {
        width: 20px; height: 20px; flex-shrink: 0;
      }
      .hero-ctas .btn-dark-arrow .arrow-circle i { font-size: 8px; }

      /* ── Hero mobile: reorder score card before tagline ──
         display:contents dissolves the left col — its children
         become direct flex items of .row so order works across
         both Bootstrap columns without any HTML change.
      ── */
      #hero-supplier .row {
        margin-left: 0;   /* cancel Bootstrap negative gutter margins */
        margin-right: 0;
        margin-top: 0;    /* cancel Bootstrap negative gutter-y */
      }
      #hero-supplier .col-lg-6:first-child { display: contents; }
      #hero-supplier .hero-sup-tag,
      #hero-supplier .hero-h1,
      #hero-supplier .hero-h1-highlight,
      #hero-supplier .hero-sub,
      #hero-supplier .hero-sub-bold,
      #hero-supplier .hero-ctas,
      #hero-supplier .hero-tagline { flex: 0 0 100%; max-width: 100%; }
      #hero-supplier .hero-sup-tag      { order: 1; }
      #hero-supplier .hero-h1           { order: 2; }
      #hero-supplier .hero-h1-highlight { order: 3; }
      #hero-supplier .hero-sub          { order: 4; }
      #hero-supplier .hero-sub-bold     { order: 5; }
      #hero-supplier .hero-ctas         { order: 6; }
      .hero-sub-bold {
        font-size: 18px;
        font-weight: 600;
        color: #1E1E1E;
        line-height: 1.3;
        margin-bottom: 8px;
      }
      #hero-supplier .col-lg-6:last-child {
        order: 7; margin-top: 0; padding-left: 0; padding-right: 0;
      }
      #hero-supplier .hero-tagline { order: 8; margin-top: 20px; }
    }

    /* ═══════════════════════════════════════════════════════════
       REUSABLE UI COMPONENTS
    ═══════════════════════════════════════════════════════════ */

    /* Pill */
    .ui-pill {
      display: inline-block;
      font-size: 14px;
      font-weight: 500;
      padding: 9px 22px;
      border-radius: 30px;
      border: 1px solid #1B1B1B;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .ui-pill--green {
      background: linear-gradient(101.19deg, #78CB9B 24.54%, #C1D177 86.73%);
      border: 1px solid #1B1B1B;
      color: #141212;
    }

    /* Card */
    .ui-card {
      background: #fff;
      border-radius: 16px;
      border: 1px solid #e8e8e8;
      box-shadow: 0 2px 20px rgba(0,0,0,0.06);
      overflow: hidden;
    }
    .ui-card-header { padding: 22px 24px 16px; }
    .ui-card-body   { padding: 0 24px 24px; }

    /* Plain variant — no card chrome, used for buyer-story slide 0's
       "problem/cost" layout (heading + boxed cards, not a big outer card). */
    .ui-card--plain { background: transparent; border: none; box-shadow: none; }

    /* Problem/cost mini-card grid */
    .bs-pc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 18px;
    }
    .bs-pc-card {
      background: #f5f6f8;
      border-radius: 14px;
      padding: 18px 20px;
      border: 1.5px solid transparent;
      transition: background 0.25s ease, border-color 0.25s ease,
                  box-shadow 0.25s ease, transform 0.25s ease;
    }
    .bs-pc-card:hover {
      background: #eef1f5;
      border-color: #78CB9B;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      transform: translateY(-2px);
    }
    .bs-pc-icon {
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 8px;
      background: #fff;
      border: 1px solid #e5e7eb;
      color: #1E1E1E;
      margin-bottom: 12px;
    }
    .bs-pc-icon img { width: 18px; height: 18px; object-fit: contain; display: block; }
    .bs-pc-title {
      font-size: 15px;
      font-weight: normal;
      color: #1E1E1E;
      margin: 0 0 8px;
    }
    .bs-pc-desc {
      font-size: 13.5px;
      color: #555;
      line-height: 1.6;
      margin: 0;
    }
    .bs-pc-desc strong { color: #1E1E1E; font-weight: 500; }

    /* Buyer-story slide 1 — same mini-card pattern, 3-up + one highlighted */
    .bs-pc-grid--3col { grid-template-columns: repeat(3, 1fr); }
    .bs-pc-card--active { background: #eaf3ff; border-color: #cfe4ff; }
    .bs-pc-card--active:hover { background: #dcebff; }
    .bs-story-closing {
      font-size: 15px;
      color: #404858;
      line-height: 1.6;
      margin: 20px 0 0;
    }

    @media (max-width: 767px) {
      .bs-pc-grid { grid-template-columns: 1fr; }
      .bs-pc-grid--3col { grid-template-columns: 1fr; }
    }

    /* List */
    .ui-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .ui-list-item {
      display: flex;
      gap: 12px;
      padding: 7px;
      border-radius: 10px;
      cursor: default;
      transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }
    .ui-list-item:hover {
      background: #f5fdf6;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
      transform: translateY(-1px);
    }
    .ui-item-icon {
      font-size: 16px;
      color: #aaa;
      flex-shrink: 0;
      margin-top: 2px;
      transition: color 0.25s ease;
    }
    .ui-list-item:hover .ui-item-icon { color: #4CAF50; }
    .ui-item-text {
      font-size: 14px;
      color: #444;
      line-height: 1.65;
      text-align: justify;
    }

    /* Vertical progress (desktop) — absolute within .story-track */
    .ui-progress {
      position: absolute;
      right: -16px;        /* just outside the track's right edge (≈ panel right) */
      top: 0; bottom: 0;
      width: 3px;
      background: #e8e8e8;
      border-radius: 99px;
      z-index: 2;
    }
    .ui-progress-thumb {
      background: #232323;
      border-radius: 99px;
      transition: transform 0.55s cubic-bezier(.22,1,.36,1);
    }
    /* Supplier vertical bar — positional properties scoped here */
    #scroll-story .ui-progress-thumb {
      position: absolute;
      top: 0; left: 0;
      width: 3px;
      height: 50%;
    }

    /* ═══════════════════════════════════════════════════════════
       SCROLL STORY SECTION — pinned, scroll-driven cross-fade
       (restored per explicit request; desktop only — mobile keeps
       its native horizontal swipe, unchanged)
    ═══════════════════════════════════════════════════════════ */

    #scroll-story-wrap { height: 250vh; position: relative; }

    /* Pinned scroll-stage: slides are absolutely positioned and cross-fade
       as you scroll through #scroll-story-wrap's 250vh. The sticky pin and
       the fixed height are load-bearing — without them the wrapper leaves
       ~150vh of blank space and the scroll engine never reaches slide 2. */
    #scroll-story {
      position: sticky;
      top: 52px; /* below sticky top-bar (nav is no longer sticky) */
      height: calc(100vh - 52px);
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }

    /* Header row — CTA sits on the baseline of the subheading, not the
       top of the heading block */
    .story-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 32px;
    }

    .story-header .section-heading {
      color: #1E1E1E;
      line-height: 1.2;
      margin: 10px 0 6px;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .story-header .section-heading.is-exiting {
      opacity: 0;
      transform: translateY(-8px);
    }

    .story-header .section-subheading {
      color: #404858;
      margin: 0;
    }

    /* Story track — wraps slides, positioned context for progress bar */
    .story-track {
      position: relative;
      flex: 1;
      min-height: 420px;   /* desktop: tall enough to contain absolute slides */
    }

    /* Each slide: cross-fade on desktop via opacity, driven by the
       scroll-pin engine in the script below */
    .story-slide {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: center;
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.55s cubic-bezier(.22,1,.36,1);
    }
    .story-slide.ss-active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Slide 1 — visually swap to image-left/panel-right on desktop only
       (DOM order stays panel-then-image like every other slide, so
       mobile's column-reverse flush-video logic is untouched). */
    @media (min-width: 768px) {
      #buyer-slide-1 .story-panel      { order: 2; }
      #buyer-slide-1 .story-image-wrap { order: 1; }
    }

    /* Mobile-only prev/next controls — desktop uses the wheel/touch
       zone-lock pin instead, so these stay hidden there */
    .story-mob-nav { display: none; }

    /* Left images */
    .story-image-wrap {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      height: 420px;
    }
    .story-img {
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 18px;
      pointer-events: none;
      /* Slide-level opacity handles reveal — no per-image transition needed */
    }

    /* Right panel */
    .story-panel { position: relative; padding-right: 20px; }
    .story-pill-container { margin-bottom: 18px; min-height: 44px; }

    /* Content blocks — always visible; parent slide controls show/hide */
    .story-content-block { display: block; }

    /* Pill swap animation */
    .ui-pill.pill-fade {
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
    }

    /* ui-pill white variant — gradient text */
    .ui-pill--white {
      background: #fff;
      border-color: transparent;
      background-clip: padding-box;
      vertical-align: middle;
      /* Gradient text */
      background: #fff;
    }
    .ui-pill--white span {
      background: linear-gradient(91.08deg, #2C5BFD -8.75%, #5EE0F7 99.91%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 700;
    }

    /* ═══════════════════════════════════════════════════════════
       CTA — Join Buyer-Created Supplier Program
    ═══════════════════════════════════════════════════════════ */

    .ui-cta {
      background: url(images/cta-bracker.webp) center / cover no-repeat;
      border-radius: 20px;
      padding: 48px 56px;
      text-align: center;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(44, 91, 253, 0.25);
    }

    .ui-cta-title {
      font-size: 1.9rem;
      font-weight: 600;
      color: #fff;
      line-height: 1.55;
      margin-bottom: 20px;
    }
    /* Pill inside heading — Figma spec */
    .ui-cta-title .ui-pill {
      font-size: inherit;
      font-weight: 700;
      padding: 8px 22px;
      vertical-align: middle;
      display: inline-block;
      line-height: 1.4;
      border-radius: 15px;
      transform: rotate(-1.7deg);
      transform-origin: center;
      box-shadow: 6px 5px 0px 0px #00000040;
    }
    .ui-cta-brand { color: #fff; font-weight: 600; }

    /* Icon + description row */
    .ui-cta-bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }
    .ui-cta-icon {
      flex-shrink: 0;
      width: 72px; height: 72px;
      display: flex; align-items: center; justify-content: center;
    }
    .ui-cta-icon img { width: 100%; height: 100%; object-fit: contain; }
    .ui-cta-icon i { font-size: 2.2rem; color: rgba(255,255,255,0.9); }

    .ui-cta-desc {
      font-size: 17px;
      color: rgba(255, 255, 255, 0.82);
      line-height: 1.65;
      margin: 0;
      text-align: center;
      max-width: 440px;
    }

    /* Reveal animation */
    #cta-join .ui-cta {
      opacity: 0;
      transform: translateY(32px) scale(0.98);
      transition: opacity 0.75s cubic-bezier(.22,.61,.36,1),
                  transform 0.75s cubic-bezier(.22,.61,.36,1);
    }
    #cta-join .ui-cta.cta-visible { opacity: 1; transform: translateY(0) scale(1); }
    /* gentle continuous float on the "Supplier Programs" pill, same
       keyframes as .ctab-pill below — starts once the card has revealed */
    #cta-join .ui-cta.cta-visible .ui-cta-title .ui-pill {
      animation: ctabPillFloat 2.2s 1.1s ease-in-out infinite alternate;
    }
    @media (prefers-reduced-motion: reduce) {
      #cta-join .ui-cta { opacity: 1 !important; transform: none !important; transition: none !important; }
      #cta-join .ui-cta.cta-visible .ui-cta-title .ui-pill { animation: none !important; }
    }

    /* Mobile */
    @media (max-width: 767px) {
      .ui-cta { padding: 100px 24px; }
      .ui-cta-title { font-size: 1.5rem; }
      .ui-cta-bottom { flex-direction: column; text-align: center; }
      .ui-cta-desc { text-align: center; font-size: 14px; }
      .ui-cta-icon { width: 90px; height: 90px; }
    }
    @media (min-width: 768px) and (max-width: 1024px) {
      .ui-cta { padding: 40px 36px; }
    }

    /* ═══════════════════════════════════════════════════════════
       CTA BREAKER — Explore the Supplier Ecosystem
    ═══════════════════════════════════════════════════════════ */

    .ctab-inner {
      max-width: 1240px;
      width: 100%;
      margin: 0 auto;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      background: url('buyer-image/CTA breacker.webp') center / cover no-repeat;
      padding: 70px 80px;
      text-align: center;
      cursor: pointer;
      /* reveal animation start state */
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease,
                  transform 0.8s cubic-bezier(.22,1,.36,1);
    }
    .ctab-inner.ctab-visible { opacity: 1; transform: translateY(0); }

    .ctab-content { position: relative; z-index: 1; }

    .ctab-content .section-heading {
      line-height: 1.1;
      color: #fff;
      margin: 0 0 20px;
      transition: opacity 0.8s ease 0.15s,
                  transform 0.8s cubic-bezier(.22,1,.36,1) 0.15s;
    }
    .ctab-inner.ctab-visible .ctab-content .section-heading { opacity: 1; transform: translateY(0); }

    .ctab-pill {
      display: inline-block;
      background: #fff;
      padding: 8px 22px;
      border-radius: 18px;
      box-shadow: 0 8px 18px rgba(0,0,0,.18);
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      vertical-align: middle;
      transform-origin: center;
      /* scale-in reveal */
      transform: scale(0.9);
      transition: transform 0.8s cubic-bezier(.22,1,.36,1) 0.3s;
    }
    .ctab-inner.ctab-visible .ctab-pill {
      transform: scale(1);
      /* gentle continuous float, same style as .hl-green — starts
         once the scale-in reveal above has finished (1.1s = 0.3s
         delay + 0.8s duration) so it never fights that transition. */
      animation: ctabPillFloat 2.2s 1.1s ease-in-out infinite alternate;
    }
    @keyframes ctabPillFloat {
      from { transform: scale(1) rotate(-2deg) translateY(0px); }
      to   { transform: scale(1) rotate(2deg) translateY(-5px); }
    }

    /* Gradient text inside the white pill */
    .ctab-pill-inner {
      background: linear-gradient(128.75deg, #C1D177 0.07%, #78CB9B 97.64%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-size: inherit;
      font-weight: inherit;
    }

    .ctab-content .section-subheading {
      color: rgba(255,255,255,.92);
      line-height: 1.2;
      max-width: 760px;
      margin: 0 auto;
      transition: opacity 0.8s ease 0.3s,
                  transform 0.8s cubic-bezier(.22,1,.36,1) 0.3s;
    }
    .ctab-inner.ctab-visible .ctab-content .section-subheading { opacity: 1; transform: translateY(0); }

    /* Responsive — heading size handled by the universal .section-heading clamp() */
    @media (max-width: 767px) {
      .ctab-inner  { padding: 40px 24px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .ctab-inner, .ctab-content .section-heading, .ctab-pill, .ctab-content .section-subheading {
        opacity: 1 !important; transform: none !important; transition: none !important;
      }
    }

    /* ── Mobile — normal-flow section with a native horizontal swipe
       track inside (no pin, no page-scroll dependency) ── */
    @media (max-width: 767px) {
      #scroll-story-wrap, #buyer-story-wrap { height: auto; }

      #scroll-story, #buyer-story {
        position: relative;
        height: auto;
        overflow: visible;
        justify-content: flex-start;
      }

      /* Inner container becomes flex-column so track fills remaining height */
      #scroll-story .container, #buyer-story .container {
        display: flex;
        flex-direction: column;
        padding-bottom: 36px;   /* headroom for absolute progress bar */
      }

      /* Header: pinned, compact */
      .story-header { flex-direction: column; gap: 8px; margin-bottom: 12px; flex-shrink: 0; }
      .story-header .section-subheading { color: #404858; margin: 0; line-height: 1.1; }

      /* ③ Track: bleeds to viewport edges for full-width image, height fills rest */
      .story-track {
        position: static;            /* remove containing block — progress escapes to #scroll-story */
        min-height: auto;
        flex: 1;
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -1rem;             /* bleed: cancel container's px-3 padding */
        gap: 0;
      }
      .story-track::-webkit-scrollbar { display: none; }

      /* Slides: full viewport width, content stacked vertically */
      .story-slide {
        display: flex !important;
        flex-direction: column;
        position: relative !important;
        inset: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        flex: 0 0 100%;              /* full track width = full viewport */
        min-width: 0;
        gap: 0;
        transition: none !important;
        scroll-snap-align: start;
      }

      /* ① Image: edge-to-edge, no side padding */
      .story-image-wrap { height: 200px; border-radius: 12px; margin: 12px 12px 0; width: calc(100% - 24px); }
      .story-img { position: absolute; }

      /* Panel: restore horizontal padding (track bleeds, panel needs it) */
      .story-panel { padding: 10px 1rem 0; }

      /* ③ Compact card — enough to fit image + card in one screen */
      .ui-card {
        background: #fff;
        border-radius: 16px;
        border: none;
        box-shadow: none;
        overflow: hidden;
      }
      #scroll-story .ui-card-header, #buyer-story .ui-card-header { padding: 12px 16px 8px; }
      #scroll-story .ui-card-body,   #buyer-story .ui-card-body   { padding: 0 16px 50px; }
      #scroll-story .story-pill-container { margin-bottom: 8px; min-height: auto; }
      #scroll-story .ui-pill { font-size: 11.5px; padding: 5px 12px; }
      #scroll-story .ui-list, #buyer-story .ui-list { gap: 0; }
      #scroll-story .ui-list-item, #buyer-story .ui-list-item { padding: 6px 8px; gap: 8px; }
      #scroll-story .ui-item-text, #buyer-story .ui-item-text { font-size: 12.5px; line-height: 1.5; }
      #scroll-story .ui-item-icon, #buyer-story .ui-item-icon { font-size: 13px; }

      /* Buyer story: image is 2nd in HTML — reverse to put it on top on mobile.
         justify-content:flex-end is required here: .story-slide has a fixed
         height (inherited from #buyer-story's viewport-height layout), and
         .story-panel's content height varies per slide (different copy
         length/list-item count). With the default packing (flex-start,
         which in column-reverse anchors from the BOTTOM), any leftover
         space when a slide's content is shorter than the fixed height
         collected above the video — shifting its vertical position
         inconsistently slide to slide. flex-end anchors packing from the
         TOP instead, so the video always sits flush at the same position
         regardless of how much panel text a given slide has; the leftover
         space is pushed to the bottom instead, where it's invisible. */
      #buyer-story .story-slide { flex-direction: column-reverse; justify-content: flex-end; }

      /* Buyer story: progress bar pinned to bottom of sticky section */
      #buyer-story .ui-progress {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 16px !important;
        top: auto !important; right: auto !important;
        width: 48px !important; height: 4px !important;
        margin: 0 !important;
      }
      #buyer-story .ui-progress-thumb {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 50% !important; height: 4px !important;
      }

      /* ④ Progress bar: absolute at bottom of sticky section, NOT inside scroll track */
      .ui-progress {
        position: absolute !important;   /* escapes track (static) → anchors to #scroll-story (sticky) */
        left: calc(50% - 24px) !important; /* centred: 50% − half of 48px */
        bottom: 12px !important;
        right: auto !important; top: auto !important;
        width: 48px !important; height: 4px !important;
        background: #e0e0e0 !important;
      }
      .ui-progress-thumb {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 50% !important; height: 4px !important;
        background: #111 !important;
        transition: transform 0.4s cubic-bezier(.22,1,.36,1) !important;
      }

      /* ── Scroll Story + Buyer Story — stacked on mobile ──
         No slider in either: every slide renders one under the other
         in normal flow, so the swipe track, progress bar and prev/next
         controls are all switched off. (#buyer-story keeps its
         column-reverse rule above, which puts its video on top.) */
      #scroll-story .story-track,
      #buyer-story  .story-track {
        display: block;
        overflow-x: visible;   /* explicitly unset the swipe track's */
        overflow-y: visible;   /* overflow-x:scroll / overflow-y:hidden */
        scroll-snap-type: none;
        flex: none;
      }
      #scroll-story .story-slide,
      #buyer-story  .story-slide {
        flex: none;
        width: 100%;
        scroll-snap-align: none;
        /* Stacked slides are sized by their content. Everything below
           undoes the constraints that only made sense when each slide
           had to fit one swipe-track viewport: without them the tallest
           card gets clipped and the video gets squeezed. */
        height: auto;
        min-height: 0;
        justify-content: flex-start;
      }
      /* !important here is deliberate: something in the swipe-slider
         layout was still constraining the taller slide's card and
         clipping its last list item. These are the only properties that
         can clip in-flow content, so they're forced off for the whole
         chain. Trim back to plain declarations once confirmed fixed. */
      #scroll-story .story-panel,         #buyer-story .story-panel,
      #scroll-story .ui-card,             #buyer-story .ui-card,
      #scroll-story .ui-card-header,      #buyer-story .ui-card-header,
      #scroll-story .ui-card-body,        #buyer-story .ui-card-body,
      #scroll-story .ui-list,             #buyer-story .ui-list,
      #scroll-story .ui-list-item,        #buyer-story .ui-list-item,
      #scroll-story .story-content-block, #buyer-story .story-content-block {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
      }
      /* The image window keeps its fixed 200px crop and overflow:hidden —
         that letterbox is deliberate (the video is absolutely positioned
         inside it), not a side-effect of the slider. Only its ability to
         shrink is removed. */
      #scroll-story .story-image-wrap, #buyer-story .story-image-wrap {
        flex: 0 0 auto;
        height: 200px;
      }
      #scroll-story .story-slide + .story-slide,
      #buyer-story  .story-slide + .story-slide { margin-top: 28px; }

      #scroll-story .ui-progress,
      #buyer-story  .ui-progress   { display: none !important; }
      #scroll-story .story-mob-nav,
      #buyer-story  .story-mob-nav { display: none !important; }
      /* headroom above was reserved for the (now hidden) progress bar */
      #scroll-story .container,
      #buyer-story  .container { padding-bottom: 0; }

      /* ⑤ Prev/next controls — sit below the progress bar's headroom */
      .story-mob-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
        margin-top: 4px;
      }
      .story-mob-nav-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1.5px solid #e0e4ec;
        background: #fff;
        color: #1E1E1E;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
      }
      .story-mob-nav-btn:active { background: #1E1E1E; color: #fff; }
      .story-mob-nav-btn.is-disabled { opacity: 0.35; pointer-events: none; }
    }

    /* ═══════════════════════════════════════════════════════════
       KNOW YOUR SCORE — scroll-driven 3-step section
    ═══════════════════════════════════════════════════════════ */

    #kys-wrap { position: relative; }

    #kys-section {
      position: relative;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: visible;
    }

    /* Boxed container with bg color */
    .kys-box {
      background: #f4f9f0;
      border-radius: 24px;
      padding: 40px 48px;
      position: relative;
      overflow: hidden;
    }

    /* Background decorative circle — centered behind left + right content */
    .kys-bg-circle {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      opacity: 0.45;
      pointer-events: none;
      user-select: none;
      z-index: 0;
    }

    /* Everything above the bg */
    .kys-box > *:not(.kys-bg-circle) { position: relative; z-index: 1; }

    /* Centered header */
    .kys-header {
      text-align: center;
      margin-bottom: 36px;
    }
    .kys-header .ui-badge { margin-bottom: 14px; display: inline-block; }
    .kys-header .section-heading {
      color: #1E1E1E;
      margin: 0 0 8px;
    }
    .kys-header .section-subheading {
      color: #404858;
      margin: 0;
    }

    /* Body: left + right */
    .kys-body {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 48px;
      align-items: center;
    }

    /* Left */
    .kys-find-heading {
      font-size: 18px;
      color: #1E1E1E;
      line-height: 1.3;
      margin: 0 0 22px;
      max-width: 460px;
    }
    .kys-hl {
      background: linear-gradient(90deg, #2C5BFD 32.69%, #5EE0F7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      display: inline-block;
    }

    /* Icon + label pill grid — what the readiness score covers */
    .kys-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 28px;
    }
    .kys-pill {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid #dcdfd8;
      border-radius: 12px;
      padding: 12px 16px;
      background: #fff;
      font-size: 14px;
      font-weight: normal;
      color: #1E1E1E;
      transition: border-color .25s ease;
    }
    .kys-pill:hover {
      cursor: pointer;
      border: 1px solid transparent;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(85.8deg, #C1D177 6.84%, #78CB9B 105.3%) border-box;
    }
    .kys-pill img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }

    /* CTA row — left-aligned under the pill grid */
    .kys-ctas { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: nowrap; margin-bottom: 0; }
    /* Match the two buttons' size — .btn-dark-arrow is shared with other
       sections (smaller/tighter by default), so size it here to line up
       with .btn-outline-wa instead of changing the shared class. */
    .kys-ctas .btn-dark-arrow {
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 10px;
    }

    /* Outline + WhatsApp button */
    .btn-outline-wa {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1.5px solid #ddd;
      background: #fff;
      color: #111 !important;
      border-radius: 10px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Poppins', sans-serif;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-outline-wa:hover { border-color: #25D366; box-shadow: 0 2px 12px rgba(37,211,102,0.15); }
    .btn-wa-icon {
      width: 28px; height: 28px;
      background: #25D366;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .btn-wa-icon i { color: #fff; font-size: 13px; }

    /* Right: single static video (placeholder for now) + floating badge */
    .kys-right {
      position: relative;
      height: 400px;
      border-radius: 20px;
      overflow: visible;
    }
    .kys-static-video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: transparent;
      border-radius: 20px;
    }
    /* Mobile — premium card-stack (click-based, no pin) */
    @media (max-width: 767px) {
      #kys-wrap { height: auto; }

      #kys-section {
        position: relative;
        height: auto;
        justify-content: flex-start;
      }

      /* Box: relative for stack context; generous padding to match desktop's breathing room */
      #kys-section .kys-box {
        padding: 24px 20px 28px;
        position: relative;
        overflow: visible;
      }

      /* Header: centered, matching desktop */
      #kys-section .kys-header { text-align: center; margin-bottom: 20px; }
      #kys-section .kys-header .ui-badge { margin-bottom: 10px; }
      #kys-section .section-heading    { margin-bottom: 6px; }
      #kys-section .section-subheading { line-height: 1.5; }

      /* Body: plain block — kills the desktop 2-col grid completely */
      #kys-section .kys-body { display: block; }

      /* CTAs: single row, each button sharing the row equally —
         "Free Assessment" is short enough that both labels stay readable
         at any mobile width (same flex:1/min-width:0 pattern used by
         .hero-ctas above). */
      #kys-section .kys-ctas {
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
        flex-wrap: nowrap;
        justify-content: center;
        margin-bottom: 24px;
      }
      #kys-section .kys-ctas .btn-dark-arrow,
      #kys-section .kys-ctas .btn-outline-wa {
        flex: 1;
        min-width: 0;
        width: auto;
        justify-content: center;
        white-space: nowrap;
      }

      /* Left: flex column, centered */
      #kys-section .kys-left        { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 24px; }
      #kys-section .kys-find-heading { font-size: 18px; margin-bottom: 16px; max-width: none; }

      /* Pill grid: single column, full width on small screens */
      #kys-section .kys-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; width: 100%; }
      #kys-section .kys-pill { padding: 10px 12px; font-size: 12.5px; gap: 8px; }
      #kys-section .kys-pill img { width: 18px; height: 18px; }

      /* Video card */
      #kys-section .kys-right {
        width: 100%;
        height: 220px;
        margin-top: 8px;
        margin-bottom: 28px;
      }
      /* CTA buttons: sized to fit comfortably two-up in a single row */
      #kys-section .btn-dark-arrow { font-size: 12px; padding: 10px 10px; gap: 6px; }
      #kys-section .btn-outline-wa { font-size: 12px; padding: 10px 10px; gap: 6px; }
      #kys-section .btn-wa-icon    { width: 20px; height: 20px; flex-shrink: 0; }
      #kys-section .btn-wa-icon i  { font-size: 11px; }
      #kys-section .arrow-circle   { width: 20px; height: 20px; flex-shrink: 0; }
      #kys-section .kys-bg-circle  { width: 220px; left: -8px; top: 44%; }
    }


    /* ══════════════════════════════════════════════════════════════
       FOUR STEPS — From Registration to Verification
    ══════════════════════════════════════════════════════════════ */

    #four-steps-wrap { position: relative; }

    /* Normal-height panel (click-based, no pin) — same as Supplier
       Program (#buyer-prog): top/height/padding all match exactly. */
    #four-steps {
      position: relative;
      background: #fff;
      overflow: visible;
    }

    /* Inner — full height flex column (vertical padding now lives on
       #four-steps itself, matching #buyer-prog > .container) */
    .hiw-inner {
      max-width: 1200px; margin: 0 auto;
      padding: 0 40px;
      display: flex; flex-direction: column;
      height: 100%; gap: 0;
    }

    /* Header row — left col + right CTAs vertically centered */
    .hiw-header {
      display: flex; align-items: center;
      justify-content: space-between; gap: 32px;
      flex-shrink: 0;
    }
    .hiw-header-left { flex: 1 1 auto; }
    .hiw-header-right { flex-shrink: 0; display: flex; gap: 12px; align-items: center; }

    .hiw-header-left .section-heading {
      color: #1E1E1E; margin: 12px 0 10px;
    }
    .hiw-header-left .section-subheading { color: #404858; line-height: 1.6; margin: 0; }

    /* Cards — flex:1 to fill remaining height */
    .hiw-cards-row {
      flex: 1; min-height: 0;
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .hiw-card {
      height: 100%; border-radius: 20px; overflow: hidden;
      opacity: 0.4; transition: opacity .5s ease, transform .5s ease;
      position: relative; cursor: pointer;
    }
    .hiw-card.hiw-card-active { opacity: 1; transform: translateY(-6px); }
    .hiw-card-inner { width: 100%; height: 100%; }
    .hiw-card-inner video { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity .4s ease; }
    .hiw-card.hiw-card-active .hiw-card-inner video { opacity: 1; }

    /* Timeline */
    .hiw-timeline { flex-shrink: 0; }
    .hiw-tl-items {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 16px; position: relative;
    }
    .hiw-tl-items::before {
      content: ''; position: absolute; top: 19px; z-index: 0;
      left: 20px; right: 20px;
      height: 2px; background: #e0e0e0;
    }
    .hiw-tl-item { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
    .hiw-tl-circle {
      width: 40px; height: 40px; border-radius: 50%;
      border: 2px solid #d0d0d0; background: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 700; color: #aaa;
      margin-bottom: 12px; position: relative; z-index: 1;
      transition: background .4s, border-color .4s, color .4s;
    }
    .hiw-tl-item.hiw-step-active .hiw-tl-circle { background: #1f2024; border-color: #1f2024; color: #fff; }
    .hiw-tl-title { font-size: 16px; font-weight: 500; line-height: 1.35; margin-bottom: 5px; transition: color .4s; }
    .hiw-tl-desc  { font-size: 12.5px; color: rgba(64,72,88,0.45); line-height: 1.6; transition: color .4s; }
    .hiw-tl-item.hiw-step-active .hiw-tl-title { color: #1E1E1E; }
    .hiw-tl-item.hiw-step-active .hiw-tl-desc  { color: #404858; }

    /* ══ Mobile ══ */
    @media (max-width: 767px) {
      #four-steps-wrap { height: auto !important; }
      #four-steps {
        position: relative; top: 0;
        height: auto;
        overflow: visible;
      }
      .hiw-inner {
        padding: 0; height: auto; gap: 0;
        display: block;
      }
      #four-steps .hiw-header     { display: none !important; }
      #four-steps .hiw-cards-row  { display: none !important; }
      #four-steps .hiw-timeline   { display: none !important; }

      /* ── Buyer Program mobile: cancel desktop sticky ── */
      #buyer-prog-wrap { height: auto !important; }
      #buyer-prog {
        position: relative !important; top: 0 !important;
        height: auto !important; overflow: visible !important;
      }
      #buyer-prog > .container { height: auto !important; display: block !important; }
      .bprog-header, .bprog-body { display: none !important; }

      .hiw-mob-wrap { position: relative; }
      .hiw-mob-pin {
        position: relative;
        display: flex; flex-direction: column;
        overflow: hidden; background: #fff;
      }
      .hiw-pin-hdr { padding: 0px 20px 0; flex-shrink: 0; text-align: center; }
      .hiw-pin-hdr .ui-badge { margin-bottom: 10px; display: inline-flex; }
      .hiw-pin-hdr .section-heading {
        line-height: 1.2; color: #1E1E1E; margin: 0 0 6px;
      }
      .hiw-pin-hdr .section-subheading { color: #404858; line-height: 1.3; margin: 0; }
      .hiw-mob-card-area {
        min-height: 200px; position: relative;
        overflow: hidden; background: #eef2e4;
        margin: 10px 0 0 0;
      }
      .hiw-mob-step-card {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transform: translateY(8px);
        transition: opacity 0.35s ease, transform 0.35s ease; z-index: 1;
      }
      .hiw-mob-step-card.hiw-mob-active { opacity: 1; transform: none; z-index: 2; }
      .hiw-mob-step-card video { width: 100%; height: 100%; object-fit: contain; display: block; background: #ffffff; }
      .hiw-mob-tl { overflow: hidden; position: relative; padding: 10px 20px; flex-shrink: 0; }
      .hiw-mob-tl-inner {
        display: flex; align-items: center; flex-shrink: 0;
        transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
      }
      .hiw-mob-tl-line { display: flex !important; flex: none; width: 70px; height: 2px; background: #d0d0d0; border-radius: 2px; }
      .hiw-mob-tl-dot:not(.hiw-mob-tl-active) { display: flex !important; background: #fff; border-color: #d0d0d0; color: #bbb; }
      .hiw-mob-tl-dot {
        width: 30px; height: 30px; border-radius: 50%;
        border: 1px solid #d0d0d0;
        align-items: center; justify-content: center;
        font-size: 16px; font-weight: 700; flex-shrink: 0;
        transition: background .4s, border-color .4s, color .4s;
      }
      .hiw-mob-tl-dot.hiw-mob-tl-active { display: flex !important; background: #1f2024; border-color: #1f2024; color: #fff; font-size: 18px; }
      .hiw-mob-content-area { position: relative; padding: 12px 20px 0; flex-shrink: 0; min-height: 80px; }
      .hiw-mob-step-info {
        position: absolute; top: 12px; left: 20px; right: 20px;
        opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
      }
      .hiw-mob-step-info.hiw-mob-active { opacity: 1; pointer-events: auto; }
      .hiw-mob-step-title { font-size: 1.05rem; font-weight: 600; color: #1E1E1E; line-height: 1.25; margin: 0 0 5px; }
      .hiw-mob-step-desc  { font-size: var(--fs-body); color: #586174; line-height: 1.55; margin: 0; }
      .hiw-mob-ctas {
        display: flex !important; gap: 10px; padding: 0 20px;
        flex-shrink: 0; margin-top: 16px;
      }
      .hiw-mob-ctas .hiw-cta { flex: 1; justify-content: center; padding: 8px 7px; font-size: 12px; }

      /* ── Buyer Requirements Mobile ── */
      #buyer-reqs-wrap { height: auto !important; }
      #buyer-reqs {
        position: relative !important; top: 0 !important;
        height: auto !important; overflow: visible !important;
      }
      #buyer-reqs > .container { height: auto !important; display: block !important; padding: 0 !important; }
      #buyer-reqs .story-header,
      #buyer-reqs .breqs-body { display: none !important; }

      /* Sticky tab strip */
      .breqs-mob-tabs-strip {
        position: sticky;
        top: 52px; /* below sticky top-bar (nav is no longer sticky) */
        z-index: 10;
        background: #fff;
        border-bottom: 2px solid #f0f2f5;
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .breqs-mob-tabs-strip::-webkit-scrollbar { display: none; }
      .breqs-mob-tab {
        flex: 1;
        padding: 13px 6px;
        font-size: 11.5px;
        font-weight: 600;
        color: #9ca3af;
        background: none;
        border: none;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        text-align: center;
        cursor: pointer;
        white-space: nowrap;
        font-family: 'Poppins', sans-serif;
        transition: color .25s, border-color .25s;
      }
      .breqs-mob-tab.breqs-mob-tab-active {
        color: #1E1E1E;
        border-bottom-color: #2C5BFD;
      }

      /* Step 1 intro block */
      .breqs-mob-intro {
        padding: 32px 20px 0;
      }
      /* centred without touching the left-aligned description below it */
      .breqs-mob-intro .ui-badge {
        display: flex;
        width: fit-content;
        margin: 0 auto 10px;
      }
      .breqs-mob-intro .section-heading {
        color: #1E1E1E;
        line-height: 1.25;
        margin: 0 0 10px;
      }
      .breqs-mob-intro-desc {
        font-size: var(--fs-body);
        color: #586174;
        line-height: 1.6;
        margin: 0 0 18px;
      }
      .breqs-mob-intro-vid {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        background: #f5f7ff;
        margin-bottom: 0;
      }
      .breqs-mob-intro-vid video,
      .breqs-mob-intro-vid img   { width: 100%; display: block; object-fit: contain; }

      /* Step blocks (all 3) */
      .breqs-mob-step {
        padding: 28px 20px 32px;
        border-top: 1px solid #f0f2f5;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.45s ease, transform 0.45s ease;
      }
      .breqs-mob-step.breqs-step-revealed {
        opacity: 1 !important;
        transform: none !important;
      }
      .breqs-mob-step-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1E1E1E;
        line-height: 1.3;
        margin: 0 0 10px;
      }
      .breqs-mob-step-desc {
        font-size: var(--fs-body);
        color: #586174;
        line-height: 1.6;
        margin: 0 0 18px;
      }
      .breqs-mob-step-vid {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        background: #f5f7ff;
        margin-bottom: 20px;
      }
      .breqs-mob-step-vid video { width: 100%; display: block; object-fit: contain; }
    }


    /* ══════════════════════════════════════════════════════════════
       PRICING — Two ways to build a stronger business
    ══════════════════════════════════════════════════════════════ */
    #pricing-section { background: #fff; }

    /* Section header — centred */
    .pricing-header { text-align: center; margin-bottom: 48px; }
    .pricing-header .section-heading  {
      line-height: 1.2; color: #1E1E1E; margin: 16px 0 10px;
    }
    .pricing-header .section-subheading { color: #404858; margin: 0; }

    /* Two-column layout — each column is a flex stack */
    .ui-pricing-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: start;       /* each column sizes to its own content */
    }
    .ui-pricing-col {
      display: flex;
      flex-direction: column;
      align-items: center;      /* centres the floating pill below */
    }

    /* Outer card — background image */
    .ui-pricing-card {
      border-radius: 20px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 20px;
      position: relative;
      /* entrance animation */
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.5s ease, transform 0.5s ease,
                  box-shadow 0.3s ease;
    }
    .ui-pricing-card.pricing-card-in { opacity: 1; transform: translateY(0); }
    .ui-pricing-card:nth-child(2) { transition-delay: 0.13s; }
    /* hover lift */
    .ui-pricing-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 48px rgba(0,0,0,0.14);
    }
    .ui-pricing-card.pricing-card-in:hover { transform: translateY(-5px) !important; }

    /* White inner panel */
    .ui-pricing-panel {
      background: #fff;
      border-radius: 14px;
      padding: 22px 22px 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    }

    /* Plan header row: icon + title */
    .ui-plan-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .ui-plan-icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
    .ui-plan-title { font-size: 1.25rem; font-weight: 600; color: #1E1E1E; }

    /* Description */
    .ui-plan-desc {
      font-size: 14px; color: #444; line-height: 1.7;
      margin-bottom: 18px;
    }

    /* Buttons — full-width inside panel */
    .ui-pricing-btn {
      display: block; width: 100%; text-align: center;
      padding: 10px 20px; border-radius: 10px;
      font-size: 14px; font-weight: 500;
      font-family: 'Poppins', sans-serif;
      cursor: pointer; text-decoration: none;
      border: none;
    }
    .ui-pricing-btn:hover { transform: translateY(-1px); }

    .ui-pricing-btn--dark {
      background: #1f2024; color: #C1D177 !important;
    }
    .ui-pricing-btn--dark:hover { background: #2d3036; box-shadow: 0 6px 20px rgba(0,0,0,0.2); }

    .ui-pricing-btn--outline {
      background: #fff; color: #2e7d32 !important;
      border: 1.5px solid #2e7d32;
    }
    .ui-pricing-btn--outline:hover { background: #f4fcf4; box-shadow: 0 6px 20px rgba(46,125,50,0.12); }

    /* Feature list — sits on the card bg */
    .ui-feature-list { list-style: none; padding: 8px 4px 0; margin: 0; display: flex; flex-direction: column; gap: 0px; }
    .ui-feature-item {
      display: flex; align-items: flex-start; gap: 14px;
    }
    .ui-feature-icon {
      width: 38px; height: 38px; flex-shrink: 0;
      background: rgba(255,255,255,0.35);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; color: rgba(255,255,255,0.9);
      backdrop-filter: blur(4px);
    }
    .ui-feature-icon img {
      width: 20px; height: 20px;
      object-fit: contain;
      display: block;
    }
    .ui-feature-text {
      font-size: var(--fs-body); color: #2a3d2a; line-height: 1.6;
      padding-top: 9px; font-weight: 500;
    }

    /* Bottom floating pill — sits OUTSIDE the card, below it */
    .ui-floating-pill {
      display: inline-block;
      background: #fff;
      border-radius: 50px;
      padding: 13px 36px;
      font-size: 15px; font-weight: 700; color: #1E1E1E;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      margin-top: 16px;
      white-space: nowrap;
    }

    /* Responsive */
    @media (max-width: 991px) {
      .ui-pricing-cards { gap: 16px; }
    }
    @media (max-width: 767px) {
      .pricing-header { margin-bottom: 24px; }

      /* Force both slides visible — IO won't fire for the off-screen slide */
      #pricing-section .ui-pricing-col  { opacity: 1; transform: none; }
      #pricing-section .ui-pricing-card { opacity: 1; transform: none; }

      /* Slider track — horizontal scroll-snap */
      .ui-pricing-cards {
        display: flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
      }
      .ui-pricing-cards::-webkit-scrollbar { display: none; }

      /* Each slide fills 100% of the track */
      .ui-pricing-col {
        flex: 0 0 100%;
        min-width: 100%;
        scroll-snap-align: start;
      }

      .ui-pricing-panel { padding: 10px 18px 10px; }
      #pricing-section .ui-plan-desc {
        font-size: 14px; color: #444; line-height: 1.4; margin-bottom: 5px;
      }

      /* Pagination dots — injected by JS */
      .pricing-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
      }
      .pricing-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #d0d0d0;
        border: none; padding: 0;
        cursor: pointer;
        -webkit-appearance: none;
        transition: background 0.35s ease, transform 0.35s ease;
      }
      .pricing-dot.pd-active {
        background: #4CAF50;
        transform: scale(1.3);
      }

      /* Normal-flow wrapper — native horizontal swipe + click dots */
      #pricing-wrap { height: auto; position: relative; }
      #pricing-section {
        position: relative;
        overflow: visible;
      }

      /* Feature list */
      #pricing-section .ui-feature-list {
        padding: 0px 4px 0; gap: 5px;
      }

      /* Feature item sizing */
      #pricing-section .ui-feature-text { padding-top: 0; }
      #pricing-section .ui-feature-icon {
        width: 30px; height: 30px; font-size: 12px;
      }
      #pricing-section .ui-feature-item {
        transition: background 0.2s ease, transform 0.2s ease;
        border-radius: 8px;
        padding: 0;
      }
    }


    /* ══════════════════════════════════════════════════════════════
       ECOSYSTEM — One Ecosystem. Better Buyer–Supplier Relationships.
    ══════════════════════════════════════════════════════════════ */
    /* ══════════════════════════════════════════════════════════════
       PLATFORM FEATURES — Simple, clear and built for suppliers
    ══════════════════════════════════════════════════════════════ */
    #platform-section { background: #fff; }

    /* Header */
    .platform-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      margin-bottom: 20px;
    }
    .platform-header-left  { flex: 1; }
    .platform-header-right { flex-shrink: 0; }
    .platform-header-left .section-heading {
      line-height: 1.2; color: #1E1E1E; margin: 12px 0 8px;
    }
    .platform-header-left .section-subheading { color: #404858; margin: 0; }

    /* ── Bento Grid ──
       8 equal rows so BM/DC each get 2 rows (enough height for image + label)

       Layout:
         Rows 1-4 : [USP(4)] [PM(2) ] [QA(4) ]
         Rows 3-5 : [USP   ] [KPI(3)] [QA    ]
         Rows 5-8 : [CF(4) ] [SS(3) ] [BM(2) ]
         Rows 7-8 : [CF    ] [SS    ] [DC(2) ]
    */
    .platform-bento {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 12px;
      height: 550px;
      /* 10 equal rows × ~49px = every card gets ≥ 3 rows (≥ 171px) for a visible image */
    }

    /* Explicit bento placement — 10-row layout, all cells filled, no gaps
       Col 1: USP rows 1–5, CF rows 6–10
       Col 2: PM rows 1–4, KPI rows 5–7, SS rows 8–10
       Col 3: QA rows 1–4, BM rows 5–7, DC rows 8–10
    */
    .platform-bento > .platform-card:nth-child(1) { grid-column: 1; grid-row: 1 / 6;  } /* USP  5 rows */
    .platform-bento > .platform-card:nth-child(2) { grid-column: 2; grid-row: 1 / 5;  } /* PM   4 rows */
    .platform-bento > .platform-card:nth-child(3) { grid-column: 3; grid-row: 1 / 5;  } /* QA   4 rows */
    .platform-bento > .platform-card:nth-child(4) { grid-column: 2; grid-row: 5 / 8;  } /* KPI  3 rows */
    .platform-bento > .platform-card:nth-child(5) { grid-column: 1; grid-row: 6 / 11; } /* CF   5 rows */
    .platform-bento > .platform-card:nth-child(6) { grid-column: 3; grid-row: 5 / 8;  } /* BM   3 rows */
    .platform-bento > .platform-card:nth-child(7) { grid-column: 2; grid-row: 8 / 11; } /* SS   3 rows */
    .platform-bento > .platform-card:nth-child(8) { grid-column: 3; grid-row: 8 / 11; } /* DC   3 rows */

    /* ── Base card ── */
    .platform-card {
      border-radius: 16px;
      overflow: hidden;
      background: #f5f7f2;
      padding: 10px 14px 0px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      /* entrance state */
      opacity: 0;
      transform: translateY(28px) scale(0.97);
      transition: opacity 0.65s cubic-bezier(.22,.61,.36,1),
                  transform 0.65s cubic-bezier(.22,.61,.36,1),
                  box-shadow 0.35s ease;
    }

    /* Staggered reveal delays — must come AFTER grid placements to override */
    .platform-bento > .platform-card:nth-child(1) { transition-delay: 0.00s; }
    .platform-bento > .platform-card:nth-child(2) { transition-delay: 0.08s; }
    .platform-bento > .platform-card:nth-child(3) { transition-delay: 0.16s; }
    .platform-bento > .platform-card:nth-child(4) { transition-delay: 0.24s; }
    .platform-bento > .platform-card:nth-child(5) { transition-delay: 0.32s; }
    .platform-bento > .platform-card:nth-child(6) { transition-delay: 0.40s; }
    .platform-bento > .platform-card:nth-child(7) { transition-delay: 0.48s; }
    .platform-bento > .platform-card:nth-child(8) { transition-delay: 0.56s; }

    .platform-card.pf-in { opacity: 1; transform: translateY(0) scale(1); }
    .platform-card.pf-in:hover {
      transform: translateY(-4px) scale(1);
      box-shadow: 0 12px 36px rgba(0,0,0,0.11);
    }

    @media (prefers-reduced-motion: reduce) {
      .platform-card { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* Questionnaire Assist (card 3) — green background, white label */
    .platform-bento > .platform-card:nth-child(3) {
      background: #84d1a4;
      border-color: #84d1a4;
    }
    .platform-bento > .platform-card:nth-child(3) .platform-card-label {
      color: #fff;
    }

    /* ── Supplier platform section — normal + hover box background overrides ── */
    #platform-section .platform-card {
      background: #F2F3F5;
      transition: opacity 0.65s cubic-bezier(.22,.61,.36,1),
                  transform 0.65s cubic-bezier(.22,.61,.36,1),
                  box-shadow 0.35s ease,
                  background 0.35s ease;
    }
    #platform-section .platform-bento > .platform-card:nth-child(3) {
      background: #F2F3F5;
      border-color: #F2F3F5;
    }
    #platform-section .platform-bento > .platform-card:nth-child(3) .platform-card-label {
      color: #1E1E1E;
    }
    #platform-section .platform-bento > .platform-card:nth-child(3) .platform-card-desc {
      color: #666;
    }
    #platform-section .platform-card.pf-in:hover {
      background: linear-gradient(230.56deg, #C1D177 -11.41%, #78CB9B 103.94%);
    }
    #platform-section .platform-card.pf-in:hover .platform-card-label,
    #platform-section .platform-card.pf-in:hover .platform-card-desc {
      color: #fff;
    }

    /* ── Card internals ── */
    /* Image area fills all space above the label */
    .platform-card-img {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      border-radius: 10px;
      background: transparent;
    }
    .platform-card-img > img,
    .platform-card-img > video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .platform-card-img > img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
    }

    /* Title label */
    .platform-card-label {
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: #1E1E1E;
      line-height: 1.3;
      flex-shrink: 0;
    }

    /* Content wrapper — groups label + desc, slides up as a unit on hover */
    .platform-card-content {
      flex-shrink: 0;
      display: grid;
      grid-template-rows: auto 0fr;    /* desc row collapsed to 0 */
      padding: 10px 0 10px;
      transition: grid-template-rows 0.28s ease, transform 0.28s ease-out;
    }
    .platform-card.pf-in:hover .platform-card-content {
      grid-template-rows: auto 1fr;    /* desc row expands to content height */
      transform: translateY(-12px);    /* whole content block lifts */
    }
    .platform-card-label { margin: 0; }

    /* Description — collapsed by grid in default state */
    .platform-card-desc {
      overflow: hidden;                /* required for grid 0fr trick */
      font-size: var(--fs-body); color: #666; line-height: 1.45;
      margin: 0;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.28s ease, transform 0.28s ease;
    }
    .platform-card.pf-in:hover .platform-card-desc {
      opacity: 1; transform: translateY(0);
    }
    /* QA card (green bg) desc */
    .platform-bento > .platform-card:nth-child(3) .platform-card-desc {
      color: rgba(255,255,255,0.85);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .platform-bento { height: 500px; gap: 10px; }
    }
    @media (max-width: 767px) {
      /* Normal-flow wrapper — native horizontal swipe + click dots */
      #platform-wrap { height: auto; position: relative; }
      #platform-section {
        position: relative;
        overflow: visible;
      }

      /* Header — centered, matching the reference layout */
      .platform-header {
        flex-direction: column; align-items: center; text-align: center; gap: 12px;
        margin-bottom: 24px;
      }
      .platform-header-left { width: 100%; }
      .platform-header-right { width: 100%; display: flex; justify-content: center; }

      /* Convert bento → horizontal scroll track */
      #platform-section .platform-bento {
        display: flex !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        height: auto !important;
        gap: 0 !important;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        min-height: 370px;
      }
      #platform-section .platform-bento::-webkit-scrollbar { display: none; }

      /* Each card = one full-width slide */
      #platform-section .platform-bento > .platform-card:nth-child(n) {
        flex: 0 0 100% !important; min-width: 100% !important;
        grid-column: auto !important; grid-row: auto !important;
        scroll-snap-align: start;
        padding: 0; border-radius: 16px; overflow: hidden;
        flex-direction: column; gap: 0;
        opacity: 1 !important; transform: none !important;
        transition-delay: 0s !important;
      }

      /* Image area */
      #platform-section .platform-card-img {
        flex: 0 0 auto; height: 220px; min-height: 0 !important;
        border-radius: 0; overflow: hidden;
        padding: 10px;
      }
      #platform-section .platform-card-img > img,
      #platform-section .platform-card-img > video { width: 100%; height: 100%; object-fit: contain; display: block; }

      /* Label always visible */
      #platform-section .platform-card-label {
        font-size: 15px; font-weight: 700; padding: 12px 16px 4px; color: #1E1E1E;
      }

      /* Reset desktop grid trick — content wrapper just stacks normally */
      #platform-section .platform-card-content {
        display: block; padding: 0; transform: none !important; transition: none;
      }

      /* Description always visible on mobile */
      #platform-section .platform-card-desc {
        font-size: 13px; color: #555; line-height: 1.45;
        padding: 0 16px 16px; margin: 0;
        opacity: 1 !important; transform: none !important;
        overflow: visible;
        pointer-events: auto;
      }

      /* QA card (3rd) text on mobile */
      #platform-section .platform-bento > .platform-card:nth-child(3) .platform-card-label { color: #090909; }
      #platform-section .platform-bento > .platform-card:nth-child(3) .platform-card-desc  { color: rgb(4 4 4 / 88%); }

      /* Segment indicators (injected by JS) */
      .pf-indicators {
        display: flex; justify-content: center; align-items: center;
        gap: 5px; padding: 14px 0 0;
      }
      .pf-indicator {
        width: 20px; height: 4px; border-radius: 2px;
        background: #d0d0d0; border: none; padding: 0; cursor: pointer;
        -webkit-appearance: none;
        transition: background 0.3s ease, width 0.3s ease;
      }
      .pf-indicator.pf-active { background: #111; width: 32px; }
    }

    /* ══════════════════════════════════════════════════════════════
       WHO IT'S FOR — Buyer page
    ══════════════════════════════════════════════════════════════ */
    #wif-section { background: #fff; }

    .wif-header { text-align: center; margin-bottom: 48px; }

    .wif-header .section-heading {
      color: #1E1E1E;
      line-height: 1.2;
      margin: 14px auto 16px; max-width: 720px;
    }
    .wif-header .section-subheading { color: #404858; line-height: 1.6; margin: 0; }

    /* ── Cards row ── */
    .wif-cards {
      display: flex;
      gap: 0;
      align-items: stretch;
    }

    /* ── Individual card ── */
    .wif-card {
      flex: 1;
      height: 390px;
      border-radius: 18px;
      border: 1px solid #ECECEC;
      background: #fff;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.45s ease,
                  box-shadow 0.45s ease;
    }

    /* BG image layer (::after) — fades in on active */
    .wif-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 0.45s ease;
      z-index: 0;
    }
    /* Overlay (::before) — fades in on active, above bg image */
    .wif-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(221.55deg, #5EE0F7 -16.95%, #2c5bfd69 95%);
      opacity: 0;
      transition: opacity 0.45s ease;
      z-index: 1;
    }

    /* Per-card background images — image only, no gradients */
    .wif-card:nth-child(1)::after {
      background-image: url('buyer-image/industry associations.webp');
    }
    .wif-card:nth-child(2)::after {
      background-image: url('buyer-image/bank.webp');
    }
    .wif-card:nth-child(3)::after {
      background-image: url('buyer-image/OEMs & Large Buyers.webp');
    }

    /* ── Active state ── */
    .wif-card.wif-active {
      transform: scale(1.03);
      box-shadow: 0 20px 45px rgba(0,0,0,.18);
      z-index: 2;
    }
    .wif-card.wif-active::after  { opacity: 1; }
    .wif-card.wif-active::before { opacity: 1; }

    /* ── Card body — content pinned to bottom ── */
    .wif-card-body {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: 100%;
      padding: 40px;
    }

    /* ── Icon ── */
    .wif-icon {
      width: 48px; height: 48px;
      object-fit: contain;
      margin-bottom: 18px;
      flex-shrink: 0;
      filter: brightness(0);                /* dark by default */
      transition: filter 0.45s ease;
    }
    .wif-card.wif-active .wif-icon {
      filter: brightness(0) invert(1);      /* white when active */
    }

    /* ── Title ── */
    .wif-card-title {
      font-size: 17px; font-weight: 600;
      color: #202020; line-height: 1.35;
      margin: 0 0 14px;
      transition: color 0.45s ease;
    }
    .wif-card.wif-active .wif-card-title { color: #fff; }

    /* ── Bullets ── */
    .wif-card-bullets {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    .wif-card-bullet {
      font-size: 14px; color: #5D6676; line-height: 1.55;
      transition: color 0.45s ease;
    }
    .wif-card.wif-active .wif-card-bullet { color: rgba(255,255,255,.94); }

    /* ── Global CTA — single button below all cards ── */
    .wif-global-cta {
      text-align: center;
      margin-top: 36px;
    }
    .wif-btn {
      display: inline-block;
      background: #1E1E1E; color: #fff;
      font-size: 14px; font-weight: 600;
      padding: 13px 28px; border-radius: 100px;
      text-decoration: none; border: none;
      cursor: pointer; font-family: inherit;
      transition: background 0.25s ease;
      white-space: nowrap;
    }
    .wif-btn:hover { background: #333; color: #fff; text-decoration: none; }

    /* ── Tablet: vertical stack ── */
    @media (max-width: 991px) and (min-width: 768px) {
      .wif-cards { flex-direction: column; gap: 16px; }
      .wif-card  { height: 300px; }
      .wif-card.wif-active { transform: none; box-shadow: 0 8px 28px rgba(0,0,0,.14); }
    }

    /* ── Mobile: horizontal slider ── */
    @media (max-width: 767px) {
      /* WIF mobile — normal flow, native swipe on #wifCards */
      #wif-wrap { position: relative; }
      #wif-section {
        position: relative;
        background: #fff;
      }
      .wif-header  { text-align: center; margin-bottom: 10px; }
      .wif-global-cta { text-align: center; margin-top: 15px; }
      .wif-header .section-heading {
        color: #1E1E1E;
        line-height: 1.2;
        margin: 5px auto 5px;
        max-width: 720px;
      }
      .wif-header .section-subheading { color: #404858; }
      .wif-cards {
        overflow-x: hidden !important; scroll-snap-type: none !important;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
      }
      .wif-cards::-webkit-scrollbar { display: none; }
      .wif-card {
        flex: 0 0 100%; min-width: 100%;
        height: 360px; border-radius: 16px;
        scroll-snap-align: start;
        transform: none !important; box-shadow: none !important;
      }
      .wif-card.wif-active { transform: none !important; }
      /* dot indicators */
      .wif-dots {
        display: flex; justify-content: center;
        gap: 6px; padding: 14px 0 0;
      }
      .wif-dot {
        width: 20px; height: 4px; border-radius: 2px;
        background: #d0d0d0; border: none; padding: 0;
        cursor: pointer; -webkit-appearance: none;
        transition: background 0.3s ease, width 0.3s ease;
      }
      .wif-dot.wif-dot-active { background: #111; width: 32px; }
    }
    @media (min-width: 768px) { .wif-dots { display: none; } }

    /* ══════════════════════════════════════════════════════════════
       SCALE & IMPACT — Buyer page
    ══════════════════════════════════════════════════════════════ */
    #scale-impact { background: #fff; }

    /* Header */
    .si-header { margin-bottom: 48px; }
    .si-header .section-heading {
      color: #1E1E1E;
      line-height: 1.2;
      margin: 14px 0 14px;
    }
    .si-header .section-subheading { color: #404858; line-height: 1.6; margin: 0; }

    /* Two-column body */
    .si-body {
      display: grid;
      grid-template-columns: 45fr 55fr;
      gap: 48px;
      align-items: center;
    }

    /* ── Left: video ── */
    .si-video-wrap {
      border-radius: 28px;
      overflow: hidden;
      height: 100%;
      min-height: 460px;
      /* entrance animation start state */
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.85s ease,
                  transform 0.85s cubic-bezier(.22,1,.36,1);
    }
    .si-video-wrap.si-in { opacity: 1; transform: scale(1); }

    .si-video {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── Right: benefits ── */
    .si-benefits { display: flex; flex-direction: column; }

    .si-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      padding: 28px 0;
    }
    .si-row:first-child { padding-top: 0; }
    .si-row:last-child  { padding-bottom: 0; }

    .si-divider {
      border: none;
      border-top: 1px solid #E9E9E9;
      margin: 0;
    }

    /* Benefit item */
    .si-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
      /* entrance animation start state */
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease,
                  transform 0.6s cubic-bezier(.22,1,.36,1);
    }
    .si-item.si-in { opacity: 1; transform: translateY(0); }

    /* Icon: blue gradient rounded square */
    .si-icon {
      width: 18px; height: 18px;
      border-radius: 5px;
      background: linear-gradient(135deg, #2C5BFD 0%, #5EE0F7 100%);
      flex-shrink: 0;
      margin-bottom: 8px;
    }

    .si-item-title {
      font-size: 15px; font-weight: 600;
      color: #1E1E1E; line-height: 1.35;
      margin: 0;
    }
    .si-item-desc {
      font-size: 14px; color: #5D6676;
      line-height: 1.6; margin: 0;
    }

    /* Responsive — tablet */
    @media (max-width: 991px) and (min-width: 768px) {
      .si-body { grid-template-columns: 1fr; }
      .si-video-wrap { min-height: 360px; }
    }

    /* Responsive — mobile */
    @media (max-width: 767px) {
      .si-body { grid-template-columns: 1fr; gap: 32px; }
      .si-video-wrap { min-height: 280px; }
      .si-row { grid-template-columns: 1fr; gap: 24px; padding: 20px 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .si-video-wrap, .si-item {
        opacity: 1 !important; transform: none !important; transition: none !important;
      }
    }

    /* ══════════════════════════════════════════════════════════════
       BUYER PLATFORM FEATURES — 9-card bento override
    ══════════════════════════════════════════════════════════════ */

    /* Grid height — slightly taller to accommodate 9 cards */
    #buyer-platform-section .platform-bento {
      height: 580px;
      grid-template-rows: repeat(3, 1fr);
    }

    /* Explicit placement — 3 equal rows, 3 cols, every card the same height */
    #buyer-platform-section .platform-bento > .platform-card:nth-child(1) { grid-column: 1; grid-row: 1; }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(2) { grid-column: 2; grid-row: 1; }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(3) { grid-column: 3; grid-row: 1; }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(4) { grid-column: 1; grid-row: 2; }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(5) { grid-column: 2; grid-row: 2; }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(6) { grid-column: 3; grid-row: 2; }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(7) { grid-column: 1; grid-row: 3; }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(8) { grid-column: 2; grid-row: 3; }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(9) { grid-column: 3; grid-row: 3; }

    /* 9th card — extra stagger delay */
    #buyer-platform-section .platform-bento > .platform-card:nth-child(9) { transition-delay: 0.64s; }

    /* Card 3 — Assessments, Actions & Audits: buyer blue (overrides global green) */
    #buyer-platform-section .platform-bento > .platform-card:nth-child(3) {
      background: linear-gradient(145deg, #3468FA 0%, #1A40C5 100%);
      border-color: transparent;
    }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(3) .platform-card-label { color: #fff; }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(3) .platform-card-desc  { color: rgba(255,255,255,0.88); }

    /* ── Buyer platform section — normal + hover box background overrides ── */
    #buyer-platform-section .platform-card {
      background: #F2F3F5;
      transition: opacity 0.65s cubic-bezier(.22,.61,.36,1),
                  transform 0.65s cubic-bezier(.22,.61,.36,1),
                  box-shadow 0.35s ease,
                  background 0.35s ease;
    }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(3) {
      background: #F2F3F5;
      border-color: #F2F3F5;
    }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(3) .platform-card-label {
      color: #1E1E1E;
    }
    #buyer-platform-section .platform-bento > .platform-card:nth-child(3) .platform-card-desc {
      color: #666;
    }
    #buyer-platform-section .platform-card.pf-in:hover {
      background: linear-gradient(225.68deg, #5EE0F7 -6.02%, #2C5BFD 108.62%);
    }
    #buyer-platform-section .platform-card.pf-in:hover .platform-card-label,
    #buyer-platform-section .platform-card.pf-in:hover .platform-card-desc {
      color: #fff;
    }

    /* Mobile — buyer platform bento: native horizontal swipe + click dots */
    @media (max-width: 767px) {
      #buyer-platform-wrap { height: auto; position: relative; }
      #buyer-platform-section {
        position: relative;
        overflow: visible;
      }
      #buyer-platform-section .platform-bento {
        display: flex !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        height: auto !important;
        gap: 0 !important;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      #buyer-platform-section .platform-bento::-webkit-scrollbar { display: none; }

      #buyer-platform-section .platform-bento > .platform-card:nth-child(n) {
        flex: 0 0 100% !important; min-width: 100% !important;
        grid-column: auto !important; grid-row: auto !important;
        scroll-snap-align: start;
        padding: 0; border-radius: 16px; overflow: hidden;
        flex-direction: column; gap: 0;
        opacity: 1 !important; transform: none !important;
        transition-delay: 0s !important;
      }

      #buyer-platform-section .platform-card-img {
        flex: 0 0 auto; height: 220px; min-height: 0 !important;
        border-radius: 0; overflow: hidden;
      }
      #buyer-platform-section .platform-card-img > img,
      #buyer-platform-section .platform-card-img > video { width: 100%; height: 100%; object-fit: contain; display: block; }

      #buyer-platform-section .platform-card-label {
        font-size: 15px; font-weight: 700; padding: 12px 16px 4px; color: #1E1E1E;
      }
      #buyer-platform-section .platform-card-content {
        display: block; padding: 0; transform: none !important; transition: none;
      }
      #buyer-platform-section .platform-card-desc {
        font-size: 13px; color: #555; line-height: 1.45;
        padding: 0 16px 16px; margin: 0;
        opacity: 1 !important; transform: none !important;
        overflow: visible; pointer-events: auto;
      }

      /* Assessments card (3rd) text on mobile */
      #buyer-platform-section .platform-bento > .platform-card:nth-child(3) .platform-card-label { color: #090909; }
      #buyer-platform-section .platform-bento > .platform-card:nth-child(3) .platform-card-desc  { color: rgb(4 4 4 / 88%); }
    }

    /* ══════════════════════════════════════════════════════════════
       SUPPLIER ADVANTAGE — Make Your Business Easy to Understand
    ══════════════════════════════════════════════════════════════ */
    #advantage-section { background: #fff; }

    /* 3-col grid → 2-col tablet → 1-col mobile */
    .adv-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    /* Card */
    .adv-card {
      background: #F5F5F5;
      border-radius: 20px;
      padding: 10px 28px 10px;
      border: 1.5px solid transparent;
      transition: opacity 0.65s cubic-bezier(.22,.61,.36,1),
                  transform 0.65s cubic-bezier(.22,.61,.36,1),
                  box-shadow 0.35s ease, border-color 0.35s ease;
    }
    /* Stagger */
    .adv-card:nth-child(1) { transition-delay: 0.00s; }
    .adv-card:nth-child(2) { transition-delay: 0.08s; }
    .adv-card:nth-child(3) { transition-delay: 0.16s; }
    .adv-card:nth-child(4) { transition-delay: 0.24s; }
    .adv-card:nth-child(5) { transition-delay: 0.32s; }
    .adv-card:nth-child(6) { transition-delay: 0.40s; }

    .adv-card.adv-card-in { opacity: 1; transform: translateY(0) scale(1); }
    .adv-card.adv-card-in:hover {
      transform: translateY(-5px) scale(1);
      box-shadow: 0 12px 40px rgba(0,0,0,0.09);
      border-color: #78CB9B;
    }
    @media (prefers-reduced-motion: reduce) {
      .adv-card { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* Icon box */
    .adv-icon-box {
      width: 64px; height: 64px;
      border-radius: 12px;
      background: linear-gradient(
        225deg,
        rgba(193, 209, 119, 0.6) -20.78%,
        rgba(120, 203, 155, 0.6) 103.9%
      );
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      flex-shrink: 0;
      transition: transform 0.35s ease;
    }
    .adv-card.adv-card-in:hover .adv-icon-box { transform: translateY(-2px); }
    .adv-icon-box > img { width: 36px; height: 36px; object-fit: contain; display: block; }

    /* Text */
    .adv-title {
      font-size: 16px;
      font-weight: 600;
      color: #1E1E1E;
      line-height: 1.35;
      margin: 0 0 10px;
    }
    .adv-desc {
      font-size: 14px;
      color: #555;
      line-height: 1.7;
      margin: 0;
    }

    /* Responsive */
    @media (max-width: 991px) {
      .adv-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 767px) {
      .adv-grid { grid-template-columns: 1fr; gap: 14px; }
      .adv-card { padding: 22px 20px 26px; }
      .adv-card:nth-child(n) { transition-delay: 0s; }
    }


    /* ══════════════════════════════════════════════════════════════
       ABOUT POSITIIVPLUS — Designed Around How Procurement Works
    ══════════════════════════════════════════════════════════════ */
    #about-section { background: #fff; }

    /* Rounded banner — bg image fills entire area */
    .ui-about-wrap {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: url('images/About_bg.webp') center center / cover no-repeat;
      padding: 64px 64px 64px;
      min-height: 460px;
      display: flex;
      align-items: center;
    }

    /* Left content column */
    .ui-about-content {
      max-width: 520px;
      position: relative;
      z-index: 1;
    }

    /* Heading — white, separate from card */
    .ui-about-wrap .section-heading {
      color: #fff;
      line-height: 1.18;
      margin: 14px 0 28px;
      transition: opacity 0.7s cubic-bezier(.22,.61,.36,1),
                  transform 0.7s cubic-bezier(.22,.61,.36,1),
                  filter 0.7s cubic-bezier(.22,.61,.36,1);
    }
    .ui-about-wrap .section-heading.ua-in { opacity: 1; transform: translateY(0); filter: none; }

    /* Ombre + card wrapper — animates together */
    .ui-about-card-wrap {
      position: relative;
      opacity: 0;
      transform: translateY(24px) scale(0.97);
      transition: opacity 0.75s cubic-bezier(.22,.61,.36,1) 0.18s,
                  transform 0.75s cubic-bezier(.22,.61,.36,1) 0.18s;
    }
    .ui-about-card-wrap.ua-in { opacity: 1; transform: translateY(0) scale(1); }

    @media (prefers-reduced-motion: reduce) {
      .ui-about-wrap .section-heading, .ui-about-card-wrap {
        opacity: 1 !important; transform: none !important;
        filter: none !important; transition: none !important;
      }
    }

    /* Ombre glow image — sits behind the white card */
    .ui-about-glow {
      position: absolute;
      bottom: -64px;
      left: 50%;
      transform: translateX(-50%);
      width: 115%;
      pointer-events: none;
      z-index: 0;
      display: block;
    }

    /* White card */
    .ui-about-card {
      position: relative;
      z-index: 1;
      background: #fff;
      border-radius: 20px;
      padding: 32px 36px 36px;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }
    .ui-about-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 48px rgba(0,0,0,0.13);
    }

    /* Description */
    .ui-about-desc {
      font-size: 17px;
      color: #222;
      line-height: 1.7;
      margin: 0 0 28px;
    }
    .ui-about-desc strong { font-weight: 700; }

    /* Buttons row — reuse .hiw-cta classes */
    .ui-about-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    /* Responsive */
    @media (max-width: 991px) {
      .ui-about-wrap { padding: 48px 40px; }
      .ui-about-content { max-width: 440px; }
    }
    /* Mobile-only hero image — hidden on desktop */
    .ua-mobile-hero { display: none; }

    @media (max-width: 767px) {

      /* Strip the banner style — no bg image, no min-height */
      #about-section .ui-about-wrap {
        background: none !important;
        border-radius: 0; min-height: auto;
        padding: 0; overflow: visible; display: block;
      }

      /* Heading: dark text on white bg */
      #about-section .section-heading {
        color: #1E1E1E;
        margin: 10px 0 20px;
      }

      /* Buttons: equal-width side by side above the card */
      #about-section .ui-about-btns {
        flex-direction: row; flex-wrap: nowrap;
        gap: 10px; margin: 0 0 20px;
      }
      #about-section .ui-about-btns .hiw-cta {
        flex: 1; text-align: center; padding: 12px 6px; font-size: 13px;
        display: flex; align-items: center; justify-content: center;
      }

      /* Unified card container: image + content + ombre in one box */
      #about-section .ui-about-card-wrap {
        position: relative; overflow: hidden;
        border-radius: 20px; background: #f7f8f3;
        opacity: 1 !important; transform: none !important;
      }

      /* Hero image — JS moves it here as first child of card-wrap */
      #about-section .ua-mobile-hero {
        display: block; width: 100%; height: auto;
        border-radius: 20px; position: relative; z-index: 1; margin: 0;
      }

      /* Ombre — absolute at bottom of container, decorative layer */
      #about-section .ui-about-glow {
        display: block;
        position: absolute; bottom: 0; left: 0; width: 100%; height: auto;
        transform: none; z-index: 0; pointer-events: none;
      }

      /* Desc content sits above ombre */
      #about-section .ui-about-card {
        position: relative; z-index: 1;
        background: transparent; border-radius: 0;
        padding: 20px 20px 36px;
        box-shadow: none !important; transition: none;
      }
      #about-section .ui-about-card:hover { transform: none; box-shadow: none; }

      /* Desc text */
      #about-section .ui-about-desc { font-size: 15px; color: #222; margin-bottom: 0; }
    }


    /* ═══════════════════════════════════════════════════════════
       HERO MICRO-INTERACTIONS
    ═══════════════════════════════════════════════════════════ */

    /* ── 8. Hero background glow pulse ── */
    .hero-glow {
      position: absolute;
      right: 0; top: 50%;
      width: 60%; height: 100%;
      /* transform: translateY(-50%); */
      /* background: radial-gradient(ellipse at 55% 45%,
        rgba(193,209,119,0.26) 0%,
        rgba(120,203,155,0.12) 42%,
        transparent 70%); */
      pointer-events: none;
      z-index: 0;
      will-change: transform, opacity;
      animation: heroGlowPulse 8s ease-in-out infinite alternate;
    }
    @keyframes heroGlowPulse {
      from { opacity: 0.9; transform: translateY(-50%) scale(1); }
      to   { opacity: 1;   transform: translateY(-50%) scale(1.03); }
    }
    /* Hero children need z-index above glow */
    #hero-supplier .container { position: relative; z-index: 1; }

    /* ── 10. prefers-reduced-motion ── */
    @media (prefers-reduced-motion: reduce) {
      .hero-h1 em::after { animation: none; transform: scaleX(1); }
      .hl-green           { animation: none; transform: rotate(358deg) translateY(0); }
      .hero-glow          { animation: none; opacity: 1; }
    }

    /* ═══════════════════════════════════════════════════════════
       HOVER & TRANSITION ENHANCEMENTS
    ═══════════════════════════════════════════════════════════ */

    /* Nav logo */
    #mainNav a { transition: opacity 0.25s ease; }
    #mainNav a:hover { opacity: 0.72; }

    /* Hero image float on hover */
    #hero-supplier .col-lg-6:last-child img {
      transition: transform 0.55s cubic-bezier(.22,1,.36,1);
    }
    #hero-supplier .col-lg-6:last-child img:hover {
      transform: translateY(-8px);
    }

    /* Hero CTAs — enhanced */
    .btn-green-solid {
      box-shadow: 0 4px 16px rgba(120,203,155,0.25);
    }
    .btn-green-solid:hover {
      box-shadow: 0 10px 28px rgba(120,203,155,0.40);
    }
    /* Supplier page (default view) — green hover */
    .btn-dark-arrow:hover .arrow-circle {
      background: #78CB9B;
      transition: background 0.25s ease;
    }
    /* Buyer page — blue hover */
    body.buyer-mode .btn-dark-arrow:hover .arrow-circle {
      background: #2C5BFD;
    }
    .btn-dark-arrow:hover .arrow-circle i { color: #fff; }

    /* List item icon pop on hover */
    .ui-list-item:hover .ui-item-icon {
      transform: scale(1.2);
      transition: color 0.25s ease, transform 0.25s ease;
    }

    /* Platform card: image zooms slightly inside the card on hover */
    .platform-card-img > img {
      transition: transform 0.45s cubic-bezier(.22,1,.36,1);
    }
    .platform-card.pf-in:hover .platform-card-img > img {
      transform: scale(1.05);
    }

    /* Pricing feature item row hover */
    .ui-feature-item {
      transition: background 0.2s ease, transform 0.2s ease;
      border-radius: 8px;
      padding: 3px 8px;
    }
    .ui-feature-item:hover {
      background: rgba(255,255,255,0.08);
      transform: translateX(3px);
    }

    /* Advantage icon box pop on reveal (no hover duplication — parent already handles it) */

    /* Pricing card inner button */
    .ui-pricing-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      opacity: 0.92;
    }

    /* Section badge hover */
    .ui-badge {
      transition: background 0.25s ease, transform 0.25s ease;
    }
    .ui-badge:hover {
      background: #d4edce;
      transform: translateY(-1px);
    }