@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&display=swap');
/* ============================================================
   JETPAY REVAMP (2026-10) — new product-led homepage styles
   Stripe structure · Adyen soul · inverted (local/Canadian) tone.
   Reuses tokens.css for brand color/type/spacing.
   Scoped under .rv to avoid colliding with legacy styles.css.
   ============================================================ */

.rv *, .rv *::before, .rv *::after { box-sizing: border-box; }

.rv {
  font-family: var(--jp-font-body);
  color: var(--jp-text);
  background: var(--jp-white);
  font-size: var(--jp-size-body);
  line-height: var(--jp-leading-body);
  -webkit-font-smoothing: antialiased;
}

.rv h1, .rv h2, .rv h3 { font-family: var(--jp-font-display); font-weight: var(--jp-weight-semibold); line-height: var(--jp-leading-tight); letter-spacing: -0.02em; margin: 0; }
.rv p { margin: 0; }
.rv a { text-decoration: none; }
.rv a:not(.rv__btn) { color: inherit; }   /* buttons keep their own colour (lime buttons stay dark text everywhere) */
.rv img { max-width: 100%; display: block; }

.rv__container { max-width: var(--jp-maxw); margin-inline: auto; padding-inline: var(--jp-gutter); }
.rv__container--wide { max-width: 1340px; }

.rv__section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* mono label accent (Adyen) */
.rv__mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jp-purple); }
.rv__mono--on-dark { color: var(--jp-lime); }

