/* refer.css — /refer (client referral program) and /welcome (referred visitor),
   11 Nov 2026. Same visual language as /check-up: dark hero carrying the offer
   and a white card holding the form; light band below for how-it-works + FAQ. */
body { margin: 0; background: var(--ink-50); color: var(--ink-900); font-family: var(--font-sans); }
/* kit.css paints a fixed star field and a fixed green-line field over the whole page (z-index 0).
   On these pages they ran across the light band above the text, so they are switched off here;
   the hero keeps its own, calmer field. */
body::before, body::after { content: none !important; display: none !important; }
.rf-band, .rf-footband { position: relative; z-index: 1; }
.rf-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.rf-top { position: relative; z-index: 2; }
.rf-top .rf-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.rf-top img { height: 34px; width: auto; display: block; }
.rf-top a.rf-tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 500 14px var(--font-mono); letter-spacing: 0.02em; padding: 9px 14px; border: 1px solid rgba(255,255,255,0.22); border-radius: 10px; }
.rf-top a.rf-tel:hover { border-color: rgba(255,255,255,0.55); }
.rf-top svg { width: 16px; height: 16px; }

/* Clean dark header: no star field or line art behind the text (readability). */
.rf-hero { position: relative; color: #fff; overflow: hidden; padding-bottom: 64px; background: radial-gradient(900px 420px at 88% -10%, rgba(46,49,146,0.55), transparent 65%), linear-gradient(180deg, #0B0D1F 0%, #111437 100%); }

.rf-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-lime); }
.rf-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--brand-lime); box-shadow: 0 0 0 4px rgba(141,198,63,0.18); }
.rf-hero h1 { font: 600 clamp(34px, 4.4vw, 52px)/1.06 var(--font-display); letter-spacing: -0.025em; margin: 0 0 24px; }
.rf-hero h1 em { font-style: normal; color: var(--brand-lime); }
.rf-lede { font: 400 18px/1.65 var(--font-sans); color: rgba(255,255,255,0.82); margin: 0; }
/* Frosted panel behind the intro copy so the background field never runs through the text. */
.rf-glass { max-width: 560px; padding: 24px 26px; border-radius: 16px; background: rgba(11,13,31,0.55); border: 1px solid rgba(255,255,255,0.10); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); box-shadow: 0 20px 50px -24px rgba(0,0,0,0.6); }
/* Highlighted continuation of the intro sentence (replaces the old fact pills). */
.rf-hl { color: #fff; font-weight: 600; background: linear-gradient(transparent 60%, rgba(141,198,63,0.38) 60%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; }

.rf-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; padding: 0; list-style: none; }
.rf-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); font: 500 14px var(--font-sans); color: #fff; }
.rf-facts svg { width: 16px; height: 16px; color: var(--brand-lime); }

.rf-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: s; max-width: 540px; }
.rf-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.rf-steps li::before { counter-increment: s; content: "0" counter(s); font: 500 12px/34px var(--font-mono); text-align: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); }
.rf-steps strong { display: block; font: 600 16px var(--font-sans); margin: 6px 0 3px; }
.rf-steps span { font: 400 14px/1.55 var(--font-sans); color: rgba(255,255,255,0.68); }

