/* ai-agent.css — /ai-payroll-agent (AI Payroll Agent) page-scoped layer.
   Scope: everything under .rp-aipa (the body-part wrapper), so this sheet only
   ever affects this page and never leaks into the shared components it reuses.
   Figma: BliGiNMu5qH2EStgHwk35S frame 17539:263284 "AI Payrol Agent".
   Component routing (see specs/PLAN-ai-payroll-agent-build-2026-07-30.md §1):
     hero              -> NEW (this file)
     logo strip        -> brands-bar.css (own part, AI heading)
     problem 3-cards   -> icon-cards.css + red-tile modifier here
     feature splits    -> feature-split.css (.is-rev on split 2)
     capability 6-up   -> icon-cards.css + enterprise.css (.rp-ent-features), tuned here
     4-step stepper    -> NEW variant .rp-howitworks--steps-rail in howitworks.css
     CTA band          -> cta.css (.rp-cm-cta)
     FAQ               -> faq.css (.rp-faq)
     testimonials+footer -> home-footer (shared, unchanged)
   RTL lives in ai-agent-rtl.css. */

:root { }

/* ============================================================
   HERO  (Figma 17539:263288)
   Text left, dark product window + blue blobs right (flattened PNG).
   Bg: vertical gradient transparent -> #E4EBFE at ~56%.
   ============================================================ */
