/* =========================================================================
   Home v2 — scoped styles. EVERYTHING under body.rp-home-v2 so this sheet
   cannot affect the live homepage or any other page. Prefix: .rp-hv-*
   Figma: Homepage-design (xxZ29ruDX8ctEEmWDhsA88). Tokens from Figma variables.
   ========================================================================= */
body.rp-home-v2 {
  --hv-blue: #114EF7;      /* Primary/100 */
  --hv-navy: #021143;      /* Primary/130 */
  --hv-blue-10: #F0F4FE;   /* Primary/20  */
  --hv-ink: #14151A;
  --hv-text-80: #545454;   /* Text/80 */
  --hv-text-60: #7E7E7E;   /* Text/60 */
  --hv-white: #FFFFFF;
  --hv-radius: 8px;
  --hv-font: "Mulish", -apple-system, "Segoe UI", sans-serif;
}

/* The sitewide `html,body{overflow-x:hidden}` safety net (qa-fixes-global) makes
   body a scroll container, which breaks position:sticky for the platform sub-nav.
   On home-v2 ONLY, swap to overflow-x:clip — it prevents horizontal scroll WITHOUT
   establishing a scroll container, so sticky works. Scoped via :has() so no other
   page is affected. */
html:has(body.rp-home-v2),
body.rp-home-v2 { overflow-x: clip; }

/* ===== HERO (Figma 69:47954) ============================================= */
body.rp-home-v2 .rp-hv-hero {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #F5F8FF 45%, #EAF0FE 100%);
  padding: 56px 24px 0;
  overflow: hidden;
  text-align: center;
}
body.rp-home-v2 .rp-hv-hero__inner {
  max-width: 1300px;
  margin: 0 auto;
}

/* rating pill */
body.rp-home-v2 .rp-hv-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
}
body.rp-home-v2 .rp-hv-hero__g2 { width: 20px; height: 20px; display: block; }
body.rp-home-v2 .rp-hv-hero__stars { display: block; height: 18px; width: auto; }
body.rp-home-v2 .rp-hv-hero__ratingtxt {
  font-family: var(--hv-font);
  font-size: 14px; font-weight: 600; color: var(--hv-navy);
}

/* H1 */
body.rp-home-v2 .rp-hv-hero__h1 {
  font-family: var(--hv-font);
  font-weight: 700;
  font-size: clamp(32px, 3.9vw, 53.6px);
  line-height: 1.19;
  letter-spacing: -0.037em;
  color: var(--hv-navy);
  margin: 0 auto 20px;
  max-width: 950px;
}
@media (max-width: 600px) { body.rp-home-v2 .rp-hv-hero__br { display: none; } }
body.rp-home-v2 .rp-hv-hero__accent { color: var(--hv-blue); }

/* subhead */
body.rp-home-v2 .rp-hv-hero__sub {
  font-family: var(--hv-font);
  font-size: 18px; line-height: 1.5; font-weight: 400;
  color: var(--hv-text-80);
  max-width: 750px;
  margin: 0 auto;
}

/* CTAs */
body.rp-home-v2 .rp-hv-hero__cta {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; margin: 32px 0 0;
}
body.rp-home-v2 .rp-hv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px;
  border-radius: var(--hv-radius);
  font-family: var(--hv-font); font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
