/* ─────────────────────────────────────────────────────────────────────────
   Rank+ — Marketing site prototype stylesheet
   All tokens canonical (see .claude/skills/rankplus-design/tokens.md).
   When approved, move into website's global stylesheet (skill rule #1, #2).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand — burnt copper (matches design.html token scale: copper/2/deep/tint/ink) */
  --rp-primary:         #965215;
  --rp-primary-hover:   #b56b1f;
  --rp-primary-soft:    #c89066;   /* design --copper-tint */
  --rp-primary-deep:    #7a4310;   /* design --copper-2    */
  --rp-primary-deepest: #5a3008;   /* design --copper-deep — used for radial shadows & deep gradients */
  --rp-primary-ink:     #f1eee5;   /* design --copper-ink — text color on copper backgrounds */
  --rp-primary-bg:      rgba(150,82,21,0.10);
  --rp-primary-bg-2:    rgba(150,82,21,0.18);
  --rp-primary-glow:    rgba(150,82,21,0.25);

  /* Text — cream + 3-step muted scale (matches design.html cream/cream-2/muted/muted-2) */
  --rp-t1:      #f1eee5;   /* design --cream    — primary text */
  --rp-cream-2: #d8d4c8;   /* design --cream-2  — softened cream for de-emphasised body */
  --rp-t2:      #8b8b9e;   /* design --muted    — body muted (was #9d9db0, brought into line) */
  --rp-t3:      #44445a;   /* design --muted-2  — tertiary text & chrome (was #5a5a70) */
  --rp-inverse: #0d0d0d;

  /* Surfaces (dark default) — matches design.html bg/bg-2/bg-3/bg-4 */
  --rp-bg:    #0d0d0d;     /* design --bg   — page */
  --rp-bg-2:  #101015;     /* (in-house) alt-section background — between page and surf */
  --rp-surf:  #161619;     /* design --bg-2 — card/panel */
  --rp-raise: #1c1c20;     /* design --bg-3 — raised */
  --rp-lift:  #222227;     /* design --bg-4 — most-raised */
  --rp-line:   rgba(255,255,255,0.06);   /* design --line      */
  --rp-line-2: rgba(255,255,255,0.035);  /* design --line-soft */
  --rp-line-3: rgba(255,255,255,0.12);   /* (in-house) hover/border accent */

  /* Status (identical to design.html green/red/amber/purple) */
  --rp-success:    #34d399;
  --rp-success-bg: rgba(52,211,153,0.10);
  --rp-warning:    #fbbf24;
  --rp-warning-bg: rgba(251,191,36,0.10);
  --rp-error:      #f87171;
  --rp-error-bg:   rgba(248,113,113,0.10);
  --rp-info:       #38bdf8;
  --rp-info-bg:    rgba(56,189,248,0.10);
  --rp-purple:     #a78bfa;
  --rp-purple-bg:  rgba(167,139,250,0.10);

  /* Radius (matches design.html: --r 8 / --r2 10 / --r-lg 16) */
  --rp-r-sm: 6px;
  --rp-r:    8px;
  --rp-r2:   10px;
  --rp-r3:   16px;
  --rp-r-pill: 999px;

  /* Spacing */
  --rp-s-1: 4px;  --rp-s-2: 8px;  --rp-s-3: 12px; --rp-s-4: 16px;
  --rp-s-5: 20px; --rp-s-6: 24px; --rp-s-7: 32px; --rp-s-8: 40px;
  --rp-s-9: 48px; --rp-s-10: 64px; --rp-s-11: 96px; --rp-s-12: 120px;

  /* Type — Heebo for everything, JetBrains Mono for the rare code-like chip */
  --rp-font-sans: 'Heebo', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --rp-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --rp-fs-xs:   0.75rem;  --rp-fs-sm:  0.875rem; --rp-fs-base: 1rem;
  --rp-fs-md:   1.125rem; --rp-fs-lg:  1.25rem;  --rp-fs-xl:   1.5rem;
  --rp-fs-2xl:  1.875rem; --rp-fs-3xl: 2.25rem;  --rp-fs-4xl:  3rem;
  --rp-fs-5xl:  3.75rem;
  --rp-lh-tight: 1.1; --rp-lh-snug: 1.25; --rp-lh-normal: 1.55; --rp-lh-relaxed: 1.65;

  /* Motion */
  --rp-t-fast: 120ms; --rp-t: 150ms; --rp-t-slow: 240ms;
  --rp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Shadow */
  --rp-e1: 0 1px 2px rgba(0,0,0,0.35);
  --rp-e2: 0 8px 30px rgba(0,0,0,0.30);
  --rp-e3: 0 16px 70px rgba(0,0,0,0.45);
  --rp-e-glow: 0 0 0 3px var(--rp-primary-glow);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--rp-bg);
  color: var(--rp-t1);
  font-family: var(--rp-font-sans);
  font-size: var(--rp-fs-base);
  line-height: var(--rp-lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-inline-size: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
strong { font-weight: 700; color: var(--rp-t1); }
hr { border: 0; border-block-start: 1px solid var(--rp-line); margin: 0; }

/* Brand glyph */
.rp-brand-plus { color: var(--rp-primary); }

/* ─── Layout primitives ────────────────────────────────────────────────── */
/* Container width grew from 1180 → 1480 (+25%) for the May 2026 redesign —
   gives the cap-grid more breathing room on large displays and matches
   the wider hero/CTA blades. .rp-container-narrow stays tight for
   long-form prose pages (blog post, legal).
   Padding-inline 32px matches design.html .wrap (20px under 720px). */
.rp-container { max-inline-size: 1480px; margin-inline: auto; padding-inline: 32px; }
.rp-container-narrow { max-inline-size: 820px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 720px) {
  .rp-container, .rp-container-narrow { padding-inline: 20px; }
}

.rp-section { padding-block: 110px; }       /* design.html section.s */
.rp-section-tight { padding-block: var(--rp-s-10); }
.rp-section-alt { background: var(--rp-bg-2); }

.rp-section-head { text-align: center; margin-block-end: var(--rp-s-8); }
.rp-section-head .rp-eyebrow { margin-block-end: var(--rp-s-4); }

.rp-eyebrow {
  display: inline-flex; align-items: center; gap: var(--rp-s-2);
  padding: 6px 12px;
  background: var(--rp-primary-bg);
  color: var(--rp-primary-soft);
  border: 1px solid var(--rp-primary-bg-2);
  border-radius: var(--rp-r-pill);
  font-size: var(--rp-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rp-eyebrow::before {
  content: ""; inline-size: 6px; block-size: 6px;
  border-radius: 50%; background: var(--rp-primary);
  box-shadow: var(--rp-e-glow);
}

.rp-h1 {
  font-size: clamp(2.25rem, 5vw, var(--rp-fs-5xl));
  font-weight: 800; line-height: var(--rp-lh-tight); letter-spacing: -0.02em;
  margin-block: var(--rp-s-4) var(--rp-s-5);
}
.rp-h2 {
  font-size: clamp(1.75rem, 3.5vw, var(--rp-fs-3xl));
  font-weight: 700; line-height: var(--rp-lh-snug); letter-spacing: -0.02em;
  margin-block-end: var(--rp-s-3);
}
.rp-h3 {
  font-size: var(--rp-fs-lg);
  font-weight: 600; line-height: var(--rp-lh-snug); letter-spacing: -0.01em;
}
.rp-lead {
  font-size: var(--rp-fs-md);
  line-height: var(--rp-lh-relaxed);
  color: var(--rp-t2);
  max-inline-size: 60ch;
}
.rp-lead-center { margin-inline: auto; }
.rp-text-center { text-align: center; }
.rp-mt-16 { margin-block-start: var(--rp-s-4); }
.rp-mt-24 { margin-block-start: var(--rp-s-6); }
.rp-mt-32 { margin-block-start: var(--rp-s-7); }

/* ─── Top bar (matches design.html .topbar verbatim) ──────────────────── */
.rp-topbar {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in oklab, var(--rp-bg) 86%, transparent);    /* design.html .topbar bg */
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-block-end: 1px solid var(--rp-line-2);                       /* design.html --line-soft */
}
/* Override the legacy .rp-topbar-inner block in rankplus-site.css. The
   redesign uses design.html's exact metrics: 68px height, 28px gap, no
   space-between (the nav's auto margin pushes .rp-topbar-actions
   to the opposite edge). */
.rp-topbar-inner {
  display: flex; align-items: center;
  gap: 28px;                                                          /* design.html .topbar-inner */
  block-size: 68px;                                                   /* design.html .topbar-inner */
  justify-content: flex-start;
  padding-block: 0;
}
/* Nav cluster: CENTERED in the topbar (NOT pushed next to brand like
   design.html does — the user prefers nav centered horizontally between
   brand and actions). flex:1 lets the nav take the remaining row;
   justify-content:center centers its items inside that space. */
.rp-topbar-nav {
  display: flex; align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  margin-inline-start: 0;
  margin-inline-end: 0;
}
/* Mobile: hide everything in the topbar except brand + icon buttons +
   hamburger. The whole nav cluster collapses into the off-canvas drawer.
   Login + signup buttons are duplicated in the drawer too, so we hide
   them in the topbar to prevent the cluster from overflowing the
   viewport horizontally.

   RTL-only flip: in RTL the default flex order puts brand on the right
   and actions on the left. On mobile the user prefers brand on the LEFT
   and actions/hamburger on the RIGHT (so the drawer logically opens
   from the same side as the hamburger). `flex-direction: row-reverse`
   swaps the visual order without touching the DOM. LTR mobile already
   has brand-left/actions-right by default, so no change needed there. */
@media (max-width: 900px) {
  .rp-topbar-nav { display: none; }
  .rp-topbar-actions > .rp-btn { display: none; }
  /* With .rp-topbar-nav hidden the nav can't take `flex: 1` to push the
     brand and actions apart, so the two visible children clump together
     at the flex-start edge. `justify-content: space-between` pins them
     to opposite edges — brand at the start, actions at the end. */
  .rp-topbar-inner { justify-content: space-between; }
  [dir="rtl"] .rp-topbar-inner { flex-direction: row-reverse; }
}

/* ─── Buttons (matches design.html .btn / .btn-solid / .btn-copper) ────
   Every button is a pill (border-radius: 99px) — that's the design.html
   default. Default .rp-btn = transparent + line border + cream text.
   Variants change bg & text color. Sizes:
     .rp-btn      → 38px tall (design .btn)
     .rp-btn-lg   → 52px tall (design .btn-lg)
     .rp-btn-sm   → 32px tall (unchanged, legacy)
*/
.rp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  block-size: 38px; padding-inline: 16px;
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r-pill);
  background: transparent;
  color: var(--rp-t1);
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  line-height: 1; letter-spacing: normal;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--rp-t) var(--rp-ease),
              color var(--rp-t) var(--rp-ease),
              border-color var(--rp-t) var(--rp-ease),
              transform var(--rp-t) var(--rp-ease);
}
.rp-btn:hover { background: var(--rp-surf); }    /* design.html .btn:hover bg --bg-2 */
.rp-btn:focus-visible { outline: 2px solid var(--rp-primary); outline-offset: 2px; }
.rp-btn-sm { block-size: 32px; padding-inline: 12px; font-size: var(--rp-fs-xs); }
.rp-btn-lg { block-size: 52px; padding-inline: 28px; font-size: 16px; }
.rp-btn-block { display: flex; inline-size: 100%; }

