/**
 * Fund4Founders — Join / Role Landing Page Styles
 * css/join-pages.css
 *
 * Shared styles for all join-*.html role landing pages.
 * Extracted from per-page <style> blocks — single source of truth.
 * All values use CSS variables from f4f-theme.css.
 */


/* ── Role Landing Page Styles ── */
section.rl-hero {
  padding: 40px 32px 80px;
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(ellipse 75% 60% at 50% -10%, #1A4A9A55 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 82% 40%, #4A9EF018 0%, transparent 55%),
    var(--navy-deep);
}
.rl-hero-grid {
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#4A9EF009 1px,transparent 1px),linear-gradient(90deg,#4A9EF009 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 0%,transparent 100%);
}
.rl-breadcrumb {
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;color:var(--text-dim);margin-bottom:24px;
}
.rl-breadcrumb a {color:var(--text-dim);}
.rl-breadcrumb a:hover {color:#4A9EF0;}
.rl-breadcrumb-sep {opacity:0.4;}
.rl-hero-badge {
  display:inline-flex;align-items:center;gap:8px;
  background:#1A4A9A33;border:1px solid #4A9EF044;
  border-radius:999px;padding:6px 20px;
  font-size:14px;font-weight:700;letter-spacing:2px;
  color:#4A9EF0;text-transform:uppercase;margin-bottom:24px;
}
.rl-hero-badge::before {
  content:'';width:7px;height:7px;border-radius:50%;
  background:#4A9EF0;animation:pulse 2s infinite;
}
.rl-hero h1 {
  font-size:clamp(40px,6vw,76px);font-weight:600;line-height:1.08;
  margin-bottom:20px;
}
.rl-hero h1 span {color:#4A9EF0;font-style:italic;}
.rl-hero-sub {
  font-size:18px;font-weight:400;color:var(--text-sec);
  max-width:580px;margin:0 auto 36px;line-height:1.75;
}
.rl-spots-wrap {
  display:inline-flex;align-items:center;gap:14px;
  background:rgba(16,36,24,0.7);backdrop-filter:blur(10px);
  border:1px solid #4A9EF022;border-radius:12px;
  padding:14px 24px;margin-bottom:36px;
}
.rl-spots-bar {width:140px;height:6px;background:rgba(255,255,255,0.07);border-radius:999px;overflow:hidden;}
.rl-spots-fill {height:100%;width:38%;border-radius:999px;background:linear-gradient(90deg,#1A4A9A,#4A9EF0);}
.rl-spots-text {font-size:14px;color:var(--text-sec);}
.rl-spots-text strong {color:var(--text-primary);}
.rl-hero-cta {display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* Intro discount */
.rl-intro-banner {
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  background:#1A4A9A22;border:1px solid #4A9EF033;
  border-radius:12px;padding:12px 24px;margin-bottom:32px;
}
.rl-intro-pill {
  font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  background:#4A9EF0;color:#050E1A;padding:4px 12px;border-radius:999px;white-space:nowrap;
}
.rl-intro-text {font-size:14px;color:var(--text-sec);}
.rl-intro-text strong {color:#4A9EF0;}
.rl-intro-text s {color:var(--text-dim);}

/* Who section */
.rl-who {padding:80px 32px;}
.rl-who-inner {max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.rl-who-label {font-size:14px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#4A9EF0;margin-bottom:14px;}
.rl-who h2 {margin-bottom:20px;}
.rl-who p {font-size:16px;line-height:1.75;color:var(--text-sec);}
.rl-who-card {
  background:var(--surface-2);border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-lg);padding:32px;
  border-top:3px solid #4A9EF0;
}
.rl-badge-display {
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#1A4A9A,#4A9EF0);
  color:#050E1A;padding:10px 20px;
  border-radius:999px;font-size:14px;font-weight:700;
  margin-bottom:20px;
}
.rl-who-stat-row {display:flex;gap:0;margin-top:20px;border:1px solid rgba(255,255,255,0.07);border-radius:10px;overflow:hidden;}
.rl-who-stat {flex:1;padding:16px;text-align:center;border-right:1px solid rgba(255,255,255,0.07);}
.rl-who-stat:last-child {border-right:none;}
.rl-who-stat-val {font-family:Arial, sans-serif;font-size:28px;font-weight:600;color:var(--text-primary);line-height:1;}
.rl-who-stat-val span {color:#4A9EF0;}
.rl-who-stat-lbl {font-size:14px; font-weight: 600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);margin-top:4px;}

/* Benefits */
.rl-benefits {padding:80px 32px;background:rgba(13,32,64,0.4);border-top:1px solid rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.04);}
.rl-benefits-inner {max-width:900px;margin:0 auto;}
.rl-benefit {display:flex;gap:24px;padding:32px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.rl-benefit:last-child {border-bottom:none;}
.rl-benefit-num {
  font-family:Arial, sans-serif;font-size:36px;font-weight:600;
  line-height:1;min-width:52px;
  border:1px solid;border-radius:var(--radius);
  height:52px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.rl-benefit-title {font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:8px;font-family:Arial, sans-serif;}
.rl-benefit-text {font-size:14px;color:var(--text-sec);line-height:1.7;}

/* Perks */
.rl-perks {padding:80px 32px;}
.rl-perks-inner {max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.rl-perks-list {list-style:none;display:flex;flex-direction:column;gap:12px;}
.rl-perk {display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text-sec);line-height:1.5;}
.rl-check {font-size:16px;font-weight:700;flex-shrink:0;margin-top:1px;}
.rl-perks-cta {background:var(--surface-2);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);padding:36px;border-top:3px solid #4A9EF0;}
.rl-price-display {text-align:center;padding:24px 0;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:24px;}
.rl-price-std {font-size:14px;color:var(--text-dim);text-decoration:line-through;margin-bottom:4px;}
.rl-price-main {font-family:Arial, sans-serif;font-size:56px;font-weight:600;color:var(--text-primary);line-height:1;}
.rl-price-main span {font-size:20px;color:var(--text-dim);}
.rl-price-note {font-size:14px;color:#4A9EF0;margin-top:6px;font-weight:500;}

/* Steps */
.rl-steps {padding:80px 32px;background:rgba(13,32,64,0.4);border-top:1px solid rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.04);}
.rl-steps-inner {max-width:800px;margin:0 auto;}
.rl-step {display:flex;gap:24px;align-items:flex-start;padding:28px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.rl-step:last-child {border-bottom:none;}
.rl-step-num {
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;font-family: Arial, sans-serif;
}
.rl-step-title {font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:6px;font-family:Arial, sans-serif;}
.rl-step-body {font-size:14px;color:var(--text-sec);line-height:1.65;}

/* Requirements */
.rl-requirements {padding:80px 32px;}
.rl-req-inner {max-width:700px;margin:0 auto;}
.rl-req-list {list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:32px;}
.rl-req {font-size:14px;color:var(--text-sec);display:flex;gap:12px;align-items:flex-start;padding:14px 18px;background:var(--surface-2);border:1px solid rgba(255,255,255,0.06);border-radius:10px;}

/* FAQ */
.rl-faq {padding:80px 32px;background:rgba(13,32,64,0.4);border-top:1px solid rgba(255,255,255,0.04);}
.rl-faq-inner {max-width:700px;margin:0 auto;}

/* Final CTA */
.rl-final-cta {
  padding:100px 32px;text-align:center;
  background:radial-gradient(ellipse 70% 50% at 50% 100%,#1A4A9A33 0%,transparent 65%),var(--navy-deep);
}
.rl-final-cta h2 {margin-bottom:16px;}
.rl-final-cta h2 span {color:#4A9EF0;font-style:italic;}
.rl-final-cta p {max-width:480px;margin:0 auto 32px;}
.rl-final-spots {
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(16,36,24,0.7);border:1px solid #4A9EF033;
  border-radius:999px;padding:8px 20px;margin-bottom:28px;
  font-size:14px;color:var(--text-sec);
}
.rl-final-spots strong {color:#4A9EF0;}

/* Other roles */
.rl-other {padding:64px 32px;border-top:1px solid rgba(255,255,255,0.05);}
.rl-other-inner {max-width:700px;margin:0 auto;}
.rl-other-cards {display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
.rl-other-card {
  display:inline-flex;align-items:center;gap:10px;flex:1;min-width:180px;
  background:var(--surface-2);border:1px solid rgba(255,255,255,0.07);
  border-radius:var(--radius);padding:16px 20px;
  text-decoration:none;transition:var(--transition);color:var(--text-sec);
  font-size:14px;font-weight:500;
}
.rl-other-card:hover {border-color:#4A9EF044;color:var(--text-primary);transform:translateY(-2px);}
.rl-other-emoji {font-size:18px;}
.rl-other-label {flex:1;}
.rl-other-arrow {color:#4A9EF0;font-size:14px;}

@media (max-width:900px) {
  .rl-who-inner {grid-template-columns:1fr;gap:32px;}
  .rl-perks-inner {grid-template-columns:1fr;}
}
@media (max-width:600px) {
  .rl-benefit {flex-direction:column;gap:14px;}
  .rl-step {flex-direction:column;gap:14px;}
  .rl-hero {padding:130px 20px 80px;}
}