/* ============================================================
   REFERRALS — the programme, as an agreement

   Every other page is selling something. This one is offering a
   deal, so it reads like terms rather than a pitch: the rate first
   and enormous, the reasoning beside it in small type, and a rules
   block that looks like a rules block instead of being softened
   into marketing copy.

   Chartreuse, which is the one part of the spectrum the other
   seven divisions left alone.
   ============================================================ */

html { background: #0a0c06; }
main > section:not(.hero) { background: rgba(10, 12, 6, 0.91); }
.foot { background: rgba(10, 12, 6, 0.93); }

.refhero::before {
  background: radial-gradient(70% 70% at 30% 45%, rgba(181, 217, 79, 0.09), transparent 70%);
}
.refhero .hero__h1 i { color: var(--accent); }
.refhero .hero__note {
  border-top: 1px solid rgba(181, 217, 79, 0.22);
  padding-top: 1.1rem;
}

/* ---------- the bands ---------- */

.bands {
  width: min(76rem - var(--pad) * 2, 100% - var(--pad) * 2);
  margin: 3.5rem auto 0;
  border: 1px solid var(--line);
}

.band {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0 1.6rem;
  padding: 1.4rem clamp(1rem, 2.5vw, 1.8rem);
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
.band:last-child { border-bottom: 0; }

/* The number is the message, so it gets the display face and the size. */
.band__rate {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 0.95;
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.band__body h3 {
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
}
.band__basis {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-top: 0.3rem;
}
.band__why {
  color: var(--mute);
  font-size: 0.86rem;
  line-height: 1.6;
  margin-top: 0.6rem;
  max-width: 44rem;
}

.bandnote {
  max-width: 44rem;
  margin: 2rem 0 0;
  padding: 1.2rem 1.4rem;
  border-left: 2px solid var(--accent);
  background: rgba(181, 217, 79, 0.05);
  color: var(--mute);
  font-size: 0.9rem;
  line-height: 1.65;
}
.bandnote b { color: var(--white); font-weight: 500; }

/* ---------- calculator ---------- */

.calc {
  width: min(76rem - var(--pad) * 2, 100% - var(--pad) * 2);
  margin: 3.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.calc__in, .calc__out { background: #0a0c06; padding: clamp(1.4rem, 3vw, 2.2rem); min-width: 0; }

.calc__lab {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.7rem;
}
.calc__lab b { color: var(--accent); font-weight: 500; }

.calc__sel {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: #060803;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--white);
  font: 400 0.92rem var(--sans);
  margin-bottom: 1.6rem;
}
.calc__sel:focus-visible { border-color: var(--accent); }

.calc__range {
  width: 100%;
  accent-color: var(--accent);
  margin: 0.2rem 0 0.6rem;
}
.calc__hint { color: var(--dim); font-size: 0.75rem; line-height: 1.5; }

.calc__out {
  background: radial-gradient(90% 70% at 50% 0%, rgba(181, 217, 79, 0.1), transparent 65%), #0a0c06;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.calc__k {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.calc__big {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 4.6rem);
  line-height: 0.95;
  color: var(--white);
  margin: 0.6rem 0 0.9rem;
  font-variant-numeric: tabular-nums;
}
.calc__work {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--accent);
  word-break: break-word;
}
.calc__band {
  color: var(--mute);
  font-size: 0.82rem;
  line-height: 1.6;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
}

/* ---------- link generator ---------- */

.linkgen {
  width: min(60rem - var(--pad) * 2, 100% - var(--pad) * 2);
  margin: 3.5rem auto 0;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid rgba(181, 217, 79, 0.28);
  border-radius: 12px;
  background: rgba(181, 217, 79, 0.04);
}
.linkgen__in { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.linkout { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(181, 217, 79, 0.22); }
.linkout__k {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.5rem;
}
.linkout__code {
  font-family: var(--mono);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 1.2rem;
  word-break: break-all;
}
.linkout__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.linkout__row input {
  flex: 1;
  min-width: 12rem;
  padding: 0.7rem 0.9rem;
  background: #060803;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--white);
  font: 400 0.82rem var(--mono);
}
.linkout__note { color: var(--dim); font-size: 0.76rem; line-height: 1.55; margin-top: 0.9rem; }
.linkout__note code { color: var(--accent); font-size: 0.72rem; }

/* ---------- registration ---------- */

.refreg {
  width: min(60rem - var(--pad) * 2, 100% - var(--pad) * 2);
  margin: 1rem auto 0;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
}
.refreg__h {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.refreg .ckfields { margin-top: 1rem; }
.refreg .btn { margin-top: 1.4rem; }
.refreg__note { color: var(--dim); font-size: 0.78rem; line-height: 1.6; margin-top: 0.9rem; }
.refreg__note em { color: var(--mute); font-style: italic; }

/* ---------- rules ---------- */

.rules {
  width: min(76rem - var(--pad) * 2, 100% - var(--pad) * 2);
  margin: 3.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.rule { background: #0a0c06; padding: 1.3rem; }
.rule__k {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.rule__v { color: var(--accent); font-size: 1.05rem; font-weight: 500; margin-top: 0.5rem; line-height: 1.25; }
.rule__d { color: var(--mute); font-size: 0.8rem; line-height: 1.6; margin-top: 0.5rem; }

/* The limits, stated in the same weight as the offer rather than in a
   footnote — a referral programme that oversells its own tracking is one
   that produces arguments about money later. */
.rules__honest {
  max-width: 46rem;
  margin: 2rem 0 0;
  padding: 1.4rem 1.6rem;
  border: 1px dashed rgba(181, 217, 79, 0.35);
  border-radius: 10px;
}
.rules__hk {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.8rem;
}
.rules__honest p { color: var(--mute); font-size: 0.86rem; line-height: 1.65; }
.rules__honest p + p { margin-top: 0.8rem; }

@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .band { grid-template-columns: 1fr; gap: 0.4rem; }
  .band__rate { text-align: left; }
  .linkgen__in { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
}