/* Primary = copper bg + dark text (design.html .btn-copper) */
.rp-btn-primary { background: var(--rp-primary); border-color: var(--rp-primary); color: var(--rp-inverse); }
.rp-btn-primary:hover { background: var(--rp-primary-soft); border-color: var(--rp-primary-soft); color: var(--rp-inverse); transform: translateY(-1px); }
.rp-btn-primary:active { transform: scale(0.98); }

/* Solid (cream bg + dark text) — design.html .btn-solid; used as the
   topbar CTA "צרו קשר" equivalent. Kept aliased as .rp-btn-secondary
   so existing templates keep working. */
.rp-btn-secondary,
.rp-btn-solid {
  background: var(--rp-t1); color: var(--rp-inverse); border-color: var(--rp-t1);
}
.rp-btn-secondary:hover,
.rp-btn-solid:hover {
  background: var(--rp-cream-2); border-color: var(--rp-cream-2);
  color: var(--rp-inverse); transform: translateY(-1px);
}

.rp-btn-ghost { background: transparent; color: var(--rp-t1); border-color: transparent; }
.rp-btn-ghost:hover { background: var(--rp-surf); }
.rp-btn-link { color: var(--rp-primary); padding: 0; block-size: auto; border: 0; font-weight: 600; background: transparent; }
.rp-btn-link:hover { text-decoration: underline; text-underline-offset: 3px; background: transparent; }

/* Pill variants used inside copper hero / CTA blades (design.html .btn-solid
   inside .hero & .cta-block). Same pill shape, but different colors:
     .rp-btn-pill        → cream bg, dark text (inside copper blade)
     .rp-btn-pill-ghost  → transparent + white-ish border
   In the final CTA blade, the solid pill background is forced to --rp-inverse. */
.rp-btn-pill {
  background: var(--rp-primary-ink);  /* cream, on copper */
  color: var(--rp-inverse);
  border-color: transparent;
}
.rp-btn-pill:hover { background: #ffffff; }
.rp-btn-pill-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: var(--rp-primary-ink);
}
.rp-btn-pill-ghost:hover { background: rgba(0,0,0,0.14); }

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.rp-hero {
  position: relative;
  padding-block: var(--rp-s-12) var(--rp-s-11);
  overflow: hidden;
}
.rp-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 460px at 80% -10%, var(--rp-primary-bg-2) 0%, transparent 60%),
    radial-gradient(700px 360px at 0% 110%, var(--rp-primary-bg) 0%, transparent 55%);
  pointer-events: none; z-index: 0;
}
/* Reset legacy display:grid on .rp-hero-inner from the older stylesheet —
   in the redesign the grid moves down one level to .rp-hero-split. */
.rp-hero-inner {
  position: relative;
  z-index: 1;
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.rp-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--rp-s-10);
  align-items: center;
}
@media (max-width: 900px) {
  .rp-hero-split { grid-template-columns: 1fr; gap: var(--rp-s-9); }
}
.rp-hero-center { text-align: center; max-inline-size: 760px; margin-inline: auto; }
.rp-hero-center .rp-lead { margin-inline: auto; }

.rp-hero-cta {
  display: flex; gap: var(--rp-s-3); flex-wrap: wrap;
  margin-block-start: var(--rp-s-7);
}
.rp-hero-center .rp-hero-cta { justify-content: center; }

.rp-hero-microcopy {
  display: flex; flex-wrap: wrap; gap: var(--rp-s-3) var(--rp-s-5);
  margin-block-start: var(--rp-s-5);
  font-size: var(--rp-fs-sm); color: var(--rp-t2);
}
.rp-hero-center .rp-hero-microcopy { justify-content: center; }
.rp-hero-microcopy span { display: inline-flex; align-items: center; gap: 6px; }
.rp-hero-microcopy svg { color: var(--rp-success); flex-shrink: 0; }
.rp-hero-pricetag {
  margin-block-start: var(--rp-s-5);
  font-size: var(--rp-fs-sm); color: var(--rp-t2);
}
.rp-hero-pricetag strong { color: var(--rp-t1); font-weight: 700; }

/* Hero visual — fake dashboard mock */
/* Reset legacy .rp-hero-visual styling (background/border/aspect-ratio) so the
   inner .rp-mock card isn't double-wrapped. */
.rp-hero-visual {
  position: relative;
  perspective: 1400px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: auto;
}
.rp-mock {
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r3);
  box-shadow: var(--rp-e3);
  overflow: hidden;
  transform: rotateY(-3deg) rotateX(2deg);
}
[dir="rtl"] .rp-mock { transform: rotateY(3deg) rotateX(2deg); }
.rp-mock-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--rp-bg-2);
  border-block-end: 1px solid var(--rp-line);
}
.rp-mock-bar span {
  inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--rp-line-3);
}
.rp-mock-bar span:first-child { background: #ff5f57; }
.rp-mock-bar span:nth-child(2) { background: #febc2e; }
.rp-mock-bar span:nth-child(3) { background: #28c840; }
.rp-mock-bar-url {
  margin-inline-start: var(--rp-s-4);
  padding: 4px 10px;
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r-pill);
  color: var(--rp-t2);
  font-size: var(--rp-fs-xs);
}
.rp-mock-body { padding: var(--rp-s-6); display: grid; gap: var(--rp-s-4); }
.rp-mock-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--rp-s-4);
  align-items: center;
  padding: var(--rp-s-4);
  background: var(--rp-raise);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
}
.rp-mock-row-label { display: flex; align-items: center; gap: var(--rp-s-3); min-inline-size: 0; }
.rp-mock-row-icon {
  inline-size: 32px; block-size: 32px;
  display: grid; place-items: center;
  background: var(--rp-primary-bg); color: var(--rp-primary-soft);
  border-radius: var(--rp-r); flex-shrink: 0;
}
.rp-mock-row-icon.is-success { background: var(--rp-success-bg); color: var(--rp-success); }
.rp-mock-row-icon.is-warn    { background: var(--rp-warning-bg); color: var(--rp-warning); }
.rp-mock-row-title { font-weight: 600; color: var(--rp-t1); font-size: var(--rp-fs-sm); }
.rp-mock-row-sub   { color: var(--rp-t2); font-size: var(--rp-fs-xs); }
.rp-mock-row-stat  { font-weight: 700; font-size: var(--rp-fs-base); font-variant-numeric: tabular-nums; }
.rp-mock-row-stat.is-success { color: var(--rp-success); }
.rp-mock-row-stat.is-warn    { color: var(--rp-warning); }
.rp-mock-row-pill {
  padding: 2px 10px;
  background: var(--rp-success-bg); color: var(--rp-success);
  border-radius: var(--rp-r-pill);
  font-size: var(--rp-fs-xs); font-weight: 600;
}
.rp-mock-row-pill.is-warn { background: var(--rp-warning-bg); color: var(--rp-warning); }
.rp-mock-chart {
  display: flex; align-items: end; gap: 8px;
  block-size: 80px;
  padding: var(--rp-s-4);
  background: var(--rp-raise);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
}
.rp-mock-chart-col {
  flex: 1; background: linear-gradient(180deg, var(--rp-primary-soft), var(--rp-primary));
  border-radius: 4px 4px 0 0;
}

.rp-hero-float {
  position: absolute;
  inset-inline-start: -18px; inset-block-end: 32px;
  background: var(--rp-raise);
  border: 1px solid var(--rp-line-3);
  border-radius: var(--rp-r2);
  padding: var(--rp-s-3) var(--rp-s-4);
  box-shadow: var(--rp-e2);
  display: flex; align-items: center; gap: var(--rp-s-3);
  font-size: var(--rp-fs-sm);
}
.rp-hero-float-icon {
  inline-size: 36px; block-size: 36px;
  display: grid; place-items: center;
  background: var(--rp-success-bg); color: var(--rp-success);
  border-radius: var(--rp-r);
}
.rp-hero-float-title { font-weight: 600; }
.rp-hero-float-sub { color: var(--rp-t2); font-size: var(--rp-fs-xs); }

/* ─── Trust strip ──────────────────────────────────────────────────────── */
.rp-trust {
  padding-block: var(--rp-s-9);
  border-block: 1px solid var(--rp-line);
  background: var(--rp-bg-2);
}
.rp-trust-grid {
  display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--rp-s-8);
  align-items: center;
}
@media (max-width: 900px) { .rp-trust-grid { grid-template-columns: 1fr; gap: var(--rp-s-6); } }
.rp-trust-text { color: var(--rp-t2); font-size: var(--rp-fs-sm); }
.rp-trust-text strong { color: var(--rp-t1); font-weight: 700; }
.rp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rp-s-6); }
@media (max-width: 600px) { .rp-stats { grid-template-columns: 1fr; } }
.rp-stat-num {
  font-size: var(--rp-fs-3xl); font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  color: var(--rp-t1); font-variant-numeric: tabular-nums;
}
.rp-stat-num em { color: var(--rp-primary); font-style: normal; }
.rp-stat-label { color: var(--rp-t2); font-size: var(--rp-fs-sm); margin-block-start: 6px; }

