/* ============================================================
   FREE MARKET AND MARKETING REVIEW LANDER (free-review.html)
   Loads after styles.css, overrides, service-page.css and lp.css,
   so it inherits the pay-per-lead lander system (1360px guide,
   section rhythm, titles, tags, journey rail, FAQ, CTA). This file
   only adds what is specific to the review page.
   The review itself is the hero visual: a pinned book of report
   pages that turn as you scroll (review.js sets --q, --t, --d).
   Palette: white, greyish black and hot pink. Pink is never text.
   Built by lp-src/build_review.py.
   ============================================================ */

.rv-page {
  --rv-card: #fff;
  --rv-line: rgba(46, 46, 46, 0.1);
}

/* Shared small source label ("Published data", "leadly research",
   "Register count"), styled like the lander tags. */
.rv-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  padding: 0.32rem 0.7rem;
  border: 1px dashed rgba(255, 0, 153, 0.42);
  border-radius: 999px;
  background: rgba(255, 0, 153, 0.08);
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.rv-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--pink);
}

/* The nav button label is longer than "Book a call": the site gives
   .nav-cta a fixed 132px width, so let this one size to its label. */
.rv-page .nav-cta {
  width: auto;
  min-width: 0;
  padding-inline: 1.5rem;
  white-space: nowrap;
}

/* ---- Hero: promise left, form right ------------------------------ */

/* lp.css clips the hero (for its glow); clip sideways only, so the
   market dropdown can hang below the hero. */
.lp-page .rv-hero {
  overflow-x: clip;
  overflow-y: visible;
  z-index: 3; /* above the next section's .section-shell (z-index 2) */
}

.rv-hero-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.rv-hero-copy {
  display: grid;
  justify-items: start;
  gap: 0;
}

.rv-hero-copy .svp-pill {
  margin-bottom: 1.4rem;
}

.lp-page .rv-hero-title {
  max-width: 15ch;
}

.rv-hero-ticks {
  margin-top: 1.8rem;
}

/* ---- The form card ----------------------------------------------- */

/* Same card and fields as the leadly contact page; the fields get the
   contact page's darker edge so they read against the white card. */
.rv-form {
  display: block;
  padding: clamp(1.6rem, 2.8vw, 2.2rem);
}

.rv-form .contact-field input,
.rv-form .contact-field select {
  border-color: rgba(46, 46, 46, 0.26);
}

/* No gradients on leadly buttons: flat hot pink. */
.rv-page .contact-submit,
.rv-page .button-primary,
.rv-page .nav-cta,
.rv-page .rv-sticky {
  background: var(--pink);
}

.rv-reviewing {
  margin-top: -0.4rem;
  color: rgba(46, 46, 46, 0.68);
  font-size: 0.95rem;
}

.rv-reviewing strong {
  color: #2e2e2e;
}

.rv-change {
  margin-left: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: #2e2e2e;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 0, 153, 0.5);
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.rv-form .lp-form-privacy {
  margin-top: 0;
}

/* ---- Final call to action ----------------------------------------- */

/* The start bar: website in, then the pop-up. Also used in the final
   call to action. */
/* A real-looking text field (border, globe icon, left-aligned hint)
   next to the button, so it reads as somewhere to type. */
.rv-bar {
  display: flex;
  gap: 0.6rem;
  width: min(100%, 38rem);
  margin-top: 2rem;
}

.rv-bar input {
  flex: 1;
  min-width: 0;
  min-height: 3.65rem;
  padding: 0 1.2rem 0 3rem;
  border: 1px solid rgba(46, 46, 46, 0.26);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e2e2e' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.4 2.4 3.5 5.2 3.5 8.5s-1.1 6.1-3.5 8.5M12 3.5C9.6 5.9 8.5 8.7 8.5 12s1.1 6.1 3.5 8.5'/%3E%3C/svg%3E") no-repeat 1.1rem 50% / 20px;
  box-shadow: 0 10px 24px rgba(46, 46, 46, 0.06);
  color: #2e2e2e;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  outline: none;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.rv-bar input::placeholder {
  color: rgba(46, 46, 46, 0.5);
}

.rv-bar input:hover {
  border-color: rgba(46, 46, 46, 0.45);
}

.rv-bar input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 0, 153, 0.12);
}

.rv-bar .contact-submit {
  width: auto;
  min-height: 3.65rem;
  margin: 0;
  padding-inline: 1.6rem;
  white-space: nowrap;
}

