@charset "UTF-8";
/* ==========================================================================
   REWARDS CLUB
   --------------------------------------------------------------------------
   Loaded only on this page (see inc/enqueue.php). The page was 888 words in one
   column that opened on a legal disclaimer; this gives each part of the
   programme its own shape so the page can be scanned rather than read.

   DESIGN NOTE — why the offer band is dark and nothing else is.
   The site's inner pages are light. Exactly one block here inverts: the join
   offer. It is the single thing the page exists to communicate, and one dark
   band in a light page is the strongest emphasis available without shouting.
   Everything after it stays on the light ground so the inversion keeps its
   value — invert twice and it means nothing.
   ========================================================================== */

.rc {
  --rc-brass: var(--sk-gold-500, #C9A227);
  --rc-brass-lite: #F0D480;
  --rc-navy: var(--sk-navy-900, #0B2036);
  --rc-line: rgba(11, 61, 104, 0.14);
}

.rc-eyebrow {
  margin: 0 0 0.4rem;
  color: var(--rc-brass-lite);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rc-section-title {
  margin: 0 0 0.5rem;
  color: var(--rc-navy);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.2;
}

.rc-section-lede {
  max-width: 64ch;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  color: var(--sk-text-muted, #56616E);
  font-size: 1.02rem;
  line-height: 1.65;
}

.rc > .xtra-custom-container > section { margin-block: clamp(2.5rem, 5vw, 4.5rem); }


/* ==========================================================================
   1. THE OFFER
   ========================================================================== */
.rc-offer {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--sk-radius-lg, 14px);
  background: var(--sk-grad-night, linear-gradient(160deg, #16354F 0%, #0B2036 100%));
  color: #fff;
}

@media (min-width: 62em) {
  .rc-offer { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
}

.rc-offer__title {
  margin: 0 0 0.6rem;
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1.15;
}

.rc-offer__intro p {
  margin: 0 0 0.7rem;
  color: #D7E0EA;            /* 10.9:1 on the navy ground */
  line-height: 1.65;
}

.rc-offer__note {
  color: var(--rc-brass-lite) !important;   /* beats the p rule above */
  font-weight: 600;
}

.rc-offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 34em) {
  .rc-offer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rc-offer__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: clamp(0.9rem, 2vw, 1.3rem);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--sk-radius-md, 10px);
  background: rgba(255, 255, 255, 0.05);
}

.rc-offer__amount {
  color: var(--rc-brass-lite);
  font-family: var(--sk-font-display, inherit);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
}

.rc-offer__label {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}

.rc-offer__detail {
  color: #AFBCC9;            /* 7.4:1 */
  font-size: 0.85rem;
  line-height: 1.45;
}


/* ==========================================================================
   2. CARDS  (currencies, perks, admin)
   ========================================================================== */
.rc-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 48em) {
  .rc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rc-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  border: 1px solid var(--rc-line);
  border-radius: var(--sk-radius-lg, 14px);
  background: rgba(255, 255, 255, 0.8);
}

.rc-card p {
  margin: 0 0 0.6rem;
  color: var(--sk-text-muted, #56616E);
  font-size: 0.95rem;
  line-height: 1.6;
}

.rc-card__title {
  margin: 0 0 0.5rem;
  color: var(--rc-navy);
  font-size: 1.15rem;
  line-height: 1.25;
}

/* The rate sits at the foot of every card, so three cards of different copy
   lengths still line their key fact up with each other. */
.rc-card__rate {
  margin-top: auto !important;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rc-line);
  color: var(--rc-navy) !important;
  font-size: 1rem !important;
}

.rc-card__link {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--sk-navy-700, #0B3D68);
  font-weight: 600;
  text-decoration: none;
}

.rc-card__link:hover,
.rc-card__link:focus-visible { text-decoration: underline; }

.rc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.14);
  color: #8A6D12;                 /* 4.9:1 on the tint — icons are 1.6px strokes */
}

.rc-icon svg { width: 24px; height: 24px; }

.rc-perk__value {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--rc-brass);
  font-family: var(--sk-font-display, inherit);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}