/* ─── Cards & grids ────────────────────────────────────────────────────── */
.rp-card {
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  padding: var(--rp-s-6);
  color: var(--rp-t1);
}
.rp-card-compact { padding: var(--rp-s-4); }
.rp-card-spacious { padding: var(--rp-s-7); }
.rp-card-interactive {
  cursor: pointer;
  transition: transform var(--rp-t) var(--rp-ease),
              border-color var(--rp-t) var(--rp-ease),
              box-shadow var(--rp-t) var(--rp-ease);
}
.rp-card-interactive:hover {
  transform: translateY(-1px);
  border-color: var(--rp-line-3);
  box-shadow: var(--rp-e2);
}

.rp-grid { display: grid; gap: var(--rp-s-5); }
.rp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rp-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .rp-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .rp-grid-3, .rp-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 600px)  { .rp-grid-4 { grid-template-columns: 1fr; } }

/* ─── Feature category card ────────────────────────────────────────────── */
.rp-fcat { transition: transform var(--rp-t) var(--rp-ease), border-color var(--rp-t) var(--rp-ease); }
.rp-fcat:hover { transform: translateY(-1px); border-color: var(--rp-line-3); }
.rp-fcat-icon {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  background: var(--rp-primary-bg); color: var(--rp-primary-soft);
  border-radius: var(--rp-r);
  margin-block-end: var(--rp-s-4);
}
.rp-fcat-tag {
  display: inline-block;
  font-size: var(--rp-fs-xs); font-weight: 600;
  color: var(--rp-primary); letter-spacing: 0.06em; text-transform: uppercase;
  margin-block-end: var(--rp-s-2);
}
.rp-fcat h3 { font-size: var(--rp-fs-md); font-weight: 700; margin-block-end: var(--rp-s-2); }
.rp-fcat-desc { color: var(--rp-t2); font-size: var(--rp-fs-sm); line-height: var(--rp-lh-relaxed); margin-block-end: var(--rp-s-4); }
.rp-fcat-list { display: grid; gap: var(--rp-s-2); }
.rp-fcat-list li {
  display: flex; gap: var(--rp-s-2); align-items: start;
  color: var(--rp-t1); font-size: var(--rp-fs-sm);
}
.rp-fcat-list svg { color: var(--rp-success); flex-shrink: 0; margin-block-start: 2px; }

/* ─── Outcomes (zig-zag rows) ──────────────────────────────────────────── */
.rp-outcomes { display: grid; gap: var(--rp-s-6); margin-block-start: var(--rp-s-8); }
.rp-outcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--rp-s-9);
  align-items: center;
  padding: var(--rp-s-9);
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r3);
}
@media (max-width: 900px) {
  .rp-outcome { grid-template-columns: 1fr; padding: var(--rp-s-6); gap: var(--rp-s-6); }
  .rp-outcome.is-reverse .rp-outcome-text { order: 1; }
  .rp-outcome.is-reverse .rp-outcome-visual { order: 2; }
}
.rp-outcome.is-reverse .rp-outcome-text { order: 2; }
.rp-outcome.is-reverse .rp-outcome-visual { order: 1; }
.rp-outcome-num {
  display: inline-flex; align-items: baseline; gap: var(--rp-s-2);
  color: var(--rp-primary);
  font-weight: 800; font-size: var(--rp-fs-2xl);
  letter-spacing: -0.02em;
  margin-block-end: var(--rp-s-3);
}
.rp-outcome-num span { font-size: var(--rp-fs-md); color: var(--rp-primary-soft); }
.rp-outcome h3 {
  font-size: var(--rp-fs-2xl); font-weight: 700; line-height: var(--rp-lh-snug);
  letter-spacing: -0.02em;
  margin-block-end: var(--rp-s-4);
}
.rp-outcome p { color: var(--rp-t2); font-size: var(--rp-fs-md); line-height: var(--rp-lh-relaxed); max-inline-size: 50ch; }
.rp-outcome-visual {
  background: var(--rp-raise);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  padding: var(--rp-s-6);
  min-block-size: 240px;
  display: grid; gap: var(--rp-s-3);
}
.rp-outcome-vrow {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--rp-s-3) var(--rp-s-4);
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r);
  font-size: var(--rp-fs-sm);
}
.rp-outcome-vrow strong { color: var(--rp-success); font-variant-numeric: tabular-nums; }
.rp-outcome-vrow.is-old strong { color: var(--rp-t3); text-decoration: line-through; }

/* ─── Steps ────────────────────────────────────────────────────────────── */
.rp-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rp-s-5);
  margin-block-start: var(--rp-s-8);
}
@media (max-width: 900px) { .rp-steps { grid-template-columns: 1fr; } }
.rp-step {
  position: relative;
  padding: var(--rp-s-7) var(--rp-s-6);
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
}
.rp-step-num {
  position: absolute;
  inset-block-start: -22px;
  inset-inline-start: var(--rp-s-6);
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  background: var(--rp-primary); color: #fff;
  font-weight: 800; font-size: var(--rp-fs-lg);
  border-radius: var(--rp-r);
  box-shadow: var(--rp-e-glow);
}
.rp-step h3 { font-size: var(--rp-fs-md); font-weight: 700; margin-block: var(--rp-s-4) var(--rp-s-2); }
.rp-step p { color: var(--rp-t2); font-size: var(--rp-fs-sm); line-height: var(--rp-lh-relaxed); }
.rp-step-time {
  display: inline-flex; align-items: center; gap: 6px;
  margin-block-start: var(--rp-s-4);
  padding: 4px 10px;
  background: var(--rp-success-bg); color: var(--rp-success);
  border-radius: var(--rp-r-pill);
  font-size: var(--rp-fs-xs); font-weight: 600;
}

/* ─── Pricing ──────────────────────────────────────────────────────────── */
.rp-pricing {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rp-s-5);
  align-items: stretch;
}
@media (max-width: 900px) { .rp-pricing { grid-template-columns: 1fr; } }
.rp-plan {
  position: relative;
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  padding: var(--rp-s-7);
  display: flex; flex-direction: column; gap: var(--rp-s-4);
}
.rp-plan.is-featured {
  background: linear-gradient(180deg, rgba(150,82,21,0.06) 0%, var(--rp-surf) 60%);
  border-color: var(--rp-primary);
  box-shadow: var(--rp-e2);
}
.rp-plan-badge {
  position: absolute;
  inset-block-start: -12px; inset-inline-end: var(--rp-s-6);
  padding: 4px 10px;
  background: var(--rp-primary); color: #fff;
  border-radius: var(--rp-r-pill);
  font-size: var(--rp-fs-xs); font-weight: 700;
  letter-spacing: 0.04em;
}
.rp-plan-name { font-size: var(--rp-fs-lg); font-weight: 700; }
.rp-plan-sub  { color: var(--rp-t2); font-size: var(--rp-fs-sm); }
.rp-plan-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-block: var(--rp-s-2);
}
.rp-plan-price strong { font-size: var(--rp-fs-3xl); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rp-plan-price span { color: var(--rp-t2); font-size: var(--rp-fs-sm); }
.rp-plan-features { display: grid; gap: var(--rp-s-2); margin-block: var(--rp-s-3); }
.rp-plan-features li {
  display: flex; align-items: start; gap: var(--rp-s-2);
  font-size: var(--rp-fs-sm); color: var(--rp-t1);
}
.rp-plan-features svg { color: var(--rp-success); flex-shrink: 0; margin-block-start: 2px; }
.rp-plan-features li.is-off { color: var(--rp-t3); }
.rp-plan-features li.is-off svg { color: var(--rp-t3); }
/* Suppress the legacy ::before pseudo-checkmark — redesign templates render
   an inline <svg> per li, so the pseudo-element would double-stamp the icon. */
.rp-plan-features li::before { content: none; display: none; }
.rp-plan-cta { margin-block-start: auto; }
.rp-plan-cta .rp-btn { inline-size: 100%; }
.rp-pricing-foot {
  margin-block-start: var(--rp-s-7);
  text-align: center; color: var(--rp-t2); font-size: var(--rp-fs-sm);
}
.rp-pricing-foot strong { color: var(--rp-t1); }

/* Pricing toggle */
.rp-pricing-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r-pill);
  padding: 4px;
  margin-block-end: var(--rp-s-7);
}
.rp-pricing-toggle button {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--rp-r-pill);
  color: var(--rp-t2); font-size: var(--rp-fs-sm); font-weight: 600;
  font-family: inherit;
}
.rp-pricing-toggle button.is-active { background: var(--rp-primary); color: #fff; }
.rp-pricing-toggle .save {
  font-size: var(--rp-fs-xs); color: var(--rp-success); font-weight: 700;
}

/* Comparison matrix */
.rp-matrix {
  inline-size: 100%; border-collapse: collapse;
  font-size: var(--rp-fs-sm); color: var(--rp-t1);
}
.rp-matrix th, .rp-matrix td {
  padding: var(--rp-s-3) var(--rp-s-4);
  text-align: start;
  border-block-end: 1px solid var(--rp-line);
  vertical-align: middle;
}
.rp-matrix thead th {
  background: var(--rp-bg-2);
  color: var(--rp-t2); font-weight: 600;
  border-block-end: 1px solid var(--rp-line-3);
}
.rp-matrix thead th.is-featured { color: var(--rp-primary); }
.rp-matrix .rp-col-numeric { text-align: end; font-variant-numeric: tabular-nums; }
.rp-matrix tbody tr:hover td { background: var(--rp-lift); }
.rp-matrix-group td {
  background: var(--rp-bg-2);
  font-weight: 700;
  color: var(--rp-primary-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--rp-fs-xs);
}
.rp-matrix .yes { color: var(--rp-success); }
.rp-matrix .no  { color: var(--rp-t3); }

/* ─── Testimonials ─────────────────────────────────────────────────────── */
.rp-quotes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rp-s-5);
}
@media (max-width: 900px) { .rp-quotes { grid-template-columns: 1fr; } }
.rp-quote {
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  padding: var(--rp-s-6);
  display: flex; flex-direction: column; gap: var(--rp-s-4);
}
.rp-quote-mark {
  color: var(--rp-primary);
  font-size: var(--rp-fs-3xl); font-weight: 800; line-height: 1;
}
.rp-quote-body {
  font-size: var(--rp-fs-md);
  line-height: var(--rp-lh-relaxed);
  color: var(--rp-t1);
}
.rp-quote-by { display: flex; align-items: center; gap: var(--rp-s-3); margin-block-start: auto; }
.rp-quote-av {
  inline-size: 40px; block-size: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rp-primary), var(--rp-primary-deep));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--rp-fs-sm);
}
.rp-quote-name { font-weight: 600; color: var(--rp-t1); font-size: var(--rp-fs-sm); }
.rp-quote-role { color: var(--rp-t2); font-size: var(--rp-fs-xs); }

