/* =====================================================
   SERVICE PAGES — shared styles
   Used by: ai-powered-loyalty-solutions.php, whatsapp-loyalty-programs.php,
   rewards-redemption-solutions.php, qr-code-loyalty-programs.php,
   distributor-loyalty-programs.php
   Built on top of style.css design tokens (no Bootstrap)
   Desktop-first: base rules are the full desktop layout;
   all @media(max-width:...) queries are consolidated at the
   bottom of this file, one block per breakpoint value.
   (Consolidated from ai-loyalty.css + whatsapp-loyalty.css +
   rewards-redemption.css + qr-loyalty.css)
   ===================================================== */

/* ── Force every paragraph, list and link on every service page to a single consistent 16px, overriding any component-specific font-size (lead-in labels, quote accents, icon-card labels, pills, badges, etc.) ── */
section[id^="ail-"] p, section[id^="ail-"] ul, section[id^="ail-"] li, section[id^="ail-"] a,
section[id^="wl-"] p, section[id^="wl-"] ul, section[id^="wl-"] li, section[id^="wl-"] a,
section[id^="rr-"] p, section[id^="rr-"] ul, section[id^="rr-"] li, section[id^="rr-"] a,
section[id^="qr-"] p, section[id^="qr-"] ul, section[id^="qr-"] li, section[id^="qr-"] a,
section[id^="dl-"] p, section[id^="dl-"] ul, section[id^="dl-"] li, section[id^="dl-"] a,
section[id^="de-"] p, section[id^="de-"] ul, section[id^="de-"] li, section[id^="de-"] a,
section[id^="tl-"] p, section[id^="tl-"] ul, section[id^="tl-"] li, section[id^="tl-"] a,
section[id^="rl-"] p, section[id^="rl-"] ul, section[id^="rl-"] li, section[id^="rl-"] a,
section[id^="il-"] p, section[id^="il-"] ul, section[id^="il-"] li, section[id^="il-"] a,
section[id^="ch-"] p, section[id^="ch-"] ul, section[id^="ch-"] li, section[id^="ch-"] a {
   font-size: 16px !important
}

/* ── Breadcrumb (shared pattern with customer-loyalty page) ── */
.ail-crumb {
   display: flex;
   align-items: center;
   gap: .4rem;
   font-size: 16px;
   font-weight: 600;
   color: var(--ink-400);
   margin: 10px 0;
}

.ail-crumb a {
   color: var(--ink-400);
   transition: color .2s
}

.ail-crumb a:hover {
   color: var(--brand-700)
}

.ail-crumb svg {
   width: 13px;
   height: 13px;
   flex-shrink: 0;
   position: relative;
   top: 2px;
}

.ail-crumb span {
   color: var(--brand-700)
}

#ail-why .ail-lead-in {
   margin-bottom: 15px;
}

/* ── Shared section-head helper ──────────────────────── */
.ail-section-head {
   margin-inline: auto;
   margin-bottom: 20px;
}

/* ── Banner — full-bleed image with overlaid heading ─── */
.banner-blk {
   position: relative;
   overflow: hidden;
   background: var(--ink-900);
   aspect-ratio: 16/5
}

.banner-blk img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   opacity: .92
}

.banner-blk .banner-content {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   text-align: center;
   background: linear-gradient(0deg, rgba(16, 16, 21, .88) 0%, rgba(16, 16, 21, .45) 45%, rgba(16, 16, 21, .05) 75%)
}

.banner-blk .container {
   width: 100%;
   max-width: 1280px;
   margin-inline: auto;
   padding: 0 1.5rem 3rem
}

.banner-blk .eyebrow {
   background: rgba(255, 255, 255, .12);
   color: #fff
}

.banner-blk h1 {
   font-size: clamp(2rem, 4vw, 3.5rem);
   line-height: 1.14;
   letter-spacing: -.025em;
   color: #fff;
   margin-top: .85rem;
   max-width: 38ch
}

.banner-tagline {
   margin-top: .85rem;
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-weight: 700;
   font-size: 1.1rem;
   color: rgba(255, 255, 255, .85)
}