.rp-aipa-hero {
  /* 2026-07-30: match the CoR / local-payroll hero — lavender top-fade over the
     first 120px, then solid #E4EBFE (was a long 56.4% percentage fade). */
  background-image: linear-gradient(rgba(228, 235, 254, 0), #E4EBFE 120px, #E4EBFE);
  overflow: hidden;
  /* 2026-07-31: the logo strip now lives INSIDE this band (Figma), so one continuous
     gradient covers hero + logos with rounded bottom corners. */
  border-radius: 0 0 56px 56px; /* 2026-07-30: match CoR hero (was 48px) */
}
.rp-aipa-hero__inner {
  max-width: 1300px; /* 2026-07-30: match CoR hero container (was 1200px) */
  margin: 0 auto;
  padding: 40px 24px 40px; /* 2026-07-30: match CoR hero top spacing (was 72px top) */
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}
.rp-aipa-hero__msg { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.rp-aipa-hero__content { display: flex; flex-direction: column; gap: 24px; }
.rp-aipa-hero__eyebrow {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 40px; padding: 8px 12px;
  font-family: Mulish, -apple-system, sans-serif; font-size: 12px; line-height: 20px;
  font-weight: 700; color: #021143; white-space: nowrap;
}
.rp-aipa-hero__eyebrow img { width: 24px; height: 24px; display: block; }
/* H1 — 54/64 (2026-07-30 correction). The earlier 64px built to 5 lines and blew
   the hero to ~840px vs Figma's 638px; Figma's 53.6px was NOT just a scaling
   artifact — at ~54px the copy breaks in 4 lines and the hero height matches.
   Two coloured spans in one <h1> (blue clause + navy clause); the trailing space
   after the blue clause is in the design and separates them. */
.rp-aipa-hero__h1 {
  font-family: Mulish, -apple-system, sans-serif;
  /* 2026-07-30: match CoR hero H1 (was 54/64, -2px). */
  font-size: 47.2px; line-height: 56px; font-weight: 700;
  letter-spacing: normal; margin: 0; color: #021143;
}
.rp-aipa-hero__h1 .rp-aipa-hero__h1-a { color: #114EF7; }
.rp-aipa-hero__h1 .rp-aipa-hero__h1-b { color: #021143; }
.rp-aipa-hero__sub {
  font-family: Mulish, -apple-system, sans-serif; font-size: 20px; line-height: 28px;
  font-weight: 400; color: #545454; margin: 0; max-width: 560px;
}
.rp-aipa-hero__cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: #114EF7; color: #fff; text-decoration: none;
  font-family: Mulish, sans-serif; font-size: 14px; line-height: 22px; font-weight: 700;
  text-transform: capitalize; padding: 17px 24px; border-radius: 4px;
  min-width: 255px; box-sizing: border-box; width: max-content;
}
.rp-aipa-hero__cta:hover { background: #0d3fd0; color: #fff; }
.rp-aipa-hero__visual { min-width: 0; justify-self: end; }
.rp-aipa-hero__visual img {
  display: block; width: 100%; max-width: 712px; height: auto; margin-left: auto;
}
@media (max-width: 991px) {
  /* 2026-07-30: match CoR hero at tablet — 40px side padding, H1 36/53 normal. */
  .rp-aipa-hero__inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 40px 56px; }
  .rp-aipa-hero__h1 { font-size: 36px; line-height: 53px; letter-spacing: normal; }
  .rp-aipa-hero__sub { font-size: 18px; line-height: 26px; }
  .rp-aipa-hero__visual { justify-self: center; }
  .rp-aipa-hero__visual img { max-width: 520px; margin: 0 auto; }
  .rp-aipa-hero__cta { width: 100%; }
}
@media (max-width: 600px) {
  /* 2026-07-30: match CoR hero at mobile — H1 36/41.4, -0.36px, 36px sides. */
  .rp-aipa-hero__inner { padding: 40px 36px 48px; }
  .rp-aipa-hero__h1 { font-size: 36px; line-height: 41.4px; letter-spacing: -0.36px; }
}

/* ============================================================
   PROBLEM  (Figma 17539:264129 / 264132)
   Centred heading + 3 icon-cards. Each card: red 64px icon tile (#FEF2F2)
   holding the red circle-X icon, body only (NO title).
   Reuses .rp-icon-cards; adds only the red tile modifier below.
   ============================================================ */
.rp-aipa-problem { padding: 80px 24px; }
.rp-aipa-problem__h {
  font-family: Mulish, -apple-system, sans-serif; font-size: 32px; line-height: 40px;
  font-weight: 700; color: #021143; text-align: center; max-width: 900px; margin: 0 auto 48px;
}
/* red-tinted 64px icon tile — no such modifier existed in the theme; mirrors the
   enterprise .rp-ent-features__icon tile pattern (rounded tile + centred glyph). */
.rp-aipa .rp-aipa-problem__icon {
  width: 64px; height: 64px; background: #FEF2F2; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center; margin: 0 0 24px;
}
.rp-aipa .rp-aipa-problem__icon img { width: 32px; height: 32px; display: block; }
@media (max-width: 991px) { .rp-aipa-problem { padding: 56px 20px; } .rp-aipa-problem__h { font-size: 28px; line-height: 36px; margin-bottom: 32px; } }

/* ============================================================
   FEATURE BLOCK LEAD-IN  (Figma 17539:264158)
   Centred H4 that introduces the three feature splits.
   NOTE: this string is NOT in the copy deck — built from the Figma-exact text,
   flagged for the deck (spec report). Mulish Bold 40/48 navy, max 844.
   ============================================================ */
.rp-aipa-featurelead { padding: 80px 24px 8px; }
.rp-aipa-featurelead__h {
  font-family: Mulish, -apple-system, sans-serif; font-size: 40px; line-height: 48px;
  font-weight: 700; color: #021143; text-align: center; max-width: 844px; margin: 0 auto;
}
@media (max-width: 991px) { .rp-aipa-featurelead { padding: 48px 20px 0; } .rp-aipa-featurelead__h { font-size: 28px; line-height: 36px; } }
/* 2026-07-30: feature split 2 (FOCUS YOUR ATTENTION) sits on a full-width light-blue
   band (Figma #F0F4FE). The 3 splits are each their own .rp-feature-split__sec so the
   band applies to the middle section only; splits 1 and 3 stay white. */
.rp-aipa .rp-feature-split__sec.rp-aipa-band { background: #F0F4FE; }

/* ============================================================
   CAPABILITY GRID (6-up)  (Figma 17539:269647)
   Reuses .rp-icon-cards.rp-ent-features (bordered 3x2). Figma diffs vs the
   enterprise instance: icon tile bg is #E4EBFE (not #EAF0FE), the glyph is a
   32px duotone SVG delivered as <img> (not inline), heading is centred with no
   eyebrow, and card titles are 18/24.
   ============================================================ */
.rp-aipa .rp-ent-features__h { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.rp-aipa .rp-ent-features__icon { background: #E4EBFE; width: 48px; height: 48px; border-radius: 12px; }
.rp-aipa .rp-ent-features__icon img { width: 32px; height: 32px; display: block; }
.rp-aipa .rp-ent-features .rp-icon-cards__title { font-size: 18px; line-height: 24px; }
/* 2026-07-30: full-width light-blue section band behind the capability grid (Figma #F0F4FE). */
.rp-aipa .rp-aipa-grid { background: #F0F4FE; }

/* ============================================================
   4-STEP STEPPER — see .rp-howitworks--steps-rail variant appended to
   howitworks.css. Nothing needed here; the variant is self-contained.
   ============================================================ */

/* ============================================================
   FAQ  (Figma 17539:269830)
   Reuses .rp-faq (JS accordion). Only Q1 is built — Q2-Q5 answers do not exist
   in the design (spec §7 item 1). No FAQPage structured data until all five exist.
   No page-specific CSS needed beyond the shared faq.css / .rp-lp-faq scope.
   ============================================================ */

/* ============================================================
   CTA band — reuses .rp-cm-cta from cta.css (enqueued by the loader). No inline
   <style> duplicate (unlike the legacy cor-cta part). Nothing needed here.
   ============================================================ */

/* ============================================================
   GREG REVIEW FIXES — 2026-07-31 (all scoped to .rp-aipa; shared components untouched)
   ============================================================ */

/* (1) Logo strip INSIDE the hero band. The brands markup now sits inside .rp-aipa-hero
   (see the hero part); neutralise its own light bg + padding so the one hero gradient
   shows through, and give it its own spacing within the band. */
.rp-aipa-hero__brands { padding: 4px 24px 56px; }
.rp-aipa-hero__brands .rp-teams-landing-page { background: transparent !important; padding: 0 !important; margin: 0 !important; }
.rp-aipa-hero__brands .new_landing_page_brands_blue_bg,
.rp-aipa-hero__brands .new-listed-brands-section { background: transparent !important; }
.rp-aipa-hero__brands .new-listed-brands-section .rp-container { padding-top: 0 !important; padding-bottom: 0 !important; }
/* 2026-07-30: brands strip = homepage style — logos only (heading removed from the
   markup), centred + wrapping with the homepage gap, at all breakpoints. */
.rp-aipa-hero__brands .new-listed-brands-sub-section {
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 16px 28px !important;
}
/* 2026-08-03: mobile brands = homepage layout. The migration base leaves this as
   display:grid on phones (wide 28px col-gap, ragged 2-row grid). Homepage renders a
   centred flex row that wraps with an 8px gap — match it (EN + AR). */
@media (max-width: 767px) {
  .rp-aipa-hero__brands .new-listed-brands-sub-section {
    display: flex !important;
    gap: 8px !important;
  }
}
/* Brands heading stays visible at ALL breakpoints (design keeps it on mobile/tablet),
   overriding the sitewide .dt-only { display:none } hide that fires at <=991. */
.rp-aipa-hero__brands .new_landing_page_brands_header.dt-only { display: block !important; }

/* (3) Feature-split eyebrows are #114EF7 on this page (Figma), not the shared grey.
   Scoped to .rp-aipa so every other page's eyebrow is unaffected. */
.rp-aipa .rp-feature-split__eyebrow { color: #114EF7; }

/* (2) Problem cards (Figma 17539:264132): white card container #F9FAFB, 1px #F3F4F6, radius 24,
   padding 33; body weight 600 / 16px / #1F2937; 3 columns, 32px gap. The shared .rp-icon-cards
   base card is transparent, so this styling is added here (scoped). Icon tile stays 64px #FEF2F2. */
.rp-aipa .rp-aipa-problem .rp-icon-cards__grid { gap: 32px; }
.rp-aipa .rp-aipa-problem .rp-icon-cards__card {
  background: #F9FAFB; border: 1px solid #F3F4F6; border-radius: 24px; padding: 33px;
}
.rp-aipa .rp-aipa-problem .rp-icon-cards__body {
  font-weight: 600; font-size: 16px; line-height: 24px; color: #1F2937;
}

/* (5) Capability 6-up: the .rp-ent-features grid has a border+radius but no fill, so on the
   #F0F4FE band it read as the band colour. Make it a single WHITE rounded container with thin
   internal dividers (Figma 17539:269647 = #fff container, #E0E3EB dividers, on the band). */
.rp-aipa .rp-aipa-grid .rp-icon-cards__grid { background: #fff; border-color: #E0E3EB; }
.rp-aipa .rp-aipa-grid .rp-icon-cards__card { border-color: #E0E3EB; }

/* Logo alignment (2026-07-31): this page reuses the STANDARD brands markup (not the
   .rp-hero-brands variant), so the logos were sized by width (stretched to ~149px) and derived
   7 different heights (36–50, a 19px spread) because the SVGs carry no intrinsic dimensions.
   Size by HEIGHT instead — 36px / width:auto — matching the sitewide 36px convention and the
   .rp-hero-brands rule. Scoped to .rp-aipa; the shared .new-listed-brands-sub-section-img on
   every other page is untouched. */
.rp-aipa .new-listed-brands-sub-section-img {
  height: 36px !important; width: auto !important; max-width: none !important; flex: 0 0 auto !important;
}