.rv-bar-msg {
  margin-top: 0.8rem;
}

.svp-cta-copy .rv-bar {
  margin-inline: auto;
}

/* ---- What's inside: contents list + one page per chapter -----------
   Desktop: the section is pinned while you scroll through it and the
   page on the right fades to the active chapter (review.js). Phones:
   no pinning, the pages stack. */

.lp-page.lp-page main > .rv-inside {
  height: calc(100vh + 6 * 42vh);
  padding-block: 0;
}

.rv-inside-sticky {
  position: sticky;
  top: 0;
  display: grid;
  align-items: center;
  height: 100vh;
  padding-top: 4.5rem;
}

.rv-inside-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

/* Pill, title and list spaced like the other section heads. */
.rv-inside-copy {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.rv-toc {
  justify-self: stretch;
  margin: clamp(0.6rem, 2vw, 1.4rem) 0 0;
  padding: 0;
  border-top: 1px solid rgba(46, 46, 46, 0.12);
  list-style: none;
}

.rv-toc li {
  border-bottom: 1px solid rgba(46, 46, 46, 0.12);
}

.rv-toc button {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: baseline;
  width: 100%;
  padding: 0.9rem 0;
  border: 0;
  background: none;
  color: rgba(46, 46, 46, 0.35);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;
  transition: color var(--motion-base) ease;
}

.rv-toc button:hover,
.rv-toc li.is-active button {
  color: #2e2e2e;
}

.rv-toc-index {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rv-toc li.is-active .rv-toc-index::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: var(--pink);
  vertical-align: middle;
}

/* The pages: white report pages, one on top at a time. */
.rv-slides {
  position: relative;
  display: grid;
  container-type: inline-size;
}

.rv-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 2.4cqw;
  aspect-ratio: 1200 / 849;
  padding: 5cqw 5.5cqw 4cqw;
  border: 1px solid rgba(46, 46, 46, 0.06);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 40px 80px rgba(46, 46, 46, 0.12), 0 12px 24px rgba(46, 46, 46, 0.06);
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 0.45s ease,
    translate 0.6s var(--ease-standard);
}

.rv-slide.is-active {
  opacity: 1;
  translate: 0 0;
}

.rv-slide-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(46, 46, 46, 0.6);
  font-size: max(11px, 1.35cqw);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rv-slide-top span {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.rv-slide-top i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--pink);
}

.rv-slide-top img {
  width: 8cqw;
  height: auto;
}

.rv-slide-title {
  max-width: 34ch;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: max(20px, 3.5cqw);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.rv-slide-body {
  display: grid;
  align-content: center;
  gap: 3cqw;
  min-height: 0;
}

.rv-slide-foot,
.rv-slide-note {
  color: rgba(46, 46, 46, 0.5);
  font-size: max(11px, 1.3cqw);
}

/* Figures */
.rv-slide-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 3cqw;
  margin: 0;
}

.rv-slide-stats div {
  display: grid;
  gap: 0.8cqw;
  padding-top: 1.6cqw;
  border-top: 2px solid #2e2e2e;
}

.rv-slide-stats dt {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: max(22px, 4.4cqw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.rv-slide-stats dd {
  margin: 0;
  color: rgba(46, 46, 46, 0.66);
  font-size: max(11px, 1.45cqw);
  line-height: 1.35;
}

/* 04 Marketing: L&C's share of voice on three channels */
.rv-sov {
  display: grid;
  gap: 3cqw;
}

.rv-sov-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1cqw 2cqw;
}

.rv-sov-label {
  color: rgba(46, 46, 46, 0.7);
  font-size: max(12px, 1.6cqw);
}

.rv-sov-val {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 2.6em;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: max(24px, 4.6cqw);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: right;
}

.rv-sov-track {
  grid-column: 1;
  grid-row: 2;
  height: 3cqw;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(46, 46, 46, 0.1);
}

.rv-sov-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--pink);
  transition: width 0.9s var(--ease-standard) calc(0.15s + var(--i) * 0.15s);
}

.rv-slide.is-active .rv-sov-track span {
  width: var(--w);
}

.rv-sov-key {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: rgba(46, 46, 46, 0.6);
  font-size: max(11px, 1.3cqw);
}

.rv-sov-key span {
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: rgba(46, 46, 46, 0.18);
}