#programme .cta-sub {
   width: 100%;
   max-width: 100%;
}

.ail-hero-img img {
   height: 100%;
}

#clp-industries {
   margin-top: 6rem;
}

#ch-advantage .ail-chip-grid {
   margin-bottom: 0px;
}

#wl-hero {
   padding-bottom: 0px;
}

/* ── Hero intro — single-column copy under the banner ─── */
.ail-hero {
   position: relative;
   overflow: hidden;
   padding-top: 3rem;
   padding-bottom: 3rem;
   background: var(--grad-hero)
}

.ail-hero-intro {
   max-width: 52rem
}

.ail-hero-sub {
   font-size: 1rem;
   color: var(--ink-400);
   line-height: 1.7
}

.ail-hero-sub p {
   margin: 0;
   text-wrap-style: pretty;
}

.ail-hero-sub p+p {
   margin-top: .85rem
}

.ail-hero-ctas {
   margin-top: 1.75rem;
   display: flex;
   flex-wrap: wrap;
   gap: .85rem
}

/* .sec-sub (global) reused as a paragraph-group wrapper throughout this page */
.sec-sub p {
   margin: 0
}

.sec-sub p+p {
   margin-top: 1rem
}

.ail-tl-closing {
   margin-top: 1rem
}

/* ── Checklist chips (reused across every bullet list on the page) ── */
.ail-chip-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: .6rem .9rem;
   margin-bottom: 30px
}
.ail-chip-grid.chip-width{text-align: left;max-width: 900px;margin-left: auto;margin-right: auto;}
/* #wl-why .ail-chip-grid {    grid-template-columns: repeat(3, 1fr);} */
.ail-chip-grid.cols-3 {
   grid-template-columns: repeat(4, 1fr)
}

.ail-chip {
   display: flex;
   align-items: flex-start;
   gap: .5rem;
   font-size: 16px;
   color: var(--ink-600);
   line-height: 1.4
}

.ail-chip::before {
   content: '\2713';
   flex-shrink: 0;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: var(--grad-brand-soft);
   color: var(--brand-600);
   font-size: .65rem;
   font-weight: 900;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: .1rem
}

/* Chip pill variant — for short single-word/short-phrase lists (channels, industries, related links) */
.ail-pill-row {
   display: flex;
   flex-wrap: wrap;
   gap: .6rem
}

.ail-pill {
   display: inline-flex;
   align-items: center;
   padding: .55rem 1.1rem;
   border-radius: 9999px;
   background: var(--white);
   border: 1px solid var(--brand-100);
   font-size: 16px;
   font-weight: 600;
   color: var(--ink-600);
   box-shadow: var(--shadow-sm);
   transition: all .25s
}

.ail-pill:hover {
   border-color: var(--brand-400);
   color: var(--brand-700);
   box-shadow: var(--shadow-md);
   transform: translateY(-2px)
}

a.ail-pill {
   text-decoration: none
}

/* On dark backgrounds */
.ail-on-dark .ail-chip {
   color: rgba(255, 255, 255, .85)
}

.ail-on-dark .ail-chip::before {
   background: rgba(255, 255, 255, .14);
   color: #fff
}

.ail-on-dark .ail-pill {
   background: rgba(255, 255, 255, .08);
   border-color: rgba(255, 255, 255, .18);
   color: #fff
}

.ail-on-dark .ail-pill:hover {
   border-color: rgba(255, 255, 255, .4);
   background: rgba(255, 255, 255, .14)
}

/* ── "Why AI Matters" — same split layout as the hero ── */
.ail-lead-in {
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-weight: 700;
   color: var(--ink-700);
   margin: 0rem 0 1.1rem;
   font-size: 24px !important;
}

.ail-callout {
   margin-top: 1.5rem;
   padding: 1.25rem 1.5rem;
   border-radius: 1rem;
   background: var(--grad-brand-soft);
   border: 1px solid var(--brand-100);
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-weight: 700;
   color: var(--brand-700)
}

