/* ==========================================================================
   rp-intelligence.css — page layer for /ai-remotepass-intelligence
   --------------------------------------------------------------------------
   Figma: RP Intelligence (18510:244849).

   This page composes the SAME components as /ai-payroll-agent — feature-split,
   icon-cards, enterprise (capability grid), cta — so all responsive behaviour
   is inherited from those sheets at the shared 991 / 767 / 600 breakpoints.
   Nothing here re-declares layout that the components already handle; this file
   only carries what the RP Intelligence design changes:

     §1  Hero — purple palette instead of the blue/lavender aipa hero
     §2  Two-button CTA row (the aipa hero has a single button)
     §3  Product-card row (Ask AI / AI Agents Hub / MCP)
     §4  Dark "Built differently" band
     §5  Security and Privacy band  (the only genuinely new component)

   Loaded last by inc/provision-ai-remotepass-intelligence.php so it wins over
   ai-agent.css. Scope: .rp-rpi (page body class) — never leaks to
   /ai-payroll-agent, which shares .rp-aipa but not .rp-rpi.
   ========================================================================== */

/* ── §1 HERO ─────────────────────────────────────────────────────────────── */

/* Figma (18510:256029): linear-gradient(180deg, #FFFFFF 0%, #F2ECF4 55%).
   The aipa hero fades to lavender #E4EBFE instead, hence the override.

   The stop is in PIXELS, not 55%, on purpose. In Figma the gradient belongs to the
   "Hero Section" frame alone — 1440 x 638 — so it finishes fading at 0.55 x 638 =
   351px. Our .rp-aipa-hero element also wraps the brands strip (18510:256072 is a
   separate sibling in Figma), so the element is ~859 tall and a 55% stop lands at
   472px: the hero stayed near-white ~120px further down than the design, which is
   also what made the white rating pills disappear into the background.
   351px reproduces the design's fade regardless of what the strip adds below. */