/* two-tone headline (Stripe): lead dark, continuation muted */
.rv__twotone .mute { color: var(--jp-text-muted); }
.rv__section--dark .rv__twotone .mute { color: #8fa3b0; }

/* ---------- Buttons ---------- */
.rv__btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: var(--jp-weight-semibold); font-size: 1rem; padding: 0.85rem 1.4rem; border-radius: var(--jp-radius-pill); border: 1.5px solid transparent; cursor: pointer; transition: transform var(--jp-dur) var(--jp-ease), background var(--jp-dur) var(--jp-ease), border-color var(--jp-dur) var(--jp-ease); white-space: nowrap; }
.rv__btn:hover { transform: translateY(-1px); }
.rv__btn--primary { background: var(--jp-lime); color: var(--jp-accent-text); }
.rv__btn--primary:hover { background: #c3ea2f; }
.rv__btn--ghost { background: transparent; border-color: var(--jp-grey-300); color: var(--jp-text); }
.rv__btn--ghost:hover { border-color: var(--jp-ink); }
.rv__btn--ghost-dark { background: transparent; border-color: rgba(255,255,255,0.28); color: #fff; }
.rv__btn--ghost-dark:hover { border-color: #fff; }
.rv__link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: var(--jp-weight-semibold); color: var(--jp-purple); }
.rv__section--dark .rv__link { color: var(--jp-lime); }
.rv__link .arr { transition: transform var(--jp-dur) var(--jp-ease); }
.rv__link:hover .arr { transform: translateX(3px); }

/* ---------- Nav ---------- */
.rv__nav { position: sticky; top: 0; z-index: 50; background: rgba(16,24,40,0.82); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); color: #fff; }
.rv__nav-inner { display: flex; align-items: center; gap: 2rem; height: 68px; }
.rv__nav-logo { height: 26px; width: auto; }
.rv__nav-links { display: flex; gap: 1.6rem; margin-left: 1rem; }
.rv__nav-links a { font-weight: var(--jp-weight-medium); color: #cdd8e0; font-size: 0.98rem; }
.rv__nav-links a:hover { color: #fff; }
.rv__nav-actions { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.rv__nav-login { font-weight: var(--jp-weight-medium); font-size: 0.98rem; color: #cdd8e0; }
.rv__nav-login:hover { color: #fff; }
.rv__nav-toggle { display: none; background: none; border: 0; cursor: pointer; color: #fff; }

/* ---------- Hero (hybrid: human-warmth, Adyen mold) ---------- */
.rv__hero { position: relative; background: var(--jp-ink); color: #fff; overflow: hidden; }
.rv__hero-media { position: absolute; inset: 0; z-index: 0; }
/* placeholder for the warm human+product photo/video until Vlad/shoot delivers */
.rv__hero-media--placeholder {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(129,37,210,0.55), transparent 55%),
    radial-gradient(90% 80% at 10% 90%, rgba(209,246,70,0.22), transparent 55%),
    linear-gradient(135deg, #0d1522 0%, #142B3A 60%, #101828 100%);
}
.rv__hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,24,40,0.85) 0%, rgba(16,24,40,0.55) 55%, rgba(16,24,40,0.3) 100%); }
.rv__hero-ph-note { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; font-family: ui-monospace, monospace; font-size: 0.7rem; color: rgba(255,255,255,0.55); border: 1px dashed rgba(255,255,255,0.3); padding: 0.4rem 0.7rem; border-radius: 6px; max-width: 280px; }
.rv__hero-inner { position: relative; z-index: 3; padding-block: clamp(4.5rem, 12vw, 8.5rem); max-width: 760px; }
.rv__hero h1 { font-family: var(--jp-font-wide); font-size: var(--jp-size-hero); letter-spacing: -0.03em; }
.rv__hero .rotator { color: var(--jp-lime); display: block; }
@media (max-width: 640px){ .rv__hero .rotator { min-height: 2.15em; } }
.rv__hero-sub { margin-top: 1.4rem; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: #cdd8e0; max-width: 44ch; }
.rv__hero-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.rv__hero-trust { margin-top: 2.6rem; font-size: 0.85rem; color: #93a5b1; }

/* rotator animation */
.rv__rotate-word { display: inline-block; animation: rvfade 0.5s var(--jp-ease); }
@keyframes rvfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Logo bar ---------- */
.rv__logos { padding-block: 3.4rem; border-bottom: 1px solid var(--jp-grey-300); }
.rv__logos p { text-align: center; color: var(--jp-text-muted); font-size: 0.85rem; margin-bottom: 1.2rem; }
.rv__logos-row { display: flex; flex-wrap: wrap; gap: 1.7rem 3.8rem; align-items: center; justify-content: center; }
.rv__logo-ph { height: 34px; min-width: 110px; border-radius: 8px; background: var(--jp-grey-50); border: 1px dashed var(--jp-grey-300); display: flex; align-items: center; justify-content: center; color: var(--jp-grey-500); font-size: 0.8rem; font-weight: 600; }
/* Trusted-by: real customer logos, uniform single-ink monochrome via CSS mask */
.rv__logos-row .rv__logo { flex: 0 0 auto; width: clamp(106px, 12vw, 142px); height: 40px; background: #64748b; opacity: .82; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: opacity .2s ease, background .2s ease; }
.rv__logos-row .rv__logo:hover { opacity: 1; background: #475467; }
@media (max-width: 640px){ .rv__logos-row .rv__logo { width: 92px; height: 32px; } }

/* Customer-story logo card (colour logo beside the quote) */
.rv__logocard { background:#fff; border:1px solid rgba(16,24,40,.09); border-radius:20px; box-shadow:0 24px 60px rgba(16,24,40,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.3rem; padding:clamp(2rem,5vw,3.5rem); min-height:250px; }
.rv__logocard img { max-width:min(300px,78%); height:auto; }
.rv__logocard-tag { font-size:.8rem; letter-spacing:.04em; color:var(--jp-text-muted); font-weight:600; }

/* ---------- Four buckets (dark, Adyen money-movement) ---------- */
.rv__section--dark { background: var(--jp-ink); color: #fff; }
.rv__buckets-head { max-width: 640px; margin-bottom: 2.6rem; }
.rv__buckets-head h2 { font-size: var(--jp-size-h2); margin-top: 0.8rem; }
.rv__buckets-head p { margin-top: 0.9rem; color: var(--jp-text-muted); }
.rv__buckets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.rv__bucket { position: relative; border: 1px solid var(--jp-grey-300); border-radius: var(--jp-radius-md); padding: 1.6rem; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,0.04); transition: border-color var(--jp-dur) var(--jp-ease), transform var(--jp-dur) var(--jp-ease), box-shadow var(--jp-dur) var(--jp-ease); display: flex; flex-direction: column; min-height: 230px; }
.rv__bucket:hover { border-color: var(--jp-olive, #93C02D); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16,24,40,0.09); }
.rv__bucket h3 { font-size: 1.3rem; }
.rv__bucket p { margin-top: 0.5rem; color: var(--jp-text-muted); font-size: 0.98rem; }
.rv__bucket-shot { margin-top: 1.5rem; height: 120px; border-radius: 10px; border: 1px dashed rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 0.75rem; font-family: ui-monospace, monospace; text-align: center; padding: 0.5rem; margin-bottom: 1rem; }
.rv__bucket-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--jp-lime); color: var(--jp-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.rv__bucket-ico svg { width: 24px; height: 24px; }
.rv__bucket .rv__link { margin-top: auto; padding-top: 1.3rem; }

/* ---------- Why Jetpay (trust row, inverted) ---------- */
.rv__why-head { max-width: 640px; margin-bottom: 2.4rem; }
.rv__why-head h2 { font-size: var(--jp-size-h2); margin-top: 0.8rem; }
.rv__why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.rv__why-card { border: 1px solid var(--jp-grey-300); border-radius: var(--jp-radius-md); padding: 1.5rem; background: var(--jp-grey-50); }
.rv__why-card .ico { color: var(--jp-ink); margin-bottom: 1rem; }
.rv__why-card .ico svg { width: 28px; height: 28px; display: block; }
.rv__why-card h3 { font-size: 1.1rem; }
.rv__why-card p { margin-top: 0.4rem; color: var(--jp-text-muted); font-size: 0.95rem; }

/* ---------- Case study ---------- */
.rv__case { background: var(--jp-cream); border-radius: var(--jp-radius-lg); padding: clamp(2rem, 4vw, 3.5rem); display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; }
.rv__case-quote { font-family: var(--jp-font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -0.01em; }
.rv__case-who { margin-top: 1.4rem; font-weight: 600; }
.rv__case-who span { display: block; color: var(--jp-text-muted); font-weight: 400; font-size: 0.95rem; }
.rv__case-shot { height: 280px; border-radius: var(--jp-radius-md); border: 1px dashed var(--jp-grey-300); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--jp-grey-500); font-family: ui-monospace, monospace; font-size: 0.8rem; text-align: center; padding: 1rem; }
.rv__case-shot--photo { padding: 0; border: 0; overflow: hidden; background: var(--jp-grey-100, #eef1f4); }
.rv__case-shot--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* ---------- Developers band (dark) ---------- */
.rv__dev { background: linear-gradient(135deg, #0d1f2b, #101828); color: #fff; }
.rv__dev-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.rv__dev h2 { font-size: var(--jp-size-h2); margin-top: 0.8rem; }
.rv__dev p { margin-top: 0.9rem; color: #9fb0bb; }
.rv__dev-cta { margin-top: 1.6rem; display: flex; gap: 0.85rem; flex-wrap: wrap; }
.rv__code { background: #0a1018; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--jp-radius-md); padding: 1.4rem; font-family: ui-monospace, monospace; font-size: 0.85rem; color: #cdd8e0; overflow-x: auto; }
.rv__code .k { color: var(--jp-lime); }
.rv__code .s { color: #e0a3ff; }
.rv__code .c { color: #5b6b78; }

/* ---------- Final CTA ---------- */
.rv__cta { text-align: center; }
.rv__cta h2 { font-size: var(--jp-size-h2); max-width: 20ch; margin-inline: auto; }
.rv__cta p { margin-top: 1rem; color: var(--jp-text-muted); }
.rv__cta-btns { margin-top: 1.8rem; display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.rv__footer { background: var(--jp-ink); color: #cdd8e0; padding-block: 3.5rem 2.5rem; }
.rv__footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.rv__footer-logo { height: 26px; margin-bottom: 1rem; }
.rv__footer-tag { color: #9fb0bb; max-width: 32ch; }
.rv__footer-addr { margin-top: 1rem; font-size: 0.88rem; color: #7f93a1; }
.rv__footer-col h4 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 1rem; }
.rv__footer-col a { display: block; padding: 0.3rem 0; font-size: 0.95rem; color: #9fb0bb; }
.rv__footer-col a:hover { color: #fff; }
.rv__footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.82rem; color: #7f93a1; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .rv__nav-links { display: none; }
  .rv__nav-toggle { display: inline-flex; }
  .rv__buckets { grid-template-columns: 1fr; }
  .rv__why { grid-template-columns: repeat(2, 1fr); }
  .rv__case, .rv__dev-inner, .rv__footer-top { grid-template-columns: 1fr; }
  .rv__case-shot { height: 200px; }
}
@media (max-width: 520px) {
  .rv__why { grid-template-columns: 1fr; }
  .rv__hero-ph-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv__rotate-word { animation: none; }
  .rv__btn:hover, .rv__bucket:hover { transform: none; }
}

/* ============================================================
   SUBPAGE COMPONENTS (reusable Stripe-style template)
   ============================================================ */

/* Subpage header: headline + supporting line + CTAs, with a 4-point checklist on the right */
.rv__subhead { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.rv__subhead-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
.rv__subhead h1 { font-family: var(--jp-font-wide); font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.02em; margin-top: 0.7rem; }
.rv__subhead .sub { margin-top: 1.2rem; font-size: 1.15rem; color: var(--jp-text-muted); max-width: 48ch; }
.rv__subhead-cta { margin-top: 1.8rem; display: flex; gap: 0.85rem; flex-wrap: wrap; }
.rv__check { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 1.05rem; }
.rv__check li { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 500; line-height: 1.4; }
.rv__check svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--jp-lime-deep); margin-top: 1px; }

/* Product mockup showcase */
.rv__showcase { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.1rem; }
.rv__shot { border-radius: var(--jp-radius-md); border: 1px dashed var(--jp-grey-300); background: var(--jp-grey-50); min-height: 320px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--jp-grey-500); font-family: ui-monospace, monospace; font-size: 0.8rem; padding: 1.2rem; }

/* 3-up value/feature row */
.rv__feat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.rv__feat .ic { width: 30px; height: 30px; color: var(--jp-ink); margin-bottom: 0.9rem; display: block; }
.rv__section--dark .rv__feat .ic { color: var(--jp-lime); }
.rv__feat h3 { font-size: 1.15rem; }
.rv__feat p { margin-top: 0.5rem; color: var(--jp-text-muted); font-size: 0.98rem; }
.rv__section--dark .rv__feat p { color: #9fb0bb; }

/* More to discover */
.rv__discover-head { margin-bottom: 1.8rem; }
.rv__discover-head h2 { font-size: var(--jp-size-h3); }
.rv__discover { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.rv__disc { border: 1px solid var(--jp-grey-300); border-radius: var(--jp-radius-md); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--jp-dur) var(--jp-ease), transform var(--jp-dur) var(--jp-ease); }
/* Only cards that actually link somewhere get the interactive hover affordance */
.rv__disc:has(a):hover { border-color: var(--jp-ink); transform: translateY(-2px); }
.rv__disc:has(a) { cursor: pointer; }
.rv__disc--plain { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border-color: rgba(255,255,255,0.1); }
.rv__disc--plain:has(a):hover { border-color: rgba(209,246,70,0.5); }
.rv__disc-shot { height: 118px; background: var(--jp-grey-50); border-bottom: 1px dashed var(--jp-grey-300); display: flex; align-items: center; justify-content: center; color: var(--jp-grey-500); font-family: ui-monospace, monospace; font-size: 0.72rem; text-align: center; padding: 0.5rem; }
.rv__disc-body { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.rv__disc-body h3 { font-size: 1.05rem; }
.rv__disc-body p { color: var(--jp-text-muted); font-size: 0.92rem; }
.rv__disc-body .rv__link { margin-top: auto; }

/* "Coming soon" badge */
.rv__badge { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jp-accent-text); background: var(--jp-lime); border-radius: 999px; padding: 3px 10px; margin-left: 0.5rem; vertical-align: middle; }

@media (max-width: 860px) {
  .rv__subhead-grid { grid-template-columns: 1fr; gap: 2rem; }
  .rv__showcase { grid-template-columns: 1fr; }
  .rv__feat3 { grid-template-columns: 1fr; gap: 1.5rem; }
  .rv__discover { grid-template-columns: 1fr; }
}

/* ===================================================================
   Product shots — browser frame component (Phase-1 draft)
   Live prototypes embedded as non-interactive frames; swap for 2x
   PNG exports before production if preferred.
   =================================================================== */
.rv__frame { border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 30px 70px rgba(16,24,40,0.28), 0 6px 18px rgba(16,24,40,0.12); }
.rv__frame--light { box-shadow: 0 24px 60px rgba(16,24,40,0.14), 0 4px 12px rgba(16,24,40,0.08); }
.rv__frame__bar { height: 38px; background: #f3f4f6; border-bottom: 1px solid #e7e9ec;
  display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.rv__frame__dot { width: 11px; height: 11px; border-radius: 50%; background: #d6dade; }
.rv__frame__dot:nth-child(1){ background:#ff5f57; } .rv__frame__dot:nth-child(2){ background:#febc2e; } .rv__frame__dot:nth-child(3){ background:#28c840; }
.rv__frame__url { margin-left: 10px; font-family: ui-monospace, monospace; font-size: 12px;
  color: #8a96a0; background: #fff; border: 1px solid #e7e9ec; border-radius: 6px; padding: 3px 14px; }
.rv__frame__view { position: relative; background: #fff; overflow: hidden; }
.rv__frame__view iframe { width: 100%; border: 0; display: block; pointer-events: none; }

/* Hero product shot */
.rv__hero-shot { position: relative; z-index: 3; max-width: 1000px; margin: clamp(2.5rem,5vw,3.5rem) auto -5rem; padding: 0 20px; }
.rv__hero-shot .rv__frame__view iframe { height: 680px; }

/* Full-width feature showcase band (dashboard) — renamed to avoid clash with .rv__showcase shot-grid */
.rv__dashband { background: var(--jp-grey-50); }
.rv__dashband-head { max-width: 640px; margin-bottom: 2rem; }
.rv__dashband-head h2 { font-size: var(--jp-size-h2); margin-top: 0.8rem; }
.rv__dashband-head p { margin-top: 0.9rem; color: var(--jp-text-muted); }

/* Case-study shot uses a frame now */
.rv__case .rv__frame { align-self: stretch; }

@media (max-width: 820px){
  .rv__hero-shot { margin-bottom: -3rem; }
}

/* Baked PNG shots (2x) replace live iframes for production */
.rv__frame__view img { width: 100%; height: auto; display: block; }
/* Bucket thumbnail shots (top-cropped product UI) */
.rv__bucket-shot--img { border: 1px solid rgba(255,255,255,0.12); background: #fff; padding: 0; overflow: hidden; display: block; }
.rv__bucket-shot--img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ===== In-person (card-present) sub-page ===== */
.rv__ipshot .rv__frame { max-width: 1040px; margin: 0 auto; }
.rv__disc-shot--img { padding: 0; overflow: hidden; }
.rv__disc-shot--img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* hardware options */
.rv__hw { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.rv__hw-card { border: 1px solid var(--jp-grey-300); border-radius: var(--jp-radius-lg); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.rv__hw-shot { background: #0b131c; }
.rv__hw-shot img { width: 100%; height: auto; display: block; }
.rv__hw-body { padding: 1.5rem 1.6rem 1.7rem; }
.rv__hw-tag { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jp-lime-deep); font-weight: 700; }
.rv__hw-body h3 { font-size: 1.3rem; margin: 0.3rem 0 0.2rem; }
.rv__hw-body > p { color: var(--jp-text-muted); font-size: 0.96rem; margin: 0.3rem 0 0; }
.rv__hw-specs { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.rv__hw-specs li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: var(--jp-text-muted); padding: 0.5rem 0; border-top: 1px solid rgba(16,24,40,0.08); }
.rv__hw-specs li b { color: var(--jp-ink); font-weight: 600; text-align: right; }
.rv__hw-note { margin-top: 1.4rem; font-size: 0.85rem; color: var(--jp-text-muted); }
@media (max-width: 820px){ .rv__hw { grid-template-columns: 1fr; } }

/* Showcase shot as image (subpages) */
.rv__shot--img { padding: 0; border: 0; background: #0b131c; overflow: hidden; }
.rv__shot--img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* Hero — dark infrastructure treatment (layered from Direction B) */
/* Dev band stays clean; hero gets a subtle glow + oversized brand chevron (barely there) */
.rv__dev .rv__herogrid{ display:none; }
.rv__hero .rv__herogrid{ display:block; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(50% 65% at 82% 24%, rgba(209,246,70,0.12), transparent 62%); }
.rv__hero-chev{ position:absolute; right:-5%; top:50%; transform:translateY(-50%); height:165%; width:auto; z-index:0; pointer-events:none; fill:var(--jp-lime); opacity:.07;
  -webkit-mask-image:linear-gradient(to left,#000 45%, transparent 88%); mask-image:linear-gradient(to left,#000 45%, transparent 88%); }
@media (max-width:860px){ .rv__hero-chev{ height:90%; right:-18%; } }
.rv__hero-shot{ position:relative; z-index:3; }
.rv__hero-shot .rv__frame{ box-shadow:0 0 0 1px rgba(209,246,70,.28), 0 40px 90px rgba(0,0,0,.6); }

/* Archivo display face site-wide (closest to the hero mockups) */
:root{ --jp-font-wide:"Archivo","Arial Narrow",sans-serif; --jp-font-display:"Archivo",system-ui,sans-serif; }
/* Developer band — grid + glow to match the hero's dark treatment */
.rv__dev{ position:relative; overflow:hidden; }
.rv__dev-inner{ position:relative; z-index:2; }
.rv__dev .rv__code{ position:relative; z-index:2; box-shadow:0 0 0 1px rgba(209,246,70,.22), 0 30px 70px rgba(0,0,0,.5); }

/* Hero — two-column (text left, product shot right), matching the mockup */
.rv__hero{ padding-block:clamp(3rem,6vw,5.5rem); }
.rv__hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.rv__hero-grid .rv__hero-inner{ padding-block:0 !important; max-width:none !important; }
.rv__hero-grid .rv__hero-shot{ margin:0 !important; padding:0 !important; max-width:none !important; }
@media (max-width:860px){ .rv__hero-grid{ grid-template-columns:1fr; } }

/* Hero: more breathing room below the CTAs and the trust line */
.rv__hero-grid .rv__hero-trust{ margin-top:3.2rem; }
.rv__hero{ padding-bottom:clamp(4.5rem,8vw,7rem); }

/* ======================================================================
   Security / policy pages — two-column feature blocks + bank grid
   ====================================================================== */
.rv__secgrid{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.rv__secgrid > .rv__secgrid-head h2{ margin:0.7rem 0 0; font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.08; }
.rv__secgrid-head p{ margin-top:0.9rem; color:var(--jp-text-muted); max-width:36ch; }
.rv__secitems{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem 2.4rem; }
.rv__secitem h3{ margin:0 0 0.4rem; font-size:1.08rem; font-weight:700; letter-spacing:-0.01em; }
.rv__secitem p{ margin:0; color:var(--jp-text-muted); font-size:0.97rem; line-height:1.55; }
.rv__secitem p + p{ margin-top:0.6rem; }
.rv__secitem a{ color:var(--jp-purple); text-decoration:none; }
.rv__secitem a:hover{ text-decoration:underline; }
.rv__section--dark .rv__secgrid-head p,
.rv__section--dark .rv__secitem p{ color:#9fb0bb; }
.rv__section--dark .rv__secitem h3{ color:#fff; }
.rv__section--dark .rv__secitem a{ color:var(--jp-lime); }
@media (max-width:860px){
  .rv__secgrid{ grid-template-columns:1fr; }
  .rv__secitems{ grid-template-columns:1fr; }
}

/* Bank grid */
.rv__banks-head{ text-align:center; max-width:60ch; margin:0 auto clamp(2rem,4vw,3rem); }
.rv__banks-head h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); margin:0.6rem 0 0.8rem; }
.rv__banks-head p{ color:var(--jp-text-muted); }
.rv__section--dark .rv__banks-head p{ color:#9fb0bb; }
.rv__bankgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0.9rem; }
.rv__bankgrid__item{ display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(16,24,40,.08); border-radius:14px; padding:1.15rem 1rem; min-height:76px; }
.rv__bankgrid__item img{ max-height:30px; max-width:78%; width:auto; object-fit:contain; }
@media (max-width:860px){ .rv__bankgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .rv__bankgrid{ grid-template-columns:repeat(2,1fr); } }

/* ======================================================================
   Contact page — form card
   ====================================================================== */
.rv__formcard{ background:#fff; border:1px solid rgba(16,24,40,.09); border-radius:20px; padding:clamp(1.5rem,3vw,2.4rem); box-shadow:0 24px 60px rgba(16,24,40,.08); }
.rv__formcard .hs-form-frame{ min-height:420px; }
.rv__contact-points{ display:grid; gap:1.1rem; margin-top:2.4rem; }
.rv__contact-point{ display:flex; gap:0.9rem; align-items:flex-start; }
.rv__contact-point svg{ width:22px; height:22px; flex:0 0 22px; color:var(--jp-olive); margin-top:2px; }
.rv__contact-point b{ display:block; font-size:1rem; }
.rv__contact-point span{ color:var(--jp-text-muted); font-size:0.95rem; }
.rv__contact-point a{ color:var(--jp-purple); text-decoration:none; }
.rv__contact-point a:hover{ text-decoration:underline; }

/* ======================================================================
   Legal / policy long-form
   ====================================================================== */
.rv__legal{ max-width:74ch; }
.rv__legal__entity{ border-left:3px solid var(--jp-lime); background:rgba(16,24,40,.03); border-radius:10px; padding:1.1rem 1.3rem; margin:0 0 2rem; }
.rv__legal__entity p{ margin:0; color:var(--jp-text-muted); }
.rv__legal h2{ font-size:clamp(1.25rem,2.2vw,1.55rem); margin:2.6rem 0 0.5rem; letter-spacing:-0.01em; }
.rv__legal p, .rv__legal li{ line-height:1.68; color:var(--jp-text-muted); }
.rv__legal > p:first-of-type{ font-size:1.08rem; color:var(--jp-ink); }
.rv__legal ul{ padding-left:1.2rem; margin:0.5rem 0 1rem; }
.rv__legal li{ margin-bottom:0.45rem; }
.rv__legal li strong, .rv__legal p strong{ color:var(--jp-ink); }
.rv__legal a{ color:var(--jp-purple); text-decoration:none; }
.rv__legal a:hover{ text-decoration:underline; }

/* Product loop videos behave like the shots they replace */
.rv__frame__view video, .rv__shot--img video, .rv__disc-shot--img video,
.rv__dashband video, .rv__bucket-shot--img video, .rv__hero-shot video{ display:block; width:100%; max-width:100%; height:auto; }
/* let grid/flex tracks holding a video shrink to the column (videos carry intrinsic width) */
.rv__hero-grid .rv__hero-shot, .rv__case > *, .rv__showcase > *, .rv__shot{ min-width:0; }
.rv__hero-shot .rv__frame, .rv__case .rv__frame{ max-width:100%; }

/* ======================================================================
   Motion: scroll reveals (reduced-motion users keep everything visible)
   ====================================================================== */
@media (prefers-reduced-motion: no-preference){
  .rv-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
  .rv-reveal.rv-in{ opacity:1; transform:none; }
}

/* Live count-up KPI strip (e.g. reporting showcase) */
.rv__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.8rem; }
.rv__kpi{ background:#fff; border:1px solid var(--jp-grey-300); border-radius:14px; padding:1.1rem 1.3rem; }
.rv__kpi-k{ font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--jp-text-muted); font-weight:600; display:flex; align-items:center; gap:.5rem; }
.rv__kpi-k .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.rv__kpi-v{ font-size:clamp(1.5rem,2.3vw,1.95rem); font-weight:700; letter-spacing:-0.02em; margin-top:.5rem; }
@media (max-width:760px){ .rv__kpis{ grid-template-columns:1fr 1fr; } }

.rv__footer-bottom a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.rv__footer-bottom a:hover{ color:#fff; }