/* ── AI Across the Loyalty Lifecycle — vertical timeline ── */
.ail-timeline {
   position: relative;
   margin-top: 1rem
}

.ail-timeline::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 27px;
   width: 2px;
   background: linear-gradient(var(--brand-200), var(--plum-200, var(--brand-100)))
}

.ail-tl-item {
   position: relative;
   padding-left: 76px;
   margin-bottom: 3rem
}

.ail-tl-item:last-child {
   margin-bottom: 0
}

.ail-tl-marker {
   position: absolute;
   left: 0;
   top: 0;
   width: 56px;
   height: 56px;
   border-radius: 1rem;
   background: var(--grad-brand);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-lg);
   z-index: 1;
   transition: transform .3s
}

.ail-tl-item:nth-child(even) .ail-tl-marker {
   background: linear-gradient(135deg, var(--plum-400), var(--plum-500))
}

.ail-tl-item:hover .ail-tl-marker {
   transform: scale(1.08) rotate(-4deg)
}

.ail-tl-content h3 {
   font-size: 1.3rem;
   font-weight: 800;
   color: var(--ink-700);
   margin-bottom: .6rem
}

.ail-tl-content .sec-sub {
   margin-bottom: .85rem
}

.ail-tl-sub-label {
   display: block;
   font-size: .72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--brand-600);
   margin: 1.1rem 0 .6rem
}

.ail-tl-contrast {
   margin-top: 1.1rem;
   padding: 1.1rem 1.35rem;
   border-radius: 1rem;
   background: var(--ink-50);
   border-left: 3px solid var(--brand-400);
   font-size: 16px;
   color: var(--ink-600);
   line-height: 1.8
}

.ail-tl-contrast strong {
   color: var(--ink-800)
}

/* Predictive analytics mini-cards */
.ail-predict-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
   margin-top: 1rem
}

.ail-predict-card {
   padding: 1.5rem;
   border-radius: 1rem;
   border: 1px solid var(--brand-100);
   background: var(--white);
   transition: all .3s
}

.ail-predict-card:hover {
   border-color: var(--brand-400);
   box-shadow: var(--shadow-lg);
   transform: translateY(-3px)
}

.ail-predict-card h4 {
   font-size: .95rem;
   font-weight: 800;
   color: var(--ink-700);
   margin-bottom: .4rem
}

.ail-predict-card p {
   font-size: 16px;
   color: var(--ink-400);
   line-height: 1.6;
   margin: 0
}

.ail-hero-img {
   border-radius: 30px;
   overflow: hidden;
}

.col-7-5 {
   display: grid;
/*   grid-template-columns: 7fr 5fr;*/
 grid-template-columns: none;
   gap: 50px;
   width: 100%;
}

.col-5-7 {
   display: grid;
/*   grid-template-columns: 5fr 7fr;*/
  grid-template-columns:none;
   gap: 50px;
   width: 100%;
}

/* ── AI-Enabled Loyalty Platform — dark banner ───────── */
.ail-platform-banner {
   position: relative;
   overflow: hidden;
   background: var(--grad-dark);
   border-radius: 1.75rem;
   padding: 4.5rem
}

.ail-platform-head {
   position: relative;
   max-width: 50rem;
   margin-inline: auto
}

.text-center {
   text-align: center;
}

#ail-why .col-12 {
   margin-bottom: 30px;
}

#ail-why .ail-callout {
   margin-top: 20px;
}

.ail-platform-blob-1 {
   position: absolute;
   width: 22rem;
   height: 22rem;
   border-radius: 50%;
   background: var(--brand-500);
   filter: blur(70px);
   opacity: .25;
   top: -6rem;
   left: -6rem;
   animation: ail-blob-float 9s ease-in-out infinite
}

.ail-platform-blob-2 {
   position: absolute;
   width: 22rem;
   height: 22rem;
   border-radius: 50%;
   background: var(--plum-500);
   filter: blur(70px);
   opacity: .25;
   bottom: -6rem;
   right: -6rem;
   animation: ail-blob-float 11s ease-in-out infinite reverse
}