/* ─── FAQ — canonical accordion (see components.md §12) ───────────────── */
.rp-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rp-s-3);
  max-inline-size: 820px;
  margin-inline: auto;
}
.rp-faq {
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  overflow: hidden;
  transition: border-color var(--rp-t) var(--rp-ease), background var(--rp-t) var(--rp-ease);
}
.rp-faq:hover { border-color: var(--rp-line-3); }
.rp-faq[open] {
  border-color: var(--rp-primary);
  background:
    linear-gradient(180deg, rgba(150,82,21,0.05) 0%, var(--rp-surf) 100%);
}
.rp-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rp-s-4);
  padding: var(--rp-s-5) var(--rp-s-6);
  font-weight: 600;
  color: var(--rp-t1);
  font-size: var(--rp-fs-md);
  line-height: var(--rp-lh-snug);
  letter-spacing: -0.01em;
  user-select: none;
  transition: color var(--rp-t) var(--rp-ease);
}
.rp-faq summary::-webkit-details-marker { display: none; }
.rp-faq summary::marker { display: none; }
.rp-faq summary:hover { color: var(--rp-primary); }
.rp-faq summary:focus-visible { outline: 2px solid var(--rp-primary); outline-offset: -2px; }
.rp-faq[open] summary { color: var(--rp-primary); }

/* Chevron icon — pure CSS, swaps color + rotates on open */
.rp-faq summary::after {
  content: "";
  flex-shrink: 0;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--rp-r);
  background-color: var(--rp-lift);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%239d9db0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transition:
    transform var(--rp-t) var(--rp-ease),
    background-color var(--rp-t) var(--rp-ease);
}
.rp-faq:hover summary::after {
  background-color: var(--rp-primary-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%23c89066' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.rp-faq[open] summary::after {
  transform: rotate(180deg);
  background-color: var(--rp-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.rp-faq-body {
  padding: 0 var(--rp-s-6) var(--rp-s-6);
  color: var(--rp-t2);
  font-size: var(--rp-fs-sm);
  line-height: var(--rp-lh-relaxed);
  max-inline-size: 65ch;
}
.rp-faq-body p:not(:first-child) { margin-block-start: var(--rp-s-3); }
.rp-faq-body a {
  color: var(--rp-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rp-faq-cat-title {
  font-size: var(--rp-fs-lg);
  font-weight: 700;
  color: var(--rp-t1);
  letter-spacing: -0.01em;
  margin-block: var(--rp-s-9) var(--rp-s-4);
  display: flex; align-items: center; gap: var(--rp-s-3);
}
.rp-faq-cat-title::before {
  content: "";
  inline-size: 4px;
  block-size: 22px;
  background: var(--rp-primary);
  border-radius: var(--rp-r-sm);
}
.rp-faq-cat-title:first-of-type { margin-block-start: 0; }
.rp-faq-search {
  margin-block-end: var(--rp-s-7);
  max-inline-size: 460px; margin-inline: auto;
}

/* ─── Promo banner (replaces older email-gate look on tool pages) ─────── */
.rp-promo-banner {
  margin-block-start: var(--rp-s-7);
  padding: var(--rp-s-7);
  background:
    radial-gradient(500px 200px at 80% 30%, var(--rp-primary-bg-2), transparent 70%),
    var(--rp-raise);
  border: 1px solid var(--rp-primary);
  border-radius: var(--rp-r2);
  display: grid;
  gap: var(--rp-s-5);
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media (max-width: 720px) {
  .rp-promo-banner { grid-template-columns: 1fr; text-align: center; }
}
.rp-promo-banner h3 {
  font-size: var(--rp-fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-block-end: var(--rp-s-2);
}
.rp-promo-banner p {
  color: var(--rp-t2);
  font-size: var(--rp-fs-sm);
  line-height: var(--rp-lh-relaxed);
  max-inline-size: 60ch;
}
.rp-promo-banner-actions { display: flex; gap: var(--rp-s-3); flex-wrap: wrap; }

/* ─── Testimonial cards (canonical) ───────────────────────────────────── */
.rp-testimonials {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rp-s-5);
}
@media (max-width: 900px) { .rp-testimonials { grid-template-columns: 1fr; } }
.rp-testimonial {
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  padding: var(--rp-s-6);
  display: flex; flex-direction: column; gap: var(--rp-s-4);
}
.rp-testimonial-mark {
  color: var(--rp-primary);
  font-size: var(--rp-fs-3xl);
  font-weight: 800;
  line-height: 0.6;
}
.rp-testimonial-body {
  color: var(--rp-t1);
  font-size: var(--rp-fs-md);
  line-height: var(--rp-lh-relaxed);
}
.rp-testimonial-by {
  display: flex; align-items: center; gap: var(--rp-s-3);
  margin-block-start: auto;
  padding-block-start: var(--rp-s-4);
  border-block-start: 1px solid var(--rp-line);
}
.rp-testimonial-avatar {
  inline-size: 40px; block-size: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rp-primary), var(--rp-primary-deep));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--rp-fs-sm);
}
.rp-testimonial-name { font-weight: 600; color: var(--rp-t1); font-size: var(--rp-fs-sm); }
.rp-testimonial-role { color: var(--rp-t2); font-size: var(--rp-fs-xs); }

/* Single hero testimonial (used on the home page) */
.rp-testimonial-hero {
  max-inline-size: 760px;
  margin: 0 auto;
  padding: var(--rp-s-9) var(--rp-s-8);
  background:
    radial-gradient(500px 220px at 80% 20%, var(--rp-primary-bg), transparent 70%),
    var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r3);
  text-align: center;
  display: grid; gap: var(--rp-s-5);
  justify-items: center;
}
.rp-testimonial-hero-mark {
  color: var(--rp-primary);
  font-size: var(--rp-fs-5xl);
  font-weight: 800;
  line-height: 0.5;
}
.rp-testimonial-hero-body {
  margin: 0;
  font-size: clamp(var(--rp-fs-lg), 2.4vw, var(--rp-fs-xl));
  line-height: var(--rp-lh-snug);
  letter-spacing: -0.01em;
  color: var(--rp-t1);
  font-weight: 500;
  max-inline-size: 60ch;
}
.rp-testimonial-hero-by {
  display: flex; align-items: center; gap: var(--rp-s-3);
  text-align: start;
}

/* ─── Forms ────────────────────────────────────────────────────────────── */
.rp-field { display: flex; flex-direction: column; gap: var(--rp-s-2); }
.rp-field-label { font-size: var(--rp-fs-sm); font-weight: 500; color: var(--rp-t1); }
.rp-field-hint  { font-size: var(--rp-fs-sm); color: var(--rp-t2); line-height: var(--rp-lh-normal); max-inline-size: 65ch; }
.rp-field-error { font-size: var(--rp-fs-sm); color: var(--rp-error); }
.rp-input, .rp-textarea, .rp-select {
  display: block; inline-size: 100%;
  padding-block: 10px; padding-inline: 14px; min-block-size: 40px;
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r);
  background: var(--rp-surf); color: var(--rp-t1);
  font-family: inherit; font-size: var(--rp-fs-base);
  line-height: var(--rp-lh-normal);
  transition: border-color var(--rp-t) var(--rp-ease), background var(--rp-t) var(--rp-ease);
}
.rp-input::placeholder, .rp-textarea::placeholder { color: var(--rp-t3); }
.rp-input:hover, .rp-textarea:hover, .rp-select:hover { border-color: var(--rp-line-3); }
.rp-input:focus-visible, .rp-textarea:focus-visible, .rp-select:focus-visible {
  outline: 2px solid var(--rp-primary); outline-offset: 2px;
  border-color: var(--rp-primary);
}
.rp-textarea { min-block-size: 120px; resize: vertical; }

/* ─── Tool gallery ─────────────────────────────────────────────────────── */
.rp-tool-card {
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  padding: var(--rp-s-6);
  display: flex; flex-direction: column; gap: var(--rp-s-3);
  transition: transform var(--rp-t) var(--rp-ease), border-color var(--rp-t) var(--rp-ease);
}
.rp-tool-card:hover { transform: translateY(-1px); border-color: var(--rp-line-3); }
.rp-tool-icon {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  background: var(--rp-primary-bg); color: var(--rp-primary-soft);
  border-radius: var(--rp-r);
}
.rp-tool-name { font-size: var(--rp-fs-md); font-weight: 700; }
.rp-tool-desc { color: var(--rp-t2); font-size: var(--rp-fs-sm); line-height: var(--rp-lh-relaxed); }
.rp-tool-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-block-start: auto;
  padding-block-start: var(--rp-s-3);
  border-block-start: 1px solid var(--rp-line);
}
.rp-tool-meta { font-size: var(--rp-fs-xs); color: var(--rp-t3); }
.rp-tool-cta {
  color: var(--rp-primary); font-weight: 600; font-size: var(--rp-fs-sm);
  display: inline-flex; align-items: center; gap: 4px;
}

/* ─── Blog ─────────────────────────────────────────────────────────────── */
.rp-featured-post {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--rp-s-8);
  align-items: center;
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r3);
  overflow: hidden;
  margin-block-end: var(--rp-s-9);
}
@media (max-width: 900px) { .rp-featured-post { grid-template-columns: 1fr; } }
.rp-featured-post-image {
  block-size: 100%;
  min-block-size: 320px;
  background: linear-gradient(135deg, var(--rp-primary-deep), var(--rp-primary));
  display: grid; place-items: center;
  color: rgba(255,255,255,0.8);
  font-size: var(--rp-fs-3xl); font-weight: 800;
}
.rp-featured-post-content { padding: var(--rp-s-8); }
.rp-featured-post-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--rp-primary-bg); color: var(--rp-primary-soft);
  border-radius: var(--rp-r-pill);
  font-size: var(--rp-fs-xs); font-weight: 600;
  margin-block-end: var(--rp-s-3);
}
.rp-featured-post-title {
  font-size: clamp(1.5rem, 3vw, var(--rp-fs-2xl));
  font-weight: 700; line-height: var(--rp-lh-snug); letter-spacing: -0.02em;
  margin-block-end: var(--rp-s-3);
}
.rp-featured-post-excerpt { color: var(--rp-t2); margin-block-end: var(--rp-s-5); }
.rp-featured-post-meta { color: var(--rp-t3); font-size: var(--rp-fs-xs); margin-block-start: var(--rp-s-4); }