body.rp-home-v2 .rp-hv-btn--primary { background: var(--hv-blue); color: #fff; border: 1px solid var(--hv-blue); }
body.rp-home-v2 .rp-hv-btn--primary:hover { background: #0d3fd0; border-color: #0d3fd0; }
body.rp-home-v2 .rp-hv-btn--ghost { background: #fff; color: var(--hv-navy); border: 1px solid #D8DEEA; }
body.rp-home-v2 .rp-hv-btn--ghost:hover { border-color: var(--hv-navy); }

/* hero visual (composite dashboard + phone + card) */
body.rp-home-v2 .rp-hv-hero__visual {
  margin: 48px auto 0;
  max-width: 1300px;
}
body.rp-home-v2 .rp-hv-hero__visual img {
  display: block; width: 100%; height: auto;
}

/* ---- Tablet (Figma 176:5013) ---- */
@media (max-width: 991px) {
  body.rp-home-v2 .rp-hv-hero { padding-top: 48px; }
  body.rp-home-v2 .rp-hv-hero__sub { font-size: 17px; }
  body.rp-home-v2 .rp-hv-hero__visual { margin-top: 40px; }
}

/* ---- Mobile (Figma 176:15078) ---- */
@media (max-width: 600px) {
  body.rp-home-v2 .rp-hv-hero { padding: 32px 20px 0; }
  body.rp-home-v2 .rp-hv-hero__h1 { font-size: 32px; line-height: 1.12; }
  body.rp-home-v2 .rp-hv-hero__sub { font-size: 16px; }
  body.rp-home-v2 .rp-hv-hero__cta { flex-direction: row; flex-wrap: nowrap; gap: 12px; }
  body.rp-home-v2 .rp-hv-btn { width: 100%; max-width: 320px; }
  /* hero CTAs stay side by side on mobile — never stack or wrap to a new line */
  body.rp-home-v2 .rp-hv-hero__cta .rp-hv-btn { width: auto; max-width: none; flex: 1 1 0; min-width: 0; padding: 0 16px; }
  body.rp-home-v2 .rp-hv-hero__visual { margin-top: 32px; }
}

/* ===== shared helpers ===================================================== */
body.rp-home-v2 .rp-hv-container { max-width: 1300px; margin: 0 auto; padding: 0 24px; }
body.rp-home-v2 .rp-hv-sec-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
body.rp-home-v2 .rp-hv-h2 { font-family: var(--hv-font); font-weight: 700; font-size: clamp(28px,3.2vw,40px); line-height: 1.2; letter-spacing: 0; color: var(--hv-navy); margin: 0 0 16px; }
body.rp-home-v2 .rp-hv-accent { color: var(--hv-blue); }
body.rp-home-v2 .rp-hv-sec-sub { font-family: var(--hv-font); font-size: 18px; line-height: 1.5; color: var(--hv-text-80); margin: 0; }
/* placeholders (removed once real assets are dropped) */
body.rp-home-v2 .rp-hv-ph { background: #EEF2FB; border: 1px dashed #C3CEE8; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #8A97B5; font: 500 13px/1.4 var(--hv-font); text-align: center; padding: 8px; }
body.rp-home-v2 .rp-hv-ph--onblue { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); color: #fff; }
body.rp-home-v2 .rp-hv-ph--ondark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: #c9d3ee; }
body.rp-home-v2 .rp-hv-ph-inline { display: inline-flex; align-items: center; justify-content: center; color: #9aa7c4; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
body.rp-home-v2 .rp-hv-ph-ic { display: inline-block; width: 28px; height: 28px; border-radius: 8px; background: #E3EAFB; border: 1px dashed #C3CEE8; }

/* ===== TRUST bar ========================================================= */
body.rp-home-v2 .rp-hv-trust { padding: 40px 0; text-align: center; overflow: hidden; background: #FAFBFF; }
body.rp-home-v2 .rp-hv-trust__eyebrow { font-family: var(--hv-font); font-size: 16px; color: var(--hv-text-60); margin: 0 0 24px; }
body.rp-home-v2 .rp-hv-trust__eyebrow strong { color: var(--hv-blue); font-weight: 700; }
body.rp-home-v2 .rp-hv-trust__marquee { position: relative; width: 100%; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
body.rp-home-v2 .rp-hv-trust__track { display: flex; align-items: center; width: max-content; animation: rp-hv-marquee 28s linear infinite; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
body.rp-home-v2 .rp-hv-trust__marquee:hover .rp-hv-trust__track { animation-play-state: paused; }
/* uniform light periwinkle-blue tint (matches Figma trust row) — recolors any
   multicolor logo to a single soft blue. */
body.rp-home-v2 .rp-hv-trust__logo { height: 28px; width: auto; max-width: 130px; object-fit: contain; display: block; flex: 0 0 auto; margin: 0 48px; filter: brightness(0) saturate(100%) invert(80%) sepia(16%) saturate(900%) hue-rotate(196deg) brightness(97%) contrast(90%); }
body.rp-home-v2 .rp-hv-trust__track { align-items: center; }
body.rp-home-v2 .rp-hv-trust__backed { font-family: var(--hv-font); font-size: 14px; color: var(--hv-text-60); margin: 24px 0 0; }
/* 3 copies in the track → translate exactly one set (-33.3333%) for a seamless,
   gap-free loop that always fills the viewport. */
@keyframes rp-hv-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-33.3333%,0,0); } }
@media (prefers-reduced-motion: reduce) { body.rp-home-v2 .rp-hv-trust__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }

/* ===== PRODUCT grid ====================================================== */
body.rp-home-v2 .rp-hv-products { padding: 72px 0; }
body.rp-home-v2 .rp-hv-products__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
body.rp-home-v2 .rp-hv-pcard { display: flex; flex-direction: column; border-radius: 20px; padding: 0; overflow: hidden; text-decoration: none; min-height: 323px; transition: transform .15s, box-shadow .15s; }
body.rp-home-v2 .rp-hv-pcard:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(2,17,67,.12); }
body.rp-home-v2 .rp-hv-pcard__viz { height: 188px; margin: 24px 0 0; }
body.rp-home-v2 .rp-hv-pcard__title { font-family: var(--hv-font); font-weight: 700; font-size: 24px; margin: 24px 0 8px; padding: 0 24px; }
body.rp-home-v2 .rp-hv-pcard__desc { font-family: var(--hv-font); font-size: 15px; line-height: 1.5; margin: 0; padding: 0 24px 24px; }
body.rp-home-v2 .rp-hv-pcard--light { background: #F4F6FB; }
body.rp-home-v2 .rp-hv-pcard--blue10 { background: #E8EEFF; }
body.rp-home-v2 .rp-hv-pcard--light .rp-hv-pcard__title, body.rp-home-v2 .rp-hv-pcard--blue10 .rp-hv-pcard__title { color: var(--hv-navy); }
body.rp-home-v2 .rp-hv-pcard--light .rp-hv-pcard__desc, body.rp-home-v2 .rp-hv-pcard--blue10 .rp-hv-pcard__desc { color: var(--hv-text-80); }
body.rp-home-v2 .rp-hv-pcard--blue { background: var(--hv-blue); }
body.rp-home-v2 .rp-hv-pcard--blue .rp-hv-pcard__title { color: #fff; }
body.rp-home-v2 .rp-hv-pcard--blue .rp-hv-pcard__desc { color: rgba(255,255,255,.9); }
body.rp-home-v2 .rp-hv-pcard--dark { background: #0A0F2C; }
body.rp-home-v2 .rp-hv-pcard--dark .rp-hv-pcard__title { color: #fff; }
body.rp-home-v2 .rp-hv-pcard--dark .rp-hv-pcard__desc { color: #fff; }
@media (max-width: 991px) {
  body.rp-home-v2 .rp-hv-products__grid { grid-template-columns: repeat(2,1fr); }
  /* show the full illustration (no cover-crop) on tablet/mobile */
  body.rp-home-v2 .rp-hv-pcard__viz { height: auto; }
  body.rp-home-v2 .rp-hv-pcard__viz img { height: auto; object-fit: contain; }
}
@media (max-width: 600px) { body.rp-home-v2 .rp-hv-products { padding: 48px 0; } body.rp-home-v2 .rp-hv-products__grid { grid-template-columns: 1fr; } body.rp-home-v2 .rp-hv-pcard { min-height: 0; } }

/* ===== STATS band ======================================================== */
body.rp-home-v2 .rp-hv-stats { padding: 24px 0 56px; }
body.rp-home-v2 .rp-hv-stats__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 36px 24px; }
body.rp-home-v2 .rp-hv-stat { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
body.rp-home-v2 .rp-hv-stat__top { display: inline-flex; align-items: center; gap: 8px; }
body.rp-home-v2 .rp-hv-stat__num { font-family: var(--hv-font); font-weight: 700; font-size: 32px; line-height: 1; }
body.rp-home-v2 .rp-hv-stat__label { font-family: var(--hv-font); font-size: 15px; color: var(--hv-text-80); }
/* below tablet (mobile): wrap 2 per row, centered */
@media (max-width: 600px) { body.rp-home-v2 .rp-hv-stats__row { justify-content: space-around; gap: 32px; } body.rp-home-v2 .rp-hv-stat { flex: 0 0 42%; } }

/* ===== eyebrow (shared) ================================================== */
body.rp-home-v2 .rp-hv-eyebrow { display: block; font-family: var(--hv-font); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: capitalize; color: var(--hv-blue); margin: 0 0 12px; }
body.rp-home-v2 .rp-hv-eyebrow--sm { margin-bottom: 8px; }

/* ===== THE PLATFORM (sticky scroll-spy) ================================== */
body.rp-home-v2 .rp-hv-platform { padding: 72px 0; }

/* Platform section CTA (2026-09-11, Mo). Values copied from the reference
   button, #rpg2-compare .rpg2-btn ("Book A Free Demo" on the G2 comparison
   block): display:block + width:max-content + auto side margins is what
   centres it — a plain text-align:center would not, because the anchor is
   block-level here so it would fill the row. */
body.rp-home-v2 .rp-hv-platform__cta {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 48px auto 0;
  background: #114ef7;
  color: #fff;
  font-family: var(--hv-font);
  /* Type and geometry match the site's own button component, .rp-hv-btn
     (16/700, 48 tall, radius 8) — measured off .rp-hv-btn--primary and the
     .rp-hv-btn--ghost "Browse all stories" button. It was 15/600 before, which
     is what made it read small next to them.
     height + line-height rather than vertical padding: the anchor has to stay
     display:block for `margin: … auto` to centre it, and inline-flex centring
     would break that. */
  height: 48px;
  line-height: 48px;
  padding: 0 28px;
  font-weight: 700;
  font-size: 16px;
  /* Match the FOOTPRINT of the .rp-hv-btn--ghost "Browse all stories" button,
     measured at 191 x 48. Without the floor this button sizes to its own label
     and comes out at 159 (EN) / 185 (AR), which read small beside it.
     min-width rather than a fixed width so a longer label can still grow. */
  min-width: 191px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: background .15s ease;
}
body.rp-home-v2 .rp-hv-platform__cta:hover { background: #0d3fd0; color: #fff; }
body.rp-home-v2 .rp-hv-platform__nav { position: sticky; top: 88px; z-index: 20; display: flex; justify-content: center; gap: 8px; padding: 8px; margin: 0 auto 40px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border: 1px solid #E6EBF5; border-radius: 999px; width: max-content; max-width: 100%; }
body.rp-home-v2 .rp-hv-ptab { font-family: var(--hv-font); font-size: 15px; font-weight: 700; color: var(--hv-text-80); text-decoration: none; padding: 10px 22px; border-radius: 999px; transition: background .15s, color .15s; white-space: nowrap; }
body.rp-home-v2 .rp-hv-ptab:hover { color: var(--hv-navy); }
body.rp-home-v2 .rp-hv-ptab.is-active { background: var(--hv-blue); color: #fff; }
body.rp-home-v2 .rp-hv-ppanel { scroll-margin-top: 150px; padding: 64px 0; }
body.rp-home-v2 .rp-hv-ppanel__h { font-family: var(--hv-font); font-weight: 700; font-size: clamp(26px,2.6vw,34px); line-height: 1.2; letter-spacing: 0; color: var(--hv-navy); margin: 0 0 14px; max-width: 760px; }
body.rp-home-v2 .rp-hv-ppanel__sub { font-family: var(--hv-font); font-size: 17px; line-height: 1.55; color: var(--hv-text-80); margin: 0 0 32px; max-width: 720px; }
/* Employ / Manage / Control panel headers are centered (Pay uses the split layout,
   whose eyebrow/heading/sub live inside .rp-hv-ppanel__col so they stay left). */
body.rp-home-v2 .rp-hv-ppanel > .rp-hv-eyebrow--sm { text-align: center; }
body.rp-home-v2 .rp-hv-ppanel > .rp-hv-ppanel__h,
body.rp-home-v2 .rp-hv-ppanel > .rp-hv-ppanel__sub { margin-left: auto; margin-right: auto; text-align: center; }

/* two-tile rows (Employ, Control) */
body.rp-home-v2 .rp-hv-ppanel__two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
/* Equal-height tiles within a two-up row (grid stretch is unreliable on the flex
   quote figure, so pin the tiles to the row track height). */
body.rp-home-v2 .rp-hv-ppanel__two > .rp-hv-tile { height: 100%; }
body.rp-home-v2 .rp-hv-tile { border-radius: 20px; padding: 28px; overflow: hidden; }
body.rp-home-v2 .rp-hv-tile__viz { min-height: auto; margin: 0 0 24px; border-radius: 12px; }
body.rp-home-v2 .rp-hv-tile__h { font-family: var(--hv-font); font-weight: 700; font-size: 22px; margin: 0 0 8px; }
body.rp-home-v2 .rp-hv-tile__p { font-family: var(--hv-font); font-size: 15px; line-height: 1.5; margin: 0; }
body.rp-home-v2 .rp-hv-tile--navy { background: #0A0F2C; }
body.rp-home-v2 .rp-hv-tile--navy .rp-hv-tile__h { color: #fff; } body.rp-home-v2 .rp-hv-tile--navy .rp-hv-tile__p { color: #fff; }
body.rp-home-v2 .rp-hv-tile--blue { background: var(--hv-blue); }
body.rp-home-v2 .rp-hv-tile--blue .rp-hv-tile__h { color: #fff; } body.rp-home-v2 .rp-hv-tile--blue .rp-hv-tile__p { color: rgba(255,255,255,.9); }
body.rp-home-v2 .rp-hv-tile--photo { background: #F4F6FB; } body.rp-home-v2 .rp-hv-tile--photo .rp-hv-tile__h { color: var(--hv-navy); } body.rp-home-v2 .rp-hv-tile--photo .rp-hv-tile__p { color: var(--hv-text-80); }
body.rp-home-v2 .rp-hv-tile--quote { background: linear-gradient(135deg,#1B3A9C,#0A0F2C); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; }
body.rp-home-v2 .rp-hv-tile__logo { align-self: flex-start; margin: 0 0 auto; height: 24px; width: auto; display: block; }
body.rp-home-v2 .rp-hv-tile--quote blockquote { font-family: var(--hv-font); font-size: 20px; line-height: 1.4; font-weight: 600; margin: 0 0 16px; }
body.rp-home-v2 .rp-hv-tile--quote figcaption { display: flex; flex-direction: column; font-size: 14px; } body.rp-home-v2 .rp-hv-tile--quote figcaption strong { font-size: 16px; }

/* Pay split */
/* PAY — full-bleed navy section (Figma 28:39905, Primary/130 ground). The panel
   breaks out of the container to 100vw, then re-insets content to container width. */
body.rp-home-v2 #hv-pay { width: 100vw; margin-left: calc(50% - 50vw); background: #E9EEFB; padding: 64px max(24px, calc(50vw - 626px)); }
body.rp-home-v2 .rp-hv-ppanel__split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
body.rp-home-v2 #hv-pay .rp-hv-eyebrow { color: #114EF7; }
body.rp-home-v2 #hv-pay .rp-hv-ppanel__h { color: var(--hv-navy); }
body.rp-home-v2 #hv-pay .rp-hv-ppanel__h .rp-hv-accent { color: #F4C752; }
body.rp-home-v2 #hv-pay .rp-hv-ppanel__sub { color: var(--hv-text-80); }
/* light-blue pill button: Primary/20 bg, Primary/100 text */
body.rp-home-v2 #hv-pay .rp-hv-btn--ghost { background: #F0F4FE; border-color: transparent; color: #114EF7; }
/* card visual sits in a subtle raised panel on the navy */
body.rp-home-v2 .rp-hv-ppanel__viz { background: transparent; border: 0; border-radius: 0; padding: 0; height: auto; box-sizing: border-box; }
/* Moniepoint quote reads on the navy ground */
body.rp-home-v2 #hv-pay .rp-hv-quotebar { margin-top: 44px; }
body.rp-home-v2 #hv-pay .rp-hv-quotebar blockquote { color: var(--hv-navy); }
body.rp-home-v2 #hv-pay .rp-hv-quotebar figcaption { color: #000; }
body.rp-home-v2 #hv-pay .rp-hv-quotebar figcaption strong { color: #000; }

/* CONTROL — full-bleed light-blue section (Figma 28:40013), rounded top that
   overlaps the navy Pay panel above so its edge shows in the corners. Header is
   LEFT-aligned here (unlike the centred Employ/Manage panels). */
body.rp-home-v2 #hv-control { width: 100vw; margin-left: calc(50% - 50vw); background: #EBF1FE; padding: 64px max(24px, calc(50vw - 626px)); }
body.rp-home-v2 #hv-control > .rp-hv-eyebrow--sm { text-align: left; }
body.rp-home-v2 #hv-control > .rp-hv-ppanel__h,
body.rp-home-v2 #hv-control > .rp-hv-ppanel__sub { margin-left: 0; margin-right: 0; text-align: left; }

/* quote bar */
body.rp-home-v2 .rp-hv-quotebar { margin: 32px 0 0; padding: 0; display: flex; align-items: flex-start; gap: 20px; }
body.rp-home-v2 .rp-hv-quotebar__icon { flex: 0 0 auto; width: 64px; height: 64px; display: block; }
body.rp-home-v2 .rp-hv-quotebar__body { min-width: 0; }
body.rp-home-v2 .rp-hv-quotebar blockquote { font-family: var(--hv-font); font-size: 20px; line-height: 1.45; font-weight: 600; color: var(--hv-navy); margin: 0 0 8px; }
body.rp-home-v2 .rp-hv-quotebar figcaption { font-family: var(--hv-font); font-size: 14px; color: #000; }
body.rp-home-v2 .rp-hv-quotebar figcaption strong { color: #000; }
/* Mobile: stack the quote — icon on top, review below — with a smaller icon. */
@media (max-width: 767px) {
  body.rp-home-v2 .rp-hv-quotebar { flex-direction: column; gap: 16px; }
  body.rp-home-v2 .rp-hv-quotebar__icon { width: 48px; height: 48px; }
  /* Manage/platform photo card on mobile: photo stays at the top, the text sits on a
     solid panel below it (no text overlaid on the image, no fragile positioning). */
  body.rp-home-v2 .rp-hv-ccard--photo .rp-hv-ccard__body { background: transparent; }
  /* Badge moves into the copy block, above the heading (in-flow, not floating on the photo) */
  body.rp-home-v2 .rp-hv-ccard--photo .rp-hv-ccard__badge { position: static !important; margin: 0 0 14px !important; left: auto !important; bottom: auto !important; top: auto !important; width: 56px !important; height: 56px !important; align-self: flex-start; }
  /* Blog thumbnails are text-baked banners — show the whole image instead of cropping it. */
  body.rp-home-v2 .rp-hv-bcard__img { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
  /* Two-up tile rows (spend/overview, EOR/testimonial) stack one below the other. */
  body.rp-home-v2 .rp-hv-ppanel__two { grid-template-columns: 1fr; }
}

/* Manage carousel */
body.rp-home-v2 .rp-hv-carousel { position: relative; }
body.rp-home-v2 .rp-hv-carousel__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 10px; scrollbar-width: none; }
body.rp-home-v2 .rp-hv-carousel__track::-webkit-scrollbar { display: none; }
/* Manage + Pay carousels → full-bleed + centred on desktop: the track spans the
   full viewport and opens from a centred scroll position so the row bleeds
   symmetrically off both edges (partial card left AND right); each card snaps to
   centre on nav. (#hv-pay's own section band already spans 100vw; here we break
   its inner track out of the band's padding too.) Tablet/mobile keep the
   in-container peek layout. */
@media (min-width: 992px) {
  body.rp-home-v2 #hv-manage .rp-hv-carousel__track,
  body.rp-home-v2 #hv-pay .rp-hv-carousel__track { width: 100vw; margin-left: calc(50% - 50vw); padding-left: 24px; padding-right: 24px; scroll-padding-left: 0; scroll-padding-right: 0; scroll-snap-type: none; }
  body.rp-home-v2.rtl #hv-manage .rp-hv-carousel__track,
  body.rp-home-v2.rtl #hv-pay .rp-hv-carousel__track { margin-left: 0; margin-right: calc(50% - 50vw); }
  body.rp-home-v2 #hv-manage .rp-hv-ccard,
  body.rp-home-v2 #hv-pay .rp-hv-ccard { scroll-snap-align: center; }
}

/* --- card base: all cards equal height, rounded, clipped --- */
body.rp-home-v2 .rp-hv-ccard { scroll-snap-align: start; flex: 0 0 var(--hv-ccard-basis, 340px); height: var(--hv-ccard-h, 470px); border-radius: 20px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
body.rp-home-v2 .rp-hv-ccard h4 { font-family: var(--hv-font); font-weight: 600; font-size: 22px; line-height: 1.25; margin: 0 0 10px; }
body.rp-home-v2 .rp-hv-ccard p { font-family: var(--hv-font); font-size: 15px; line-height: 1.5; margin: 0; }
body.rp-home-v2 .rp-hv-ccard__body { padding: 24px; display: flex; flex-direction: column; }
body.rp-home-v2 .rp-hv-ccard__viz { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* "Learn more" pill */
body.rp-home-v2 .rp-hv-ccard__pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 18px; padding: 9px 16px; border-radius: 999px; font-family: var(--hv-font); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; }

/* --- Type A: full-bleed photo, copy anchored bottom --- */
body.rp-home-v2 .rp-hv-ccard--photo { background-size: cover; background-position: center; justify-content: flex-end; }
body.rp-home-v2 .rp-hv-ccard--photo .rp-hv-ccard__body { color: #fff; }
body.rp-home-v2 .rp-hv-ccard--photo h4 { color: #fff; }
body.rp-home-v2 .rp-hv-ccard--photo p { color: rgba(255,255,255,.9); }
body.rp-home-v2 .rp-hv-ccard__badge { position: absolute; left: 24px; bottom: 168px; width: 80px; height: 80px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(10,15,44,.25); }
/* floating checklist overlay on the onboarding photo card (top-right) */
/* MCP photo card uses the same viz+body structure and padding as Equipment
   (and every other card) — image in a padded viz, copy in the body. */
body.rp-home-v2 .rp-hv-ccard--photo .rp-hv-ccard__viz { padding: 24px 24px 0; }
body.rp-home-v2 .rp-hv-ccard--photo .rp-hv-ccard__viz img { object-position: center; }

/* --- Type B: light ground, visual top / copy + pill bottom --- */
body.rp-home-v2 .rp-hv-ccard--light { background: #EDF2FE; }
body.rp-home-v2 .rp-hv-ccard--light h4 { color: var(--hv-navy); }
body.rp-home-v2 .rp-hv-ccard--light p { color: var(--hv-text-80); }
body.rp-home-v2 .rp-hv-ccard--light .rp-hv-ccard__viz { padding: 8px; }
body.rp-home-v2 .rp-hv-ccard--light .rp-hv-ccard__pill { background: #fff; border: 1px solid #C9D5F5; color: var(--hv-navy); }
body.rp-home-v2 .rp-hv-ccard--light .rp-hv-ccard__pill:hover { border-color: var(--hv-blue); color: var(--hv-blue); }

/* --- Type C: solid blue, copy + pill top / visual bottom --- */
body.rp-home-v2 .rp-hv-ccard--blue { background: var(--hv-blue); }
body.rp-home-v2 .rp-hv-ccard--blue h4 { color: #fff; }
body.rp-home-v2 .rp-hv-ccard--blue p { color: rgba(255,255,255,.9); }
body.rp-home-v2 .rp-hv-ccard--blue .rp-hv-ccard__body { padding-bottom: 4px; }
body.rp-home-v2 .rp-hv-ccard--blue .rp-hv-ccard__viz--bottom { padding: 8px; }
body.rp-home-v2 .rp-hv-ccard--blue .rp-hv-ccard__pill { background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff; }
body.rp-home-v2 .rp-hv-ccard--blue .rp-hv-ccard__pill:hover { background: rgba(255,255,255,.14); }

/* --- pagination dots --- */
body.rp-home-v2 .rp-hv-carousel__dots { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 28px 0 0; }
body.rp-home-v2 .rp-hv-carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #C9D2E6; cursor: pointer; transition: width .2s, background .2s; }
body.rp-home-v2 .rp-hv-carousel__dot.is-active { width: 26px; background: var(--hv-blue); }

/* --- nav buttons --- */
body.rp-home-v2 .rp-hv-carousel__nav { display: flex; gap: 16px; justify-content: center; margin: 18px 0 0; }
body.rp-home-v2 .rp-hv-carousel__btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid #D3DAE8; background: #fff; color: var(--hv-navy); display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
body.rp-home-v2 .rp-hv-carousel__btn:hover { border-color: var(--hv-blue); color: var(--hv-blue); }

@media (max-width: 991px) {
  body.rp-home-v2 .rp-hv-ppanel__split { grid-template-columns: 1fr; }
  body.rp-home-v2 #hv-pay { padding-top: 48px; padding-bottom: 48px; }
  body.rp-home-v2 #hv-control { padding-top: 48px; padding-bottom: 48px; }
  body.rp-home-v2 .rp-hv-ppanel__viz { height: auto; padding: 0; width: 65%; margin-left: auto; margin-right: auto; }
  /* tablet → 2 full cards with a peek either side */
  body.rp-home-v2 .rp-hv-carousel__track { --hv-ccard-basis: 43%; scroll-padding-left: 36px; }
  /* site header is 112px on tablet/mobile → drop the sticky pill below it */
  body.rp-home-v2 .rp-hv-platform__nav { top: 124px; }
  body.rp-home-v2 .rp-hv-ppanel { scroll-margin-top: 190px; }
}
@media (max-width: 600px) {
  body.rp-home-v2 .rp-hv-platform { padding: 48px 0; }
  body.rp-home-v2 .rp-hv-ppanel__two { grid-template-columns: 1fr; } /* stack the two-up tiles only on mobile */
  body.rp-home-v2 .rp-hv-platform__nav { top: 120px; gap: 4px; padding: 6px; }
  body.rp-home-v2 .rp-hv-ptab { padding: 8px 16px; font-size: 14px; }
  body.rp-home-v2 .rp-hv-ppanel__viz { width: 100%; } /* pay card visual full-width on mobile */
  /* mobile → 1 centered card with peeks */
  body.rp-home-v2 .rp-hv-carousel__track { --hv-ccard-basis: 80%; scroll-padding-left: 0; }
  body.rp-home-v2 .rp-hv-ccard { --hv-ccard-h: 440px; scroll-snap-align: center; }
}

/* ===== SUPPORT =========================================================== */
body.rp-home-v2 .rp-hv-support { padding: 0 0 72px; }
body.rp-home-v2 .rp-hv-support__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.rp-home-v2 .rp-hv-support__quote { border-radius: 26px; background: linear-gradient(180deg, rgba(10,15,44,.25), #0A0F2C); color: #fff; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; margin: 0; }
body.rp-home-v2 .rp-hv-support__logo { height: 26px; width: auto; align-self: flex-start; }
body.rp-home-v2 .rp-hv-support__quote blockquote { font-family: var(--hv-font); font-size: 20px; line-height: 1.4; font-weight: 600; margin: 0 0 16px; }
body.rp-home-v2 .rp-hv-support__quote figcaption { display: flex; flex-direction: column; font-size: 14px; color: #C9D3EE; } body.rp-home-v2 .rp-hv-support__quote figcaption strong { color: #fff; font-size: 16px; }
body.rp-home-v2 .rp-hv-support__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
body.rp-home-v2 .rp-hv-scard { background: #EEF2FF; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; min-height: 320px; }
body.rp-home-v2 .rp-hv-scard__ic { width: 40px; height: 40px; display: block; }
body.rp-home-v2 .rp-hv-scard__num { font-family: var(--hv-font); font-weight: 700; font-size: 30px; color: var(--hv-navy); margin-top: auto; }
body.rp-home-v2 .rp-hv-scard__lbl { font-family: var(--hv-font); font-size: 14px; color: var(--hv-text-80); margin-top: 4px; }

/* ===== RESULTS =========================================================== */
body.rp-home-v2 .rp-hv-results { padding: 80px 0; background: #EBF1FE; }
/* Figma: wide hero card in the middle, side cards narrower. Images bottom-align
   (margin-top offsets), so the copy below every card starts on the same line. */
body.rp-home-v2 .rp-hv-results__grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 24px; align-items: start; margin-top: 44px; }
body.rp-home-v2 .rp-hv-story { display: flex; flex-direction: column; text-decoration: none; }
body.rp-home-v2 .rp-hv-story__img { height: 336px; border-radius: 20px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; color: #fff; background: #0A0F2C; }
body.rp-home-v2 .rp-hv-story:nth-child(1) .rp-hv-story__img { height: 284px; margin-top: 52px; }
body.rp-home-v2 .rp-hv-story:nth-child(3) .rp-hv-story__img { height: 250px; margin-top: 86px; }
body.rp-home-v2 .rp-hv-story__top { display: flex; justify-content: space-between; align-items: flex-start; }
body.rp-home-v2 .rp-hv-story__brand { height: 28px; width: auto; max-width: 140px; object-fit: contain; display: block; }
body.rp-home-v2 .rp-hv-story__tag { background: #fff; color: #114EF7; border-radius: 999px; padding: 5px 13px; font-family: var(--hv-font); font-weight: 700; font-size: 12px; }
body.rp-home-v2 .rp-hv-story__stat { font-family: var(--hv-font); font-weight: 700; font-size: 26px; display: flex; flex-direction: column; }
body.rp-home-v2 .rp-hv-story__stat small { font-weight: 400; font-size: 14px; opacity: .9; margin-top: 4px; }
body.rp-home-v2 .rp-hv-story__quote { font-family: var(--hv-font); font-size: 16px; line-height: 1.5; color: #2A2A2A; margin: 20px 0 16px; }
body.rp-home-v2 .rp-hv-story__by { font-family: var(--hv-font); font-weight: 700; font-size: 15px; color: #000; display: flex; flex-direction: column; margin: 0 0 16px; }
body.rp-home-v2 .rp-hv-story__by span { font-weight: 400; font-size: 14px; color: #000; margin-top: 2px; }
/* Read story = blue outline pill */
body.rp-home-v2 .rp-hv-story__link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 9px 18px; border: 1px solid #B4C6F5; border-radius: 999px; color: #114EF7; font-family: var(--hv-font); font-weight: 600; font-size: 14px; transition: background .15s, border-color .15s; }
body.rp-home-v2 .rp-hv-story__link:hover { border-color: #114EF7; background: rgba(17,78,247,.06); }
body.rp-home-v2 .rp-hv-results__more { text-align: center; margin-top: 48px; }
body.rp-home-v2 .rp-hv-results__more .rp-hv-btn--ghost { background: #fff; border-color: #D8DEEA; color: #114EF7; padding: 16px 28px; }

/* ===== INTEGRATIONS ====================================================== */
body.rp-home-v2 .rp-hv-integrations { background: #0A1330; padding: 130px 0; text-align: center; position: relative; overflow: hidden; }
body.rp-home-v2 .rp-hv-integrations .rp-hv-container { position: relative; }
body.rp-home-v2 .rp-hv-integrations__logos { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
body.rp-home-v2 .rp-hv-integrations__logos img { position: absolute; top: 50%; left: 0; width: 100%; height: auto; transform: translateY(-50%); }
body.rp-home-v2 .rp-hv-integrations__mid { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; }
body.rp-home-v2 .rp-hv-h2--onDark { color: #fff; }
body.rp-home-v2 .rp-hv-accent-gold { color: #F4C752; }
body.rp-home-v2 .rp-hv-sub--onDark { color: #fff; margin-bottom: 28px; }
body.rp-home-v2 .rp-hv-btn--onDark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
body.rp-home-v2 .rp-hv-btn--onDark:hover { background: rgba(255,255,255,.1); }

/* ===== SECURITY ovals ==================================================== */
body.rp-home-v2 .rp-hv-security { padding: 72px 0; background: #F5F8FF; }
body.rp-home-v2 .rp-hv-security__grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; align-items: center; }
/* tall vertical ovals (aspect-ratio locks the portrait shape at any width) that
   gently overlap, like the Figma row */
body.rp-home-v2 .rp-hv-soval { aspect-ratio: 212 / 282; border-radius: 99px; padding: 24px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; max-width: 200px; }
body.rp-home-v2 .rp-hv-soval__ic { width: 75px; height: auto; display: block; }
body.rp-home-v2 .rp-hv-soval__t { font-family: var(--hv-font); font-weight: 700; font-size: 15px; color: var(--hv-navy); }
body.rp-home-v2 .rp-hv-soval__s { font-family: var(--hv-font); font-size: 12px; line-height: 1.4; color: var(--hv-text-60); }

/* ===== BLOG ============================================================== */
body.rp-home-v2 .rp-hv-blog { padding: 72px 0; }
body.rp-home-v2 .rp-hv-blog__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch; }
body.rp-home-v2 .rp-hv-bcard { display: flex; }
body.rp-home-v2 .rp-hv-bcard > p { display: contents; } /* neutralize any wpautop wrapper */
body.rp-home-v2 .rp-hv-bcard__link { display: flex; flex-direction: column; width: 100%; height: 100%; text-decoration: none; color: inherit; }
body.rp-home-v2 .rp-hv-bcard__img { display: block; height: 200px; border-radius: 16px; background: #0A0F2C; margin: 0 0 16px; }
body.rp-home-v2 .rp-hv-bcard__cat { display: block; font-family: var(--hv-font); font-size: 13px; color: var(--hv-text-60); margin: 0 0 6px; }
body.rp-home-v2 .rp-hv-bcard__t { display: block; font-family: var(--hv-font); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--hv-navy); margin: 0 0 12px; }
/* Read more → : blue link, bottom-aligned so it lines up across all cards */
body.rp-home-v2 .rp-hv-textlink { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto; padding-top: 6px; font-family: var(--hv-font); font-weight: 600; font-size: 15px; color: var(--hv-blue); text-decoration: none; }
body.rp-home-v2 .rp-hv-textlink:hover { text-decoration: underline; }
body.rp-home-v2 .rp-hv-blog__more { text-align: center; margin-top: 44px; }
body.rp-home-v2 .rp-hv-blog__more .rp-hv-btn--ghost { background: #fff; border-color: #C9D5F5; color: #114EF7; padding: 16px 28px; }

/* ===== DARK CTA ========================================================== */
body.rp-home-v2 .rp-hv-cta { padding: 72px 0; }
body.rp-home-v2 .rp-hv-cta__band { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,.05) 52%, rgba(0,0,0,0) 66%), url('/wp-content/themes/rp/assets/images/home-v2/cta-photo.webp') center/cover no-repeat, #0A0F2C; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; aspect-ratio: 1800 / 782; min-height: 420px; }
body.rp-home-v2 .rp-hv-cta__copy { padding: 56px; }
body.rp-home-v2 .rp-hv-cta__h { font-family: var(--hv-font); font-weight: 700; font-size: clamp(32px,3.4vw,44px); line-height: 1.1; color: #fff; margin: 0 0 12px; }
body.rp-home-v2 .rp-hv-cta__sub { font-family: var(--hv-font); font-size: 18px; line-height: 1.5; color: #fff; margin: 0 0 28px; }
body.rp-home-v2 .rp-hv-cta__viz { position: relative; align-self: stretch; min-height: 420px; border-radius: 0; overflow: hidden; }
body.rp-home-v2 .rp-hv-cta__ui { position: absolute; left: 0%; top: 50%; transform: translateY(-50%); width: 52%; max-width: 340px; height: auto; }

/* ===== TESTIMONIALS masonry ============================================== */
body.rp-home-v2 .rp-hv-tst { padding: 72px 0; }
body.rp-home-v2 .rp-hv-tst__masonry { columns: 3; column-gap: 24px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
/* animated scrolling wall (JS adds --anim + the 3 columns on desktop) */
body.rp-home-v2 .rp-hv-tst__masonry--anim { display: flex; gap: 24px; height: 640px; overflow: hidden; }
body.rp-home-v2 .rp-hv-tst__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
/* loop distance = exact pixel height of one card-set (--shift, set by JS) so the
   reset is glitch-free; falls back to 50% before JS measures. */
body.rp-home-v2 .rp-hv-tst__col:nth-child(1) { animation: rp-hv-tst-up 30s linear infinite; }
body.rp-home-v2 .rp-hv-tst__col:nth-child(2) { animation: rp-hv-tst-down 36s linear infinite; }
body.rp-home-v2 .rp-hv-tst__col:nth-child(3) { animation: rp-hv-tst-up 33s linear infinite; }
body.rp-home-v2 .rp-hv-tst__masonry--anim:hover .rp-hv-tst__col { animation-play-state: paused; }
@keyframes rp-hv-tst-up { from { transform: translate3d(0,0,0); } to { transform: translate3d(0, var(--shift, -50%), 0); } }
@keyframes rp-hv-tst-down { from { transform: translate3d(0, var(--shift, -50%), 0); } to { transform: translate3d(0,0,0); } }
@media (prefers-reduced-motion: reduce) { body.rp-home-v2 .rp-hv-tst__col { animation: none !important; } }
body.rp-home-v2 .rp-hv-tcard { break-inside: avoid; margin: 0 0 24px; background: #F6F8FD; border-radius: 16px; padding: 28px; }
body.rp-home-v2 .rp-hv-tcard__head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
body.rp-home-v2 .rp-hv-tcard__ava { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; object-fit: contain; }
body.rp-home-v2 .rp-hv-tcard__ava--dark { background: #0A0F2C; padding: 8px; }
body.rp-home-v2 .rp-hv-tcard__head figcaption { display: flex; flex-direction: column; }
body.rp-home-v2 .rp-hv-tcard__head strong { font-family: var(--hv-font); font-weight: 700; font-size: 15px; color: var(--hv-navy); }
body.rp-home-v2 .rp-hv-tcard__head span { font-family: var(--hv-font); font-size: 13px; color: var(--hv-text-60); }
body.rp-home-v2 .rp-hv-tcard blockquote { font-family: var(--hv-font); font-size: 16px; line-height: 1.6; color: var(--hv-text-80); margin: 0; }

/* pagination dots for the tablet/mobile carousels (hidden on desktop) */
body.rp-home-v2 .rp-hv-cdots { display: none; justify-content: center; align-items: center; gap: 8px; margin: 24px 0 0; }
body.rp-home-v2 .rp-hv-cdot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #C9D2E6; cursor: pointer; transition: width .2s, background .2s; }
body.rp-home-v2 .rp-hv-cdot.is-active { width: 26px; background: var(--hv-blue); }

/* ===== responsive for the above ========================================= */
@media (max-width: 991px) {
  body.rp-home-v2 .rp-hv-support__row { grid-template-columns: 1fr; }
  /* stat cards: drop the tall min-height and use a fixed 32px icon→text gap */
  body.rp-home-v2 .rp-hv-scard { min-height: 0; }
  body.rp-home-v2 .rp-hv-scard__num { margin-top: 32px; }
  /* tablet/mobile → swipeable centered carousels with pagination dots */
  body.rp-home-v2 .rp-hv-results__grid,
  body.rp-home-v2 .rp-hv-blog__grid,
  body.rp-home-v2 .rp-hv-security__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 16px; padding: 4px 2px 8px; scrollbar-width: none; }
  body.rp-home-v2 .rp-hv-results__grid::-webkit-scrollbar,
  body.rp-home-v2 .rp-hv-blog__grid::-webkit-scrollbar,
  body.rp-home-v2 .rp-hv-security__grid::-webkit-scrollbar { display: none; }
  body.rp-home-v2 .rp-hv-results__grid > *,
  body.rp-home-v2 .rp-hv-blog__grid > * { flex: 0 0 78%; scroll-snap-align: center; }
  body.rp-home-v2 .rp-hv-security__grid > * { flex: 0 0 30%; scroll-snap-align: center; }
  /* uniform story imagery inside the carousel */
  body.rp-home-v2 .rp-hv-story__img,
  body.rp-home-v2 .rp-hv-story:nth-child(1) .rp-hv-story__img,
  body.rp-home-v2 .rp-hv-story:nth-child(3) .rp-hv-story__img { height: 240px; margin-top: 0; }
  body.rp-home-v2 .rp-hv-cdots { display: flex; }
  body.rp-home-v2 .rp-hv-cta__band { grid-template-columns: 1fr; aspect-ratio: auto; }
  body.rp-home-v2 .rp-hv-cta__viz { display: none; } /* hide the floating UI on tablet/mobile */
  body.rp-home-v2 .rp-hv-tst__masonry { columns: 2; }
  /* integrations: full-size logo layer, cover (logos peek around the text; some
     naturally crop at the edges so it reads as a full background, not a shrunk image) */
  body.rp-home-v2 .rp-hv-integrations { padding: 72px 0; }
  body.rp-home-v2 .rp-hv-integrations__logos img { top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate(-50%,-50%); }
}
@media (max-width: 600px) {
  body.rp-home-v2 .rp-hv-support, body.rp-home-v2 .rp-hv-results, body.rp-home-v2 .rp-hv-security, body.rp-home-v2 .rp-hv-blog, body.rp-home-v2 .rp-hv-cta, body.rp-home-v2 .rp-hv-tst { padding: 48px 0; }
  body.rp-home-v2 .rp-hv-integrations { padding: 64px 0; }
  body.rp-home-v2 .rp-hv-integrations__logos { display: none; } /* logos hidden on mobile */
  body.rp-home-v2 .rp-hv-support__stats { grid-template-columns: 1fr; }
  body.rp-home-v2 .rp-hv-scard { min-height: 0; }
  body.rp-home-v2 .rp-hv-results__grid > *, body.rp-home-v2 .rp-hv-blog__grid > * { flex-basis: 84%; }
  body.rp-home-v2 .rp-hv-security__grid > * { flex-basis: 60%; }
  body.rp-home-v2 .rp-hv-cta__copy { padding: 36px 24px; }
  body.rp-home-v2 .rp-hv-tst__masonry { columns: 1; }
}

/* ===== wired image visuals (fill their sized containers) ================= */
body.rp-home-v2 .rp-hv-pcard__viz,
body.rp-home-v2 .rp-hv-tile__viz,
body.rp-home-v2 .rp-hv-ccard__viz,
body.rp-home-v2 .rp-hv-ppanel__viz { overflow: hidden; }
/* illustrations on colored/transparent grounds → show in full */
body.rp-home-v2 .rp-hv-tile__viz img,
body.rp-home-v2 .rp-hv-ppanel__viz img { width: 100%; height: auto; object-fit: contain; display: block; }
/* product-card illustrations bleed full-width (no L/R padding), cover-filled */
body.rp-home-v2 .rp-hv-pcard__viz img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* EOR card (blue) uses a centered transparent globe → contain, not cover-crop. */
body.rp-home-v2 .rp-hv-pcard--blue .rp-hv-pcard__viz img { object-fit: contain; object-position: center; }
/* carousel UI mockups → shown in full (transparent PNG/WebP), anchored per card type */
body.rp-home-v2 .rp-hv-ccard__viz img { width: 100%; height: 100%; object-fit: contain; object-position: center top; display: block; }
body.rp-home-v2 .rp-hv-ccard__viz--bottom img { object-position: center; }
/* stats icons */
body.rp-home-v2 .rp-hv-stat__icon { width: 32px; height: 32px; display: block; flex: 0 0 auto; }
/* Control "workforce" — photo background with overlaid text (matches Figma) */
body.rp-home-v2 .rp-hv-tile--photobg { display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; }
body.rp-home-v2 .rp-hv-tile--photobg .rp-hv-tile__h { color: #fff; }
body.rp-home-v2 .rp-hv-tile--photobg .rp-hv-tile__p { color: rgba(255,255,255,.9); }

/* ============================================================
   RTL polish (Arabic /ar/home-v2). dir=rtl mirrors flex/grid + text
   automatically; these override the few physical/directional values
   that don't flip on their own. Scoped to body.rp-home-v2.rtl. */
/* CTA: mirror the whole composition for RTL so it reads like the English band
   flipped. The copy sits on the RIGHT (grid already reverses), so: (1) flip the
   background PHOTO horizontally — the woman moves to the LEFT, opposite the
   copy, instead of sitting behind it; (2) keep the dark gradient on the RIGHT
   for text legibility; (3) mirror the floating payment-UI to the inner (centre)
   edge. Photo → ::before (flipped), gradient → ::after, both under the content. */
body.rp-home-v2.rtl .rp-hv-cta__band { position: relative; background: #0A0F2C; }
body.rp-home-v2.rtl .rp-hv-cta__band::before { content: ''; position: absolute; inset: 0; background: url('/wp-content/themes/rp/assets/images/home-v2/cta-photo.webp') center/cover no-repeat; transform: scaleX(-1); z-index: 0; }
body.rp-home-v2.rtl .rp-hv-cta__band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,.05) 52%, rgba(0,0,0,0) 66%); z-index: 1; }
body.rp-home-v2.rtl .rp-hv-cta__copy,
body.rp-home-v2.rtl .rp-hv-cta__viz { position: relative; z-index: 2; }
body.rp-home-v2.rtl .rp-hv-cta__ui { left: auto; right: 0%; }
/* Carousel card decorations pinned with physical left/right → mirror them. */
body.rp-home-v2.rtl .rp-hv-ccard__badge { left: auto; right: 24px; }
body.rp-home-v2.rtl .rp-hv-ccard__overlay { right: auto; left: 8px; }
/* Keep numeric/Latin figures visually LTR inside RTL text runs. */
body.rp-home-v2.rtl .rp-hv-stat__num,
body.rp-home-v2.rtl .rp-hv-hero__rating { direction: ltr; unicode-bidi: isolate; }
/* Control panel copy is LEFT-aligned in LTR (Figma). In RTL that physical
   "left" pins Arabic text to the wrong edge — flip it to the right (start). */
body.rp-home-v2.rtl #hv-control > .rp-hv-eyebrow--sm,
body.rp-home-v2.rtl #hv-control > .rp-hv-ppanel__h,
body.rp-home-v2.rtl #hv-control > .rp-hv-ppanel__sub { text-align: right; }
/* Full-bleed panels use width:100vw + margin-left:calc(50%-50vw). That only
   anchors correctly in LTR; in RTL an over-wide block anchors to its
   container's RIGHT edge, so the panel bleeds off the left and falls short on
   the right (shifted ~130px left). Drive the bleed from margin-right in RTL so
   it spans edge-to-edge and stays centered. */
body.rp-home-v2.rtl #hv-pay,
body.rp-home-v2.rtl #hv-spend,
body.rp-home-v2.rtl #hv-control { margin-left: 0; margin-right: calc(50% - 50vw); }
/* Trust marquee: the logo track + its clone set are laid out by flex order and
   scrolled with a translateX animation tuned for LTR. Under RTL the flex order
   reverses, so the clone lands on the wrong side and the track anchors to the
   right — the animation then empties the right half (logos bunch left). Logos
   are language-neutral, so force the marquee subtree to LTR: it lays out and
   scrolls exactly as on the English page. The eyebrow/heading above stay RTL. */
body.rp-home-v2.rtl .rp-hv-trust__marquee { direction: ltr; }
/* Directional carets point the LTR way (chevrons built as ">"). In RTL mirror
   them so "read story" points left and the slider prev/next carets match the
   reversed reading/scroll direction. */
body.rp-home-v2.rtl .rp-hv-story__link svg,
body.rp-home-v2.rtl .rp-hv-ccard__pill svg,
body.rp-home-v2.rtl .rp-hv-carousel__btn svg { transform: scaleX(-1); }

/* AskAI card — coded prompt mock (bottom of the blue Manage card) */
body.rp-home-v2 .rp-hv-askai { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 14px 20px 20px; }
body.rp-home-v2 .rp-hv-askai__chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--hv-navy); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; box-shadow: 0 4px 14px rgba(2,17,67,.16); }
body.rp-home-v2 .rp-hv-askai__bar { display: flex; align-items: center; gap: 10px; width: 100%; background: #fff; border-radius: 12px; padding: 12px 12px 12px 14px; box-shadow: 0 8px 22px rgba(2,17,67,.18); }
body.rp-home-v2 .rp-hv-askai__q { flex: 1 1 auto; color: var(--hv-navy); font-size: 12.5px; line-height: 1.35; font-weight: 500; }
body.rp-home-v2 .rp-hv-askai__send { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: var(--hv-blue); display: grid; place-items: center; }

/* Pay carousel — dark card (Native ERP sync), light viz-at-bottom, approval mock */
body.rp-home-v2 .rp-hv-ccard--dark { background: var(--hv-navy); }
body.rp-home-v2 .rp-hv-ccard--dark h4 { color: #fff; }
body.rp-home-v2 .rp-hv-ccard--dark p { color: rgba(255,255,255,.85); }
body.rp-home-v2 .rp-hv-ccard--dark .rp-hv-ccard__viz { padding: 24px 24px 0; }
body.rp-home-v2 .rp-hv-ccard--light .rp-hv-ccard__viz--bottom { padding: 0 24px 24px; }
body.rp-home-v2 .rp-hv-approve { display: flex; flex-direction: column; gap: 9px; padding: 22px 20px 10px; }
body.rp-home-v2 .rp-hv-approve__row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 8px 12px; box-shadow: 0 4px 14px rgba(2,17,67,.12); }
body.rp-home-v2 .rp-hv-approve__av { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #EDF2FE; color: var(--hv-blue); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
body.rp-home-v2 .rp-hv-approve__who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
body.rp-home-v2 .rp-hv-approve__who b { color: var(--hv-navy); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.rp-home-v2 .rp-hv-approve__who i { color: #6b7280; font-size: 10.5px; font-style: normal; }
body.rp-home-v2 .rp-hv-approve__check { align-self: center; width: 26px; height: 26px; border-radius: 50%; background: #1FB26B; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(31,178,107,.4); }

/* SPEND band inside the Pay panel — "Issue SpendCards to your global team" */
body.rp-home-v2 .rp-hv-spendband { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--hv-navy); border-radius: 20px; padding: 56px 48px; overflow: hidden; margin-top: 8px; }
body.rp-home-v2 .rp-hv-spendband__eyebrow { color: #8FB0FF; }
body.rp-home-v2 .rp-hv-spendband__h { color: #fff; font-size: 38px; line-height: 1.14; font-weight: 700; margin: 6px 0 18px; }
body.rp-home-v2 .rp-hv-spendband__p { color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.55; margin: 0 0 26px; max-width: 470px; }
body.rp-home-v2 .rp-hv-spendband__viz img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) {
  body.rp-home-v2 .rp-hv-spendband { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px; }
  body.rp-home-v2 .rp-hv-spendband__h { font-size: 28px; }
  body.rp-home-v2 .rp-hv-spendband__p { font-size: 15px; }
}

/* Pay is now a light band → light cards go white on it */
body.rp-home-v2 #hv-pay .rp-hv-ccard--light { background: #fff; }

/* Pay cards match Figma node 28:40058 = 420 wide, square (≈1:1) — bigger than
   Manage's 340 cards so the copy has room and never touches the edges. */
body.rp-home-v2 #hv-pay .rp-hv-ccard { height: auto; aspect-ratio: 1 / 1; }
@media (min-width: 992px) {
  body.rp-home-v2 #hv-pay .rp-hv-carousel__track { --hv-ccard-basis: 420px; }
}
/* Below desktop the square ratio makes narrow cards too short and crushes the
   image — drop it and use the taller card height so the graphic keeps its size. */
@media (max-width: 991px) {
  body.rp-home-v2 #hv-pay .rp-hv-ccard { aspect-ratio: auto; height: var(--hv-ccard-h, 470px); }
}
/* Pay card graphics: centered in the viz area and contained so the whole image
   fits (never cropped) with even breathing room, at desktop/tablet/mobile alike. */
body.rp-home-v2 #hv-pay .rp-hv-ccard__viz { padding: 18px 22px; display: flex; align-items: center; justify-content: center; }
body.rp-home-v2 #hv-pay .rp-hv-ccard__viz img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* Pay blue cards keep their copy at the bottom → give it real bottom padding
   (Manage blue cards have copy on top, so this stays scoped to Pay). */
body.rp-home-v2 #hv-pay .rp-hv-ccard--blue .rp-hv-ccard__body { padding-bottom: 24px; }

/* SPEND — separate full-width dark band (own section below Pay) */
body.rp-home-v2 .rp-hv-spend { width: 100vw; margin-left: calc(50% - 50vw); background: #021143; padding: 64px max(24px, calc(50vw - 626px)); scroll-margin-top: 150px; }
body.rp-home-v2 .rp-hv-spend__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
body.rp-home-v2 .rp-hv-spend__eyebrow { color: #fff; }
/* Spend CTA: light button with blue text on the dark band (per reference). */
body.rp-home-v2 .rp-hv-spend .rp-hv-btn--primary { background: #EEF2FB; color: #114EF7; }
body.rp-home-v2 .rp-hv-spend .rp-hv-btn--primary:hover { background: #fff; color: #0B3AD6; }
body.rp-home-v2 .rp-hv-spend__h { color: #fff; font-family: var(--hv-font); font-weight: 700; font-size: clamp(28px,3vw,40px); line-height: 1.14; margin: 6px 0 18px; }
body.rp-home-v2 .rp-hv-spend__p { color: #fff; font-size: 17px; line-height: 1.55; margin: 0 0 26px; max-width: 480px; }
body.rp-home-v2 .rp-hv-spend__viz { background: #0A1A4A; border-radius: 18px; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
body.rp-home-v2 .rp-hv-spend__viz img { width: 100%; height: auto; display: block; }
body.rp-home-v2 .rp-hv-spend .rp-hv-quotebar { margin-top: 48px; }
body.rp-home-v2 .rp-hv-spend .rp-hv-quotebar blockquote { color: #fff; }
body.rp-home-v2 .rp-hv-spend .rp-hv-quotebar figcaption { color: #fff; }
body.rp-home-v2 .rp-hv-spend .rp-hv-quotebar figcaption strong { color: #fff; }
@media (max-width: 767px) {
  body.rp-home-v2 .rp-hv-spend__inner { grid-template-columns: 1fr; gap: 28px; }
  body.rp-home-v2 .rp-hv-spend { padding: 48px 24px; }
  body.rp-home-v2 .rp-hv-spend__viz { padding: 0; }
}

/* 2026-08-26: the Valmont quote tile is a <figure>, which carries the browser default
   margin: 0 40px — insetting it vs the navy <div> tile beside it on every breakpoint.
   Zero the L/R margin so both tiles fill their grid cell equally. */
body.rp-home-v2 .rp-hv-ppanel__two > .rp-hv-tile--quote {
  margin: 0;
}

/* The cost-calculator banner moved to assets/css/components/cost-calc-banner.css
   on 2026-09-14 so it could be reused off the homepage. */