@keyframes ail-blob-float {
   0%, 100% {
      transform: translate(0, 0) scale(1)
   }

   50% {
      transform: translate(-16px, -20px) scale(1.08)
   }
}

.ail-platform-banner .eyebrow {
   justify-content: center;
   background: rgba(255, 255, 255, .1);
   color: #fff
}

.ail-platform-banner .sec-title {
   color: #fff
}

.ail-platform-banner .sec-sub {
   color: var(--ink-200)
}

.ail-platform-grid {
   position: relative;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: .9rem;
   margin-top: 2.5rem
}

.ail-platform-item {
   display: flex;
   align-items: center;
   gap: .6rem;
   padding: 1rem 1.1rem;
   border-radius: .9rem;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .12);
   color: #fff;
   font-size: 16px;
   font-weight: 600;
   transition: all .25s
}

.ail-platform-item:hover {
   border-color: rgba(255, 255, 255, .35);
   background: rgba(255, 255, 255, .1);
   transform: translateY(-2px)
}

.ail-platform-item .dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--brand-300);
   flex-shrink: 0
}

.ail-platform-item:nth-child(even) .dot {
   background: var(--plum-300, #d4a0bc)
}

/* ── Why Choose ───────────────────────────────────── */
.ail-why-choose-body {
   margin-inline: auto
}

.ail-why-choose-note {
   margin-top: 1.5rem
}

#ail-why-choose .ail-chip-grid {
   /* grid-template-columns: repeat(4, max-content); */
   justify-content: center;
   column-gap: 3rem
}

#ail-why-choose .ail-chip {
   justify-content: flex-start
}

.ail-quote-line {
   margin-top: 2rem;
   padding: 1.5rem 1.75rem;
   border-radius: 1.25rem;
   background: linear-gradient(135deg, var(--brand-50), var(--plum-50));
   border: 1px solid var(--brand-100);
   text-align: center
}

.ail-quote-mark {
   color: var(--brand-300);
   margin-bottom: .5rem
}

.ail-quote-line p {
   margin: 0;
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-weight: 700;
   color: var(--ink-700);
   font-size: 24px
}

.ail-quote-line p.accent {
   background: var(--grad-brand);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   font-size: 1.2rem;
   margin-top: .35rem;
   text-wrap-style: pretty;
}

/* ── Related Solutions ────────────────────────────── */
.ail-related {
   text-align: center
}

.ail-related-pills {
   justify-content: center;
   max-width: 67rem;
   margin-inline: auto
}

/* ── Final CTA reuse tweak ────────────────────────── */
.ail-cta-wrap {
   position: relative;
   z-index: 1
}

.ail-cta-title {
   max-width: 46rem
}


/* ── Scroll reveal stagger helper (works with existing .fade-up + IO in main.js) ── */
.fade-up.d1 {
   transition-delay: .08s
}

.fade-up.d2 {
   transition-delay: .16s
}

.fade-up.d3 {
   transition-delay: .24s
}

.fade-up.d4 {
   transition-delay: .32s
}

/* =====================================================
   WhatsApp Loyalty Programs — page-specific styles
   ===================================================== */

/* ── Conversational AI example queries — WhatsApp-style bubbles ── */
.wl-quote-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1rem;
   margin-top: 1.5rem
}

#wl-why .sec-sub {
   margin-bottom: 30px
}

#wl-hero .col-5-7 {
   align-items: center;
}

#wl-faq {
   padding: 0px
}

#wl-industries .industries-grid {
   grid-template-columns: 1fr 1fr 1fr 1fr;
}

#wl-industries .ail-section-head .sec-sub {
   max-width: 32rem;
   margin-inline: auto
}

#wl-industries .industry-card {
   text-align: center
}

#wl-industries .ind-icon {
   margin-inline: auto
}

#programme .cta-title {
   width: 100%;
   max-width: 100%;
}