.rv-sov-key span.is-you {
  background: var(--pink);
}

.rv-sov-key span:not(.is-you) {
  margin-left: 1em;
}

/* 01 Briefing: one big figure (ink-ringed when the page shows) and three
   smaller ones. */
.rv-brief {
  display: grid;
  gap: 3.2cqw;
}

.rv-brief-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4cqw;
}

.rv-brief-big {
  position: relative;
  padding-inline: 1.5cqw;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: max(44px, 10cqw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}

.rv-brief-big span {
  font: inherit;
}

.rv-brief-hero p {
  max-width: 24ch;
  color: rgba(46, 46, 46, 0.7);
  font-size: max(13px, 1.9cqw);
  line-height: 1.35;
}

/* 02 Market: 100 dots, the first five pink (about 4.8%). */
.rv-market {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5cqw;
}

.rv-dots {
  display: grid;
  grid-template-columns: repeat(10, 2.2cqw);
  gap: 0.9cqw;
}

.rv-dots i {
  width: 2.2cqw;
  height: 2.2cqw;
  border-radius: 50%;
  background: rgba(46, 46, 46, 0.12);
}

.rv-dots i.is-hi {
  background: var(--pink);
  scale: 0;
  transition: scale 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) calc(0.2s + var(--k) * 0.08s);
}

.rv-slide.is-active .rv-dots i.is-hi {
  scale: 1;
}

.rv-market-copy {
  display: grid;
  gap: 3cqw;
}

.rv-market-lead {
  color: rgba(46, 46, 46, 0.7);
  font-size: max(13px, 1.9cqw);
  line-height: 1.35;
}

.rv-market-lead b {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-weight: 700;
}

/* 03 Customers: three review cards (an illustration, no figures). */
.rv-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 2cqw;
}

.rv-review {
  display: grid;
  gap: 1.1cqw;
  padding: 2.2cqw;
  border: 1px solid rgba(46, 46, 46, 0.1);
  border-radius: 14px;
  background: #fafafb;
  translate: 0 calc(var(--i) * 2.4cqw);
}

.rv-review:nth-child(2) {
  translate: 0 4.8cqw;
}

.rv-review:nth-child(3) {
  translate: 0 1.2cqw;
}

.rv-stars {
  display: flex;
  gap: 0.4cqw;
}

.rv-stars svg {
  width: 2cqw;
  height: 2cqw;
  fill: rgba(46, 46, 46, 0.14);
}

.rv-stars svg.is-on {
  fill: #2e2e2e;
}

.rv-review-tag {
  justify-self: start;
  margin-bottom: 0.4cqw;
  padding: 0.4cqw 1cqw;
  border: 1px solid rgba(46, 46, 46, 0.2);
  border-radius: 999px;
  color: #2e2e2e;
  font-size: max(10px, 1.2cqw);
  font-weight: 600;
}

.rv-review-tag.is-praise {
  border: 1px dashed rgba(255, 0, 153, 0.5);
  background: rgba(255, 0, 153, 0.08);
}

.rv-review i {
  display: block;
  width: var(--w);
  height: 1.1cqw;
  border-radius: 999px;
  background: rgba(46, 46, 46, 0.1);
}

/* 05 Competitors: rivals on paid search against organic search. */
.rv-map {
  width: 100%;
  height: auto;
  overflow: visible;
}

.rv-map-axis {
  fill: none;
  stroke: rgba(46, 46, 46, 0.25);
  stroke-width: 1.5;
}

.rv-map-label {
  fill: rgba(46, 46, 46, 0.5);
  font-family: var(--font-body);
  font-size: 12px;
}

.rv-map-dot circle {
  fill: rgba(46, 46, 46, 0.55);
  transform-box: fill-box;
  transform-origin: center;
  scale: 0;
  transition: scale 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) calc(0.15s + var(--i) * 0.08s);
}

.rv-map-dot text {
  fill: rgba(46, 46, 46, 0.7);
  font-family: var(--font-body);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.4s ease calc(0.35s + var(--i) * 0.08s);
}

.rv-map-dot.is-hi circle {
  fill: var(--pink);
}

.rv-map-dot.is-ring circle {
  fill: #2e2e2e;
  stroke: rgba(255, 0, 153, 0.5);
  stroke-width: 6;
  paint-order: stroke;
}

.rv-map-dot.is-hi text,
.rv-map-dot.is-ring text {
  fill: #2e2e2e;
  font-weight: 700;
}