.rp-post-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rp-s-6);
}
@media (max-width: 900px) { .rp-post-grid { grid-template-columns: 1fr; } }
.rp-post-card {
  display: flex; flex-direction: column; gap: var(--rp-s-3);
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  overflow: hidden;
  transition: transform var(--rp-t) var(--rp-ease), border-color var(--rp-t) var(--rp-ease);
}
.rp-post-card:hover { transform: translateY(-1px); border-color: var(--rp-line-3); }
.rp-post-card-image {
  block-size: 180px;
  background: linear-gradient(135deg, var(--rp-primary-deep), var(--rp-primary));
  display: grid; place-items: center;
  color: rgba(255,255,255,0.7);
  font-weight: 700; font-size: var(--rp-fs-xl);
}
.rp-post-card-body { padding: var(--rp-s-5); display: flex; flex-direction: column; gap: var(--rp-s-2); flex: 1; }
.rp-post-card-meta { color: var(--rp-t3); font-size: var(--rp-fs-xs); }
.rp-post-card-title { font-size: var(--rp-fs-md); font-weight: 700; line-height: var(--rp-lh-snug); letter-spacing: -0.01em; }
.rp-post-card-excerpt { color: var(--rp-t2); font-size: var(--rp-fs-sm); line-height: var(--rp-lh-relaxed); flex: 1; }

/* Pagination + filter */
.rp-pagination {
  display: flex; justify-content: center; gap: var(--rp-s-2);
  margin-block-start: var(--rp-s-8);
}
.rp-pagination a {
  display: inline-grid; place-items: center;
  min-inline-size: 36px; block-size: 36px;
  padding-inline: var(--rp-s-3);
  background: var(--rp-surf); border: 1px solid var(--rp-line);
  border-radius: var(--rp-r);
  color: var(--rp-t2); font-size: var(--rp-fs-sm); font-weight: 600;
}
.rp-pagination a:hover { color: var(--rp-t1); border-color: var(--rp-line-3); }
.rp-pagination a.is-active { background: var(--rp-primary); color: #fff; border-color: var(--rp-primary); }

.rp-chips { display: flex; flex-wrap: wrap; gap: var(--rp-s-2); justify-content: center; margin-block-start: var(--rp-s-8); }
.rp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--rp-surf); border: 1px solid var(--rp-line);
  border-radius: var(--rp-r-pill);
  color: var(--rp-t2); font-size: var(--rp-fs-sm); font-weight: 500;
  transition: color var(--rp-t) var(--rp-ease), border-color var(--rp-t) var(--rp-ease), background var(--rp-t) var(--rp-ease);
}
.rp-chip:hover { color: var(--rp-t1); border-color: var(--rp-line-3); }
.rp-chip.is-active { background: var(--rp-primary-bg); color: var(--rp-primary); border-color: var(--rp-primary); }

/* ─── Single post article ──────────────────────────────────────────────── */
.rp-article-meta {
  display: flex; gap: var(--rp-s-3); align-items: center;
  color: var(--rp-t2); font-size: var(--rp-fs-sm);
  margin-block-end: var(--rp-s-4);
}
.rp-article-meta a { color: var(--rp-primary); font-weight: 600; }
.rp-article-meta .dot { color: var(--rp-t3); }
.rp-article-title {
  font-size: clamp(2rem, 4vw, var(--rp-fs-4xl));
  font-weight: 800; line-height: var(--rp-lh-tight); letter-spacing: -0.02em;
  margin-block-end: var(--rp-s-4);
}
.rp-article-excerpt {
  font-size: var(--rp-fs-md);
  color: var(--rp-t2);
  line-height: var(--rp-lh-relaxed);
  margin-block-end: var(--rp-s-8);
  max-inline-size: 65ch;
}
.rp-article-hero {
  border-radius: var(--rp-r3); overflow: hidden;
  block-size: 360px;
  background: linear-gradient(135deg, var(--rp-primary-deep), var(--rp-primary));
  display: grid; place-items: center;
  color: rgba(255,255,255,0.8);
  font-size: var(--rp-fs-3xl); font-weight: 800;
  margin-block-end: var(--rp-s-9);
}
.rp-article-body {
  max-inline-size: 65ch;
  font-size: var(--rp-fs-md);
  line-height: var(--rp-lh-relaxed);
  color: var(--rp-t1);
}
.rp-article-body h2 {
  font-size: var(--rp-fs-2xl); font-weight: 700; line-height: var(--rp-lh-snug); letter-spacing: -0.02em;
  margin-block: var(--rp-s-9) var(--rp-s-4);
}
.rp-article-body h3 {
  font-size: var(--rp-fs-xl); font-weight: 600; line-height: var(--rp-lh-snug); letter-spacing: -0.01em;
  margin-block: var(--rp-s-7) var(--rp-s-3);
}
.rp-article-body p { margin-block: var(--rp-s-4); color: var(--rp-t1); }
.rp-article-body ul, .rp-article-body ol { margin-block: var(--rp-s-4); padding-inline-start: var(--rp-s-6); list-style: disc; }
.rp-article-body ul li, .rp-article-body ol li { margin-block: var(--rp-s-2); color: var(--rp-t1); }
.rp-article-body strong { color: var(--rp-t1); }
.rp-article-body a { color: var(--rp-primary); text-decoration: underline; text-underline-offset: 3px; }
.rp-article-body blockquote {
  margin-block: var(--rp-s-7);
  padding-inline-start: var(--rp-s-5);
  border-inline-start: 3px solid var(--rp-primary);
  color: var(--rp-t1);
  font-size: var(--rp-fs-lg);
}
.rp-article-body code {
  font-family: 'JetBrains Mono', 'Heebo', ui-monospace, Menlo, monospace;
  background: var(--rp-lift);
  padding: 2px 6px;
  border-radius: var(--rp-r-sm);
  font-size: 0.9em;
}

.rp-article-cta {
  margin-block: var(--rp-s-9);
  padding: var(--rp-s-7);
  background: var(--rp-raise);
  border: 1px solid var(--rp-primary);
  border-radius: var(--rp-r2);
  text-align: center;
}
.rp-article-cta h3 { font-size: var(--rp-fs-lg); margin-block-end: var(--rp-s-3); }
.rp-article-cta p { color: var(--rp-t2); margin-block-end: var(--rp-s-4); }

/* ─── Tool detail ──────────────────────────────────────────────────────── */
.rp-tool-form {
  display: flex; gap: var(--rp-s-3); flex-wrap: wrap;
  max-inline-size: 640px;
}
.rp-tool-form .rp-input { flex: 1; min-inline-size: 240px; }
.rp-tool-result {
  margin-block-start: var(--rp-s-8);
  padding: var(--rp-s-7);
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r3);
}
.rp-score-ring {
  inline-size: 120px; block-size: 120px;
  border-radius: 50%;
  background:
    conic-gradient(var(--rp-success) 0% 84%, var(--rp-lift) 84% 100%);
  display: grid; place-items: center;
  position: relative;
}
.rp-score-ring::after {
  content: ""; position: absolute; inset: 10px;
  background: var(--rp-surf); border-radius: 50%;
}
.rp-score-ring-text {
  position: relative; z-index: 1;
  font-size: var(--rp-fs-2xl); font-weight: 800;
  color: var(--rp-success);
}
.rp-checklist { display: grid; gap: var(--rp-s-3); margin-block-start: var(--rp-s-6); }
.rp-check-row {
  display: flex; gap: var(--rp-s-3); align-items: start;
  padding: var(--rp-s-3) var(--rp-s-4);
  background: var(--rp-raise);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r);
  font-size: var(--rp-fs-sm);
}
.rp-check-row-icon { flex-shrink: 0; margin-block-start: 2px; }
.rp-check-row.is-pass .rp-check-row-icon { color: var(--rp-success); }
.rp-check-row.is-warn .rp-check-row-icon { color: var(--rp-warning); }
.rp-check-row.is-fail .rp-check-row-icon { color: var(--rp-error); }
.rp-check-row-title { font-weight: 600; color: var(--rp-t1); }
.rp-check-row-sub { color: var(--rp-t2); font-size: var(--rp-fs-xs); margin-block-start: 2px; }

.rp-unlock-gate {
  margin-block-start: var(--rp-s-7);
  padding: var(--rp-s-7);
  background: var(--rp-raise);
  border: 1px dashed var(--rp-primary);
  border-radius: var(--rp-r2);
  text-align: center;
}
.rp-unlock-gate h3 { font-size: var(--rp-fs-lg); margin-block-end: var(--rp-s-2); }
.rp-unlock-gate p  { color: var(--rp-t2); margin-block-end: var(--rp-s-4); }
.rp-unlock-form { display: flex; gap: var(--rp-s-2); max-inline-size: 460px; margin-inline: auto; flex-wrap: wrap; }
.rp-unlock-form .rp-input { flex: 1; min-inline-size: 220px; }

/* ─── Legal / prose page ───────────────────────────────────────────────── */
.rp-legal {
  font-size: var(--rp-fs-base);
  line-height: var(--rp-lh-relaxed);
  color: var(--rp-t1);
  max-inline-size: 720px;
  margin-inline: auto;
}
.rp-legal h2 {
  font-size: var(--rp-fs-xl); font-weight: 700;
  letter-spacing: -0.01em;
  margin-block: var(--rp-s-9) var(--rp-s-3);
  color: var(--rp-t1);
}
.rp-legal h2:first-of-type { margin-block-start: var(--rp-s-6); }
.rp-legal p { margin-block: var(--rp-s-3); color: var(--rp-t2); }
.rp-legal ul, .rp-legal ol { margin-block: var(--rp-s-3); padding-inline-start: var(--rp-s-6); list-style: disc; color: var(--rp-t2); }
.rp-legal li { margin-block: var(--rp-s-2); }
.rp-legal strong { color: var(--rp-t1); }
.rp-legal a { color: var(--rp-primary); text-decoration: underline; text-underline-offset: 3px; }
.rp-legal-meta {
  color: var(--rp-t3); font-size: var(--rp-fs-sm);
  border-block-end: 1px solid var(--rp-line);
  padding-block-end: var(--rp-s-4);
  margin-block-end: var(--rp-s-7);
}