/* Card + tabs */
.rf-card { background: #fff; color: var(--ink-900); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); overflow: hidden; }
.rf-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ink-100); }
.rf-tab { appearance: none; border: 0; background: var(--ink-50); padding: 16px 12px; font: 600 15px var(--font-sans); color: var(--ink-600); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-bottom: 3px solid transparent; }
.rf-tab svg { width: 17px; height: 17px; }
.rf-tab[aria-selected="true"] { background: #fff; color: var(--brand-indigo); border-bottom-color: var(--brand-lime); }
.rf-tab:focus-visible { outline: 2px solid var(--brand-indigo); outline-offset: -4px; }
.rf-pane { padding: 22px 24px 24px; }
.rf-pane[hidden] { display: none; }
.rf-pane__intro { margin: 0 0 18px; font: 400 14px/1.55 var(--font-sans); color: var(--ink-600); }

/* Form */
.rf-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.rf-form legend { font: 600 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 10px; padding: 0; }
.rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rf-field { display: grid; gap: 6px; margin-bottom: 12px; }
.rf-field label { font: 600 13px var(--font-sans); color: var(--ink-800); }
.rf-field label small { font-weight: 400; color: var(--ink-500); }
.rf-field input, .rf-field textarea, .rf-select { font: 400 15px var(--font-sans); color: var(--ink-900); padding: 11px 12px; border: 1px solid var(--ink-200); border-radius: 10px; background: #fff; width: 100%; box-sizing: border-box; }
.rf-field textarea { min-height: 76px; resize: vertical; }
.rf-field input:focus, .rf-field textarea:focus, .rf-select:focus { outline: 2px solid rgba(46,49,146,0.35); border-color: var(--brand-indigo); }
.rf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.rf-chip { appearance: none; border: 1px solid var(--ink-200); background: #fff; border-radius: 999px; padding: 8px 13px; font: 500 13.5px var(--font-sans); color: var(--ink-700); cursor: pointer; }
.rf-chip[aria-pressed="true"] { background: rgba(46,49,146,0.08); border-color: var(--brand-indigo); color: var(--brand-indigo); }
.rf-check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font: 400 14px/1.5 var(--font-sans); color: var(--ink-700); margin: 4px 0 14px; }
.rf-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand-indigo); }
.rf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rf-ts { min-height: 66px; margin: 4px 0 12px; }
.rf-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border: 0; border-radius: 10px; font: 600 16px var(--font-sans); background: var(--brand-lime); color: var(--ink-900); cursor: pointer; }
.rf-submit:disabled { opacity: 0.6; cursor: progress; }
.rf-submit svg { width: 17px; height: 17px; }
.rf-err { margin: 10px 0 0; font: 500 14px/1.5 var(--font-sans); color: #B42318; }
.rf-err:empty { display: none; }
.rf-fine { margin: 12px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--ink-500); }
.rf-fine a { color: var(--brand-indigo); }