.wl-quote-bubble {
   flex: 0 1 calc(25% - .75rem);
   display: flex;
   align-items: center;
   gap: .75rem;
   background: var(--white);
   border: 1px solid var(--brand-100);
   border-radius: 1rem;
   padding: 1rem 1.15rem;
   font-size: 16px;
   font-weight: 600;
   color: var(--ink-700);
   line-height: 1.4;
   box-shadow: var(--shadow-sm);
   transition: all .25s
}

.wl-quote-bubble:hover {
   border-color: var(--brand-400);
   box-shadow: var(--shadow-md);
   transform: translateY(-2px)
}

.wl-quote-bubble p {
   margin: 0
}

.wl-quote-bubble .wl-ic {
   flex-shrink: 0;
   width: 34px;
   height: 34px;
   border-radius: .65rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff
}

.wl-quote-bubble.tone-brand .wl-ic {
   background: var(--grad-brand)
}

.wl-quote-bubble.tone-plum .wl-ic {
   background: linear-gradient(135deg, var(--plum-400), var(--plum-500))
}

/* ── Icon-card grid — used for Business Challenges (amber) and Communication (brand/plum) ── */
.wl-icon-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
   margin-top: 1.5rem
}

.wl-icon-card {
   display: flex;
   align-items: center;
   gap: .85rem;
   padding: 1rem 1.15rem;
   border-radius: 1rem;
   background: var(--white);
   border: 1px solid var(--ink-100);
   transition: all .25s
}

.wl-icon-card:hover {
   border-color: var(--brand-300);
   box-shadow: var(--shadow-md);
   transform: translateY(-2px)
}

.wl-icon-card .wl-ic {
   flex-shrink: 0;
   width: 38px;
   height: 38px;
   border-radius: .75rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff
}

.wl-icon-card.tone-amber .wl-ic {
   background: var(--grad-brand)
}

.wl-icon-card.tone-brand .wl-ic {
   background: var(--grad-brand)
}

.wl-icon-card.tone-plum .wl-ic {
   background: linear-gradient(135deg, var(--plum-400), var(--plum-500))
}

.wl-icon-card p {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: var(--ink-700);
   line-height: 1.4
}

/* ── Badge row — used for Enterprise Integrations ── */
.wl-badge-row {
   display: flex;
   flex-wrap: wrap;
   gap: .7rem;
   margin-top: 1.5rem
}

.wl-badge {
   display: inline-flex;
   align-items: center;
   gap: .55rem;
   padding: .65rem 1.2rem;
   border-radius: 9999px;
   background: var(--white);
   border: 1px solid var(--brand-100);
   font-size: 16px;
   font-weight: 600;
   color: var(--ink-600);
   box-shadow: var(--shadow-sm);
   transition: all .25s
}

.wl-badge:hover {
   border-color: var(--brand-400);
   color: var(--brand-700);
   transform: translateY(-2px)
}

.wl-badge svg {
   color: var(--brand-600);
   flex-shrink: 0
}

/* =====================================================
   Rewards & Redemption Solutions — page-specific overrides
   ===================================================== */

#rr-options .ail-tl-content h3 {
   margin-bottom: .35rem
}

#rr-options .ail-lead-in {
   margin-top: 1rem
}

/* Final CTA reuses about.php's photo/glass card — centre this page's copy instead of its default left align */
#programme .ab-ahead p {
   text-align: center
}

#rr-industries .industries-grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr
}

#rr-engine {
   padding-top: 0px
}

#rr-why-choose {
   padding-top: 0px
}

#rr-faq {
   padding: 0px
}

/* =====================================================
   QR Code Loyalty Programs — page-specific overrides
   ===================================================== */

#qr-management .ail-tl-content h3 {
   margin-bottom: .35rem
}

#qr-management .ail-lead-in {
   margin-top: 1rem
}

#qr-why .ail-lead-in {
   font-size: 28px!important;
   margin-top: 2rem;
   margin-bottom: 1.5rem;
}

/* Final CTA reuses about.php's photo/glass card — centre this page's copy instead of its default left align */
#qr-programme .ab-ahead p {
   text-align: center
}

#qr-analytics .ail-chip-grid.cols-3 {
   margin-bottom: .5rem
}