/* ─── Contact ──────────────────────────────────────────────────────────── */
.rp-contact-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--rp-s-9);
  align-items: start;
}
@media (max-width: 900px) { .rp-contact-grid { grid-template-columns: 1fr; } }
.rp-contact-form {
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r3);
  padding: var(--rp-s-8);
}
.rp-contact-form > * + * { margin-block-start: var(--rp-s-5); }
.rp-contact-cards { display: grid; gap: var(--rp-s-3); }
.rp-contact-card {
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  padding: var(--rp-s-5);
  display: flex; gap: var(--rp-s-3); align-items: center;
}
.rp-contact-card-icon {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  background: var(--rp-primary-bg); color: var(--rp-primary-soft);
  border-radius: var(--rp-r);
}
.rp-contact-card-label { color: var(--rp-t2); font-size: var(--rp-fs-xs); }
.rp-contact-card-value { color: var(--rp-t1); font-weight: 600; }
.rp-contact-sla {
  margin-block-start: var(--rp-s-4);
  padding: var(--rp-s-4);
  background: var(--rp-success-bg);
  border: 1px solid rgba(52,211,153,0.25);
  border-radius: var(--rp-r2);
  font-size: var(--rp-fs-sm);
  color: var(--rp-t1);
}

/* ─── Final CTA ────────────────────────────────────────────────────────── */
.rp-cta-block {
  position: relative; overflow: hidden;
  padding: var(--rp-s-12) var(--rp-s-9);
  background:
    radial-gradient(600px 280px at 70% 30%, var(--rp-primary-bg-2), transparent 70%),
    var(--rp-raise);
  border: 1px solid var(--rp-primary);
  border-radius: var(--rp-r3);
  text-align: center;
}
.rp-cta-block h2 {
  font-size: clamp(1.875rem, 4vw, var(--rp-fs-4xl));
  font-weight: 800; line-height: var(--rp-lh-tight); letter-spacing: -0.02em;
  margin-block-end: var(--rp-s-4);
}
.rp-cta-block p {
  color: var(--rp-t2);
  font-size: var(--rp-fs-md);
  margin: 0 auto var(--rp-s-7);
  max-inline-size: 56ch;
}
.rp-cta-actions { display: inline-flex; gap: var(--rp-s-3); flex-wrap: wrap; justify-content: center; }
.rp-cta-fineprint { margin-block-start: var(--rp-s-5); color: var(--rp-t3); font-size: var(--rp-fs-xs); }

/* ─── 404 / 500 ────────────────────────────────────────────────────────── */
.rp-error-page {
  display: grid; place-items: center;
  min-block-size: 70vh;
  padding-block: var(--rp-s-11);
  text-align: center;
}
.rp-error-code {
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--rp-primary-soft), var(--rp-primary-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-block-end: var(--rp-s-3);
}
.rp-error-title {
  font-size: clamp(1.5rem, 3vw, var(--rp-fs-2xl));
  font-weight: 700; letter-spacing: -0.02em;
  margin-block-end: var(--rp-s-3);
}
.rp-error-lead { color: var(--rp-t2); max-inline-size: 50ch; margin: 0 auto var(--rp-s-7); }
.rp-error-suggest {
  margin-block-start: var(--rp-s-9);
  padding-block-start: var(--rp-s-7);
  border-block-start: 1px solid var(--rp-line);
  max-inline-size: 560px; margin-inline: auto;
}
.rp-error-suggest h3 { font-size: var(--rp-fs-md); margin-block-end: var(--rp-s-4); color: var(--rp-t1); }
.rp-error-suggest .rp-chips { margin-block-start: 0; }

/* ─── Footer (matches design.html footer spec verbatim) ────────────────── */
/* IMPORTANT: explicitly reset the legacy rankplus-site.css `.rp-footer`
   rule, which adds `background: var(--rp-bg-2)` (#101015) and
   `border-top: 1px solid var(--rp-line)`. design.html footer has NO
   background fill and NO top border — only the inner `.foot-bottom`
   has a divider rule. Without these resets, you see two stacked
   border lines on the live site (top border + bottom-row border). */
.rp-footer {
  padding-block: 72px 40px;       /* design.html footer padding */
  color: var(--rp-t1);
  background: transparent;        /* override legacy --rp-bg-2 fill */
  border-block-start: 0;          /* override legacy 1px top border  */
}

/* 5 cells exactly per design.html .foot-grid: brand (1.4fr) + 4 link cols.
   The 4 link cols are Product / Resources / Company / Latest article.
   Legal links go in the bottom row (also matching design).
   IMPORTANT: explicit resets below kill legacy `.rp-footer-grid` props
   (`border-bottom: 1px solid var(--rp-line); padding-bottom: 48px;
   margin-bottom: 28px`) — those produced a SECOND border strip stacked
   above the bottom row's divider. */
.rp-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  border-block-end: 0;            /* override legacy 1px bottom border */
  padding-block-end: 0;           /* override legacy padding-bottom 48 */
  margin-block-end: 0;            /* override legacy margin-bottom 28  */
}
@media (max-width: 980px) { .rp-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .rp-footer-grid { grid-template-columns: 1fr; } }

.rp-footer-brand img.rp-footer-brand-img {
  block-size: 28px;               /* design.html .foot-brand img */
  inline-size: auto;
  margin-block-end: 16px;
}
.rp-footer-tagline {
  color: var(--rp-t2);            /* design.html .foot-brand p */
  max-inline-size: 32ch;
  font-size: 14px;
  margin: 0 0 18px;
  line-height: var(--rp-lh-relaxed);
}

/* Social cluster — design.html has none in the footer, but we keep ours
   below the tagline as a compact icon row (icon-only links, hairline
   border, copper on hover). */
.rp-footer-social {
  list-style: none;
  display: flex; gap: 10px; align-items: center;
  padding: 0; margin: 0;
}
.rp-footer-social li { display: inline-flex; }
.rp-footer-social a {
  display: grid; place-items: center;
  inline-size: 36px; block-size: 36px;
  background: var(--rp-surf);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r);
  color: var(--rp-t2);
  transition:
    color var(--rp-t) var(--rp-ease),
    border-color var(--rp-t) var(--rp-ease),
    background var(--rp-t) var(--rp-ease),
    transform var(--rp-t) var(--rp-ease);
}
.rp-footer-social svg { inline-size: 16px; block-size: 16px; }
.rp-footer-social svg.rp-icon-whatsapp { inline-size: 18px; block-size: 18px; }
.rp-footer-social a:hover {
  color: var(--rp-primary);
  border-color: var(--rp-primary);
  background: var(--rp-primary-bg);
  transform: translateY(-1px);
}
.rp-footer-social a:focus-visible {
  outline: 2px solid var(--rp-primary);
  outline-offset: 2px;
}

/* Link columns — bare anchors, no <ul>. design.html: `.foot-col a` is a
   block-level link with 5px vertical padding.
   `min-inline-size: 0` is CRITICAL: grid items default to `min-width:
   auto` which resolves to min-content (the longest unbreakable child).
   For the Latest articles col with `white-space: nowrap` on long post
   titles, that pushes the cell wider than the viewport on mobile and
   creates horizontal scroll. Zeroing the min lets text-overflow:
   ellipsis actually kick in and the col stays inside the viewport. */
.rp-footer-col {
  display: flex; flex-direction: column;
  min-inline-size: 0;
}
.rp-footer-heading {
  font-size: 13px;                /* design.html .foot-col h6 */
  font-weight: 700;
  color: var(--rp-t2);            /* MUTED — design uses --muted here */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}
.rp-footer-col a {
  display: block;
  padding-block: 5px;             /* design.html .foot-col a */
  color: var(--rp-cream-2);       /* design uses --cream-2, lighter than body muted */
  font-size: 14.5px;
  transition: color var(--rp-t) var(--rp-ease);
}
.rp-footer-col a:hover { color: var(--rp-t1); }

/* Latest articles col: post titles can be long. Clamp each link to a
   single line with ellipsis (works because .rp-footer-col has
   min-inline-size: 0 above, letting the cell shrink below content
   min-width on mobile). max-inline-size: 100% pins each anchor to its
   cell so the ellipsis triggers instead of overflowing. */
.rp-footer-col-latest a {
  display: block;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

/* Bottom row — copyright + legal links + EN/HE switcher */
.rp-footer-bottom {
  margin-block-start: 56px;       /* design.html .foot-bottom margin */
  padding-block-start: 22px;
  border-block-start: 1px solid var(--rp-line-2);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  color: var(--rp-t2);            /* MUTED to match design --muted */
  font-size: 13.5px;
}
.rp-footer-copy { margin: 0; }
.rp-footer-bottom-links {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
}
.rp-footer-bottom-links a {
  color: var(--rp-t2);
  font-size: 13.5px;
  transition: color var(--rp-t) var(--rp-ease);
}
.rp-footer-bottom-links a:hover { color: var(--rp-t1); }


/* ─────────────────────────────────────────────────────────────────────────
   Home-page redesign (May 2026): copper hero & CTA blades, logos strip,
   capability grid, stats band, numbered feature grid, workflow diagram,
   and the mega-menu dropdowns in the topbar.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Topbar mega menu ─────────────────────────────────────────────────── */
.rp-nav-item { position: relative; }
.rp-nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;                  /* design.html .nav-item > button */
  color: var(--rp-cream-2);           /* design.html (was --rp-t2 muted)        */
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--rp-r);
  cursor: pointer;
  transition: color var(--rp-t) var(--rp-ease),
              background var(--rp-t) var(--rp-ease),
              border-color var(--rp-t) var(--rp-ease);
}
.rp-nav-trigger:hover,
.rp-nav-item:hover .rp-nav-trigger,
.rp-nav-item:focus-within .rp-nav-trigger,
.rp-nav-item.is-open .rp-nav-trigger {
  color: var(--rp-t1);
  background: var(--rp-surf);          /* design.html --bg-2 (was --rp-lift)    */
  border-color: var(--rp-line-2);      /* design.html --line-soft               */
}
.rp-nav-trigger .rp-chev {
  inline-size: 10px; block-size: 10px;
  opacity: 0.7;
  transition: transform var(--rp-t) var(--rp-ease);
}
.rp-nav-item:hover .rp-chev,
.rp-nav-item:focus-within .rp-chev,
.rp-nav-item.is-open .rp-chev { transform: rotate(180deg); }