/* Result panels */
.rf-done { padding: 4px 0 0; }
.rf-done h3 { font: 600 20px/1.25 var(--font-display); margin: 0 0 8px; }
.rf-done p { font: 400 15px/1.55 var(--font-sans); color: var(--ink-700); margin: 0 0 14px; }
.rf-link { display: flex; gap: 8px; align-items: stretch; margin: 0 0 14px; }
.rf-link output, .rf-link input { flex: 1; min-width: 0; font: 500 15px var(--font-mono); padding: 12px; border: 1px solid var(--ink-200); border-radius: 10px; background: var(--ink-50); color: var(--brand-indigo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-btn2 { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 15px; border-radius: 10px; border: 1px solid var(--ink-200); background: #fff; color: var(--ink-900); font: 600 14px var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.rf-btn2:hover { border-color: var(--brand-indigo); color: var(--brand-indigo); }
.rf-btn2 svg { width: 16px; height: 16px; }
.rf-share { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.rf-msg { width: 100%; box-sizing: border-box; min-height: 104px; font: 400 14px/1.55 var(--font-sans); padding: 12px; border: 1px solid var(--ink-200); border-radius: 10px; color: var(--ink-800); resize: vertical; }
.rf-copied { font: 500 13px var(--font-sans); color: #2F7A12; margin-left: 4px; }

.rf-card__foot { padding: 14px 24px 18px; border-top: 1px solid var(--ink-100); font: 400 13px/1.5 var(--font-sans); color: var(--ink-600); }
.rf-card__foot a { color: var(--brand-indigo); font-weight: 600; text-decoration: none; }

/* Light band */
.rf-band { padding: 76px 0 84px; }
.rf-band__head { max-width: 680px; margin-bottom: 36px; }
.rf-band__head .rf-eyebrow { color: var(--brand-indigo); }
.rf-band__head .rf-eyebrow::before { background: var(--brand-indigo); box-shadow: 0 0 0 4px rgba(46,49,146,0.14); }
.rf-band h2 { font: 600 clamp(26px, 3vw, 34px)/1.15 var(--font-display); letter-spacing: -0.02em; margin: 14px 0 10px; }
.rf-band__head p { font: 400 16px/1.6 var(--font-sans); color: var(--ink-600); margin: 0; }
.rf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 56px; padding: 0; list-style: none; }
.rf-tiles li { background: #fff; border: 1px solid var(--ink-100); border-radius: 14px; padding: 20px 18px 22px; }
.rf-tiles .ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(46,49,146,0.08); color: var(--brand-indigo); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.rf-tiles .ic svg { width: 20px; height: 20px; }
.rf-tiles strong { display: block; font: 600 16px var(--font-sans); margin-bottom: 6px; }
.rf-tiles span { font: 400 14px/1.5 var(--font-sans); color: var(--ink-600); }
.rf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.rf-panel { background: #fff; border: 1px solid var(--ink-200); border-top: 4px solid var(--brand-indigo); border-radius: 16px; padding: 0 28px 26px; box-shadow: 0 1px 2px rgba(11,13,31,0.05), 0 18px 40px -22px rgba(11,13,31,0.28); }
.rf-panel h3 { font: 600 20px/1.25 var(--font-display); margin: 0 -28px 18px; padding: 18px 28px; letter-spacing: -0.01em; background: var(--ink-50); border-bottom: 1px solid var(--ink-200); border-radius: 12px 12px 0 0; }
.rf-faq dt { font: 600 15px var(--font-sans); color: var(--ink-900); margin: 0 0 4px; }
.rf-faq dt:not(:first-child) { padding-top: 16px; border-top: 1px solid var(--ink-100); }
.rf-faq dd { margin: 0 0 16px; font: 400 15px/1.55 var(--font-sans); color: var(--ink-600); }
.rf-faq dd:last-child { margin-bottom: 0; }
.rf-terms { margin: 0; padding: 0 0 0 18px; display: grid; gap: 12px; font: 400 14px/1.55 var(--font-sans); color: var(--ink-600); }
.rf-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 28px; border-radius: 16px; background: var(--brand-indigo-deep); color: #fff; }
.rf-cta p { margin: 0; font: 600 18px/1.35 var(--font-display); }
.rf-cta p small { display: block; font: 400 14px var(--font-sans); color: rgba(255,255,255,0.7); margin-top: 4px; }
.rf-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 10px; font: 600 15px var(--font-sans); text-decoration: none; background: var(--brand-lime); color: var(--ink-900); transition: transform 180ms; }
.rf-btn:hover { transform: translateY(-1px); }
.rf-btn svg { width: 16px; height: 16px; }
.rf-footband { background: var(--ink-anchor, #0B0D1F); }
.rf-footband .as-minifoot { margin: 0 auto; }

@media (max-width: 1040px) {
  .rf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rf-wrap { padding: 0 16px; }
  .rf-top img { height: 28px; }
  .rf-top a.rf-tel span { display: none; }
  .rf-hero { padding-bottom: 48px; }
  .rf-lede { font-size: 16px; }
  .rf-glass { padding: 18px 18px; }
  .rf-panel { padding: 0 20px 22px; }
  .rf-panel h3 { margin: 0 -20px 16px; padding: 16px 20px; }
  .rf-pane { padding: 18px 16px 20px; }
  .rf-row { grid-template-columns: 1fr; gap: 0; }
  .rf-tiles { grid-template-columns: 1fr; }
  .rf-split { grid-template-columns: 1fr; }
  .rf-band { padding: 56px 0 64px; }
  .rf-link { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .rf-btn:hover { transform: none; } }

/* ---- Horizontal header: copy left, two big choices right (14 Nov rework) ---- */
.rf-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 36px; position: relative; z-index: 1; }
.rf-hero h1 { font-size: clamp(32px, 3.8vw, 48px); }
.rf-actions { display: grid; gap: 14px; }
.rf-choice { appearance: none; display: grid; grid-template-columns: 48px 1fr 20px; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; border: 0; border-radius: 16px; background: #fff; color: var(--ink-900); text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 24px 60px -28px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06); transition: transform 160ms, box-shadow 160ms; font-family: var(--font-sans); }
.rf-choice:hover { transform: translateY(-2px); box-shadow: 0 30px 70px -28px rgba(0,0,0,0.8), 0 0 0 2px var(--brand-lime); }
.rf-choice:focus-visible { outline: 3px solid var(--brand-lime); outline-offset: 3px; }
.rf-choice__ic { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--brand-lime); color: var(--ink-900); }
.rf-choice--alt .rf-choice__ic { background: rgba(46,49,146,0.10); color: var(--brand-indigo); }
.rf-choice__ic svg { width: 22px; height: 22px; }
.rf-choice__txt strong { display: block; font: 600 18px/1.25 var(--font-display); letter-spacing: -0.01em; }
.rf-choice__txt small { display: block; margin-top: 3px; font: 400 14px/1.45 var(--font-sans); color: var(--ink-600); }
.rf-choice__go { width: 20px; height: 20px; color: var(--ink-400); }
.rf-actions__note { margin: 4px 2px 0; font: 400 14px/1.5 var(--font-sans); color: rgba(255,255,255,0.7); }
.rf-actions__note a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); }
.rf-glass { max-width: none; }
button.rf-btn { border: 0; cursor: pointer; }
.rf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- The form opens as a panel pulled up into view (sheet on phones) ---- */
.rf-dialog { padding: 0; border: 0; background: transparent; width: min(640px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); overflow: visible; }
.rf-dialog::backdrop { background: rgba(11,13,31,0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rf-dialog[open] { animation: rf-pull-up 280ms cubic-bezier(.2,.8,.2,1); }
.rf-dialog[open]::backdrop { animation: rf-fade 200ms ease-out; }
.rf-dialog .rf-card { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.rf-dialog__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 22px; background: var(--ink-anchor, #0B0D1F); color: #fff; font: 600 15px var(--font-sans); }
.rf-close { appearance: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.22); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rf-close:hover { border-color: rgba(255,255,255,0.55); }
.rf-close svg { width: 18px; height: 18px; }
@keyframes rf-pull-up { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rf-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 960px) {
  .rf-head { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; }
}
@media (max-width: 640px) {
  .rf-hero { padding-bottom: 40px; }
  .rf-choice { padding: 16px; grid-template-columns: 42px 1fr 18px; gap: 12px; }
  .rf-choice__ic { width: 42px; height: 42px; }
  .rf-choice__txt strong { font-size: 16px; }
  .rf-dialog { width: 100vw; margin: auto 0 0; max-height: 94dvh; }
  .rf-dialog .rf-card { border-radius: 18px 18px 0 0; max-height: 94dvh; }
  @keyframes rf-pull-up { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .rf-dialog[open], .rf-dialog[open]::backdrop { animation: none; } .rf-choice:hover { transform: none; } }

/* ---- Stars back in the header (no line art), and the intro on a white card ---- */
.rf-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 25px 35px, rgba(255,255,255,.85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 160px 120px, rgba(255,255,255,.45) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 320px 60px, rgba(255,255,255,.8) 0 1.3px, transparent 2px),
    radial-gradient(circle at 420px 210px, rgba(255,255,255,.4) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 90px 300px, rgba(255,255,255,.65) 0 1px, transparent 1.6px),
    radial-gradient(circle at 260px 380px, rgba(255,255,255,.5) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 370px 330px, rgba(255,255,255,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 130px 220px, rgba(141,198,63,.55) 0 1px, transparent 1.6px);
  background-size: 480px 460px, 520px 500px, 480px 460px, 560px 520px, 480px 460px, 520px 500px, 500px 540px, 540px 480px;
  background-repeat: repeat; }
.rf-top, .rf-head { position: relative; z-index: 1; }
.rf-top { z-index: 2; }
.rf-glass { background: #fff; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 24px 60px -28px rgba(0,0,0,0.7); }
.rf-glass .rf-lede { color: var(--ink-700); }
.rf-glass .rf-hl { color: var(--ink-900); background: linear-gradient(transparent 58%, rgba(141,198,63,0.45) 58%); }

/* ---- Reward cards (original illustrations; no third-party logos) ---- */
.rf-reward { position: relative; height: 190px; margin: 0 0 6px; }
.rf-gc { position: absolute; top: 18px; left: 50%; width: 260px; height: 160px; margin-left: -130px; border-radius: 14px; padding: 16px 18px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; color: #fff; box-shadow: 0 22px 50px -18px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(255,255,255,0.14); font-family: var(--font-sans); }
.rf-gc--1 { background: radial-gradient(120% 140% at 0% 0%, #a6d75e 0%, #6fa52e 55%, #4c7a1c 100%); color: #0B0D1F; transform: translateX(-74px) rotate(-9deg); z-index: 3; }
.rf-gc--2 { background: linear-gradient(135deg, #3B4FBF 0%, #2E3192 55%, #1E2064 100%); transform: translateY(-10px) rotate(1deg); z-index: 2; }
.rf-gc--3 { background: linear-gradient(135deg, #2a2d4f 0%, #14163a 100%); transform: translateX(78px) rotate(10deg); z-index: 1; }
.rf-gc__top { display: flex; align-items: center; justify-content: space-between; }
.rf-gc__top svg { width: 22px; height: 22px; opacity: 0.9; }
.rf-gc__nfc { transform: rotate(90deg); }
.rf-gc__brand { font: 600 12px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.rf-gc__chip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #f3d98b, #c9a24b); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.rf-gc__name { font: 600 20px/1.1 var(--font-display); letter-spacing: -0.01em; }
.rf-gc__num { font: 500 12px var(--font-mono); letter-spacing: 0.14em; opacity: 0.8; }
.rf-reward__cap { margin: 0 0 6px; text-align: center; font: 400 14.5px/1.5 var(--font-sans); color: rgba(255,255,255,0.8); }
.rf-reward__cap strong { color: var(--brand-lime); font-weight: 600; }
@media (max-width: 640px) {
  .rf-reward { height: 158px; }
  .rf-gc { width: 200px; height: 124px; margin-left: -100px; padding: 12px 14px; top: 14px; border-radius: 12px; }
  .rf-gc--1 { transform: translateX(-52px) rotate(-8deg); }
  .rf-gc--3 { transform: translateX(56px) rotate(9deg); }
  .rf-gc__name { font-size: 16px; }
  .rf-gc__num, .rf-gc__brand { font-size: 10px; }
  .rf-gc__chip { width: 30px; height: 22px; }
  .rf-gc__top svg { width: 18px; height: 18px; }
}
/* second, denser star layer */
.rf-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 60px 80px, rgba(255,255,255,.55) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 210px 40px, rgba(255,255,255,.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 300px 170px, rgba(255,255,255,.35) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 40px 190px, rgba(255,255,255,.6) 0 1px, transparent 1.6px),
    radial-gradient(circle at 190px 260px, rgba(255,255,255,.45) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 330px 280px, rgba(255,255,255,.75) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 110px 140px, rgba(255,255,255,.3) 0 0.7px, transparent 1.3px),
    radial-gradient(circle at 250px 320px, rgba(255,255,255,.55) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 360px 100px, rgba(255,255,255,.4) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 20px 340px, rgba(255,255,255,.65) 0 1px, transparent 1.6px);
  background-size: 380px 360px; background-repeat: repeat; opacity: .9; }
/* Real card images (supplied by AssurITy) replace the drawn front cards */
.rf-gc--img { padding: 0; height: auto; aspect-ratio: 640 / 405; object-fit: cover; background: none; display: block; border-radius: 14px; box-shadow: 0 22px 50px -18px rgba(0,0,0,0.75); }
.rf-gc--img.rf-gc--1 { color: inherit; }
@media (max-width: 640px) { .rf-gc--img { height: auto; border-radius: 10px; } }

/* ---- Intro copy on the dark header, no box (replaces .rf-glass) ---- */
.rf-intro { position: relative; max-width: 600px; }
/* soft shade behind the copy so the stars never compete with the text */
.rf-intro::before { content: ""; position: absolute; inset: -28px -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(11,13,31,0.92), rgba(11,13,31,0.65) 60%, rgba(11,13,31,0) 100%); }
.rf-intro p { margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.rf-intro__lead { font: 500 20px/1.5 var(--font-sans); color: #fff; }
.rf-intro__body { margin-top: 14px !important; font: 400 17px/1.65 var(--font-sans); color: rgba(255,255,255,0.8); }
.rf-intro__thanks { margin-top: 20px !important; padding: 4px 0 4px 18px; border-left: 3px solid var(--brand-lime); font: 400 17px/1.65 var(--font-sans); color: rgba(255,255,255,0.86); }
.rf-intro__thanks strong { color: var(--brand-lime); font-weight: 600; }
.rf-head .rf-copy { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .rf-intro__lead { font-size: 18px; }
  .rf-intro__body, .rf-intro__thanks { font-size: 16px; }
  .rf-intro::before { inset: -16px -16px; }
}
/* Bolder outline on the header phone number (Nov 12) */
.rf-top a.rf-tel { border: 2px solid rgba(255,255,255,0.75); font-weight: 600; }
.rf-top a.rf-tel:hover { border-color: var(--brand-lime); }
.rf-reward { margin-bottom: 14px; }

/* Design-system field: off-white page, lighter white for cards (Nov 12) */
body{background:#DCDFE9!important}
.rf-band{background:#DCDFE9!important}
.rf-tiles li,.rf-panel{background:rgba(255,255,255,.9)!important;border:0!important;box-shadow:0 1px 2px rgba(11,13,31,.05),0 12px 26px -16px rgba(11,13,31,.22)}
.rf-panel h3{background:transparent!important}