#qr-analytics .ail-lead-in {
   font-size: 28px !important
}

#qr-platform {
   padding-top: 0px
}

#qr-faq {
   padding: 0px
}

#qr-industries .industries-grid {
   grid-template-columns: 1fr 1fr 1fr 1fr;
}

#qr-related .ail-related-pills {
   max-width: 67rem;
}

/* =====================================================
   Distributor Loyalty Programs — page-specific overrides
   ===================================================== */

#dl-solutions .ail-tl-content h3 {
   margin-bottom: .35rem
}

#dl-solutions .ail-lead-in {
   margin-top: 1rem
}

/* Final CTA reuses about.php's photo/glass card — centre this page's copy instead of its default left align */
#dl-programme .ab-ahead p {
   text-align: center
}

#dl-platform {
   padding-top: 0px
}

#dl-faq {
   padding: 0px
}

#dl-industries .industries-grid {
   grid-template-columns: 1fr 1fr 1fr 1fr
}

#dl-related .ail-related-pills {
   max-width: 67rem
}

#dl-analytics .ail-chip-grid.cols-3 {
   grid-template-columns: repeat(3, 1fr);
}

/* =====================================================
   Dealer Loyalty Programs — page-specific overrides
   ===================================================== */

#de-solutions .ail-tl-content h3 {
   margin-bottom: .35rem
}

#de-solutions .ail-lead-in {
   margin-top: 1rem
}

/* Final CTA reuses about.php's photo/glass card — centre this page's copy instead of its default left align */
#de-programme .ab-ahead p {
   text-align: center
}

#de-platform {
   padding-top: 0px
}

#de-faq {
   padding: 0px
}

#de-industries .industries-grid {
      display: flex;
    flex-wrap: wrap;
}

#wl-industries .industries-grid, #dl-industries .industries-grid, #ail-industries .industries-grid, #qr-industries .industries-grid, #rr-industries .industries-grid {  display: flex; flex-wrap: wrap;    justify-content: center; }
#de-related .ail-related-pills {
   max-width: 67rem
}

#de-analytics .ail-chip-grid.cols-3 {
   grid-template-columns: repeat(2, 1fr)
}

/* =====================================================
   Trade Loyalty Programs — page-specific overrides
   ===================================================== */

#tl-programme .ab-ahead p {
   text-align: center
}

#tl-hero .col-7-5 {
   align-items: stretch
}

#tl-hero .ail-hero-img {
   align-self: stretch;
   display: flex
}

#tl-hero .ail-hero-img img {
   width: 100%;
   object-fit: cover
}

#tl-industries .industries-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1.5rem
}

#tl-industries .industries-grid .industry-card {
   flex: 0 1 calc(16.6666% - 1.25rem);
   min-width: 160px;
   text-align: center
}

#tl-industries .ind-icon {
   margin-inline: auto
}

/* =====================================================
   Retailer Loyalty Programs — page-specific overrides
   ===================================================== */

#rl-programme .ab-ahead p {
   text-align: center
}

#rl-hero .col-7-5 {
   align-items: stretch
}

#rl-hero .ail-hero-img {
   align-self: stretch;
   display: flex
}

#rl-hero .ail-hero-img img {
   width: 100%;
   object-fit: cover
}

#rl-industries .industries-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1.5rem
}

#rl-industries .industries-grid .industry-card {
   flex: 0 1 calc(16.6666% - 1.25rem);
   min-width: 160px;
   text-align: center
}

#rl-industries .ind-icon {
   margin-inline: auto
}

/* =====================================================
   Influencer Loyalty Programs — page-specific overrides
   ===================================================== */

#il-programme .ab-ahead p {
   text-align: center
}

#il-hero .col-7-5 {
   align-items: stretch
}

#il-hero .ail-hero-img {
   align-self: stretch;
   display: flex
}

#il-hero .ail-hero-img img {
   width: 100%;
   object-fit: cover
}

#il-elements .ail-tl-content h3 {
   margin-bottom: .35rem
}

#il-elements .ail-lead-in {
   margin-top: 1rem
}

