/* The sign-up offer around the main buttons (Growth Plan, 18 October 2026):
 * - .rl-results: the case-study results line under the main button, with its
 *   basis;
 * - .rl-card-note: the payment card line;
 * - .rl-offer: the full offer as a small tick list, once near the top (in
 *   .rl-offer-band, straight after the hero) and once at the final call to
 *   action;
 * - .rl-call: the phone number and its hours in one line (call-us.js adds
 *   "Lines open now" or leads with the call-back form);
 * - .rl-callback: the call-back form on the homepage and the contact page;
 * - .rl-story-quotes: the shops' quotes under the case study, one proof block;
 * plus small fits for the pages that use them. Loaded on the homepage, both
 * paid landing pages, the start, pricing, contact and book-a-demo pages. */

/* The case-study results under the main button. */
.rl-results {
  display: grid;
  gap: 0.2rem;
  max-width: 48ch;
  margin: 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--rl-color-orange-500, #F4AB4B);
  color: var(--rl-color-teal-900, #0F2D32);
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
}

.rl-results__figures {
  font-weight: 800;
}

.rl-results__basis {
  color: #4C5F64;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.45;
}

/* The payment card line, said early (free-trial advertising rules expect it). */
.rl-card-note {
  max-width: 54ch;
  margin: 0;
  color: #455C62;
  font-size: 0.86rem;
  line-height: 1.55;
}

.rl-card-note--centre {
  margin-inline: auto;
  text-align: center;
}

.rl-card-note--on-dark {
  color: #D5E0E2;
}

/* The full offer, as a small tick list. */
.rl-offer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--rl-color-teal-900, #0F2D32);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

.rl-offer li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.38rem;
}

.rl-offer li::before {
  content: "✓";
  content: "✓" / "";
  flex: 0 0 auto;
  color: #9A5B07;
  font-weight: 900;
}

.rl-offer--centre {
  justify-content: center;
  text-align: center;
}

.rl-offer--on-dark {
  color: #EAF1F2;
}

.rl-offer--on-dark li::before {
  color: #FFC36E;
}