.rp-rpi .rp-aipa-hero {
  background-image: linear-gradient(180deg, #FFFFFF 0, #F2ECF4 351px, #F2ECF4 100%);
}

/* H1 53.6/64, tracking -2px, three spans: navy / violet / navy. */
.rp-rpi .rp-aipa-hero__h1 {
  font-size: 53.6px;
  line-height: 64px;
  letter-spacing: -2px;
}
.rp-rpi .rp-aipa-hero__h1 .rp-rpi-hero__h1-a,
.rp-rpi .rp-aipa-hero__h1 .rp-rpi-hero__h1-c { color: #021143; }
.rp-rpi .rp-aipa-hero__h1 .rp-rpi-hero__h1-b { color: #783F8E; }

.rp-rpi .rp-aipa-hero__sub { font-size: 16px; line-height: 24px; color: #545454; }

/* Figma nests the hero message three levels deep, and the gaps differ at each level:
     Hero Message  (18510:256043)  gap 64  -> [ Content, CTAs ]
       Content     (18510:256044)  gap 16  -> [ ratings row, Text Content ]
         Text Content (…:256061)   gap 24  -> [ H1, sub ]
   The aipa skeleton is a single 40/24 stack, which put the rhythm out by 24 and 8px. */
/* Figma says 64 here, but that reads far too loose against the rest of the site,
   so this one value is matched to the /local-payroll hero instead (Mo, 2026-09-11).
   There the button row is `.mt3`, whose margin-top is 2.08em — 33.28px at the
   inherited 16px — and it collapses with the subtitle's own 16px bottom margin,
   so 2.08em is the whole gap. Global on LP: no breakpoint changes it, so this
   single value covers desktop, tablet and mobile too. */
.rp-rpi .rp-aipa-hero__msg     { gap: 2.08em; }
.rp-rpi .rp-aipa-hero__content { gap: 16px; }
.rp-rpi .rp-rpi-hero__text     { display: flex; flex-direction: column; gap: 24px; }

/* Figma puts the message's left edge at x=120 in the 1440 frame. The inherited
   1300px container + 24px padding lands it at 94. 1248 + 24 gives exactly 120,
   and keeps the padding for narrow viewports. */
.rp-rpi .rp-aipa-hero__inner { max-width: 1248px; }

/* Hero visual — presented exactly like the /ai hero media, minus the play button.
   /ai's effective values (qa-fixes-global.css §Ask AI + figma-fixes-b.css):
     >=992   width 610, max-width 100%, height auto
     768-991 width 706, max-width 100%, centred
     <=767   width 100%, centred
     always  display block, height auto, border-radius 16, object-fit cover
   Nothing from /ai's video layer comes across: no .rp-askai-yt wrapper, no
   data-askai-video, no play span, no modal JS, no cursor:pointer.

   This replaces the earlier 712px right-bleed (Figma 18510:256030 places the visual
   at x 728-1440). The bleed is dropped deliberately — matching /ai was the ask. */
.rp-rpi .rp-aipa-hero__visual { justify-self: center; min-width: 0; }
.rp-rpi .rp-aipa-hero__visual img {
  display: block;
  width: 610px; max-width: 100%; height: auto;
  border-radius: 16px; object-fit: cover;
  margin: 0 auto;
}
@media (min-width: 768px) and (max-width: 991px) {
  .rp-rpi .rp-aipa-hero__visual img { width: 706px; }
}
@media (max-width: 767px) {
  .rp-rpi .rp-aipa-hero__visual img { width: 100%; }
}

/* The rating pills sit where the aipa eyebrow does. Reuses the shared .g2_tags
   component: white fill, radius 40, padding 8/12, gap 8, 12/20 bold #044D80 —
   all of which already match Figma 18510:256047. */
.rp-rpi .rp-rpi-hero__ratings {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* NOT from Figma. The shared component sets border-color to #fff, and the design
   does the same, so a white pill on the near-white top of the hero gradient has no
   edge at all — the first pill in particular reads as a floating icon and label.
   #E0E3EB is the hairline this page already uses on the product cards, the 6-up
   grid gutters and the prompt chips, so the pills now sit on the same system.
   Scoped to .rp-rpi: every other page's .g2_tags is untouched. */
.rp-rpi .rp-rpi-hero__ratings .g2_tags.g2_tags_v3 { border-color: #E0E3EB; }

/* ── §2 TWO-BUTTON CTA ROW ───────────────────────────────────────────────── */

/* 12px between the two buttons, matching /local-payroll's
   `.rp-local-payroll .new-btn-wrapper-container-flex { gap: 12px }` — also global
   there, and it is what the ≤767 rule below was already using.

   EQUAL WIDTHS, sized to the longer label. The two labels differ a lot in length
   ("Book a demo" vs "Get Started for Free"), so content-sized buttons came out
   visibly mismatched. Grid rather than flex to fix it:
     grid-auto-columns: 1fr   makes both tracks the same width
     width: max-content       resolves those tracks against the WIDEST item
                              rather than against the container
   Together those size both buttons to the longer label and no further — flex
   with `flex:1` would instead stretch them to fill the whole message column,
   and a hard min-width would just be a magic number that breaks on retitling
   or in Arabic. max-width:100% keeps it inside the column if a label grows. */
.rp-rpi .rp-rpi-hero__ctas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 12px;
}

/* Geometry and type are the site's standard hero button — .rp-ent-hero__cta from
   assets/css/components/enterprise-hero.css, the pair used on /enterprise
   ("Book A 15-Min Demo" / "See coverage"). Copied rather than shared because
   that sheet is scoped to .rp-enterprise:

     height 57, padding 15/32, radius 8, Mulish 500 at 16.25/1, no text-transform

   Replaces this page's earlier Figma-literal values (height 56, padding 16/24,
   radius 4, 700 at 14/22, capitalize, min-width 255/199), which is why the
   buttons read as a different component from the rest of the site.

   COLOUR IS NOT INHERITED: the primary keeps this page's violet #783F8E rather
   than the site's royal blue. That is deliberate — the RP Intelligence hero is
   violet-accented throughout (the H1's middle run, the product-card top edges,
   the split highlight) and a blue primary would be the odd one out. The ghost
   button stays blue-on-white, same as /enterprise.

   min-width is dropped along with the rest: /enterprise sets min-width 0 and
   lets the label size the button, so "Book a demo" no longer sits in a 255px
   box padded out with empty space. */
.rp-rpi .rp-rpi-hero__cta,
.rp-rpi .rp-rpi-hero__cta--ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 57px; padding: 15px 32px; min-width: 0; border-radius: 8px;
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 16.25px; line-height: 1; font-weight: 500;
  text-decoration: none; box-sizing: border-box; white-space: nowrap;
}
.rp-rpi .rp-rpi-hero__cta { background: #783F8E; color: #fff; }
.rp-rpi .rp-rpi-hero__cta:hover { background: #5f3172; color: #fff; }

.rp-rpi .rp-rpi-hero__cta--ghost {
  background: #fff; color: #114EF7; border: 1px solid #114EF7;
}
/* Tinted fill on hover, as /enterprise does — the old rule inverted to solid
   blue, which read as a different button appearing under the cursor. */
.rp-rpi .rp-rpi-hero__cta--ghost:hover { background: #F0F4FE; color: #114EF7; }

/* /enterprise's own mobile step: full-width, slightly shorter, smaller label.
   The grid flips to rows here, so the two buttons stack instead of sharing a
   line — and being grid tracks they stay the same width as each other. */
@media (max-width: 767px) {
  .rp-rpi .rp-rpi-hero__ctas {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    width: 100%;
    gap: 12px;
  }
  .rp-rpi .rp-rpi-hero__cta,
  .rp-rpi .rp-rpi-hero__cta--ghost {
    height: 56px; padding: 16px 4px; width: 100%;
    font-size: 0.928rem; line-height: 1.5;
  }
}

/* Hero type steps down on the same breakpoints ai-agent.css already uses, so
   the two pages break at identical widths. */
@media (max-width: 991px) {
  .rp-rpi .rp-aipa-hero__h1 { font-size: 40px; line-height: 48px; letter-spacing: -1px; }
}
@media (max-width: 767px) {
  .rp-rpi .rp-aipa-hero__h1 { font-size: 36px; line-height: 44px; letter-spacing: -0.36px; }
  .rp-rpi .rp-aipa-hero__sub { font-size: 16px; line-height: 24px; }
}

/* ── §3 PRODUCT CARDS (Ask AI / AI Agents Hub / MCP) ─────────────────────────
   Figma 18510:256311. Values below are read from that node, not estimated:
     Container  px 120, py 80, gap 24, align start
     Card       h 371, pb 32, gap 16, radius 12, 1px #E0E3EB,
                drop-shadow 0 -3px 0 #783F8E  (the violet top edge)
     Banner     h 152, radius 12, py 10, gap 6, centred; lilac #F2ECF4 under a
                white 0.5 -> 0 vertical wash (card 2 runs 0 -> 0.5)
     Icon       28 (MCP 32)   Title 18/32 bold #021143
     Body       px 32, 16/24 #545454     Link px 32, 15 bold #783F8E           */

.rp-rpi-products { background: #FFFFFF; }
.rp-rpi-products__inner {
  max-width: 1440px; margin: 0 auto; padding: 80px 120px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  /* stretch, NOT start: `start` sizes every card to its own content, so the
     three diverge as soon as the body copy differs in line count. Measured at
     1512 with the min-height floor lifted: 309 / 333 / 357 on `start`, against
     357 / 357 / 357 on `stretch`. The min-height below was masking it at wide
     viewports only — below that, and on the Arabic page where the strings run
     to different lengths, the cards came out ragged. */
  gap: 24px; align-items: stretch;
}
.rp-rpi-products__card {
  display: flex; flex-direction: column; gap: 16px;
  min-height: 371px; padding-bottom: 32px;
  background: #FFFFFF; border: 1px solid #E0E3EB; border-radius: 12px;
  /* Figma uses a drop-shadow rather than a border-top, so the violet edge follows
     the 12px corner radius instead of squaring it off. */
  filter: drop-shadow(0 -3px 0 #783F8E);
}
.rp-rpi-products__banner {
  position: relative; overflow: hidden;
  height: 152px; border-radius: 12px; padding: 10px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(90deg, #F2ECF4 0%, #F2ECF4 100%);
}
.rp-rpi-products__banner--flip {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%),
    linear-gradient(90deg, #F2ECF4 0%, #F2ECF4 100%);
}
/* Figma layers a faint grid bitmap at 40% behind the icon; reproduced as a CSS grid
   so the section carries no extra image dependency. */
.rp-rpi-products__banner::before {
  content: ""; position: absolute; inset: -40px -1px;
  background-image:
    linear-gradient(to right, rgba(2,17,67,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(2,17,67,0.045) 1px, transparent 1px);
  background-size: 96px 96px; opacity: 0.4; pointer-events: none;
}
.rp-rpi-products__icon,
.rp-rpi-products__title { position: relative; }
.rp-rpi-products__icon { display: inline-flex; }
.rp-rpi-products__icon img,
.rp-rpi-products__icon svg { width: 28px; height: 28px; display: block; }
.rp-rpi-products__icon--lg img,
.rp-rpi-products__icon--lg svg { width: 32px; height: 32px; }
.rp-rpi-products__title {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 18px; line-height: 32px; font-weight: 700; color: #021143;
  margin: 0; white-space: nowrap;
}
/* flex-basis must be auto, not 0: with basis 0 + min-height 0 the body collapses to
   zero height as soon as the card's 371px floor is lifted at <=991, and its text
   overflows behind the link. basis auto lets the card grow to fit at every width. */
.rp-rpi-products__body { flex: 1 0 auto; padding: 0 32px; }
.rp-rpi-products__body p {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 16px; line-height: 24px; color: #545454; margin: 0;
}
.rp-rpi-products__linkwrap { padding: 0 32px; }
.rp-rpi-products__link {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 15px; line-height: normal; font-weight: 700;
  color: #783F8E; text-decoration: none;
  /* Never wrap — "Find out what you can automate →" is the longest at 250px,
     and the card widths below are set so it always clears. */
  white-space: nowrap;
}
.rp-rpi-products__link:hover { color: #5f3172; text-decoration: underline; }

/* Collapse on the same widths the shared component sheets use, so this section
   breaks in step with the rest of the page. */
@media (max-width: 1199px) {
  .rp-rpi-products__inner { padding: 72px 40px; }
}
@media (max-width: 991px) {
  .rp-rpi-products__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 56px 24px; }
  /* height becomes content-driven below desktop; cards in a row still match via stretch */
  .rp-rpi-products__card { min-height: 0; height: auto; }
  /* Tablet: 24px card gutters. */
  .rp-rpi-products__body, .rp-rpi-products__linkwrap { padding: 0 24px; }
}
@media (max-width: 767px) {
  /* Mobile: 16px card gutters. */
  .rp-rpi-products__body, .rp-rpi-products__linkwrap { padding: 0 16px; }
}
@media (max-width: 600px) {
  .rp-rpi-products__inner { grid-template-columns: 1fr; padding: 48px 16px; gap: 20px; }
}

/* ── §3b FEATURE SPLITS (Ask AI / Agents Hub / MCP) ──────────────────────────
   Figma 18510:244992 / :245067 / :245190. Read from those Section roots:
     Section    1440 x 700, padding 100px 120px
                bg  1 #F2ECF4 (Assets/Violet/010) | 2 #FFFFFF | 3 #F2ECF4
     Container  max-width 1200, align center
                gap 1 64 | 2 55.99 | 3 64   (text col 636 / 644.01 / 636)
     Visual     500 x 500
     Text col   gap 16
     H2         40/48 bold #021143, violet run #783F8E on split 2
     Body       1 16/26.35 #4A5878 (pt 3.435) | 2 and 3 17/26.35 #424652 (pt 3.43 / 3.255)
     Chips      h 36.5, radius 999, px 17 py 10, 13 semibold #021143, 1px #E0E3EB,
                gap 10, 12px top padding                                            */

.rp-rpi-split { background: #F2ECF4; padding: 100px 120px; }
/* Only split 2 (Agents Hub, node 18510:245067) has a white Section root; splits 1 and 3
   both carry Assets/Violet/010. Verified against the node fills, not inferred. */
.rp-rpi-split--plain { background: #FFFFFF; }

.rp-rpi-split__inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 64px;
}
.rp-rpi-split__inner--g56 { gap: 55.99px; }
.rp-rpi-split__inner.is-rev { flex-direction: row-reverse; }

/* Figma gives all three splits a 500 x 500 visual container (18510:245012 /
   :245076 / :245192) and positions the artwork inside it, so the box is square
   regardless of how tall the export happens to be. Pinning the height keeps the
   section at Figma's 700 even when an export is not square — the Agents Hub art
   is 2000x1760, which without this collapsed that section to 640. */
.rp-rpi-split__media {
  flex: 0 0 500px; width: 500px; max-width: 500px;
  min-height: 500px;
  display: flex; align-items: center; justify-content: center;
}
.rp-rpi-split__media img { width: 100%; height: auto; display: block; }

.rp-rpi-split__txt { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rp-rpi-split__h {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px; line-height: 48px; font-weight: 700; color: #021143; margin: 0;
}
.rp-rpi-split__hl { color: #783F8E; }
.rp-rpi-split__sub {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 17px; line-height: 26.35px; font-weight: 400; color: #424652;
  margin: 0; padding-top: 3.43px;
}
/* Split 1 only: Figma sets this paragraph 16/26.35 #4A5878. */
.rp-rpi-split__sub--sm { font-size: 16px; color: #4A5878; padding-top: 3.435px; }

.rp-rpi-prompts {
  list-style: none; margin: 0; padding: 12px 0 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.rp-rpi-prompts__item {
  display: inline-flex; align-items: center;
  min-height: 36.5px; padding: 10px 17px; box-sizing: border-box;
  background: #FFFFFF; border: 1px solid #E0E3EB; border-radius: 999px;
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 13px; line-height: normal; font-weight: 600; color: #021143;
}

@media (max-width: 1199px) {
  .rp-rpi-split { padding: 80px 40px; }
  .rp-rpi-split__inner { gap: 40px; }
  .rp-rpi-split__media { flex-basis: 420px; width: 420px; min-height: 420px; }
  .rp-rpi-split__h { font-size: 34px; line-height: 42px; }
}
/* Stack at the same 991 breakpoint the rest of the page uses. Media goes first in both
   directions so the reading order stays image -> copy on narrow screens. */
@media (max-width: 991px) {
  .rp-rpi-split { padding: 64px 24px; }
  .rp-rpi-split__inner,
  .rp-rpi-split__inner.is-rev { flex-direction: column; align-items: flex-start; gap: 32px; }
  /* Stacked from here down, so the square box stops helping — let the artwork
     set its own height again rather than padding it out with dead space. */
  .rp-rpi-split__media { flex: 0 0 auto; width: 100%; max-width: 500px; align-self: center; min-height: 0; }
  .rp-rpi-split__h { font-size: 32px; line-height: 40px; }
}
@media (max-width: 600px) {
  .rp-rpi-split { padding: 48px 16px; }
  .rp-rpi-split__h { font-size: 28px; line-height: 36px; }
  .rp-rpi-split__sub { font-size: 15px; line-height: 24px; }
  .rp-rpi-prompts__item { font-size: 12px; padding: 9px 14px; }
}

/* ── §4 "BUILT DIFFERENTLY" DARK BAND ────────────────────────────────────────
   Figma 18510:245231. Read from that node:
     Section    bg #301939, padding 100px 120px
     Container  max-width 1200, gap 64, centred
     Heading    max-width 760, 40/48 bold #FFFFFF, centred
     Row        gap 24, align start, cards stretch
     Card       bg #FFF, 1px #E0E3EB, radius 12, overflow hidden, padding 1px
     Media      bg #F2ECF4, 1px bottom border #E0E3EB, min-height 287
     Body       px 28, pt 25.4, pb 30, gap 12
     H3         21/27.3 bold #021143      Text 15/24 #424652                    */

.rp-rpi-different { background: #301939; padding: 100px 120px; }
.rp-rpi-different__inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 64px;
}
.rp-rpi-different__head { max-width: 760px; width: 100%; }
.rp-rpi-different__h {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px; line-height: 48px; font-weight: 700;
  color: #FFFFFF; text-align: center; margin: 0;
}
.rp-rpi-different__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; align-items: stretch; width: 100%;
}
.rp-rpi-different__card {
  display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid #E0E3EB; border-radius: 12px;
  overflow: hidden; padding: 1px;
}
/* The exports already contain the lilac panel, so the image fills the media area
   edge to edge; the min-height and bottom border keep the three panels aligned
   even if an export's ratio drifts slightly. */
.rp-rpi-different__media {
  background: #F2ECF4; border-bottom: 1px solid #E0E3EB;
  min-height: 287px; display: flex; align-items: center; justify-content: center;
}
.rp-rpi-different__media img { width: 100%; height: auto; display: block; }
.rp-rpi-different__body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 25.4px 28px 30px;
}
.rp-rpi-different__title {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 21px; line-height: 27.3px; font-weight: 700; color: #021143; margin: 0;
}
.rp-rpi-different__text {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 15px; line-height: 24px; font-weight: 400; color: #424652; margin: 0;
}

@media (max-width: 1199px) {
  .rp-rpi-different { padding: 80px 40px; }
  .rp-rpi-different__inner { gap: 48px; }
  .rp-rpi-different__h { font-size: 34px; line-height: 42px; }
  .rp-rpi-different__media { min-height: 0; }
}
/* Same 991 / 600 steps as the rest of the page. The forced heading break is dropped
   below 991 so the two lines do not become four on a narrow column. */
@media (max-width: 991px) {
  .rp-rpi-different { padding: 64px 24px; }
  .rp-rpi-different__inner { gap: 40px; }
  .rp-rpi-different__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-rpi-different__h { font-size: 32px; line-height: 40px; }
  .rp-rpi-different__h br { display: none; }
  /* Tablet: 24px card gutters, matching the product cards. */
  .rp-rpi-different__body { padding: 25.4px 24px 30px; }
}
@media (max-width: 767px) {
  /* Mobile: 16px card gutters. */
  .rp-rpi-different__body { padding: 20px 16px 24px; }
}
@media (max-width: 600px) {
  .rp-rpi-different { padding: 48px 16px; }
  .rp-rpi-different__inner { gap: 32px; }
  .rp-rpi-different__grid { grid-template-columns: 1fr; gap: 20px; }
  .rp-rpi-different__h { font-size: 28px; line-height: 36px; }
  /* 16px gutters, same as the <=767 rule above — restated because this block
     comes later and would otherwise put the 20px back. */
  .rp-rpi-different__body { padding: 20px 16px 24px; }
  .rp-rpi-different__title { font-size: 19px; line-height: 26px; }
}

/* ── §4b "MORE FROM REMOTEPASS INTELLIGENCE" 6-UP GRID ───────────────────────
   Figma 18510:245322. The markup reuses .rp-icon-cards.rp-ent-features, but the
   shared component's own values differ from this design on every axis, so this
   block restates the Figma ones. All read from the node, none estimated:

     Section    bg #F2ECF4 (Assets/Violet/010), padding 100px 120px
                (shared sheet ships #F0F4FE and 80px 24px)
     Container  max-width 1200, column, gap 56 between heading and grid
     Heading    40/48 bold, "More from " #021143 + violet run #783F8E, centred
     Grid box   1200 x 571.78, radius 16, overflow hidden, fill #E0E3EB
                Cards sit flush to all four edges, so the grey shows ONLY as the
                1px gutters between them — no outer ring. Hence gap:1px on a
                grey grid rather than borders on the cards.
     Card       #FFFFFF, padding 43.2, column, gap 16, 399.33 x 285.39
     Icon tile  48 x 48, radius 12, bg #F2ECF4, glyph 26 (shared sheet: #E4EBFE, 32)
     Title      20/26 bold #021143   (shared sheet: 18/24)
     Body       15/23.25 #424652     (shared sheet: 16/24 #5A6378)

   Scoped to .rp-rpi-grid throughout so /ai-payroll-agent's .rp-ent-features is
   untouched.                                                                   */

.rp-rpi .rp-rpi-grid { background: #F2ECF4; }
.rp-rpi .rp-rpi-grid .rp-icon-cards__sec { padding: 100px 120px; background: transparent; }
.rp-rpi .rp-rpi-grid .rp-icon-cards__inner { max-width: 1200px; margin: 0 auto; }

.rp-rpi .rp-rpi-grid .rp-ent-features__h {
  max-width: none; margin: 0 0 56px; text-align: center;
  font-size: 40px; line-height: 48px; font-weight: 700; color: #021143;
}
.rp-rpi .rp-rpi-grid .rp-ent-features__h .hl { color: #783F8E; }

.rp-rpi .rp-rpi-grid .rp-icon-cards__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: #E0E3EB; border: 0;
  border-radius: 16px; overflow: hidden;
}

.rp-rpi .rp-rpi-grid .rp-icon-cards__card {
  background: #FFFFFF; border: 0; border-radius: 0;
  padding: 43.2px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.rp-rpi .rp-rpi-grid .rp-icon-cards__card > * { margin: 0; }

/* The six supplied SVGs already carry their own 48px lilac tile, so the icon span
   is a plain 48px box and the artwork fills it — no CSS tile behind it. */
.rp-rpi .rp-rpi-grid .rp-ent-features__icon {
  width: 48px; height: 48px; flex: 0 0 48px;
  background: transparent; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.rp-rpi .rp-rpi-grid .rp-ent-features__icon img { width: 48px; height: auto; }

.rp-rpi .rp-rpi-grid .rp-icon-cards__title {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 20px; line-height: 26px; font-weight: 700; color: #021143;
}
.rp-rpi .rp-rpi-grid .rp-icon-cards__body {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 15px; line-height: 23.25px; font-weight: 400; color: #424652;
}

@media (max-width: 1199px) {
  .rp-rpi .rp-rpi-grid .rp-icon-cards__sec { padding: 80px 40px; }
  .rp-rpi .rp-rpi-grid .rp-icon-cards__card { padding: 36px; }
}
@media (max-width: 991px) {
  .rp-rpi .rp-rpi-grid .rp-icon-cards__sec { padding: 64px 24px; }
  .rp-rpi .rp-rpi-grid .rp-icon-cards__grid { grid-template-columns: repeat(2, 1fr); }
  .rp-rpi .rp-rpi-grid .rp-icon-cards__card { padding: 32px; }
  .rp-rpi .rp-rpi-grid .rp-ent-features__h { font-size: 32px; line-height: 40px; margin-bottom: 40px; }
}
@media (max-width: 599px) {
  .rp-rpi .rp-rpi-grid .rp-icon-cards__sec { padding: 48px 16px; }
  .rp-rpi .rp-rpi-grid .rp-icon-cards__grid { grid-template-columns: 1fr; }
  .rp-rpi .rp-rpi-grid .rp-icon-cards__card { padding: 24px; }
  .rp-rpi .rp-rpi-grid .rp-ent-features__h { font-size: 28px; line-height: 36px; margin-bottom: 32px; }
}

/* ── §5 SECURITY AND PRIVACY (new) ───────────────────────────────────────────
   Figma 18510:245381. Values read from the node, not estimated:

     Section    bg #301939 (Assets/Violet/130), 1px #E4EBFE top AND bottom border,
                padding 80px 120px, content centred
     Container  max-width 1200, column, gap 40 between heading and the badge row
     Heading    40/48 bold #FFFFFF
     Row        width 1013.05, flex, gap 40, four equal flex-1 items -> 223.26 each
     Item       223.26 x 270 -> aspect-ratio 0.8269, radius 156, 1px stroke,
                padding 56px 24px, column, gap 24, centred.
                156 exceeds half the width, so both radii clamp to width/2 and the
                box renders as the tall pill in the design: semicircular caps with
                ~47px of straight side. Driving that off `aspect-ratio` rather than
                a fixed 270px height keeps the SAME pill proportion at every
                breakpoint — a fixed height made the 2-up tablet items wider than
                they are tall, which read as a different shape.
     Icon       60 x 60. The SOC 2 and GDPR SVGs contain their own coloured discs.
     Label      14 semibold #FFFFFF, centred

   STROKE — a vertical gradient, and it alternates direction down the row:
     items 1 and 3   #FFFFFF at the top   -> transparent at the bottom
     items 2 and 4   transparent at the top -> #FFFFFF at the bottom
   Figma's codegen cannot express a gradient stroke, so it flattens each one to its
   first stop — which is exactly why the node reports a solid #FFFFFF on 1 and 3 and
   rgba(255,255,255,0) on 2 and 4. Those two "contradictory" values are the two ends
   of the same gradient, not an inconsistency in the file.

   CSS has no gradient border property, so this is the two-layer background trick:
   a transparent 1px border, an opaque band-coloured layer clipped to padding-box,
   and the gradient clipped to border-box behind it. It respects border-radius, so
   the gradient follows the pill. The inner layer must stay in sync with the band
   colour (#301939) — if the band changes, change it in both places.

   Breakpoints mirror the shared component sheets: 4-up, then 2-up at 991, staying
   2-up at 600 — the band never drops to a single column. */

.rp-rpi-security {
  background: #301939;
  border-top: 1px solid #E4EBFE;
  border-bottom: 1px solid #E4EBFE;
  padding: 80px 120px;
}
.rp-rpi-security__inner {
  max-width: 1200px; margin: 0 auto; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.rp-rpi-security__h {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px; line-height: 48px; font-weight: 700;
  color: #FFFFFF; text-align: center; margin: 0;
}
.rp-rpi-security__grid {
  list-style: none; margin: 0; padding: 0;
  width: 100%; max-width: 1013.05px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px; align-items: stretch;
}
.rp-rpi-security__item {
  aspect-ratio: 223.26 / 270; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 156px;
  background-image:
    linear-gradient(#301939, #301939),
    linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  padding: 56px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; text-align: center;
}
/* Items 2 and 4 run the gradient the other way. */
.rp-rpi-security__item:nth-child(even) {
  background-image:
    linear-gradient(#301939, #301939),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}
.rp-rpi-security__badge {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.rp-rpi-security__badge img { width: 60px; height: 60px; display: block; }
.rp-rpi-security__label {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 14px; line-height: normal; font-weight: 600;
  color: #FFFFFF;
}

/* The 2-up rows cap the grid so an item never grows past ~250 wide — the pill would
   otherwise get large enough that its own padding, not the aspect ratio, sets the
   height, and the shape would drift. */
@media (max-width: 1199px) {
  .rp-rpi-security { padding: 80px 40px; }
  .rp-rpi-security__grid { gap: 24px; }
  .rp-rpi-security__item { padding: 48px 16px; }
}
@media (max-width: 991px) {
  .rp-rpi-security { padding: 64px 24px; }
  .rp-rpi-security__h { font-size: 32px; line-height: 40px; }
  .rp-rpi-security__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 528px; }
  .rp-rpi-security__item { padding: 40px 20px; gap: 20px; }
}
@media (max-width: 599px) {
  .rp-rpi-security { padding: 48px 16px; }
  .rp-rpi-security__h { font-size: 28px; line-height: 36px; }
  .rp-rpi-security__grid { gap: 16px; max-width: 400px; }
  .rp-rpi-security__item { padding: 28px 14px; gap: 14px; }
  .rp-rpi-security__badge img { width: 44px; height: 44px; }
  .rp-rpi-security__label { font-size: 12px; }
}

/* ── §5b TABLET / MOBILE SWIPE ROWS ──────────────────────────────────────────
   Not from Figma — a space-saving treatment for <= 991 only. Three rows opt in
   with data-rpi-carousel in the markup:
     .rp-rpi-products__inner    3 product cards
     .rp-rpi-different__grid    3 "Built differently" cards
     .rp-rpi-security__grid     4 security pills

   Free mode: no autoplay, no infinite loop, no snapping. The scrolling is pure
   CSS — the grid simply becomes a horizontally scrollable strip. Above 991 none
   of this applies and the grids are exactly as they were.

   Each strip bleeds to the viewport edges and pays the section gutter back as
   its own inline padding, so the next card peeks in from the edge.

   The dots and prev/next pair are injected by assets/js/rpi-carousel.js as a
   sibling right after each strip. Their values are the homepage carousel's
   (home-v2.css .rp-hv-carousel__dot / __btn) restated here, because that sheet
   is scoped under body.rp-home-v2 and cannot be reused off the homepage:
     dots  flex, gap 8, centred, 28 above
     dot   8 x 8, radius 999, #C9D2E6; active 26 wide, #114EF7
     nav   flex, gap 16, centred, 18 above
     btn   44 x 44, radius 999, 1px #D3DAE8, #FFFFFF, navy caret
   The only departure is the security band, which is dark plum — solid white
   buttons would glare there, so it gets a translucent outline variant. */

@media (max-width: 991px) {
  .rp-rpi [data-rpi-carousel] {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    align-items: stretch;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .rp-rpi [data-rpi-carousel]::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .rp-rpi [data-rpi-carousel] > * { flex: 0 0 auto; }

  /* The product row IS the section's padded inner, so it drops its own gutter
     and re-adds it inside the strip. */
  .rp-rpi .rp-rpi-products__inner[data-rpi-carousel] {
    padding-left: 24px; padding-right: 24px;
    gap: 16px;
  }
  .rp-rpi .rp-rpi-products__inner[data-rpi-carousel] > * { width: 300px; }

  /* These two sit inside their own __inner, so the strip bleeds out of that
     inner's padding and pays it back as its own. */
  .rp-rpi .rp-rpi-different__grid[data-rpi-carousel],
  .rp-rpi .rp-rpi-security__grid[data-rpi-carousel] {
    gap: 16px;
    margin-left: -24px; margin-right: -24px;
    padding-left: 24px; padding-right: 24px;
  }
  .rp-rpi .rp-rpi-different__grid[data-rpi-carousel] > * { width: 300px; }
  .rp-rpi .rp-rpi-security__grid[data-rpi-carousel] > * { width: 224px; }
}

@media (max-width: 599px) {
  .rp-rpi .rp-rpi-products__inner[data-rpi-carousel] { padding-left: 16px; padding-right: 16px; gap: 12px; }
  /* 292, not 280: with the 16px mobile gutters the card gives 260px of content
     width, and the longest link ("Find out what you can automate →") measures
     250px at 15/700 Mulish. 280 left it 2px short and it wrapped. */
  .rp-rpi .rp-rpi-products__inner[data-rpi-carousel] > *,
  .rp-rpi .rp-rpi-different__grid[data-rpi-carousel] > * { width: 292px; }
  .rp-rpi .rp-rpi-different__grid[data-rpi-carousel],
  .rp-rpi .rp-rpi-security__grid[data-rpi-carousel] {
    gap: 12px;
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
  }
  .rp-rpi .rp-rpi-security__grid[data-rpi-carousel] > * { width: 196px; }
}

/* ---- injected chrome: pagination dots + prev/next ---- */
.rp-rpi .rp-rpi-car__ui { display: none; }

@media (max-width: 991px) {
  .rp-rpi .rp-rpi-car__ui { display: block; }

  .rp-rpi .rp-rpi-car__dots {
    display: flex; gap: 8px; justify-content: center; align-items: center; margin: 28px 0 0;
  }
  .rp-rpi .rp-rpi-car__dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
    background: #C9D2E6; cursor: pointer; appearance: none;
    transition: width .2s, background .2s;
  }
  .rp-rpi .rp-rpi-car__dot.is-active { width: 26px; background: #114EF7; }

  .rp-rpi .rp-rpi-car__nav { display: flex; gap: 16px; justify-content: center; margin: 18px 0 0; }
  .rp-rpi .rp-rpi-car__btn {
    width: 44px; height: 44px; padding: 0; border-radius: 999px;
    border: 1px solid #D3DAE8; background: #FFFFFF; color: #021143;
    display: grid; place-items: center; cursor: pointer; appearance: none;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
  }
  .rp-rpi .rp-rpi-car__btn:hover:not(:disabled) { border-color: #114EF7; color: #114EF7; }
  /* Nothing wraps, so the ends are real dead stops rather than a no-op click. */
  .rp-rpi .rp-rpi-car__btn:disabled { opacity: .4; cursor: default; }

  /* Dark plum band — outline buttons and light dots instead of white-on-plum. */
  .rp-rpi .rp-rpi-security .rp-rpi-car__dot { background: rgba(255, 255, 255, 0.35); }
  .rp-rpi .rp-rpi-security .rp-rpi-car__dot.is-active { background: #FFFFFF; }
  .rp-rpi .rp-rpi-security .rp-rpi-car__btn {
    background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #FFFFFF;
  }
  .rp-rpi .rp-rpi-security .rp-rpi-car__btn:hover:not(:disabled) {
    border-color: #FFFFFF; color: #FFFFFF; background: rgba(255, 255, 255, 0.08);
  }

  /* The product strip IS the section's padded inner, so its bottom padding would
     otherwise stack on top of the chrome's own 28px. */
  .rp-rpi .rp-rpi-products__inner[data-rpi-carousel] { padding-bottom: 24px; }
  .rp-rpi .rp-rpi-products .rp-rpi-car__ui { padding-bottom: 40px; }
}

/* ── §6 CLOSING CTA BAND ─────────────────────────────────────────────────────
   Figma 18510:245405. Reuses .rp-cm-cta's outer section and blue card, but every
   value below is this design's, read from the node:

     Section    bg #FFFFFF, padding 80px 48px
     Card       bg #114EF7, max-width 1344, radius 24, padding 80px 72px, clipped
     Orbs       rgba(255,255,255,0.06)
                  a  520 sq, radius 260, right -140, top -180
                  b  460 sq, radius 230, right  60, bottom -259.15
     Row        flex, gap 56, align centre
     Mark       144 x 144 (icon-white.svg, supplied export)
     Copy col   flex-1, gap 15.42
       H2       600 wide, 42/48.72 bold #FFFFFF, letter-spacing -0.42
       Sub      520 wide, 17/26.35 rgba(255,255,255,0.8)
     Actions    gap 16, centred
       Button   #FFFFFF, radius 8, padding 16px 56px, 16 bold #021143
       Link     15 bold #FFFFFF, trailing arrow
       Note     11 bold rgba(255,255,255,0.55), uppercase, tracking 1.6

   The earlier build had the mark stacked above the copy at 56px and a background
   SVG for the decoration; both are replaced here. */

.rp-rpi-cta { background: #FFFFFF; padding: 80px 48px; }
.rp-rpi-cta .rp-cm-cta__card {
  position: relative; overflow: hidden;
  max-width: 1344px; width: 100%; margin: 0 auto;
  background: #114EF7; border-radius: 24px;
  padding: 80px 72px;
  display: flex; align-items: center; gap: 56px;
  background-image: none;
  /* cta.css centres this card below its own breakpoint; this design does not.
     `start`, NOT `left`: on AR the card is inside an RTL document, and a physical
     `left` made the heading and the paragraph hug the left edge of their own
     boxes — which are 600 and 520 wide, so their edges sat 80px apart and neither
     lined up with the right edge they actually start from. `start` resolves to
     left in EN and right in AR, so both blocks share one edge in both languages. */
  text-align: start;
}

.rp-rpi-cta__orb {
  position: absolute; display: block; pointer-events: none;
  background: rgba(255, 255, 255, 0.06); border-radius: 50%;
}
.rp-rpi-cta__orb--a { width: 520px; height: 520px; right: -140px; top: -180px; }
.rp-rpi-cta__orb--b { width: 460px; height: 460px; right: 60px; bottom: -259.15px; }

.rp-rpi-cta__mark { position: relative; flex: 0 0 144px; display: block; }
.rp-rpi-cta__mark img { width: 144px; height: 144px; display: block; }

.rp-rpi-cta__body {
  position: relative; flex: 1 0 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 15.42px;
}
.rp-rpi-cta .rp-cm-cta__title {
  max-width: 600px; margin: 0;
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 42px; line-height: 48.72px; font-weight: 700;
  letter-spacing: -0.42px; color: #FFFFFF;
}
.rp-rpi-cta .rp-cm-cta__sub {
  max-width: 520px; margin: 0;
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 17px; line-height: 26.35px; font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}

.rp-rpi-cta__actions {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.rp-rpi-cta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #021143; text-decoration: none;
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 16px; line-height: normal; font-weight: 700;
  padding: 16px 56px; border-radius: 8px; white-space: nowrap;
}
.rp-rpi-cta__btn:hover { background: #F0F4FE; color: #021143; }
.rp-rpi-cta__link {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 15px; line-height: normal; font-weight: 700;
  color: #FFFFFF; text-decoration: none; white-space: nowrap;
}
.rp-rpi-cta__link:hover { color: #FFFFFF; text-decoration: underline; }
.rp-rpi-cta__note {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 11px; line-height: normal; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); margin: 0; white-space: nowrap;
}

@media (max-width: 1199px) {
  .rp-rpi-cta { padding: 80px 40px; }
  .rp-rpi-cta .rp-cm-cta__card { padding: 64px 48px; gap: 40px; }
  .rp-rpi-cta__mark { flex-basis: 104px; }
  .rp-rpi-cta__mark img { width: 104px; height: 104px; }
  .rp-rpi-cta .rp-cm-cta__title { font-size: 34px; line-height: 42px; }
}
/* Below desktop the card stacks, and once it stacks everything centres — mark,
   copy and the action stack. (Desktop keeps text-align:start from the base rule,
   which is there because cta.css centres its own card at its breakpoint.) */
@media (max-width: 991px) {
  .rp-rpi-cta { padding: 64px 24px; }
  .rp-rpi-cta .rp-cm-cta__card {
    flex-direction: column; align-items: center; gap: 32px; padding: 56px 40px;
    text-align: center;
  }
  .rp-rpi-cta__mark { flex-basis: auto; }
  .rp-rpi-cta__mark img { width: 88px; height: 88px; }
  .rp-rpi-cta__body { flex: 0 0 auto; width: 100%; align-items: center; }
  .rp-rpi-cta .rp-cm-cta__title {
    font-size: 32px; line-height: 40px; max-width: none; margin-left: auto; margin-right: auto;
  }
  .rp-rpi-cta .rp-cm-cta__sub { max-width: none; margin-left: auto; margin-right: auto; }
  .rp-rpi-cta__actions { align-items: center; width: 100%; }
}
@media (max-width: 599px) {
  .rp-rpi-cta { padding: 48px 16px; }
  .rp-rpi-cta .rp-cm-cta__card { padding: 40px 24px; gap: 24px; }
  .rp-rpi-cta__mark img { width: 72px; height: 72px; }
  .rp-rpi-cta .rp-cm-cta__title { font-size: 28px; line-height: 36px; }
  .rp-rpi-cta .rp-cm-cta__sub { font-size: 16px; line-height: 25px; }
  /* Still centred — the button just goes full-width here, per the site's mobile
     convention, and its label plus the link and note are centred inside it. */
  .rp-rpi-cta__actions { align-items: stretch; }
  .rp-rpi-cta__btn { width: 100%; padding: 16px 24px; }
  .rp-rpi-cta__link, .rp-rpi-cta__note { text-align: center; white-space: normal; }
}