/* ==========================================================================
   KloudData — AI Application Engineering Services
   Dedicated, self-contained stylesheet for
   page-templates/tmpl-ai-application-engineering.php
   Namespaced under .kd-aae — does not read or extend main.css tokens.
   Color tokens are copied 1:1 from assets/css/salesforce-revenue-cloud.css
   (the approved KloudData palette) so this page matches the rest of the
   site's visual language.
   ========================================================================== */

.kd-aae {
  --aae-cream:      #f7f4ee;
  --aae-paper:      #fbfaf7;
  --aae-white:      #ffffff;
  --aae-lav:        #eef1fb;
  --aae-lav-line:   #dfe4f7;
  --aae-ink-950:    #0c1430;
  --aae-ink-800:    #182352;
  --aae-ink-600:    #3b477a;
  --aae-ink-400:    #6b7396;
  --aae-ink-300:    #98a0bd;
  --aae-blue-700:   #153fbf;
  --aae-blue-600:   #2451e0;
  --aae-blue-500:   #3f6df0;
  --aae-teal-500:   #14b8a6;
  --aae-teal-050:   #e8f8f5;
  --aae-navy-950:   #0a1230;
  --aae-navy-900:   #101c46;
  --aae-line:       #e7e4db;
  --aae-line-soft:  #eeece4;
  --aae-radius-lg:  20px;
  --aae-radius-md:  14px;
  --aae-radius-sm:  10px;
  --aae-max:        1280px;
  --aae-shadow:     0 8px 30px rgba(12,20,48,0.06);

  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--aae-ink-950);
  background: var(--aae-white);
  overflow-x: hidden;
}

.kd-aae h1, .kd-aae h2, .kd-aae h3, .kd-aae h4 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  color: #0D1B2E;
  font-weight: 800;
  line-height: 1.18;
  margin: 0;
}

.kd-aae p { margin: 0; }
.kd-aae a { text-decoration: none; }
.kd-aae ul { margin: 0; padding: 0; list-style: none; }
.kd-aae button { font-family: inherit; cursor: pointer; }
.kd-aae svg { display: block; stroke: #0057D8;}
.kd-aae .accent {
background: linear-gradient(90deg, #014A9C 40.38%, #01AEF0 100%);  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kd-aae-wrap {
  max-width:1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.kd-aae-section { padding: 88px 0;background-color:#fbfaf7; }
.kd-aae-section--white {
  background:#F2F5FA;
}

/* ── Section head ─────────────────────────────────────────── */
.kd-aae-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aae-teal-500);
  margin-bottom: 16px;
}
.kd-aae-eyebrow--pill {
  width: auto;
  background: #fff;
  border: 1px solid #E4E8EF;
  color: #6B7A99;
  border-radius: 999px;
  padding: 9px 20px;
}
.kd-aae-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.kd-aae-head .kd-aae-eyebrow { justify-content: center; }
.kd-aae-head--left { max-width: 100%; margin: 0 0 48px; text-align: center; }
.kd-aae-head--left .kd-aae-eyebrow { justify-content: flex-start; }
.kd-aae-head h2 { font-size: 48px; font-weight: 700; margin-bottom: 16px; line-height: 58px; }
.kd-aae-head p { font-size: 16px; line-height: 1.7; color: #6B7A99; }


/* ══════════════════════════════════════════════════════════════
   HERO + WHAT WE DO — shared background wrapper
   The optional editor-supplied Background Image (Hero tab) spans both
   sections as one continuous image (no seam at the section boundary),
   shown plain with no gradient/scrim over it. Neither section's own
   background paints over it — see the transparent overrides below.
   ══════════════════════════════════════════════════════════════ */
.kd-aae-hero-merged {
  position: relative;
  background-color: #FBFAF7;
}
/* Optional editor-supplied Background Image — shown plain (no gradient
   fade), full-bleed edge to edge across the whole shared width. */
.kd-aae-hero-merged-has-bg {
  /* Stretch to exactly 100% width AND 100% height of the section (not
     "cover", which was cropping the left/right edges, and not "100%
     auto" either, which changed how much of the image's height showed).
     Width fills fully and height fills fully, independently. */
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
.kd-aae-hero {
  position: relative;
  background: transparent;
  padding-bottom: 80px;
  overflow: hidden;
}
.kd-aae-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
  padding-top: 140px;
}

.kd-aae-hero h1 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 74px;
  letter-spacing: 0;
  color: #0D1B2E;
  margin-bottom: 22px;
}
.kd-aae-hero h1 .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-aae-hero-lead {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #6B7A99;
  max-width: 520px;
  margin-bottom: 34px!important;
}

/* ── Dashboard visual (ACF image override, or coded fallback) ── */
.kd-aae-hero-visual { position: relative; }
.kd-aae-hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--aae-radius-lg);
}

