/* /referral: the offer.
   Hero with a one-client calculator, three tiers, a worked example, the
   introduction itself, and who to introduce. */

/* --- hero ---------------------------------------------------------------- */

.rf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.82fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
}

.rf-hero-copy { text-align: left; max-width: none; }
.rf-hero-copy .cmp-hero-sub { margin-left: 0; }
.rf-hero-copy .rd-ctas { justify-content: flex-start; }

.rf-calc-card { padding: 22px 24px 20px; }

.rf-field { display: block; margin-bottom: 18px; }
.rf-field-k { display: block; margin-bottom: 8px; font-size: 0.86rem; color: var(--ink-faint); }
.rf-field-v { display: flex; align-items: center; gap: 14px; }
.rf-field-v b {
  flex: none;
  min-width: 82px;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* No browser fills a range track up to the thumb, so --fill is painted from
   the script and the track is a gradient. */
.rf-field input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  appearance: none;
  background: linear-gradient(
    to right,
    var(--action) 0 var(--fill, 50%),
    var(--line) var(--fill, 50%) 100%
  );
  cursor: pointer;
}
.rf-field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--action);
  box-shadow: 0 2px 8px rgba(43, 69, 95, 0.22);
}
.rf-field input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--action);
}
.rf-field input[type="range"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--action) 45%, transparent);
  outline-offset: 3px;
}

.rf-out { margin-top: 20px; padding-top: 6px; border-top: 1px solid var(--line); }

.rf-out-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.rf-out-row b {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rf-out-row.is-total { margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--line); }
.rf-out-row.is-total b { font-size: 1.35rem; color: var(--action-deep); }

.rf-calc-note { margin: 12px 0 0; font-size: 0.82rem; color: var(--ink-faint); line-height: 1.5; }

/* --- the three tiers ----------------------------------------------------- */

.rf-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.rf-tier {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* The tier a reader should land on. It was set on the blue tile, which put
   dense text over artwork and made the one card that matters the hardest to
   read. It stays white and earns the attention instead. */
.rf-tier.is-featured {
  position: relative;
  border-color: var(--action);
  box-shadow: 0 20px 44px rgba(43, 69, 95, 0.14);
  transform: translateY(-6px);
}

.rf-tier-flag {
  position: absolute;
  top: -11px;
  left: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--action);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rf-tier-tag {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rf-tier.is-featured .rf-tier-tag { color: var(--action-deep); }

.rf-tier-amount {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.rf-tier.is-featured .rf-tier-amount { color: var(--action-deep); }
.rf-tier-amount span {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.rf-tier-body { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.62; }

/* --- the worked example -------------------------------------------------- */

/* The number it arrives at is the point, so the figures sit on the tile and
   the answer is set at the size of an answer. */
.rf-example {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  margin-top: 28px;
  padding: clamp(26px, 3vw, 38px);
  border-radius: 18px;
  background: #b5daf5 url("/assets/hero-tile-deep.svg") center / cover no-repeat;
}

.rf-eg-copy h3 { margin: 8px 0 12px; font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.rf-eg-note { margin: 0; color: var(--ink); opacity: 0.78; font-size: 0.92rem; line-height: 1.62; }

.rf-eg-figures {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 8px 22px;
  box-shadow: 0 16px 34px rgba(43, 69, 95, 0.14);
}

.rf-eg-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.rf-eg-row:last-child { border-bottom: 0; padding: 16px 0; }
.rf-eg-row .k { color: var(--ink-soft); font-size: 0.92rem; }
.rf-eg-row .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rf-eg-row:last-child .v { color: var(--action-deep); font-size: 1.6rem; }

/* --- how it works --------------------------------------------------------
   The reader's whole part is one email, so the email is the thing on the page.
   What we do afterwards runs beside it, numbered from two.
   -------------------------------------------------------------------------*/

.rf-how {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: 32px;
}

.rf-note-step {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}
.rf-note-step span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  font-size: 0.88rem;
}

/* A message, not a code block: the type is the page's own. */
.rf-mail {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px -26px rgba(43, 69, 95, 0.4);
}

.rf-mail-head { padding: 14px 20px; background: var(--bg-wash); border-bottom: 1px solid var(--line); }
.rf-mail-row { display: flex; gap: 12px; padding: 3px 0; font-size: 0.88rem; }
.rf-mail-row span { color: var(--ink-faint); min-width: 56px; flex: none; }
.rf-mail-row b { font-weight: 600; color: var(--ink); }

.rf-mail-body { padding: 18px 20px 20px; }
.rf-mail-body p { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.62; }
.rf-mail-body p:last-child { margin-bottom: 0; }

.rf-note-cap { margin: 14px 0 0; font-size: 0.88rem; color: var(--ink-faint); }

.rf-afters { list-style: none; margin: 0; padding: 0; }

.rf-after {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 22px;
  position: relative;
}
.rf-after:last-child { padding-bottom: 0; }
.rf-after:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 38px;
  bottom: 4px;
  width: 2px;
  background: var(--line);
}

.rf-after-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-wash);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.rf-after h3 { margin: 4px 0 5px; font-size: 1.02rem; }
.rf-after p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.6; }

/* --- who to introduce -----------------------------------------------------
   White on the section tint, which is where the contrast comes from. What
   separates the six is what they hire, so that is what the cards carry.
   -------------------------------------------------------------------------*/

.rf-fits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rf-fit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.rf-fit:hover {
  border-color: color-mix(in srgb, var(--action) 42%, var(--line));
  transform: translateY(-2px);
}
.rf-fit b { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.rf-fit span { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }

.rf-fit-roles {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rf-fit-roles li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.rf-fit-roles li::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: url("/assets/check-mark.svg") center / contain no-repeat;
}

.rf-roles { margin: 22px 0 0; max-width: 68ch; color: var(--ink-faint); font-size: 0.92rem; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1023px) {
  .rf-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .rf-calc { max-width: 520px; }
}

@media (max-width: 900px) {
  .rf-tiers { grid-template-columns: minmax(0, 1fr); }
  .rf-example { grid-template-columns: minmax(0, 1fr); }
  .rf-how { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .rf-fits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .rf-fits { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-fit { transition: none; }
  .rf-fit:hover { transform: none; }
}