.rv-slide.is-active .rv-map-dot circle {
  scale: 1;
}

.rv-slide.is-active .rv-map-dot text {
  opacity: 1;
}

/* 06 Next moves: the four phases on a 12-week line. */
.rv-gantt {
  display: grid;
  gap: 1.2cqw;
}

.rv-gantt-axis,
.rv-gantt li {
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr);
  align-items: center;
  gap: 2cqw;
}

.rv-gantt-axis {
  color: rgba(46, 46, 46, 0.45);
  font-size: max(10px, 1.15cqw);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rv-gantt-weeks {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-bottom: 0.8cqw;
  border-bottom: 1px solid rgba(46, 46, 46, 0.15);
  text-align: center;
}

.rv-gantt ol {
  display: grid;
  gap: 1.3cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-gantt-name {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: max(12px, 1.7cqw);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.rv-gantt-axis .rv-gantt-name {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.rv-gantt-track {
  position: relative;
  height: 4.6cqw;
  border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgba(46, 46, 46, 0.05) 0 1px, transparent 1px calc(100% / 12));
}

.rv-gantt-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--a) / 12 * 100%);
  width: calc((var(--b) - var(--a)) / 12 * 100%);
  display: flex;
  align-items: center;
  padding-inline: 1.2cqw;
  border-radius: 10px;
  background: #2e2e2e;
  color: #fff;
  transform-origin: left center;
  scale: 0 1;
  transition: scale 0.6s var(--ease-standard) calc(0.15s + var(--i) * 0.15s);
}

.rv-gantt li.is-hi .rv-gantt-bar {
  background: var(--pink);
}

.rv-gantt-bar b {
  overflow: hidden;
  font-size: max(10px, 1.15cqw);
  font-weight: 600;
  white-space: nowrap;
}

.rv-slide.is-active .rv-gantt-bar {
  scale: 1 1;
}

.rv-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.rv-done-copy {
  color: rgba(46, 46, 46, 0.7);
}

.rv-step,
.rv-done {
  display: grid;
  gap: 1.1rem;
}

.rv-step[hidden],
.rv-done[hidden] {
  display: none;
}

.rv-form-title {
  margin-top: 0;
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

/* The site sizes bare spans at 16px: keep "(optional)" on the
   label's own line height. */
.rv-optional {
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.rv-msg {
  grid-column: 1 / -1;
  color: #2e2e2e;
  font-size: 0.85rem;
}

.rv-msg::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.45rem;
  border-radius: 999px;
  background: var(--pink);
  vertical-align: middle;
}

.rv-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
  color: rgba(46, 46, 46, 0.7);
  font-size: 0.86rem;
  line-height: 1.4;
  cursor: pointer;
}

.rv-check input {
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  accent-color: var(--pink);
}

/* ---- Market dropdown: a field-styled button and a clean option card
   (review.js builds it over the real <select>, which stays for the
   value). */
.rv-select {
  position: relative;
}

.rv-select select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.rv-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.45rem;
  padding: 0 1rem 0 1.1rem;
  border: 1px solid rgba(46, 46, 46, 0.26);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  color: #2e2e2e;
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

.rv-select-btn.is-empty {
  color: rgba(46, 46, 46, 0.45);
}

.rv-select-btn:hover {
  border-color: rgba(46, 46, 46, 0.45);
}

.rv-select-btn:focus-visible,
.rv-select.is-open .rv-select-btn {
  border-color: var(--pink);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 0, 153, 0.09);
  outline: none;
}

.rv-select-btn svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: #2e2e2e;
  transition: rotate var(--motion-base) var(--ease-standard);
}

.rv-select.is-open .rv-select-btn svg {
  rotate: 180deg;
}

.rv-select-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  max-height: 21rem;
  margin: 0;
  padding: 0.4rem;
  overflow-y: auto;
  border: 1px solid rgba(46, 46, 46, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(46, 46, 46, 0.16), 0 6px 14px rgba(46, 46, 46, 0.06);
  list-style: none;
  opacity: 0;
  translate: 0 -6px;
  visibility: hidden;
  transition:
    opacity 0.18s ease,
    translate 0.22s var(--ease-standard),
    visibility 0s linear 0.22s;
}

/* Opens upwards when there is no room below (review.js). */
.rv-select.is-up .rv-select-list {
  top: auto;
  bottom: calc(100% + 6px);
  translate: 0 6px;
}

