/* ============================================================
 * rv-core.css - shared "rv-" design-system core
 *
 * The section styles shared by the RevOps/Engineering landing pages built
 * on the rv- class vocabulary: the hero (rv-rh-*), the Gap (rv-gap-*),
 * leakage (rv-leak-*), the maturity rail (rv-matx-*), the service-line
 * list (rv-svc-*), the deliverables sheet (rv-delsheet-*), the stack
 * marquee (rv-stackx-*), pillars, FAQ, objections and the closing band,
 * plus the primitives those rely on (rv-h2, rv-label, rv-cta,
 * rv-section-head, rv-instrument, rv-reveal).
 *
 * Enqueued by every page template on this vocabulary via
 * devrix_enqueue_rv_page(), so the base is downloaded and cached once
 * instead of duplicated per template. A template adds only its own new
 * rules in assets/css/lp/<slug>.css, loaded after this file.
 *
 * Colour tokens come from the shared _rv-tokens.scss and are not
 * redeclared here. A page template wrapper element must carry the
 * "rv-root" class for these rules to apply.
 *
 * History: this was assets/css/lp/data-engineering.css, which had already
 * accumulated the shared vocabulary for that lineage of designs. It moved
 * here verbatim apart from this header, when the nine Engineering
 * service-line pages were built on the same vocabulary. It therefore
 * still holds some selectors only one page uses, and a scoped override
 * for demand-generation that is inert here. Pruning it is a safe
 * follow-up, not a prerequisite.
 * ============================================================ */

/* This page's own accent is blue, not the shared site-chrome's green
   (`--dxc-acid`, used by the header/mega-menu/footer partials on every
   page). Scoped to this template's body class only, so the other
   "night" pages that share header.php/footer.php keep their real green. */
body.page-template-templatesdemand-generation-php {
  --dxc-acid: #2a7de1;
}

.rv-root {
  background: var(--rv-black);
  color: var(--rv-white);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11", "tnum";
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  display: block;
}



.rv-root * { box-sizing: border-box; }


.rv-root > section {
  display: block;
  margin: 0;
  width: 100%;
  position: relative;
  scroll-margin: 0;
  scroll-padding: 0;
}


.rv-root > section + section { margin-top: 0; }


.rv-root a { color: inherit; text-decoration: none; }


.rv-root button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }


.rv-root :focus-visible { outline: 2px solid var(--rv-blue); outline-offset: 3px; }



.rv-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}



.rv-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: currentColor;
}


.rv-label-rule {
  width: 28px; height: 1px; background: var(--rv-blue); display: inline-block;
}



.rv-h2 {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5.5vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 24px 0 0;
}



.rv-display {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(58px, 8vw, 130px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 20px 0 20px;
}


.rv-display em { font-style: normal; color: var(--rv-blue); }


.rv-display--sm { font-size: clamp(50px, 6.8vw, 114px); }



.rv-mask { display: block; overflow: hidden; padding: 0.05em 0; }


.rv-mask-in {
  display: block;
  transform: translateY(102%);
  transition: transform 900ms cubic-bezier(0.2, 0.9, 0.2, 1.05);
}


.is-in .rv-mask:nth-child(1) .rv-mask-in { transform: translateY(0); transition-delay: 60ms; }


.is-in .rv-mask:nth-child(2) .rv-mask-in { transform: translateY(0); transition-delay: 200ms; }


.is-in .rv-mask:nth-child(3) .rv-mask-in { transform: translateY(0); transition-delay: 340ms; }



.rv-hero .rv-mask {
  overflow: visible;
}


.rv-hero .rv-mask-in {
  transform: none;
  transition: none;
}



/* CTA */
.rv-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px;
  border: 1px solid var(--rv-blue);
  color: var(--rv-white);
  font-weight: 600; font-size: 17px; letter-spacing: 0.01em;
  transition: background 120ms steps(1), color 120ms steps(1);
}


.rv-cta:hover { background: var(--rv-blue); color: var(--rv-black); }


.rv-cta-arrow { transition: transform 200ms cubic-bezier(0.2, 0.9, 0.2, 1); }


.rv-cta:hover .rv-cta-arrow { transform: translateX(4px); }


.rv-sublink {
  font-family: "JetBrains Mono", monospace; font-size: 14px;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7;
  border-bottom: 1px solid var(--rv-hair-strong); padding-bottom: 4px;
}


.rv-sublink:hover { opacity: 1; color: var(--rv-blue); border-color: var(--rv-blue); }


.rv-cta-row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }



/* =============== S1 HERO =============== */
.rv-hero {
  position: relative;
  min-height: auto;
  background: var(--rv-black);
  padding: 24px 48px 8px;
  display: block;
  overflow: hidden;
}


.rv-hero::before { content: none; }



.rv-hero-inner {
  margin-top: clamp(16px, 3vh, 32px);
  max-width: 1080px;
  padding-left: calc(100% / 12);
  padding-right: 48px;
  position: relative; z-index: 2;
}



.rv-lede {
  max-width: 560px;
  font-size: 20px;
  line-height: 1.5;
  opacity: 0.72;
  margin: 0 0 12px;
}



/* Hero composite Action + Trust band */
.rv-hero .rv-cta-row { justify-content: flex-start; margin-top: 4px; }


.rv-hero .rv-cta-row .rv-cta { padding: 18px 28px; font-size: 22px; letter-spacing: 0.01em; gap: 16px; }


.rv-hero .rv-cta-row .rv-cta-arrow { font-size: 24px; }


.rv-action-trust-stat .rv-num { color: var(--rv-blue); font-size: 22px; margin-right: 4px; }



.rv-instrument {
  position: absolute;
  right: 0; top: 50%;
  width: 62%; height: 200px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}


.rv-instr-base { stroke: var(--rv-hair); stroke-width: 1; }


.rv-instrument--resolved .rv-instr-resolve {
  stroke: var(--rv-blue); stroke-width: 2; fill: none;
  stroke-dasharray: 1500; stroke-dashoffset: 1500;
}


.is-in .rv-instr-resolve {
  animation: rv-instr 2000ms cubic-bezier(0.4, 0, 0.2, 1) 300ms forwards;
}


.rv-trust-stat .rv-num { color: var(--rv-blue); font-size: 22px; margin-right: 4px; }



/* =============== S3 DIAGNOSIS =============== */
.rv-diag {
  background: var(--rv-white);
  color: var(--rv-ink);
  padding: 140px 48px;
}


.rv-diag.is-in .rv-finding { opacity: 1; transform: translateY(0); }


.rv-dash-head .rv-h2 { font-size: clamp(30px, 3.4vw, 50px); }


.rv-snapshot-num .rv-num { font-size: 58px; font-weight: 700; line-height: 1; color: var(--rv-white); }



/* =============== S5 LEAKAGE =============== */
.rv-leak {
  background: var(--rv-white);
  color: var(--rv-ink);
  padding: 48px 48px 140px;
  margin-top: 0;
}


.rv-leak-head { max-width: 900px; margin-bottom: 72px; }


.rv-scanner-num .rv-num { font-size: 58px; font-weight: 700; color: var(--rv-ink); line-height: 1; }



/* =============== S6 MATURITY =============== */
.rv-mat { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px 64px; }


.rv-mat-head { max-width: 900px; margin-bottom: 72px; }


.rv-mat.is-in .rv-bpcard { opacity: 1; transform: translateY(0); }


.rv-method-head .rv-h2 { font-size: clamp(30px, 3.6vw, 54px); }



/* =============== S9 OUTCOMES =============== */
.rv-outcomes { background: var(--rv-fog); color: var(--rv-ink); padding: 96px 48px; }


.rv-out-head { max-width: 900px; margin-bottom: 72px; }


.rv-kpistack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 40px; }


.rv-kpi {
  background: var(--rv-white);
  border: 1px solid var(--rv-hair-dark-strong);
  padding: 48px 32px;
  position: relative;
  opacity: 0; transform: translateY(30px);
  transition: opacity 700ms cubic-bezier(0.2,0.9,0.2,1), transform 700ms cubic-bezier(0.2,0.9,0.2,1.08), z-index 200ms;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15);
  z-index: 1;
}


.rv-outcomes.is-in .rv-kpi { opacity: 1; transform: translateY(0); }


.rv-kpi:nth-child(1) { transform: translateY(-16px); margin-right: -24px; }


.rv-kpi:nth-child(2) { transform: translateY(16px); z-index: 2; }


.rv-kpi:nth-child(3) { transform: translateY(-8px); margin-left: -24px; }


.rv-outcomes.is-in .rv-kpi:nth-child(1) { transform: translateY(-16px); }


.rv-outcomes.is-in .rv-kpi:nth-child(2) { transform: translateY(16px); }


.rv-outcomes.is-in .rv-kpi:nth-child(3) { transform: translateY(-8px); }


/* No hover effect on these cards on the reference (checked directly,
   transform/border stay identical while hovered); this used to force a
   z-index lift with `!important`, beating every other rule in the file. */


.rv-kpi-num { display: flex; align-items: baseline; gap: 4px; }


.rv-kpi-num .rv-num, .rv-kpi-num > span:first-child { font-size: 90px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--rv-ink); font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }


.rv-kpi-suffix { font-size: 42px; font-weight: 700; color: var(--rv-blue); font-family: "JetBrains Mono", monospace; }


.rv-kpi-label { font-size: 17px; line-height: 1.55; margin-top: 20px; opacity: 0.72; max-width: 260px; }


.rv-kpi-id { position: absolute; top: 20px; right: 24px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; opacity: 0.4; }



/* =============== S10 CASE FILE =============== */
.rv-case { background: var(--rv-white); color: var(--rv-ink); padding: 140px 48px; }


.rv-case-head { max-width: 900px; margin-bottom: 56px; }


.rv-folder {
  position: relative;
  border: 1px solid var(--rv-ink);
  padding: 72px 64px 64px;
  max-width: 1100px;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.2,0.9,0.2,1.05), opacity 800ms ease-out;
}


.rv-case.is-in .rv-folder { transform: scale(1); opacity: 1; }


.rv-folder-tab {
  position: absolute; top: -1px; left: 40px; transform: translateY(-100%);
  background: var(--rv-ink); color: var(--rv-white);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.14em;
  padding: 12px 24px;
}


.rv-folder-body { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; }


.rv-quote {
  font-family: "Inter", serif;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.2; font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 780px;
  position: relative;
}


.rv-quote-mark { color: var(--rv-blue); font-size: 1.4em; line-height: 0; position: relative; top: 0.3em; margin-right: 8px; }


.rv-quote-attr { margin-top: 32px; grid-column: 1; }


.rv-quote-name { display: block; font-weight: 700; font-size: 16px; }


.rv-quote-role { display: block; font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-top: 4px; }


.rv-case-metric { grid-column: 2; grid-row: 1 / span 2; text-align: right; border-left: 1px solid var(--rv-hair-dark); padding-left: 32px; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }


.rv-case-metric-id { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; opacity: 0.5; }


.rv-case-metric-num .rv-num { font-size: 74px; font-weight: 800; color: var(--rv-blue); letter-spacing: -0.03em; }


.rv-case-metric-label { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }



/* =============== S11 CLOSE =============== */
.rv-close {
  position: relative;
  min-height: 0;
  background: var(--rv-black);
  padding: 96px 48px 32px;
  display: block;
  overflow: hidden;
  border-top: 1px solid var(--rv-hair);
}


.rv-close .rv-hero-inner { margin-top: 0; }


.rv-close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}


.rv-close .rv-hero-inner { position: relative; z-index: 2; }



@media (prefers-reduced-motion: reduce) {
  .rv-mask-in { transform: none !important; transition: none !important; }
  .rv-instr-pulse, .rv-instr-resolve { stroke-dashoffset: 0 !important; animation: none !important; }
  .rv-finding, .rv-bpcard, .rv-kpi, .rv-ledger-row, .rv-panel, .rv-folder, .rv-dash-cta {
    opacity: 1 !important; transform: none !important;
  }
}




/* =================================================================
   REBUILD: 13-section content architecture
   Reuses design tokens defined above.
   ================================================================= */

.rv-root { scroll-behavior: smooth; }



/* ---- shared section head ---- */
.rv-section-head { max-width: 900px; margin: 0 0 64px; display: flex; flex-direction: column; gap: 20px; }


.rv-section-lede { font-size: 20px; line-height: 1.55; opacity: 0.72; margin: 0; max-width: 720px; }



/* ---- HEADER ---- */
.rv-header {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
  padding: 18px 48px;
  background: rgba(26,26,26,0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rv-hair);
}


.rv-header-logo img { height: 36px; width: auto; display: block; }


.rv-header-nav { display: flex; gap: 28px; justify-content: center; font-size: 15px; letter-spacing: 0.02em; }


.rv-header-nav a { color: rgba(255,255,255,0.75); }


.rv-header-nav a:hover { color: var(--rv-blue); }


.rv-header-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border: 1px solid var(--rv-blue); color: var(--rv-white);
  font-size: 15px; font-weight: 600;
}


.rv-header-cta:hover { background: var(--rv-blue); color: var(--rv-black); }


@media (max-width: 900px) {
  .rv-header { grid-template-columns: auto auto; padding: 14px 20px; }
  .rv-header-nav { display: none; }
}



/* ---- STICKY CTA ---- */
.rv-stickycta {
  position: fixed; bottom: 24px; right: 24px; z-index: 45;
  padding: 14px 22px; background: var(--rv-blue); color: var(--rv-white);
  font-weight: 700; font-size: 16px; letter-spacing: 0.02em;
  display: inline-flex; gap: 10px; align-items: center;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.2,0.9,0.2,1);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}


.rv-stickycta.is-in { opacity: 1; transform: translateY(0); pointer-events: auto; }


/* The global theme bundle (theme-*.css) ships its own generic
   `.rv-stickycta:hover { background: var(--rv-white); ... }` for the
   sticky-CTA pattern shared across every landing page; this page had no
   local override left to beat it, so it was falling back to that shared
   hover state. The reference's floating CTA has no hover effect at all
   (checked directly, background/color stay identical while hovered), so
   this pins it back to the resting state on this page specifically. */
.rv-stickycta:hover { background: var(--rv-blue); color: var(--rv-white); }
   background/color stay identical while hovered). */



/* ---- HERO FULL (above the fold) ---- */
.rv-hero-full {
  padding: 40px 48px 0;
  min-height: calc(100svh - 80px);
  height: calc(100svh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}


.rv-hero-full .rv-hero-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}


.rv-hero-foot {
  margin-top: auto;
  padding-bottom: 20px;
}




/* This 1/12-column left offset had no equivalent on the reference (its
   `.rv-hero-inner` has zero padding; it's simply the grid's first column)
   and was squeezing the whole hero grid, shrinking the text column and,
   with it, the signal-fan figure sized off the narrower second column. */
.rv-hero-full .rv-hero-inner {
  margin-top: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}


.rv-hero-full .rv-display {
  font-size: clamp(50px, 5.6vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 12px 0 16px;
}



.rv-hero-full .rv-lede {
  font-size: clamp(18px, 1.2vw, 21px);
  line-height: 1.5;
  margin: 0 0 22px;
  max-width: 820px;
}


.rv-cta--solid { background: var(--rv-blue); color: var(--rv-black); border-color: var(--rv-blue); }


.rv-cta--solid:hover { background: var(--rv-white); border-color: var(--rv-white); color: var(--rv-black); }


.rv-hero-full .rv-hero-ctas { margin-top: 0; gap: 18px; }


.rv-hero-full .rv-cta { padding: 16px 26px !important; font-size: 18px !important; gap: 12px !important; }


.rv-hero-full .rv-cta-arrow { font-size: 20px !important; }


.rv-hero-full .rv-instrument { display: none; }



.rv-hero-credibility {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rv-hair);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}


.rv-cred-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 22px; font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); }


.rv-cred-list li { display: inline-flex; align-items: center; gap: 8px; }


.rv-cred-list i { width: 5px; height: 5px; background: var(--rv-blue); display: inline-block; }



@media (max-height: 1000px) {
  .rv-hero-full { padding: 20px 48px 0; }
  .rv-hero-full .rv-display { font-size: clamp(54px, 6vw, 94px); margin: 8px 0 12px; }
  .rv-hero-full .rv-lede { font-size: 17px; margin-bottom: 14px; }
  .rv-hero-credibility { margin-top: 14px; padding-top: 12px; }
  .rv-hero-foot { padding-bottom: 14px; }
}


@media (max-height: 860px) {
  .rv-hero-full { padding: 16px 48px 0; }
  .rv-hero-full .rv-display { font-size: clamp(44px, 5vw, 74px); margin: 6px 0 10px; }
  .rv-hero-full .rv-lede { font-size: 16px; margin-bottom: 10px; }
  .rv-hero-full .rv-cta { padding: 12px 20px !important; font-size: 16px !important; }
  .rv-hero-credibility { margin-top: 10px; padding-top: 10px; }
  .rv-cred-list { font-size: 13px; gap: 16px; }
  .rv-hero-foot { padding-bottom: 10px; }
}


@media (max-height: 720px) {
  .rv-hero-full .rv-display { font-size: clamp(36px, 4vw, 56px); }
  .rv-hero-full .rv-lede { font-size: 15px; margin-bottom: 8px; }
}




@media (max-width: 900px) {
  .rv-hero-full { padding: 32px 24px; min-height: auto; }
  .rv-hero-full .rv-hero-inner { padding-left: 0; padding-right: 0; }
  .rv-hero-full .rv-display { font-size: clamp(40px, 9vw, 58px); }
  .rv-hero-credibility { grid-template-columns: 1fr; }
}



/* ---- PROMISE (Section 3) ---- */
.rv-promise { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px; }


.rv-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }


.rv-promise-card {
  background: var(--rv-white); border: 1px solid var(--rv-hair-dark-strong); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px; position: relative;
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.9,0.2,1);
}


.rv-promise.is-in .rv-promise-card { opacity: 1; transform: translateY(0); }


.rv-promise-card.is-primary { background: var(--rv-ink); color: var(--rv-white); border-color: var(--rv-ink); grid-row: span 2; }


.rv-promise-card.is-primary h3 { font-size: 34px; }


.rv-promise-num { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.18em; color: var(--rv-blue); }


.rv-promise-card h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }


.rv-promise-card p { font-size: 17px; line-height: 1.55; opacity: 0.75; margin: 0; }


@media (max-width: 900px) { .rv-promise { padding: 80px 24px; } .rv-promise-grid { grid-template-columns: 1fr; } .rv-promise-card.is-primary { grid-row: auto; } }



/* ---- METHOD (Section 4): editorial blueprint ---- */
.rv-method {
  background: var(--rv-fog);
  color: var(--rv-ink);
  padding: 160px 48px 180px;
  border-top: 1px solid var(--rv-hair-dark);
  border-bottom: 1px solid var(--rv-hair-dark);
  position: relative;
  overflow: hidden;
}


.rv-method .rv-label { color: rgba(16,16,16,0.55); }


.rv-method .rv-h2 { color: var(--rv-ink); }


.rv-method-head-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 96px; align-items: end; }


.rv-method-head-row--wide { grid-template-columns: 2.2fr 1fr; }


.rv-method-head-row > div { display: flex; flex-direction: column; gap: 20px; }


@media (max-width: 900px) { .rv-method { padding: 96px 24px 110px; } .rv-method-head-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; } }



/* ---- AUDIT / PILLARS (Section 5) ---- */
.rv-audit { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px; }


.rv-audit.is-in .rv-pillar { opacity: 1; transform: translateY(0); }


.rv-pillar-body { font-size: 17px; line-height: 1.55; opacity: 0.72; margin: 0; }


.rv-check { color: var(--rv-blue); font-weight: 700; font-family: "JetBrains Mono", monospace; }


@media (max-width: 900px) { .rv-audit { padding: 80px 24px; } .rv-pillars { grid-template-columns: 1fr; } }



.rv-metrics-bar { margin-top: 56px; background: var(--rv-white); border: 1px solid var(--rv-hair-dark-strong); padding: 32px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; }


.rv-metrics-label { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rv-blue); opacity: 1; }


.rv-metrics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }


.rv-metrics-k { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }


.rv-metrics-tags { display: flex; flex-direction: column; gap: 4px; }


.rv-metrics-tags span { font-family: "JetBrains Mono", monospace; font-size: 13px; opacity: 0.75; }


@media (max-width: 1100px) { .rv-metrics-bar { grid-template-columns: 1fr; } .rv-metrics-grid { grid-template-columns: repeat(2, 1fr); } }



.rv-leadmagnet {
  margin-top: 40px; background: var(--rv-ink); color: var(--rv-white); padding: 40px 40px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; border: 1px solid var(--rv-ink);
}


.rv-leadmagnet h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 8px; }


.rv-leadmagnet p { font-size: 17px; opacity: 0.75; margin: 0; max-width: 640px; line-height: 1.55; }


@media (max-width: 900px) { .rv-leadmagnet { grid-template-columns: 1fr; } }



/* ---- DELIVERABLES (Section 6) ---- */
.rv-deliverables { background: var(--rv-white); color: var(--rv-ink); padding: 140px 48px; }


.rv-deliverables.is-in .rv-del-card { opacity: 1; transform: translateY(0); }


.rv-del-note { margin: 48px 0 0; font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, currentColor 62%, transparent); }


@media (max-width: 900px) { .rv-deliverables { padding: 80px 24px; } .rv-del-grid { grid-template-columns: 1fr; } }



/* ---- WHOFOR (Section 7) ---- */
.rv-whofor { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px 64px; }


.rv-personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }


.rv-persona {
  background: var(--rv-white); border: 1px solid var(--rv-hair-dark-strong); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 20px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.9,0.2,1);
}


.rv-whofor.is-in .rv-persona { opacity: 1; transform: translateY(0); }


.rv-persona h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--rv-hair-dark); }


.rv-persona-section { display: flex; flex-direction: column; gap: 10px; }


.rv-persona-label { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; }


.rv-persona-label.is-accent { color: var(--rv-blue); }
.rv-persona-get { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(16,16,16,0.75); }
/* The shared partial's later "single-column stacked list" override (further
   down this file) is for a different page's WhoFor treatment and was
   canceling this section's real 4-column bordered-card grid; restore it
   for this page's `columns` layout specifically. */
#who.rv-whofor .rv-personas--columns { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 0; gap: 20px; }
#who.rv-whofor .rv-personas--columns .rv-persona {
	background: var(--rv-white); border: 0.8px solid rgba(26,26,26,0.28); padding: 28px 24px;
}
#who.rv-whofor .rv-personas--columns .rv-persona:hover { background: var(--rv-white); }
#who.rv-whofor .rv-personas--columns .rv-persona h3 { font-size: 19px; margin-bottom: 20px; }
#who.rv-whofor .rv-personas--columns .rv-persona-section { margin-top: 0; }
#who.rv-whofor .rv-personas--columns .rv-persona-section + .rv-persona-section { margin-top: 20px; }
#who.rv-whofor .rv-personas--columns .rv-persona-label { color: rgba(16,16,16,0.55); }
#who.rv-whofor .rv-personas--columns .rv-persona-label.is-accent { color: var(--rv-blue); }
#who.rv-whofor .rv-personas--columns .rv-persona ul { display: flex; flex-direction: column; gap: 8px; }
#who.rv-whofor .rv-personas--columns .rv-persona li { color: rgba(16,16,16,0.68); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 1100px) { #who.rv-whofor .rv-personas--columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { #who.rv-whofor .rv-personas--columns { grid-template-columns: 1fr; } }


.rv-persona ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }


.rv-persona li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 17px; line-height: 1.55; opacity: 0.85; }


.rv-notfor { margin-top: 40px; border: 1px dashed var(--rv-hair-dark-strong); padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }


.rv-notfor-label { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; }


.rv-notfor ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }


.rv-notfor li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 17px; line-height: 1.55; opacity: 0.85; }


@media (max-width: 1100px) { .rv-personas { grid-template-columns: repeat(2, 1fr); } }


@media (max-width: 900px) { .rv-whofor { padding: 80px 24px; } .rv-personas { grid-template-columns: 1fr; } }


.rv-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }


@media (max-width: 1100px) { .rv-cases { grid-template-columns: 1fr; } .rv-testimonials { grid-template-columns: 1fr; } .rv-logowall-grid { grid-template-columns: repeat(4, 1fr); } }



/* ---- FAQ (Section 12) ---- */
.rv-faq { background: var(--rv-white); color: var(--rv-ink); padding: 140px 48px; }


.rv-faq-grid { display: grid; grid-template-columns: 380px 1fr; gap: 64px; }


.rv-faq-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; align-self: start; }


.rv-faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--rv-ink); }


.rv-faq-item { border-bottom: 1px solid var(--rv-hair-dark); }


.rv-faq-item summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 40px 1fr 24px; gap: 20px; align-items: baseline;
  padding: 28px 12px;
  transition: color 200ms;
}


.rv-faq-item summary::-webkit-details-marker { display: none; }


.rv-faq-num { font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.14em; color: var(--rv-blue); }


.rv-faq-q { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }


.rv-faq-plus { font-family: "JetBrains Mono", monospace; font-size: 24px; color: var(--rv-blue); transition: transform 200ms; }


.rv-faq-item[open] .rv-faq-plus { transform: rotate(45deg); }


.rv-faq-item p { margin: 0 0 32px 72px; font-size: 17px; line-height: 1.65; opacity: 0.78; max-width: 720px; }


@media (max-width: 900px) { .rv-faq { padding: 80px 24px; } .rv-faq-grid { grid-template-columns: 1fr; gap: 40px; } .rv-faq-side { position: static; } .rv-faq-item p { margin-left: 12px; } }



/* ---- FOOTER ---- */
.rv-footer { background: var(--rv-black); color: var(--rv-white); border-top: 1px solid var(--rv-hair); padding: 40px 48px; }


.rv-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }


.rv-footer-brand { display: flex; align-items: center; gap: 12px; font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }


.rv-footer-brand img { height: 20px; width: auto; }


.rv-footer-links { display: flex; gap: 24px; font-size: 15px; }


.rv-footer-links a { color: rgba(255,255,255,0.6); }


.rv-footer-links a:hover { color: var(--rv-blue); }



/* Resolved instrument variant for close */
.rv-instrument--resolved .rv-instr-resolve { stroke: var(--rv-blue); stroke-width: 1.5; fill: none; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: rv-draw 2s cubic-bezier(0.2,0.9,0.2,1) forwards; }



/* =================================================================
   DESIGN OVERLAY: port source project motifs onto current structure.
   No content/structure changes; class hooks unchanged.
   ================================================================= */

/* 12-col grid background on dark sections */
.rv-hero-full, .rv-gap, .rv-method, .rv-deliverables, .rv-proof, .rv-close { position: relative; }




.rv-hero-full > *, .rv-gap > *, .rv-method > *,
.rv-deliverables > *, .rv-proof > *, .rv-close > * { position: relative; z-index: 1; }



/* Blueprint corner ticks on primary/hero cards (source S6 motif) */
.rv-promise-card, .rv-pillar, .rv-obj, .rv-case-card { position: relative; }


.rv-promise-card.is-primary::before, .rv-promise-card.is-primary::after,
.rv-pillar.is-primary::before, .rv-pillar.is-primary::after,
.rv-obj.is-primary::before, .rv-obj.is-primary::after,
.rv-case-card.is-primary::before, .rv-case-card.is-primary::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 0.8px solid var(--rv-green, #64c040); pointer-events: none;
}


.rv-promise-card.is-primary::before, .rv-pillar.is-primary::before,
.rv-obj.is-primary::before, .rv-case-card.is-primary::before {
  top: -6px; left: -6px; border-right: none; border-bottom: none;
}


.rv-promise-card.is-primary::after, .rv-pillar.is-primary::after,
.rv-obj.is-primary::after, .rv-case-card.is-primary::after {
  bottom: -6px; right: -6px; border-left: none; border-top: none;
}



/* Sticky header hairline */
.rv-header { box-shadow: 0 1px 0 0 var(--rv-hair); }



/* -------------------------- 1b. leakage -------------------------- */
.rv-leak {
  background: var(--rv-white);
  color: var(--rv-ink);
  padding: 104px 48px;
  margin-top: 0;
}


.rv-leak .rv-eyebrow,
.rv-leak .rv-label { color: var(--rv-ink); }


.rv-leak-head { max-width: 820px; margin-bottom: 48px; }


.rv-scanner-num .rv-num { font-size: 44px; font-weight: 600; color: var(--rv-ink); line-height: 1; }





@media (max-width: 900px) {
  .rv-leak { padding: 80px 24px; }
  .rv-leak-grid { grid-template-columns: 1fr; }
  .rv-leak-panel { padding: 64px 20px 24px; overflow-x: auto; }
  .rv-leak-stages { grid-template-columns: repeat(5, minmax(90px, 1fr)); min-width: 500px; }
  .rv-leak-inset-num { font-size: 46px; }
}





.rv-hl { color: #2a7de1; font-weight: 500; }



/* Pulseline behind H1 (desktop) */
.rv-h1-wrap { position: relative; isolation: isolate; }


.rv-h1-wrap > h1 { position: relative; z-index: 2; }



/* -------------------------- Diagnosis section (redesign of The Gap) -------------------------- */
.rv-diag {
  background: var(--rv-white);
  color: var(--rv-ink);
  padding: 140px 48px 64px;
  border-top: 1px solid var(--rv-hair-dark);
}


.rv-diag .rv-label { color: var(--rv-ink); }


.rv-diag .rv-h2 { color: var(--rv-ink); max-width: 24ch; }


.rv-diag.is-in .rv-diag-card { opacity: 1; transform: translateY(0); }


@media (max-width: 700px) {
  .rv-diag { padding: 80px 24px; }
  .rv-diag-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .rv-diag-card--feature { grid-column: auto; padding: 32px; }
  .rv-diag-card--feature .rv-diag-title { font-size: 28px; }
  .rv-diag-card--feature .rv-diag-audience { margin-bottom: 40px; }
}






/* =============== Outcomes (Proof) =============== */
.rv-outcomes { background: var(--rv-fog); color: var(--rv-ink); padding: 96px 48px; }


.rv-out-head { max-width: 900px; margin-bottom: 32px; }


.rv-out-head .rv-label { color: var(--rv-ink); }


.rv-outcomes .rv-h2 { color: var(--rv-ink); }


.rv-kpistack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 40px; }


.rv-kpi {
  background: var(--rv-white);
  border: 1px solid var(--rv-hair-dark-strong);
  padding: 48px 32px;
  position: relative;
  opacity: 0; transform: translateY(30px);
  transition: opacity 700ms cubic-bezier(0.2,0.9,0.2,1), transform 700ms cubic-bezier(0.2,0.9,0.2,1.08), z-index 200ms;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15);
  z-index: 1;
}


.rv-outcomes.is-in .rv-kpi { opacity: 1; transform: translateY(0); }


.rv-outcomes.is-in .rv-kpi:nth-child(1) { transform: translateY(-16px); margin-right: -24px; }


.rv-outcomes.is-in .rv-kpi:nth-child(2) { transform: translateY(16px); z-index: 2; }


.rv-outcomes.is-in .rv-kpi:nth-child(3) { transform: translateY(-8px); margin-left: -24px; }


.rv-kpi-num { display: flex; align-items: baseline; gap: 4px; }


.rv-kpi-num .rv-num, .rv-kpi-num > span:first-child {
  font-size: 90px; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: var(--rv-ink); font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
}


.rv-kpi-suffix { font-size: 42px; font-weight: 700; color: var(--rv-blue); font-family: "JetBrains Mono", monospace; }


.rv-kpi-label { font-size: 17px; line-height: 1.55; margin-top: 20px; opacity: 0.72; max-width: 260px; }


.rv-kpi-id { position: absolute; top: 20px; right: 24px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; opacity: 0.4; }



/* =============== Case File =============== */
.rv-case { background: var(--rv-white); color: var(--rv-ink); padding: 140px 48px; }


.rv-case-head { max-width: 900px; margin-bottom: 56px; }


.rv-case-head .rv-label { color: var(--rv-ink); }


.rv-case .rv-h2 { color: var(--rv-ink); }


.rv-folder {
  position: relative;
  border: 1px solid var(--rv-ink);
  padding: 72px 64px 64px;
  max-width: 1100px;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.2,0.9,0.2,1.05), opacity 800ms ease-out;
}


.rv-case.is-in .rv-folder { transform: scale(1); opacity: 1; }


.rv-folder-tab {
  position: absolute; top: -1px; left: 40px; transform: translateY(-100%);
  background: var(--rv-ink); color: var(--rv-white);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.14em;
  padding: 12px 24px;
}


.rv-folder-body { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; }


.rv-quote {
  font-family: "Inter", sans-serif;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.2; font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 780px;
  position: relative;
}


.rv-quote-mark { color: var(--rv-blue); font-size: 1.4em; line-height: 0; position: relative; top: 0.3em; margin-right: 8px; }


.rv-quote-attr { margin-top: 32px; grid-column: 1; }


.rv-quote-name { display: block; font-weight: 700; font-size: 16px; }


.rv-quote-role { display: block; font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-top: 4px; }


.rv-case-metric { grid-column: 2; grid-row: 1 / span 2; text-align: right; border-left: 1px solid var(--rv-hair-dark); padding-left: 32px; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }


.rv-case-metric-id { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; opacity: 0.5; }


.rv-case-metric-num .rv-num { font-size: 74px; font-weight: 800; color: var(--rv-blue); letter-spacing: -0.03em; font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }


.rv-case-metric-label { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }



@media (max-width: 900px) {
  .rv-outcomes, .rv-case { padding: 80px 24px; }
  .rv-kpistack { grid-template-columns: 1fr; }
  .rv-kpi, .rv-outcomes.is-in .rv-kpi { transform: none !important; margin: 0 !important; }
  .rv-folder { padding: 48px 24px 32px; }
  .rv-folder-body { grid-template-columns: 1fr; gap: 32px; }
  .rv-case-metric { grid-column: 1; grid-row: auto; border-left: none; border-top: 1px solid var(--rv-hair-dark); padding-left: 0; padding-top: 16px; text-align: left; }
}
/* The tab floats entirely above the folder box via `translateY(-100%)`,
   sized only for its one-line desktop width. On a narrow screen its long
   label ("CASE FILE · B2B SaaS · ...") wraps to 2 lines, which doubles
   the tab's height and pushes it up into the "Proof, not just a promise."
   heading above. Below 700px it sits in-flow at the top of the folder
   instead, so it can wrap to any number of lines without overlapping
   anything. */
@media (max-width: 700px) {
  .rv-folder-tab { position: static; transform: none; display: inline-block; margin-bottom: 24px; }
}





/* ============ Case Studies (Brutalist Ledger) ============ */
.rv-cases { padding: 96px 0 120px; }


.rv-cases-frame {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  border: 1px solid color-mix(in oklab, var(--rv-fg, #f5f3ee) 6%, transparent);
  background: #0d0d0d;
  overflow: hidden;
}


.rv-tick {
  position: absolute; width: 14px; height: 14px; z-index: 3;
  pointer-events: none;
}


.rv-tick--tl { top: -1px; left: -1px; border-top: 1px solid #2a7de1; border-left: 1px solid #2a7de1; }


.rv-tick--tr { top: -1px; right: -1px; border-top: 1px solid #2a7de1; border-right: 1px solid #2a7de1; }


.rv-tick--bl { bottom: -1px; left: -1px; border-bottom: 1px solid #2a7de1; border-left: 1px solid #2a7de1; }


.rv-tick--br { bottom: -1px; right: -1px; border-bottom: 1px solid #2a7de1; border-right: 1px solid #2a7de1; }



.rv-cases-wordmark {
  position: absolute; top: 40px; left: 32px;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(96px, 14vw, 224px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: #f5f3ee;
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}



.rv-cases-grid {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 620px;
  z-index: 2;
  animation: rv-case-fade 500ms ease both;
}
.rv-cases-grid[hidden] { display: none; }



.rv-cases-left {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid color-mix(in oklab, #f5f3ee 6%, transparent);
}


.rv-cases-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  color: color-mix(in oklab, #f5f3ee 45%, transparent);
  margin-bottom: 24px;
}


.rv-cases-dot { width: 8px; height: 8px; background: #2a7de1; border-radius: 50%; }



.rv-cases-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #f5f3ee;
  margin: 0 0 24px;
}


.rv-cases-body {
  font-size: 17px;
  line-height: 1.55;
  color: color-mix(in oklab, #f5f3ee 65%, transparent);
  max-width: 460px;
  margin: 0 0 40px;
}



.rv-cases-metrics { display: flex; flex-direction: column; gap: 0; margin-bottom: 48px; }


.rv-cases-metric {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid color-mix(in oklab, #f5f3ee 10%, transparent);
  padding: 14px 0;
}


.rv-cases-metric-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in oklab, #f5f3ee 45%, transparent);
}


.rv-cases-metric-v {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
  font-weight: 700;
  color: color-mix(in oklab, #f5f3ee 92%, transparent);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}


.rv-cases-metric-v.is-accent { color: #2a7de1; }



.rv-cases-nav { display: flex; align-items: center; gap: 12px; }


.rv-cases-btn {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid color-mix(in oklab, #f5f3ee 10%, transparent);
  color: #f5f3ee;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}


.rv-cases-btn:hover { border-color: #2a7de1; color: #2a7de1; }


.rv-cases-btn svg { width: 18px; height: 18px; }


.rv-cases-counter {
  margin-left: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, #f5f3ee 30%, transparent);
}



/* Right visual */
.rv-cases-right {
  position: relative;
  background: #1a1a1a;
  overflow: hidden;
}


.rv-cases-bggrid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  transform: rotate(-15deg) scale(1.5);
  transform-origin: center;
  opacity: 0.2;
  pointer-events: none;
}


.rv-cases-bggrid span {
  background: color-mix(in oklab, #f5f3ee 5%, transparent);
  border: 1px solid color-mix(in oklab, #f5f3ee 10%, transparent);
  min-height: 360px;
}



.rv-cases-slab {
  position: absolute; inset: 0;
  background: #0d0d0d;
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 128px;
}


.rv-cases-slab-inner { position: relative; z-index: 2; }


.rv-cases-clientlabel {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: color-mix(in oklab, #f5f3ee 22%, transparent);
  margin-bottom: 16px;
}


.rv-cases-client {
  display: flex; flex-direction: column;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-transform: uppercase;
}


.rv-cases-underline {
  height: 4px; width: 96px; background: #2a7de1; margin-top: 28px;
}



.rv-cases-preview {
  position: absolute;
  top: 50%; right: -8%;
  width: 58%; height: 70%;
  transform: translateY(-50%) rotate(-12deg);
  background: #222;
  border: 4px solid #0d0d0d;
  box-shadow: 0 40px 80px rgba(0,0,0,0.7);
  overflow: hidden;
  z-index: 1;
}


.rv-cases-preview-bar {
  display: flex; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in oklab, #f5f3ee 5%, transparent);
}


.rv-cases-preview-bar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in oklab, #f5f3ee 10%, transparent);
}


.rv-cases-preview-body { padding: 28px; display: flex; flex-direction: column; gap: 14px; }


.rv-cases-preview-hero {
  height: 14px; width: 75%;
  background: color-mix(in oklab, #2a7de1 25%, transparent);
  border-radius: 2px;
}


.rv-cases-preview-line {
  height: 8px; width: 100%;
  background: color-mix(in oklab, #f5f3ee 6%, transparent);
  border-radius: 2px;
}


.rv-cases-preview-line.short { width: 80%; }


.rv-cases-preview-block {
  height: 140px; margin-top: 12px;
  background: color-mix(in oklab, #f5f3ee 5%, transparent);
  border-radius: 2px;
}



.rv-cases-loc {
  position: absolute;
  right: 28px; bottom: 28px;
  text-align: right;
  z-index: 3;
}


.rv-cases-loc-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: color-mix(in oklab, #f5f3ee 40%, transparent);
  margin-bottom: 4px;
}


.rv-cases-loc-v {
  font-size: 14px; font-weight: 700; color: #ffffff;
}



@media (max-width: 900px) {
  .rv-cases-grid { grid-template-columns: 1fr; }
  .rv-cases-left { padding: 48px 28px; border-right: 0; border-bottom: 1px solid color-mix(in oklab, #f5f3ee 6%, transparent); }
  .rv-cases-right { min-height: 480px; }
  .rv-cases-slab { padding-left: 48px; }
  .rv-cases-wordmark { font-size: 96px; }
}



@media (prefers-reduced-motion: reduce) {
  .rv-cases-grid { animation: none; }
}


.rv-book-head .rv-section-head { margin: 0; }


.rv-book-head .rv-h2 { color: var(--rv-ink); }



/* ============================================================
 * LIGHT PAPER COLOURWAY: visual-only override layer
 * Converts the remaining dark surfaces (hero, deliverables,
 * case file) to the paper/ink language used by the rest of the
 * page, softens type weight and rules. No copy/structure change.
 * ============================================================ */

.rv-root {
  background: var(--rv-white);
  color: var(--rv-ink);
  --rv-ink-soft: rgba(16, 16, 16, 0.72);
  --rv-ink-mute: rgba(16, 16, 16, 0.52);
  --rv-paper-hair: rgba(16, 16, 16, 0.12);
  --rv-blue-ink: #0d2f6e;
}



/* ---------- global type softening ---------- */
.rv-root .rv-h1, .rv-root .rv-display { font-weight: 700; letter-spacing: -0.03em; }


.rv-root .rv-h2 { font-weight: 700; letter-spacing: -0.025em; }


.rv-root h3 { font-weight: 650; }


.rv-root .rv-bpcard-title { font-weight: 700; }


.rv-root .rv-section-lede, .rv-root .rv-lede { color: var(--rv-ink-soft); opacity: 1; font-weight: 400; }



/* ---------- HERO ---------- */
.rv-hero {
  background: var(--rv-white);
  color: var(--rv-ink);
  border-bottom: 1px solid var(--rv-paper-hair);
}


.rv-hero .rv-topnav { border-bottom: none; }


.rv-hero .rv-menu { border-color: var(--rv-paper-hair); }


.rv-hero .rv-menu span { background: var(--rv-ink); }


.rv-hero .rv-nav-links a,
.rv-hero .rv-topnav a { color: var(--rv-ink-soft); }


.rv-hero .rv-nav-links a:hover { color: var(--rv-ink); }


.rv-hero .rv-lede { color: var(--rv-ink-soft); }


.rv-hero .rv-lede em,
.rv-hero .rv-h1 em { color: var(--rv-blue-ink); font-style: normal; }


.rv-hero .rv-label { color: var(--rv-ink-mute); }


.rv-hero .rv-label-rule { background: var(--rv-ink-mute); }


.rv-hero hr,
.rv-hero .rv-rule { border-color: var(--rv-paper-hair); background: var(--rv-paper-hair); }


.rv-hero .rv-trustline,
.rv-hero .rv-hero-bullets li,
.rv-hero .rv-hero-points li { color: var(--rv-ink-mute); }


.rv-hero .rv-btn-ghost,
.rv-hero .rv-cta-secondary,
.rv-hero a.rv-link-mono {
  color: var(--rv-ink);
  border-color: var(--rv-paper-hair);
}


.rv-hero .rv-logo { filter: none; }



/* ---------- DELIVERABLES ---------- */
.rv-deliverables {
  background: var(--rv-fog);
  color: var(--rv-ink);
  border-top: 1px solid var(--rv-paper-hair);
}


.rv-del-note { color: color-mix(in oklab, currentColor 62%, transparent); }


.rv-deliverables .rv-label { color: var(--rv-ink-mute); }


.rv-deliverables .rv-label-rule { background: var(--rv-ink-mute); }



/* ---------- CASE FILE ---------- */
.rv-cases-frame {
  background: var(--rv-white);
  border-color: var(--rv-paper-hair);
}


.rv-cases-wordmark { color: var(--rv-ink); opacity: 0.05; }


.rv-cases-left { border-right-color: var(--rv-paper-hair); }


.rv-cases-eyebrow { color: var(--rv-ink-mute); }


.rv-cases-title { color: var(--rv-ink); font-weight: 700; }


.rv-cases-body { color: var(--rv-ink-soft); }


.rv-cases-metric { border-bottom-color: var(--rv-paper-hair); }


.rv-cases-metric-k { color: var(--rv-ink-mute); }


.rv-cases-metric-v { color: var(--rv-ink); }


.rv-cases-metric-v.is-accent { color: var(--rv-blue-ink); }


.rv-cases-btn { border-color: var(--rv-paper-hair); color: var(--rv-ink); }


.rv-cases-btn:hover { border-color: var(--rv-blue); color: var(--rv-blue-ink); }


.rv-cases-counter { color: var(--rv-ink-mute); }


.rv-cases-right { background: var(--rv-fog); }


.rv-cases-bggrid { opacity: 0.5; }


.rv-cases-bggrid span {
  background: rgba(16, 16, 16, 0.02);
  border-color: rgba(16, 16, 16, 0.07);
}


.rv-cases-slab { background: var(--rv-fog); }


.rv-cases-clientlabel { color: var(--rv-ink-mute); }


.rv-cases-client { color: var(--rv-ink); font-weight: 800; }


.rv-cases-preview {
  background: var(--rv-white);
  border-color: var(--rv-fog);
  box-shadow: 0 30px 60px rgba(16, 16, 16, 0.12);
}


.rv-cases-preview-bar { border-bottom-color: var(--rv-paper-hair); }


.rv-cases-preview-bar span { background: rgba(16, 16, 16, 0.12); }


.rv-cases-preview-hero { background: color-mix(in oklab, var(--rv-blue) 45%, transparent); }


.rv-cases-preview-line { background: rgba(16, 16, 16, 0.08); }


.rv-cases-preview-block { background: rgba(16, 16, 16, 0.05); }


.rv-cases-loc-k { color: var(--rv-ink-mute); }


.rv-cases-loc-v { color: var(--rv-ink); }


@media (max-width: 900px) {
  .rv-cases-left { border-bottom-color: var(--rv-paper-hair); }
}



/* hero foot + secondary link on paper */
.rv-hero .rv-cred-list { color: var(--rv-ink-mute); }


.rv-hero .rv-hero-foot { border-top-color: var(--rv-paper-hair); }


.rv-hero .rv-sublink { color: var(--rv-ink); border-bottom-color: var(--rv-paper-hair); opacity: 0.75; }


.rv-hero .rv-sublink:hover { color: var(--rv-blue-ink); border-color: var(--rv-blue); opacity: 1; }



/* dark close section keeps white type */
.rv-close, .rv-close .rv-display, .rv-close h2 { color: #ffffff; }


.rv-close .rv-mask-in { color: #ffffff; }


.rv-close .rv-display em { color: var(--rv-blue); }


.rv-close .rv-lede { color: rgba(255, 255, 255, 0.72); }


.rv-close .rv-label, .rv-close .rv-label span { color: rgba(255, 255, 255, 0.68); }


.rv-close .rv-sublink { color: rgba(255, 255, 255, 0.8); border-bottom-color: rgba(255, 255, 255, 0.24); }


.rv-close .rv-sublink:hover { color: var(--rv-blue); border-color: var(--rv-blue); }



/* =============== CLIENT LOGO BAR =============== */
.rv-clients {
  background: transparent;
  padding: 8px 0 40px;
  overflow: hidden;
}


.rv-clients-label {
  font-family: var(--rv-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(16, 16, 16, 0.42);
  margin: 0 0 18px;
  padding: 0 clamp(20px, 5vw, 64px);
}


.rv-clients-track {
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}


.rv-clients-row {
  display: flex;
  width: max-content;
  animation: rv-clients-scroll 45s linear infinite;
}


.rv-clients-list {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  margin: 0;
  padding: 0 clamp(16px, 2.5vw, 32px);
  list-style: none;
}


.rv-clients-list li {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: rgba(16, 16, 16, 0.48);
}


@media (prefers-reduced-motion: reduce) {
  .rv-clients-row { animation: none; }
}




/* ==== REFERENCE PAPER COLOURWAY (ported from RevOps Insight Engine) ==== */

/* ==========================================================================
   HERO: light "paper" colourway (matches reference: paper canvas, ink type,
   signal-green highlight + CTA). Colour only; layout untouched.
   ========================================================================== */
.rv-root .rv-hero {
  background: #ffffff;
  color: var(--rv-black, #101010);
  /* Matches the `margin-top: 40px !important;` convention other landing
     pages use on their hero (e.g. gtm-planning.css / messaging-architecture.css
     `.rv-hero-center`), per explicit request for cross-page consistency. */
  margin-top: 40px !important;
}


.rv-root .rv-hero .rv-label,
.rv-root .rv-hero .rv-label span { color: var(--rv-black); }


.rv-root .rv-hero .rv-display { color: var(--rv-black); }


.rv-root .rv-hero .rv-display em {
  font-style: normal;
  color: var(--rv-black);
  background: var(--rv-blue);
  box-shadow: 0.14em 0 0 var(--rv-blue), -0.14em 0 0 var(--rv-blue);
}


.rv-root .rv-hero .rv-lede { color: #3d423d; opacity: 1; }


.rv-root .rv-hero .rv-hl { color: #101010; background: color-mix(in oklab, var(--rv-blue) 34%, transparent); }


.rv-root .rv-hero .rv-cta--solid { background: var(--rv-blue); border-color: var(--rv-blue); color: #0d0f0d; }


.rv-root .rv-hero .rv-cta--solid:hover { background: #101010; border-color: #101010; color: #ffffff; }


.rv-root .rv-hero .rv-sublink { color: var(--rv-blue-ink, #0d2f6e); border-bottom-color: rgba(42,125,225,0.45); }


.rv-root .rv-hero .rv-sublink:hover { color: var(--rv-blue-ink, #1e5cb3); }


.rv-root .rv-hero .rv-logos { border-color: rgba(16,16,16,0.12); }


.rv-root .rv-hero .rv-logos-label { color: rgba(16,16,16,0.45); }


.rv-root .rv-hero .rv-logos-item { color: #101010; opacity: 0.6; }


.rv-root .rv-hero .rv-logos-item:hover { color: var(--rv-blue); opacity: 1; }


.rv-root .rv-hero .rv-pulseline-base { stroke: rgba(16,16,16,0.16); }


.rv-root .rv-hero .rv-pulseline-path { stroke: var(--rv-blue); }



/* ==========================================================================
   FIT CHECK / MATURITY: light "paper" colourway
   (white canvas, ink type, signal-green accents). Colour only; layout intact.
   `.rv-icpbrief`/`.rv-maturity` don't exist on this page (leftover from the
   forecasting-reporting.css copy); `.rv-deliverables` is deliberately
   excluded here too; this page's deliverable cards are dark (see the
   `.rv-del-panel`/`.rv-del-name` rules), and this block's h3/p color rules
   were winning on specificity and repainting that card text dark-on-dark.
   ========================================================================== */
.rv-root .rv-icpbrief,
.rv-root .rv-maturity {
  background: #ffffff;
  color: var(--rv-ink, #101010);
  border-top-color: rgba(16,16,16,0.12);
  border-bottom-color: rgba(16,16,16,0.12);
}


.rv-root .rv-icpbrief .rv-label,
.rv-root .rv-maturity .rv-label,
.rv-root .rv-icpbrief .rv-label span,
.rv-root .rv-maturity .rv-label span { color: #101010; }


.rv-root .rv-icpbrief .rv-h2,
.rv-root .rv-maturity .rv-h2,
.rv-root .rv-icpbrief-h,
.rv-root .rv-icpbrief h2,
.rv-root .rv-maturity h2 { color: #101010; }


.rv-root .rv-icpbrief p,
.rv-root .rv-maturity p { color: rgba(16,16,16,0.72); }



/* Fit check */
.rv-root .rv-icpbrief-grid { border-color: rgba(16,16,16,0.14); }


.rv-root .rv-icpbrief-col--for { border-right-color: rgba(16,16,16,0.14); background: color-mix(in oklab, var(--rv-blue) 8%, #ffffff); }


.rv-root .rv-icpbrief-col--not { background: #fafafa; }


.rv-root .rv-icpbrief-tag { color: rgba(16,16,16,0.5); }


.rv-root .rv-icpbrief-col--for .rv-icpbrief-tag { color: var(--rv-blue-ink, #1e5cb3); }


.rv-root .rv-icpbrief-col li { color: rgba(16,16,16,0.88); }


.rv-root .rv-icpbrief-col--not li { color: rgba(16,16,16,0.58); }



/* Maturity staircase */
.rv-root .rv-maturity { border-top: 1px solid rgba(16,16,16,0.12); }


.rv-root .rv-staircase { border-bottom-color: var(--rv-blue); }


.rv-root .rv-stair-body { background: #fafafa; border-color: rgba(16,16,16,0.14); }


.rv-root .rv-stair.is-target .rv-stair-body { border-color: var(--rv-blue); background: color-mix(in oklab, var(--rv-blue) 10%, #ffffff); }


.rv-root .rv-stair-code { color: rgba(16,16,16,0.45); }


.rv-root .rv-stair.is-target .rv-stair-code { color: var(--rv-blue-ink, #1e5cb3); }


.rv-root .rv-stair-name { color: #101010; }


.rv-root .rv-stair-copy { color: rgba(16,16,16,0.68); }


.rv-root .rv-stair-riser { background: linear-gradient(to right, color-mix(in oklab, var(--rv-blue) 25%, transparent), var(--rv-blue)); }


/* legacy 4-stage cards, if rendered */
.rv-root .rv-mat-card { background: #fafafa; border-color: rgba(16,16,16,0.14); }


.rv-root .rv-mat-card.is-target { border-color: var(--rv-blue); background: color-mix(in oklab, var(--rv-blue) 10%, #ffffff); }


.rv-root .rv-mat-code, .rv-root .rv-mat-note { color: rgba(16,16,16,0.45); border-top-color: rgba(16,16,16,0.12); }


.rv-root .rv-mat-name { color: #101010; }


.rv-root .rv-mat-copy { color: rgba(16,16,16,0.68); }


.rv-root .rv-mat-tick { border-color: rgba(16,16,16,0.28); }


.rv-root .rv-mat-flag { border-top-color: rgba(16,16,16,0.14); color: var(--rv-blue-ink, #1e5cb3); }



/* Deliverables */
.rv-root .rv-del-grid { border-top-color: rgba(16,16,16,0.14); border-left-color: rgba(16,16,16,0.14); }


.rv-root .rv-del-card { border-right-color: rgba(16,16,16,0.14); border-bottom-color: rgba(16,16,16,0.14); }


.rv-root .rv-del-card:hover { background: #fafafa; }


.rv-root .rv-del-idx { color: var(--rv-blue-ink, #1e5cb3); }


.rv-root .rv-del-note { color: rgba(16,16,16,0.55); }



/* ============================================================
 * Case Studies: light paper colourway
 * ============================================================ */
.rv-root .rv-cases { background: #ffffff; }


.rv-root .rv-cases-frame { background: #ffffff; border-color: rgba(16,16,16,0.14); }


.rv-root .rv-cases-wordmark { color: #101010; opacity: 0.05; }


.rv-root .rv-cases-left { border-right-color: rgba(16,16,16,0.14); }


.rv-root .rv-cases-eyebrow { color: rgba(16,16,16,0.5); }


.rv-root .rv-cases-title { color: #101010; }


.rv-root .rv-cases-body { color: rgba(16,16,16,0.68); }


.rv-root .rv-cases-metric { border-bottom-color: rgba(16,16,16,0.14); }


.rv-root .rv-cases-metric-k { color: rgba(16,16,16,0.5); }


.rv-root .rv-cases-metric-v { color: #101010; }


.rv-root .rv-cases-metric-v.is-accent { color: var(--rv-blue-ink, #1e5cb3); }


.rv-root .rv-cases-btn { border-color: rgba(16,16,16,0.18); color: #101010; }


.rv-root .rv-cases-btn:hover { border-color: var(--rv-blue); color: var(--rv-blue-ink, #1e5cb3); background: color-mix(in oklab, var(--rv-blue) 10%, #ffffff); }


.rv-root .rv-cases-counter { color: rgba(16,16,16,0.45); }



.rv-root .rv-cases-right { background: #fafafa; }


.rv-root .rv-cases-bggrid { opacity: 0.5; }


.rv-root .rv-cases-bggrid span { background: rgba(16,16,16,0.02); border-color: rgba(16,16,16,0.08); }


.rv-root .rv-cases-slab { background: #ffffff; }


.rv-root .rv-cases-clientlabel { color: rgba(16,16,16,0.45); }


.rv-root .rv-cases-client { color: #101010; }


.rv-root .rv-cases-preview { background: #f2f2f0; border-color: #ffffff; box-shadow: 0 30px 60px rgba(16,16,16,0.12); }


.rv-root .rv-cases-preview-bar { border-bottom-color: rgba(16,16,16,0.08); }


.rv-root .rv-cases-preview-bar span { background: rgba(16,16,16,0.12); }


.rv-root .rv-cases-preview-hero { background: color-mix(in oklab, var(--rv-blue) 40%, #ffffff); }


.rv-root .rv-cases-preview-line,
.rv-root .rv-cases-preview-block { background: rgba(16,16,16,0.07); }


.rv-root .rv-cases-loc-k { color: rgba(16,16,16,0.45); }


.rv-root .rv-cases-loc-v { color: #101010; }



@media (max-width: 900px) {
  .rv-root .rv-cases-left { border-bottom-color: rgba(16,16,16,0.14); }
}


.rv-root .rv-cases-slab { box-shadow: -1px 0 0 rgba(16,16,16,0.12); }


.rv-hero-split .rv-display {
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}


.rv-root .rv-hero-split .rv-display em.rv-hero-mark {
  display: inline;
  color: #ffffff;
  background: color-mix(in oklab, var(--rv-blue) 62%, #0f2b0a 38%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.06em 0.12em;
}


.rv-hero-split .rv-lede { max-width: 46ch; font-size: clamp(15px, 1.1vw, 18px); margin-top: 22px; }


.rv-hero-split .rv-hero-ctas { margin-top: 28px; }



@media (max-width: 1024px) {
  .rv-hero-split .rv-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rv-hero-split .rv-lede { max-width: none; }
}



.rv-hero-split.rv-hero-full { min-height: 0; height: auto; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(28px, 3vw, 48px); }


.rv-hero-split .rv-hero-ctas { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 22px; }


.rv-hero-split .rv-cta { padding: 14px 22px !important; font-size: 16px !important; width: auto; }


.rv-ed .rv-eyebrow, .rv-ed .rv-label { color: var(--rv-ink); }



/* ---- What We Audit: editorial stakeholder-style rows ---- */
.rv-audit.rv-ed { background: var(--rv-paper, #f4f4f2); color: var(--rv-ink); }


.rv-root .rv-icpbrief .rv-fitbody p { font-size: 14px; line-height: 1.6; color: rgba(16,16,16,0.6); margin: 8px 0 0; }



/* --------- Fit check: staircase register --------- */
.rv-root .rv-fitst-sec { background: #ffffff; color: var(--rv-ink, #101010); padding: clamp(64px, 9vw, 128px) 0; }


.rv-root .rv-fitst-h {
  font-size: clamp(32px, 6.2vw, 72px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02;
  margin: 20px 0 0; max-width: 20ch; color: var(--rv-ink, #101010);
}


.rv-root .rv-fitst-lede { margin: 24px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: rgba(16,16,16,0.62); }


.rv-root .rv-fitst-body { display: block; min-width: 0; flex: 1 1 auto; background: none; padding: 0; border: 0; }


.rv-root .rv-fitst-title { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; color: var(--rv-ink, #101010); }


.rv-root .rv-fitst-note { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: rgba(16,16,16,0.55); background: none; }


.rv-stk-head .rv-h2 { margin: 0; }


.rv-stk-head .rv-section-lede { margin: 0; max-width: 30ch; }


.rv-whofor.is-in .rv-stk-row { opacity: 1; transform: translateY(0); }


@media (max-width: 1000px) { .rv-stk { grid-template-columns: 1fr; gap: 40px; } .rv-stk-head { position: static; } .rv-stk-head .rv-section-lede { max-width: 62ch; } }


.rv-why .rv-diff-row .rv-check { color: var(--rv-signal, currentColor); }


.rv-deliverables--reg .rv-del-note { margin-top: 22px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(16,16,16,0.5); }



/* ==== Light header to match the paper colourway ==== */
.rv-header {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(16,16,16,0.10);
  box-shadow: none;
}


.rv-header-nav a { color: rgba(16,16,16,0.62); }


.rv-header-nav a:hover { color: var(--rv-blue-ink, #1e5cb3); }


.rv-header-cta { border-color: var(--rv-blue); color: #101010; }


.rv-header-cta:hover { background: var(--rv-blue); color: #ffffff; }



/* ==== Maturity grid: even, non-clipping cards (paper colourway) ==== */
.rv-root .rv-mat-grid { align-items: stretch; margin-top: 64px; }


.rv-root .rv-mat-card { transform: none !important; min-height: 0; }


.rv-root .rv-mat-card .rv-mat-note { margin-top: auto; }



/* This used to force every blueprint card to its natural content height
   (`!important`, beating even the deliberate inline `height:200/260/320/
   380px` staggered "skyline" heights the reference actually uses),
   checked directly and the reference's 4 cards really do have those
   fixed, increasing heights, all sharing one baseline. */
.rv-root .rv-bpcard-note { margin-top: auto; }



.rv-leak { padding: 48px 48px 140px; }


.rv-leak-head { max-width: 720px; margin-bottom: 36px; }


.rv-leak-head .rv-display { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.05; }


.rv-scanner-num, .rv-scanner-num .rv-num { font-size: 40px; }


.rv-leak-head .rv-h2 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.06; }



.rv-hero-credibility { border-top: 1px solid var(--rv-paper-hair, rgba(16,16,16,0.12)); }


/* This whole block was a different page's "top border-line per column"
   credibility-list variant (a 3-column grid); the reference's is a
   single inline row, each item marked by a small 5x5 blue square (the
   template's own <i> element, which a later rule was force-hiding). */
.rv-cred-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  max-width: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rv-ink-mute, rgba(16,16,16,0.72));
}


.rv-cred-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  border-right: 0;
}


.rv-cred-list i {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--rv-blue);
  border-radius: 0;
  flex: none;
}



@media (max-width: 980px) {
  .rv-cred-list { grid-template-columns: 1fr; max-width: none; }
  .rv-cred-list li { border-right: none; margin-right: 0; padding-right: 0; }
}



/* ============================================================
   WHAT IT COSTS: audit-style editorial layout
   ============================================================ */
.rv-cost { background: var(--rv-fog, #f4f4f2); }


.rv-cost .rv-leak-head { max-width: 760px; }


.rv-cost .rv-h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.06; letter-spacing: -0.02em; }



.rv-cost-stat {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--rv-paper-hair, rgba(16,16,16,0.12));
}


.rv-cost-idx {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: rgba(16,16,16,0.28);
  padding-top: 4px;
  transition: color 0.4s ease;
}


.rv-cost-row.is-live .rv-cost-idx { color: var(--rv-blue); }


.rv-cost-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rv-ink, #101010);
}



@media (max-width: 720px) {
  .rv-cost-stat { flex-direction: column; gap: 16px; }
  .rv-cost-row { grid-template-columns: 40px minmax(0, 1fr); }
}



/* ============================================================
 * REVOPS HUB DESIGN SYSTEM: visual parity layer
 * Ported tokens/typography/components from the RevOps hub page.
 * Styling only: no copy, structure or section changes.
 * ============================================================ */

.rv-root {
  --rf-ink: #1b1d21;
  --rf-ink-2: #101010;
  --rf-mute: #52565d;
  --rf-mute-2: #6b6f76;
  --rf-hair: #e4e4de;
  --rf-hair-soft: #ecece6;
  --rf-paper: #fbfaf9;
  --rf-fog: #f4f5f3;
  --rf-green: #2a7de1;
  --rf-blue: #2a7de1;
  color: var(--rf-ink-2);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  /* The hero's own background is this same paper tone, not pure white,
     without this, the margin-top gap above it (which shows <main>'s
     background, not the hero's) was a visibly different plain-white band
     against the hero's slightly warmer off-white. */
  background: var(--rf-paper);
}



/* ---------- header ---------- */
.rv-root .rv-header,
.rv-header {
  background: #ffffff;
  border-bottom: 1px solid var(--rf-hair);
  backdrop-filter: none;
  min-height: 83px;
  padding-inline: 48px;
}


.rv-header-logo { padding: 0; background: none; }


.rv-header-logo img { height: 30px; width: auto; display: block; }


.rv-root .rv-header-nav { gap: 30px; }


.rv-root .rv-header-nav a {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rf-mute);
}


.rv-root .rv-header-nav a:hover { color: var(--rf-ink-2); }


.rv-root .rv-header-cta {
  background: var(--rf-blue);
  border: 1px solid var(--rf-blue);
  border-radius: 2px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 11px 18px;
}


.rv-root .rv-header-cta:hover {
  background: #1f66bd;
  border-color: #1f66bd;
  color: #ffffff;
}



/* ---------- sticky CTA ---------- */
.rv-root .rv-stickycta {
  border-radius: 0;
  background: var(--rv-blue);
  color: var(--rv-white);
  padding: 14px 22px;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}


/* No hover effect on the reference's floating CTA (checked directly). */



/* ---------- typography ---------- */
.rv-root .rv-hero .rv-display,
.rv-root .rv-hero .rv-h1 {
  font-size: clamp(38px, 3.9vw, 56px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--rf-ink);
}


.rv-root .rv-h2,
.rv-root .rv-cost-h2,
.rv-root .rv-gap-h2 {
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--rf-ink-2);
}


.rv-root .rv-display:not(.rv-hero .rv-display) {
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
}


.rv-root h3 { font-weight: 700; letter-spacing: -0.012em; color: var(--rf-ink-2); }


.rv-root .rv-lede,
.rv-root .rv-section-lede {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--rf-mute);
  opacity: 1;
  max-width: 33em;
}


.rv-root p { color: var(--rf-mute); }


.rv-root .rv-label,
.rv-root .rv-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rf-mute-2);
}


.rv-root .rv-label-rule { width: 26px; height: 2px; background: var(--rf-green); }



/* ---------- buttons and links ---------- */
.rv-root .rv-cta,
.rv-root .rv-cta--solid,
.rv-root .rv-btn-primary {
  background: var(--rv-blue);
  border: 0;
  border-radius: 3px;
  padding: 13px 22px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #0d0f0d;
  gap: 14px;
}


.rv-root .rv-cta:hover,
.rv-root .rv-cta--solid:hover,
.rv-root .rv-btn-primary:hover { background: var(--rv-blue-ink, #0d2f6e); color: #ffffff; }

/* Solid CTAs hover to the same near-black the sticky CTA uses, so the hero
 * button, the closing button and the sticky one all behave alike. The rule
 * above would otherwise decide this: it came from the blue-accented page this
 * file started as, and reaches --rv-blue-ink, which the .rv-root remap further
 * down points at --rv-accent-ink. That happened to land near-black already, but
 * only by accident, and it would move again the moment the remap changed. This
 * states the intent instead. Kept in step with .rv-stickycta:hover below.
 * Pages with their own accent (demand-generation) override this in their own
 * stylesheet. */
.rv-root .rv-cta--solid:hover {
	background: var(--rv-ink);
	border-color: var(--rv-ink);
	color: var(--rv-white);
}
/* The blue #book hover that used to sit here moved to
   assets/css/lp/demand-generation.css. It is an ID selector, so it outranked
   every class rule on every rv- page and painted the closing button deep blue
   on hover, whatever that page's accent was. It only ever belonged to the one
   blue page. */


.rv-root .rv-sublink,
.rv-root .rv-cta--ghost {
  border: 0;
  border-bottom: 1px solid #c9c9c1;
  border-radius: 0;
  background: none;
  padding: 0 2px 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4a4a44;
}


.rv-root .rv-sublink:hover,
.rv-root .rv-cta--ghost:hover {
  background: none;
  color: var(--rf-ink);
  border-bottom-color: var(--rf-ink);
}



/* ---------- section rhythm ---------- */
.rv-root > section {
  padding-inline: 48px;
}


/* .rv-diag/.rv-mat/.rv-whofor deliberately excluded here, the reference
   gives them asymmetric top/bottom padding (140px/64px, set on their own
   selectors elsewhere), and this uniform padding-block used to flatten
   both edges to the same clamped value, losing that asymmetry. */
.rv-root > section.rv-audit,
.rv-root > section.rv-case,
.rv-root > section.rv-faq { padding-block: 140px; }


.rv-root > section.rv-diag { background: #ffffff; }


.rv-root > section.rv-leak { background: var(--rf-fog); }


.rv-root > section.rv-mat { background: #ffffff; }


.rv-root > section.rv-promise { background: var(--rf-fog); }


.rv-root > section.rv-audit { background: #ffffff; }


.rv-root > section.rv-deliverables { background: var(--rf-fog); }


.rv-root > section.rv-whofor { background: #ffffff; }


.rv-root > section.rv-outcomes { background: var(--rf-fog); }


.rv-root > section.rv-case { background: #ffffff; }


.rv-root > section.rv-why { background: var(--rf-fog); }


.rv-root > section.rv-faq { background: #ffffff; }


.rv-root > section + section:not(.rv-close):not(.rv-testify) {
  border-top: 1px solid var(--rf-hair-soft);
}



/* ---------- client strip ---------- */
.rv-root .rv-clients {
  background: var(--rf-paper);
  border-top: 1px solid var(--rf-hair);
  border-bottom: 1px solid var(--rf-hair);
  padding: 14px 0 12px;
}


.rv-root .rv-clients-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--rf-mute-2);
  opacity: 1;
  margin-bottom: 10px;
}


.rv-root .rv-clients-list li {
  color: var(--rf-ink-2);
  opacity: 0.62;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
}



/* ---------- shared card language ---------- */
.rv-root .rv-del-card,
.rv-root .rv-mat-card,
.rv-root .rv-bpcard,
.rv-root .rv-gap-card,
.rv-root .rv-shift-card,
.rv-root .rv-obj,
.rv-root .rv-out-card,
.rv-root .rv-faq-item {
  border-radius: 0;
  transition: border-color 160ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
}


.rv-root .rv-del-card:hover,
.rv-root .rv-gap-card:hover,
.rv-root .rv-shift-card:hover,
.rv-root .rv-obj:hover,
.rv-root .rv-out-card:hover {
  border-color: var(--rf-green);
  transform: translateY(-2px);
}



/* dark anchor sections keep inverted type */
.rv-root .rv-close p,
.rv-root .rv-testify p { color: rgba(255, 255, 255, 0.72); }


.rv-root .rv-close .rv-h2,
.rv-root .rv-close .rv-display { color: #ffffff; }

/* .rv-svclines is a dark section too (see its own background rule further
   down) but was missing from this list, so its heading inherited the
   page-wide dark-ink `.rv-h2` color and went near-invisible on black. */
.rv-root .rv-svclines .rv-h2 { color: #ffffff; }



/* logo plate + compact hero (parity layer, cont.) */
.rv-root .rv-header-logo {
  background: var(--rf-ink-2);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
}


.rv-root .rv-header-logo img { height: 26px; }


.rv-root .rv-footer-brand img { height: 24px; }



.rv-root > section.rv-hero,
.rv-root > section.rv-hero-full {
  min-height: 0;
  height: auto;
  padding-block: 40px 0;
}


.rv-root .rv-hero-inner { min-height: 0; height: auto; }



/* ---- Dark plates: keep legible text on ink backgrounds ---- */
.rv-root .rv-promise-card.is-primary,
.rv-root .rv-pillar.is-primary,
.rv-root .rv-leadmagnet,
.rv-root .rv-obj.is-primary,
.rv-root .rv-diff,
.rv-root .rv-close,
.rv-root .rv-footer { color: #ffffff; }



.rv-root .rv-promise-card.is-primary :is(h2,h3,h4,strong),
.rv-root .rv-pillar.is-primary :is(h2,h3,h4,strong),
.rv-root .rv-leadmagnet :is(h2,h3,h4,strong),
.rv-root .rv-obj.is-primary :is(h2,h3,h4,strong),
.rv-root .rv-diff :is(h2,h3,h4,strong),
.rv-root .rv-close :is(h2,h3,h4,strong),
.rv-root .rv-footer :is(h2,h3,h4,strong) { color: #ffffff; }



.rv-root .rv-promise-card.is-primary :is(p,li),
.rv-root .rv-pillar.is-primary :is(p,li),
.rv-root .rv-leadmagnet :is(p,li),
.rv-root .rv-obj.is-primary :is(p,li),
.rv-root .rv-diff :is(p,li),
.rv-root .rv-close :is(p,li),
.rv-root .rv-footer :is(p,li) { color: rgba(255,255,255,0.72); }



/* ============================================================
 * REVOPS HUB PARITY: PER-SECTION PASS (all 19 sections)
 * Visual styling only. No copy, structure or ordering changes.
 * ============================================================ */

/* --- shared rhythm & containers --- */
.rv-root > section,
.rv-root .rv-diag,
.rv-root .rv-promise,
.rv-root .rv-audit,
.rv-root .rv-deliverables,
.rv-root .rv-cases,
.rv-root .rv-whofor,
.rv-root .rv-outcomes,
.rv-root .rv-case,
.rv-root .rv-why,
.rv-root .rv-faq {
  padding-inline: 48px;
}
/* re-narrowed for mobile: this unconditional 48px inline padding has higher
 * specificity than each section's own scoped mobile rule (".rv-faq" etc. in
 * the per-section @media(max-width:900px) blocks) and was winning at every
 * width, leaving cramped side margins on narrow screens. */
@media (max-width: 900px) {
  .rv-root .rv-diag,
  .rv-root .rv-promise,
  .rv-root .rv-audit,
  .rv-root .rv-deliverables,
  .rv-root .rv-cases,
  .rv-root .rv-whofor,
  .rv-root .rv-outcomes,
  .rv-root .rv-case,
  .rv-root .rv-why,
  .rv-root .rv-faq {
    padding-inline: 24px;
  }
}


.rv-root .rv-section-head { max-width: 900px; margin-bottom: 56px; }


.rv-root .rv-section-head .rv-h2 { margin: 14px 0 0; }


.rv-root .rv-section-head .rv-section-lede { margin-top: 18px; }



/* --- 01 HERO --- */
.rv-root .rv-hero .rv-display em { background: color-mix(in oklab, var(--rf-green) 34%, transparent); font-style: normal; padding: 0 .08em; }


.rv-root .rv-hero .rv-lede { color: var(--rf-mute); max-width: 34em; }


.rv-root .rv-hero-credibility { border-top: 1px solid var(--rf-hair); }


.rv-root .rv-cred-list { color: var(--rf-mute); font-size: 13px; }


.rv-root .rv-cred-logos, .rv-root .rv-cred-logos-label { color: var(--rf-mute-2); border-color: var(--rf-hair); }


.rv-root .rv-sublink { color: var(--rf-mute); border-bottom: 1px solid var(--rf-hair); }


.rv-root .rv-sublink:hover { color: var(--rf-ink-2); border-color: var(--rf-green); }



/* --- 02 TRUSTED BY --- */
.rv-root .rv-clients { background: var(--rf-paper); border-block: 1px solid var(--rf-hair); }


.rv-root .rv-clients-label { color: var(--rf-mute-2); }


.rv-root .rv-clients-item { color: var(--rf-mute-2); font-weight: 500; }



/* --- 03 THE GAP (rv-diag) --- */
.rv-root .rv-diag { background: #ffffff; }


.rv-root .rv-diag .rv-h2, .rv-root .rv-diag .rv-display { color: var(--rf-ink-2); }


.rv-root .rv-diag-persona, .rv-root .rv-mbp-label { color: var(--rf-mute-2); }



/* --- 04 WHAT IT COSTS (rv-cost) --- */
.rv-root .rv-cost { background: var(--rf-fog); border-block: 1px solid var(--rf-hair); }


.rv-root .rv-cost .rv-costrow { border-color: var(--rf-hair); }


.rv-root .rv-cost .rv-costrow:hover, .rv-root .rv-cost .rv-costrow.is-on { background: #ffffff; }



/* --- 05 MATURITY MODEL --- */
.rv-root .rv-mat { background: #ffffff; }


/* This higher-specificity (.rv-root .rv-bpcard, 0,2,0) block used to beat
   the later, correct `.rv-bpcard` rules (0,1,0) further down this file,
   rounded 4px corners instead of the reference's sharp 0, and opacity:1
   canceling the intended faded coord/desc text. Colors only, kept here so
   the sharper corner-radius/opacity below can actually win. */
.rv-root .rv-bpcard {
  background: var(--rv-white);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}


.rv-root .rv-bpcard-title { font-size: 26px; font-weight: 800; }



/* --- 06 THE SHIFT (rv-promise) --- */
.rv-root .rv-promise { background: var(--rf-fog); border-block: 1px solid var(--rf-hair); }


.rv-root .rv-promise-card {
  background: #ffffff; border: 1px solid var(--rf-hair); border-radius: 4px;
  transition: border-color .25s ease, transform .25s ease;
}




.rv-root .rv-promise-card h3 { font-size: 20px; }


.rv-root .rv-promise-card.is-primary h3 { font-size: 27px; }


.rv-root .rv-promise-card p { font-size: 15.5px; opacity: 1; }



/* --- 07 THE METHOD (rv-mbp) --- */
.rv-root .rv-mbp { background: #ffffff; }


.rv-root .rv-mbp-spine { background: var(--rf-hair); }


.rv-root .rv-mbp-spine-fill { background: var(--rf-green); }


.rv-root .rv-mbp-step-title { font-weight: 700; letter-spacing: -.015em; }


.rv-root .rv-mbp-step-body, .rv-root .rv-mbp-list li { color: var(--rf-mute); }



/* --- 08 SCOPE (rv-audit) --- */
.rv-root .rv-audit { background: var(--rf-paper); border-block: 1px solid var(--rf-hair); }


.rv-root .rv-pillar {
  background: #ffffff; border: 0.8px solid rgba(26,26,26,0.28); border-radius: 0;
  padding: 32px 28px;
  transition: border-color .25s ease, transform .25s ease;
}
/* .is-primary dark-plate override lives further down this file, next to
   its shared box-shadow reset with .rv-obj.is-primary. */


/* No hover effect on pillar cards on the reference (checked directly;
   no matching :hover rule at all); this used to add an unwanted green-
   border lift on hover. */


.rv-root .rv-pillar h3 { font-size: 24px; font-weight: 700; margin: 0; color: inherit; }


.rv-root .rv-pillar-body { font-size: 17px; line-height: 1.55; color: inherit; opacity: 0.72; margin: 0; }


/* Checklist: reference lays each `<li>` out as a 2-column grid (18px check
   column + text), with 8px of vertical rhythm between items, the missing
   gap/grid here is why the checkmarks used to run straight into the text. */
.rv-root .rv-pillar ul { list-style: none; margin: 0; padding: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.rv-root .rv-pillar li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 17px; line-height: 1.55; color: inherit; }


.rv-root .rv-check { color: var(--rv-blue); font-weight: 700; }
.rv-root .rv-pillar.is-primary .rv-check { color: var(--rv-blue); }



/* --- 09 LEAD MAGNET / recap plate --- */
.rv-root .rv-leadmagnet { border-radius: 4px; }



/* --- 10 MID-PAGE CTA (rv-book-section) --- */
.rv-root .rv-book-section { background: #ffffff; }


.rv-root .rv-book { border: 1px solid var(--rf-hair); border-radius: 4px; background: var(--rf-paper); }



/* --- 11 DELIVERABLES --- */
.rv-root .rv-deliverables { background: var(--rf-fog); border-block: 1px solid var(--rf-hair); }


.rv-root .rv-del, .rv-root .rv-deliverable, .rv-root .rv-del-card {
  background: #ffffff; border: 1px solid var(--rf-hair); border-radius: 4px;
  transition: border-color .25s ease, transform .25s ease;
}


.rv-root .rv-del:hover, .rv-root .rv-deliverable:hover, .rv-root .rv-del-card:hover { border-color: var(--rf-green); transform: translateY(-4px); }



/* --- 12 CASE FILE --- */
.rv-root .rv-cases { background: #ffffff; }


.rv-root .rv-cases-frame { border-color: var(--rf-hair); }


.rv-root .rv-tick { background: var(--rf-green); }



/* --- 13 OUTCOMES / KPI --- */
.rv-root .rv-outcomes { background: var(--rf-paper); border-block: 1px solid var(--rf-hair); }


/* Superseded by the rebuilt "OUTCOMES: measured KPI cards" block further
   down this file (border-radius:0, correct sizes/colors, staggered
   overlap layout); this used to leave a stray border-radius:4px active
   since a later same-specificity rule there didn't redeclare it. */
.rv-root .rv-kpi { border-radius: 0; }



/* --- 14 FIT / WHO THIS IS FOR --- */
.rv-root .rv-whofor { background: #ffffff; }


.rv-root .rv-persona {
  background: var(--rf-paper); border: 1px solid var(--rf-hair); border-radius: 4px;
  transition: border-color .25s ease, transform .25s ease;
}


.rv-root .rv-persona:hover { border-color: var(--rf-green); transform: translateY(-4px); }


.rv-root .rv-persona li, .rv-root .rv-persona p { color: var(--rf-mute); font-size: 15.5px; }



/* --- 15 WHO THIS ISN'T FOR --- */
.rv-root .rv-notfor { border: 1px solid var(--rf-hair); border-radius: 4px; background: var(--rf-fog); }


.rv-root .rv-notfor li { color: var(--rf-mute); }



/* --- 16 TESTIMONIAL (rv-case) --- */
.rv-root .rv-case { background: var(--rf-fog); border-block: 1px solid var(--rf-hair); }


.rv-root .rv-folder { background: #ffffff; border: 1px solid var(--rf-hair); border-radius: 4px; }


.rv-root .rv-quote { color: var(--rf-ink-2); font-weight: 500; letter-spacing: -.015em; }



/* --- 17 LET'S BE HONEST (rv-why) --- */
.rv-root .rv-why { background: #ffffff; padding-block: 140px; }


.rv-root .rv-obj { background: var(--rf-paper); border: 1px solid var(--rf-hair); border-radius: 4px; }
/* `.rv-obj-grid` (the default/"grid" layout this page actually uses) had no
   layout CSS at all, so its cards fell back to plain block flow, full-
   width stacked rows instead of the reference's 2-column card grid. */
.rv-root .rv-why .rv-obj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.rv-root .rv-why .rv-obj-grid .rv-obj { border: 0.8px solid rgba(26,26,26,0.28); border-radius: 0; padding: 36px 32px; }
.rv-root .rv-why .rv-obj-grid .rv-obj:not(.is-primary) { background: var(--rv-white); }
.rv-root .rv-why .rv-obj-grid .rv-obj.is-primary { background: var(--rv-ink); border-color: var(--rv-ink); }
.rv-root .rv-why .rv-obj-num { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.18em; color: var(--rv-blue); margin-bottom: 16px; }
@media (max-width: 900px) { .rv-root .rv-why .rv-obj-grid { grid-template-columns: 1fr; } }

/* The three-up variant the partial exposes as grid_class. It only existed in
 * ma-web-integration.css, so every other page asking for it silently stayed at
 * two columns. Declared after the two-column rule above at equal specificity,
 * with its own collapse so the media query above cannot be undone by it. */
.rv-root .rv-why .rv-obj-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .rv-root .rv-why .rv-obj-grid--three { grid-template-columns: 1fr; } }


.rv-root .rv-diff { border-radius: 4px; }



/* --- 18 FINAL CTA (rv-close) --- */
.rv-root .rv-close { background: var(--rf-ink-2); }


.rv-root .rv-close .rv-sublink { color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.25); }


.rv-root .rv-close .rv-sublink:hover { color: #fff; border-color: var(--rf-green); }



/* --- 19 FAQ --- */
.rv-root .rv-faq { background: var(--rf-paper); border-top: 1px solid var(--rf-hair); }


.rv-root .rv-faq-item, .rv-root .rv-faq details {
  background: #ffffff; border: 1px solid var(--rf-hair); border-radius: 4px;
  transition: border-color .25s ease;
}


.rv-root .rv-faq-item:hover, .rv-root .rv-faq details:hover { border-color: var(--rf-green); }


.rv-root .rv-faq-q, .rv-root .rv-faq summary { font-size: 17px; font-weight: 600; color: var(--rf-ink-2); }


.rv-root .rv-faq-a, .rv-root .rv-faq details p { color: var(--rf-mute); font-size: 15.5px; }



/* Superseded by the "OUTCOMES: measured KPI cards" rebuild further down
   this file; the reference actually uses a staggered/overlapping 3-up
   stack, not a flat auto-fit grid, and has no hover effect on these cards
   at all (checked directly: hovering leaves transform/border unchanged).
   The old `!important` hover here used to force a flatten-and-lift that
   doesn't exist on the reference. */
.rv-root .rv-kpi { transition: none; }



/* --- TESTIMONIAL: editorial quote scale --- */
.rv-root .rv-quote { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.35; }


.rv-root .rv-folder { padding: 44px 48px 36px; }


.rv-root .rv-folder-body { gap: 48px; align-items: start; }



/* This used to flatten `.is-primary` emphasis cards to a light/white
   treatment ("no longer dark plates"), checked directly against the
   reference and that's wrong for every one of the three: `.rv-pillar` and
   `.rv-obj`'s featured cards are dark plates there too, same as
   `.rv-promise-card.is-primary` (see its own dark override elsewhere in
   this file). Kept only the border-radius-free box-shadow reset that isn't
   color-related. */
.rv-root .rv-promise-card.is-primary,
.rv-root .rv-pillar.is-primary,
.rv-root .rv-obj.is-primary {
  box-shadow: 0 14px 34px -28px rgba(16,16,16,.5);
}
.rv-root .rv-pillar.is-primary,
.rv-root .rv-obj.is-primary {
  background: var(--rv-ink);
  border-color: var(--rv-ink);
  color: var(--rv-white);
}
.rv-root .rv-pillar.is-primary :is(h2,h3,h4,strong),
.rv-root .rv-obj.is-primary :is(h2,h3,h4,strong) { color: var(--rv-white); }
.rv-root .rv-pillar.is-primary p,
.rv-root .rv-obj.is-primary p { color: rgba(255,255,255,0.72); }
/* Checklist text on the dark card stays full-opacity white on the
   reference, only the lede paragraph is faded, confirmed via
   getComputedStyle (li opacity 1 vs p opacity 0.72). */
.rv-root .rv-pillar.is-primary li,
.rv-root .rv-obj.is-primary li { color: var(--rv-white); }


.rv-root .rv-pillar.is-primary .rv-pillar-idx { color: rgba(255,255,255,0.35); opacity: .35; }



/* --- THE SHIFT: editorial headline + layered media --- */
.rv-root .rv-promise { background: var(--rf-paper, #fbfaf9); }


.rv-root .rv-promise .rv-section-head { max-width: 1100px; margin-bottom: 64px; }


.rv-root .rv-promise .rv-h2 {
  font-size: clamp(44px, 6.4vw, 98px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 14ch;
}


.rv-shift-stage { position: relative; }


.rv-shift-media {
  position: relative;
  width: 76%;
  margin-left: auto;
  border: 1px solid var(--rf-hair);
  overflow: hidden;
  background: var(--rf-fog);
}


.rv-shift-media img { display: block; width: 100%; height: clamp(320px, 42vw, 560px); object-fit: cover; }


.rv-root .rv-promise .rv-promise-grid { position: relative; z-index: 2; margin-top: 40px; }


.rv-root .rv-promise-card {
  background: #fff;
  border: 1px solid var(--rf-hair);
  border-top: 2px solid var(--rf-green, #2a7de1);
  border-radius: 0;
  padding: 34px 30px 36px;
}


/* `.is-primary` is a dark featured card here (see the authoritative
   dark-ink override further down this file), not the light "fog" variant
   this block used to apply; that was a different page's layout, and its
   negative margin-top (meant to pull the card up over a hero image) and
   `:is(h3,p)` dark-ink text forced were fighting the real design. */


@media (max-width: 1023px) {
  .rv-shift-media { width: 100%; }
  .rv-root .rv-promise .rv-promise-grid { margin-top: 32px; }
}


.rv-root .rv-promise .rv-promise-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }



/* --- SCOPE: practice-sequence layout --- */
.rv-root .rv-seq { margin-top: 72px; }


.rv-root .rv-seq-fig {
  display: flex; align-items: center; gap: 20px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: color-mix(in oklab, var(--rv-ink) 45%, transparent);
}


.rv-root .rv-seq-fig i { width: 150px; height: 1px; background: currentColor; opacity: .5; }


.rv-root .rv-seq-body {
  margin-top: 40px; display: grid; grid-template-columns: minmax(260px, 34%) 1fr; gap: 0;
  border-top: 1px solid var(--rv-hair-dark, rgba(16,16,16,.12));
  padding-top: 40px;
}


.rv-root .rv-seq-index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }


.rv-root .rv-seq-item {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: "JetBrains Mono", monospace; font-size: 15px; letter-spacing: 0.14em;
  text-transform: uppercase; line-height: 1.4;
  color: color-mix(in oklab, var(--rv-ink) 32%, transparent);
  transition: color .2s ease;
}


.rv-root .rv-seq-item:hover { color: color-mix(in oklab, var(--rv-ink) 60%, transparent); }


.rv-root .rv-seq-item.is-on { color: var(--rv-ink); font-weight: 600; }


.rv-root .rv-seq-detail { position: relative; padding-left: 56px; border-left: 1px solid var(--rv-hair-dark, rgba(16,16,16,.12)); }


.rv-root .rv-seq-dot {
  position: absolute; left: -6px; top: 10px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--rv-blue); box-shadow: 0 0 0 4px color-mix(in oklab, var(--rv-blue) 22%, transparent);
}


.rv-root .rv-seq-panel { display: flex; flex-direction: column; gap: 18px; }


.rv-root .rv-seq-panel h3 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.03; margin: 0; }


.rv-root .rv-seq-panel .rv-pillar-body { font-size: 18px; max-width: 46ch; }


.rv-root .rv-seq-panel ul { list-style: none; margin: 0; padding: 20px 0 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--rv-hair-dark, rgba(16,16,16,.12)); }


.rv-root .rv-seq-panel li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--rf-mute, rgba(16,16,16,.62)); }


@media (max-width: 900px) {
  .rv-root .rv-seq-body { grid-template-columns: 1fr; gap: 32px; }
  .rv-root .rv-seq-detail { padding-left: 24px; }
  .rv-root .rv-seq-fig i { width: 60px; }
}



/* --- DELIVERABLES: practice record browser --- */
.rv-root .rv-rec { display: grid; grid-template-columns: minmax(280px, 34%) 1fr; gap: 32px; margin-top: 56px; }


.rv-root .rv-rec-side,
.rv-root .rv-rec-main {
  border: 1px solid var(--rv-hair-dark, rgba(16,16,16,.12));
  background: #ffffff; padding: 40px;
}


.rv-root .rv-rec-side { display: flex; flex-direction: column; min-height: 420px; }


.rv-root .rv-rec-brand,
.rv-root .rv-rec-main-head,
.rv-root .rv-rec-prog-head,
.rv-root .rv-rec-count,
.rv-root .rv-rec-tab {
  font-family: "JetBrains Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase;
}


.rv-root .rv-rec-brand { font-size: 12px; color: color-mix(in oklab, var(--rv-ink) 55%, transparent); }


.rv-root .rv-rec-title { margin: 28px 0 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }


.rv-root .rv-rec-side-foot { margin-top: auto; padding-top: 40px; }


.rv-root .rv-rec-count { font-size: 14px; color: var(--rv-blue); }


.rv-root .rv-rec-count span { color: color-mix(in oklab, var(--rv-ink) 45%, transparent); }


.rv-root .rv-rec-prog-head { display: flex; justify-content: space-between; font-size: 12px; margin-top: 22px; color: var(--rv-blue); }


.rv-root .rv-rec-prog { margin-top: 10px; height: 2px; background: var(--rv-hair-dark, rgba(16,16,16,.12)); }


.rv-root .rv-rec-prog i { display: block; height: 100%; background: var(--rv-blue); transition: width .4s ease; }


.rv-root .rv-rec-main-head { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: color-mix(in oklab, var(--rv-ink) 50%, transparent); }


.rv-root .rv-rec-main-head em { color: var(--rv-blue); font-style: normal; }


.rv-root .rv-rec-h { margin: 26px 0 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }


.rv-root .rv-rec-body { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--rf-mute, rgba(16,16,16,.62)); max-width: 62ch; }


.rv-root .rv-rec-rule { margin: 32px 0 28px; height: 1px; background: var(--rv-hair-dark, rgba(16,16,16,.12)); }


.rv-root .rv-rec-tabs { display: flex; flex-wrap: wrap; gap: 8px; }


.rv-root .rv-rec-tab {
  font-size: 14px; padding: 12px 18px; cursor: pointer;
  border: 1px solid transparent; background: none;
  color: color-mix(in oklab, var(--rv-ink) 55%, transparent); transition: all .18s ease;
}


.rv-root .rv-rec-tab:hover { color: var(--rv-ink); border-color: var(--rv-hair-dark, rgba(16,16,16,.12)); }


.rv-root .rv-rec-tab.is-on { background: var(--rv-ink, #101010); color: #fff; border-color: var(--rv-ink, #101010); }


@media (max-width: 900px) {
  .rv-root .rv-rec { grid-template-columns: 1fr; gap: 20px; }
  .rv-root .rv-rec-side { min-height: 0; }
  .rv-root .rv-rec-side, .rv-root .rv-rec-main { padding: 26px; }
}



/* --- OUTCOMES: measured KPI cards ---
   The reference is a plain 3-up staggered/overlapping card stack, no
   header bar, no "Measured" state text, no rule/chart/bar. This whole
   block used to render a different, invented "bordered header row +
   offset box-shadow" card design that doesn't exist on the reference at
   all; rebuilt against its actual computed styles. */
.rv-root .rv-kpistack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 64px; }
@media (max-width: 900px) { .rv-root .rv-kpistack { grid-template-columns: 1fr; gap: 24px; } }


.rv-root .rv-kpi {
  position: relative; background: #ffffff; border: 0.8px solid rgba(26,26,26,0.28);
  padding: 48px 32px; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15);
}
@media (max-width: 900px) { .rv-root .rv-kpi, .rv-root .rv-outcomes.is-in .rv-kpi { transform: none !important; margin: 0 !important; width: auto !important; } }


.rv-root .rv-kpi:nth-child(1) { transform: translateY(-16px); margin-right: -24px; z-index: 1; }
.rv-root .rv-kpi:nth-child(2) { transform: translateY(16px); z-index: 2; }
.rv-root .rv-kpi:nth-child(3) { margin-left: -24px; transform: translateY(-8px); z-index: 1; }
.rv-root .rv-outcomes.is-in .rv-kpi:nth-child(1) { transform: translateY(-16px); }
.rv-root .rv-outcomes.is-in .rv-kpi:nth-child(2) { transform: translateY(16px); }
.rv-root .rv-outcomes.is-in .rv-kpi:nth-child(3) { transform: translateY(-8px); }


.rv-root .rv-kpi-id {
  position: absolute; top: 20px; right: 24px; opacity: 0.4;
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--rv-ink);
}


.rv-root .rv-kpi-num { display: flex; align-items: baseline; gap: 4px; }
.rv-root .rv-kpi-num .rv-num {
  font-family: "JetBrains Mono", monospace; font-weight: 800;
  font-size: 90px; line-height: 1; letter-spacing: -0.04em; color: var(--rv-ink);
}


.rv-root .rv-kpi-suffix { color: var(--rv-blue); font-size: 42px; font-weight: 700; font-family: "JetBrains Mono", monospace; }


.rv-root .rv-kpi-label { font-size: 17px; line-height: 1.55; opacity: 0.72; margin-top: 20px; max-width: 260px; }



/* --- TESTIMONIAL: dark editorial panels --- */
.rv-root .rv-case { background: #191b19; color: #ffffff; border-block: 1px solid rgba(255,255,255,.1); }


/* Weight dropped 2026-09-14 for the site-wide 700 standard; at (0,4,0) this
 * outranked assets/css/global/lp-type.css. Colour and tracking stay. */
.rv-root .rv-case .rv-case-head .rv-h2,
.rv-root .rv-case h2 { color: #ffffff; letter-spacing: -0.035em; }


.rv-root .rv-case .rv-label,
.rv-root .rv-case .rv-section-label { color: rgba(255,255,255,.72); }


/* This whole block used to restyle `.rv-case` (singular, the testimonial
   section, "Proof, not just a promise") as a dark folder card: black quote
   mark hidden, white text, dark background. That's the styling for
   `.rv-cases` (plural, the Patchstack case-study section further up the
   page, which really is dark), applied to the wrong, similarly-named
   class. Checked directly against the reference: the testimonial folder
   is white/light with a visible blue quote mark and a 2-column grid
   layout, i.e. exactly the earlier `.rv-folder`/`.rv-quote`/`.rv-case-metric`
   base rules already in this file, removed the misdirected duplicate
   rather than fight it with another override. */


/* Weight removed 2026-09-14: the site-wide heading standard puts inner-page
 * H2s at 700 (assets/css/global/lp-type.css). At (0,4,0) this rule outranked
 * that layer, so it had to go here rather than be fought from there. */
.rv-root .rv-whofor .rv-section-head .rv-h2 { letter-spacing: -0.04em; line-height: 1.02; }


.rv-root .rv-whofor .rv-section-lede { color: color-mix(in oklab, var(--rv-ink, #1b1d21) 62%, transparent); }


.rv-root .rv-whofor .rv-personas {
  display: block; border-top: 1px solid color-mix(in oklab, var(--rv-ink, #1b1d21) 12%, transparent);
}


.rv-root .rv-whofor .rv-persona {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid color-mix(in oklab, var(--rv-ink, #1b1d21) 12%, transparent);
  padding: 40px 0;
}


.rv-root .rv-whofor .rv-persona:hover { background: none; transform: none; }


.rv-root .rv-whofor .rv-persona h3 {
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 22px;
}


.rv-root .rv-whofor .rv-persona-section { margin-top: 20px; }


.rv-root .rv-whofor .rv-persona-label {
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rv-blue); margin-bottom: 10px;
}


.rv-root .rv-whofor .rv-persona ul { display: grid; gap: 8px; }


.rv-root .rv-whofor .rv-persona li {
  color: color-mix(in oklab, var(--rv-ink, #1b1d21) 68%, transparent);
  font-size: 16px; line-height: 1.6;
}


.rv-root .rv-whofor .rv-notfor { margin-top: 56px; }


.rv-root .rv-whofor .rv-persona h3 { border: 0; padding-bottom: 0; margin-bottom: 8px; }


.rv-root .rv-whofor .rv-persona-section:first-of-type { margin-top: 18px; }



/* ============================================================
   LET'S BE HONEST: editorial hairline Q&A rows
   ============================================================ */
.rv-root .rv-objlist {
  display: block;
  margin-top: 8px;
  border-top: 1px solid var(--rf-hair);
}


.rv-root .rv-objlist .rv-obj {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0 32px;
  align-items: start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rf-hair);
  border-radius: 0;
  box-shadow: none;
  padding: 34px 8px 34px 0;
  transition: background-color .25s ease, padding-left .25s ease;
}


.rv-root .rv-objlist .rv-obj:hover {
  background: var(--rf-paper);
  padding-left: 16px;
  transform: none;
  border-color: var(--rf-hair);
}


.rv-root .rv-objlist .rv-obj-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--rf-green);
  padding-top: 8px;
}


.rv-root .rv-objlist .rv-obj-body {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 24px 48px;
  align-items: start;
}


.rv-root .rv-objlist .rv-obj h3 {
  margin: 0;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--rf-ink-2);
}


.rv-root .rv-objlist .rv-obj p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--rf-mute);
  opacity: 1;
}


@media (max-width: 900px) {
  .rv-root .rv-objlist .rv-obj { grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; padding: 26px 0; }
  .rv-root .rv-objlist .rv-obj-body { grid-template-columns: 1fr; gap: 12px; }
}



/* ================= HERO: SCORECARD SPLIT ================= */
/* padding, not margin: this background doesn't exactly match .rv-root's
 * own background, so a margin gap would show a faint seam of the wrapper's
 * color before the hero's own background starts, added to the existing
 * padding-top instead. */
.rv-root .rv-hero-scored { background: var(--rf-paper, #fbfaf9); padding-top: 40px; padding-bottom: 0; }


/* The reference's hero text column is much wider than its figure column
   (~71%/29%, not an even ~51%/49% split), checked directly against its
   `.rv-hero-grid` computed columns. A too-narrow text column was forcing
   the headline to wrap across extra lines. */
.rv-heroS-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}


.rv-heroS-left { min-width: 0; }


.rv-root .rv-hero-scored .rv-display {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
}


.rv-root .rv-hero-scored .rv-display em {
  background: none;
  font-style: normal;
  padding: 0;
}


.rv-root .rv-hero-scored .rv-display {
  font-family: "Inter", sans-serif;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #1a1a1a;
  margin: 14px 0 18px;
}


.rv-root .rv-hero-scored .rv-display em { color: #1a1a1a; font-style: normal; }


.rv-root .rv-hero-scored .rv-mask { padding: 0; }


.rv-root .rv-hero-scored .rv-mask-mark {
  background: none;
  color: #2a7de1;
  padding: 0;
}



.rv-root .rv-hero-scored .rv-lede { max-width: 46ch; margin-top: 26px; }


.rv-root .rv-hero-scored .rv-hero-ctas { margin-top: 30px; gap: 16px; align-items: center; }



/* Hero CTAs: blue primary + mono underlined secondary. Hover inverts to
   a transparent/blue-outline button (checked directly against the
   reference); this used to hover to a hardcoded green (#4fa832), another
   leftover literal that the earlier green-accent sweeps didn't catch. */
.rv-root .rv-hero-scored .rv-cta--solid {
  display: inline-flex; align-items: center; gap: 22px;
  background: var(--rv-blue); color: var(--rv-white);
  border: 0.8px solid var(--rv-blue); border-radius: 0;
  padding: 20px 30px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: none;
  transition: background .2s ease, color .2s ease;
}


.rv-root .rv-hero-scored .rv-cta--solid:hover {
  background: transparent; color: var(--rv-blue);
  transform: none; box-shadow: none;
}


.rv-root .rv-hero-scored .rv-cta--solid .rv-cta-arrow { transition: transform .2s ease; font-weight: 400; }


.rv-root .rv-hero-scored .rv-cta--solid:hover .rv-cta-arrow { transform: translateX(3px); }



.rv-root .rv-hero-scored .rv-sublink {
  display: inline-flex; align-items: center; gap: 14px;
  background: transparent; color: #101010;
  border: 0; border-bottom: 1px solid rgba(16,16,16,0.2); border-radius: 0;
  padding: 10px 2px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}


.rv-root .rv-hero-scored .rv-sublink:hover {
  background: transparent; border-bottom-color: #101010; color: #101010;
  box-shadow: none;
}



@media (max-width: 980px) {
  .rv-heroS-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rv-heroS-row { grid-template-columns: minmax(0, 1fr) 80px 36px; gap: 12px; padding: 15px 16px; }
}


.rv-root .rv-hero-scored .rv-display em,
.rv-root .rv-hero.rv-hero-scored .rv-display em {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: inherit;
}



/* ============================================================
   METHOD: the rail/panel component actually used here is
   .rv-mdesk* (further down this file). This whole block used to
   be an entirely different, unused "1:1 port" attempt (.rv-steps,
   .rv-step-card, etc., none of which exist in this page's markup)
   that nonetheless still applied to the real .rv-method section
   wrapper: its !important padding/background overrode the correct
   values below it, and its ::before painted faint vertical grid
   lines across the whole section that the reference does not have.
   ============================================================ */
.rv-root .rv-method h2, .rv-root .rv-method h3 { margin: 0; font-weight: 700; letter-spacing: -0.022em; }


.rv-root .rv-method p { margin: 0; }



/* ============ COST + MATURITY: hub parity ============ */
.rv-root .rv-cost .rv-leak-head { max-width: 940px; margin-bottom: 44px; }


.rv-root .rv-cost-fall { max-width: none; width: 100%; margin: 0; }


.rv-root .rv-cost-steps { list-style: none; margin: 0; padding: 0; }


.rv-root .rv-cost-step {
  position: relative; display: grid; grid-template-columns: 44px 1fr auto;
  align-items: center; gap: 18px; min-height: 72px; padding: 0 22px;
  border: 1px solid rgba(26,26,26,0.28); border-bottom: none; background: #fff;
  opacity: 0; transform: translateX(-14px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2,0.9,0.2,1), background-color 220ms ease;
}


.rv-root .rv-cost-steps > li:last-child { border-bottom: 1px solid rgba(26,26,26,0.28); }


.rv-root .rv-cost.is-in .rv-cost-step { opacity: 1; transform: translateX(0); }


.rv-root .rv-cost-step:hover { background: #fbfbf9; }


.rv-root .rv-cost-step.is-drift::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rv-blue); }


.rv-root .rv-cost-idx { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; color: rgba(16,16,16,0.35); }


.rv-root .rv-cost-name { font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.01em; color: #101010; margin: 0; }


.rv-root .rv-cost-state { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rv-blue); white-space: nowrap; }


.rv-root .rv-cost-base { margin-top: 28px; width: 38%; min-width: 320px; background: #101010; color: #fff; padding: 30px 26px 32px; }


.rv-root .rv-cost-base .rv-cost-stat { display: flex; align-items: baseline; gap: 12px; }


.rv-root .rv-cost-num { font-size: clamp(48px, 5.5vw, 76px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }


.rv-root .rv-cost-unit { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rv-blue); }


.rv-root .rv-cost-claim { margin: 14px 0 0; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,0.72); }


@media (max-width: 900px) {
  .rv-root .rv-cost-steps > li { width: 100% !important; }
  .rv-root .rv-cost-base { width: 100%; min-width: 0; }
  .rv-root .rv-cost-step { grid-template-columns: 32px 1fr; row-gap: 6px; padding: 16px 18px; }
  .rv-root .rv-cost-state { grid-column: 2; }
}



.rv-root .rv-matx-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 26px; margin-bottom: 32px; }


.rv-root .rv-matx-track { position: absolute; top: 34px; left: 12%; right: 12%; height: 2px; background: rgba(26,26,26,0.14); }


.rv-root .rv-matx-track i { display: block; height: 100%; background: var(--rv-blue); transition: width .5s cubic-bezier(0.2,0.9,0.2,1); }


.rv-root .rv-matx-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: none; border: 0; cursor: pointer; color: #101010; }


.rv-root .rv-matx-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid rgba(26,26,26,0.28); transition: all .3s ease; }


.rv-root .rv-matx-node.is-done .rv-matx-dot { background: var(--rv-blue); border-color: var(--rv-blue); }


.rv-root .rv-matx-node.is-active .rv-matx-dot { background: var(--rv-blue); border-color: color-mix(in oklab, #2a7de1 70%, #000); box-shadow: 0 0 0 6px color-mix(in oklab, #2a7de1 22%, transparent); }


.rv-root .rv-matx-code { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; opacity: 0.55; }


.rv-root .rv-matx-name { font-size: 15px; font-weight: 600; opacity: 0.7; }


.rv-root .rv-matx-node.is-active .rv-matx-name { opacity: 1; }


.rv-root .rv-matx-panel {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 56px); align-items: center;
  background: #fff; border: 1px solid rgba(26,26,26,0.14); padding: clamp(28px, 3.4vw, 46px);
  animation: rv-matx-fade .45s cubic-bezier(0.2,0.9,0.2,1);
}
.rv-root .rv-matx-panel[hidden] { display: none; }


.rv-root .rv-matx-num { font-size: clamp(56px, 8vw, 108px); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: color-mix(in oklab, #2a7de1 55%, transparent); }


.rv-root .rv-matx-title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; color: #101010; }


.rv-root .rv-matx-body { font-size: 17px; line-height: 1.55; color: rgba(16,16,16,0.75); margin: 0; }


.rv-root .rv-matx-tag { display: inline-block; margin-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 12px; border: 1px solid rgba(26,26,26,0.14); color: #101010; }


.rv-root .rv-matx-tag.is-accent { background: var(--rv-blue); border-color: var(--rv-blue); color: #fff; }


.rv-root .rv-matx-scale { display: flex; flex-direction: column; gap: 6px; }


.rv-root .rv-matx-scale span { display: block; width: 44px; height: 8px; background: rgba(26,26,26,0.14); }


.rv-root .rv-matx-scale span.is-on { background: var(--rv-blue); }


@media (max-width: 900px) {
  .rv-root .rv-matx-rail { grid-template-columns: 1fr; gap: 14px; }
  .rv-root .rv-matx-track { display: none; }
  .rv-root .rv-matx-node { flex-direction: row; gap: 12px; text-align: left; }
  .rv-root .rv-matx-panel { grid-template-columns: 1fr; }
  .rv-root .rv-matx-scale { flex-direction: row; }
  .rv-root .rv-matx-scale span { width: 100%; }
}




/* ---------- gap (reference port) ---------- */
.rv-gapx-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }


.rv-gapx-dim { color: rgba(16,16,16,.5); }


.rv-gapx-seg { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }


.rv-gapx-btn {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 0;
  border: 1px solid rgba(16,16,16,.16); font-size: 14.5px; font-weight: 600; color: rgba(16,16,16,.72);
  background: transparent; transition: all .28s cubic-bezier(.16,1,.3,1); cursor: pointer;
}


.rv-gapx-btn .rv-gapx-mono { color: #2a7de1; }


.rv-gapx-btn:hover { border-color: #101010; color: #101010; }


.rv-gapx-btn.is-active { background: #2a7de1; color: #fff; border-color: #2a7de1; }


.rv-gapx-btn.is-active .rv-gapx-mono { color: #fff; }


.rv-gapx-panel {
  display: grid; grid-template-columns: 1.6fr .9fr; gap: 0;
  border: 1px solid rgba(16,16,16,.12); overflow: hidden; background: #f7f8f5;
  animation: rv-gapx-fade .5s cubic-bezier(.16,1,.3,1);
}
.rv-gapx-panel[hidden] { display: none; }


.rv-gapx-main { padding: clamp(28px, 3.4vw, 48px); }


.rv-gapx-tag { display: block; color: #2a7de1; margin-bottom: 18px; }


.rv-gapx-h3 { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.14; letter-spacing: -.035em; margin: 0 0 16px; color: #101010; font-weight: 700; }


.rv-gapx-body { font-size: 17.5px; line-height: 1.6; color: rgba(16,16,16,.72); margin: 0; }


.rv-gapx-side { padding: clamp(26px, 2.6vw, 40px); border-left: 1px solid rgba(16,16,16,.12); background: #fff; display: flex; flex-direction: column; gap: 12px; }


.rv-gapx-side strong { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; color: #101010; }


.rv-gapx-ev { margin: 18px 0 10px; border-top: 1px solid rgba(16,16,16,.12); }


.rv-gapx-ev > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(16,16,16,.12); animation: rv-gapx-fade .5s cubic-bezier(.16,1,.3,1) both; }


.rv-gapx-ev dt { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }


.rv-gapx-ev dd { margin: 0; font-size: 12px; letter-spacing: .04em; text-align: right; color: #101010; border-left: 2px solid #2a7de1; padding-left: 10px; }


@media (max-width: 900px) {
  .rv-gapx-panel { grid-template-columns: 1fr; }
  .rv-gapx-side { border-left: 0; border-top: 1px solid rgba(16,16,16,.12); }
}


.rv-root .rv-diag .rv-gapx { display: block; width: 100%; grid-column: 1 / -1; }


.rv-root .rv-gapx-seg { display: flex; flex-direction: row; align-items: center; }


.rv-root .rv-gapx-btn { flex: 0 0 auto; }



/* --- THE SHIFT: aligned editorial band (final) --- */
.rv-root .rv-promise { padding: 140px 48px; }


.rv-root .rv-promise .rv-section-head { max-width: 1280px; margin: 0 auto clamp(40px, 4vw, 64px); }


.rv-root .rv-promise .rv-h2 { max-width: 18ch; font-size: clamp(38px, 5vw, 74px); }


.rv-root .rv-shift-stage { max-width: 1280px; margin: 0 auto; }


.rv-root .rv-shift-media {
  width: 100%;
  margin: 0 0 0;
  border: 1px solid var(--rf-hair, rgba(16,16,16,0.12));
  background: var(--rf-fog, #f4f5f3);
  overflow: hidden;
  position: relative;
}


.rv-root .rv-shift-media img { height: clamp(240px, 30vw, 420px); }


.rv-root .rv-shift-cap {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--rf-hair, rgba(16,16,16,0.12));
  background: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(16,16,16,.5);
}


.rv-root .rv-shift-cap span:first-child { color: #101010; }


.rv-root .rv-promise .rv-promise-grid {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  border: 0;
  background: none;
}


.rv-root .rv-promise .rv-promise-card,
.rv-root .rv-promise .rv-promise-card.is-primary {
  border: 0.8px solid rgba(26,26,26,0.28);
  border-radius: 0;
  margin: 0;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: none;
  transition: background 220ms ease, transform 220ms ease;
  transform: none;
}
.rv-root .rv-promise .rv-promise-card { background: #fff; color: #101010; }
/* Featured card stays dark-ink/white, see the earlier `.rv-promise-card.is-primary`
   base rule (background: var(--rv-ink)); this block used to also flatten
   `.is-primary` to the same white as the plain cards, and a sibling rule
   canceled its `grid-row: span 2`, so the reference's tall dark featured
   card rendered as a fourth plain white card instead. */
.rv-root .rv-promise .rv-promise-card.is-primary { background: var(--rv-ink); color: var(--rv-white); grid-row: span 2; }
.rv-root .rv-promise .rv-promise-card.is-primary :is(h3, p) { color: var(--rv-white); }


/* Reference has no hover state on these cards at all, confirmed via direct
   hover + getComputedStyle, background/transform stay identical to rest. */


.rv-root .rv-promise .rv-promise-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .16em; color: var(--rf-green, #2a7de1);
}


.rv-root .rv-promise .rv-promise-card h3 {
  font-size: 24px; line-height: 1.5; letter-spacing: -.015em; margin: 0; font-weight: 700; min-height: 2.5em;
}
.rv-root .rv-promise .rv-promise-card.is-primary h3 { font-size: 34px; }


.rv-root .rv-promise .rv-promise-card p { font-size: 17px; line-height: 1.55; color: rgb(16,16,16); margin: 0; opacity: 0.75; }


.rv-root .rv-promise .rv-del-note { max-width: 1280px; margin: 32px auto 0; }


@media (max-width: 1023px) {
  .rv-root .rv-promise .rv-promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-root .rv-promise .rv-promise-card h3 { min-height: 0; }
}


@media (max-width: 700px) {
  .rv-root .rv-promise { padding: 72px 24px; }
  .rv-root .rv-promise .rv-promise-grid { grid-template-columns: 1fr; }
}



/* ================= HERO: WIREFRAME GLOBE (right column) ================= */
.rv-root .rv-heroS-grid { align-items: center; }


.rv-root .rv-heroG { min-width: 0; display: grid; gap: 14px; align-content: center; }


.rv-root .rv-heroG-frame { position: relative; padding: 26px; }


.rv-root .rv-heroG-c {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid rgba(16,16,16,0.35);
}


.rv-root .rv-heroG-c1 { top: 0; left: 0; border-right: 0; border-bottom: 0; }


.rv-root .rv-heroG-c2 { top: 0; right: 0; border-left: 0; border-bottom: 0; }


.rv-root .rv-heroG-c3 { bottom: 0; left: 0; border-right: 0; border-top: 0; }


.rv-root .rv-heroG-c4 { bottom: 0; right: 0; border-left: 0; border-top: 0; }


.rv-root .rv-heroG-plot {
  position: relative;
  border: 1px dashed rgba(16,16,16,0.16);
  padding: 8px;
}


.rv-root .rv-heroG-plot svg {
  display: block; width: 100%; height: auto;
  color: rgba(16,16,16,0.34);
}


.rv-root .rv-heroG-sphere circle:first-child { stroke: rgba(16,16,16,0.6); }


.rv-root .rv-heroG-node { fill: none; stroke: var(--rv-blue); stroke-width: 1.6px; }


.rv-root .rv-heroG-tag {
  position: absolute;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in oklab, var(--rf-ink, #1b1d21) 62%, transparent);
  background: var(--rf-paper, #fbfaf9);
  border: 1px solid rgba(16,16,16,0.12);
  border-left: 2px solid var(--rv-blue);
  padding: 4px 8px; white-space: nowrap;
}


.rv-root .rv-heroG-tag--tl { top: 12%; left: -2%; }


.rv-root .rv-heroG-tag--tr { top: 26%; right: -4%; }


.rv-root .rv-heroG-tag--bl { bottom: 24%; left: -4%; }


.rv-root .rv-heroG-tag--br { bottom: 10%; right: -2%; }


.rv-root .rv-heroG-cap {
  display: flex; align-items: center; gap: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--rf-ink, #1b1d21) 50%, transparent);
  justify-content: flex-end;
}


.rv-root .rv-heroG-cap i { flex: 1; height: 1px; background: rgba(16,16,16,0.16); }


@media (max-width: 980px) {
  .rv-root .rv-heroG-frame { padding: 18px; }
  .rv-root .rv-heroG-tag { font-size: 9px; padding: 3px 6px; }
}


@media (max-width: 640px) {
  .rv-root .rv-heroG-tag { display: none; }
}


.rv-root .rv-heroG-mer {
  animation: rvGlobeMeridian 20s linear infinite;
}
@keyframes rvGlobeMeridian {
  0% { rx: 150px; }
  25% { rx: 0.4px; }
  50% { rx: 150px; }
  75% { rx: 0.4px; }
  100% { rx: 150px; }
}


.rv-root .rv-heroG-nodes {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: rvGlobeOrbit 40s linear infinite;
}


.rv-root .rv-heroG-node {
  animation: rvGlobeNode 3.6s ease-in-out infinite;
}


@media (prefers-reduced-motion: reduce) {
  .rv-root .rv-heroG-mer,
  .rv-root .rv-heroG-nodes,
  .rv-root .rv-heroG-node { animation: none; }
}



/* ================= BREAKTHROUGH BANNER (dark) ================= */
.rv-root .rv-break {
  background: #0a0a0a;
  padding: clamp(80px, 12vw, 170px) 24px;
  text-align: center;
}


.rv-root .rv-break-inner { max-width: 1100px; margin: 0 auto; }


.rv-root .rv-break-h {
  margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}


.rv-root .rv-break-sub {
  margin: clamp(22px, 3vw, 34px) 0 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rv-blue);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease 0.15s, transform 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s;
}


.rv-root .rv-break.is-in .rv-break-h,
.rv-root .rv-break.is-in .rv-break-sub { opacity: 1; transform: none; }


@media (prefers-reduced-motion: reduce) {
  .rv-root .rv-break-h,
  .rv-root .rv-break-sub { opacity: 1; transform: none; transition: none; }
}


@keyframes rv-instr {
  0% { stroke-dashoffset: 2000; }
  60% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}


@keyframes rv-draw { to { stroke-dashoffset: 0; } }


@keyframes rv-case-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


@keyframes rv-clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


@keyframes rv-matx-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }


@keyframes rv-gapx-fade { from { opacity: 0; transform: translateY(10px); } }


@keyframes rvGlobeOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


@keyframes rvGlobeNode {
  0%, 100% { opacity: 1; r: 4.5px; }
  50%      { opacity: 0.45; r: 6.5px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }

/* ==========================================================================
   Demand Generation: page-specific additions on top of the copied base
   (this page shares its "dark rv-root" section vocabulary and design tokens
   with the other rv-root templates; the block below covers only what that
   shared base doesn't already style: the hero signal-fan figure, the
   interactive method rail, the service-line grid, and the stack marquee +
   pillars chrome).
   ========================================================================== */

/* ---- Hero: signal fan figure ---- */
.rv-fan { position: relative; width: 100%; aspect-ratio: 1; max-width: 480px; margin-inline: auto; }
.rv-fan svg { width: 100%; height: 100%; overflow: visible; }
/* Continuous radar-sweep system, matching the reference exactly: the whole
   ray group slowly rotates (140s/turn) while each ray independently runs a
   "draw" cycle (stroke drawing in then out, 4.6s) staggered by the
   animation-delay already set inline per ray in the template, its dot
   pulsing in sync, and a breathing opacity layered on top of that, so at
   any instant only a "wedge" of rays reads as bright, sweeping around the
   circle. A conic-gradient overlay on ::after adds a second, faster (9s)
   highlight sweep. The previous version only ever ran a one-shot fade-in
   and then sat static, which is the "animation is not the same" gap. */
.rv-fan-rays { transform-origin: 320px 320px; animation: rv-fan-spin 140s linear infinite; }
.rv-fan-rays line {
	stroke: rgba(42,125,225,0.5);
	stroke-dasharray: 330;
	stroke-dashoffset: 330px;
	animation: rv-fan-draw 4.6s cubic-bezier(0.22,1,0.36,1) infinite;
	animation-delay: inherit;
}
.rv-fan-rays circle {
	fill: var(--rv-blue);
	animation: rv-fan-dot 4.6s ease-in-out infinite;
	animation-delay: inherit;
	transform-box: fill-box;
	transform-origin: 50% center;
}
.rv-fan-rays g { animation: rv-fan-breathe 6.4s ease-in-out infinite; animation-delay: inherit; }

.rv-fan-core { fill: #0d2f6e; transform-box: fill-box; transform-origin: 50% center; animation: rv-fan-core-pulse 2.6s ease-in-out infinite; }
.rv-fan::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	background: conic-gradient(rgba(42,125,225,0.2) 0deg, rgba(42,125,225,0) 42deg, rgba(42,125,225,0) 360deg);
	-webkit-mask-image: radial-gradient(circle, rgb(0,0,0) 12%, rgba(0,0,0,0.65) 62%, rgba(0,0,0,0) 78%);
	mask-image: radial-gradient(circle, rgb(0,0,0) 12%, rgba(0,0,0,0.65) 62%, rgba(0,0,0,0) 78%);
	animation: rv-fan-spin 9s linear infinite;
}
.rv-fan-tag { position: absolute; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(13,47,110,0.6); animation: rv-fan-tag-blink 5.2s ease-in-out infinite; }
.rv-fan-tag--a { top: 8%; left: 4%; animation-delay: 0s; }
.rv-fan-tag--b { top: 18%; right: 2%; animation-delay: 0.9s; }
.rv-fan-tag--c { bottom: 14%; left: 0; animation-delay: 1.8s; }
.rv-fan-tag--d { bottom: 4%; right: 6%; animation-delay: 2.7s; }

@keyframes rv-fan-spin { 100% { transform: rotate(360deg); } }
@keyframes rv-fan-draw {
	0% { stroke-dashoffset: 330px; opacity: 0; }
	18% { opacity: 1; }
	55% { stroke-dashoffset: 0; opacity: 1; }
	85% { stroke-dashoffset: -330px; opacity: 0.15; }
	100% { stroke-dashoffset: -330px; opacity: 0; }
}
@keyframes rv-fan-dot {
	0%, 40% { opacity: 0; transform: scale(0.4); }
	62% { opacity: 1; transform: scale(1.5); }
	100% { opacity: 0; transform: scale(0.6); }
}
@keyframes rv-fan-breathe { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.85; } }
@keyframes rv-fan-core-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.9); } }
@keyframes rv-fan-tag-blink { 0%, 100% { opacity: 0.28; } 45%, 60% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) {
	.rv-fan-rays, .rv-fan-rays line, .rv-fan-rays circle, .rv-fan-rays g, .rv-fan-core, .rv-fan::after, .rv-fan-tag { animation: none; }
}

/* ---- Method: interactive numbered rail + single panel ---- */
/* A horizontal 6-column tab strip sits ABOVE the full-width panel, not a
   300px sidebar beside it. Confirmed against the reference's own computed
   layout (`.rv-mdesk` is plain block, `.rv-mdesk-rail` is a 6-equal-column
   grid spanning the full row, each step's number stacked above its label). */
.rv-mdesk { margin-top: 64px; }
.rv-mdesk-rail { display: grid; grid-template-columns: repeat(6, 1fr); }
.rv-mdesk-step { display: flex; flex-direction: column; gap: 10px; padding: 22px 18px 26px; text-align: left; background: none; border: none; position: relative; transition: background 200ms ease; }
.rv-mdesk-step.is-on { background: color-mix(in oklab, var(--rv-blue) 7%, transparent); }
.rv-mdesk-step-n { font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgba(16,16,16,0.55); transition: color 200ms; }
.rv-mdesk-step-t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: rgb(16,16,16); }
/* Bottom underline, not a left rail, revealed left-to-right via scaleX,
   same mechanism as the reference's step progress indicator. */
.rv-mdesk-step-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rv-blue); transform: scaleX(0); transform-origin: 0 1px; opacity: 1; transition: transform 250ms, opacity 250ms; }
.rv-mdesk-step.is-past .rv-mdesk-step-bar { transform: scaleX(1); opacity: 0.35; }
.rv-mdesk-step.is-on .rv-mdesk-step-bar { transform: scaleX(1); opacity: 1; }
.rv-mdesk-step.is-on .rv-mdesk-step-n { color: var(--rv-blue); }
/* The panel is a 2-column GRID (main content | output), not one column
   with the output stacked below via a horizontal divider, confirmed on
   the reference: `.rv-mdesk-panel` itself is `display:grid;
   grid-template-columns: 1.35fr 0.65fr`, `.rv-mdesk-out` is a sibling grid
   item (own padding + a *left* border) sitting beside `.rv-mdesk-panel-main`,
   and the ghosted phase number is absolutely positioned straddling the
   boundary between the two columns. */
/* An author-origin `display` on this selector overrides the browser's own
   `[hidden] { display: none }` rule (author styles always win over that
   default, regardless of specificity), so every one of the 6 panels was
   staying visible and stacking vertically, only the rail tab's own
   "is-on" state was actually switching, hence the panel content never
   seeming to change. `[hidden]` must be re-asserted explicitly. */
.rv-mdesk-panel[hidden] { display: none; }
.rv-mdesk-panel { position: relative; display: grid; grid-template-columns: 1.35fr 0.65fr; background: #14459c; border: none; min-height: 320px; overflow: hidden; }
.rv-mdesk-watermark { position: absolute; top: -18px; left: 54%; font-size: 190px; font-weight: 800; color: rgba(255,255,255,0.07); line-height: 1; }
.rv-mdesk-panel-main { position: relative; z-index: 1; padding: 46px 56px; }
.rv-mdesk-phase { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(188,216,255); }
/* Compound selectors here (not just the single class) to outrank the
   page-wide `.rv-root h3`/`.rv-root p` default-ink rules further up this
   file, which otherwise win on specificity (0,1,1 beats 0,1,0) and repaint
   this text dark on the blue panel. */
.rv-mdesk-panel .rv-mdesk-title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.01em; margin: 16px 0 20px; color: var(--rv-white); }
.rv-mdesk-panel .rv-mdesk-copy { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0; }
.rv-mdesk-out { position: relative; z-index: 1; padding: 46px 40px; border-left: 0.8px solid rgba(255,255,255,0.18); }
.rv-mdesk-out-lbl { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(188,216,255); }
.rv-mdesk-out .rv-mdesk-out-txt { font-size: 15px; line-height: 1.55; color: var(--rv-white); margin: 10px 0 0; max-width: 52ch; }
.rv-mdesk-ticks { display: flex; gap: 6px; margin-top: 100px; }
.rv-mdesk-ticks span { width: 22px; height: 3px; background: rgba(255,255,255,0.2); }
.rv-mdesk-ticks span.is-on { background: var(--rv-white); }
@media (max-width: 900px) {
	.rv-mdesk-rail { grid-template-columns: repeat(3, 1fr); }
	.rv-mdesk-panel { grid-template-columns: 1fr; }
	.rv-mdesk-panel-main { padding: 32px 24px; }
	.rv-mdesk-out { padding: 24px; border-left: 0; border-top: 1px solid rgba(255,255,255,0.18); }
	.rv-mdesk-ticks { margin-top: 20px; }
	.rv-mdesk-watermark { display: none; }
}
@media (max-width: 560px) {
	.rv-mdesk-rail { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Service lines grid ---- */
.rv-svclines { background: var(--rv-black); color: var(--rv-white); padding: 150px 48px 160px; border-top: 1px solid var(--rv-hair); }
/* Compound with `.rv-svclines`: see the `.rv-deliverables` note further
   down this file, same page-wide `.rv-root p` specificity trap. */
.rv-svclines .rv-svclines-lede { max-width: 60ch; margin-top: 20px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.65); }
.rv-svc-grid { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background: none; }
/* Rebuilt against the reference's own computed layout: the "figure" isn't
   a small circular icon badge; it's a full-card decorative backdrop (a
   graph-paper grid strip plus one giant ghosted index number), and the
   corner arrow is a permanently-visible bordered square, not a hover-only
   glyph. Cards carry their own 0.8px border (confirmed on the reference),
   the old gap:1px/background-hairline "collapsed border" trick this
   replaced left the grid's own background showing through as a solid grey
   block behind the unpaired 7th card, since there was no card border of
   its own to draw instead. */
.rv-svc-card { background: var(--rv-black); border: 0.8px solid color-mix(in oklab, var(--rv-blue) 55%, transparent); }
/* Every 2nd card in each row of 3 is a solid-blue accent, not a hover
   state, confirmed on the reference by moving the mouse away entirely
   and it stayed blue; text/border colors on it are otherwise identical
   to the dark cards. */
.rv-svc-card:nth-child(3n+2) { background: var(--rv-blue); border-color: var(--rv-blue); }
/* The 7th card (lone item in row 3) spans the full row on the reference,
   same card, just wider/shorter, not a bigger box. */
.rv-svc-card:last-child { grid-column: 1 / -1; }
.rv-svc-card-link { display: flex; flex-direction: column; height: 100%; padding: 32px; position: relative; overflow: hidden; }
.rv-svc-kicker { align-self: flex-start; font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.9); border: 0.8px solid rgba(255,255,255,0.35); padding: 5px 10px; }
.rv-svc-arrow { position: absolute; top: 20px; right: 22px; width: 32px; height: 32px; display: grid; place-items: center; border: 0.8px solid rgba(255,255,255,0.4); color: var(--rv-white); font-size: 14px; }
.rv-svc-figure { position: absolute; inset: 0; pointer-events: none; }
.rv-svc-rings {
	position: absolute; top: 72px; right: 22px; left: 22px; bottom: 216px;
	background-image:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0px, rgba(255,255,255,0.16) 1px, transparent 1px, transparent 22px),
		repeating-linear-gradient(rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 22px);
}
.rv-svc-index { position: absolute; top: 64px; right: 24px; font-family: "JetBrains Mono", monospace; font-weight: 400; font-size: 72px; color: rgba(255,255,255,0.14); line-height: 1; transition: color 200ms ease; }
.rv-svc-card { transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.rv-svc-card:hover { background: var(--rv-blue); border-color: var(--rv-blue); transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(42,125,225,0.7); }
.rv-svc-card:hover .rv-svc-arrow { background: var(--rv-white); color: var(--rv-blue); border-color: var(--rv-white); transform: translate(4px, -4px); }
.rv-svc-card:hover .rv-svc-index { color: rgba(255,255,255,0.24); }
.rv-svc-body { position: relative; z-index: 1; margin-top: 140px; }
.rv-svclines .rv-svc-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--rv-white); }
.rv-svclines .rv-svc-copy { font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,0.65); margin: 0; flex: 1; }
.rv-svc-output { display: block; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rv-hair); font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.55); }
.rv-svc-output span { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rv-blue); margin-bottom: 6px; }
@media (max-width: 1100px) { .rv-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .rv-svclines { padding: 80px 24px; } .rv-svc-grid { grid-template-columns: 1fr; } }

/* ---- Stack marquee + pillars chrome ----
   Rebuilt against the reference's actual DOM/computed styles: it is NOT a
   circular orbit diagram, `.rv-stackx-core` is just a 96px-tall row that
   holds a small blue "one connected system" badge plus two faint decorative
   ping rings behind it, stacked ABOVE two separate full-width marquee rows
   (`.rv-stackx-belt`), each scrolling opposite directions. The previous
   version centered everything as one 320px circular stage with the belts
   absolutely overlapping the core, and mirrored the second row with
   `transform: scaleX(-1)` (which flips its chip text too, the reversed
   row's letters were rendering backwards). */
.rv-stackx-stage { position: relative; margin: 64px 0; }
.rv-stackx-core { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 96px; }
.rv-stackx-core-lbl { position: relative; z-index: 1; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rv-white); background: var(--rv-blue); padding: 12px 20px; }
.rv-stackx-ring { position: absolute; top: 50%; left: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border: 0.8px solid color-mix(in oklab, var(--rv-blue) 35%, transparent); border-radius: 999px; animation: rv-stackx-ping 4s ease-out infinite; }
.rv-stackx-ring--2 { animation-delay: 2s; }
@keyframes rv-stackx-ping { 0% { transform: scale(0.3); opacity: 0.7; } 100% { transform: scale(1.15); opacity: 0; } }
.rv-stackx-belt { position: relative; overflow: hidden; margin-top: 24px; }
.rv-stackx-track { display: flex; gap: 14px; width: max-content; animation: rv-stackx-run 44s linear infinite; }
.rv-stackx-belt--rev .rv-stackx-track { animation-duration: 58s; animation-direction: reverse; }
@keyframes rv-stackx-run { from { transform: translateX(0); } to { transform: translateX(-33.3334%); } }
.rv-stackx-chip { flex: none; display: flex; align-items: center; gap: 14px; width: 224px; padding: 16px 22px; border: 0.8px solid rgba(26,26,26,0.28); background: var(--rv-white); }
.rv-stackx-chip-mark { flex: none; width: 30px; height: 30px; color: var(--rv-blue); }
.rv-stackx-chip-txt { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; }
.rv-stackx-chip-txt strong { font-size: 17px; font-weight: 700; color: var(--rv-ink); }
.rv-stackx-chip-txt em { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(16,16,16,0.6); }
@media (prefers-reduced-motion: reduce) { .rv-stackx-track { animation: none; } .rv-stackx-ring { animation: none; } }
.rv-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 0; }
.rv-pillar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.rv-pillar-tag { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-blue); }
.rv-pillar-marks { display: flex; align-items: center; gap: 10px; }
.rv-pillar-mark { width: 20px; height: 20px; flex: none; color: var(--rv-blue); }
.rv-root .rv-pillar.is-primary .rv-pillar-mark { color: var(--rv-white); }
@media (max-width: 900px) {
	.rv-stackx-chip { width: 200px; }
}
@media (max-width: 700px) {
	.rv-pillars { grid-template-columns: 1fr; }
}

/* ---- Deliverables: dual-panel layout ---- */
/* This whole component was built as dark cards (white text on black),
   checked directly against the reference and it's a light, white-card
   section throughout (white panels, dark ink text, blue accents only),
   same "paper" colourway as the rest of the page's light sections. Fixing
   contrast on dark cards that shouldn't have been dark to begin with was
   the wrong fix; this replaces the whole color scheme, not just contrast. */
.rv-del-rows { display: flex; flex-direction: column; gap: 28px; background: transparent; margin-top: 64px; }
.rv-del-row { display: grid; grid-template-columns: 3fr 4fr; gap: 28px; }
.rv-del-panel { background: var(--rv-white); border: 0.8px solid rgba(16,16,16,0.12); padding: 32px; }
.rv-del-panel--num { display: flex; flex-direction: column; justify-content: space-between; }
.rv-del-meta { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(16,16,16,0.42); }
.rv-del-meta--split { display: flex; justify-content: space-between; }
.rv-del-meta em { font-style: normal; color: var(--rv-blue); }
.rv-del-count { display: flex; align-items: baseline; gap: 8px; margin: 24px 0; }
.rv-del-count-cur { font-family: "Instrument Serif", "Times New Roman", serif; font-size: 168px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: rgb(26,26,26); }
.rv-del-count-slash, .rv-del-count-tot { font-family: "Instrument Serif", serif; font-size: 120px; font-weight: 400; line-height: 1; color: var(--rv-blue); }
.rv-deliverables .rv-del-name { font-size: 18px; font-weight: 700; margin: 0 0 14px; color: var(--rv-ink); }
.rv-del-progress-row { display: flex; align-items: center; gap: 10px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgba(16,16,16,0.5); }
.rv-del-progress-track { flex: 1; height: 3px; background: rgba(16,16,16,0.12); }
.rv-del-progress-fill { display: block; height: 100%; background: var(--rv-blue); }
.rv-deliverables .rv-del-detail-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 20px 0 12px; color: var(--rv-ink); }
.rv-deliverables .rv-del-detail-body { font-size: 16px; line-height: 1.6; color: rgba(16,16,16,0.72); margin: 0 0 28px; max-width: 60ch; }
.rv-del-output { padding-top: 20px; border-top: 1px solid rgba(16,16,16,0.12); }
.rv-del-output-lbl { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rv-blue); }
.rv-deliverables .rv-del-output-body { font-size: 14.5px; line-height: 1.55; color: rgba(16,16,16,0.72); margin: 8px 0 0; }
.rv-del-pg { display: block; margin-top: 20px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgba(16,16,16,0.35); }
@media (max-width: 900px) { .rv-del-row { grid-template-columns: 1fr; } }

/* ---- Cost table + scanner (Cost section) ---- */
.rv-engine { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.rv-engine-frame { border: 1px solid var(--rv-hair-dark); background: var(--rv-white); }
.rv-leak-table { width: 100%; border-collapse: collapse; }
.rv-leak-table th { text-align: left; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0,0,0,0.5); padding: 16px 24px; border-bottom: 1px solid var(--rv-hair-dark); }
.rv-leak-table td { padding: 20px 24px; font-size: 15px; line-height: 1.5; border-bottom: 1px solid var(--rv-hair-dark); vertical-align: top; }
.rv-leak-table td:first-child { font-weight: 700; white-space: nowrap; }
.rv-leak-table tr:last-child td { border-bottom: 0; }
.rv-scanner { background: var(--rv-white); color: var(--rv-ink); border: 1px solid rgba(26,26,26,0.28); padding: 28px; display: flex; flex-direction: column; gap: 24px; }
.rv-scanner-head { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(16,16,16,0.5); }
.rv-panel-label { color: var(--rv-blue); }
.rv-scanner-num { font-size: 44px; font-weight: 700; }
.rv-scanner-label { margin-top: 14px; font-size: 14px; line-height: 1.55; color: rgba(16,16,16,0.65); }
.rv-scanner-caption { font-size: 13.5px; line-height: 1.5; color: rgba(16,16,16,0.85); padding-top: 20px; border-top: 1px solid rgba(16,16,16,0.14); }
@media (max-width: 900px) { .rv-engine { grid-template-columns: 1fr; } .rv-leak-table th, .rv-leak-table td { padding: 14px 16px; } }
/* Below 700px the 2-column table (label column pinned nowrap, description
   column left with almost no room) was squeezing "What it costs" into a
   sliver a few characters wide, wrapping every word onto its own line.
   Stack each row into a labeled block instead, matching how every other
   multi-column section on this page already collapses to 1 column at this
   breakpoint. */
@media (max-width: 700px) {
  .rv-leak-table thead { display: none; }
  .rv-leak-table, .rv-leak-table tbody, .rv-leak-table tr, .rv-leak-table td { display: block; width: auto; }
  .rv-leak-table tr { padding: 16px 0; border-bottom: 1px solid var(--rv-hair-dark); }
  .rv-leak-table tr:last-child { border-bottom: 0; }
  .rv-leak-table td { padding: 0; border-bottom: 0; }
  .rv-leak-table td:first-child { white-space: normal; margin-bottom: 8px; }
}

/* ==========================================================================
   Demand Generation: background/accent corrections.
   This file started as a copy of forecasting-reporting.css (a different
   page), which duplicates several base classes with conflicting light/dark
   variants at different points in the cascade (some using that page's own
   undefined --rf-* tokens, which silently no-op). Verified against the
   live reference's actual computed styles section by section; overriding
   here, after everything else, at matching or higher specificity, is
   more reliable than hunting down and editing every conflicting rule
   individually. ========================================================== */

/* Cost/table section: reference is white, not fog. A ".rv-root > section.X"
   rule elsewhere in this copied file (same specificity family as the ones
   below) wins over a plain ".rv-root .X" override, so matching that exact
   selector shape here to actually beat it. */
.rv-root > section.rv-leak { background: var(--rv-white); }

/* Maturity: reference is fog, not white. */
.rv-root > section.rv-mat { background: var(--rv-fog); }

/* Deliverables: reference is white, not fog/black. */
.rv-root > section.rv-deliverables { background: var(--rv-white); color: var(--rv-ink); }
.rv-root .rv-deliverables .rv-del-note { color: rgba(16,16,16,0.55); }

/* Who-for: reference is fog, not white. */
.rv-root > section.rv-whofor { background: var(--rv-fog); }

/* Case study (the dark "PIPELINE" band): reference IS dark here; this is
   one of only two intentionally-dark bands on this otherwise light page
   (the other being the service-lines section, already correct). Restoring
   the dark treatment this section actually needs. */
.rv-root .rv-cases { background: var(--rv-ink); }
.rv-root .rv-cases-frame, .rv-root .rv-cases-slab { background: #0d0d0d; border-color: rgba(255,255,255,0.1); }
.rv-root .rv-cases-right { background: var(--rv-ink); }
.rv-root .rv-cases-wordmark { color: var(--rv-fog); opacity: 0.05; }
.rv-root .rv-cases-eyebrow, .rv-root .rv-cases-clientlabel, .rv-root .rv-cases-metric-k, .rv-root .rv-cases-counter, .rv-root .rv-cases-loc-k { color: rgba(245,243,238,0.45); }
.rv-root .rv-cases-title, .rv-root .rv-cases-client, .rv-root .rv-cases-metric-v, .rv-root .rv-cases-loc-v { color: var(--rv-fog); }
.rv-root .rv-cases-body { color: rgba(245,243,238,0.65); }
.rv-root .rv-cases-metric { border-bottom-color: rgba(255,255,255,0.14); }
/* The ARR-growth figure keeps its green, a "positive metric" convention
   shared with the other case-study instances of this same Patchstack
   data, independent of this page's own blue accent. */
.rv-root .rv-cases-metric-v.is-accent { color: #64c040; }
.rv-root .rv-cases-btn { border-color: rgba(255,255,255,0.18); color: var(--rv-fog); }
.rv-root .rv-cases-btn:hover { border-color: var(--rv-blue); color: var(--rv-blue); background: color-mix(in oklab, var(--rv-blue) 15%, #0d0d0d); }
.rv-root .rv-cases-bggrid span { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.rv-root .rv-cases-preview { background: #161616; border-color: rgba(255,255,255,0.08); }
.rv-root .rv-cases-preview-bar { border-bottom-color: rgba(255,255,255,0.08); }
.rv-root .rv-cases-preview-bar span { background: rgba(255,255,255,0.14); }
.rv-root .rv-cases-preview-line, .rv-root .rv-cases-preview-block { background: rgba(255,255,255,0.08); }
.rv-root .rv-cases-underline { background: rgba(255,255,255,0.14); }

/* Hero highlighted term ("demand generation"): reference is plain blue
   text, not the black-on-blue-pill treatment a higher-specificity rule
   elsewhere in this file gives it. */
.rv-root .rv-hero.rv-hero-scored .rv-display em { color: var(--rv-blue); background: none; box-shadow: none; }

/* Testimonial "folder": reference is white/dark-text, not the dark
   .rv-root .rv-case block copied in from forecasting-reporting.css. */
.rv-root .rv-case { background: var(--rv-white); color: var(--rv-ink); border-block: 0; }
.rv-root .rv-case .rv-case-head .rv-h2, .rv-root .rv-case h2 { color: var(--rv-ink); }
.rv-root .rv-case .rv-label, .rv-root .rv-case .rv-section-label { color: rgba(16,16,16,0.55); }
/* .rv-folder-tab keeps its own base rule (black tab, white text, sitting
   above the folder), this used to also force dark-ink text onto it,
   making the white-on-black tab illegible. */

/* "The Gap" numbered rail (rv-gapz): this page's own bespoke problem-list
   layout, not one of the shared diagnosis-cards.php layouts, so it's
   hand-built here matching the reference exactly. */
.rv-gapz { list-style: none; margin: 0; padding: 0; }
.rv-gapz-item { display: grid; grid-template-columns: 132px 1fr; gap: 40px; padding: 44px 0; border-top: 1px solid rgba(16,16,16,0.14); }
.rv-gapz-item:first-child { border-top: 0; }
.rv-gapz-rail { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.rv-gapz-num { font-family: var(--rv-font-sans, "Inter", sans-serif); font-size: 52px; font-weight: 800; letter-spacing: -0.02em; color: var(--rv-blue); line-height: 1; }
.rv-gapz-line { display: block; width: 1px; flex: 1; min-height: 40px; background: rgba(16,16,16,0.16); }
.rv-gapz-motif { color: rgba(42,125,225,0.55); }
.rv-gapz-content { max-width: 60ch; }
.rv-gapz-aud { display: block; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(16,16,16,0.48); }
.rv-gapz-title { margin: 12px 0 0; font-size: 27px; font-weight: 700; line-height: 1.25; color: var(--rv-ink); }
.rv-gapz-body { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: rgba(16,16,16,0.72); }
@media (max-width: 700px) {
	.rv-gapz-item { grid-template-columns: 1fr; gap: 16px; }
	.rv-gapz-rail { flex-direction: row; align-items: center; }
	.rv-gapz-line { width: 40px; height: 1px; min-height: 0; flex: none; }
}

/* Maturity "blueprint" cards: maturity-model.php's blueprint visual ships
   no CSS of its own (each consuming page authors it), and this page never
   got one, so the 4 cards were falling back to plain block stacking. */
.rv-blueprint { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: end; position: relative; }
.rv-blueprint-baseline { position: absolute; left: 0; right: 0; bottom: 32px; height: 1px; background: rgb(16,16,16); }
.rv-bpcard { position: relative; background: var(--rv-white); border: 1px solid rgba(26,26,26,0.28); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.rv-bpcard-corner { position: absolute; width: 10px; height: 10px; border-color: rgb(16,16,16); }
.rv-bpcard-corner--tl { top: -5px; left: -5px; border-top: 1px solid; border-left: 1px solid; }
.rv-bpcard-corner--tr { top: -5px; right: -5px; border-top: 1px solid; border-right: 1px solid; }
.rv-bpcard-corner--bl { bottom: -5px; left: -5px; border-bottom: 1px solid; border-left: 1px solid; }
.rv-bpcard-corner--br { bottom: -5px; right: -5px; border-bottom: 1px solid; border-right: 1px solid; }
.rv-bpcard-coord { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.1em; color: rgba(16,16,16,0.5); }
.rv-bpcard-title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; color: var(--rv-ink); }
.rv-bpcard-desc { font-size: 17px; line-height: 1.5; color: rgba(16,16,16,0.72); flex: 1; }
.rv-bpcard-note { margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(16,16,16,0.2); font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(16,16,16,0.55); }
.rv-bpcard-note.is-accent { margin: 12px -24px -24px; padding: 12px 24px; border-top: 0; background: var(--rv-blue); color: var(--rv-white); }
@media (max-width: 900px) {
	.rv-blueprint { grid-template-columns: 1fr; }
	.rv-bpcard { height: auto !important; }
}


/* ---- merged in from revenue-operations.css: canvas figures, rv-rh-* hero, rv-gap-* list, rv-svc-* row list, rv-ins-* shift, rv-testify/rv-case testimonial+folder, rv-matx-* maturity rail (kept alongside the demand-generation.css base for its rv-stackx/rv-pillars/rv-del-*/rv-gapz/rv-mdesk/etc. which this page also uses) ---- */

/* Revenue Operations landing page: page-specific styles.
   The .rv-header/.rv-footer base rules are intentionally kept here (this page overrides
   them with the .rv-rh-header two-column variant) even though a plain .rv-header/.rv-footer
   already exists in the shared theme stylesheet; this file loads after it, so its rules win. */

/* ============================================================
 * DevriX RevOps Auditing: service page
 * ============================================================ */

:root {
  --rv-black: #1a1a1a;
  --rv-black-2: #202020;
  --rv-green: #64c040;
  --rv-yellow: #fecd2f;
  --rv-blue: #2a7de1;
  --rv-white: #ffffff;
  --rv-fog: #f4f5f3;
  --rv-ink: #101010;
  --rv-hair: rgba(255, 255, 255, 0.14);
  --rv-hair-strong: rgba(255, 255, 255, 0.32);
  --rv-hair-dark: rgba(26, 26, 26, 0.14);
  --rv-hair-dark-strong: rgba(26, 26, 26, 0.28);
}

.rv-root {
  background: var(--rv-black);
  color: var(--rv-white);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11", "tnum";
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  display: block;
}

.rv-root * { box-sizing: border-box; }
.rv-root > section {
  display: block;
  margin: 0;
  width: 100%;
  position: relative;
  scroll-margin: 0;
  scroll-padding: 0;
}
.rv-root > section + section { margin-top: 0; }
.rv-root a { color: inherit; text-decoration: none; }
.rv-root button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.rv-root :focus-visible { outline: 2px solid var(--rv-green); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.rv-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.rv-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: currentColor;
}
.rv-label-rule {
  width: 28px; height: 1px; background: var(--rv-green); display: inline-block;
}

.rv-h2 {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5.5vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 24px 0 0;
}

.rv-display {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(58px, 8vw, 130px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 20px 0 20px;
}
.rv-display em { font-style: normal; color: var(--rv-green); }
.rv-display--sm { font-size: clamp(50px, 6.8vw, 114px); }

.rv-mask { display: block; overflow: hidden; padding: 0.05em 0; }
.rv-mask-in {
  display: block;
  transform: translateY(102%);
  transition: transform 900ms cubic-bezier(0.2, 0.9, 0.2, 1.05);
}
.is-in .rv-mask:nth-child(1) .rv-mask-in { transform: translateY(0); transition-delay: 60ms; }
.is-in .rv-mask:nth-child(2) .rv-mask-in { transform: translateY(0); transition-delay: 200ms; }
.is-in .rv-mask:nth-child(3) .rv-mask-in { transform: translateY(0); transition-delay: 340ms; }

.rv-hero .rv-mask {
  overflow: visible;
}
.rv-hero .rv-mask-in {
  transform: none;
  transition: none;
}

/* CTA */
.rv-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px;
  border: 1px solid var(--rv-green);
  color: var(--rv-white);
  font-weight: 600; font-size: 17px; letter-spacing: 0.01em;
  transition: background 120ms steps(1), color 120ms steps(1);
}
.rv-cta:hover { background: var(--rv-green); color: var(--rv-black); }
.rv-cta-arrow { transition: transform 200ms cubic-bezier(0.2, 0.9, 0.2, 1); }
.rv-cta:hover .rv-cta-arrow { transform: translateX(4px); }
.rv-cta--ghost { background: transparent; border-color: var(--rv-hair-strong); }
.rv-cta--ghost:hover { background: var(--rv-white); color: var(--rv-black); border-color: var(--rv-white); }
.rv-sublink {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 0 2px 10px;
  border: 0;
  border-bottom: 1px solid var(--rv-hair-strong);
  background: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--rv-white) 72%, transparent);
  transition: color 120ms steps(1), border-color 120ms steps(1);
}
.rv-sublink .rv-sublink-arrow { transition: transform 200ms cubic-bezier(0.2, 0.9, 0.2, 1); }
.rv-sublink:hover { color: var(--rv-green); border-color: var(--rv-green); background: none; }
.rv-sublink:hover .rv-sublink-arrow { transform: translateX(4px); }


.rv-cta-row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

/* =============== S1 HERO =============== */
.rv-hero {
  position: relative;
  min-height: auto;
  background: var(--rv-black);
  padding: 24px 48px 8px;
  display: block;
  overflow: hidden;
}
.rv-hero::before { content: none; }

.rv-topnav {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 2;
}
.rv-logo { height: 24px; width: auto; display: block; }
.rv-menu {
  display: inline-flex; flex-direction: column; gap: 5px;
  padding: 10px 12px; border: 1px solid var(--rv-hair);
}
.rv-menu span { width: 18px; height: 1px; background: var(--rv-white); display: block; }

.rv-hero-inner {
  margin-top: clamp(16px, 3vh, 32px);
  max-width: 1080px;
  padding-left: calc(100% / 12);
  padding-right: 48px;
  position: relative; z-index: 2;
}

.rv-lede {
  max-width: 560px;
  font-size: 20px;
  line-height: 1.5;
  opacity: 0.72;
  margin: 0 0 12px;
}

/* Hero composite Action + Trust band */
.rv-hero .rv-cta-row { justify-content: flex-start; margin-top: 4px; }
.rv-hero .rv-cta-row .rv-cta { padding: 18px 28px; font-size: 22px; letter-spacing: 0.01em; gap: 16px; }
.rv-hero .rv-cta-row .rv-cta-arrow { font-size: 24px; }

.rv-action-band {
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 12px 0;
  border-top: 1px solid var(--rv-hair);
  border-bottom: 1px solid var(--rv-hair);
}
.rv-action-cta {
  padding: 18px 28px;
  font-size: 22px;
  letter-spacing: 0.01em;
  gap: 16px;
  white-space: nowrap;
}
.rv-action-trust {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 14px;
  font-family: "JetBrains Mono", monospace;
  margin-left: auto;
  text-align: right;
}
.rv-action-trust-label {
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}
.rv-action-trust-marks {
  display: flex; gap: 12px;
  list-style: none; padding: 0; margin: 0;
  font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.rv-action-trust-stat {
  font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  border-left: 1px solid var(--rv-hair);
  padding-left: 14px;
  white-space: nowrap;
}
.rv-action-trust-stat .rv-num { color: var(--rv-green); font-size: 22px; margin-right: 4px; }

@media (max-width: 900px) {
  .rv-action-band { grid-template-columns: 1fr; gap: 16px; }
  .rv-action-trust { justify-content: flex-start; }
}

.rv-instrument {
  position: absolute;
  right: 0; top: 50%;
  width: 62%; height: 200px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
.rv-instr-base { stroke: var(--rv-hair); stroke-width: 1; }
.rv-instr-pulse {
  stroke: var(--rv-green); stroke-width: 1.5; fill: none;
  stroke-dasharray: 2000; stroke-dashoffset: 2000;
}
.is-in .rv-instr-pulse {
  animation: rv-instr 2400ms cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}
@keyframes rv-instr {
  0% { stroke-dashoffset: 2000; }
  60% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
.rv-instrument--resolved .rv-instr-resolve {
  stroke: var(--rv-green); stroke-width: 2; fill: none;
  stroke-dasharray: 1500; stroke-dashoffset: 1500;
}
.is-in .rv-instr-resolve {
  animation: rv-instr 2000ms cubic-bezier(0.4, 0, 0.2, 1) 300ms forwards;
}

.rv-scroll-tick {
  position: absolute; z-index: 2;
  left: 48px;
  bottom: 36px;
  display: flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.2em;
  opacity: 0.5;
  padding-left: calc(100% / 12);
}
.rv-scroll-tick i { width: 1px; height: 32px; background: var(--rv-green); display: block; }

/* =============== S2 TRUST STRIP =============== */
.rv-trust {
  background: var(--rv-black-2);
  padding: 16px 48px;
  border-top: 1px solid var(--rv-hair);
  border-bottom: 1px solid var(--rv-hair);
}
.rv-trust-frame {
  border: 1px solid var(--rv-hair);
  padding: 16px 32px;
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 40px; align-items: center;
  animation: rv-fade 800ms ease-out both;
}
@keyframes rv-fade { from { opacity: 0; } to { opacity: 1; } }
.rv-trust-marks {
  display: flex; justify-content: space-between; gap: 24px;
  list-style: none; padding: 0; margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.rv-trust-stat {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  border-left: 1px solid var(--rv-hair);
  padding-left: 24px;
}
.rv-trust-stat .rv-num { color: var(--rv-green); font-size: 22px; margin-right: 4px; }

/* =============== S3 DIAGNOSIS =============== */
.rv-diag {
  background: var(--rv-white);
  color: var(--rv-ink);
  padding: 140px 48px;
}
.rv-diag-head { max-width: 900px; margin-bottom: 72px; }

.rv-inspection {
  border: 1px solid var(--rv-hair-dark-strong);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.rv-finding {
  padding: 40px 32px;
  border-right: 1px solid var(--rv-hair-dark);
  border-bottom: 1px solid var(--rv-hair-dark);
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  background: var(--rv-white);
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.2,0.9,0.2,1), transform 600ms cubic-bezier(0.2,0.9,0.2,1.05), background 200ms;
}
.rv-diag.is-in .rv-finding { opacity: 1; transform: translateY(0); }
.rv-finding:hover { background: var(--rv-fog); transform: translateY(-3px); }
.rv-finding:nth-child(4n) { border-right: none; }
.rv-finding:nth-last-child(-n+3) { border-bottom: none; }
.rv-finding--primary {
  grid-column: 1 / span 2;
  grid-row: 1;
  background: var(--rv-ink);
  color: var(--rv-white);
  border-right: 1px solid var(--rv-hair-dark);
  border-bottom: 1px solid var(--rv-hair-dark);
}
.rv-finding--primary:hover { background: var(--rv-ink); }
.rv-finding-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.6;
}
.rv-finding--primary .rv-finding-tag { color: var(--rv-green); opacity: 1; }
.rv-finding-title {
  font-size: 24px; line-height: 1.2; font-weight: 700; margin: 0;
  letter-spacing: -0.015em;
}
.rv-finding--primary .rv-finding-title { font-size: 38px; line-height: 1.05; }
.rv-finding-desc { font-size: 17px; line-height: 1.55; opacity: 0.72; margin: 0; }
.rv-glyph {
  width: 44px; height: 44px; margin-top: auto;
  stroke: var(--rv-ink); stroke-width: 1.25;
}
.rv-finding--primary .rv-glyph { stroke: var(--rv-green); width: 56px; height: 56px; }

/* =============== S4 DASHBOARD =============== */
.rv-dashwrap {
  position: relative;
  min-height: 0;
  background: var(--rv-black);
  overflow: hidden;
  padding: 48px;
  display: block;
}
.rv-dash-gridbg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: calc(100% / 12) 80px;
}
.rv-dash-frame {
  position: relative; z-index: 2;
  border: 1.5px solid var(--rv-hair);
  padding: 40px;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  transition: border-color 400ms, box-shadow 400ms;
}
.rv-dash-frame.stage-3 {
  border-color: var(--rv-green);
  box-shadow: 0 0 0 1px var(--rv-green), 0 0 60px rgba(100,192,64,0.15);
}
.rv-dash-head { max-width: 800px; }
.rv-dash-head .rv-h2 { font-size: clamp(30px, 3.4vw, 50px); }

.rv-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}
.rv-panel {
  border: 1px solid var(--rv-hair);
  padding: 24px;
  background: rgba(0,0,0,0.4);
  opacity: 0.25;
  transform: translateY(24px);
  transition: opacity 500ms cubic-bezier(0.2,0.9,0.2,1), transform 500ms cubic-bezier(0.2,0.9,0.2,1.1), border-color 300ms;
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
}
.rv-panel.is-locked { opacity: 1; transform: translateY(0); border-color: var(--rv-green); }
.rv-dash-grid:hover .rv-panel { opacity: 0.4; }
.rv-dash-grid:hover .rv-panel:hover { opacity: 1; }
.rv-panel--snap { grid-column: 1; grid-row: 1; }
.rv-panel--health { grid-column: 2; grid-row: 1; }
.rv-panel--heat { grid-column: 1 / span 2; grid-row: 2; }

.rv-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--rv-hair);
}
.rv-panel-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rv-green);
}
.rv-panel-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.14em; opacity: 0.4;
}

.rv-snapshot { display: grid; grid-template-columns: auto auto 1fr; gap: 24px; align-items: center; }
.rv-radial { width: 88px; height: 88px; transform: rotate(-90deg); }
.rv-radial-track { fill: none; stroke: var(--rv-hair); stroke-width: 4; }
.rv-radial-fill {
  fill: none; stroke: var(--rv-green); stroke-width: 4;
  stroke-dasharray: 326.7; stroke-dashoffset: 91.5;
}
.rv-snapshot-num { font-family: "JetBrains Mono", monospace; }
.rv-snapshot-num .rv-num { font-size: 58px; font-weight: 700; line-height: 1; color: var(--rv-white); }
.rv-snapshot-num span { display: block; font-size: 13px; letter-spacing: 0.14em; opacity: 0.5; margin-top: 6px; }
.rv-snapshot-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; opacity: 0.75; }
.rv-snapshot-legend i { display: inline-block; width: 8px; height: 8px; background: var(--rv-green); margin-right: 10px; vertical-align: middle; }

.rv-health { display: grid; gap: 14px; }
.rv-health-row { display: grid; grid-template-columns: 100px 1fr 48px; gap: 16px; align-items: center; }
.rv-health-k { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.rv-health-bar { height: 6px; background: var(--rv-hair); position: relative; }
.rv-health-bar i { display: block; height: 100%; background: var(--rv-green); transition: width 900ms cubic-bezier(0.2,0.9,0.2,1); }
.rv-panel:not(.is-locked) .rv-health-bar i { width: 0 !important; }
.rv-health-v { font-family: "JetBrains Mono", monospace; text-align: right; font-size: 16px; }

.rv-heat {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  padding: 12px 0;
}
.rv-cell { display: block; aspect-ratio: 1; }
.rv-cell--ok { background: var(--rv-green); }
.rv-cell--warn { background: var(--rv-yellow); }
.rv-cell--bad { background: rgba(255,255,255,0.08); border: 1px solid var(--rv-hair); }
.rv-heat-legend { display: flex; gap: 24px; font-size: 13px; opacity: 0.7; }
.rv-heat-legend span { display: inline-flex; align-items: center; gap: 8px; }
.rv-heat-legend i { width: 12px; height: 12px; aspect-ratio: unset; }

.rv-dash-cta { opacity: 0; transform: translateY(10px); transition: opacity 400ms, transform 400ms; }
.rv-dash-cta.is-in { opacity: 1; transform: translateY(0); }

/* =============== S5 LEAKAGE =============== */
.rv-leak {
  background: var(--rv-white);
  color: var(--rv-ink);
  padding: 48px 48px 140px;
  margin-top: 0;
}
.rv-leak-head { max-width: 900px; margin-bottom: 72px; }

.rv-engine { display: grid; grid-template-columns: 3fr 1fr; gap: 32px; align-items: stretch; }
.rv-engine-frame { border: 1px solid var(--rv-hair-dark-strong); padding: 48px 40px 32px; position: relative; }
.rv-engine-track { position: relative; height: 100px; margin-bottom: 96px; }
.rv-engine-line-bg { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--rv-hair-dark); }
.rv-engine-line-fg { position: absolute; left: 0; top: 50%; height: 2px; background: var(--rv-green); transition: width 200ms linear; }
.rv-leakmark { position: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.rv-leakmark-dot { display: block; width: 14px; height: 14px; background: var(--rv-yellow); margin: 8px auto; border: 2px solid var(--rv-ink); border-radius: 50%; transition: transform 300ms; }
.rv-leakmark.is-live .rv-leakmark-dot { animation: rv-pulse 800ms ease-out; }
@keyframes rv-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(254,205,47,0.6); }
  50% { transform: scale(1.6); box-shadow: 0 0 0 12px rgba(254,205,47,0); }
  100% { transform: scale(1); }
}
.rv-leakmark-loss { display: block; font-family: "JetBrains Mono", monospace; font-size: 16px; font-weight: 700; color: var(--rv-ink); }
.rv-leakmark-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: max-content; display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; margin-top: 4px; max-width: 20ch; }
.rv-engine-stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--rv-engine-cols, 5), 1fr); border-top: 1px solid var(--rv-hair-dark); padding-top: 20px; }
.rv-engine-stages li { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; border-left: 1px solid var(--rv-hair-dark); }
.rv-engine-stages li:first-child { border-left: none; padding-left: 0; }
.rv-engine-idx { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--rv-green); }
.rv-engine-name { font-weight: 600; font-size: 16px; }

.rv-scanner { border: 1px solid var(--rv-hair-dark-strong); padding: 24px; background: var(--rv-white); display: flex; flex-direction: column; gap: 20px; }
.rv-scanner-head { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--rv-hair-dark); }
.rv-scanner-body { display: flex; flex-direction: column; gap: 20px; }
.rv-scanner-num .rv-num { font-size: 58px; font-weight: 700; color: var(--rv-ink); line-height: 1; }
.rv-scanner-label { font-size: 14px; opacity: 0.7; line-height: 1.5; margin-top: 6px; }
.rv-scanner-graph { width: 100%; height: 60px; stroke: var(--rv-green); stroke-width: 1.5; }

/* =============== S6 MATURITY =============== */
.rv-mat { background: #f4f6f1; color: var(--rv-ink); padding: 140px 48px 64px; }
.rv-mat-head { max-width: 900px; margin-bottom: 72px; }
.rv-matx-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 26px; margin-bottom: 32px; opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1); }
.rv-mat.is-in .rv-matx-rail { opacity: 1; transform: translateY(0); }
.rv-matx-track { position: absolute; top: 34px; left: 12%; right: 12%; height: 2px; background: var(--rv-hair-dark); }
.rv-matx-track i { display: block; height: 100%; background: var(--rv-green); transition: width .5s cubic-bezier(0.2,0.9,0.2,1); }
.rv-matx-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: none; border: 0; cursor: pointer; }
.rv-matx-dot { width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 2px solid var(--rv-hair-dark-strong); transition: all .3s ease; }
.rv-matx-node.is-done .rv-matx-dot { background: var(--rv-green); border-color: var(--rv-green); }
.rv-matx-node.is-active .rv-matx-dot { background: var(--rv-green); border-color: color-mix(in oklab, var(--rv-green) 70%, #000); box-shadow: 0 0 0 6px color-mix(in oklab, var(--rv-green) 22%, transparent); }
.rv-matx-code { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; opacity: 0.55; }
.rv-matx-name { font-size: 15px; font-weight: 600; opacity: 0.7; }
.rv-matx-node.is-active .rv-matx-name { opacity: 1; }
.rv-matx-panel {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 56px); align-items: center;
  background: #ffffff; border: 1px solid var(--rv-hair-dark);
  padding: clamp(28px, 3.4vw, 46px);
  animation: rv-matx-fade .45s cubic-bezier(0.2,0.9,0.2,1);
}
/* the class's own `display: grid` above has the same specificity as the UA
 * stylesheet's `[hidden] { display: none }` and, being an author rule,
 * always wins over it regardless of order, so without this, JS toggling
 * the `hidden` attribute has no visual effect at all and every stage panel
 * renders at once, stacked. */
.rv-matx-panel[hidden] { display: none; }
@keyframes rv-matx-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rv-matx-num { font-size: clamp(56px, 8vw, 108px); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: color-mix(in oklab, var(--rv-green) 55%, transparent); }
.rv-matx-title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.rv-matx-body { font-size: 17px; line-height: 1.55; opacity: 0.75; margin: 0; }
.rv-matx-tag { display: inline-block; margin-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--rv-hair-dark); }
.rv-matx-tag.is-accent { background: var(--rv-green); border-color: var(--rv-green); color: #ffffff; }
.rv-matx-scale { display: flex; flex-direction: column; gap: 6px; }
.rv-matx-scale span { display: block; width: 44px; height: 8px; background: var(--rv-hair-dark); }
.rv-matx-scale span.is-on { background: var(--rv-green); }
@media (max-width: 900px) {
  .rv-matx-rail { grid-template-columns: 1fr; gap: 14px; }
  .rv-matx-track { display: none; }
  .rv-matx-node { flex-direction: row; gap: 12px; text-align: left; }
  .rv-matx-panel { grid-template-columns: 1fr; }
  .rv-matx-scale { flex-direction: row; }
  .rv-matx-scale span { width: 100%; }
}

.rv-bpcard {
  position: relative;
  border: 1px solid color-mix(in oklab, var(--rv-green) 45%, transparent);
  background: color-mix(in oklab, var(--rv-green) 14%, #ffffff);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(30px);
  transition: opacity 700ms cubic-bezier(0.2,0.9,0.2,1), transform 700ms cubic-bezier(0.2,0.9,0.2,1.05), background-color 300ms ease;
}
.rv-blueprint > .rv-bpcard:nth-child(3) { background: color-mix(in oklab, var(--rv-green) 26%, #ffffff); }
.rv-blueprint > .rv-bpcard:nth-child(4) { background: color-mix(in oklab, var(--rv-green) 38%, #ffffff); }
.rv-blueprint > .rv-bpcard:nth-child(5) {
  background: color-mix(in oklab, var(--rv-green) 26%, #ffffff);
  border-color: color-mix(in oklab, var(--rv-green) 55%, transparent);
}
.rv-mat.is-in .rv-bpcard { opacity: 1; transform: translateY(0); }
.rv-bpcard-corner { position: absolute; width: 10px; height: 10px; border: 1px solid var(--rv-ink); }
.rv-bpcard-corner--tl { top: -5px; left: -5px; border-right: none; border-bottom: none; }
.rv-bpcard-corner--tr { top: -5px; right: -5px; border-left: none; border-bottom: none; }
.rv-bpcard-corner--bl { bottom: -5px; left: -5px; border-right: none; border-top: none; }
.rv-bpcard-corner--br { bottom: -5px; right: -5px; border-left: none; border-top: none; }
.rv-bpcard-coord { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; opacity: 0.55; }
.rv-bpcard-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: auto; }
.rv-bpcard-desc { font-size: 17px; line-height: 1.55; opacity: 0.75; }
.rv-bpcard-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding-top: 10px; border-top: 1px solid color-mix(in oklab, var(--rv-ink) 18%, transparent);
  color: var(--rv-ink); opacity: 0.65;
}
.rv-bpcard-note.is-accent { color: #ffffff; background: var(--rv-green); margin: 10px -24px -24px; padding: 12px 24px; border-top: none; opacity: 1; font-weight: 600; }


/* =============== S7 METHODOLOGY =============== */
.rv-methodwrap {
  position: relative;
  background: var(--rv-black);
  height: auto;
  min-height: 0;
  padding: 48px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 32px;
}
.rv-method-sticky { position: static; height: auto; padding: 0; display: contents; }
.rv-method-head { max-width: 900px; }
.rv-method-head .rv-h2 { font-size: clamp(30px, 3.6vw, 54px); }

.rv-window {
  position: relative;
  border: 1px solid var(--rv-hair);
  aspect-ratio: 16 / 8;
  max-height: 100%;
  margin: 0 auto; width: 100%; max-width: 1200px;
  display: flex; align-items: center; justify-content: center;
}
.rv-corner { position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--rv-green); }
.rv-corner--tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.rv-corner--tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.rv-corner--bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.rv-corner--br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.rv-window-view { width: 80%; height: 80%; display: flex; align-items: center; justify-content: center; }
.rv-phaseart { width: 100%; height: 100%; stroke: var(--rv-green); stroke-width: 1.2; fill: none; }
.rv-phaseart circle { fill: var(--rv-green); stroke: none; }
.rv-phaseart-accent { fill: var(--rv-yellow) !important; }

.rv-window-ticks { position: absolute; top: -1px; right: 24px; display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; transform: translateY(-50%); background: var(--rv-black); padding: 4px 8px; }
.rv-window-ticks button { width: 24px; height: 6px; background: var(--rv-hair-strong); border: none; display: block; padding: 0; }
.rv-window-ticks button.is-active { background: var(--rv-green); }

.rv-caption { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; border-top: 1px solid var(--rv-hair); padding-top: 20px; }
.rv-caption-num { font-family: "JetBrains Mono", monospace; font-size: 34px; color: var(--rv-green); font-weight: 700; }
.rv-caption-title { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
.rv-caption-desc { font-size: 17px; opacity: 0.7; margin-top: 4px; max-width: 640px; line-height: 1.55; }
.rv-caption-dur { font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }

/* =============== S8 INSPECT =============== */
.rv-inspect { background: var(--rv-white); color: var(--rv-ink); padding: 120px 48px 140px; margin-top: 0; }
.rv-inspect-head { max-width: 900px; margin-bottom: 56px; }
.rv-ledger { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rv-ink); }
.rv-ledger-row {
  display: grid; grid-template-columns: 100px 2fr 3fr; gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rv-hair-dark);
  align-items: baseline;
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.rv-inspect.is-in .rv-ledger-row { opacity: 1; transform: translateY(0); }
.rv-ledger-num { font-family: "JetBrains Mono", monospace; font-size: 16px; color: var(--rv-green); letter-spacing: 0.1em; }
.rv-ledger-name { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
.rv-ledger-scope { font-size: 17px; line-height: 1.55; opacity: 0.72; }
.rv-inspect-cta { margin-top: 64px; }

/* =============== S9 OUTCOMES =============== */
.rv-outcomes { background: var(--rv-fog); color: var(--rv-ink); padding: 64px 48px; }
.rv-out-head { max-width: 900px; margin-bottom: 72px; }
.rv-kpistack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 40px; }
.rv-kpi {
  background: var(--rv-white);
  border: 1px solid var(--rv-hair-dark-strong);
  padding: 48px 32px;
  position: relative;
  opacity: 0; transform: translateY(30px);
  transition: opacity 700ms cubic-bezier(0.2,0.9,0.2,1), transform 700ms cubic-bezier(0.2,0.9,0.2,1.08), z-index 200ms;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.15);
  z-index: 1;
}
.rv-outcomes.is-in .rv-kpi { opacity: 1; transform: translateY(0); }
.rv-kpi:nth-child(1) { transform: translateY(-16px); margin-right: -24px; }
.rv-kpi:nth-child(2) { transform: translateY(16px); z-index: 2; }
.rv-kpi:nth-child(3) { transform: translateY(-8px); margin-left: -24px; }
.rv-outcomes.is-in .rv-kpi:nth-child(1) { transform: translateY(-16px); }
.rv-outcomes.is-in .rv-kpi:nth-child(2) { transform: translateY(16px); }
.rv-outcomes.is-in .rv-kpi:nth-child(3) { transform: translateY(-8px); }
.rv-kpi:hover { z-index: 5; transform: translateY(-24px) !important; }
.rv-kpi-num { display: flex; align-items: baseline; gap: 4px; }
.rv-kpi-num .rv-num, .rv-kpi-num > span:first-child { font-size: 90px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--rv-ink); font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.rv-kpi-suffix { font-size: 42px; font-weight: 700; color: var(--rv-green); font-family: "JetBrains Mono", monospace; }
.rv-kpi-label { font-size: 17px; line-height: 1.55; margin-top: 20px; opacity: 0.72; max-width: 260px; }
.rv-kpi-id { position: absolute; top: 20px; right: 24px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; opacity: 0.4; }

/* =============== S10 CASE FILE =============== */
.rv-case { background: var(--rv-white); color: var(--rv-ink); padding: 140px 48px; }
.rv-case-head { max-width: 900px; margin-bottom: 56px; }
.rv-folder {
  position: relative;
  border: 1px solid var(--rv-ink);
  padding: 72px 64px 64px;
  max-width: 1100px;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.2,0.9,0.2,1.05), opacity 800ms ease-out;
}
.rv-case.is-in .rv-folder { transform: scale(1); opacity: 1; }
.rv-folder-tab {
  position: absolute; top: -1px; left: 40px; transform: translateY(-100%);
  background: var(--rv-ink); color: var(--rv-white);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.14em;
  padding: 12px 24px;
}
.rv-folder-body { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; }
.rv-quote {
  font-family: "Inter", serif;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.2; font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 780px;
  position: relative;
}
.rv-quote-mark { color: var(--rv-green); font-size: 1.4em; line-height: 0; position: relative; top: 0.3em; margin-right: 8px; }
.rv-quote-attr { margin-top: 32px; grid-column: 1; }
.rv-quote-name { display: block; font-weight: 700; font-size: 16px; }
.rv-quote-role { display: block; font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-top: 4px; }
.rv-case-metric { grid-column: 2; grid-row: 1 / span 2; text-align: right; border-left: 1px solid var(--rv-hair-dark); padding-left: 32px; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.rv-case-metric-id { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; opacity: 0.5; }
.rv-case-metric-num .rv-num { font-size: 74px; font-weight: 800; color: var(--rv-green); letter-spacing: -0.03em; }
.rv-case-metric-label { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }

/* =============== S11 CLOSE =============== */
.rv-close {
  position: relative;
  min-height: 0;
  background: var(--rv-black);
  padding: 96px 48px 32px;
  display: block;
  overflow: hidden;
  border-top: 1px solid var(--rv-hair);
}
.rv-close .rv-hero-inner { margin-top: 0; }
.rv-close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.rv-close .rv-hero-inner { position: relative; z-index: 2; }

/* =============== RESPONSIVE =============== */
@media (max-width: 900px) {
  .rv-hero, .rv-close { padding: 24px; }
  .rv-hero-inner { padding-left: 0; padding-right: 0; }
  .rv-instrument { display: none; }
  .rv-scroll-tick { padding-left: 0; }

  .rv-trust { padding: 32px 24px; }
  .rv-trust-frame { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .rv-trust-marks { flex-direction: column; gap: 8px; }
  .rv-trust-stat { border-left: none; border-top: 1px solid var(--rv-hair); padding-left: 0; padding-top: 16px; }

  .rv-diag, .rv-leak, .rv-mat, .rv-inspect, .rv-outcomes, .rv-case { padding: 80px 24px; }
  .rv-inspection { grid-template-columns: 1fr; grid-template-rows: none; }
  .rv-finding, .rv-finding--primary { grid-column: 1 !important; grid-row: auto !important; border-right: none !important; border-bottom: 1px solid var(--rv-hair-dark); }

  .rv-dashwrap { min-height: auto; padding: 80px 24px; }
  .rv-dash-frame { padding: 24px; }
  .rv-dash-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .rv-panel { grid-column: 1 !important; grid-row: auto !important; opacity: 1; transform: none; border-color: var(--rv-green); }
  .rv-dash-frame { border-color: var(--rv-green); }

  .rv-engine { grid-template-columns: 1fr; }
  .rv-engine-stages { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rv-engine-stages li { border-left: none; padding-left: 0; }

  .rv-blueprint { grid-template-columns: 1fr; }
  .rv-bpcard { height: auto !important; }

  .rv-methodwrap { min-height: auto; padding: 80px 24px; }

  .rv-ledger-row { grid-template-columns: 40px 1fr; gap: 12px; }
  .rv-ledger-scope { grid-column: 2; }

  .rv-kpistack { grid-template-columns: 1fr; }
  .rv-kpi, .rv-outcomes.is-in .rv-kpi { transform: none !important; margin: 0 !important; }
  .rv-kpi + .rv-kpi { border-top: none; }

  .rv-folder { padding: 48px 24px 32px; }
  .rv-folder-body { grid-template-columns: 1fr; gap: 32px; }
  .rv-case-metric { grid-column: 1; grid-row: auto; border-left: none; border-top: 1px solid var(--rv-hair-dark); padding-left: 0; padding-top: 16px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-mask-in { transform: none !important; transition: none !important; }
  .rv-instr-pulse, .rv-instr-resolve { stroke-dashoffset: 0 !important; animation: none !important; }
  .rv-finding, .rv-bpcard, .rv-kpi, .rv-ledger-row, .rv-panel, .rv-folder, .rv-dash-cta {
    opacity: 1 !important; transform: none !important;
  }
}


/* =================================================================
   REBUILD: 13-section content architecture
   Reuses design tokens defined above.
   ================================================================= */

.rv-root { scroll-behavior: smooth; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---- shared section head ---- */
.rv-section-head { max-width: 900px; margin: 0 0 64px; display: flex; flex-direction: column; gap: 20px; }
.rv-section-lede { font-size: 20px; line-height: 1.55; opacity: 0.72; margin: 0; max-width: 720px; }

/* ---- HEADER ---- */
.rv-header {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
  padding: 18px 48px;
  background: rgba(26,26,26,0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rv-hair);
}
.rv-header-logo img { height: 36px; width: auto; display: block; }
.rv-header-nav { display: flex; gap: 28px; justify-content: center; font-size: 15px; letter-spacing: 0.02em; }
.rv-header-nav a { color: rgba(255,255,255,0.75); }
.rv-header-nav a:hover { color: var(--rv-green); }
.rv-header-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border: 1px solid var(--rv-green); color: var(--rv-white);
  font-size: 15px; font-weight: 600;
}
.rv-header-cta:hover { background: var(--rv-green); color: var(--rv-black); }
@media (max-width: 900px) {
  .rv-header { grid-template-columns: auto auto; padding: 14px 20px; }
  .rv-header-nav { display: none; }
}

/* ---- STICKY CTA ---- */
.rv-stickycta {
  position: fixed; bottom: 24px; right: 24px; z-index: 45;
  padding: 14px 22px; background: var(--rv-green); color: var(--rv-black) !important;
  font-weight: 500; font-size: 16px; letter-spacing: 0.02em;
  display: inline-flex; gap: 10px; align-items: center;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.2,0.9,0.2,1);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}
.rv-stickycta.is-in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rv-stickycta:hover { background: var(--rv-ink); border-color: var(--rv-ink); color: #fff !important; }
/* smaller and single-line on narrow screens, at full size the label wraps
 * to two lines here, and the fixed-position button ends up tall enough to
 * cover whatever section content happens to scroll underneath it. */
@media (max-width: 480px) {
  .rv-stickycta { bottom: 16px; right: 16px; padding: 10px 16px; font-size: 13px; gap: 6px; white-space: nowrap; }
}

/* ---- HERO FULL (above the fold) ---- */
.rv-hero-full {
  padding: 40px 48px 0;
  min-height: calc(100svh - 80px);
  height: calc(100svh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
}
.rv-hero-full .rv-hero-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.rv-hero-foot {
  margin-top: auto;
  padding-bottom: 20px;
}

.rv-hero-index {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rv-hair);
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 32px;
  align-items: center;
}
.rv-hero-index-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.rv-hero-index-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.rv-hero-index-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--rv-hair);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.rv-hix-n { color: var(--rv-green); font-size: 12px; letter-spacing: 0.12em; }
.rv-hero-scroll {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.rv-hero-scroll-line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--rv-green), transparent);
  position: relative;
}


.rv-hero-full .rv-hero-inner {
  margin-top: 0;
  max-width: 1280px;
  padding-left: calc(100% / 12);
  padding-right: 24px;
  width: 100%;
}
.rv-hero-full .rv-display {
  font-size: clamp(50px, 5.6vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 12px 0 16px;
}

.rv-hero-full .rv-lede {
  font-size: clamp(18px, 1.2vw, 21px);
  line-height: 1.5;
  margin: 0 0 22px;
  max-width: 820px;
}
.rv-cta--solid { background: var(--rv-green); color: var(--rv-black); border-color: var(--rv-green); }
.rv-cta--solid:hover { background: var(--rv-white); border-color: var(--rv-white); color: var(--rv-black); }
.rv-hero-full .rv-hero-ctas { margin-top: 0; gap: 18px; }
.rv-hero-full .rv-cta { padding: 16px 26px !important; font-size: 18px !important; gap: 12px !important; }
.rv-hero-full .rv-cta-arrow { font-size: 20px !important; }
.rv-hero-full .rv-instrument { display: none; }

.rv-hero-credibility {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rv-hair);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.rv-cred-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 22px; font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.rv-cred-list li { display: inline-flex; align-items: center; gap: 8px; }
.rv-cred-list i { width: 5px; height: 5px; background: var(--rv-green); display: inline-block; }
.rv-cred-logos { display: flex; align-items: center; gap: 14px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.16em; color: rgba(255,255,255,0.5); }
.rv-cred-logos-label { color: rgba(255,255,255,0.35); border-right: 1px solid var(--rv-hair); padding-right: 14px; }

/* ============================================================
   HERO: Editorial (page-one-of-the-method)
   Same DNA as .rv-method: hairline rules, § numbering,
   JetBrains Mono meta, single green accent.
   ============================================================ */
/* ============ Hero: Burn Ticker ============ */
:root {
  --rv-red: #ef2b2d;
  --rv-red-deep: #b71a1c;
}

/* Hero: structural grid */
.rv-root > section.rv-hero-struct {
  position: relative;
  background: #0B0B0B;
  color: #F2F1EC;
  padding: 16px clamp(32px, 6vw, 112px) 24px;
  overflow: hidden;
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

.rv-hs-dotfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}


.rv-hs-inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 1;
}

.rv-hs-grid {
  position: absolute;
  inset: 0;
  max-width: 1400px;
  margin: 0 auto;
  left: 0; right: 0;
  padding: 0 clamp(32px, 6vw, 112px);
  pointer-events: none;
  z-index: 0;
}
.rv-hs-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(242, 241, 236, 0.025);
  transform: translateX(-0.5px);
}

/* Entrance: staggered fade + rise */
.rv-hs-anim {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--rv-d, 0ms);
  will-change: opacity, transform;
}
.rv-hero-struct.is-resolved .rv-hs-anim {
  opacity: 1;
  transform: translateY(0);
}

.rv-hs-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(242, 241, 236, 0.10);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F2F1EC;
}
.rv-hs-meta { color: rgba(242,241,236,0.45); text-align: right; font-weight: 400; }
.rv-hs-eyebrow { font-weight: 500; color: rgba(242,241,236,0.85); }

.rv-hs-h1 {
  margin: clamp(14px, 1.6vh, 22px) 0 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: #F2F1EC;
  max-width: 16ch;
  text-wrap: balance;
}
.rv-hs-accent { display: inline; color: #F2F1EC; }

.rv-hs-annot {
  margin: clamp(10px, 1.2vh, 14px) 0 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(242,241,236,0.62);
  max-width: 46ch;
}
.rv-hs-sub {
  margin: 28px 0 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.55;
  color: rgba(242,241,236,0.55);
  max-width: 58ch;
}

.rv-hs-ctas {
  margin-top: clamp(14px, 1.8vh, 20px);
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.rv-hs-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #64C040;
  color: #0B0B0B;
  padding: 12px 22px;
  border-radius: 2px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid #64C040;
  transition: background 180ms ease, border-color 180ms ease;
}
.rv-hs-cta:hover { background: #7BD156; border-color: #7BD156; }
.rv-hs-cta-arrow { transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.rv-hs-cta:hover .rv-hs-cta-arrow { transform: translateX(3px); }

.rv-hs-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #F2F1EC;
  text-decoration: underline;
  text-decoration-color: rgba(100,192,64,0.7);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 180ms ease, text-underline-offset 180ms ease, color 180ms ease;
}
.rv-hs-link:hover {
  color: #F2F1EC;
  text-decoration-color: #64C040;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.rv-hs-link-arrow { transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.rv-hs-link:hover .rv-hs-link-arrow { transform: translateX(3px); }

.rv-hs-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(242,241,236,0.10);
  padding-top: 12px;
  margin-top: clamp(14px, 1.8vh, 22px);
}
.rv-hs-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 clamp(16px, 3vw, 40px);
}
.rv-hs-stat + .rv-hs-stat { border-left: 1px solid rgba(242,241,236,0.10); }
.rv-hs-stat:first-child { padding-left: 0; }
.rv-hs-stat-num {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1;
  letter-spacing: -0.024em;
  color: #F2F1EC;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.rv-hs-stat-dot {
  width: 6px;
  height: 6px;
  background: #64C040;
  display: inline-block;
  border-radius: 50%;
}
.rv-hs-stat-cap {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,241,236,0.45);
  font-weight: 400;
}

@media (max-width: 900px) {
  .rv-hero-struct { padding: 20px 24px 56px; }
  .rv-hs-grid { display: none; }
  .rv-hs-frame { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rv-hs-meta { text-align: left; }
  .rv-hs-h1 { font-size: clamp(40px, 11vw, 64px); margin-top: 36px; max-width: none; letter-spacing: -0.02em; }
  .rv-hs-annot { font-size: 16px; margin-top: 20px; }
  .rv-hs-sub { font-size: 14px; margin-top: 16px; }
  .rv-hs-ctas { margin-top: 32px; gap: 20px; }
  .rv-hs-stats { grid-template-columns: 1fr; margin-top: 48px; padding-top: 0; border-top: none; }
  .rv-hs-stat { padding: 20px 0; border-top: 1px solid rgba(242,241,236,0.10); }
  .rv-hs-stat + .rv-hs-stat { border-left: none; }
  .rv-hs-stat-num { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-hs-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rv-hs-cta-arrow, .rv-hs-link-arrow { transition: none !important; }
}



/* Hero: editorial diagnostic composition */

/* Eyebrow rule */
.rv-hs-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.rv-hs-eyebrow-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: #64C040;
}

/* Two-column body */
.rv-hs-cols {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(18px, 2vh, 28px);
}
.rv-hs-main { min-width: 0; }
.rv-hs-h1 { margin-top: 0; }

/* Inset frame shared by map */
.rv-hs-map {
  position: relative;
  background: #0E0E0E;
  border: 1px solid rgba(242,241,236,0.10);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  isolation: isolate;
  min-height: 460px;
  height: 100%;
}
.rv-hs-inset-corner {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 0 solid #64C040;
}
.rv-hs-inset-corner.tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.rv-hs-inset-corner.tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.rv-hs-inset-corner.bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.rv-hs-inset-corner.br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.rv-hs-inset-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.rv-hs-inset-tag { color: #64C040; }
.rv-hs-inset-fig { color: rgba(242,241,236,0.38); }

.rv-hs-inset-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242,241,236,0.42);
  border-top: 1px solid rgba(242,241,236,0.08);
  padding-top: 10px;
}

/* Diagnostic scorecard */
.rv-hs-inset-meta {
  color: rgba(242,241,236,0.42);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.rv-hs-score {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(242,241,236,0.10);
  flex: 1;
}
.rv-hs-score-row {
  display: grid;
  grid-template-columns: 68px 108px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(242,241,236,0.08);
  color: rgba(242,241,236,0.42);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 500ms cubic-bezier(0.22,0.61,0.36,1),
    transform 500ms cubic-bezier(0.22,0.61,0.36,1);
  transition-delay: var(--rv-d, 0ms);
}
.rv-hero-struct.is-resolved .rv-hs-score-row {
  opacity: 1;
  transform: translateY(0);
}
.rv-hs-score-code {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242,241,236,0.32);
  font-variant-numeric: tabular-nums;
}
.rv-hs-score-label {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(242,241,236,0.55);
  letter-spacing: -0.005em;
}
.rv-hs-score-note {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: rgba(242,241,236,0.38);
}
.rv-hs-score-status {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242,241,236,0.38);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  justify-content: flex-end;
}
.rv-hs-score-ring {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid rgba(242,241,236,0.28);
  background: transparent;
}
.rv-hs-score-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #64C040;
  box-shadow: 0 0 0 0 rgba(100,192,64,0.55);
}
.rv-hero-struct.is-resolved .rv-hs-score-row.is-flagged .rv-hs-score-dot {
  animation: rvScorePulse 2200ms ease-out 1400ms infinite;
}
@keyframes rvScorePulse {
  0%   { box-shadow: 0 0 0 0 rgba(100,192,64,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(100,192,64,0); }
  100% { box-shadow: 0 0 0 0 rgba(100,192,64,0); }
}

/* Flagged row: full contrast */
.rv-hs-score-row.is-flagged {
  background: linear-gradient(90deg, rgba(100,192,64,0.06), rgba(100,192,64,0) 60%);
  border-left: 1px solid #64C040;
  padding-left: 12px;
  margin-left: -12px;
}
.rv-hs-score-row.is-flagged .rv-hs-score-code { color: #64C040; }
.rv-hs-score-row.is-flagged .rv-hs-score-label { color: #F2F1EC; font-weight: 600; }
.rv-hs-score-row.is-flagged .rv-hs-score-note { color: rgba(242,241,236,0.78); }
.rv-hs-score-row.is-flagged .rv-hs-score-status { color: #64C040; }

/* Output summary */
.rv-hs-score-output {
  display: grid;
  grid-template-columns: 68px 108px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 14px 2px 2px;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 10.5px;
  color: rgba(242,241,236,0.55);
}
.rv-hs-score-output-arrow {
  color: #64C040;
  font-family: "Inter", sans-serif;
  letter-spacing: 0;
  font-size: 14px;
  padding-left: 4px;
}
.rv-hs-score-output-label { color: #F2F1EC; letter-spacing: 0.22em; }
.rv-hs-score-output-note { color: rgba(242,241,236,0.42); font-size: 10px; }

.rv-hs-map-legend-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64C040;
  margin-right: 8px;
  vertical-align: middle;
}


/* Client proof strip */
.rv-hs-proof {
  margin-top: clamp(20px, 2.4vh, 28px);
  padding-top: 16px;
  border-top: 1px solid rgba(242,241,236,0.08);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.rv-hs-proof-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242,241,236,0.42);
}
.rv-hs-proof-logos {
  display: flex;
  align-items: center;
  gap: 14px 18px;
  flex-wrap: wrap;
}
.rv-hs-proof-logos span {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,241,236,0.42);
  display: inline-flex;
  align-items: center;
}
.rv-hs-proof-logos span + span::before {
  content: "·";
  margin-right: 18px;
  color: rgba(242,241,236,0.28);
}

/* Stats: pull margin in since they live inside the left column now */
.rv-hs-cols .rv-hs-stats { margin-top: clamp(22px, 2.4vh, 30px); }

@media (max-width: 900px) {
  .rv-hs-cols { grid-template-columns: 1fr; gap: 32px; }
  .rv-hs-map { min-height: 0; }
  .rv-hs-score-row { grid-template-columns: 56px 1fr auto; gap: 12px; }
  .rv-hs-score-note { display: none; }
  .rv-hs-score-output { grid-template-columns: 56px 1fr; }
  .rv-hs-score-output-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-hs-score-row, .rv-hs-score-row.is-flagged .rv-hs-score-dot {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}











.rv-gap { background: var(--rv-black); color: var(--rv-white); padding: 140px 48px; border-top: 1px solid var(--rv-hair); }
.rv-gap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rv-hair); border-left: 1px solid var(--rv-hair); }
.rv-gap-card {
  padding: 40px 32px; border-right: 1px solid var(--rv-hair); border-bottom: 1px solid var(--rv-hair);
  min-height: 220px; display: flex; flex-direction: column; gap: 24px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2,0.9,0.2,1), background 200ms;
}
.rv-gap.is-in .rv-gap-card { opacity: 1; transform: translateY(0); }
.rv-gap-card:hover { background: rgba(100,192,64,0.04); }
.rv-gap-idx { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.18em; color: var(--rv-green); }
.rv-gap-card p { font-size: 19px; line-height: 1.5; margin: 0; }
.rv-gap-outro { margin: 56px 0 0; font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); max-width: 800px; }
@media (max-width: 900px) { .rv-gap { padding: 80px 24px; } .rv-gap-grid { grid-template-columns: 1fr; } }

/* ---- PROMISE (Section 3) ---- */
.rv-promise { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px; }
.rv-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rv-promise-card {
  background: var(--rv-white); border: 1px solid var(--rv-hair-dark-strong); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px; position: relative;
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-promise.is-in .rv-promise-card { opacity: 1; transform: translateY(0); }
.rv-promise-card.is-primary { background: var(--rv-ink); color: var(--rv-white); border-color: var(--rv-ink); grid-row: span 2; }
.rv-promise-card.is-primary h3 { font-size: 34px; }
.rv-promise-num { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.18em; color: var(--rv-green); }
.rv-promise-card h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.rv-promise-card p { font-size: 17px; line-height: 1.55; opacity: 0.75; margin: 0; }
@media (max-width: 900px) { .rv-promise { padding: 80px 24px; } .rv-promise-grid { grid-template-columns: 1fr; } .rv-promise-card.is-primary { grid-row: auto; } }

/* ---- METHOD (Section 4): editorial blueprint ---- */
.rv-method {
  background: var(--rv-fog);
  color: var(--rv-ink);
  padding: 160px 48px 180px;
  border-top: 1px solid var(--rv-hair-dark);
  border-bottom: 1px solid var(--rv-hair-dark);
  position: relative;
  overflow: hidden;
}
.rv-method .rv-label { color: rgba(16,16,16,0.55); }
.rv-method .rv-h2 { color: var(--rv-ink); }
.rv-method-head-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 96px; align-items: end; }
.rv-method-head-row > div { display: flex; flex-direction: column; gap: 20px; }
.rv-method-lede { font-size: 19px; line-height: 1.55; color: rgba(16,16,16,0.66); margin: 0; }

.rv-mbp { position: relative; margin-top: 8px; }
.rv-mbp-grid {
  position: absolute; inset: -80px -80px -80px -80px; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(16,16,16,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,16,16,0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.rv-mbp-legend {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(16,16,16,0.55);
  margin-bottom: 40px;
}
.rv-mbp-legend-line { flex: 0 0 120px; height: 1px; background: rgba(16,16,16,0.28); }

.rv-mbp-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 96px;
  align-items: start;
}

.rv-mbp-side { position: sticky; top: 96px; align-self: start; }
.rv-mbp-side-inner {
  position: relative;
  border-left: 1px solid rgba(16,16,16,0.18);
  padding: 8px 0 8px 28px;
  display: flex; flex-direction: column; gap: 36px;
}
.rv-mbp-numstack { display: flex; flex-direction: column; gap: 6px; }
.rv-mbp-numline {
  display: flex; align-items: baseline; gap: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(16,16,16,0.4);
  transition: color 320ms ease;
}
.rv-mbp-numline-k { color: rgba(16,16,16,0.35); }
.rv-mbp-numline.is-done { color: rgba(16,16,16,0.55); }
.rv-mbp-numline.is-done .rv-mbp-numline-k { color: var(--rv-green); }
.rv-mbp-numline.is-on { color: var(--rv-ink); }
.rv-mbp-numline.is-on .rv-mbp-numline-k { color: var(--rv-green); }

.rv-mbp-bignum {
  position: relative;
  line-height: 0.82;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(180px, 22vw, 320px);
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(16,16,16,0.85);
  user-select: none;
}
.rv-mbp-bignum-out { display: block; }
.rv-mbp-bignum::after {
  content: "";
  position: absolute; left: 0; bottom: -18px;
  width: 96px; height: 2px; background: var(--rv-green);
}

.rv-mbp-meta {
  display: flex; flex-direction: column; gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(16,16,16,0.6);
}
.rv-mbp-meta-bar {
  display: block; width: 100%; max-width: 240px; height: 2px;
  background: rgba(16,16,16,0.14); position: relative; overflow: hidden;
}
.rv-mbp-meta-bar > span {
  display: block; height: 100%; background: var(--rv-ink);
  transition: width 320ms cubic-bezier(0.2,0.9,0.2,1);
}

.rv-mbp-list {
  position: relative; list-style: none; margin: 0;
  padding: 4px 0 4px 56px;
}
.rv-mbp-spine {
  position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px;
  background: rgba(16,16,16,0.18);
}
.rv-mbp-spine-fill {
  position: absolute; left: -1px; top: 0; width: 3px;
  height: calc(var(--rv-mbp-p, 0) * 100%);
  background: var(--rv-ink);
  transition: height 220ms cubic-bezier(0.2,0.9,0.2,1);
}

.rv-mbp-row {
  position: relative;
  padding: 40px 0 44px;
  border-bottom: 1px solid rgba(16,16,16,0.12);
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.rv-mbp-row:first-child { padding-top: 8px; }
.rv-mbp-row:last-child { border-bottom: none; }

.rv-mbp-station {
  position: absolute; left: -56px; top: 48px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.rv-mbp-row:first-child .rv-mbp-station { top: 16px; }
.rv-mbp-tick {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 1px;
  transform: translate(-50%, -50%); background: rgba(16,16,16,0.28);
}
.rv-mbp-dot {
  position: relative; width: 11px; height: 11px; border-radius: 999px;
  background: var(--rv-fog); border: 1.5px solid rgba(16,16,16,0.35);
  transition: background 320ms ease, border-color 320ms ease, transform 320ms ease, box-shadow 320ms ease;
}
.rv-mbp-row.is-done .rv-mbp-dot { background: var(--rv-ink); border-color: var(--rv-ink); }
.rv-mbp-row.is-active .rv-mbp-dot {
  background: var(--rv-green); border-color: var(--rv-green);
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(100,192,64,0.18);
}

.rv-mbp-body {
  opacity: 0.5;
  transform: translateY(6px);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-mbp-row.is-done .rv-mbp-body,
.rv-mbp-row.is-active .rv-mbp-body { opacity: 1; transform: translateY(0); }

.rv-mbp-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(16,16,16,0.5);
  margin-bottom: 18px;
}
.rv-mbp-code { color: var(--rv-ink); }
.rv-mbp-rule { flex: 0 0 40px; height: 1px; background: rgba(16,16,16,0.28); }
.rv-mbp-row.is-active .rv-mbp-state { color: var(--rv-green); }
.rv-mbp-row.is-done .rv-mbp-state { color: rgba(16,16,16,0.62); }

.rv-mbp-title {
  display: flex; align-items: baseline; gap: 22px;
  margin: 0 0 14px;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800; letter-spacing: -0.028em; line-height: 0.98;
  color: var(--rv-ink);
}
.rv-mbp-idx {
  font-family: "JetBrains Mono", monospace;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(16,16,16,0.4);
  position: relative; top: -0.35em;
}
.rv-mbp-copy {
  max-width: 62ch;
  font-size: 17px; line-height: 1.6;
  color: rgba(16,16,16,0.74);
  margin: 0;
}

@media (max-width: 1100px) {
  .rv-mbp-shell { grid-template-columns: 1fr; gap: 56px; }
  .rv-mbp-side { position: static; }
  .rv-mbp-side-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .rv-mbp-numstack { display: none; }
  .rv-mbp-bignum { font-size: clamp(140px, 32vw, 220px); }
  .rv-mbp-bignum::after { bottom: -12px; }
}
@media (max-width: 900px) { .rv-method { padding: 96px 24px 110px; } .rv-method-head-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; } }
@media (max-width: 720px) {
  .rv-mbp-legend { margin-bottom: 24px; }
  .rv-mbp-legend-line { flex-basis: 48px; }
  .rv-mbp-side-inner { padding-left: 20px; gap: 20px; }
  .rv-mbp-bignum { font-size: 140px; -webkit-text-stroke-width: 1.2px; }
  .rv-mbp-list { padding-left: 40px; }
  .rv-mbp-spine { left: 11px; }
  .rv-mbp-station { left: -40px; width: 24px; height: 24px; }
  .rv-mbp-tick { width: 18px; }
  .rv-mbp-title { font-size: 30px; gap: 12px; }
  .rv-mbp-idx { font-size: 12px; }
  .rv-mbp-copy { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-mbp-body, .rv-mbp-dot, .rv-mbp-spine-fill, .rv-mbp-meta-bar > span { transition: none !important; }
}

/* ---- AUDIT / PILLARS (Section 5) ---- */
.rv-audit { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px; }
.rv-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rv-pillar {
  background: var(--rv-white); border: 1px solid var(--rv-hair-dark-strong); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-audit.is-in .rv-pillar { opacity: 1; transform: translateY(0); }

/* .rv-pillar starts at opacity 0 and is revealed when its section gains .is-in.
 * The only rule doing that was scoped to .rv-audit, where pillars first
 * appeared, so the differentiator pillars that Why Us renders never un-hid and
 * their content was simply invisible on the pages using that style. Any
 * revealed ancestor counts now, so a pillar cannot be stranded again by being
 * rendered somewhere new. */
.is-in .rv-pillar { opacity: 1; transform: translateY(0); }
.rv-pillar.is-primary { background: var(--rv-ink); color: var(--rv-white); border-color: var(--rv-ink); }
.rv-pillar-head { display: flex; justify-content: space-between; align-items: baseline; }
.rv-pillar-tag { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.18em; color: var(--rv-green); text-transform: uppercase; }
.rv-pillar-idx { font-family: "JetBrains Mono", monospace; font-size: 34px; font-weight: 700; opacity: 0.15; line-height: 1; }
.rv-pillar.is-primary .rv-pillar-idx { opacity: 0.35; }
.rv-pillar h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.rv-pillar-body { font-size: 17px; line-height: 1.55; opacity: 0.72; margin: 0; }
.rv-pillar ul { list-style: none; padding: 16px 0 0; margin: 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rv-hair-dark); }
.rv-pillar.is-primary ul { border-top-color: var(--rv-hair); }
.rv-pillar li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 17px; line-height: 1.55; opacity: 0.85; }
.rv-check { color: var(--rv-green); font-weight: 700; font-family: "JetBrains Mono", monospace; }
@media (max-width: 900px) { .rv-audit { padding: 80px 24px; } .rv-pillars { grid-template-columns: 1fr; } }

.rv-metrics-bar { margin-top: 56px; background: var(--rv-white); border: 1px solid var(--rv-hair-dark-strong); padding: 32px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.rv-metrics-label { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rv-green); opacity: 1; }
.rv-metrics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.rv-metrics-k { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.rv-metrics-tags { display: flex; flex-direction: column; gap: 4px; }
.rv-metrics-tags span { font-family: "JetBrains Mono", monospace; font-size: 13px; opacity: 0.75; }
@media (max-width: 1100px) { .rv-metrics-bar { grid-template-columns: 1fr; } .rv-metrics-grid { grid-template-columns: repeat(2, 1fr); } }

.rv-leadmagnet {
  margin-top: 40px; background: var(--rv-ink); color: var(--rv-white); padding: 40px 40px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; border: 1px solid var(--rv-ink);
}
.rv-leadmagnet h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 8px; }
.rv-leadmagnet p { font-size: 17px; opacity: 0.75; margin: 0; max-width: 640px; line-height: 1.55; }
@media (max-width: 900px) { .rv-leadmagnet { grid-template-columns: 1fr; } }

/* ---- DELIVERABLES (Section 6) ---- */
.rv-deliverables { background: var(--rv-black); color: var(--rv-white); padding: 140px 48px; }
.rv-del-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rv-hair); border-left: 1px solid var(--rv-hair); }
.rv-del-card {
  padding: 40px 28px; border-right: 1px solid var(--rv-hair); border-bottom: 1px solid var(--rv-hair);
  display: flex; flex-direction: column; gap: 16px; min-height: 280px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-deliverables.is-in .rv-del-card { opacity: 1; transform: translateY(0); }
.rv-del-head { display: flex; justify-content: space-between; }
.rv-del-idx { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.18em; color: var(--rv-green); }
.rv-del-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.rv-del-card p { font-size: 17px; line-height: 1.55; opacity: 0.72; margin: 0; }
.rv-del-note { margin: 48px 0 0; font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, currentColor 62%, transparent); }
@media (max-width: 900px) { .rv-deliverables { padding: 80px 24px; } .rv-del-grid { grid-template-columns: 1fr; } }

/* ---- WHOFOR (Section 7) ---- */
.rv-whofor { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px 110px; }
.rv-eng-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.35fr); gap: 0; }
.rv-eng-side { border-right: 1px solid var(--rv-hair-dark-strong); padding-right: 56px; }
.rv-eng-side-inner { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.rv-eng-stamp {
  align-self: flex-start; font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--rv-ink);
  border: 1px solid var(--rv-ink); padding: 7px 12px;
}
.rv-eng-lede { margin: 0; font-size: 16.5px; line-height: 1.7; opacity: 0.72; max-width: 42ch; }
.rv-eng-out { margin-top: 14px; border-top: 1px solid var(--rv-hair-dark-strong); padding-top: 18px; }
.rv-eng-out-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.24em;
  text-transform: uppercase; opacity: 0.5; margin-bottom: 10px;
}
.rv-eng-out ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.rv-eng-out li { font-size: 14.5px; line-height: 1.55; opacity: 0.62; position: relative; padding-left: 18px; }
.rv-eng-out li::before { content: "×"; position: absolute; left: 0; opacity: 0.55; }

.rv-eng-briefs { display: flex; flex-direction: column; padding-left: 56px; }
.rv-eng-brief {
  padding: 34px 0; border-bottom: 1px solid var(--rv-hair-dark);
  opacity: 0; transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-eng-brief:first-child { padding-top: 0; }
.rv-eng-brief:last-child { border-bottom: 0; padding-bottom: 0; }
.rv-whofor.is-in .rv-eng-brief { opacity: 1; transform: translateY(0); }
.rv-eng-brief-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.rv-eng-num {
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.2em;
  color: var(--rv-green); font-variant-numeric: tabular-nums;
}
.rv-eng-brief-head h3 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; }
.rv-eng-tag {
  margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--rv-green);
}
.rv-eng-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.rv-eng-col-label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; opacity: 0.5; padding-bottom: 10px;
  border-bottom: 1px solid var(--rv-hair-dark); margin-bottom: 12px;
}
.rv-eng-col.is-out .rv-eng-col-label { color: var(--rv-ink); opacity: 0.85; border-bottom-color: var(--rv-green); }
.rv-eng-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.rv-eng-col li { font-size: 15.5px; line-height: 1.55; opacity: 0.78; position: relative; padding-left: 18px; }
.rv-eng-col li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: currentColor; opacity: 0.5;
}
.rv-eng-col.is-out li::before { background: var(--rv-green); opacity: 1; width: 10px; }
@media (max-width: 1000px) {
  .rv-eng-grid { grid-template-columns: 1fr; }
  .rv-eng-side { border-right: 0; padding-right: 0; padding-bottom: 40px; border-bottom: 1px solid var(--rv-hair-dark-strong); }
  .rv-eng-side-inner { position: static; }
  .rv-eng-briefs { padding-left: 0; padding-top: 34px; }
}
@media (max-width: 700px) { .rv-whofor { padding: 80px 24px; } .rv-eng-cols { grid-template-columns: 1fr; gap: 20px; } }


/* ---- PROOF (Section 8) ---- */
.rv-proof { background: var(--rv-black); color: var(--rv-white); padding: 140px 48px; }
.rv-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rv-case-card {
  border: 1px solid var(--rv-hair); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 24px;
  opacity: 0; transform: translateY(30px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-proof.is-in .rv-case-card { opacity: 1; transform: translateY(0); }
.rv-case-card.is-primary { border-color: var(--rv-green); background: rgba(100,192,64,0.04); }
.rv-case-metric-row { display: flex; align-items: baseline; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--rv-hair); }
.rv-case-metric-val { font-family: "JetBrains Mono", monospace; font-size: 58px; font-weight: 800; color: var(--rv-green); line-height: 1; letter-spacing: -0.03em; }
.rv-case-metric-lbl { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.rv-case-body { display: flex; flex-direction: column; gap: 6px; }
.rv-case-tag { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.18em; color: var(--rv-green); text-transform: uppercase; margin-bottom: 10px; }
.rv-case-field-label { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; margin-top: 12px; }
.rv-case-field-val { font-size: 17px; font-weight: 600; }
.rv-case-body p { font-size: 17px; line-height: 1.55; opacity: 0.82; margin: 4px 0 0; }
.rv-case-link { margin-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rv-green); border-bottom: 1px solid var(--rv-green); align-self: flex-start; padding-bottom: 4px; }

.rv-testimonials { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.rv-testimonial { margin: 0; border-left: 2px solid var(--rv-green); padding: 12px 0 12px 24px; }
.rv-testimonial p { font-size: 20px; line-height: 1.5; margin: 0 0 16px; font-weight: 500; }
.rv-testimonial footer { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.rv-t-name { color: var(--rv-green); }

.rv-logowall { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--rv-hair); }
.rv-logowall-label { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5; margin-bottom: 24px; }
.rv-logowall-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 24px; }
.rv-logowall-grid div { font-family: "JetBrains Mono", monospace; font-size: 15px; letter-spacing: 0.14em; color: rgba(255,255,255,0.5); text-align: center; padding: 12px 0; border: 1px solid var(--rv-hair); }
@media (max-width: 1100px) { .rv-cases { grid-template-columns: 1fr; } .rv-testimonials { grid-template-columns: 1fr; } .rv-logowall-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .rv-proof { padding: 80px 24px; } }

/* ---- WHY (Section 9) ---- */
.rv-why { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px; }
.rv-obj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rv-obj {
  background: var(--rv-white); border: 1px solid var(--rv-hair-dark-strong); padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-why.is-in .rv-obj { opacity: 1; transform: translateY(0); }
.rv-obj.is-primary { background: var(--rv-ink); color: var(--rv-white); border-color: var(--rv-ink); }
.rv-obj-num { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.18em; color: var(--rv-green); }
.rv-obj h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.rv-obj p { font-size: 17px; line-height: 1.6; opacity: 0.82; margin: 0; }
.rv-diff { margin-top: 48px; background: var(--rv-ink); color: var(--rv-white); padding: 32px 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
.rv-diff-row { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 17px; line-height: 1.5; }
@media (max-width: 900px) { .rv-why { padding: 80px 24px; } .rv-obj-grid { grid-template-columns: 1fr; } .rv-diff { grid-template-columns: 1fr; padding: 24px; } }

/* ---- REVOPS HUB SERVICES ---- */
.rv-hub { background: var(--rv-black); color: var(--rv-white); padding: 150px 48px; }
.rv-hub-top {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px; align-items: end;
  padding-bottom: 44px; border-bottom: 1px solid var(--rv-hair); margin-bottom: 0;
}
.rv-hub-intro { display: flex; flex-direction: column; gap: 18px; }
.rv-hub .rv-h2 { max-width: 16ch; }
.rv-hub-lede { margin: 0; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.6); max-width: 52ch; }

.rv-hub-explorer {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 0; align-items: stretch;
}
.rv-hub-list { display: flex; flex-direction: column; border-right: 1px solid var(--rv-hair); }
.rv-hub-item {
  position: relative; display: flex; align-items: baseline; gap: 22px;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 26px 40px 26px 8px; color: rgba(255,255,255,0.55);
  border-bottom: 1px solid var(--rv-hair);
  opacity: 0; transform: translateY(14px);
  transition: opacity 640ms ease, transform 640ms cubic-bezier(0.2,0.9,0.2,1),
    color 220ms ease, padding-left 260ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-hub.is-in .rv-hub-item { opacity: 1; transform: translateY(0); }
.rv-hub-item:first-child { border-top: 1px solid var(--rv-hair); }
.rv-hub-item::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--rv-green); transition: width 380ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-hub-item.is-active::before { width: 100%; }
.rv-hub-item.is-active { color: var(--rv-white); padding-left: 22px; }
.rv-hub-item-id {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.3); transition: color 220ms ease;
}
.rv-hub-item.is-active .rv-hub-item-id { color: var(--rv-green); }
.rv-hub-item-name {
  font-size: clamp(24px, 3vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
}

.rv-hub-panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding: 54px 8px 54px 56px; border-top: 1px solid var(--rv-hair);
  animation: rvHubFade 420ms cubic-bezier(0.2,0.9,0.2,1) both;
}
@keyframes rvHubFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.rv-hub-panel-num {
  font-family: "JetBrains Mono", monospace; font-size: 68px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--rv-green);
  font-variant-numeric: tabular-nums;
}
.rv-hub-panel-name { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.rv-hub-panel-desc { margin: 0; font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.62); max-width: 46ch; }
.rv-hub-panel-cta {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.2em;
  text-transform: uppercase; text-decoration: none; color: var(--rv-black);
  background: var(--rv-green); padding: 15px 24px; border-radius: 3px;
  transition: transform 220ms ease, filter 220ms ease;
}
.rv-hub-panel-cta:hover { transform: translateX(4px); filter: brightness(1.06); }
@media (max-width: 1100px) {
  .rv-hub-top { grid-template-columns: 1fr; align-items: start; }
  .rv-hub-explorer { grid-template-columns: 1fr; }
  .rv-hub-list { border-right: 0; }
  .rv-hub-panel { padding: 40px 0 0; }
}
@media (max-width: 900px) { .rv-hub { padding: 80px 24px; } }



/* ---- FAQ (Section 12) ---- */
.rv-faq { background: var(--rv-white); color: var(--rv-ink); padding: 140px 48px; }
.rv-faq-grid { display: grid; grid-template-columns: 380px 1fr; gap: 64px; }
.rv-faq-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; align-self: start; }
.rv-faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--rv-ink); }
.rv-faq-item { border-bottom: 1px solid var(--rv-hair-dark); }
.rv-faq-item summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 40px 1fr 24px; gap: 20px; align-items: baseline;
  padding: 28px 0;
  transition: color 200ms;
}
.rv-faq-item summary::-webkit-details-marker { display: none; }
.rv-faq-num { font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.14em; color: var(--rv-green); }
.rv-faq-q { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.rv-faq-plus { font-family: "JetBrains Mono", monospace; font-size: 24px; color: var(--rv-green); transition: transform 200ms; }
.rv-faq-item[open] .rv-faq-plus { transform: rotate(45deg); }
.rv-faq-item p { margin: 0 0 32px 60px; font-size: 17px; line-height: 1.65; opacity: 0.78; max-width: 720px; }
@media (max-width: 900px) { .rv-faq { padding: 80px 24px; } .rv-faq-grid { grid-template-columns: 1fr; gap: 40px; } .rv-faq-side { position: static; } .rv-faq-item p { margin-left: 0; } }

/* ---- FOOTER ---- */
.rv-footer { background: var(--rv-black); color: var(--rv-white); border-top: 1px solid var(--rv-hair); padding: 40px 48px; }
.rv-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.rv-footer-brand { display: flex; align-items: center; gap: 12px; font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.rv-footer-brand img { height: 20px; width: auto; }
.rv-footer-links { display: flex; gap: 24px; font-size: 15px; }
.rv-footer-links a { color: rgba(255,255,255,0.6); }
.rv-footer-links a:hover { color: var(--rv-green); }

/* Resolved instrument variant for close */
.rv-instrument--resolved .rv-instr-resolve { stroke: var(--rv-green); stroke-width: 1.5; fill: none; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: rv-draw 2s cubic-bezier(0.2,0.9,0.2,1) forwards; }
@keyframes rv-draw { to { stroke-dashoffset: 0; } }

/* =================================================================
   DESIGN OVERLAY: port source project motifs onto current structure.
   No content/structure changes; class hooks unchanged.
   ================================================================= */

/* 12-col grid background on dark sections */
.rv-hero-full, .rv-gap, .rv-method, .rv-deliverables, .rv-proof, .rv-close { position: relative; }
.rv-gap::before, .rv-proof::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}


.rv-hero-full > *, .rv-gap > *, .rv-method > *,
.rv-deliverables > *, .rv-proof > *, .rv-close > * { position: relative; z-index: 1; }

/* Blueprint corner ticks on primary/hero cards (source S6 motif) */
.rv-promise-card, .rv-pillar, .rv-obj, .rv-case-card { position: relative; }
.rv-promise-card.is-primary::before, .rv-promise-card.is-primary::after,
.rv-pillar.is-primary::before, .rv-pillar.is-primary::after,
.rv-obj.is-primary::before, .rv-obj.is-primary::after,
.rv-case-card.is-primary::before, .rv-case-card.is-primary::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1.5px solid var(--rv-green); pointer-events: none;
}
.rv-promise-card.is-primary::before, .rv-pillar.is-primary::before,
.rv-obj.is-primary::before, .rv-case-card.is-primary::before {
  top: -6px; left: -6px; border-right: none; border-bottom: none;
}
.rv-promise-card.is-primary::after, .rv-pillar.is-primary::after,
.rv-obj.is-primary::after, .rv-case-card.is-primary::after {
  bottom: -6px; right: -6px; border-left: none; border-top: none;
}

/* Method step: hover raises a green top rule (source ledger feel) */
.rv-method-grid { border-bottom: 1px solid var(--rv-hair); }
.rv-method-step { border-top: 1px solid transparent; transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.9,0.2,1), border-color 200ms, background 200ms; }
.rv-method-step:hover { border-top-color: var(--rv-green); background: rgba(100,192,64,0.04); }

/* Case card gets a folder-tab (source S10 motif) using existing rv-case-tag */
.rv-case-card { padding-top: 44px; }
.rv-case-card .rv-case-tag {
  position: absolute; top: -1px; left: 20px; transform: translateY(-50%);
  background: var(--rv-black); color: var(--rv-green);
  padding: 6px 12px; margin: 0;
  border: 1px solid var(--rv-hair);
}
.rv-case-card.is-primary .rv-case-tag { border-color: var(--rv-green); background: var(--rv-ink); }

/* Gap card hairline accent on hover */
.rv-gap-card { border-left: 2px solid transparent; transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2,0.9,0.2,1), background 200ms, border-color 200ms; }
.rv-gap-card:hover { border-left-color: var(--rv-green); }

/* Pillar head rule matches source panel head */
.rv-pillar-head { padding-bottom: 12px; border-bottom: 1px solid var(--rv-hair-dark); }
.rv-pillar.is-primary .rv-pillar-head { border-bottom-color: var(--rv-hair); }

/* Sticky header hairline */
.rv-header { box-shadow: 0 1px 0 0 var(--rv-hair); }

/* -------------------------- 1b. leakage -------------------------- */
.rv-leak {
  background: var(--rv-white);
  color: var(--rv-ink);
  padding: 140px 48px;
  margin-top: 0;
}
.rv-leak .rv-eyebrow,
.rv-leak .rv-label { color: var(--rv-ink); }
.rv-leak-head { max-width: 900px; margin-bottom: 72px; }

.rv-engine { display: grid; grid-template-columns: 3fr 1fr; gap: 32px; align-items: stretch; }
.rv-engine-frame { border: 1px solid var(--rv-hair-dark-strong); padding: 48px 40px 32px; position: relative; background: #ffffff; }
.rv-engine-track { position: relative; height: 100px; margin-bottom: 96px; }
.rv-engine-line-bg { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--rv-hair-dark); }
.rv-engine-line-fg { position: absolute; left: 0; top: 50%; height: 2px; background: var(--rv-green); transition: width 200ms linear; }
.rv-leakmark { position: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.rv-leakmark-dot { display: block; width: 14px; height: 14px; background: var(--rv-yellow); margin: 8px auto; border: 2px solid var(--rv-ink); border-radius: 50%; transition: transform 300ms; }
.rv-leakmark.is-live .rv-leakmark-dot { animation: rv-pulse 800ms ease-out; }
@keyframes rv-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(254,205,47,0.6); }
  50% { transform: scale(1.6); box-shadow: 0 0 0 12px rgba(254,205,47,0); }
  100% { transform: scale(1); }
}
.rv-leakmark-loss { display: block; font-family: "JetBrains Mono", monospace; font-size: 16px; font-weight: 700; color: var(--rv-ink); font-variant-numeric: tabular-nums; }
.rv-leakmark-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: max-content; display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(16,16,16,0.65); margin-top: 4px; max-width: 20ch; }
.rv-engine-stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--rv-engine-cols, 5), 1fr); border-top: 1px solid var(--rv-hair-dark); padding-top: 20px; }
.rv-engine-stages li { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; border-left: 1px solid var(--rv-hair-dark); }
.rv-engine-stages li:first-child { border-left: none; padding-left: 0; }
.rv-engine-idx { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--rv-green); letter-spacing: 0.12em; }
.rv-engine-name { font-weight: 600; font-size: 16px; color: var(--rv-ink); }

.rv-scanner { border: 1px solid var(--rv-hair-dark-strong); padding: 24px; background: var(--rv-white); display: flex; flex-direction: column; gap: 20px; color: var(--rv-ink); }
.rv-scanner-head { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--rv-hair-dark); }
.rv-scanner .rv-panel-label { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rv-green); }
.rv-scanner .rv-panel-id { font-family: "JetBrains Mono", monospace; font-size: 12px; color: rgba(16,16,16,0.5); }
.rv-scanner-body { display: flex; flex-direction: column; gap: 20px; }
.rv-scanner-num { font-family: "Inter", sans-serif; font-size: 58px; font-weight: 700; color: var(--rv-ink); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rv-scanner-label { font-size: 14px; color: rgba(16,16,16,0.7); line-height: 1.5; margin-top: 6px; }
.rv-scanner-graph { width: 100%; height: 60px; stroke: var(--rv-green); stroke-width: 1.5; fill: none; }


@media (max-width: 900px) {
  .rv-leak { padding: 80px 24px; }
  .rv-leak-grid { grid-template-columns: 1fr; }
  .rv-leak-panel { padding: 64px 20px 24px; overflow-x: auto; }
  .rv-leak-stages { grid-template-columns: repeat(5, minmax(90px, 1fr)); min-width: 500px; }
  .rv-leak-inset-num { font-size: 46px; }
}

/* -------------------------- 1c. maturity -------------------------- */
.rv-maturity {
  background: var(--rv-black);
  color: var(--rv-white);
  padding: 140px 48px 200px;
  border-top: 1px solid var(--rv-hair);
}
.rv-mat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 96px;
  align-items: end;
}
.rv-mat-card {
  position: relative;
  border: 1px solid var(--rv-hair);
  background: rgba(255,255,255,0.02);
  padding: 24px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-maturity.is-in .rv-mat-card { opacity: 1; }
.rv-mat-card.is-target {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 2px 0 0 var(--rv-green);
}

.rv-mat-tick {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--rv-hair-strong);
}
.rv-mat-card.is-target .rv-mat-tick { border-color: var(--rv-green); }
.rv-mat-tick--tl { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.rv-mat-tick--tr { top: -6px; right: -6px; border-left: none; border-bottom: none; }
.rv-mat-tick--bl { bottom: -6px; left: -6px; border-right: none; border-top: none; }
.rv-mat-tick--br { bottom: -6px; right: -6px; border-left: none; border-top: none; }
.rv-mat-code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.rv-mat-body { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.rv-mat-name { font-size: 24px; font-weight: 700; margin: 0; color: var(--rv-white); letter-spacing: -0.01em; }
.rv-mat-copy { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.65); margin: 0; }
.rv-mat-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding-top: 12px;
  border-top: 1px solid var(--rv-hair);
}
.rv-mat-flag {
  margin: 4px -24px -24px;
  padding: 12px 24px;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(160,214,133,0.95);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}


@media (max-width: 900px) {
  .rv-maturity { padding: 80px 24px; }
  .rv-mat-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
  .rv-mat-card { transform: none !important; }
}



.rv-hl { color: #64C040; font-weight: 500; }


/* Hero pulseline */
.rv-pulseline {
  margin-top: 28px;
  width: 100%;
  height: 84px;
  position: relative;
  border-top: 1px solid var(--rv-hair);
  border-bottom: 1px solid var(--rv-hair);
  overflow: hidden;
}
.rv-pulseline svg { width: 100%; height: 100%; display: block; }
.rv-pulseline-base {
  stroke: var(--rv-hair);
  stroke-width: 1;
  fill: none;
}
.rv-pulseline-path {
  stroke: var(--rv-green);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
.is-in .rv-pulseline-path {
  animation: rv-pulse-draw 2400ms cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}
@keyframes rv-pulse-draw {
  0%   { stroke-dashoffset: 2000; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-pulseline-path { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* Pulseline behind H1 (desktop) */
.rv-h1-wrap { position: relative; isolation: isolate; }
.rv-pulseline--behind {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}
.rv-pulseline--behind svg { width: 100%; height: 100%; }
.rv-h1-wrap > h1 { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .rv-pulseline--behind { display: none; }
}

/* -------------------------- Diagnosis section (redesign of The Gap) -------------------------- */
/* ---- The Gap: ledger layout ---- */
.rv-diag {
  background: var(--rv-white);
  color: var(--rv-ink);
  padding: 130px 48px 120px;
  border-top: 1px solid var(--rv-hair-dark);
}
.rv-diag .rv-label { color: var(--rv-ink); }

.rv-gap-shell {
  display: grid;
  grid-template-columns: minmax(300px, 30%) 1fr;
  gap: 72px;
  align-items: start;
}

.rv-gap-aside { position: sticky; top: 96px; }
.rv-gap-h2 {
  margin: 22px 0 18px;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 16ch;
}
.rv-gap-note {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(0,0,0,0.58);
  max-width: 34ch;
}
.rv-gap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rv-hair-dark);
}
.rv-gap-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 24px;
  align-items: start;
  padding: 34px 0 34px 0;
  border-bottom: 1px solid var(--rv-hair-dark);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2,0.9,0.2,1),
    padding-left 320ms ease, background-color 320ms ease;
}
.rv-diag.is-in .rv-gap-row { opacity: 1; transform: translateY(0); }
.rv-gap-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 0;
  background: var(--rv-green);
  transition: width 420ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-gap-row:hover::before { width: 100%; }
.rv-gap-row:hover { padding-left: 18px; }

.rv-gap-audience {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rv-green);
  margin-bottom: 12px;
}

.rv-gap-title {
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.24;
  letter-spacing: -0.018em;
  font-weight: 700;
  margin: 0 0 12px;
  max-width: 26ch;
}
.rv-gap-body {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(0,0,0,0.6);
  max-width: 62ch;
}
.rv-gap-motif {
  color: rgba(0,0,0,0.22);
  padding-top: 4px;
  transition: color 260ms ease, transform 420ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-gap-row:hover .rv-gap-motif { color: var(--rv-green); transform: translateY(-2px); }

@media (max-width: 1100px) {
  .rv-gap-shell { grid-template-columns: 1fr; gap: 44px; }
  .rv-gap-aside { position: static; }
}
@media (max-width: 700px) {
  .rv-diag { padding: 80px 24px; }
  .rv-gap-row { grid-template-columns: 1fr; padding: 26px 0; }
  .rv-gap-motif { display: none; }
  .rv-gap-row:hover { padding-left: 0; }
}





/* =============== Outcomes (Proof) =============== */
.rv-outcomes { background: var(--rv-fog); color: var(--rv-ink); padding: 64px 48px; }
.rv-out-head { max-width: 900px; margin-bottom: 32px; }
.rv-out-head .rv-label { color: var(--rv-ink); }
.rv-outcomes .rv-h2 { color: var(--rv-ink); }
.rv-kpistack {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; padding-top: 48px;
}
.rv-kpi {
  background: var(--rv-white);
  border: 1px solid rgba(16,16,16,0.18);
  padding: 64px 30px 34px;
  position: relative;
  overflow: hidden;
  opacity: 0; transform: translateY(30px);
  transition:
    opacity 700ms cubic-bezier(0.2,0.9,0.2,1),
    transform 500ms cubic-bezier(0.2,0.9,0.2,1),
    box-shadow 500ms cubic-bezier(0.2,0.9,0.2,1);
  box-shadow: 8px 8px 0 rgba(16,16,16,0.10);
  z-index: 1;
}
/* printed rule under the header line + hairline inner frame */
.rv-kpi::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 46px;
  height: 1px; background: var(--rv-ink); opacity: 0.14;
}
.rv-kpi::after {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid rgba(16,16,16,0.10);
  pointer-events: none;
}
.rv-outcomes.is-in .rv-kpi { opacity: 1; transform: translateY(0); }
.rv-outcomes.is-in .rv-kpi:nth-child(1),
.rv-outcomes.is-in .rv-kpi:nth-child(2),
.rv-outcomes.is-in .rv-kpi:nth-child(3) { transform: translateY(0); margin: 0; }
.rv-kpi:hover {
  z-index: 5;
  transform: translate(-4px, -6px);
  box-shadow: 14px 16px 0 rgba(16,16,16,0.14);
}
.rv-kpi-num { display: flex; align-items: baseline; gap: 4px; position: relative; }
.rv-kpi-num .rv-num, .rv-kpi-num > span:first-child {
  font-size: 92px; font-weight: 800; line-height: 0.92; letter-spacing: -0.05em;
  color: var(--rv-ink); font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
}
.rv-kpi-suffix {
  font-size: 40px; font-weight: 700; color: var(--rv-green); opacity: 1;
  font-family: "JetBrains Mono", monospace;
}
.rv-kpi-label {
  font-size: 16px; line-height: 1.55; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(16,16,16,0.12);
  color: var(--rv-ink); opacity: 0.78; max-width: 280px;
}
.rv-kpi-id {
  position: absolute; top: 16px; left: 30px; right: 30px;
  display: flex; justify-content: space-between;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rv-ink); opacity: 0.45;
}
.rv-kpi-id::after { content: "MEASURED"; }



/* =============== Case File =============== */
.rv-case { background: var(--rv-white); color: var(--rv-ink); padding: 140px 48px; }
.rv-case-head { max-width: 900px; margin-bottom: 56px; }
.rv-case-head .rv-label { color: var(--rv-ink); }
.rv-case .rv-h2 { color: var(--rv-ink); }
.rv-folder {
  position: relative;
  border: 1px solid var(--rv-ink);
  padding: 72px 64px 64px;
  max-width: 1100px;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.2,0.9,0.2,1.05), opacity 800ms ease-out;
}
.rv-case.is-in .rv-folder { transform: scale(1); opacity: 1; }
.rv-folder-tab {
  position: absolute; top: -1px; left: 40px; transform: translateY(-100%);
  background: var(--rv-ink); color: var(--rv-white);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.14em;
  padding: 12px 24px;
}
.rv-folder-body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(220px, 0.85fr); gap: 56px; align-items: end; }
.rv-quote {
  font-family: "Inter", sans-serif;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.35; font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 720px;
  text-wrap: pretty;
  position: relative;
}

.rv-quote-mark { color: var(--rv-green); font-size: 1.4em; line-height: 0; position: relative; top: 0.3em; margin-right: 8px; }
.rv-quote-attr { margin-top: 32px; grid-column: 1; }
.rv-quote-name { display: block; font-weight: 700; font-size: 16px; }
.rv-quote-role { display: block; font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; margin-top: 4px; }
.rv-case-metric { grid-column: 2; grid-row: 1 / span 2; text-align: right; border-left: 1px solid var(--rv-hair-dark); padding-left: 32px; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0; }
/* Green, per the reference (rgb(100,192,64)). Replaces the 0.5 opacity
   rather than adding to it, dimming the green would wash it out, the
   same trap as .rv-eng-tag above. NB this rule is duplicated verbatim
   four times in this file; this is the last and therefore winning copy. */
.rv-case-metric-id { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--rv-green); opacity: 1; }
.rv-case-metric-num .rv-num { font-size: clamp(48px, 4.4vw, 68px); font-weight: 800; color: var(--rv-green); letter-spacing: -0.03em; font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.rv-case-metric-label { font-size: 13px; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }


@media (max-width: 900px) {
  .rv-outcomes, .rv-case { padding: 80px 24px; }
  .rv-kpistack { grid-template-columns: 1fr; }
  .rv-kpi, .rv-outcomes.is-in .rv-kpi { transform: none !important; margin: 0 !important; }
  .rv-folder { padding: 48px 24px 32px; }
  .rv-folder-body { grid-template-columns: 1fr; gap: 32px; }
  .rv-case-metric { grid-column: 1; grid-row: auto; border-left: none; border-top: 1px solid var(--rv-hair-dark); padding-left: 0; padding-top: 16px; text-align: left; }
  /* the folder tab is positioned by translateY(-100%) off its own height, so
   * a taller tab needs a bigger gap above .rv-folder to still clear the
   * heading, "CASE FILE · NITROPACK · REVENUE DELIVERY" wraps to 3 lines
   * at narrow widths, tall enough to overlap "Proof, not promise." with the
   * fixed 56px gap the desktop layout uses. */
  .rv-case-head { margin-bottom: 130px; }
  .rv-folder-tab { font-size: 12px; max-width: calc(100% - 80px); }
}



/* ============ Case Studies (slider) ============ */
/* ported from Project Page Duplicator/src/styles.css */
.rv-cs {
  background: var(--rv-black);
  color: var(--rv-white);
  padding: 110px 48px 120px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.rv-cs-inner { max-width: 1240px; margin: 0 auto; }
.rv-cs .rv-h2 { color: var(--rv-white); margin: 10px 0 0; }
/* Reference has these two the other way round from how they were built: the
   section label (and its dash) are yellow, and the per-case file line is
   green. Ours had the label muted white with a green dash and the file line
   yellow. */
.rv-cs .rv-label { color: var(--rv-yellow); }
.rv-cs .rv-label-rule { background: var(--rv-yellow); }

.rv-cs-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.rv-cs-nav { display: flex; align-items: center; gap: 12px; }
.rv-cs-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.12em; color: rgba(255,255,255,0.5);
  margin-right: 8px;
}
.rv-cs-count b { color: var(--rv-green); font-weight: 600; }
.rv-cs-count i { font-style: normal; margin: 0 4px; }
.rv-cs-arrow {
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.24);
  background: transparent; color: var(--rv-white);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.rv-cs-arrow:hover {
  background: var(--rv-green); border-color: var(--rv-green);
  color: var(--rv-black); transform: translateY(-2px);
}

.rv-cs-viewport { overflow: hidden; opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1); }
.rv-cs.is-in .rv-cs-viewport { opacity: 1; transform: translateY(0); }
.rv-cs-track {
  display: flex; width: 100%;
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
}
.rv-cs-slide {
  flex: 0 0 100%; min-width: 100%;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px;
  padding: 56px 0 8px;
}

.rv-cs-file {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rv-green);
}
.rv-cs-client {
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04;
  letter-spacing: -0.02em; margin: 16px 0 8px; font-weight: 600;
}
.rv-cs-sector { font-size: 13px; color: rgba(255,255,255,0.5); }
.rv-cs-metric {
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.16);
  max-width: 300px;
}
.rv-cs-metric-num {
  display: block; font-size: 60px; line-height: 1; font-weight: 600;
  letter-spacing: -0.03em; color: var(--rv-green);
}
.rv-cs-metric-label {
  display: block; margin-top: 12px; font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.62);
}

.rv-cs-right { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 56px; }
.rv-cs-title {
  font-size: clamp(20px, 2vw, 26px); line-height: 1.28; font-weight: 500;
  letter-spacing: -0.01em; margin: 0 0 18px;
}
.rv-cs-body { font-size: 15px; line-height: 1.72; color: rgba(255,255,255,0.68); margin: 0; }
.rv-cs-facts { list-style: none; margin: 28px 0 0; padding: 0; }
.rv-cs-facts li {
  position: relative; padding: 12px 0 12px 26px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 14px; color: rgba(255,255,255,0.82);
}
.rv-cs-facts li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 12px; height: 1px; background: var(--rv-green);
}
.rv-cs-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rv-white); text-decoration: none;
  border-bottom: 1px solid var(--rv-green); padding-bottom: 6px;
}
.rv-cs-link:hover { color: var(--rv-green); }
.rv-cs-link span { transition: transform .2s ease; }
.rv-cs-link:hover span { transform: translateX(4px); }

.rv-cs-rail {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 56px;
}
.rv-cs-tab {
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 16px 18px 0 0;
}
.rv-cs-tab-bar {
  display: block; height: 2px; background: rgba(255,255,255,0.16);
  transition: background .3s ease;
}
.rv-cs-tab-name {
  display: block; margin-top: 12px; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.44); transition: color .3s ease;
}
.rv-cs-tab:hover .rv-cs-tab-name { color: rgba(255,255,255,0.8); }
.rv-cs-tab.is-on .rv-cs-tab-bar { background: var(--rv-green); }
.rv-cs-tab.is-on .rv-cs-tab-name { color: var(--rv-white); }

.rv-cs-left {
  position: relative;
  padding: 40px 36px 44px;
  background-color: rgba(255,255,255,0.03);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.12);
  isolation: isolate;
}
.rv-cs-left-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,0.84) 0%, rgba(10,10,10,0.9) 55%, rgba(10,10,10,0.96) 100%);
  transition: background .5s ease;
}
.rv-cs-slide:hover .rv-cs-left-veil {
  background: linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.84) 55%, rgba(10,10,10,0.94) 100%);
}

@media (max-width: 900px) {
  .rv-cs { padding: 72px 22px 84px; }
  .rv-cs-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .rv-cs-slide { grid-template-columns: 1fr; gap: 34px; padding-top: 38px; }
  .rv-cs-right { border-left: 0; padding-left: 0; }
  .rv-cs-rail { grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
}

/* ============================================================
 * Data Normalization page: additional components
 * ============================================================ */

/* Record Normalization Panel (hero right visual) */
.rv-recnorm {
  border: 1px solid var(--rv-hair);
  background: rgba(255,255,255,0.02);
  padding: 28px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  min-width: 0;
}
.rv-recnorm-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--rv-hair);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.rv-recnorm-live {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--rv-green);
}
.rv-recnorm-live::before {
  content: ""; width: 8px; height: 8px; background: var(--rv-green);
  border-radius: 50%; box-shadow: 0 0 0 0 rgba(100,192,64,0.6);
  animation: rv-recnorm-blink 1600ms ease-out infinite;
}
@keyframes rv-recnorm-blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.rv-recnorm-rows { display: flex; flex-direction: column; gap: 18px; }
.rv-recnorm-row { display: flex; flex-direction: column; gap: 8px; }
.rv-recnorm-field {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.rv-recnorm-values {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  align-items: center;
  gap: 10px;
}
.rv-recnorm-val {
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.3;
  border: 1px solid transparent;
  min-width: 0;
  overflow-wrap: anywhere;
}
.rv-recnorm-val--before {
  background: rgba(224, 90, 82, 0.08);
  border-color: rgba(224, 90, 82, 0.22);
  color: rgba(255,255,255,0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(224, 90, 82, 0.5);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.rv-recnorm-val--after {
  background: rgba(100, 192, 64, 0.09);
  border-color: rgba(100, 192, 64, 0.28);
  color: var(--rv-white);
  font-weight: 600;
}
.rv-recnorm-arrow {
  text-align: center;
  color: var(--rv-green);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 16px;
}
.rv-recnorm-foot {
  border-top: 1px solid var(--rv-hair);
  padding-top: 14px;
  display: flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.rv-recnorm-foot-arrow { color: var(--rv-green); }

/* Diff view: "The Shift" */
.rv-shift {
  background: var(--rv-white);
  color: var(--rv-ink);
  padding: 140px 48px;
}
.rv-shift-head { max-width: 900px; margin-bottom: 56px; }

.rv-shift-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: 24px;
  align-items: stretch;
}
.rv-shift-slab {
  position: relative;
  background: var(--rv-green);
  color: var(--rv-ink);
  padding: 56px 40px 48px;
}
.rv-shift-bracket {
  position: absolute; top: -10px; left: -10px;
  width: 22px; height: 22px;
  border-top: 2px solid var(--rv-ink);
  border-left: 2px solid var(--rv-ink);
}
.rv-shift-slab-title {
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.rv-shift-slab-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.rv-shift-slab-list li {
  position: relative;
  padding-left: 22px;
  font-size: 17px; line-height: 1.55;
  color: color-mix(in oklab, var(--rv-ink) 82%, transparent);
}
.rv-shift-slab-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 10px; height: 1px; background: var(--rv-ink);
}


.rv-shift-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-content: start;
}
.rv-shift-card {
  border: 1px solid var(--rv-hair-dark-strong);
  background: var(--rv-white);
  padding: 32px 28px;
}
.rv-shift-card-title {
  font-size: 21px; line-height: 1.28; font-weight: 700; letter-spacing: -0.015em;
  color: var(--rv-ink);
  margin: 0 0 16px;
}
.rv-shift-card-body {
  font-size: 16px; line-height: 1.6; margin: 0;
  color: var(--rv-ink); opacity: 0.75;
}

.rv-shift-cta { margin-top: 40px; }

@media (max-width: 980px) {
  .rv-shift-grid { grid-template-columns: 1fr; }
  .rv-shift-cards { grid-template-columns: 1fr; }
}


/* Stack (3-card): reuse promise grid vibe, dark section */
.rv-stack {
  background: var(--rv-black);
  color: var(--rv-white);
  padding: 140px 48px;
}
.rv-stack-head { max-width: 900px; margin-bottom: 24px; }
.rv-stack-lede { max-width: 700px; opacity: 0.7; margin: 0 0 56px; font-size: 18px; line-height: 1.5; }
.rv-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.rv-stack-card {
  border: 1px solid var(--rv-hair);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  background: rgba(255,255,255,0.02);
}
.rv-stack-card-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rv-green);
}
.rv-stack-card-tools {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rv-white);
  padding: 10px 0;
  border-top: 1px solid var(--rv-hair);
  border-bottom: 1px solid var(--rv-hair);
}
.rv-stack-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.rv-stack-card p { font-size: 16px; line-height: 1.55; opacity: 0.72; margin: 0; }

@media (max-width: 900px) {
  .rv-stack-grid { grid-template-columns: 1fr; }
}

/* Method OUTPUT line + related links */
.rv-mbp-output {
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.1em;
  color: var(--rv-green);
  text-transform: uppercase;
}
.rv-mbp-related {
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.7;
}
.rv-mbp-related a {
  color: var(--rv-green);
  border-bottom: 1px solid rgba(100,192,64,0.4);
}

/* ============= BI Dashboards page additions ============= */

.rv-hero-bi { min-height: calc(100vh - 68px); }
.rv-hero-bi .rv-hs-inner { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: calc(100vh - 68px); }
.rv-hs-cols--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 1000px) {
  .rv-hs-cols--split { grid-template-columns: 1fr; gap: 40px; }
}

/* Metric Reconciliation Panel */
.rv-recon {
  background: var(--rv-black-2, #202020);
  border: 1px solid var(--rv-hair, rgba(255,255,255,0.14));
  padding: 28px 28px 24px;
  color: var(--rv-white);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 2px;
  align-self: center;
}
.rv-recon-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rv-hair);
}
.rv-recon-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.rv-recon-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rv-green, #64c040);
  box-shadow: 0 0 12px rgba(100,192,64,0.7);
  animation: rv-recon-pulse 1.6s ease-in-out infinite;
}
@keyframes rv-recon-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.rv-recon-metric { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.rv-recon-metric-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.rv-recon-metric-sub {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.55);
}
.rv-recon-rows { display: flex; flex-direction: column; gap: 6px; }
.rv-recon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
  min-height: 44px;
}
.rv-recon-row--bad {
  background: rgba(232, 76, 61, 0.10);
  border-left: 2px solid rgba(232, 76, 61, 0.7);
  color: rgba(255,255,255,0.82);
}
.rv-recon-row--good {
  background: rgba(100, 192, 64, 0.14);
  border-left: 2px solid var(--rv-green, #64c040);
  color: var(--rv-white);
  font-weight: 700;
}
.rv-recon-src { text-transform: uppercase; letter-spacing: 0.14em; }
.rv-recon-val {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
}
.rv-recon-divider {
  height: 1px;
  background: var(--rv-hair);
  margin: 4px 0;
}
.rv-recon-foot {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rv-green, #64c040);
  padding-top: 2px;
}

/* Differentiator strip: 2x2 grid of cards (PATTERN 4) */
.rv-diffgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 720px) {
  .rv-diffgrid { grid-template-columns: 1fr; }
}
.rv-diffcard {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 28px;
  border: 1px solid var(--rv-hair, rgba(255,255,255,0.14));
  background: rgba(255,255,255,0.02);
  min-height: 100%;
}
.rv-diffcard-check {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--rv-green, #64c040);
  color: var(--rv-green, #64c040);
  background: rgba(100,192,64,0.08);
}
.rv-diffcard-text {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--rv-white);
  font-weight: 500;
}

/* ============= Stack: "The Promise" grid (featured + 2) ============= */
.rv-stack--promise { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px; }
.rv-stack--promise .rv-stack-head .rv-h2 { color: var(--rv-ink); }
.rv-stack--promise .rv-stack-lede { opacity: 0.68; color: var(--rv-ink); }
.rv-promise-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.rv-promise-featured {
  background: var(--rv-black);
  color: var(--rv-white);
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  border: 1px solid var(--rv-black);
  min-height: 460px;
  justify-content: flex-start;
}
.rv-promise-featured .rv-promise-eyebrow { color: var(--rv-green); }
.rv-promise-featured h3 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 8px 0 0; }
.rv-promise-featured p { font-size: 17px; line-height: 1.6; opacity: 0.78; margin: 0; }
.rv-promise-eyebrow, .rv-promise-card-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rv-green);
}
.rv-promise-tools, .rv-promise-card-tools {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 0;
  border-top: 1px solid var(--rv-hair);
  border-bottom: 1px solid var(--rv-hair);
  opacity: 0.85;
}
.rv-promise-cards {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}
.rv-promise-card {
  background: var(--rv-white);
  border: 1px solid var(--rv-hair-dark-strong);
  padding: 32px 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.rv-promise-card .rv-promise-card-tools {
  border-top-color: var(--rv-hair-dark);
  border-bottom-color: var(--rv-hair-dark);
  color: var(--rv-ink);
}
.rv-promise-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--rv-ink); }
.rv-promise-card p { font-size: 16px; line-height: 1.55; color: var(--rv-ink); opacity: 0.72; margin: 0; }
@media (max-width: 1000px) {
  .rv-promise-grid { grid-template-columns: 1fr; }
  .rv-promise-featured { min-height: 0; }
}
@media (max-width: 900px) { .rv-stack--promise { padding: 80px 24px; } }

/* ============= Deliverables: stepper layout ============= */
.rv-deliverables--stepper { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px; }
.rv-deliverables--stepper .rv-h2 { color: var(--rv-ink); }
.rv-del-header { margin-bottom: 56px; max-width: 900px; }
.rv-delstep-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) 1.6fr;
  gap: 24px;
  align-items: stretch;
}
.rv-delstep-side {
  background: var(--rv-white);
  border: 1px solid var(--rv-hair-dark-strong);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 24px;
  min-height: 420px;
}
.rv-delstep-side-top {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(16,16,16,0.5);
}
.rv-delstep-bignum {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.2em;
  line-height: 1;
  color: rgba(16,16,16,0.55);
  display: flex; align-items: baseline; gap: 2px;
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}
.rv-delstep-bignum-sep, .rv-delstep-bignum-tot {
  color: var(--rv-green);
  font-style: normal;
}
.rv-delstep-side-title {
  font-family: "Inter", sans-serif;
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  color: var(--rv-ink); margin: 0;
}
.rv-delstep-progress { display: flex; flex-direction: column; gap: 10px; }
.rv-delstep-progress-label {
  display: flex; justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rv-green);
}
.rv-delstep-progress-track {
  height: 2px; background: rgba(16,16,16,0.14);
  position: relative; overflow: hidden;
}
.rv-delstep-progress-fill {
  height: 100%; background: var(--rv-green);
  transition: width 500ms cubic-bezier(0.2,0.9,0.2,1);
}

.rv-delstep-detail {
  background: var(--rv-white);
  border: 1px solid var(--rv-hair-dark-strong);
  padding: 40px 40px;
  display: flex; flex-direction: column; gap: 16px;
  animation: rv-delstep-fade 300ms ease;
}
/* same fix as .rv-matx-panel[hidden] above: this class's own `display: flex`
 * has equal specificity to (and, as an author rule, always beats) the UA's
 * `[hidden] { display: none }`, so without this override every deliverable
 * panel renders at once regardless of the `hidden` attribute JS toggles. */
.rv-delstep-detail[hidden] { display: none; }
@keyframes rv-delstep-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.rv-delstep-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(16,16,16,0.5);
}
.rv-delstep-detail-head b { color: var(--rv-green); font-weight: 700; }
.rv-delstep-detail-title {
  font-size: 26px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--rv-ink); margin: 4px 0 0;
}
.rv-delstep-detail-body {
  font-size: 17px; line-height: 1.6;
  color: var(--rv-ink); opacity: 0.75; margin: 0;
}
.rv-delstep-divider { height: 1px; background: var(--rv-hair-dark); margin: 8px 0 4px; }
.rv-delstep-output-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rv-green);
}
.rv-delstep-output-body {
  font-size: 15.5px; line-height: 1.55;
  color: var(--rv-ink); opacity: 0.72; margin: 0;
}
.rv-delstep-nav {
  display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap;
}
.rv-delstep-dot {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em;
  padding: 8px 12px;
  border: 1px solid var(--rv-hair-dark);
  background: transparent;
  color: rgba(16,16,16,0.55);
  cursor: pointer;
  transition: all 180ms ease;
}
.rv-delstep-dot:hover { border-color: var(--rv-ink); color: var(--rv-ink); }
.rv-delstep-dot.is-active {
  background: var(--rv-ink); color: var(--rv-white); border-color: var(--rv-ink);
}
.rv-delstep-dot.is-done { color: var(--rv-green); border-color: rgba(100,192,64,0.5); }
.rv-deliverables--stepper .rv-del-note { color: rgba(16,16,16,0.55); }
@media (max-width: 1000px) {
  .rv-delstep-grid { grid-template-columns: 1fr; }
  .rv-delstep-side { min-height: 0; }
}
@media (max-width: 900px) {
  .rv-deliverables--stepper { padding: 80px 24px; }
  .rv-delstep-detail { padding: 28px 24px; }
  .rv-delstep-side { padding: 28px 24px; }
}

/* ============= Case Studies (EVIDENCE) ============= */
.rv-cases { background: var(--rv-black); color: var(--rv-white); padding: 140px 48px; position: relative; }
.rv-cases-frame { position: relative; border: 1px solid var(--rv-hair); padding: 64px 56px; }
.rv-tick { position: absolute; width: 14px; height: 14px; border: 1px solid var(--rv-green); }
.rv-tick--tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.rv-tick--tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.rv-tick--bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.rv-tick--br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.rv-cases-wordmark {
  position: absolute; top: 20px; right: 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.4em;
  color: rgba(255,255,255,0.25);
}
.rv-cases-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.rv-cases-eyebrow { display: flex; align-items: center; gap: 12px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rv-green); margin-bottom: 20px; }
.rv-cases-dot { width: 8px; height: 8px; background: var(--rv-green); border-radius: 50%; box-shadow: 0 0 12px rgba(100,192,64,0.7); }
.rv-cases-title { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 24px; color: var(--rv-white); }
.rv-cases-body { font-size: 17px; line-height: 1.6; opacity: 0.78; margin: 0 0 32px; max-width: 62ch; }
.rv-cases-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 24px; border-top: 1px solid var(--rv-hair); }
.rv-cases-metric { display: flex; flex-direction: column; gap: 6px; }
.rv-cases-metric-k { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
.rv-cases-metric-v { font-family: "JetBrains Mono", monospace; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--rv-white); }
.rv-cases-metric-v.is-accent { color: var(--rv-green); }
.rv-cases-nav { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.rv-cases-btn { width: 40px; height: 40px; border: 1px solid var(--rv-hair-strong); background: transparent; color: var(--rv-white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rv-cases-btn svg { width: 18px; height: 18px; }
.rv-cases-btn:hover { border-color: var(--rv-green); color: var(--rv-green); }
.rv-cases-counter { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.18em; opacity: 0.55; }
/* Case study visual: clean stacked composition, no overlapping layers */
.rv-cases-right {
  position: relative;
  background: #141414;
  border-left: 1px solid var(--rv-hair);
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 28px;
  overflow: hidden;
  min-height: 100%;
}
.rv-cases-bggrid {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  transform: none; opacity: 1;
}
.rv-cases-bggrid span { border: 1px solid color-mix(in oklab, #f5f3ee 4%, transparent); background: transparent; min-height: 0; }
.rv-cases-slab {
  position: relative; z-index: 2;
  inset: auto; clip-path: none; padding: 0;
  background: transparent; border: 0;
  display: flex; flex-direction: column; gap: 24px; justify-content: flex-start;
}
.rv-cases-slab-inner { display: flex; flex-direction: column; }
.rv-cases-clientlabel {
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #64C040; margin-bottom: 12px;
}
.rv-cases-client {
  display: flex; flex-direction: column; gap: 2px;
  font-family: "Inter", sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 2.6vw, 42px); line-height: 1; letter-spacing: -0.02em; color: #fff;
}
.rv-cases-underline { height: 3px; width: 72px; background: #64C040; margin-top: 18px; }
.rv-cases-preview {
  position: relative; z-index: 1; inset: auto;
  width: 100%; height: auto; transform: none; box-shadow: none;
  border: 1px solid var(--rv-hair); background: rgba(255,255,255,0.02);
}
.rv-cases-preview-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--rv-hair); }
.rv-cases-preview-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.rv-cases-preview-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.rv-cases-preview-hero { height: 56px; width: 100%; margin: 0; background: linear-gradient(90deg, rgba(100,192,64,0.32), rgba(100,192,64,0.05)); border-radius: 2px; }
.rv-cases-preview-line { height: 6px; width: 100%; background: rgba(255,255,255,0.14); }
.rv-cases-preview-line.short { width: 60%; }
.rv-cases-preview-block { height: 48px; margin-top: 6px; background: rgba(255,255,255,0.05); border: 1px dashed var(--rv-hair); }
.rv-cases-loc {
  position: relative; z-index: 2; inset: auto; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rv-hair);
}
.rv-cases-loc-k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 0; }
.rv-cases-loc-v { font-size: 15px; font-weight: 600; color: #fff; }
@media (max-width: 1000px) { .rv-cases-grid { grid-template-columns: 1fr; gap: 40px; } .rv-cases-frame { padding: 40px 24px; } }
@media (max-width: 900px) { .rv-cases { padding: 80px 24px; } .rv-cases-metrics { grid-template-columns: 1fr; } }

/* ============= Testimonials ============= */
.rv-testify { background: var(--rv-black); color: var(--rv-white); padding: 40px 48px 140px; }
.rv-testify .rv-h2 { color: var(--rv-white); }
.rv-testimonials { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 48px; background: color-mix(in oklab, #f5f3ee 8%, transparent); border: 1px solid color-mix(in oklab, #f5f3ee 8%, transparent); }
.rv-testimonial {
  margin: 0;
  position: relative;
  background: #171717;
  padding: 44px 40px 36px;
  display: flex; flex-direction: column; gap: 24px;
  opacity: 0; transform: translateY(20px);
  transition: background 220ms ease, opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1);
}
.rv-testify.is-in .rv-testimonial { opacity: 1; transform: translateY(0); }
.rv-testify.is-in .rv-testimonials .rv-testimonial:nth-child(2) { transition-delay: 90ms; }
.rv-testimonial::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: #64C040; transition: width 320ms ease;
}
.rv-testimonial:hover { background: #1c1c1c; }
.rv-testimonial:hover::before { width: 72px; }
.rv-t-index {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.28em;
  color: color-mix(in oklab, #f5f3ee 28%, transparent);
}
.rv-t-mark {
  position: absolute; top: 24px; right: 32px;
  font-family: "Inter", sans-serif; font-weight: 900; font-size: 96px; line-height: 1;
  color: color-mix(in oklab, #64C040 16%, transparent);
  pointer-events: none;
}
.rv-t-quote {
  margin: 0; border: 0; padding: 0;
  font-size: clamp(17px, 1.3vw, 19px); line-height: 1.62; font-weight: 450;
  color: color-mix(in oklab, #f5f3ee 88%, transparent);
  max-width: 52ch;
}
.rv-t-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 8px; border-top: 1px solid color-mix(in oklab, #f5f3ee 8%, transparent); }
.rv-t-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; margin-top: 20px;
  display: grid; place-items: center;
  border: 1px solid color-mix(in oklab, #64C040 45%, transparent);
  color: #64C040;
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
}
.rv-t-who { display: flex; flex-direction: column; gap: 3px; margin-top: 20px; }
.rv-t-name { color: #ffffff; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.rv-t-role { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, #f5f3ee 45%, transparent); }
.rv-case-metric-sub { font-size: 0.45em; opacity: 0.6; }
@media (max-width: 900px) { .rv-testify { padding: 20px 24px 80px; } .rv-testimonials { grid-template-columns: 1fr; } .rv-testimonial { padding: 36px 24px 28px; } .rv-t-mark { font-size: 64px; top: 18px; right: 20px; } }


/* -------------------------- client logo marquee -------------------------- */
.rv-logos {
  border-block: 1px solid var(--rv-line, rgba(255, 255, 255, 0.12));
  padding: clamp(22px, 3vw, 34px) 0;
  overflow: hidden;
}
.rv-logos-label {
  margin: 0 0 clamp(14px, 2vw, 20px);
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}
.rv-logos-track {
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rv-logos-row {
  display: flex;
  align-items: center;
  gap: clamp(38px, 5vw, 72px);
  width: max-content;
  animation: rv-logos-scroll 38s linear infinite;
}
.rv-logos-track:hover .rv-logos-row { animation-play-state: paused; }
.rv-logos-item {
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #fff;
  opacity: 0.92;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.rv-logos-item:hover { opacity: 1; color: var(--rv-green); }
@keyframes rv-logos-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-logos-row { animation: none; }
}

/* hero is single-column after the reading panel was removed */
.rv-hs-cols--split { grid-template-columns: minmax(0, 1fr); }
.rv-hs-cols--split .rv-hs-main { max-width: 1000px; }

/* keep the client logo strip inside the first viewport */
.rv-hero-bi { min-height: calc(100vh - 68px - 148px); }
.rv-hero-bi .rv-hs-inner { min-height: calc(100vh - 68px - 148px); height: auto; }
.rv-logos { padding: clamp(16px, 2vw, 24px) 0; }
.rv-logos-label { margin-bottom: 12px; }
@media (max-width: 1000px) {
  .rv-hero-bi, .rv-hero-bi .rv-hs-inner { min-height: 0; }
}
.rv-root > section.rv-hero-struct.rv-hero-bi { min-height: calc(100vh - 72px - 172px); }
@media (max-width: 1000px) {
  .rv-root > section.rv-hero-struct.rv-hero-bi { min-height: 0; }
}
.rv-logos { padding: 14px 0 12px; }
.rv-logos-label { margin-bottom: 10px; font-size: 10px; }
.rv-root > section.rv-hero-struct.rv-hero-bi { padding-bottom: 12px; }

/* ==========================================================================
   REVOPS HUB: "TECHNICAL BLUEPRINT" TEMPLATE OVERRIDE
   Differentiates the RevOps hub from the GTM hub template: paper canvas,
   ink plates, engineering hairlines, mono coordinates. CSS-only, no copy change.
   ========================================================================== */
.rv-root {
  --bp-paper: #F3F2EE;
  --bp-paper-2: #FBFAF7;
  --bp-ink: #101010;
  --bp-hair: rgba(16, 16, 16, 0.14);
  --bp-hair-soft: rgba(16, 16, 16, 0.08);
  --bp-mute: rgba(16, 16, 16, 0.55);
  --bp-mute-2: rgba(16, 16, 16, 0.38);
}

/* ---- Header: paper bar with an ink logo plate ---- */
.rv-root .rv-header {
  background: color-mix(in oklab, var(--bp-paper) 88%, transparent);
  border-bottom: 1px solid var(--bp-hair);
  color: var(--bp-ink);
}
.rv-root .rv-header-logo {
  background: var(--bp-ink);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
}
.rv-root .rv-header-logo img { height: 26px; }
.rv-root .rv-header-nav a { color: var(--bp-mute); }
.rv-root .rv-header-nav a:hover { color: var(--bp-ink); }
/* ---- Hero: paper blueprint sheet ---- */
.rv-root > section.rv-hero-struct {
  background:
    linear-gradient(to right, var(--bp-hair-soft) 1px, transparent 1px) 0 0 / 96px 100%,
    linear-gradient(to bottom, var(--bp-hair-soft) 1px, transparent 1px) 0 0 / 100% 96px,
    var(--bp-paper);
  color: var(--bp-ink);
}
.rv-root .rv-hs-dotfield { display: none; }
.rv-root .rv-hs-grid-line { background: rgba(16, 16, 16, 0.06); }
.rv-root .rv-hs-inner {
  border: 1px solid var(--bp-hair);
  background: color-mix(in oklab, var(--bp-paper-2) 72%, transparent);
  padding: clamp(24px, 3vw, 44px) clamp(22px, 3vw, 48px) clamp(20px, 2.6vw, 36px);
  width: 100%;
}
.rv-root .rv-hs-frame {
  border-bottom: 1px solid var(--bp-hair);
  color: var(--bp-ink);
}
.rv-root .rv-hs-meta { color: var(--bp-mute-2); }
.rv-root .rv-hs-eyebrow { color: var(--bp-ink); }
.rv-root .rv-hs-h1 { color: var(--bp-ink); font-weight: 600; letter-spacing: -0.032em; }
.rv-root .rv-hs-accent {
  color: var(--bp-ink);
  box-shadow: inset 0 -0.14em 0 var(--rv-green);
}
.rv-root .rv-hs-annot,
.rv-root .rv-hs-sub { color: var(--bp-mute); }
.rv-root .rv-hs-cta {
  background: var(--bp-ink);
  border-color: var(--bp-ink);
  color: var(--bp-paper);
  border-radius: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 24px;
}
.rv-root .rv-hs-cta:hover { background: var(--rv-green); border-color: var(--rv-green); color: var(--bp-ink); }
.rv-root .rv-hs-link {
  color: var(--bp-ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration-color: var(--bp-hair);
}
.rv-root .rv-hs-link:hover { color: var(--bp-ink); text-decoration-color: var(--rv-green); }
.rv-root .rv-hs-proof { border-top: 1px solid var(--bp-hair); }
.rv-root .rv-hs-proof-label,
.rv-root .rv-hs-proof-logos span { color: var(--bp-mute-2); }
.rv-root .rv-hs-proof-logos span + span::before { color: rgba(16, 16, 16, 0.22); }
.rv-root .rv-hs-stats { border-top: 1px solid var(--bp-hair); }
.rv-root .rv-hs-stat + .rv-hs-stat { border-left: 1px solid var(--bp-hair); }
.rv-root .rv-hs-stat-num { color: var(--bp-ink); }
.rv-root .rv-hs-stat-cap { color: var(--bp-mute-2); }

/* ---- Client strip: paper, ink wordmarks ---- */
.rv-root .rv-logos {
  background: var(--bp-paper-2);
  border-block: 1px solid var(--bp-hair);
  color: var(--bp-ink);
}
.rv-root .rv-logos-label { color: var(--bp-mute-2); opacity: 1; }
.rv-root .rv-logos-item { color: var(--bp-ink); opacity: 0.62; font-weight: 500; letter-spacing: 0.02em; }
.rv-root .rv-logos-item:hover { opacity: 1; color: var(--bp-ink); }

/* ---- Shared card language: square frames, green hover edge, mono coords ---- */
.rv-root .rv-obj,
.rv-root .rv-hub-card,
.rv-root .rv-del-card,
.rv-root .rv-shift-card,
.rv-root .rv-gap-card,
.rv-root .rv-mat-card {
  border-radius: 0;
  transition: border-color 160ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.rv-root .rv-obj:hover,
.rv-root .rv-hub-card:hover,
.rv-root .rv-del-card:hover,
.rv-root .rv-shift-card:hover {
  border-color: var(--rv-green);
  transform: translateY(-2px);
}
.rv-root .rv-obj-num,
.rv-root .rv-hub-card-id { font-variant-numeric: tabular-nums; }

/* ---- Section labels read as blueprint annotations ---- */
.rv-root .rv-label { font-size: 11.5px; letter-spacing: 0.24em; }
.rv-root .rv-label-rule { width: 40px; }
.rv-root .rv-h2 { font-weight: 700; letter-spacing: -0.028em; }

@media (max-width: 900px) {
  .rv-root .rv-hs-inner { padding: 20px 18px 24px; border: none; background: none; }
}

/* ---- Hero: blueprint reading table (split hero) ---- */
.rv-root .rv-hs-cols--split {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}
.rv-root .rv-hs-cols--split .rv-hs-main { max-width: none; }
.rv-bp-sheet {
  border: 1px solid var(--bp-hair);
  background: var(--bp-paper-2);
  padding: 16px 18px 14px;
  align-self: start;
}
.rv-bp-sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bp-ink);
}
.rv-bp-sheet-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bp-ink);
}
.rv-bp-sheet-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bp-ink);
  border: 1px solid var(--bp-hair);
  padding: 3px 7px;
}
.rv-bp-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.rv-bp-table th,
.rv-bp-table td {
  text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid var(--bp-hair-soft);
  font-size: 13px;
  color: var(--bp-ink);
}
.rv-bp-table thead th {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bp-mute-2);
  font-weight: 500;
  padding-top: 10px;
}
.rv-bp-table tbody th { font-weight: 500; color: var(--bp-mute); }
.rv-bp-table td { font-family: "JetBrains Mono", monospace; font-size: 13px; }
.rv-bp-table td:last-child,
.rv-bp-table th:last-child { text-align: right; }
.rv-bp-table td:nth-child(2) { text-align: right; padding-right: 18px; }
.rv-bp-table th:nth-child(2) { text-align: right; padding-right: 18px; }
.rv-bp-delta { color: var(--bp-mute-2) !important; font-size: 11.5px !important; letter-spacing: 0.04em; }
.rv-bp-row-audited th,
.rv-bp-row-audited td {
  border-bottom: none;
  border-top: 1px solid var(--bp-ink);
  color: var(--bp-ink) !important;
  font-weight: 600;
}
.rv-bp-row-audited td:last-child { color: var(--rv-green) !important; }
.rv-bp-sheet-foot {
  margin: 10px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-mute-2);
}
@media (max-width: 1000px) {
  .rv-root .rv-hs-cols--split { grid-template-columns: 1fr; gap: 28px; }
}

/* ===================== REVOPS HERO: REFERENCE 3A ===================== */

.rv-rh-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 20px 48px !important;
  background: #fff !important;
  border-bottom: 1px solid #e4e4de !important;
  backdrop-filter: none !important;
}
.rv-rh-header-left { display: flex; align-items: center; gap: 40px; }
.rv-rh-header .rv-header-logo img { height: 26px; width: auto; }
.rv-rh-nav { display: flex; gap: 26px; font-size: 14px; color: #5a5a54; }
.rv-rh-nav a { color: #5a5a54; text-decoration: none; letter-spacing: 0; text-transform: none; font-weight: 400; }
.rv-rh-nav a:hover { color: #1a1a1a; }
.rv-rh-nav a.is-active { color: #1a1a1a; font-weight: 600; box-shadow: inset 0 -2px 0 #64c040; }
.rv-rh-header-right { display: flex; align-items: center; gap: 16px; }
.rv-rh-phone { font-size: 14px; color: #5a5a54; }
.rv-rh-header a.rv-rh-header-cta {
  display: inline-flex; align-items: center; padding: 10px 18px;
  background: #2a7de1; color: #fff; border-radius: 2px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  letter-spacing: 0; text-transform: none; border: 0;
}
.rv-rh-header a.rv-rh-header-cta:hover { background: #1f66bb; color: #fff; }

.rv-rh-hero {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fbfbf9;
  color: #1a1a1a;
  font-family: Inter, "Archivo", sans-serif;
}
.rv-rh-hero::before, .rv-rh-hero::after { display: none !important; content: none !important; }

.rv-rh-grid {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 48px;
  align-items: stretch;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 48px 0;
  box-sizing: border-box;
  zoom: 1.12;
}
.rv-rh-left { display: flex; flex-direction: column; gap: 18px; padding-bottom: 30px; max-width: 660px; }

.rv-rh-eyebrow-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.rv-rh-icp {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #3f3f3a; text-align: right;
}

.rv-rh-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #2f6b1c;
}
.rv-rh-eyebrow-rule { width: 22px; height: 2px; background: #64c040; }


.rv-rh-h1 {
  margin: 0;
  font-size: 58px;

  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: none;
}
.rv-rh-mark { position: relative; display: inline-block; }
.rv-rh-mark-bar { display: none; }
.rv-rh-mark-text { position: relative; z-index: 1; }

.rv-rh-sub { margin: 0; max-width: 32em; font-size: 17px; line-height: 1.5; color: #3c3c37; }

.rv-rh-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-rh-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px;
  background: #64c040; color: #10240a; border-radius: 2px;
  font-size: 15.5px; font-weight: 600; text-decoration: none; letter-spacing: 0; text-transform: none;
}
.rv-rh-cta span { font-size: 17px; color: inherit; transition: transform 200ms cubic-bezier(0.2,0.9,0.2,1); }
.rv-rh-cta:hover { background: #56ab36; }
.rv-rh-cta:hover span { transform: translateX(4px); }
.rv-rh-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0 5px;
  border: 0; border-bottom: 1px solid rgba(26, 26, 26, 0.28); border-radius: 0; background: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  color: #57574f; text-decoration: none; transition: color 180ms ease, border-color 180ms ease;
}
.rv-rh-cta-ghost .rv-rh-ghost-arrow { display: inline-block; transition: transform 200ms cubic-bezier(0.2,0.9,0.2,1); }
.rv-rh-cta-ghost:hover { border-color: #1a1a1a; color: #1a1a1a; background: none; }
.rv-rh-cta-ghost:hover .rv-rh-ghost-arrow { transform: translateX(4px); }


.rv-rh-meta {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: nowrap;
  list-style: none; margin: -4px 0 0; padding: 0;
}

.rv-rh-mchip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 0; background: transparent; border: 0;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.005em; color: #4a4a44;
}
.rv-rh-mchip svg { display: none; }
.rv-rh-mchip + .rv-rh-mchip::before { content: "·"; color: #a9a9a1; margin-right: 8px; }



.rv-rh-dot { color: #c9c9c1; }

.rv-rh-chips { display: flex; gap: 4px; margin-top: 2px; padding-top: 16px; border-top: 1px solid #e4e4de; flex-wrap: nowrap; }
.rv-rh-chips .rv-rh-chip { white-space: nowrap; padding-inline: 10px; font-size: 14.5px; }
.rv-rh-chip {
  padding: 8px 11px; border: 1px solid #e4e4de; background: #fff; color: #3c3c38;
  font-size: 12.5px; font-weight: 500; border-radius: 2px; cursor: pointer;
  font-family: inherit; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.rv-rh-chip:hover { border-color: #c9c9c1; }
.rv-rh-chip.is-active { background: #2a7de1; border-color: #2a7de1; color: #fff; font-weight: 600; }

.rv-rh-pair { display: flex; gap: 1px; background: #e4e4de; border: 1px solid #e4e4de; margin-top: auto; }
.rv-rh-pair-cell { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: #fff; }
.rv-rh-pair-cell.is-blue { background: #2a7de1; color: #fff; }
.rv-rh-pair-label {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  letter-spacing: 0.07em; text-transform: uppercase; color: #8a8a82;
}
.rv-rh-pair-cell.is-blue .rv-rh-pair-label { color: rgba(255,255,255,0.72); }
.rv-rh-pair-text { font-size: 15px; line-height: 1.45; }

.rv-rh-stack { display: flex; flex-direction: column; padding-bottom: 30px; }

.rv-rh-stack-head {
  display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a82;
}
.rv-rh-stack-conflicts { color: #8a6300; letter-spacing: 0.06em; text-transform: none; font-weight: 600; }

.rv-rh-conflict {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
  padding: 11px 18px; background: #fff; border: 1px solid #e4e4de; border-bottom: none;
  opacity: 0; transform: translateY(-10px);
  transition: opacity 520ms cubic-bezier(0.2,0.9,0.2,1), transform 520ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-rh-stack.is-in .rv-rh-conflict { opacity: 1; transform: none; }

.rv-rh-conflict-id { display: flex; flex-direction: column; gap: 3px; }
.rv-rh-conflict-team { font-size: 15px; font-weight: 600; }
.rv-rh-conflict-source { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: #6f6f68; }
.rv-rh-conflict-val { display: flex; align-items: center; gap: 14px; }
.rv-rh-flag {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 8px; background: #fdf4dd; color: #7d5a00;
  border-left: 2px solid #d9a406;
}
.rv-rh-value { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.rv-rh-reconcile {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px; padding: 9px 18px;
  background: #f1f1ec; border: 1px solid #e4e4de; border-bottom: none;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  letter-spacing: 0.07em; text-transform: uppercase; color: #5a5a54;
}
.rv-rh-reconcile-rule { flex: 1; height: 1px; background: #d4d4cc; }
.rv-rh-reconcile-arrow { font-size: 18px; color: #2a7de1; }

.rv-rh-model {
  display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; background: #2a7de1; color: #fff;
  opacity: 0; transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.2,0.9,0.2,1) 420ms, transform 620ms cubic-bezier(0.2,0.9,0.2,1) 420ms;
}
.rv-rh-stack.is-in .rv-rh-model { opacity: 1; transform: none; }
.rv-rh-model-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.78);
}
.rv-rh-variance { padding: 4px 8px; background: #64c040; color: #0c2604; letter-spacing: 0.06em; }
.rv-rh-model-figure { display: flex; align-items: flex-end; gap: 14px; }
.rv-rh-model-num { font-size: 48px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.rv-rh-model-note { font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,0.85); padding-bottom: 8px; }
.rv-rh-model-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(255,255,255,0.22); margin-top: 4px;
}
.rv-rh-model-stats > div { padding: 12px 4px 0 14px; background: #2a7de1; }
.rv-rh-model-stats > div:first-child { padding-left: 4px; }
.rv-rh-stat-num { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rv-rh-stat-label { margin-top: 3px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,0.82); }
.rv-rh-illustrative {
  margin: 8px 0 0; font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #6f6f68;
}

@media (prefers-reduced-motion: reduce) {
  .rv-rh-conflict, .rv-rh-model { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 1100px) {
  .rv-rh-grid { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px 0; }
  .rv-rh-h1 { font-size: 46px; }
  .rv-rh-header { padding: 16px 24px !important; }
  .rv-rh-nav, .rv-rh-phone { display: none; }
  .rv-rh-left { max-width: none; }
  .rv-rh-icp { text-align: left; }
  .rv-rh-chips, .rv-rh-pair { order: 3; }
}


.rv-rh-hero, .rv-rh-header { position: relative; z-index: 2; }
.rv-rh-hero { background: #fbfbf9 !important; }

/* static client strip (no marquee) */
.rv-logos-static {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 18px clamp(30px, 4vw, 60px);
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.rv-root .rv-logos-static .rv-logos-item {
  font-size: clamp(15px, 1.35vw, 20px); font-weight: 600; white-space: nowrap;
  color: var(--bp-ink, #1a1a1a); opacity: 0.72;
}

/* connector through the gap between conflicts and the reconcile bar */
.rv-rh-reconcile { position: relative; }
.rv-rh-reconcile::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 100vh;
  max-height: 120px; background: repeating-linear-gradient(#c9c9c1 0 5px, transparent 5px 10px);
  transform: translateX(-0.5px) scaleY(0); transform-origin: top;
  transition: transform 520ms cubic-bezier(0.2,0.9,0.2,1) 320ms;
}
.rv-rh-stack.is-in .rv-rh-reconcile::before { transform: translateX(-0.5px) scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .rv-rh-reconcile::before { transform: translateX(-0.5px) scaleY(1); transition: none; }
}

/* ---------- hero: accordion-inspired calm palette ---------- */
.rv-rh-hero,
.rv-rh-hero.rv-rh-hero { background: #ffffff !important; color: #1b1d21; }
.rv-rh-grid {
  grid-template-columns: 1fr 500px;
  gap: 64px;
  padding: 40px 48px 36px;
  align-items: stretch;
  zoom: 1;
}
.rv-rh-stack { height: 100%; }
.rv-rh-stack .rv-rh-reconcile { margin-top: 0; }

.rv-rh-left { gap: 20px; max-width: 640px; }
.rv-rh-eyebrow { color: #6b6f76; letter-spacing: 0.16em; font-size: 11.5px; }
.rv-rh-eyebrow-rule { width: 26px; height: 2px; background: #64c040; }
.rv-rh-h1 {
  font-size: clamp(38px, 3.9vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #1b1d21;
}
.rv-rh-mark-bar {
  display: block !important;
  position: absolute; left: -6px; right: -6px; bottom: 0.1em; top: 0.16em;
  background: #64c040; z-index: 0;
}
.rv-rh-sub { font-size: 16.5px; line-height: 1.55; color: #52565d; max-width: 32em; }

.rv-rh-ctas { gap: 20px; margin-top: 2px; }
.rv-rh-cta-ghost {
  border-bottom: 1px solid #c9c9c1;
  color: #4a4a44;
  font-size: 12.5px; letter-spacing: 0.16em;
}
.rv-rh-cta-ghost:hover { color: #1b1d21; border-bottom-color: #1b1d21; }

.rv-rh-meta {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  flex-wrap: nowrap;
  border-top: 0;
  border-bottom: 1px solid #e4e4de;
}
.rv-rh-mchip {
  display: block;
  white-space: normal;
  padding: 13px 18px 13px 0;
  color: #1b1d21;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.005em;
  border-right: 1px solid #e4e4de;
}
.rv-rh-mchip:last-child { border-right: 0; }
.rv-rh-mchip:not(:first-child) { padding-left: 18px; }
.rv-rh-mchip + .rv-rh-mchip::before { content: none; }
.rv-rh-mchip > span { display: block; }
.rv-rh-mchip > span::before {
  content: "";
  display: block;
  width: 22px; height: 3px;
  background: #64c040;
  margin-bottom: 8px;
}



/* right panel: quiet, mono, no color noise */
.rv-rh-stack { padding-bottom: 0; }
.rv-rh-stack-head { color: #8b8f96; padding-bottom: 14px; }
.rv-rh-stack-conflicts { color: #1b1d21; }
.rv-rh-conflict {
  background: #fbfbf9;
  border-color: #e7e7e2;
  padding: 14px 18px;
  flex: 1 1 auto;
}

.rv-rh-conflict:last-of-type { border-bottom: 1px solid #e7e7e2; }
.rv-rh-flag {
  background: transparent; color: #b07607; border-left: 2px solid #e0b45c;
  padding: 2px 0 2px 8px;
  font-weight: 600;
}
.rv-rh-value { font-size: 22px; color: #1b1d21; }

/* connector: four versions funnel into one */
.rv-rh-reconcile {
  flex: 0 0 auto;
  height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  background: none;
  border: 0;
}

.rv-rh-reconcile::before { content: none; }
.rv-rh-reconcile-rule {
  flex: 1 1 auto;
  width: 1px; height: auto; min-height: 10px;
  background: linear-gradient(#dcdcd4 0 55%, transparent 55% 100%);
  background-size: 1px 7px;
}
.rv-rh-reconcile-arrow {
  font-size: 14px; line-height: 1; color: #1b1d21;
  opacity: 0.6;
}


.rv-rh-model {
  margin-top: 8px;
  background: #1b1d21; color: #fff;
  padding: 24px;
  gap: 16px;
}

.rv-rh-model-head { color: rgba(255,255,255,0.6); }
.rv-rh-variance { background: #64c040; color: #1b1d21; border-radius: 999px; padding: 4px 10px; }
.rv-rh-model-num { font-size: 44px; }
.rv-rh-model-note { color: rgba(255,255,255,0.7); }

/* logo strip */
.rv-root .rv-logos { background: #fbfbf9; border-top: 1px solid #ececE6; }

@media (max-width: 1100px) {
  .rv-rh-grid { grid-template-columns: 1fr; gap: 40px; padding: 48px 24px 40px; }
}

/* ---- What It Costs: cascading waterfall ---- */
.rv-cost .rv-leak-head { max-width: 940px; margin-bottom: 44px; }

.rv-cost-fall { max-width: none; width: 100%; margin: 0; }

.rv-cost-steps { list-style: none; margin: 0; padding: 0; }
.rv-cost-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 0 22px;
  border: 1px solid var(--rv-hair-dark-strong);
  border-bottom: none;
  background: #ffffff;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2,0.9,0.2,1), background-color 220ms ease;
}
.rv-cost-steps > li:last-child { border-bottom: 1px solid var(--rv-hair-dark-strong); }
.rv-cost.is-in .rv-cost-step { opacity: 1; transform: translateX(0); }
.rv-cost-step:hover { background: #fbfbf9; }

.rv-cost-step.is-drift::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rv-green);
}

.rv-cost-idx {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(16,16,16,0.35);
}
.rv-cost-name {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rv-ink);
}
.rv-cost-state {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(16,16,16,0.4);
  white-space: nowrap;
}
.rv-cost-step.is-drift .rv-cost-state { color: var(--rv-green); }

.rv-cost-base {
  margin-top: 28px;
  width: 38%;
  min-width: 320px;
  background: var(--rv-ink);
  color: #ffffff;
  padding: 30px 26px 32px;
}
.rv-cost-stat { display: flex; align-items: baseline; gap: 12px; }
.rv-cost-num {
  font-size: clamp(48px, 5.5vw, 76px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.rv-cost-unit {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rv-green);
}
.rv-cost-claim {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
}

.rv-cost-foot { max-width: 760px; margin: 56px auto 0; text-align: center; }

@media (max-width: 900px) {
  .rv-cost-steps > li { width: 100% !important; }
  .rv-cost-base { width: 100%; min-width: 0; }
  .rv-cost-step { grid-template-columns: 32px 1fr; row-gap: 6px; padding: 16px 18px; }
  .rv-cost-state { grid-column: 2; }
}


.rv-cost-foot { max-width: 760px; margin: 56px auto 0; text-align: center; }

@media (max-width: 900px) {
  .rv-cost-ledger { grid-template-columns: 1fr; gap: 36px; }
  .rv-cost-row { grid-template-columns: 28px 1fr auto; gap: 12px; row-gap: 12px; }
  .rv-cost-track { grid-column: 2 / -1; }
}


/* section break between hub and case studies */
.rv-root .rv-break {
  display: flex; align-items: center; gap: 24px;
  background: var(--rv-black); padding: 0 48px 64px;
}
.rv-root .rv-break-rule { flex: 1 1 auto; height: 1px; background: var(--rv-hair); }
.rv-root .rv-break-label {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--rv-green);
}
@media (max-width: 900px) { .rv-root .rv-break { padding: 0 24px 40px; gap: 16px; } }

/* -------------------------- insights / perspectives -------------------------- */
.rv-root .rv-ins { background: var(--rv-white); color: var(--rv-ink); padding: 130px 48px; }
.rv-root .rv-ins-head { max-width: 760px; margin-bottom: 56px; display: flex; flex-direction: column; gap: 16px; }

.rv-root .rv-ins-feature {
  position: relative; display: block; text-decoration: none; color: inherit;
  padding-left: 0; margin-bottom: 28px;
  opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1);
}
.rv-ins.is-in .rv-ins-feature { opacity: 1; transform: translateY(0); }
.rv-root .rv-ins-feature-media {
  margin-left: 22%; overflow: hidden; background: #eceee9;
}
.rv-root .rv-ins-feature-media img {
  display: block; width: 100%; height: 520px; object-fit: cover;
  transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
.rv-root .rv-ins-feature:hover .rv-ins-feature-media img { transform: scale(1.04); }

.rv-root .rv-ins-feature-panel {
  position: absolute; left: 0; top: 48px; width: 40%; max-width: 460px;
  background: #f4f6f1; border-top: 3px solid var(--rv-green);
  padding: 40px 40px 44px; display: flex; flex-direction: column; gap: 14px;
}
.rv-root .rv-ins-tag {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; opacity: 0.55;
}
.rv-root .rv-ins-feature-title { font-size: 34px; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.rv-root .rv-ins-feature-body { font-size: 16px; line-height: 1.6; opacity: 0.78; margin: 0; }
.rv-root .rv-ins-read {
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; border-bottom: 1px solid currentColor; align-self: flex-start;
  padding-bottom: 3px; margin-top: 6px;
}
.rv-root .rv-ins-arrow {
  position: absolute; left: calc(22% - 30px); bottom: 74px;
  width: 60px; height: 60px; border-radius: 50%; background: var(--rv-green);
  display: grid; place-items: center; color: var(--rv-ink);
  transition: transform 260ms ease;
}
.rv-root .rv-ins-arrow svg { width: 22px; height: 22px; }
.rv-root .rv-ins-feature:hover .rv-ins-arrow { transform: translateX(6px); }

.rv-root .rv-ins-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.rv-root .rv-ins-card {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: stretch;
  text-decoration: none; color: inherit; border-top: 1px solid var(--rv-hair-dark); padding-top: 24px;
  opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1);
}
.rv-ins.is-in .rv-ins-card { opacity: 1; transform: translateY(0); }
.rv-ins.is-in .rv-ins-row .rv-ins-card:nth-child(2) { transition-delay: 90ms; }
.rv-root .rv-ins-card-media { overflow: hidden; background: #eceee9; }
.rv-root .rv-ins-card-media img { display: block; width: 100%; height: 100%; min-height: 150px; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.rv-root .rv-ins-card:hover .rv-ins-card-media img { transform: scale(1.05); }
.rv-root .rv-ins-card-body { display: flex; flex-direction: column; gap: 10px; }
.rv-root .rv-ins-card-body h3 { font-size: 20px; line-height: 1.25; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.rv-root .rv-ins-card-body p { font-size: 15px; line-height: 1.55; opacity: 0.72; margin: 0; }
.rv-root .rv-ins-card:hover .rv-ins-read { color: var(--rv-green); }

@media (max-width: 900px) {
  .rv-root .rv-ins { padding: 80px 24px; }
  .rv-root .rv-ins-feature-media { margin-left: 0; }
  .rv-root .rv-ins-feature-media img { height: 300px; }
  .rv-root .rv-ins-feature-panel { position: static; width: 100%; max-width: none; padding: 28px 24px 32px; }
  .rv-root .rv-ins-feature-title { font-size: 26px; }
  .rv-root .rv-ins-arrow { display: none; }
  .rv-root .rv-ins-row { grid-template-columns: 1fr; }
  .rv-root .rv-ins-card { grid-template-columns: 120px 1fr; gap: 16px; }
}

/* the shift: reuses the perspectives layout */
.rv-root .rv-shift.rv-ins { background: var(--rv-white); color: var(--rv-ink); padding: 130px 48px; }
.rv-root .rv-shift .rv-ins-read { border-bottom: none; text-transform: none; font-size: 13px; letter-spacing: 0.01em; opacity: 0.6; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rv-hair-dark); align-self: stretch; }
@media (max-width: 900px) { .rv-root .rv-shift.rv-ins { padding: 80px 24px; } }


/* hero fits above the fold */
.rv-rh-hero { min-height: calc(100svh - 83px); display: flex; align-items: center; }
/* padding, not margin: .rv-root (the <main> wrapper) paints its own dark
 * background, but this hero is explicitly re-themed to a light background
 * above; a margin here would open a gap showing .rv-root's dark background
 * through as a visible band before the light hero starts. */
.rv-rh-hero { padding-top: 40px !important; }
.rv-rh-hero > .rv-rh-grid { width: 100%; }
.rv-rh-conflict { padding: 11px 16px !important; }
.rv-rh-stack-head { padding-bottom: 10px !important; }
@media (max-width: 900px) {
  .rv-rh-hero { min-height: 0; display: block; }
  .rv-rh-conflict { padding: 14px 18px !important; }
}

/* -------------------------- generative figures -------------------------- */
.rv-fig { display: block; width: 100%; height: 100%; }

/* hero figure */
.rv-rh-figwrap {
  --rv-fig-line: rgba(16,16,16,0.55);
  --rv-fig-faint: rgba(16,16,16,0.16);
  --rv-fig-accent: var(--rv-green);
  --rv-fig-gold: #fecd2f;
  --rv-brand-green: var(--rv-green);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.rv-rh-figwrap.is-in { opacity: 1; transform: none; }
.rv-rh-figframe {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 440px;
  margin-inline: auto;
  width: 100%;
}
.rv-rh-figcanvas { position: absolute; inset: 0; }
.rv-rh-figtick { position: absolute; width: 9px; height: 9px; border: 1px solid color-mix(in oklab, var(--rv-ink) 35%, transparent); }
.rv-rh-figtick--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.rv-rh-figtick--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.rv-rh-figtick--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.rv-rh-figtick--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.rv-rh-figlegend {
  display: flex; align-items: center; gap: 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--rv-ink) 55%, transparent);
}
.rv-rh-figlegend-line { flex: 1; height: 1px; background: color-mix(in oklab, var(--rv-ink) 18%, transparent); }

/* service lines */
.rv-svc { margin-top: 40px; border-top: 1px solid color-mix(in oklab, var(--rv-ink) 14%, transparent); }
.rv-svc-legend {
  display: flex; align-items: center; gap: 12px; padding: 12px 0 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--rv-ink) 50%, transparent);
}
.rv-svc-legend-line { flex: 1; height: 1px; background: color-mix(in oklab, var(--rv-ink) 14%, transparent); }
.rv-svc-list { list-style: none; margin: 8px 0 0; padding: 0; }
.rv-svc-row {
  --rv-fig-line: rgba(16,16,16,0.5);
  --rv-fig-faint: rgba(16,16,16,0.14);
  --rv-fig-accent: var(--rv-green);
  --rv-fig-gold: #fecd2f;
  --rv-brand-green: var(--rv-green);
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 40px;
  padding: 44px 0 52px;
  border-top: 1px solid color-mix(in oklab, var(--rv-ink) 12%, transparent);
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.rv-svc-row.is-in { opacity: 1; transform: none; }
.rv-svc-num {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px; letter-spacing: .1em; padding-top: 8px;
  color: color-mix(in oklab, var(--rv-ink) 45%, transparent);
}
.rv-svc-title {
  margin: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06;
  letter-spacing: -0.02em; font-weight: 600; color: var(--rv-ink);
  max-width: 12ch;
}
.rv-svc-figbox { position: relative; aspect-ratio: 1.25 / 1; margin-top: 28px; max-width: 340px; }
.rv-svc-fig { position: absolute; inset: 0; }
.rv-svc-right { display: flex; flex-direction: column; }
.rv-svc-copy { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: color-mix(in oklab, var(--rv-ink) 82%, transparent); max-width: 46ch; }
.rv-svc-points { list-style: none; margin: auto 0 0; padding: 24px 0 0; display: grid; gap: 9px; }
.rv-svc-points li {
  display: flex; align-items: center; gap: 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in oklab, var(--rv-ink) 78%, transparent);
}
.rv-svc-bullet { width: 7px; height: 7px; background: var(--rv-green); flex: none; }
.rv-svc-output {
  margin-top: 20px; padding-top: 14px; font-size: 13.5px; line-height: 1.55;
  border-top: 1px solid color-mix(in oklab, var(--rv-ink) 12%, transparent);
  color: color-mix(in oklab, var(--rv-ink) 62%, transparent);
}
.rv-svc-link {
  margin-top: 14px; align-self: flex-start;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--rv-ink); text-decoration: none; border-bottom: 1px solid var(--rv-green); padding-bottom: 3px;
}
.rv-svc-link:hover { color: var(--rv-green); }

@media (max-width: 900px) {
  .rv-svc-row { grid-template-columns: 32px minmax(0, 1fr); gap: 0 16px; }
  .rv-svc-right { grid-column: 2; margin-top: 22px; }
  .rv-svc-title { max-width: none; }
  .rv-svc-figbox { max-width: 260px; }
}

/* =============== Refinements =============== */

/* hero: highlighted line becomes plain green text */
.rv-rh-mark { background: none !important; }
.rv-rh-mark-bar { display: none !important; }
.rv-rh-mark-text { background: none !important; color: var(--rv-green); }

/* primary hero CTA: squared consultancy button */
.rv-rh-cta {
  padding: 18px 28px;
  border: 1px solid var(--rv-green);
  border-radius: 0;
  background: var(--rv-green);
  color: #10240a;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  gap: 14px;
  transition: background 120ms steps(1), color 120ms steps(1), border-color 120ms steps(1);
}
.rv-rh-cta span { transition: transform 200ms cubic-bezier(0.2,0.9,0.2,1); }
.rv-rh-cta:hover { background: var(--rv-ink); border-color: var(--rv-ink); color: #fff; }
.rv-rh-cta:hover span { transform: translateX(4px); }

/* service rows without leading numerals */
.rv-svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0 56px; }
.rv-svc-num { display: none; }
@media (max-width: 860px) {
  .rv-svc-row { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
}
/* .rv-svc-right's `grid-column: 2` is a leftover from the old "leading
 * numeral" 3-column layout above (44px/32px num column + 2 content
 * columns); this row only has 2 real children (.rv-svc-left, .rv-svc-right)
 * now, so that stale placement pins .rv-svc-right into a column that,
 * combined with .rv-svc-left never getting an explicit column of its own,
 * left .rv-svc-left with no track to size against, collapsing to 0 width
 * and spilling its heading text over .rv-svc-right's copy underneath it. */
.rv-svc-right { grid-column: auto !important; }

/* =============== Outcomes, redesigned =============== */
.rv-outcomes { background: var(--rv-white); color: var(--rv-ink); padding: 120px 48px; }
.rv-out-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; margin-bottom: 0; }
.rv-kpistack {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; padding-top: 56px;
  border-top: 1px solid color-mix(in oklab, var(--rv-ink) 16%, transparent);
  margin-top: 28px;
}
.rv-kpi {
  background: transparent; border: 0; box-shadow: none;
  padding: 8px 40px 8px 0; position: relative; overflow: visible;
  opacity: 0; transform: translateY(22px);
  transition: opacity 700ms ease, transform 600ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-kpi + .rv-kpi { padding-left: 40px; border-left: 1px solid color-mix(in oklab, var(--rv-ink) 12%, transparent); }
.rv-kpi::before {
  content: ""; position: absolute; left: 0; top: -57px; width: 0; height: 2px;
  background: var(--rv-green); transition: width 900ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-kpi + .rv-kpi::before { left: 40px; }
.rv-outcomes.is-in .rv-kpi::before { width: 56px; }
.rv-kpi::after { display: none; }
.rv-outcomes.is-in .rv-kpi { opacity: 1; transform: none; }
.rv-kpi:hover { transform: none; box-shadow: none; }
.rv-kpi:hover::before { width: 100%; }
.rv-kpi-num { display: flex; align-items: baseline; gap: 2px; }
.rv-kpi-num .rv-num, .rv-kpi-num > span:first-child {
  font-size: clamp(64px, 8vw, 118px); font-weight: 600; line-height: 0.86;
  letter-spacing: -0.05em; color: var(--rv-ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-variant-numeric: tabular-nums;
}
.rv-kpi-suffix { font-size: clamp(28px, 3vw, 44px); font-weight: 500; color: var(--rv-green); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.rv-kpi-label {
  margin-top: 26px; padding-top: 0; border: 0;
  font-size: 15.5px; line-height: 1.6; max-width: 30ch;
  color: color-mix(in oklab, var(--rv-ink) 74%, transparent); opacity: 1;
}
.rv-kpi-id {
  position: static; display: block; margin-top: 22px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in oklab, var(--rv-ink) 42%, transparent); opacity: 1;
}
.rv-kpi-id::after { content: " · measured"; }
@media (max-width: 860px) {
  .rv-outcomes { padding: 72px 24px; }
  .rv-out-head { flex-direction: column; align-items: flex-start; }
  .rv-kpistack { grid-template-columns: 1fr; gap: 40px; }
  .rv-kpi, .rv-kpi + .rv-kpi { padding: 0; border-left: 0; }
  .rv-kpi::before, .rv-kpi + .rv-kpi::before { position: static; display: block; width: 56px; height: 2px; margin-bottom: 18px; }
}

/* ============================================================================
   Ported verbatim from the export's own src/styles.css, these two
   components (the deliverables specification-sheet accordion, and the
   testimonial carousel + pill layout) exist only in that page's own
   stylesheet, not in demand-generation.css or revenue-operations.css
   (whose OWN deliverables/testimonials sections use different shapes:
   rv-delstep stepper / rv-del dual-panel, and a static rv-t-index grid).
   ============================================================================ */

/* ---- Deliverables: specification-sheet accordion ---- */
.rv-deliverables--sheet { background: var(--rv-fog); color: var(--rv-ink); padding: 140px 48px; }
.rv-deliverables--sheet .rv-h2 { color: var(--rv-ink); }
.rv-del-header { margin-bottom: 56px; max-width: 900px; }

.rv-delsheet { border: 1px solid var(--rv-hair-dark-strong); background: var(--rv-white); }
.rv-delsheet-head {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rv-hair-dark-strong);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(16,16,16,0.5);
  background: linear-gradient(90deg, rgba(254,205,47,0.16), transparent 60%);
}
.rv-delsheet-row { border-bottom: 1px solid var(--rv-hair-dark); position: relative; }
.rv-delsheet-row:last-child { border-bottom: none; }
.rv-delsheet-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rv-green); transform: scaleY(0); transform-origin: top;
  transition: transform 320ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-delsheet-row.is-open::before { transform: scaleY(1); }

.rv-delsheet-trigger {
  width: 100%; background: transparent; border: 0; cursor: pointer;
  display: grid; grid-template-columns: 80px minmax(200px, 0.9fr) 1.4fr 28px;
  align-items: center; gap: 20px;
  padding: 26px 24px; text-align: left;
  transition: background 200ms ease;
}
.rv-delsheet-trigger:hover { background: rgba(254,205,47,0.07); }
.rv-delsheet-code {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.2em; color: rgba(16,16,16,0.45);
}
.rv-delsheet-row.is-open .rv-delsheet-code { color: var(--rv-ink); }
.rv-delsheet-title {
  font-size: clamp(20px, 2vw, 26px); font-weight: 700;
  letter-spacing: -0.02em; color: var(--rv-ink);
}
.rv-delsheet-summary { font-size: 15.5px; line-height: 1.5; color: rgba(16,16,16,0.6); }
.rv-delsheet-mark {
  justify-self: end; width: 14px; height: 14px; position: relative;
  transition: transform 280ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-delsheet-mark::before, .rv-delsheet-mark::after {
  content: ""; position: absolute; top: 4px; width: 9px; height: 1px;
  background: var(--rv-ink); transition: background 200ms ease;
}
.rv-delsheet-mark::before { left: -1px; transform: rotate(45deg); transform-origin: right center; }
.rv-delsheet-mark::after { right: -1px; transform: rotate(-45deg); transform-origin: left center; }
.rv-delsheet-row.is-open .rv-delsheet-mark { transform: rotate(180deg); }
.rv-delsheet-row.is-open .rv-delsheet-mark::before,
.rv-delsheet-row.is-open .rv-delsheet-mark::after { background: var(--rv-green); }

.rv-delsheet-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-delsheet-row.is-open .rv-delsheet-panel { grid-template-rows: 1fr; }
.rv-delsheet-panel > * { overflow: hidden; }
.rv-delsheet-panel-inner {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px;
  padding: 0 24px 34px 24px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 300ms ease 80ms, transform 300ms ease 80ms;
}
.rv-delsheet-row.is-open .rv-delsheet-panel-inner { opacity: 1; transform: none; }
.rv-delsheet-note {
  margin: 0; font-size: 17px; line-height: 1.65; color: var(--rv-ink); opacity: 0.78;
  border-top: 1px solid var(--rv-hair-dark); padding-top: 20px;
}
.rv-delsheet-output {
  border-top: 1px solid var(--rv-green); padding-top: 20px;
  background: linear-gradient(180deg, rgba(254,205,47,0.10), transparent 70%);
  padding-left: 18px; padding-right: 18px; padding-bottom: 18px;
}
.rv-delsheet-output-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(16,16,16,0.6); margin-bottom: 8px;
}
.rv-delsheet-output p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--rv-ink); opacity: 0.8; }
.rv-deliverables--sheet .rv-del-note { color: rgba(16,16,16,0.55); }

@media (max-width: 1000px) {
  .rv-delsheet-trigger { grid-template-columns: 60px 1fr 22px; row-gap: 8px; }
  .rv-delsheet-summary { grid-column: 2 / 4; }
  .rv-delsheet-panel-inner { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 900px) {
  .rv-deliverables--sheet { padding: 80px 24px; }
  .rv-delsheet-trigger { padding: 20px 16px; }
  .rv-delsheet-panel-inner { padding: 0 16px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-delsheet-panel, .rv-delsheet-panel-inner, .rv-delsheet-row::before { transition: none; }
}

/* ---- Testimonials: carousel + pill (overrides the plain 2-col grid
   inherited from revenue-operations.css's .rv-testify/.rv-testimonials/
   .rv-testimonial with the real shape this page's markup expects) ---- */
.rv-testify { background: var(--rv-black); color: var(--rv-white); padding: 96px 48px 140px; }
.rv-testify .rv-h2 { color: var(--rv-white); }
.rv-testify-split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 72px; align-items: center;
}
.rv-testify-carousel { position: relative; min-width: 0; }
/* Two things keep this a real carousel rather than a squashed grid:
   1. grid-template-columns: none -- two earlier duplicate .rv-testimonials
      blocks in this file declare an explicit 1fr 1fr (and 1fr at <=900px)
      for the old static-grid markup, and an explicit template beats
      grid-auto-columns entirely.
   2. a plain track size, not minmax(0, X) -- with a zero minimum the
      implicit tracks shrink to share the container instead of holding
      their width, so the cards never overflow and never scroll. On a
      phone that collapsed both quotes into ~145px columns side by side. */
.rv-testimonials {
  display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc(50% - 12px);
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-right: 64px;
  margin: 0; background: none; border: 0;
}
.rv-testimonials::-webkit-scrollbar { display: none; }
.rv-testify-next {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center;
  background: color-mix(in oklab, #f5f3ee 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--rv-green) 55%, transparent);
  color: var(--rv-green);
  transition: background 200ms ease, transform 200ms ease;
}
.rv-testify-next:hover { background: color-mix(in oklab, var(--rv-green) 18%, transparent); transform: translateY(-50%) translateX(2px); }
.rv-testify-next svg { width: 20px; height: 20px; }
.rv-testify .rv-testimonial {
  scroll-snap-align: start;
  margin: 0;
  position: relative;
  background: color-mix(in oklab, #f5f3ee 5%, transparent);
  border: 1px solid color-mix(in oklab, #f5f3ee 9%, transparent);
  border-radius: 18px;
  padding: 32px 30px;
  display: flex; flex-direction: column; gap: 28px;
  opacity: 1; transform: none;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.rv-testify .rv-testimonial:hover {
  background: color-mix(in oklab, #f5f3ee 8%, transparent);
  border-color: color-mix(in oklab, var(--rv-green) 40%, transparent);
  transform: translateY(-3px);
}
.rv-t-logo {
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--rv-green) 18%, transparent);
  color: var(--rv-green);
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}
.rv-testify .rv-t-quote {
  margin: 0; border: 0; padding: 0; max-width: none;
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; font-weight: 450;
  color: color-mix(in oklab, #f5f3ee 88%, transparent);
}
.rv-testify .rv-t-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 0; border-top: 0; }
.rv-testify .rv-t-avatar { margin-top: 0; }
.rv-testify .rv-t-who { margin-top: 0; }
.rv-testify-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border-left: 2px solid var(--rv-green);
  border-radius: 0; padding: 2px 0 2px 12px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rv-green);
}
.rv-testify-aside .rv-h2 { margin: 24px 0 0; }
.rv-testify-lede {
  margin: 20px 0 0; max-width: 46ch;
  font-size: 17px; line-height: 1.6;
  color: color-mix(in oklab, #f5f3ee 65%, transparent);
}
@media (max-width: 1100px) { .rv-testify-split { grid-template-columns: 1fr; gap: 48px; } }
/* On a phone this stops being a carousel and becomes a plain stack. There
   are only two quotes, so swiping bought nothing: one card at 86% left the
   next one peeking at the edge, and because the track is as tall as the
   longer quote there was a band of dead space under the shorter one.
   Stacked, each card is its own height and the arrow is redundant. */
@media (max-width: 900px) {
  .rv-testify { padding: 64px 24px 80px; }
  .rv-testimonials {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    gap: 16px;
    padding-right: 0;
    overflow-x: visible;
    scroll-snap-type: none;
    align-items: start;
  }
  .rv-testify .rv-t-foot { margin-top: 20px; }
  .rv-testify .rv-testimonial { padding: 28px 24px; }
  .rv-testify-next { display: none; }
}

/* ==========================================================================
   Data & Development hub: DevriX green structure, gold attention accent.
   Ported from the export's own src/styles.css page-identity layer:
   green = engineered / proven / go. gold = current / active / attention.
   Supersedes the earlier (wrong) blue->green swap below this comment used
   to live in; this whole block replaces it.
   ========================================================================== */
.rv-root {
	--rv-brand-green: #64c040;
	--rv-brand-green-soft: rgba(100, 192, 64, 0.14);
	--rv-gold: #fecd2f;
	--rv-gold-ink: #7a5a00;
	--rv-gold-tint: color-mix(in srgb, var(--rv-gold) 13%, transparent);
	--rv-gold-tint-soft: color-mix(in srgb, var(--rv-gold) 7%, transparent);
	--rv-gold-ring: color-mix(in srgb, var(--rv-gold) 20%, transparent);
	--rv-accent-ink: #0d0d0d;
	--rv-accent-deep: #7a5a00;
	--rv-band: clamp(72px, 7.5vw, 118px);
	--rv-gutter: clamp(20px, 5vw, 48px);
	--rv-elev: 0 1px 2px rgba(16, 16, 16, 0.04), 0 12px 32px -18px rgba(16, 16, 16, 0.28);
	--rv-elev-lift: 0 2px 4px rgba(16, 16, 16, 0.05), 0 22px 48px -22px rgba(16, 16, 16, 0.34);

	/* This file started from demand-generation.css, whose OWN accent color is
	   blue (--rv-blue/--rv-blue-ink), baked into dozens of shared component
	   rules (.rv-check, .rv-faq-num, .rv-cta, .rv-kpi-suffix, .rv-quote-mark,
	   .rv-close .rv-display em, etc.) that this page also uses. Rather than
	   chase every individual selector, remap the variable itself so every
	   one of those shared rules resolves to this page's real green identity
	   (the two dedicated gold call-outs above still win where targeted). */
	--rv-blue: var(--rv-brand-green);
	--rv-blue-ink: var(--rv-accent-ink);
	/* Same problem, second source: a whole "RevOps hub design system,
	   visual parity layer" ported from yet another page named its own
	   accent tokens --rf-green/--rf-blue but colored them blue (#2a7de1),
	   and several of its .rv-root-scoped selectors (e.g. .rv-root
	   .rv-label-rule) happen to match classes this page also renders. */
	--rf-green: var(--rv-brand-green);
	--rf-blue: var(--rv-brand-green);
}

/* ---- hero identity: grid-line backdrop + green glow behind the figure ---- */
.rv-root .rv-rh-hero { position: relative; overflow: hidden; }
.rv-root .rv-rh-hero::before {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, color-mix(in oklab, var(--rv-ink) 6%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in oklab, var(--rv-ink) 6%, transparent) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(120% 90% at 78% 50%, #000 0%, transparent 72%);
}
.rv-root .rv-rh-hero > .rv-rh-grid { position: relative; z-index: 1; }
.rv-root .rv-rh-figframe { position: relative; }
.rv-root .rv-rh-figframe::before {
	content: "";
	position: absolute; inset: -6%;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--rv-brand-green) 26%, transparent), transparent 70%);
	opacity: .55;
	pointer-events: none;
}
.rv-root .rv-rh-figlegend-line { background: linear-gradient(to right, color-mix(in oklab, var(--rv-brand-green) 70%, transparent), color-mix(in oklab, var(--rv-ink) 12%, transparent)); }
.rv-root .rv-rh-eyebrow-rule { background: var(--rv-brand-green); }

/* hero highlight phrase in gold (dark-on-light headline treatment) */
.rv-root .rv-rh-mark-text { color: var(--rv-gold) !important; }

/* primary CTA in DevriX green */
.rv-root .rv-rh-cta {
	background: var(--rv-brand-green);
	border-color: var(--rv-brand-green);
	color: var(--rv-accent-ink);
}
.rv-root .rv-rh-cta:hover {
	background: color-mix(in oklab, var(--rv-brand-green) 86%, black);
	border-color: color-mix(in oklab, var(--rv-brand-green) 86%, black);
	color: #ffffff;
}
/* secondary CTA in DevriX gold */
.rv-root .rv-rh-cta-ghost { border-color: var(--rv-gold); color: var(--rv-ink); background: transparent; }
.rv-root .rv-rh-cta-ghost:hover { border-color: var(--rv-gold); color: var(--rv-accent-ink); background: var(--rv-gold); }
.rv-root .rv-rh-mchip > span::before { background: var(--rv-brand-green); }

/* ---- The Gap: fault-line ledger (page-unique texture) ---- */
.rv-diag { overflow: hidden; }
.rv-diag::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(115deg, transparent 0 78px, rgba(0,0,0,0.045) 78px 79px);
	mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
	opacity: 0.9;
}
.rv-diag > .rv-gap-shell { position: relative; z-index: 1; }

.rv-gap-list { position: relative; border-top: none; }
.rv-gap-list::before {
	content: "";
	position: absolute;
	left: -26px; top: 0; bottom: 0; width: 1px;
	background: repeating-linear-gradient(to bottom, var(--rv-brand-green) 0 8px, transparent 8px 18px);
	opacity: 0.55;
	animation: rv-fault-flow 2.6s linear infinite;
}
@keyframes rv-fault-flow { to { background-position: 0 18px; } }

.rv-gap-row {
	position: relative;
	grid-template-columns: 74px 1fr 52px;
	gap: 20px;
	border-bottom: 1px dashed rgba(0,0,0,0.14);
}
.rv-gap-row:first-child { border-top: 1px dashed rgba(0,0,0,0.14); }
@media (max-width: 700px) {
	.rv-gap-row { grid-template-columns: 1fr; }
}
.rv-gap-row::after {
	content: "";
	position: absolute;
	left: -26px; top: 40px; width: 26px; height: 1px;
	background: var(--rv-brand-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 380ms cubic-bezier(0.2,0.9,0.2,1);
}
.rv-gap-row:hover::after { transform: scaleX(1); }
.rv-gap-row:hover { background-color: var(--rv-gold-tint-soft); }
.rv-gap-row:hover .rv-gap-audience { color: var(--rv-brand-green); }
.rv-gap-row:hover .rv-gap-motif { color: var(--rv-brand-green); }

.rv-gap-code {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	color: rgba(0,0,0,0.32);
	padding-top: 5px;
	transition: color 260ms ease;
}
.rv-gap-row:hover .rv-gap-code { color: var(--rv-brand-green); }

@media (prefers-reduced-motion: reduce) { .rv-gap-list::before { animation: none; } }
@media (max-width: 700px) {
	.rv-gap-list::before, .rv-gap-row::after { display: none; }
	.rv-gap-code { padding-top: 0; margin-bottom: 8px; }
}

/* ---- Stack: correct ink/gold treatment (was wrongly forced solid green) ---- */
.rv-stackx { position: relative; overflow: hidden; }
.rv-stackx::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		repeating-linear-gradient(to right, rgba(16,16,16,0.05) 0 1px, transparent 1px 88px),
		repeating-linear-gradient(to bottom, rgba(16,16,16,0.05) 0 1px, transparent 1px 88px);
	mask-image: radial-gradient(120% 80% at 50% 40%, #000 20%, transparent 78%);
}
.rv-stackx > * { position: relative; z-index: 1; }
.rv-stackx-core-lbl {
	background: var(--rv-ink); color: var(--rv-white);
	border-bottom: 2px solid var(--rv-brand-green);
}
.rv-stackx-ring { border-color: color-mix(in srgb, var(--rv-gold) 55%, transparent); }
.rv-stackx-chip-mark { color: var(--rv-ink); }
/* the base file never actually had a hover-invert for these chips, this
   whole rule is new, ported from the export's real .rv-stackx-chip:hover
   (dark fill + white text), not just a specificity fix. */
.rv-stackx-chip:hover {
	background: var(--rv-ink);
	border-color: var(--rv-ink);
	color: var(--rv-white);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -20px rgba(10, 14, 24, 0.6);
}
.rv-stackx-chip:hover .rv-stackx-chip-mark { color: var(--rv-brand-green); }
/* .rv-stackx-chip-txt strong/em hardcode dark ink colors of their own, so
   the white text color set on :hover above doesn't reach them by
   inheritance, without this override the tool name/role vanish
   (dark-on-black) the moment the chip inverts. */
.rv-stackx-chip:hover .rv-stackx-chip-txt strong { color: var(--rv-white); }
.rv-stackx-chip:hover .rv-stackx-chip-txt em { color: rgba(255, 255, 255, 0.65); }
.rv-pillar-mark { color: var(--rv-ink); }
.rv-pillar.is-primary .rv-pillar-mark { color: var(--rv-brand-green); }
.rv-pillar:hover { transform: translateY(-4px); box-shadow: var(--rv-elev-lift); }

/* ---- Service lines: gold "Explore" links, sentence-case bullets ---- */
.rv-svc-link { color: var(--rv-ink); border-bottom: 2px solid var(--rv-gold); padding-bottom: 2px; }
.rv-svc-link:hover { color: var(--rv-gold-ink); border-bottom-color: var(--rv-gold); }
.rv-svc-figbox { --rv-fig-gold: var(--rv-gold); }
.rv-svc-row { --rv-fig-accent: var(--rv-brand-green); }
.rv-svc-bullet { background: var(--rv-brand-green); width: 6px; height: 6px; margin-top: 8px; }
.rv-svc-points li {
	text-transform: none;
	letter-spacing: 0;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: color-mix(in oklab, var(--rv-ink) 78%, transparent);
}
.rv-svc-legend-line { background: color-mix(in oklab, var(--rv-brand-green) 55%, transparent); }
.rv-label-rule { background: var(--rv-brand-green); }
.rv-check { color: var(--rv-brand-green); opacity: 1; }
.rv-faq-num { color: var(--rv-brand-green); }

/* "you are here" gold dot + tag on the maturity rail. .rv-root-prefixed
   because demand-generation.css's own .rv-root .rv-matx-node.is-active
   .rv-matx-dot / .rv-root .rv-matx-num hardcode #2a7de1 (not a variable,
   so the --rv-blue remap above can't reach them) at higher specificity
   than a plain .rv-matx-node selector, matching the prefix is what wins. */
.rv-root .rv-matx-node.is-active .rv-matx-dot {
	background: var(--rv-gold);
	border-color: color-mix(in oklab, var(--rv-gold) 65%, #000);
	box-shadow: 0 0 0 6px var(--rv-gold-tint);
}
.rv-root .rv-matx-num { color: color-mix(in oklab, var(--rv-brand-green) 55%, transparent); }
/* .rv-root-prefixed: demand-generation.css's own .rv-root .rv-matx-tag.is-accent
   (higher specificity) forces this blue/green, same trap as above. */
.rv-root .rv-matx-tag.is-accent { background: var(--rv-gold); border-color: var(--rv-gold); color: var(--rv-accent-ink); }
.rv-matx-node.is-done .rv-matx-dot { background: var(--rv-brand-green); border-color: var(--rv-brand-green); }
.rv-matx-code { color: var(--rv-brand-green); }
.rv-matx-track i { background: var(--rv-brand-green); }

/* same specificity trap for the pillar icon on the black "featured" card:
   demand-generation.css's own .rv-root .rv-pillar.is-primary .rv-pillar-mark
   forces white; the real design wants it green like the rest of the icons. */
.rv-root .rv-pillar.is-primary .rv-pillar-mark { color: var(--rv-brand-green); }

/* Case-study accent metric: real spec is plain green; the --rv-blue-ink
   remap above defaults to ink for the many OTHER things that fall back
   through it, which is wrong specifically here. */
.rv-root .rv-cases-metric-v.is-accent { color: var(--rv-brand-green) !important; }

/* active accordion / open-faq left rail reads gold */
.rv-faq-item { position: relative; }
.rv-faq-item::before {
	content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 3px;
	background: var(--rv-gold); transform: scaleY(0); transform-origin: top;
	transition: transform 320ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.rv-faq-item[open]::before { transform: scaleY(1); }
.rv-faq-item[open] .rv-faq-plus,
.rv-faq-item[open] .rv-faq-num { color: var(--rv-gold-ink); }

/* gold highlight word on light surfaces (used in the Stack heading) */
.rv-hl-gold {
	font-style: normal;
	color: inherit;
	background: linear-gradient(to bottom, transparent 62%, var(--rv-gold-tint) 62%);
	box-shadow: inset 0 -2px 0 0 var(--rv-gold);
}

/* The Shift feature panel: gold top accent + gold arrow, not green
   (.rv-root prefixed to match/beat the base .rv-root .rv-ins-feature-panel
   specificity). */
.rv-root .rv-ins-feature-panel { border-top-color: var(--rv-gold); }
.rv-root .rv-ins-arrow { background: var(--rv-gold); }

/* Method rows: tighten the gap the base .rv-svc-points inherited before
   the sentence-case rewrite above (it was sized for the old all-caps look). */
.rv-svc-points { margin-top: 14px; }

/* one vertical rhythm + off-white surface across the light bands */
.rv-mat, .rv-whofor, .rv-audit, .rv-deliverables, .rv-faq, .rv-cases, .rv-ins.rv-shift, .rv-outcomes {
	padding-top: var(--rv-band);
	padding-bottom: var(--rv-band);
	padding-left: var(--rv-gutter);
	padding-right: var(--rv-gutter);
}
.rv-audit, .rv-whofor { background: #f6f7f4; }

/* softer, modern hover response + focus ring, matching the export's polish pass */
.rv-cta:hover, .rv-rh-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(0,0,0,0.55); }
.rv-cta:active, .rv-rh-cta:active { transform: translateY(0); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--rv-brand-green); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--rv-brand-green); color: var(--rv-ink); }
@media (prefers-reduced-motion: reduce) {
	.rv-cta:hover, .rv-rh-cta:hover, .rv-pillar:hover { transform: none; }
}

/* ============================================================
   FINAL READABILITY + ACCENT CORRECTIONS
   Appended last, with .rv-root-prefixed (or higher) specificity, so
   these always win regardless of where else a conflicting rule sits
   in this file. Two known blanket traps keep causing this:
     - `.rv-root h3 { color: var(--rf-ink-2); }` (line ~2573) forces
       EVERY <h3> dark, including ones sitting on dark backgrounds.
     - `.rv-root p { color: var(--rf-mute); }` (line ~2586) does the
       same for every <p>.
   Both come from the "RevOps hub design system" layer ported in from
   another page; that page's own dark-on-dark spots already got a
   documented compound-selector fix (search this file for "outrank
   the page-wide"); these are the same fix for elements this page
   introduces that never got one.
   ============================================================ */

/* Case studies: client name (h3) and body copy (p) sit on the dark
   .rv-cs-left/.rv-cs-right panels and were rendering ink-on-dark. */
.rv-root .rv-cs-client { color: var(--rv-white); }
.rv-root .rv-cs-body { color: rgba(255, 255, 255, 0.68); }

/* Case studies file/eyebrow label and the testimonial pill: both are
   small mono kickers on dark panels, which this page's real design
   renders gold (the "current / attention" accent), not green, same
   family as the FAQ open-rail and the hero's gold headline phrase. */
.rv-root .rv-cs-file { color: var(--rv-green); }
.rv-root .rv-testify-pill { color: var(--rv-gold); border-left-color: var(--rv-gold); }

/* FAQ: a whole revenue-operations.php-shaped FAQ skin (rounded white
   card per item, green hover border, --rf-ink-2/--rf-mute text colors)
   got ported in with the rest of the "RevOps hub parity" block, but this
   page's real FAQ is a flat bordered list (border-bottom only, no radius,
   no hover state) with a gold left-rail reveal on the open item, already
   built correctly earlier in this file and just getting outranked. */
.rv-root .rv-faq { background: var(--rv-white); border-top: 0; }
.rv-root .rv-faq-item,
.rv-root .rv-faq details {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--rv-hair-dark);
	border-radius: 0;
}
.rv-root .rv-faq-item:hover,
.rv-root .rv-faq details:hover { border-color: var(--rv-hair-dark); }
.rv-root .rv-faq-q,
.rv-root .rv-faq summary { color: var(--rv-ink); }
.rv-root .rv-faq-item p,
.rv-root .rv-faq details p { color: var(--rv-ink); opacity: 0.78; }

/* Outcomes: same story as the FAQ above. This page's real Outcomes strip
   is a flat, undecorated 3-up row (transparent cards, a border-left
   divider between them, a thin green reveal-line on scroll, the KPI id
   as a small caption under the label), but a "revenue-operations hub
   parity" `.rv-root .rv-kpi`/`.rv-root .rv-kpistack` card design (white
   background, bordered box, blurred drop-shadow) was ported in with the
   rest of that block and, being `.rv-root`-prefixed, outranks the
   correct flat design defined earlier in this file regardless of source
   order. */
.rv-root .rv-kpistack {
	gap: 0;
	padding-top: 56px;
	border-top: 1px solid color-mix(in oklab, var(--rv-ink) 16%, transparent);
	margin-top: 28px;
}
.rv-root .rv-kpi {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 8px 40px 8px 0;
	position: relative;
	overflow: visible;
}
.rv-root .rv-kpi + .rv-kpi { padding-left: 40px; border-left: 1px solid color-mix(in oklab, var(--rv-ink) 12%, transparent); }
.rv-root .rv-kpi::before {
	content: "";
	position: absolute; left: 0; top: -57px; width: 0; height: 2px;
	background: var(--rv-green);
	transition: width 900ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.rv-root .rv-kpi + .rv-kpi::before { left: 40px; }
.rv-root .rv-outcomes.is-in .rv-kpi::before { width: 56px; }
.rv-root .rv-kpi::after { display: none; content: none; }
.rv-root .rv-kpi:hover { transform: none; box-shadow: none; }
.rv-root .rv-kpi:hover::before { width: 100%; }
.rv-root .rv-kpi-id {
	position: static;
	display: block;
	margin-top: 22px;
	top: auto; right: auto; left: auto;
	color: color-mix(in oklab, var(--rv-ink) 42%, transparent);
	opacity: 1;
}
.rv-root .rv-kpi-id::after { content: " · measured"; }
.rv-root .rv-kpi-label { margin-top: 26px; padding-top: 0; border-top: 0; }


/* The method blueprint's texture grid is deliberately bled 80px past the
   section on all four sides (inset: -80px). On desktop that lands in the
   surrounding whitespace. On a phone the sections are tight, so the bleed
   sat on top of the neighbouring sections and pushed past both screen
   edges -- the overlap seen when scrolling the method section. */
@media (max-width: 900px) {
  .rv-mbp-grid { inset: 0; }
}


/* The case-file tab is absolutely positioned above the folder's top edge
   (top:-1px + translateY(-100%)), so it eats into the folder's own top
   margin. On desktop the heading above is one line and 56px is enough; on a
   phone the heading wraps and the tab lands on it. Give the folder room for
   the tab plus clearance, enough that a two-line tab still clears. */
@media (max-width: 900px) {
  .rv-folder { margin-top: 120px; }
}


/* .rv-del-pg is pinned bottom-right inside the panel. The desktop panel has a
   min-height that reserves the space; the mobile rule drops min-height to 0,
   so the last line of the output body ran underneath the page number. */
@media (max-width: 900px) {
  .rv-del-panel { padding-bottom: 56px; }
}

/* ============================================================
 * Gap-card motif animations (.gm-*)
 *
 * The four animated glyphs the Gap cards use: dup (drifting duplicate rows),
 * link (a dashed hop with a travelling spark), join (two blocks pulling apart)
 * and est (an estate of blinking nodes). Emitted by
 * template-parts/sections/diagnosis-cards.php's motif helper.
 *
 * These are additive: the Data & Engineering page ports the same four glyphs
 * without the gm- classes, so it keeps its static motifs and these rules do
 * not match it.
 * ============================================================ */
.rv-gap-motif svg { overflow: visible; }

.gm-dup { transform-box: fill-box; transform-origin: left center; }
.gm-dup-a { animation: rv-gm-drift 3.4s ease-in-out infinite; }
.gm-dup-b { animation: rv-gm-drift 3.4s ease-in-out infinite 0.35s; }
.gm-dup-c { animation: rv-gm-drift 3.4s ease-in-out infinite 0.7s; }
@keyframes rv-gm-drift {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50% { transform: translateX(5px); opacity: 1; }
}

.gm-link { stroke-dashoffset: 0; animation: rv-gm-dash 1.8s linear infinite; }
@keyframes rv-gm-dash { to { stroke-dashoffset: -12; } }
.gm-link-spark { opacity: 0; animation: rv-gm-spark 2.4s ease-in-out infinite; }
@keyframes rv-gm-spark {
  0%, 70%, 100% { opacity: 0; transform: translateX(-4px); }
  80%, 92% { opacity: 1; transform: translateX(2px); }
}

.gm-join { transform-box: fill-box; transform-origin: center; }
.gm-join-a { animation: rv-gm-apart 3.6s ease-in-out infinite; }
.gm-join-b { animation: rv-gm-apart 3.6s ease-in-out infinite reverse; }
@keyframes rv-gm-apart {
  0%, 100% { transform: translateX(-4px); }
  50% { transform: translateX(3px); }
}

.gm-est { animation: rv-gm-blink 4s ease-in-out infinite; }
.gm-est-2 { animation-delay: 0.5s; }
.gm-est-3 { animation-delay: 1s; }
.gm-est-4 { animation-delay: 1.5s; }
@keyframes rv-gm-blink {
  0%, 100% { opacity: 0.28; }
  30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-dup, .gm-dup-a, .gm-dup-b, .gm-dup-c,
  .gm-link, .gm-link-spark,
  .gm-join, .gm-join-a, .gm-join-b,
  .gm-est { animation: none; }
}

/* ============================================================
 * September review: testimonial card corners, and the mobile pass.
 *
 * Both came from the Data & Engineering review and were written against
 * that page alone, but they correct the shared section shapes rather than
 * anything specific to it, so they live in the core and apply to every
 * rv- page that uses those sections.
 * ============================================================ */

/* Marketing feedback: square the testimonial cards. The 18px radius was the
 * only rounded box on the page and does not match the rest of the site. The
 * avatar and the carousel control keep theirs. */
.rv-testify .rv-testimonial { border-radius: 0; }

/* Section rules below are (0,2,1) because lp-mobile-density.css also sets
 * padding-block for them and is enqueued after this file (priority 99). */
@media (max-width: 767px) {

	/* "Reduce some white space before case file / before outcomes."
	 *
	 * Both boundaries measured 204px, not the usual 128px, because the
	 * section above each keeps a 140px desktop bottom padding on mobile.
	 * Capping those two at 64px and halving the two tops puts both
	 * boundaries at 96px. */
	.rv-root > section.rv-mat,
	.rv-root > section.rv-case {
		padding-bottom: 64px;
	}

	.rv-root > section.rv-case,
	.rv-root > section.rv-outcomes {
		padding-top: 32px;
	}

	/* "Fix the quotation text width on mobile."
	 *
	 * Both quote cards, the testimonial and the case-file folder, sit at the
	 * page's 24px inline padding and then add 24px of their own, so the quote
	 * started 49px from the screen edge with a 277px measure. 16px of card
	 * padding gives the quote 293px without the text touching the card
	 * border. */
	.rv-root .rv-testimonial,
	.rv-root .rv-case .rv-folder {
		padding-inline: 16px;
	}
}

/* The testify aside prints its metric value inside .rv-num, the counter class,
 * which is sized and coloured for the big standalone stat blocks. In this aside
 * the designs keep the value at the metric's own size and colour, so it defers
 * to its container here rather than shouting. */
/* .rv-case-metric is right-aligned for the case-study slide it was written for.
 * In the testify aside it sits under a left-aligned heading, which is how the
 * designs set it. */
/* The quote track is a two-up carousel. A page shipping a single testimonial
 * was leaving half of it empty beside the card, so a lone quote takes the whole
 * track instead. Pages with two or more are untouched. */
.rv-testify .rv-testimonial:only-child { grid-column: 1 / -1; }
.rv-testify .rv-testimonials:has(> .rv-testimonial:only-child) { grid-template-columns: 1fr; }

.rv-testify .rv-case-metric { text-align: left; }

.rv-testify .rv-case-metric-num .rv-num {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	line-height: inherit;
}

/* Deliverable card titles run at 1.5 in the designs. The page-wide h3 rule sets
 * 1.2, which is right for a heading standing on its own but pinches these, where
 * most titles wrap to two lines inside a fixed-height card. */
.rv-deliverables .rv-del-card h3 {
	line-height: 1.5;
	letter-spacing: -0.018em;
}

/* Solid CTA, by the band it sits on.
 *
 * On the light bands it is green with dark text, and hovers to near-black with
 * white text, matching the sticky CTA.
 *
 * On the dark closing band that hover would disappear into the background, so
 * the button inverts instead: white with dark text at rest, green on hover. The
 * rest state is the one that was asked for; the green hover is the reading that
 * keeps it legible and on-brand, and is the easiest bit to change if it should
 * be something else. */


/* ============================================================
 * Primary button, one behaviour everywhere.
 *
 * Green with dark text at rest, inverting to white with dark text on hover, on
 * whatever band it sits on. Both classes are covered: .rv-cta--solid for the
 * shift and closing buttons, .rv-rh-cta for the hero, and .rv-stickycta for
 * the floating one, each of which previously hovered to a colour of its own.
 *
 * Green with black text at rest. On hover it inverts against the band it sits
 * on, so it never disappears into its own background:
 *
 *   light band  ->  black with white text
 *   dark band   ->  white with black text
 *
 * CSS cannot read a background's luminance, so the dark bands are listed. Each
 * one below was measured on the rendered pages at 0.06 to 0.10 relative
 * luminance; every other band carrying one of these buttons measured 0.96 or
 * lighter, so the default hover is the light-band one.
 *
 * The floating CTA is not inside any band, so it takes the light-band
 * behaviour wherever it sits.
 *
 * Declared last so it settles the several older hover rules in this file that
 * reach for --rv-blue-ink or their own greens. Pages with their own accent
 * override this from their own stylesheet, which loads after the core.
 * ============================================================ */
.rv-root .rv-cta--solid,
.rv-root .rv-rh-cta,
.rv-root .rv-stickycta {
	background: var(--rv-green);
	border-color: var(--rv-green);
	color: var(--rv-ink);
}

.rv-root .rv-cta--solid:hover,
.rv-root .rv-rh-cta:hover,
.rv-root .rv-stickycta:hover {
	background: var(--rv-ink);
	border-color: var(--rv-ink);
	color: var(--rv-white);
}

.rv-root .rv-close .rv-cta--solid:hover,
.rv-root .rv-close .rv-rh-cta:hover,
.rv-root .rv-cases .rv-cta--solid:hover,
.rv-root .rv-cases .rv-rh-cta:hover,
.rv-root .rv-cs .rv-cta--solid:hover,
.rv-root .rv-cs .rv-rh-cta:hover,
.rv-root .rv-testify .rv-cta--solid:hover,
.rv-root .rv-testify .rv-rh-cta:hover,
.rv-root .rv-tm2 .rv-cta--solid:hover,
.rv-root .rv-tm2 .rv-rh-cta:hover {
	background: var(--rv-white);
	border-color: var(--rv-white);
	color: var(--rv-ink);
}

/* ---------------------------------------------------------------------------
 * Section-head kicker, stage sub-labels, leak notes, deliverable outputs and
 * testimonial sector lines. Added for the refreshed service-line designs; all
 * of these render only when the page passes the matching arg, so pages that
 * do not carry them are untouched.
 * ------------------------------------------------------------------------ */

.rv-diag-kicker { max-width: 34ch; margin: 14px 0 10px; font-size: 18px; line-height: 1.45; opacity: 0.68; }

.rv-engine-sub { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }

.rv-leakmark-code { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rv-green); white-space: nowrap; }
.rv-leakmark-note { position: absolute; top: calc(100% + 26px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 26ch; font-size: 13px; line-height: 1.5; opacity: 0.6; }

.rv-del-out { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rv-hair-dark); display: flex; flex-direction: column; gap: 6px; }
.rv-del-out-lbl { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-green); }
.rv-del-out-txt { font-size: 15px; line-height: 1.5; opacity: 0.8; }

.rv-t-sector { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; margin-bottom: 8px; }
.rv-t-shift { display: block; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rv-green); margin-bottom: 18px; }

.rv-close-consult { margin: 30px 0 34px; padding: 24px; border: 1px solid rgba(245, 243, 238, 0.16); display: flex; flex-direction: column; gap: 16px; max-width: 540px; }
.rv-close-consult-head { display: flex; flex-direction: column; gap: 4px; }
.rv-close-consult-lbl { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-green); }
.rv-close-consult-sub { font-size: 15px; opacity: 0.7; }
.rv-close-consult-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rv-close-consult-list li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; opacity: 0.85; }
.rv-close-consult-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 6px; border-left: 1.5px solid var(--rv-green); border-bottom: 1.5px solid var(--rv-green); transform: rotate(-45deg); }

.rv-stackx-core-note { display: block; margin-top: 10px; max-width: 30ch; font-size: 13px; line-height: 1.5; opacity: 0.62; }

/* The "strategy is common, execution is what matters" credibility band. */
.rv-cred { padding: clamp(64px, 8vw, 120px) var(--rv-gutter); }
.rv-cred-head { max-width: 62ch; }
.rv-cred-standfirst { margin: 22px 0 0; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.7; color: var(--rv-green); }
.rv-cred-body { margin: 20px 0 0; font-size: 17px; line-height: 1.65; opacity: 0.74; }
.rv-cred-inds { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rv-cred-inds li { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--rv-hair-dark); opacity: 0.75; }
.rv-cred-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rv-hair-dark); border: 1px solid var(--rv-hair-dark); }
.rv-cred-card { background: var(--rv-white); padding: 32px 28px; display: flex; flex-direction: column; gap: 8px; }
.rv-cred-card-v { font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.rv-cred-card-k { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
.rv-cred-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; opacity: 0.74; }

@media (max-width: 860px) {
	.rv-cred-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.rv-leakmark-note { display: none; }
}