.kd-aae-dash {
  background: #fff;
  border: 1px solid var(--aae-line);
  border-radius: var(--aae-radius-lg);
  box-shadow: 0 20px 60px rgba(12,20,48,0.12);
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}
.kd-aae-dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--aae-line-soft);
}
.kd-aae-dash-header strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--aae-ink-950); margin-bottom: 3px; }
.kd-aae-dash-header span { display: block; font-size: 11px; color: var(--aae-ink-400); }
.kd-aae-dash-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.kd-aae-dash-daterange,
.kd-aae-dash-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--aae-ink-400);
  border: 1px solid var(--aae-line);
  border-radius: 8px;
  padding: 6px 10px;
  white-space: nowrap;
}

.kd-aae-dash-body { display: grid; grid-template-columns: 108px 1fr; }
.kd-aae-dash-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--aae-line-soft);
  background: var(--aae-paper);
}
.kd-aae-dash-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--aae-ink-400);
  padding: 7px 8px;
  border-radius: 8px;
}
.kd-aae-dash-nav-item.is-active { background: var(--aae-lav); color: var(--aae-blue-600); font-weight: 700; }
.kd-aae-dash-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.6; }

.kd-aae-dash-main { padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kd-aae-dash-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kd-aae-dash-card {
  background: #fff;
  border: 1px solid var(--aae-line-soft);
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 0;
  overflow: hidden;
}
.kd-aae-dash-card--table { padding-bottom: 8px; }
.kd-aae-dash-card-title { display: block; font-size: 11px; font-weight: 700; color: var(--aae-ink-950); margin-bottom: 10px; }
.kd-aae-dash-card-sub { display: block; font-size: 10px; color: var(--aae-ink-400); margin-top: 4px; }
.kd-aae-dash-card-sub b { color: var(--aae-ink-950); font-weight: 700; }
.kd-aae-dash-bignum { display: block; font-size: 22px; font-weight: 800; color: var(--aae-ink-950); line-height: 1.1; }
.kd-aae-dash-bignum small { font-size: 11px; font-weight: 600; color: var(--aae-ink-400); margin-left: 4px; }
.kd-aae-dash-up { display: block; font-size: 10px; font-weight: 700; color: #15975f; margin-top: 6px; }

.kd-aae-dash-gauge { position: relative; width: 56px; height: 56px; margin-bottom: 6px; }
.kd-aae-dash-gauge svg { width: 100%; height: 100%; }
.kd-aae-dash-gauge strong {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--aae-ink-950);
}
.kd-aae-dash-gauge strong small { font-size: 8px; font-weight: 600; color: var(--aae-ink-400); }

.kd-aae-dash-spark { display: block; width: 100%; height: 26px; margin-top: 8px; }

.kd-aae-dash-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  color: var(--aae-ink-950);
  padding: 5px 0;
  border-top: 1px solid var(--aae-line-soft);
}
.kd-aae-dash-mini-row:first-of-type { border-top: none; }
.kd-aae-dash-mini-row span { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-aae-dash-mini-row span i { width: 6px; height: 6px; border-radius: 50%; background: var(--aae-blue-600); flex-shrink: 0; }
.kd-aae-dash-mini-row b { flex-shrink: 0; font-weight: 700; color: var(--aae-ink-400); }
.kd-aae-dash-mini-row--check span svg { flex-shrink: 0; }
.kd-aae-dash-mini-row b.ok { color: #15975f; }
.kd-aae-dash-link { display: block; margin-top: 10px; font-size: 10.5px; font-weight: 700; color: var(--aae-blue-600); }

.kd-aae-dash-donut { position: relative; width: 60px; height: 60px; margin: 0 auto 8px; }
.kd-aae-dash-donut svg { width: 100%; height: 100%; }
.kd-aae-dash-donut strong {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; line-height: 1.3; color: var(--aae-ink-950); text-align: center;
}

.kd-aae-dash-shield {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.kd-aae-dash-shield svg { flex-shrink: 0; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--aae-blue-600); box-sizing: border-box; }
.kd-aae-dash-shield strong { font-size: 17px; font-weight: 800; color: var(--aae-ink-950); }
.kd-aae-dash-shield strong small { display: block; font-size: 9.5px; font-weight: 500; color: var(--aae-ink-400); }

.kd-aae-dash-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 9.5px; }
.kd-aae-dash-table th {
  text-align: left;
  font-weight: 700;
  color: var(--aae-ink-400);
  padding: 5px 4px;
  border-bottom: 1px solid var(--aae-line-soft);
  white-space: nowrap;
}
.kd-aae-dash-table td {
  padding: 6px 4px;
  color: var(--aae-ink-950);
  border-bottom: 1px solid var(--aae-line-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
.kd-aae-dash-table th:first-child, .kd-aae-dash-table td:first-child { max-width: none; width: 75%; }
.kd-aae-dash-table th:last-child, .kd-aae-dash-table td:last-child { text-align: right; }
.kd-aae-dash-table tr:last-child td { border-bottom: none; }

.kd-aae-dash-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.kd-aae-dash-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--aae-ink-400); font-weight: 600; }
.kd-aae-dash-legend i { width: 7px; height: 7px; border-radius: 50%; }
.kd-aae-dash-legend i.blue { background: var(--aae-blue-600); }
.kd-aae-dash-legend i.teal { background: #14b8a6; }
.kd-aae-dash-legend i.dark { background: var(--aae-ink-950); }
.kd-aae-dash-linechart { display: block; width: 100%; height: 60px; }

.kd-aae-icon-badge {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: #F2F5FA;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.kd-aae-icon-badge img, .kd-aae-icon-badge svg { width: 20px; height: 20px; }
.kd-aae-icon-badge--navy { background: #004195; }

/* ══════════════════════════════════════════════════════════════
   WHAT WE DO — 2-col icon-card grid + tall right-side visual
   ══════════════════════════════════════════════════════════════ */
/* Transparent so the Hero + What We Do shared background (see
   .kd-aae-hero-merged above) shows through with no seam — scoped to
   this specific section only, not the shared .kd-aae-section--lav
   class other (unrelated) sections on this page still use. */
.kd-aae-section--whatwedo { background: #fff; border-top: 1px solid #E4E8EF}
.kd-aae-section--whatwedo .kd-aae-head h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-aae-section--whatwedo .kd-aae-head h2 .accent {
  background: linear-gradient(90deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-aae-section--whatwedo .kd-aae-head p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #6B7A99;
}
.kd-aae-whatwedo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.kd-aae-whatwedo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-content: start;
}
.kd-aae-whatwedo-card {
  background: #fff;
  border: 1px solid #E4E8EF;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 252px;
}
.kd-aae-whatwedo-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
background: linear-gradient(135deg, rgba(230, 247, 254, 0.5) 0%, #E6F7FE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-aae-whatwedo-icon img, .kd-aae-whatwedo-icon svg { width: auto; height: auto; }
.kd-aae-whatwedo-card h3 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-aae-whatwedo-card p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  color: #6B7A99;
}
.kd-aae-whatwedo-visual {
  border-radius: 16px;
  overflow: hidden;
  min-height: 100%;
}
.kd-aae-whatwedo-visual img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
.kd-aae-whatwedo-visual-placeholder {
  width: 100%;
  height: 100%;
  min-height: 340px;
  display: flex;
  align-items: center;
  padding: 32px;
  border: 1px dashed #c9d3e6;
  border-radius: 16px;
  font-size: 13px;
  color: #6B7A99;
  text-align: center;
  box-sizing: border-box;
}
/* ══════════════════════════════════════════════════════════════
   ROADMAP DESIGN — dark band, connected step timeline (4+3 rows)
   Same 3-layer background system (Color / Photo / decorative corner
   Image) as the other dark bands on this page, but the small graphic
   sits top-left here instead of bottom-left, per the reference design.
   ══════════════════════════════════════════════════════════════ */
.kd-aae-roadmap2 { position: relative; background-color: #0B1733; overflow: hidden; }
.kd-aae-roadmap2-has-photo { background-size: cover; background-position: center; }
.kd-aae-roadmap2-has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11,23,51,0.82);
  z-index: 0;
  pointer-events: none;
}
.kd-aae-roadmap2-topleft {
 position: absolute;
    top: 40px;
    left: 0;
    width: 220px;
    height: auto;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.kd-aae-roadmap2-wrap { position: relative; z-index: 1; }
.kd-aae-roadmap2 .kd-aae-head h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #fff;
}
.kd-aae-roadmap2 .kd-aae-head h2 .accent {
  background: linear-gradient(90deg, #01AEF0 0%, #01D4DA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-aae-roadmap2 .kd-aae-head p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: rgba(255,255,255,0.7);
}

.kd-aae-roadmap2-rows { display: flex; flex-direction: column; gap: 56px; }
.kd-aae-roadmap2-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
/* A row with fewer than 4 items (e.g. the trailing row of 7) spreads its
   items across the full row width instead of leaving empty columns. */
.kd-aae-roadmap2-row--1 { grid-template-columns: repeat(1, 1fr); }
.kd-aae-roadmap2-row--2 { grid-template-columns: repeat(2, 1fr); }
.kd-aae-roadmap2-row--3 { grid-template-columns: repeat(3, 1fr); }
.kd-aae-roadmap2-step { position: relative; }
.kd-aae-roadmap2-step::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  right: -50%;
  height: 0;
  border-top: 1px solid rgba(255,255,255,0.3);
  z-index: 0;
}
.kd-aae-roadmap2-row .kd-aae-roadmap2-step:last-child::after { display: none; }
.kd-aae-roadmap2-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #01AEF0;
  margin: 0 auto 16px;
}
.kd-aae-roadmap2-box {
  width: 100%;
  height: 190px;
  box-sizing: border-box;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid transparent;
  border-image: linear-gradient(180deg, #3CC9FF 0%, #006FFF 100%) 1;
  background: rgba(255,255,255,0.03);
  text-align: center;
}
.kd-aae-roadmap2-box h3 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
}
.kd-aae-roadmap2-box p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  text-align: center;
  color: #ffffff99;
}

/* ══════════════════════════════════════════════════════════════
   BUSINESS FUNCTION — centered head, photo + connected timeline
   Icons cycle through an "active" glow state one at a time, looping
   forever — pure CSS (animation-delay staggered per row via an
   inline --aae-func-i custom property set from PHP), no JS needed.
   ══════════════════════════════════════════════════════════════ */
.kd-aae-section--func2 .kd-aae-head h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-aae-section--func2 .kd-aae-head h2 .accent {
  background: linear-gradient(90deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-aae-section--func2 .kd-aae-head p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #6B7A99;
}
.kd-aae-func-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.kd-aae-func-image {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--aae-radius-lg);
  display: block;
}
.kd-aae-func-image-placeholder {
  width: 100%;
  min-height: 320px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 32px;
  border: 1px dashed #c9d3e6;
  border-radius: var(--aae-radius-lg);
  font-size: 13px;
  color: #6B7A99;
  text-align: center;
}
.kd-aae-func-list { position: relative; display: grid; gap: 24px; }
.kd-aae-func-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
/* Connector segment: drawn per item (not one global line), running from
   this icon's bottom edge down to the next icon's top edge. Since it never
   draws above the first icon or below the last, it can't overshoot the
   timeline the way a single absolutely-positioned line spanning the whole
   list did (that assumed every row was the same height, so it drifted
   whenever a title/description wrapped to more lines than its neighbour). */
.kd-aae-func-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 57px;
  bottom: -31px;
  left: 25px;
  width: 2px;
  background: #01AEF040;
  z-index: 0;
}
.kd-aae-func-row {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid #E6ECF5;
  border-radius: var(--aae-radius-md);
  padding: 18px 22px;
  box-shadow: 0px 2px 12px 0px #0041950D;
}
/* The active/glow state is a separate full-circle overlay animated via
   opacity (not the icon's own `background`) — browsers can't smoothly
   interpolate a keyframe from a solid color to a gradient, which made the
   fill look broken/partial mid-transition. Opacity always animates cleanly. */
.kd-aae-func-icon {
  position: relative;
  flex-shrink: 0;
  margin-top: 7px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #E6ECF5;
  box-shadow: 0px 2px 12px 0px #00419514;
  color: #004195;
  display: flex; align-items: center; justify-content: center;
  animation: kd-aae-func-pulse-frame calc(var(--aae-func-count, 7) * 2.5s) ease-in-out infinite;
  animation-delay: calc(var(--aae-func-i, 0) * 2.5s);
}
.kd-aae-func-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(180deg, #004195 0%, #01AEF0 100%);
  box-shadow: 0px 0px 24px 0px #00419559;
  opacity: 0;
  z-index: 0;
  animation: kd-aae-func-pulse-glow calc(var(--aae-func-count, 7) * 2.5s) ease-in-out infinite;
  animation-delay: calc(var(--aae-func-i, 0) * 2.5s);
}
.kd-aae-func-icon img, .kd-aae-func-icon svg {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
}
/* Editor-uploaded icon — rendered as a mask (silhouette) instead of a
   plain <img>, so it can be recolored via `background-color: currentColor`
   the same way the default inline SVGs above respond to `color:currentColor`.
   A plain <img>'s own pixels can never follow a CSS color change, which
   made uploaded icons stay their own color while the built-in icons
   flashed white during the active/glow animation frame — this fixes that. */
.kd-aae-func-icon-mask {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* The sitewide `.kd-aae svg { stroke: #0057D8 }` reset (same specificity)
   was silently winning here, so the icon's stroke never actually followed
   the parent's animated `color` (the inline SVG's stroke="currentColor"
   attribute was being overridden). This is the fix — strictly white while
   active, strictly #004195 at rest, no fixed blue in between. */
.kd-aae-func-icon svg { stroke: currentColor !important; }
/* Icon color/border switch strictly between the two end states — no
   blended in-between shade — by keeping the interpolation window
   vanishingly small (0.01% of the cycle) rather than using steps(), so it
   still shares the same easing/delay timeline as the glow overlay below. */
@keyframes kd-aae-func-pulse-frame {
  0%, 8.99% { border-color: transparent; color: #fff; }
  9%, 100%  { border-color: #E6ECF5; color: #004195; }
}
@keyframes kd-aae-func-pulse-glow {
  0%, 3%   { opacity: 1; }
  9%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kd-aae-func-icon, .kd-aae-func-icon::before { animation: none; }
  .kd-aae-func-icon::before { opacity: 0; }
}
.kd-aae-func-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kd-aae-func-row .label {
  display: block;
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: #0D1B2E;
}
.kd-aae-func-row .desc {
  display: block;
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  color: #6B7A99;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   BUSINESS OUTCOMES — cloned 1:1 from page-agentforce.css's
   .af-benefit2* (Business Benefits): dark full-bleed band, centered
   Geist heading/intro, then a 4×2 grid of stat cards with a gradient
   top border. Same 3-layer background system (Color / Photo / Image).
   ══════════════════════════════════════════════════════════════ */
.kd-aae-outcomes { position: relative; background: #0B1733; overflow: hidden; }
.kd-aae-outcomes-has-photo { background-size: cover; background-position: center; }
.kd-aae-outcomes-has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11,23,51,0.82);
  z-index: 0;
  pointer-events: none;
}
.kd-aae-outcomes-bg {
  position: absolute;
  left: 0; bottom: 40px;
  width: 220px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.kd-aae-outcomes-wrap { position: relative; z-index: 1; }
.kd-aae-outcomes .kd-aae-head h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #fff;
}
.kd-aae-outcomes .kd-aae-head h2 .accent {
  background: linear-gradient(90deg, #29B6F6 0%, #01F0C8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-aae-outcomes .kd-aae-head p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: #FFFFFFCC;
}
.kd-aae-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}
.kd-aae-outcomes-grid + .kd-aae-outcomes-grid { margin-top: 40px; }
/* A trailing row with fewer than 4 items (e.g. the 3 leftover from 7)
   spreads its items across the full row width instead of leaving an
   empty column, matching the reference design. */
.kd-aae-outcomes-grid--1 { grid-template-columns: repeat(1, 1fr); }
.kd-aae-outcomes-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kd-aae-outcomes-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kd-aae-outcomes-card {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90.47deg, #01AEF0 -0.02%, #01D4DA 97.78%) 1;
  padding-top: 24px;
  text-align: center;
}
.kd-aae-outcomes-card h3 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 12px;
}
.kd-aae-outcomes-card p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  color: #FFFFFFCC;
}
.kd-aae-outcomes-card p strong { font-weight: 700; color: #fff; }
@media (max-width: 1024px) {
  .kd-aae-outcomes-grid { grid-template-columns: repeat(2, 1fr); }
  .kd-aae-outcomes .kd-aae-head h2 { font-size: 30px; line-height: 1.3; }
}
@media (max-width: 640px) {
  .kd-aae-outcomes .kd-aae-head h2 { font-size: 30px; line-height: 1.3; }
  .kd-aae-outcomes .kd-aae-head p { font-size: 16px; line-height: 1.6; }
  .kd-aae-outcomes-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   WHY CHOOSE US — cloned 1:1 from page-agentforce.css's .af-why2*:
   light band, left content+photo beside a right-hand vertical
   checklist (icon square + single-line stat).
   ══════════════════════════════════════════════════════════════ */
.kd-aae-why2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}
.kd-aae-why2-content h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: 0;
  color: #0D1B2E;
  margin-bottom: 20px;
}
.kd-aae-why2-content p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #6B7A99;
  margin-bottom: 28px;
}
.kd-aae-why2-image { border-radius: 16px; overflow: hidden; }
.kd-aae-why2-image img { width: 100%; height: auto; display: block; }
.kd-aae-why2-image-placeholder {
  padding: 40px;
  border: 1px dashed #c9d3e6;
  border-radius: 16px;
  font-size: 13px;
  color: #6B7A99;
  text-align: center;
}
.kd-aae-why2-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 8px;
}
.kd-aae-why2-item { display: flex; align-items: center; gap: 20px; }
.kd-aae-why2-icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 12px;
  background: #004195;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-aae-why2-icon img,