.rv-select.is-open .rv-select-list {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition:
    opacity 0.18s ease,
    translate 0.22s var(--ease-standard);
}

.rv-select-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  color: #2e2e2e;
  font-size: 0.98rem;
  cursor: pointer;
}

.rv-select-list li.is-focus,
.rv-select-list li:hover {
  background: #f4f4f6;
}

.rv-select-list li[aria-selected="true"] {
  font-weight: 600;
}

.rv-select-list li[aria-selected="true"]::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff0099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- Sources: a static row under the chapter cards --------------- */

.rv-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
}

.rv-sources-label {
  margin-right: 0.4rem;
  color: rgba(46, 46, 46, 0.55);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rv-source {
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(46, 46, 46, 0.08);
  border-radius: 999px;
  background: #fff;
  color: rgba(46, 46, 46, 0.78);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ---- Example: figures from the L&C test edition -------------------- */

.rv-figures {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rv-figures .svp-figure-value {
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
}

.rv-figures .svp-figure p {
  color: rgba(46, 46, 46, 0.7);
}

.rv-figures .rv-label {
  margin-top: 0.2rem;
}

.rv-caption {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  color: rgba(46, 46, 46, 0.5);
  font-size: 0.8rem;
}

/* ---- Who it's for + privacy ---------------------------------------- */

.rv-who-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
}

.rv-who-copy {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
}

.rv-privacy {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(46, 46, 46, 0.06);
  border-radius: var(--svp-card-radius);
  background: #fff;
  box-shadow: var(--lp-card-shadow);
}

.rv-privacy-title {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.rv-privacy-list {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.3rem;
  list-style: none;
}

.rv-privacy-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.rv-privacy-list .lp-usp-icon {
  width: 46px;
  height: 46px;
  background: #f6f6f8;
}

.rv-privacy-list li {
  align-items: center;
}

.rv-privacy-list p {
  color: rgba(46, 46, 46, 0.66);
  font-size: 0.95rem;
}

.rv-privacy-list strong {
  color: #2e2e2e;
  font-weight: 600;
}

/* ---- Footer legal lines ------------------------------------------- */

.rv-legal {
  display: grid;
  gap: 0.4rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(244, 244, 244, 0.12);
}

.rv-legal p {
  color: rgba(244, 244, 244, 0.5);
  font-size: 0.8rem;
}

/* ---- Phones: sticky "Get my free review" once the form is out of
   view (review.js toggles .is-shown). Hidden on larger screens. */

.rv-sticky {
  display: none;
}

@media (max-width: 768px) {
  .rv-sticky {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    z-index: 50;
    display: grid;
    place-items: center;
    min-height: 3.4rem;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-family: var(--font-nav);
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(255, 0, 153, 0.3);
    opacity: 0;
    pointer-events: none;
    translate: 0 120%;
    transition:
      opacity var(--motion-base) ease,
      translate var(--motion-slow) var(--ease-standard);
  }

  .rv-sticky.is-shown {
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;
  }
}

/* ---- Tablet / mobile ---------------------------------------------- */

@media (max-width: 1024px) {
  .rv-hero-shell,
  .rv-who-layout {
    grid-template-columns: 1fr;
  }

  .rv-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* lp.css reorders the pay-per-lead hero on phones (title, lead, video,
   CTA); this hero keeps its natural order. Phones: What's inside is not
   pinned; the contents list goes and every page shows, stacked. */
@media (max-width: 860px) {
  .lp-page.lp-page main > .rv-inside {
    height: auto;
    padding-block: calc(var(--svp-section-y) / 2);
  }

  .rv-inside-sticky {
    position: static;
    height: auto;
    padding-top: 0;
  }

  .rv-inside-layout {
    grid-template-columns: 1fr;
  }

  .rv-inside-copy {
    justify-items: center;
    text-align: center;
  }

  .rv-toc {
    display: none;
  }

  /* Phones: the pages pile up like a deck. Each sticks a little lower
     than the one before, so the edges of the pages underneath show. */
  .rv-slides {
    gap: 1.4rem;
    padding-bottom: 2rem;
  }

  .rv-slide {
    position: sticky;
    top: calc(5.6rem + var(--n) * 10px);
    grid-area: auto;
    aspect-ratio: auto;
    min-height: 0;
    gap: 1rem;
    padding: 1.4rem 1.3rem;
    box-shadow: 0 -10px 30px rgba(46, 46, 46, 0.08), 0 20px 40px rgba(46, 46, 46, 0.1);
    opacity: 1;
    translate: 0 0;
  }

  .rv-slide .rv-sov-track span {
    width: var(--w);
  }

  .rv-slide .rv-dots i.is-hi,
  .rv-slide .rv-map-dot circle {
    scale: 1;
  }

  .rv-slide .rv-map-dot text {
    opacity: 1;
  }

  .rv-slide .rv-gantt-bar {
    scale: 1 1;
  }

  .rv-brief-hero,
  .rv-market {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .rv-dots {
    grid-template-columns: repeat(10, 14px);
    gap: 6px;
  }

  .rv-dots i {
    width: 14px;
    height: 14px;
  }

  .rv-reviews {
    grid-template-columns: 1fr;
  }

  .rv-review,
  .rv-review:nth-child(2),
  .rv-review:nth-child(3) {
    translate: none;
    padding: 0.9rem;
  }

  .rv-stars svg {
    width: 14px;
    height: 14px;
  }

  .rv-review i {
    height: 7px;
  }

  .rv-gantt-axis,
  .rv-gantt li {
    grid-template-columns: 36% minmax(0, 1fr);
  }

  .rv-gantt-track {
    height: 26px;
  }

  .rv-gantt-bar b {
    display: none;
  }

  /* The map is drawn at 600 units wide; on a phone that halves the
     text, so the labels are set larger in its own units. */
  .rv-map-dot text {
    font-size: 22px;
  }

  .rv-map-label {
    font-size: 20px;
  }

  /* Too tight for every name: label only L&C and Tembo. */
  .rv-slide .rv-map-dot:not(.is-hi):not(.is-ring) text {
    opacity: 0;
  }

  /* Weeks 1, 4, 8 and 12 only. */
  .rv-gantt-weeks span:not(:nth-child(1)):not(:nth-child(4)):not(:nth-child(8)):not(:nth-child(12)) {
    visibility: hidden;
  }

  .rv-slide-stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .rv-hero-copy > * {
    order: 0;
  }
}

@media (max-width: 768px) {
  .rv-sticky {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    z-index: 50;
    display: grid;
    place-items: center;
    min-height: 3.4rem;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-family: var(--font-nav);
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(255, 0, 153, 0.3);
    opacity: 0;
    pointer-events: none;
    translate: 0 120%;
    transition:
      opacity var(--motion-base) ease,
      translate var(--motion-slow) var(--ease-standard);
  }

  .rv-sticky.is-shown {
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;
  }
}

/* ---- Tablet / mobile ---------------------------------------------- */

@media (max-width: 1024px) {
  .rv-hero-shell,
  .rv-who-layout {
    grid-template-columns: 1fr;
  }

  .rv-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* lp.css reorders the pay-per-lead hero on phones (title, lead, video,
   CTA); this hero keeps its natural order. */

@media (max-width: 768px) {
  .rv-hero-copy,
  .rv-who-copy {
    justify-items: center;
    text-align: center;
  }

  .rv-pair {
    grid-template-columns: 1fr;
  }



  .rv-who-tags {
    justify-content: center;
  }

  .rv-legal p {
    text-align: center;
  }

  .lp-page .rv-hero-title {
    max-width: none;
  }

  .rv-hero-ticks {
    justify-self: center;
    text-align: left;
  }

  .rv-bar {
    flex-direction: column;
  }

  .rv-bar .contact-submit {
    width: 100%;
  }
}


/* ---- Thank-you page (free-review-thanks.html) ---------------------- */

/* No menu on this page: just the logo and one button, on every screen. */
.rv-thanks-page .rv-thanks-nav {
  position: static;
  display: flex;
  flex: 1;
  justify-content: flex-end;
  margin-left: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.rv-thanks-page .rv-thanks-nav .nav-cta {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.rv-thanks-page .menu-toggle {
  display: none;
}

/* One centred message. */
.rv-thanks-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* lp.css reorders the hero on phones; keep this page in source order. */
.rv-thanks-shell > * {
  order: 0;
}

.rv-thanks-title {
  max-width: 100%;
  margin: 1.4rem auto 0;
  font-size: clamp(2.8rem, min(6.4vw, 9vh), 5.6rem);
}

.rv-thanks-lead {
  max-width: 34rem;
  margin: 1.4rem auto 0;
}

.rv-thanks-lead strong {
  font: inherit;
  font-weight: 600;
  color: #2e2e2e;
  overflow-wrap: anywhere;
}

/* Where their review is up to: three steps on one rail, in a white
   card like the form. Done = pink tick, now = pulsing dot, next = grey. */
.rv-track {
  --rail-top: 2.95rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 60rem);
  margin: clamp(2.6rem, 6vh, 3.6rem) 0 0;
  padding: 2.2rem 1.5rem 2.4rem;
  list-style: none;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(46, 46, 46, 0.08);
  border-radius: 1.75rem;
  box-shadow: 0 1px 2px rgba(46, 46, 46, 0.04), 0 24px 60px rgba(46, 46, 46, 0.08);
}

/* The rail: grey all the way, pink up to the step in progress. */
.rv-track::before,
.rv-track::after {
  content: "";
  position: absolute;
  top: var(--rail-top);
  left: calc(1.5rem + (100% - 3rem) / 6);
  height: 2px;
  border-radius: 2px;
}

.rv-track::before {
  right: calc(1.5rem + (100% - 3rem) / 6);
  background: rgba(46, 46, 46, 0.12);
}

.rv-track::after {
  width: calc((100% - 3rem) / 3);
  background: var(--pink);
}

.rv-track li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0 1rem;
}

.rv-track-dot {
  position: relative;
  z-index: 1;
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: 0.9rem;
  border: 2px solid rgba(46, 46, 46, 0.18);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px #fff;
}

.rv-track .is-done .rv-track-dot {
  border-color: var(--pink);
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

.rv-track .is-now .rv-track-dot {
  border-color: var(--pink);
}

.rv-track .is-now .rv-track-dot::after {
  content: "";
  position: absolute;
  inset: 0.28rem;
  border-radius: 50%;
  background: var(--pink);
  animation: rv-track-pulse 1.8s ease-in-out infinite;
}

@keyframes rv-track-pulse {
  50% { transform: scale(0.55); opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-track .is-now .rv-track-dot::after { animation: none; }
}

.rv-track-step {
  font: inherit;
  color: rgba(46, 46, 46, 0.5);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rv-track strong {
  color: #2e2e2e;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.rv-track li:not(.is-done):not(.is-now) strong {
  color: rgba(46, 46, 46, 0.55);
}

.rv-track-note {
  font: inherit;
  color: rgba(46, 46, 46, 0.62);
  font-size: 0.95rem;
}

.rv-thanks-note {
  margin-top: 1.6rem;
  color: rgba(46, 46, 46, 0.55);
  font-size: 0.92rem;
}

/* Optional walkthrough: a dark rounded panel, copy left, button right. */
.lp-page main > .rv-thanks-more {
  padding: clamp(1rem, 4vh, 2.5rem) 0 clamp(4rem, 10vh, 6.5rem);
}

.rv-thanks-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(100%, 60rem);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3.4rem);
  color: #f4f4f4;
  background: #2e2e2e;
  border-radius: 1.75rem;
}

.rv-thanks-panel-title {
  margin: 1rem 0 0;
  color: #f4f4f4;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

.rv-thanks-panel p:not(.svp-pill) {
  max-width: 30rem;
  margin: 0.9rem 0 0;
  color: rgba(244, 244, 244, 0.72);
}

.rv-thanks-panel .button {
  flex: 0 0 auto;
}

/* Phones: the steps stack on a vertical rail; the panel stacks too. */
@media (max-width: 768px) {
  .rv-track {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding: 1.8rem 1.4rem;
    text-align: left;
  }

  .rv-track::before,
  .rv-track::after {
    top: 2.6rem;
    left: calc(1.4rem + 0.8rem - 1px);
    width: 2px;
    height: auto;
  }

  .rv-track::before {
    right: auto;
    bottom: 2.6rem;
  }

  .rv-track::after {
    height: calc((100% - 5.2rem) / 2);
  }

  .rv-track li {
    grid-template-columns: 1.6rem 1fr;
    justify-items: start;
    column-gap: 1rem;
    row-gap: 0.15rem;
    padding: 0;
  }

  .rv-track-dot {
    grid-row: 1 / span 3;
    margin: 0;
  }

  .rv-thanks-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .rv-thanks-panel .button {
    width: 100%;
  }
}