/* Refer a friend (refer.html). Self-contained so it does not depend on
   Tailwind classes surviving the purged build. */
.refer-page { color: #0f172a; }
.rf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .rf-wrap { padding: 0 24px; } }
.rf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.refer-page svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Hero */
.rf-hero { padding: 56px 0 64px; background: radial-gradient(circle at 85% 10%, rgb(129 140 248 / .35), transparent 45%), linear-gradient(135deg, #312e81 0%, #4338ca 55%, #4f46e5 100%); color: #fff; }
.rf-hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .rf-hero { padding: 80px 0 88px; } .rf-hero-grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; } }
.rf-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c7d2fe; }
.rf-hero h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.rf-lead { margin: 18px 0 0; max-width: 34rem; font-size: 1.15rem; line-height: 1.6; color: #e0e7ff; }
.rf-hero-points { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.rf-hero-points li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.rf-hero-points svg { flex: 0 0 22px; width: 22px; height: 22px; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / .16); color: #a7f3d0; stroke-width: 3; }

/* Share card */
.rf-card { padding: 24px; border-radius: 24px; background: #fff; color: #0f172a; box-shadow: 0 30px 60px rgb(15 23 42 / .28); }
@media (min-width: 640px) { .rf-card { padding: 28px; } }
.rf-state { display: grid; gap: 14px; }
.rf-state[hidden] { display: none; }
.rf-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #eef2ff; color: #4338ca; }
.rf-card-icon svg { width: 24px; height: 24px; }
.rf-card-title { margin: 0; font-size: 1.15rem; font-weight: 800; }
.rf-muted { margin: 0; font-size: 14px; line-height: 1.55; color: #64748b; }
.rf-skeleton { height: 48px; border-radius: 12px; background: linear-gradient(90deg, #f1f5f9, #e2e8f0, #f1f5f9); background-size: 200% 100%; animation: rf-shimmer 1.4s ease-in-out infinite; }
@keyframes rf-shimmer { to { background-position: -200% 0; } }
.rf-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.rf-button:focus-visible, .rf-share:focus-visible, .rf-code:focus-visible, .rf-faq summary:focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }
.rf-button-primary { background: #4f46e5; color: #fff; }
.rf-button-primary:hover { background: #4338ca; color: #fff; }
.rf-button-secondary { border-color: #c7d2fe; background: #fff; color: #4338ca; }
.rf-button-secondary:hover { border-color: #818cf8; background: #f5f7ff; }
.rf-button-light { background: #fff; color: #312e81; }
.rf-button-light:hover { background: #eef2ff; color: #312e81; }
.rf-button.is-done { background: #059669; color: #fff; }
.rf-link-row { display: flex; gap: 8px; }
.rf-link { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; font-size: 15px; font-weight: 600; color: #0f172a; text-overflow: ellipsis; }
.rf-link:focus { outline: 3px solid #a5b4fc; outline-offset: 1px; border-color: #6366f1; }
.rf-copy { flex: 0 0 auto; min-width: 116px; }
.rf-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: #64748b; }
.rf-code { min-height: 36px; padding: 4px 12px; border: 1px dashed #a5b4fc; border-radius: 10px; background: #f5f7ff; font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: #312e81; cursor: pointer; }
.rf-code:hover { border-color: #6366f1; }
.rf-code.is-done { border-style: solid; border-color: #059669; background: #ecfdf5; color: #065f46; }
.rf-share-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.rf-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; color: #334155; text-decoration: none; cursor: pointer; }
.rf-share:hover { border-color: #a5b4fc; color: #4338ca; }
.rf-share[hidden] { display: none; }
.rf-share svg { width: 18px; height: 18px; flex: 0 0 18px; }
.rf-stats { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.rf-stats div { display: flex; align-items: baseline; gap: 10px; }
.rf-stats strong { font-size: 2rem; line-height: 1; font-weight: 800; color: #4338ca; }
.rf-stats span { font-size: 14px; font-weight: 600; color: #334155; }

/* Sections */
.rf-section { padding: 64px 0; }
.rf-section-alt { background: #fff; border-block: 1px solid #e2e8f0; }
.rf-h2 { margin: 0 0 28px; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; }
.rf-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 768px) { .rf-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.rf-steps li { position: relative; padding: 24px; border: 1px solid #e2e8f0; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.rf-step-number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #eef2ff; font-size: 17px; font-weight: 800; color: #4338ca; }
.rf-steps h3 { margin: 16px 0 6px; font-size: 1.15rem; font-weight: 800; }
.rf-steps p { margin: 0; line-height: 1.6; color: #475569; }
.rf-split { display: grid; gap: 16px; }
@media (min-width: 768px) { .rf-split { grid-template-columns: 1fr 1fr; gap: 24px; } }
.rf-panel { padding: 28px; border-radius: 20px; background: #f8fafc; border: 1px solid #e2e8f0; }
.rf-panel p { margin: 0; line-height: 1.6; color: #475569; }
.rf-panel-label { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #4338ca !important; }
.rf-panel-big { margin: 6px 0 8px !important; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.1; font-weight: 800; color: #0f172a !important; }
.rf-panel-accent { background: #eef2ff; border-color: #c7d2fe; }
.rf-two-col { display: grid; gap: 48px; }
@media (min-width: 960px) { .rf-two-col { grid-template-columns: 1fr 1fr; gap: 64px; } }
.rf-rules { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rf-rules li { position: relative; padding: 14px 16px 14px 44px; border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; line-height: 1.55; color: #334155; }
.rf-rules li::before { content: ""; position: absolute; left: 16px; top: 19px; width: 14px; height: 14px; border-radius: 999px; border: 3px solid #a5b4fc; }
.rf-faq { display: grid; gap: 10px; }
.rf-faq details { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.rf-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.rf-faq summary::-webkit-details-marker { display: none; }
.rf-faq summary::after { content: "+"; flex: 0 0 auto; font-size: 20px; font-weight: 600; color: #4338ca; transition: transform .15s ease; }
.rf-faq details[open] summary::after { transform: rotate(45deg); }
.rf-faq details p { margin: 0; padding: 0 16px 16px; line-height: 1.6; color: #475569; }

/* Closing call to action */
.rf-cta { padding: 0 0 72px; }
.rf-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: 32px; padding-inline: 28px; border-radius: 24px; background: linear-gradient(135deg, #312e81, #4f46e5); color: #fff; }
@media (min-width: 640px) { .rf-cta-inner { padding: 40px 48px; } }
.rf-cta h2 { margin: 0; font-size: 1.6rem; font-weight: 800; }
.rf-cta p { margin: 6px 0 0; max-width: 36rem; color: #e0e7ff; line-height: 1.6; }

@media (max-width: 479px) {
  .rf-link-row { flex-direction: column; }
  .rf-copy { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-skeleton { animation: none; }
  .rf-faq summary::after, .rf-button { transition: none; }
}