/* ==========================================================================
   3. RATE TABLE
   ========================================================================== */
.rc-rates {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 56em) {
  .rc-rates { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
}

.rc-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.rc-table th,
.rc-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rc-line);
  text-align: start;
}

.rc-table thead th {
  border-bottom-width: 2px;
  color: var(--sk-text-faint, #6B7684);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.rc-table tbody th {
  color: var(--rc-navy);
  font-size: 1.05rem;
  font-weight: 700;
}

.rc-table tbody td {
  color: var(--rc-brass);
  font-size: 1.05rem;
  font-weight: 700;
}

.rc-fineprint {
  color: var(--sk-text-faint, #6B7684);
  font-size: 0.85rem;
  line-height: 1.5;
}


/* ==========================================================================
   4. STEPS
   ========================================================================== */
.rc-steplist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  counter-reset: rc;
}

@media (min-width: 48em) {
  .rc-steplist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 76em) {
  .rc-steplist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rc-steplist li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--rc-line);
  border-radius: var(--sk-radius-md, 10px);
  background: rgba(255, 255, 255, 0.65);
}

.rc-step__n {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rc-navy);
  color: var(--rc-brass-lite);
  font-size: 0.85rem;
  font-weight: 700;
}

.rc-step__t {
  color: var(--sk-text, #2B3038);
  font-size: 0.95rem;
  line-height: 1.5;
}

.rc-check {
  max-width: 72ch;
  margin: 0;
  padding: 1rem 1.15rem;
  border-inline-start: 3px solid var(--rc-brass);
  border-radius: 0 var(--sk-radius-md, 10px) var(--sk-radius-md, 10px) 0;
  background: rgba(212, 175, 55, 0.08);
  color: var(--sk-text, #2B3038);
  font-size: 0.95rem;
  line-height: 1.6;
}


/* ==========================================================================
   5. FAQ — native <details>
   ========================================================================== */
.rc-faq__item {
  border-bottom: 1px solid var(--rc-line);
}

.rc-faq__q {
  position: relative;
  padding: 1rem 2.5rem 1rem 0;
  color: var(--rc-navy);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;          /* Firefox */
}

.rc-faq__q::-webkit-details-marker { display: none; }

/* A chevron built from a rotated square: no icon font, no SVG per row. */
.rc-faq__q::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.55rem;
  top: 1.45rem;
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid var(--rc-brass);
  border-block-end: 2px solid var(--rc-brass);
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.rc-faq__item[open] .rc-faq__q::after { transform: rotate(-135deg); }

.rc-faq__q:focus-visible {
  outline: 2px solid var(--rc-brass);
  outline-offset: 3px;
}

.rc-faq__a {
  padding: 0 2.5rem 1.1rem 0;
}

.rc-faq__a p {
  max-width: 72ch;
  margin: 0;
  color: var(--sk-text-muted, #56616E);
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .rc-faq__q::after { transition: none; }
}


/* ==========================================================================
   6. CTA + LEGAL
   ========================================================================== */
.rc-cta {
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--sk-radius-lg, 14px);
  background: var(--sk-grad-night, linear-gradient(160deg, #16354F 0%, #0B2036 100%));
  color: #fff;
  text-align: center;
}

.rc-cta__title {
  margin: 0 0 0.5rem;
  color: #fff;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
}

.rc-cta p {
  max-width: 58ch;
  margin-inline: auto;
  color: #D7E0EA;
  line-height: 1.65;
}

.rc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Small print, set small and quiet — but still 4.6:1, because "legal text is
   unreadable" is a real accessibility failure and not a design choice. */
.rc-legal {
  max-width: 90ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  color: #6B7684;
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: center;
}