#il-industries .industries-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1.5rem
}

#il-industries .industries-grid .industry-card {
   flex: 0 1 calc(16.6666% - 1.25rem);
   min-width: 160px;
   text-align: center
}

#il-industries .ind-icon {
   margin-inline: auto
}

/* =====================================================
   Customer Loyalty Programs — added Industries section
   ===================================================== */
#clp-industries .industries-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1.5rem
}

#clp-industries .industries-grid .industry-card {
   flex: 0 1 calc(16.6666% - 1.25rem);
   min-width: 160px;
   text-align: center
}

#clp-industries .ind-icon {
   margin-inline: auto
}

/* =====================================================
   Channel Loyalty Programs — page-specific overrides
   ===================================================== */
#ch-components .ail-tl-content h3 {
   margin-bottom: .35rem
}

#ch-components .ail-lead-in {
   margin-top: 1rem
}

#ch-programme .ab-ahead p {
   text-align: center
}

#ch-advantage .ail-lead-in {
   font-size: 28px !important
}

#ch-industries .industries-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1.5rem
}

#ch-industries .industries-grid .industry-card {
   flex: 0 1 calc(16.6666% - 1.25rem);
   min-width: 160px;
   text-align: center
}

#ch-industries .ind-icon {
   margin-inline: auto
}

#de-industries {
   padding-bottom: 0px;
}
.mb-20{margin-bottom: 20px;}
/* =====================================================
   RESPONSIVE BREAKPOINTS — consolidated
   Every @media rule for this file lives here, one block
   per breakpoint value (largest max-width first), so no
   breakpoint is declared more than once in the file.
   ===================================================== */

@media(max-width:1024px) {
   .col-7-5 {
      align-items: flex-start
   }

   #wl-hero .col-5-7 {
      align-items: flex-start
   }

   .col-5-7 {
      align-items: flex-start
   }

   #il-industries .industries-grid .industry-card {
      flex: 0 1 calc(24% - 1.25rem);
   }

}

@media(max-width:992px) {
   .col-7-5 {
      align-items: flex-start;
      gap: 20px
   }

   #wl-hero .col-5-7 {
      align-items: flex-start
   }

   .wl-quote-bubble {
      flex: 0 1 calc(50% - .75rem)
   }

   .col-5-7 {
      align-items: flex-start
   }

   .industry-card {
      padding: 10px
   }

   .ail-platform-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   #rr-industries .industries-grid {
      grid-template-columns: 1fr 1fr 1fr 1fr
   }

   #tl-industries .industries-grid .industry-card {
      flex-basis: calc(24% - 1rem)
   }

   #rl-industries .industries-grid .industry-card {
      flex-basis: calc(33.333% - 1rem)
   }

   #il-industries .industries-grid .industry-card {
      flex-basis: calc(33.333% - 1rem)
   }

   #clp-industries .industries-grid .industry-card {
      flex-basis: calc(33.333% - 1rem)
   }

   #ch-industries .industries-grid .industry-card {
      flex-basis: calc(33.333% - 1rem)
   }

   .ail-chip-grid.cols-3 {
      grid-template-columns: repeat(2, 1fr);
   }

   #tl-hero .ail-hero-img {
      align-self: flex-start;
      display: flex;
   }

   #tl-components .wl-icon-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   #il-hero .ail-hero-img {
      align-self: flex-start;
   }

   #rl-hero .ail-hero-img {
      align-self: flex-start;
   }

   .clp-hero-grid {
      align-items: flex-start;
   }

   .clp-split-7-5 {
      align-items: flex-start;
   }
}