.kd-aae-why2-icon svg { width: 24px; height: 24px; }
/* Same sitewide `.kd-aae svg { stroke: #0057D8 }` reset problem as the
   Business Function timeline (equal specificity, declared earlier, so it
   silently wins unless overridden here) — this icon is a static white
   glyph on navy, not animated, so it's a plain hardcoded override. */
.kd-aae-why2-icon svg { stroke: #fff; }
.kd-aae-why2-item span {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: #0D1B2E;
}
@media (max-width: 900px) {
  .kd-aae-why2-layout { grid-template-columns: 1fr; gap: 40px; }
  .kd-aae-why2-content h2 { font-size: 30px; line-height: 1.3; }
}
@media (max-width: 640px) {
  .kd-aae-why2-content h2 { font-size: 30px; line-height: 1.3; }
  .kd-aae-why2-item span { font-size: 18px; line-height: 24px; }
  .kd-aae-why2-icon { width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════════════
   SUCCESS STORIES — live case-study CPT grid, dark image cards
   (same component/pattern as the Revenue Cloud & Agentforce pages)
   ══════════════════════════════════════════════════════════════ */
.aae-stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aae-stories-card {
  position: relative;
  display: block;
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #1a2a4a;
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.aae-stories-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,23,51,0) 30%, rgba(11,23,51,0.92) 100%);
}
.aae-stories-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aae-stories-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: -8px;
}
.aae-stories-title {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: #fff;
}
.aae-stories-stats { display: flex; gap: 16px; }
.aae-stories-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 16px;
  border-right: 1px solid rgba(255,255,255,0.25);
}
.aae-stories-stat:last-child { border-right: none; padding-right: 0; }
.aae-stories-stat-value { font-size: 24px; font-weight: 800; color: #fff; }
.aae-stories-stat-label { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.7); }
.aae-stories-read {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 10px 10px 10px 18px;
  border: 1.5px solid rgba(255,255,255,0.8);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.aae-stories-arrow {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #0B1733;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aae-stories-arrow svg { stroke: currentColor; }
/* ══════════════════════════════════════════════════════════════
   LATEST INSIGHTS — 1 image-overlay featured post beside 3 plain
   text list posts (real WP Posts, filtered by category)
   ══════════════════════════════════════════════════════════════ */
.aae-insights-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: stretch; }
.aae-insights-featured {
  position: relative;
  display: block;
  min-height: 420px;
  border-radius: var(--aae-radius-lg);
  overflow: hidden;
  background-color: var(--aae-navy-950);
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.aae-insights-featured::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,36,0) 30%, rgba(11,18,36,.94) 100%);
}
.aae-insights-featured-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; padding: 32px;
}
.aae-insights-featured-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #8fd0ff; margin-bottom: 12px;
}
.aae-insights-featured-title { font-size: 26px; font-weight: 800; line-height: 1.3; color: #fff; margin-bottom: 12px; max-width: 480px; }
.aae-insights-featured-desc { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 440px; }
.aae-insights-side { display: flex; flex-direction: column; gap: 16px; }
.aae-insights-item {
  display: block;
  background: #fff;
  border: 1px solid var(--aae-line);
  border-radius: var(--aae-radius-lg);
  padding: 22px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.aae-insights-item:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(10,17,40,.18); border-color: var(--aae-blue-600); }
.aae-insights-item-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--aae-blue-600); margin-bottom: 8px; }
.aae-insights-item-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--aae-ink-950); margin-bottom: 8px;
}
.aae-insights-item-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; line-height: 1.6; color: var(--aae-ink-400); margin-bottom: 12px;
}
.aae-insights-item-read { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--aae-blue-600); }
.aae-insights-item-arrow { display: inline-flex; align-items: center; }
.aae-insights-item-arrow svg { transition: transform .2s ease; stroke: currentColor; }
.aae-insights-item:hover .aae-insights-item-arrow svg { transform: translateX(3px); }
@media (max-width: 900px) {
  .aae-insights-grid { grid-template-columns: 1fr; }
  .aae-insights-featured { min-height: 280px; }
}
@media (max-width: 900px) { .aae-stories-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   FAQ — cloned 1:1 from page-agentforce.css's .af-faq-*: bordered
   rounded card, matching border/radius/hover/open-state colors and
   typography exactly. Markup here uses native <details>/<summary>
   (no JS needed for open/close) rather than Agentforce's JS-toggled
   .is-open class, so selectors use [open] instead — same look either
   way, and the chevron is an inline SVG rotated via [open] instead of
   Agentforce's ::before pseudo-chevron.
   ══════════════════════════════════════════════════════════════ */
.kd-aae-faq-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.kd-aae-faq-item {
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.kd-aae-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 20px;
  background: #fff;
  border: none;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  color: var(--aae-ink-950);
  cursor: pointer;
  transition: background .18s ease;
}
.kd-aae-faq-q:hover { background: #F9FAFB; }
.kd-aae-faq-item[open] .kd-aae-faq-q { background: #F9FAFB; border-bottom: 2px solid #E5E7EB; }
.kd-aae-faq-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: #111827;
  display: flex; align-items: center; justify-content: center;
}
.kd-aae-faq-icon img { width: 14px; height: 14px; }
.kd-aae-faq-icon svg { transition: transform .2s ease; }
.kd-aae-faq-item[open] .kd-aae-faq-icon { color: var(--aae-ink-950); }
.kd-aae-faq-item[open] .kd-aae-faq-icon svg { transform: rotate(180deg); }
.kd-aae-faq-a {
  padding: 20px 20px 24px 20px;
  font-size: 16px;
  line-height: 1.7;
  color: #6B7280;
  background: #fff;
}
.kd-aae-faq-item > summary { list-style: none; }
.kd-aae-faq-item > summary::-webkit-details-marker { display: none; }

/* ══════════════════════════════════════════════════════════════
   FINAL CTA — cloned 1:1 from page-agentforce.css's .af-cta2*:
   contained rounded card (not full-bleed), centered heading/subtext,
   pill outline button with a circular arrow.
   ══════════════════════════════════════════════════════════════ */
.kd-aae-cta2-wrap { padding-bottom: 120px; }
.kd-aae-cta2 {
  background-size: cover;
  background-position: center;
  border-radius: 26px;
  padding: 64px 32px;
  overflow: hidden;
}
.kd-aae-cta2-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.kd-aae-cta2-inner h2 {
  font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  color: #fff;
  margin-bottom: 16px;
}
.kd-aae-cta2-inner p {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 32px;
}
.kd-aae-cta2-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 26px;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  transition: background .18s ease;
}
.kd-aae-cta2-btn:hover { background: rgba(255,255,255,0.08); }
.kd-aae-cta2-arrow {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #0B1733;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1024px) {
  .kd-aae-cta2-inner h2 { font-size: 30px; line-height: 1.3; }
}
@media (max-width: 640px) {
  .kd-aae-cta2-inner h2 { font-size: 30px; line-height: 1.3; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .kd-aae-hero-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 115px; }
  .kd-aae-hero h1 { font-size: 40px; line-height: 1.2; }
  .kd-aae-hero-lead { max-width: 100%; }
  .kd-aae-whatwedo-layout { grid-template-columns: 1fr; }
  .kd-aae-whatwedo-visual { order: -1; }
  .kd-aae-whatwedo-visual img,
  .kd-aae-whatwedo-visual-placeholder { min-height: 220px; }
  .kd-aae-func-grid { grid-template-columns: 1fr; gap: 36px; }
  .kd-aae-section--func2 .kd-aae-head h2 { font-size: 30px; line-height: 1.3; }
  .kd-aae-section--whatwedo .kd-aae-head h2 { font-size: 30px; line-height: 1.3; }
  .kd-aae-journey-track { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .kd-aae-journey-step::after { display: none; }
  .kd-aae-dash-row { grid-template-columns: 1fr; }
  .kd-aae-roadmap2-row { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .kd-aae-roadmap2-step::after { display: none; }
  .kd-aae-roadmap2 .kd-aae-head h2 { font-size: 30px; line-height: 1.3; }
  .kd-aae-dash-nav { display: none; }
  .kd-aae-dash-body { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .kd-aae-wrap { padding: 0 20px; }
  .kd-aae-section { padding: 56px 0; }
  .kd-aae-hero h1 { font-size: 40px; line-height: 1.2; }
  .kd-aae-hero-lead { font-size: 16px; line-height: 1.6; }
  .kd-aae-head h2 { font-size: 30px; line-height: 1.3; }
  .kd-aae-hero-grid { gap: 28px; padding-top: 100px; }
  .kd-aae-dash-header { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .kd-aae-dash-header-actions { flex-wrap: wrap; }
  .kd-aae-dash-main { padding: 12px; }
  .kd-aae-roadmap2-row { grid-template-columns: 1fr; row-gap: 24px; }
  .kd-aae-roadmap2 .kd-aae-head h2 { font-size: 30px; line-height: 1.3; }
  .kd-aae-roadmap2-topleft { width: 200px; }
  .kd-aae-whatwedo-grid { grid-template-columns: 1fr; }
  .kd-aae-section--whatwedo .kd-aae-head h2 { font-size: 30px; line-height: 1.3; }
  .kd-aae-section--func2 .kd-aae-head h2 { font-size: 30px; line-height: 1.3; }
  .kd-aae-journey-track { grid-template-columns: 1fr; }
}