/* On the homepage's orange closing section the tick needs the dark ink. */
.cta-section .rl-offer li::before {
  color: var(--rl-color-teal-900, #0F2D32);
}

/* The offer and the phone line, once near the top, straight after the hero. */
.rl-offer-band {
  padding-block: clamp(0.85rem, 2vw, 1.15rem);
  border-block: 1px solid color-mix(in srgb, var(--rl-border-soft, #EAD9C7) 80%, transparent);
  background: color-mix(in srgb, white 55%, transparent);
}

.rl-offer-band .container {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
}

/* Page paragraphs default to a shorter measure; the band's line is centred. */
.rl-offer-band .rl-call {
  max-width: none;
}

/* The phone number and its hours, in one line of text. */
.rl-call {
  margin: 0;
  color: #3B4F55;
  font-size: 0.88rem;
  line-height: 1.85;
}

.rl-call a {
  color: var(--rl-color-teal-900, #0F2D32);
  font-weight: 800;
  text-underline-offset: 0.2em;
}

.rl-call__number {
  white-space: nowrap;
}

.rl-call__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.2rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: #E1F3E8;
  color: #135C38;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 0.05em;
}

.rl-call__status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #1F8A50;
  box-shadow: 0 0 0 3px color-mix(in srgb, #1F8A50 22%, transparent);
}

.rl-call__status--closed {
  background: #F1ECE6;
  color: #4A5458;
}

.rl-call__status--closed::before {
  background: #8A9498;
  box-shadow: none;
}

/* "Call now" as a button: only in a page's final section. */
.rl-call a.rl-call__now,
.rl-call a.rl-call__now:visited {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  margin-block: 0.15rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--rl-color-teal-900, #0F2D32) 26%, white);
  border-radius: 999px;
  background: white;
  color: var(--rl-color-teal-900, #0F2D32);
  font-weight: 850;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(15, 45, 50, 0.1);
}

.rl-call a.rl-call__now:hover {
  border-color: var(--rl-color-teal-900, #0F2D32);
}

.rl-call--centre {
  text-align: center;
}

.rl-call--on-dark {
  color: #D5E0E2;
}

.rl-call--on-dark a {
  color: white;
}

.rl-call--on-dark .rl-call__status--closed {
  background: rgba(255, 255, 255, 0.12);
  color: #E3ECEE;
}

/* The landing pages colour every plain link in their dark panel white
 * (.paid-biz-final__action a:not(.btn)), so the white button needs this. */
.rl-call.rl-call--on-dark a.rl-call__now,
.rl-call.rl-call--on-dark a.rl-call__now:visited {
  border-color: white;
  color: var(--rl-color-teal-900, #0F2D32);
}

/* The call-back form on the homepage and the contact page (the landing pages
 * keep their own, in the dark final panel). */
.rl-callback {
  display: grid;
  gap: 0.75rem;
  scroll-margin-top: 6.5rem;
}

.rl-callback__title {
  margin: 0;
  color: #334A50;
  line-height: 1.5;
}

.rl-callback__title strong {
  color: var(--rl-color-teal-900, #0F2D32);
}

.rl-callback__fields {
  display: grid;
  gap: 0.7rem;
}

.rl-callback label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  color: var(--rl-color-teal-900, #0F2D32);
  font-size: 0.84rem;
  font-weight: 800;
}

.rl-callback input {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0 0.95rem;
  border: 1px solid var(--rl-border-strong, #D8BE9F);
  border-radius: 0.8rem;
  background: white;
  color: var(--rl-color-teal-900, #0F2D32);
  font: inherit;
  font-size: 1rem; /* 16px or more stops iOS zooming into the field */
}

.rl-callback input:focus-visible {
  outline: 3px solid var(--rl-color-orange-500, #F4AB4B);
  outline-offset: 2px;
}

.rl-callback .btn {
  width: 100%;
  min-height: 3rem;
}

.rl-callback .btn:disabled {
  opacity: 0.7;
}

.rl-callback__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rl-callback__status {
  margin: 0;
  color: var(--rl-color-teal-900, #0F2D32);
  font-weight: 700;
}

.rl-callback__status:empty {
  display: none;
}

.rl-callback__status[data-state="error"] {
  color: #9B2C1F;
}

.rl-callback__privacy {
  margin: 0;
  color: #4C5F64;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* The landing pages' own call-back form sits under the sticky header too. */
#callback {
  scroll-margin-top: 6.5rem;
}

/* The shops' quotes under the case study: one proof block. On the landing
 * pages the trade packs decide which quote a trade sees
 * (scripts/build-trade-packs.mjs fills them in); the general page shows both. */
.rl-story-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.85rem;
  margin-top: clamp(0.85rem, 2vw, 1.15rem);
}

.rl-story-quotes:not(:has(> .cs-quote:not([hidden]))) {
  display: none;
}

.rl-story-quotes .cs-quote {
  margin: 0;
  padding: 0.95rem 1.1rem 0.95rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--rl-color-teal-900, #0F2D32) 12%, white);
  border-left: 3px solid var(--rl-color-orange-500, #F4AB4B);
  border-radius: 0.95rem;
  background: color-mix(in srgb, white 94%, var(--rl-color-cream-200, #FFF0DE));
}

.rl-story-quotes .cs-quote blockquote {
  max-width: none;
  margin: 0;
  color: var(--rl-color-teal-900, #0F2D32);
  font-size: 1rem;
  font-style: italic;
  font-weight: 650;
  line-height: 1.45;
}

.rl-story-quotes .cs-quote figcaption {
  margin: 0.3rem 0 0;
  color: #4C5F64;
  font-size: 0.86rem;
  font-weight: 700;
}

/* The general quotes give way to the trade's own when a trade is chosen, and
 * a trade without a quote shows the case study alone. */
html[data-trade] [data-trade-generic] {
  display: none;
}

html[data-trade] .rl-story-quotes:not(:has(> [data-trade-only]:not([hidden]))) {
  display: none;
}

/* The organisations that have supported RewardLoop: what the logos mean. */
.rl-supporters-note {
  max-width: 60ch;
  margin: 0.9rem auto 0;
  color: #4C5F64;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}

/* Homepage hero: the main buttons, then the results and the card line. */
.page-home .hero__actions + .rl-results {
  margin-top: var(--rl-space-4, 1rem);
}

.page-home .hero .rl-card-note {
  margin-top: var(--rl-space-3, 0.75rem);
}

.page-home .cta-copy .rl-offer,
.page-home .cta-copy .rl-card-note,
.page-home .cta-copy .rl-call {
  margin-top: var(--rl-space-3, 0.75rem);
}

/* The homepage's last card is the call-back form, which "leave your number"
 * links point to, so it shows on phones too. */
.page-home .cta-grid--support .cta-question-card.cta-callback-card {
  display: grid;
  align-content: start;
}

.page-home .cta-callback-card .rl-callback p.rl-callback__title {
  font-weight: 600;
}

.page-home .cta-callback-card .rl-callback p.rl-callback__privacy {
  color: #3C5157;
  font-size: 0.78rem;
  font-weight: 600;
}

.page-home .cta-callback-card .rl-callback .btn {
  justify-self: stretch;
  margin-top: 0;
}


@media (min-width: 769px) and (max-width: 1024px) {
  .page-home .hero .rl-results,
  .page-home .hero .rl-card-note {
    margin-inline: auto;
  }
}

/* Under 1024px the hero becomes one column in a set order (card-story.css):
 * the buttons, then the results and the card line. */
@media (max-width: 1024px) {
  .page-home .hero__grid--card .rl-results {
    order: 6;
    margin-block: 0;
  }

  .page-home .hero__grid--card p.rl-card-note {
    order: 7;
    margin-block: 0;
  }
}

/* Landing page heroes: the button, the results and the card line only. */
.paid-biz-hero__action .rl-results,
.paid-cafe-hero__action .rl-results {
  color: var(--rl-color-teal-900, #0F2D32);
  font-size: 0.92rem;
  line-height: 1.45;
}

.paid-biz-hero__action .rl-card-note,
.paid-cafe-hero__action .rl-card-note {
  font-size: 0.86rem;
}

.paid-biz-associations .rl-supporters-note,
.paid-cafe-associations .rl-supporters-note {
  max-width: 60ch;
  margin: 1.1rem auto 0;
  color: #4C5F64;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
}

.paid-biz-footer__hours,
.paid-cafe-footer__hours {
  color: #53666B;
  font-size: 0.8rem;
  font-weight: 700;
}

.paid-biz-final__action .rl-offer,
.paid-cafe-final__action .rl-offer {
  max-width: 36rem;
}

/* The closing card line is one short sentence: room for one line. */
.paid-biz-final__action .rl-card-note,
.paid-cafe-final__action .rl-card-note,
.page-home .cta-copy .rl-card-note {
  max-width: 64ch;
}

@media (max-width: 980px) {
  .paid-biz-final__action .rl-offer,
  .paid-cafe-final__action .rl-offer {
    justify-content: flex-start;
    text-align: left;
  }

  .paid-biz-final__action .rl-call,
  .paid-cafe-final__action .rl-call {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .paid-biz-final__action .rl-offer,
  .paid-cafe-final__action .rl-offer {
    max-width: none;
    justify-content: center;
    text-align: center;
  }

  .paid-biz-final__action .rl-call,
  .paid-cafe-final__action .rl-call {
    text-align: center;
  }
}

/* Support page heroes (start, pricing). */
.hero .actions + .rl-results {
  max-width: 48ch;
  margin-top: 1rem;
  color: var(--rl-color-teal-900, #0F2D32);
  font-size: 0.92rem;
  line-height: 1.45;
}

.hero .rl-results + .rl-card-note,
.hero .actions + .rl-card-note {
  margin-top: 0.85rem;
}

/* The start page's "Already have a business account?" line keeps the small
 * style it had straight after the buttons. */
.page-start .hero .rl-card-note + p {
  max-width: 46ch;
  margin: 0.85rem 0 0;
  color: #3C535A;
  font-size: 0.89rem;
  line-height: 1.62;
}

/* The pricing hero's offer sits where its chips were. */
.page-pricing .hero .rl-offer {
  margin-bottom: 0.2rem;
}

.cta-band .rl-offer,
.cta-band .rl-card-note {
  max-width: 60ch;
}

.contact-hero-card .rl-call {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--rl-border-strong, #D8BE9F) 70%, white);
}

.contact-hero-card .rl-call + .form-note {
  margin-top: 0.75rem;
}

.contact-side-card .rl-callback {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, var(--rl-border-strong, #D8BE9F) 70%, white);
}

/* Book a demo: a plain link to the same calendar beside "Load booking
 * calendar", for anyone who'd rather not load the embedded one. */
.booking-embed-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.booking-embed-state__panel .booking-embed-state__actions [data-booking-load] {
  margin-top: 0;
}

.booking-embed-state__actions .btn {
  height: auto;
  min-height: 3rem;
  padding-block: 0.7rem;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 560px) {
  .booking-embed-state__actions .btn {
    flex: 1 1 100%;
  }
}

/* One direct calendar button at a time: the one beside "Load booking
 * calendar" until the embedded calendar has loaded (and always without
 * JavaScript), then the one under the calendar. */
.booking-card[data-booking-ready]:not(.is-booking-loaded) > .booking-actions {
  display: none;
}