@media(max-width:767px) {
   #ch-advantage .ail-lead-in {
   font-size: 20px !important
}
   .banner-blk img {
      height: 100%
   }

   .banner-blk .container {
      padding-bottom: 2rem
   }

   .ail-chip-grid, .ail-chip-grid.cols-3 {
      grid-template-columns: 1fr
   }

   .ail-predict-grid {
      grid-template-columns: 1fr
   }

   .ail-platform-banner {
      padding: 3rem 1.75rem
   }

   #ail-why-choose .ail-chip-grid {
      grid-template-columns: max-content
   }

   .wl-quote-grid {
      flex-direction: column
   }

   .wl-icon-grid {
      grid-template-columns: 1fr 1fr
   }

   #rr-industries .industries-grid {
      grid-template-columns: 1fr 1fr
   }

   #qr-industries .industries-grid {
      grid-template-columns: 1fr 1fr
   }

   #dl-industries .industries-grid {
      grid-template-columns: 1fr 1fr
   }

   #de-industries .industries-grid {
      grid-template-columns: 1fr 1fr
   }
}

@media(max-width:575px) {
   .banner-blk {
      aspect-ratio: auto;
      height: 250px
   }

   .banner-blk img {
      height: 250px
   }

   .ail-hero-sub p:last-child {
      margin-bottom: 0 !important
   }

   .ail-tl-item {
      padding-left: 60px
   }

   .ail-tl-marker {
      width: 44px;
      height: 44px;
      border-radius: .8rem
   }

   .ail-timeline::before {
      left: 21px
   }

   .ail-platform-grid {
      grid-template-columns: 1fr
   }

   .col-8-4 {
      grid-template-columns: 1fr
   }

   .col-7-5 {
      grid-template-columns: 1fr;
      gap: 15px
   }

   .col-6-6 {
      grid-template-columns: 1fr
   }

   .sub-heaing {
      font-size: 22px
   }

   .ail-section-head {
      margin-bottom: 20px !important
   }

   .col-5-7 {
      grid-template-columns: 1fr;
      gap: 15px
   }

   .ab-ahead-photo {
      padding: 50px 0
   }

   .wl-icon-grid {
      grid-template-columns: 1fr 1fr
   }

   #wl-industries .industries-grid {
      grid-template-columns: 1fr 1fr
   }

   #wl-industries .industries-grid .industry-card {
      padding: 10px;
      text-align: center
   }

   #wl-hero {
      padding-bottom: 0px
   }

   #wl-mobile-to-agents {
      text-align: center
   }

   .ail-hero-sub {
      text-align: center
   }

   .ind-icon {
      margin: 0 auto 20px
   }

   #tl-industries .industries-grid .industry-card {
      flex-basis: calc(50% - .75rem);
      min-width: 0
   }

   #rl-industries .industries-grid .industry-card {
      flex-basis: calc(50% - .75rem);
      min-width: 0
   }

   #il-industries .industries-grid .industry-card {
      flex-basis: calc(50% - .75rem);
      min-width: 0
   }

   #clp-industries .industries-grid .industry-card {
      flex-basis: calc(50% - .75rem);
      min-width: 0
   }

   #ch-industries .industries-grid .industry-card {
      flex-basis: calc(50% - .75rem);
      min-width: 0
   }

   #dl-challenges .wl-icon-grid {
      grid-template-columns: 1fr;
   }

   #dl-dsr .wl-icon-grid {
      grid-template-columns: 1fr;
   }

   .ail-chip {
      text-align: left;
   }

   #dl-analytics .ail-chip-grid.cols-3 {
      grid-template-columns: repeat(1, 1fr);
      margin-bottom: 0px;
   }

   #de-challenges .wl-icon-grid {
      grid-template-columns: 1fr;
   }

   #tl-components .wl-icon-grid {
      grid-template-columns: 1fr;
   }

   #rl-features .wl-icon-grid {
      grid-template-columns: 1fr;
   }

   #ch-expertise .ail-chip-grid {
      margin-bottom: 0px;
   }

   .cta-sub {
      margin-bottom: 0px;
   }
}

@media(max-width:480px) {
   #rr-industries .industries-grid {
      grid-template-columns: 1fr 1fr
   }

   .industry-card h4 {
      text-align: center;
      margin-bottom: 0px
   }

   #qr-industries .industries-grid {
      grid-template-columns: 1fr 1fr
   }

   #tl-why .ail-chip-grid {
      margin-bottom: 0px;
   }

}