/* Invisible hover bridge so the cursor can travel from trigger → panel
   without dismissing the menu.
   NOTE: uses physical `left:50%` not `inset-inline-start:50%` — both
   `left` and the `translateX(-50%)` below are physical, so pairing
   them is the only way the panel stays centered in both LTR and RTL
   (mixing logical `inset-inline-start` with physical `translateX`
   pushed the panel off to one side in RTL). */
/* Invisible bridge so the cursor can travel from trigger → panel without
   the menu dismissing. `left:50%` + `translateX(-50%)` is the only
   centering combo that works in both LTR and RTL — see note in the
   topbar header above. */
.rp-mega-bridge {
  position: absolute;
  inset-block-start: 100%;
  /* Same rule as .rp-mega: only physical `left` + `transform`. No
     inset-inline-* resets — those break RTL centering. */
  left: 50%;
  transform: translateX(-50%);
  inline-size: 500px;                       /* matches mega width */
  block-size: 18px;
  display: none;
}
.rp-nav-item:hover .rp-mega-bridge,
.rp-nav-item:focus-within .rp-mega-bridge,
.rp-nav-item.is-open .rp-mega-bridge { display: block; pointer-events: auto; }

/* Mega panel centered below its trigger.
   The rightmost trigger sits ~290px from the viewport edge in our RTL
   nav layout (brand + 36px gap + nav-item padding). For the panel to
   stay centered AND fit, max width = 2 × 290 = 580px. design.html's
   720px physically cannot center here — would always overflow.
   500px gives generous safety margin on every viewport from 1280px
   laptop and up. Explicit `right: auto` and inset-inline-* resets
   defeat any cascade weirdness from legacy CSS that might be fighting
   the centering. 2-col grid keeps items readable at the narrower width. */
.rp-mega {
  position: absolute;
  inset-block-start: calc(100% + 14px);     /* design.html .mega top  */
  /* CRITICAL: only set physical `left` + `transform`. Do NOT set
     `inset-inline-start` or `inset-inline-end` here — in RTL,
     `inset-inline-end: auto` resolves to `left: auto`, which silently
     overrides our `left: 50%` (logical wins later in cascade) and
     leaves the panel at its static flow position (= flush with the
     trigger's right edge in RTL). That looks broken / unaligned to
     the user. */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  inline-size: 500px;                        /* tuned to stay CENTERED on every laptop */
  max-inline-size: calc(100vw - 32px);       /* safety net for very narrow viewports */
  background: var(--rp-surf);                /* design.html --bg-2 (#161619) — NOT --rp-bg-2 */
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  padding: 22px;                             /* design.html .mega padding */
  box-shadow:
    0 24px 48px -20px rgba(0,0,0,0.6),       /* design.html .mega box-shadow */
    0 8px 18px -8px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;                               /* design.html .mega z-index */
}
.rp-nav-item:hover .rp-mega,
.rp-nav-item:focus-within .rp-mega,
.rp-nav-item.is-open .rp-mega {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);  /* keep translateX(-50%) for centering */
}
.rp-mega-grid {
  display: grid;
  /* design.html uses 3 cols at 720px panel width (~240px per col). Our
     panel is 560px (to fit centered on every laptop), so 2 cols
     (~280px each) is the readable choice. */
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;                                   /* design.html .mega-grid gap */
}
.rp-mega-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;                                  /* design.html .mega-item gap */
  align-items: start;
  padding: 14px;                              /* design.html .mega-item padding */
  border-radius: var(--rp-r2);               /* design.html .mega-item radius 10 */
  color: var(--rp-t1);                       /* design.html color: cream */
  text-align: start;
  transition: background .12s ease;
}
.rp-mega-item:hover,
.rp-mega-item:focus-visible { background: var(--rp-raise); outline: none; }    /* design.html --bg-3 */
.rp-mega-icon {
  inline-size: 24px; block-size: 24px;       /* design.html .mi-ic */
  color: var(--rp-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.rp-mega-item-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.rp-mega-name { font-weight: 600; font-size: 14.5px; color: var(--rp-t1); }    /* design.html .mi-name */
.rp-mega-desc { font-size: 12.5px; color: var(--rp-t2); line-height: 1.4; }    /* design.html .mi-desc */
.rp-mega-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-block-start: 8px;                    /* design.html .mega-foot */
  padding: 14px 14px 6px;
  border-block-start: 1px solid var(--rp-line-2);  /* design.html --line-soft */
  color: var(--rp-t2);                       /* design.html .mega-foot color */
  font-size: 13px;
}
.rp-mega-foot a { color: var(--rp-primary); font-weight: 600; }
.rp-mega-foot a:hover { color: var(--rp-primary-soft); }

/* On narrow viewports the mega menu collapses into the mobile drawer instead
   — hide the hover panel so it can't overflow. */
@media (max-width: 900px) {
  .rp-nav-item, .rp-mega, .rp-mega-bridge { display: none; }
}

/* ─── Hero blade (copper background, full-bleed) ──────────────────────────
   IMPORTANT: the hero blade is NOT wrapped in `.rp-container` — it goes
   full viewport-width, controlled only by .rp-blade-pad (matching
   design.html .hero-pad: 18px top / 14px sides / 28px bottom). */
.rp-blade-pad { padding: 18px 14px 28px; }
@media (max-width: 720px) { .rp-blade-pad { padding-inline: 0; } }
.rp-hero-blade {
  position: relative;
  background: var(--rp-primary);
  border-radius: var(--rp-r2);
  overflow: hidden;
  padding: 130px 56px 150px;                /* design.html .hero */
  text-align: center;
  color: var(--rp-primary-ink);
}
@media (max-width: 720px) {
  .rp-hero-blade { padding: 72px 20px 80px; border-radius: 0; }
}
.rp-hero-blade::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(0,0,0,0.22), transparent 60%);
}
.rp-hero-blade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.9) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.9) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 75%);
}
.rp-hero-blade-title {
  position: relative; z-index: 1;
  font-family: inherit;
  font-weight: 700;                         /* design.html (was 800)            */
  font-size: clamp(48px, 7.4vw, 116px);     /* design.html (was 40-7vw-104px)   */
  line-height: 0.98;                         /* design.html                      */
  letter-spacing: -0.015em;                 /* design.html (was -0.02em)        */
  margin: 0 auto;
  max-inline-size: 17ch;
  text-wrap: balance;
  color: var(--rp-primary-ink);             /* design.html --copper-ink         */
}
.rp-hero-blade-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--rp-primary-ink);
}
.rp-hero-blade-sub {
  position: relative; z-index: 1;
  max-inline-size: 56ch; margin: var(--rp-s-7) auto 0;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
}
.rp-hero-blade-cta {
  position: relative; z-index: 1;
  margin-block-start: var(--rp-s-8);
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
/* .rp-btn-pill / .rp-btn-pill-ghost already cover the hero blade button
   styling — see the buttons block at the top of this file. No per-blade
   overrides needed. */
.rp-hero-blade-foot {
  position: relative; z-index: 1;
  margin-block-start: var(--rp-s-5);
  font-size: var(--rp-fs-xs);
  color: rgba(255,255,255,0.8);
}

/* ─── Logos strip (lightweight trust row) ──────────────────────────────── */
.rp-logos-strip {
  border-block: 1px solid var(--rp-line-2);
  padding-block: var(--rp-s-7);
}
.rp-logos-inner {
  display: flex; align-items: center; gap: var(--rp-s-9);
  justify-content: space-between; flex-wrap: wrap;
}
.rp-logos-label {
  font-size: var(--rp-fs-xs); color: var(--rp-t2);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.rp-logos-row {
  display: flex; gap: var(--rp-s-7); flex-wrap: wrap; align-items: center;
  color: var(--rp-t2);
  font-size: var(--rp-fs-sm);
}
.rp-logos-row svg { color: var(--rp-t3); }
.rp-logos-row strong { color: var(--rp-t1); font-weight: 600; }

/* ─── Section head — left-aligned variant (matches new design) ─────────── */
.rp-section-head-left {
  text-align: start;
  max-inline-size: 880px;             /* design.html .section-head (was 60ch)  */
  margin-block-end: 64px;              /* design.html (was --rp-s-9 / 48px)     */
  display: flex; flex-direction: column; gap: 14px;
}
.rp-section-head-left .rp-lead { margin-inline: 0; }
.rp-eyebrow-bar {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px;                     /* design.html .eyebrow                  */
  color: var(--rp-primary);            /* design.html (was --rp-primary-soft)   */
  font-weight: 700;
  letter-spacing: 0.06em;              /* design.html (was 0.08em)              */
  text-transform: uppercase;
}
.rp-eyebrow-bar::before {
  content: "";
  inline-size: 28px; block-size: 1px;
  background: var(--rp-primary);
  display: inline-block;
}
.rp-h2-display {
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 64px);   /* design.html section title (was 28-56) */
  line-height: 1.02;                      /* design.html (was 1.05)                */
  letter-spacing: -0.01em;                /* design.html (was -0.015em)            */
  margin: 0;
  text-wrap: balance;
}
.rp-h2-display em {
  font-style: italic;
  font-weight: 500;
  color: var(--rp-primary);
}

/* ─── Capability grid (12-col with tall variant) ───────────────────────── */
.rp-cap-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--rp-s-4);
}
.rp-cap {
  grid-column: span 4;
  display: flex; flex-direction: column; gap: 14px;     /* design.html .cap */
  position: relative; overflow: hidden;
  background: var(--rp-surf);                            /* design.html --bg-2 */
  border: 1px solid var(--rp-line-2);
  border-radius: var(--rp-r2);
  padding: 32px;                                         /* design.html .cap */
  min-block-size: 320px;                                 /* design.html (was 300) */
  transition:
    transform var(--rp-t) var(--rp-ease),
    border-color var(--rp-t) var(--rp-ease),
    background var(--rp-t) var(--rp-ease);
}
.rp-cap:hover {
  transform: translateY(-3px);                           /* design.html (was -2) */
  border-color: var(--rp-primary-deep);
  background: var(--rp-raise);                           /* design.html --bg-3 */
}
.rp-cap--tall { grid-column: span 8; }
.rp-cap--full { grid-column: span 12; }
.rp-cap-icon {
  inline-size: 44px; block-size: 44px;
  border-radius: var(--rp-r2);                           /* design.html (was --rp-r) */
  background: var(--rp-primary-bg);
  color: var(--rp-primary);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rp-primary-bg-2);
}
.rp-cap-icon svg { inline-size: 22px; block-size: 22px; }
.rp-cap h3 {
  font-weight: 700;
  font-size: 26px;                                       /* design.html (was --rp-fs-xl / 24) */
  line-height: 1.15;                                     /* design.html (was 1.2) */
  margin-block-start: 4px;
  letter-spacing: -0.005em;
}
.rp-cap p { color: var(--rp-t2); margin: 0; font-size: 15.5px; line-height: var(--rp-lh-relaxed); } /* design.html (was --rp-fs-sm) */
.rp-cap-link {
  margin-block-start: auto;
  display: inline-flex; align-items: center; gap: var(--rp-s-2);
  color: var(--rp-primary); font-weight: 600; font-size: var(--rp-fs-sm);
}
.rp-cap-link:hover { color: var(--rp-primary-soft); }
.rp-cap-link svg { inline-size: 16px; block-size: 16px; }
/* The SVG path is a leftward chevron (`<`), which is the correct "forward"
   direction in Hebrew RTL reading flow. In LTR (English) we mirror it so
   the arrow reads "forward → right" instead of "back ← left". */
[dir="ltr"] .rp-cap-link svg { transform: scaleX(-1); }

/* Tall cap mini-stats row */
.rp-cap-stats {
  margin-block-start: var(--rp-s-3);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rp-s-3);
}
.rp-cap-stat {
  background: var(--rp-surf);
  border: 1px solid var(--rp-line-2);
  border-radius: var(--rp-r);
  padding: var(--rp-s-4);
}
.rp-cap-stat-num {
  font-weight: 700;
  font-size: var(--rp-fs-2xl);
  color: var(--rp-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.rp-cap-stat-num small {
  font-size: var(--rp-fs-base);
  color: var(--rp-t2);
  font-weight: 500;
  margin-inline-start: 4px;
}
.rp-cap-stat-num.is-success { color: var(--rp-success); }
.rp-cap-stat-num.is-warning { color: var(--rp-warning); }
.rp-cap-stat-label { font-size: var(--rp-fs-xs); color: var(--rp-t2); margin-block-start: 4px; }

@media (max-width: 960px) {
  .rp-cap, .rp-cap--tall, .rp-cap--full { grid-column: span 12; }
  .rp-cap-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .rp-cap-stats { grid-template-columns: 1fr; }
}

/* ─── Stats band ───────────────────────────────────────────────────────── */
.rp-stats-band {
  background: var(--rp-bg);
  border-block: 1px solid var(--rp-line-2);
}
.rp-stats-band-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.rp-stats-band-cell {
  padding-block: var(--rp-s-10);
  padding-inline: var(--rp-s-7);
  border-inline-start: 1px solid var(--rp-line-2);
}
.rp-stats-band-cell:first-child { border-inline-start: 0; }
.rp-stats-band-big {
  font-weight: 700;                                /* design.html .stat .big */
  font-size: clamp(48px, 5vw, 80px);                /* design.html (was 40-72) */
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rp-primary);
}
.rp-stats-band-big small {
  color: var(--rp-t1);
  font-size: 0.5em;
  font-weight: 700;
}
.rp-stats-band-label {
  color: var(--rp-t2);
  margin-block-start: 12px;                         /* design.html .stat .lab */
  font-size: 14.5px;                                 /* design.html (was --rp-fs-sm) */
  max-inline-size: 28ch;
}
@media (max-width: 960px) {
  .rp-stats-band-grid { grid-template-columns: repeat(2, 1fr); }
  .rp-stats-band-cell:nth-child(3) { border-inline-start: 0; }
  .rp-stats-band-cell { padding-block: var(--rp-s-8); padding-inline: var(--rp-s-6); }
}
@media (max-width: 540px) {
  .rp-stats-band-grid { grid-template-columns: 1fr; }
  .rp-stats-band-cell { border-inline-start: 0; border-block-start: 1px solid var(--rp-line-2); }
  .rp-stats-band-cell:first-child { border-block-start: 0; }
}

/* ─── Numbered feature grid ────────────────────────────────────────────── */
.rp-numfeat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rp-line-2);
  border: 1px solid var(--rp-line-2);
  border-radius: var(--rp-r2);
  overflow: hidden;
}
.rp-numfeat {
  background: var(--rp-bg);
  padding: 40px 36px;                                /* design.html .feat */
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;                                          /* design.html .feat gap */
  align-items: start;
}
.rp-numfeat-num {
  font-weight: 500; font-style: italic;
  font-size: 36px;                                    /* design.html .feat .num */
  color: var(--rp-primary);
  line-height: 1;
}
.rp-numfeat h4 {
  font-weight: 700;
  font-size: 22px;                                    /* design.html .feat h4 (was --rp-fs-xl) */
  margin-block-end: 8px;
  color: var(--rp-t1);
}
.rp-numfeat p { color: var(--rp-t2); margin: 0; font-size: 15px; line-height: var(--rp-lh-relaxed); }  /* design.html .feat p */
@media (max-width: 720px) {
  .rp-numfeat-grid { grid-template-columns: 1fr; }
  .rp-numfeat { padding: var(--rp-s-7) var(--rp-s-6); }
}

/* ─── Workflow diagram ─────────────────────────────────────────────────── */
.rp-flow {
  margin-block-start: 36px;                  /* design.html .flow */
  background: var(--rp-surf);                /* design.html --bg-2 */
  border: 1px solid var(--rp-line-2);
  border-radius: var(--rp-r2);
  padding: 40px;                              /* design.html .flow */
}
.rp-flow-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);     /* design.html .flow-row */
  gap: 0; align-items: center;
}
.rp-flow-node {
  background: var(--rp-raise);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r2);
  padding: 22px 16px;                         /* design.html .flow-node */
  text-align: center;
}
.rp-flow-node-icon {
  inline-size: 36px; block-size: 36px;        /* design.html .flow-node .ic */
  margin: 0 auto 10px;
  color: var(--rp-primary);
  display: grid; place-items: center;
}
.rp-flow-node-icon svg { inline-size: 36px; block-size: 36px; }
.rp-flow-node-name { font-weight: 700; font-size: 14.5px; color: var(--rp-t1); }    /* design.html */
.rp-flow-node-sub { font-size: 12px; color: var(--rp-t2); margin-block-start: 4px; } /* design.html */
.rp-flow-arrow {
  display: grid; place-items: center;
  color: var(--rp-primary); opacity: 0.7;
}
.rp-flow-arrow svg { inline-size: 28px; block-size: 12px; }
/* RTL: the arrow body still points "forward" in reading direction. */
[dir="rtl"] .rp-flow-arrow svg { transform: scaleX(-1); }
@media (max-width: 900px) {
  .rp-flow-row { grid-template-columns: 1fr; }
  .rp-flow-arrow { transform: rotate(90deg); padding-block: var(--rp-s-3); }
  [dir="rtl"] .rp-flow-arrow svg { transform: scaleX(1); }
}

/* ─── Copper CTA blade (final CTA, full-bleed) ─────────────────────────
   IMPORTANT: NOT wrapped in `.rp-container`. The blade spans nearly the
   full viewport width with its own outside margin (matching design.html
   .cta-block: margin 18px 14px 28px). */
.rp-cta-blade {
  position: relative;
  margin: 18px 14px 28px;                   /* design.html .cta-block margin */
  background: var(--rp-primary);
  border-radius: var(--rp-r2);
  padding: 100px 56px;                       /* design.html .cta-block padding */
  text-align: center;
  overflow: hidden;
  color: var(--rp-primary-ink);
}
@media (max-width: 720px) {
  .rp-cta-blade { margin: 18px 0 28px; border-radius: 0; padding: 64px 20px; }
}
.rp-cta-blade::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(0,0,0,0.22), transparent 60%);
}
.rp-cta-blade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.9) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.9) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 75%);
}
.rp-cta-blade-title {
  position: relative; z-index: 1;
  font-weight: 700;                          /* design.html (was 800)              */
  font-size: clamp(40px, 5.6vw, 84px);       /* design.html (was 36-76)            */
  line-height: 1; letter-spacing: -0.015em;
  margin: 0; color: var(--rp-primary-ink);
  text-wrap: balance;
}
.rp-cta-blade-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--rp-primary-ink);
}
.rp-cta-blade-lead {
  position: relative; z-index: 1;
  color: rgba(255,255,255,0.9);
  margin: var(--rp-s-5) auto 0;
  max-inline-size: 50ch;
  font-size: var(--rp-fs-md);
}
.rp-cta-blade-actions {
  position: relative; z-index: 1;
  margin-block-start: var(--rp-s-7);
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
/* Inside the copper CTA blade the primary pill swaps from cream→dark
   (per design.html .cta-block .btn-solid override). The ghost variant
   inherits its border + transparent style from the global .rp-btn-pill-ghost
   so no override needed. */
.rp-cta-blade-actions .rp-btn-pill {
  background: var(--rp-inverse); color: var(--rp-primary-ink); border-color: transparent;
}
.rp-cta-blade-actions .rp-btn-pill:hover { background: var(--rp-surf); }

/* ─── Quote block (large editorial quote — design.html .quote-wrap) ───── */
.rp-quote-wrap {
  padding-block: 110px;                          /* design.html .quote-wrap */
  border-block-end: 1px solid var(--rp-line-2);
}
.rp-quote-display {
  margin: 0; max-inline-size: 1000px;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);            /* design.html (was 24-44) */
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--rp-t1);
}
.rp-quote-display .rp-quote-mark {
  color: var(--rp-primary);
  font-style: italic;
  margin-inline-end: 4px;
}
.rp-quote-by {
  margin-block-start: 28px;                       /* design.html .quote-by */
  display: flex; align-items: center; gap: 14px;
}
.rp-quote-by-av {
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rp-primary), var(--rp-primary-deep));
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: var(--rp-fs-sm);
}
.rp-quote-by-name { font-weight: 700; color: var(--rp-t1); }
.rp-quote-by-role { color: var(--rp-t2); font-size: var(--rp-fs-xs); }

/* Section divider (replaces the heavier .rp-section border on the home
   redesign — used between major blocks so each section has air on top
   AND a hairline rule under it). */
.rp-section-divider { border-block-end: 1px solid var(--rp-line-2); }

/* ─── Lang toggle button + drawer lang link (replaces inline styles) ───── */
.rp-lang-toggle-btn {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
}
.rp-drawer-link-lang {
  font-weight: 700;
  letter-spacing: .04em;
}


/* Prototype dev-bar rules intentionally omitted in production build. */