@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

html {
  scroll-behavior: smooth;
}

#fedex-referral-root .gf-submit-frame {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
}

#fedex-referral-root .hidden {
  display: none !important;
}

/* Override site-wide h1 { font-size: 55px !important; } */
#fedex-referral-root h1.hero-h1 {
  font-size: clamp(48px, 5.25vw, 62px) !important;
  line-height: 1.06 !important;
  font-weight: 900 !important;
  letter-spacing: -0.032em !important;
  margin-bottom: 14px !important;
  color: var(--ink, #0f172a) !important;
}

#fedex-referral-root .hero-eligible {
  font-size: 14px !important;
}

@media (max-width: 960px) {
  #fedex-referral-root h1.hero-h1 {
    font-size: clamp(36px, 8vw, 46px) !important;
  }
}

@scope (#fedex-referral-root) {
  :scope {
    --white: #ffffff;
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --bg-mint: #f0fdfb;
    --ink: #0f172a;
    --ink-mid: #334155;
    --ink-muted: #64748b;
    --ink-light: #94a3b8;
    --border: #e2e8f0;
    --border-mid: #cbd5e1;
    --blue: #1d4ed8;
    --blue-dark: #1e3a8a;
    --teal: #0d9488;
    --grad: linear-gradient(135deg, #1d4ed8 0%, #0d9488 100%);
    --grad-r: linear-gradient(90deg, #1d4ed8, #0d9488);
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
    background: var(--bg);
  }

  * {
    box-sizing: border-box;
  }


  .lead-form-thankyou:not(.hidden) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 22rem;
    padding: 2.5rem 1rem 3rem;
    text-align: center;
  }

  .lead-form-thankyou-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }

  .lead-form-thankyou-message {
    font-size: 18px;
    color: var(--ink-muted);
    line-height: 1.55;
    max-width: 22rem;
    margin: 0 auto;
  }

  .lead-form-reset {
    margin-top: 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .lead-form-reset:hover {
    color: var(--blue-dark);
  }

  .form-card:has(#lead-form-thankyou:not(.hidden)) #lead-form {
    display: none;
  }

  .form-card {
    display: flex;
    flex-direction: column;
  }

  .fsub-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  /* ANNOUNCE */
  .announce{background:var(--grad);padding:12px 24px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
  .announce-copy{font-size:13px;font-weight:600;color:#fff;text-align:center}
  .announce-copy strong{font-weight:800}
  .announce-btn{padding:7px 20px;font-size:12px;font-weight:700;color:#fff;border:1.5px solid rgba(255,255,255,0.6);border-radius:7px;background:transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background 0.15s}
  .announce-btn:hover{background:rgba(255,255,255,0.15)}

  /* TRUST BADGES */
  .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  .tbadge{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg-soft);border:1.5px solid var(--border);border-radius:10px}
  .tbadge-num{font-size:18px;font-weight:900;letter-spacing:-0.02em;background:var(--grad-r);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
  .tbadge-label{font-size:12px;font-weight:600;color:var(--ink-muted);line-height:1.3}
  /* HERO */
  .hero{max-width:1200px;margin:0 auto;padding:52px 64px 48px;display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:start}
  .badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
  .badge{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border:1.5px solid var(--border);border-radius:100px;font-size:13px;font-weight:600;color:var(--ink-mid);background:var(--white)}
  .badge svg{width:14px;height:14px;flex-shrink:0}
  .hero-h1{font-size:clamp(48px,5vw,62px)!important;font-weight:900;color:var(--ink);line-height:1.08!important;letter-spacing:-0.032em;margin-bottom:14px}
  .hero-h1-line{display:block}
  .hero-h1 .gt{background:var(--grad-r);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .hero-lead{font-size:17px;color:var(--ink-muted);line-height:1.7;margin-bottom:0;max-width:500px}
  .hero-eligible{display:flex;align-items:center;gap:8px;font-size:14px!important;font-weight:600;color:var(--teal);margin-top:14px}
  .hero-eligible::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0}
  .refer-hook-title{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin-bottom:10px}
  .refer-hook-body{font-size:15px;color:var(--ink-muted);line-height:1.7;margin-bottom:0}

  /* FORM */
  .form-card{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 4px 40px rgba(15,23,42,0.08);position:sticky;top:100px}
  .fc-title{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin-bottom:2px}
  .fc-sub{font-size:11px;font-weight:600;color:var(--teal);margin-bottom:14px;text-transform:uppercase;letter-spacing:0.06em}
  .fs-label{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
  .fg{margin-bottom:8px}
  .fg label{display:block;font-size:12px;font-weight:600;color:var(--ink-mid);margin-bottom:3px}
  .opt-note{font-weight:400;color:var(--ink-light);font-size:11px}
  .fg input,.fg textarea{width:100%;padding:7px 11px;font-family:'Inter',sans-serif;font-size:13px;color:var(--ink);background:var(--bg-soft);border:1.5px solid var(--border);border-radius:8px;outline:none;transition:border-color 0.15s,box-shadow 0.15s;resize:none}
  .fg input:focus,.fg textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,0.1);background:var(--white)}
  .fg input::placeholder,.fg textarea::placeholder{color:#b0bcc8}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .fdiv{height:1px;background:var(--border);margin:10px 0}
  .rp-label{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-bottom:7px}
  .ropts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .ropt{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;background:var(--bg-soft);transition:border-color 0.15s,background 0.15s;user-select:none}
  .ropt.on{border-color:var(--blue);background:#eff6ff}
  .rdot{width:13px;height:13px;border-radius:50%;border:2px solid var(--border-mid);flex-shrink:0;position:relative;transition:border-color 0.15s}
  .ropt.on .rdot{border-color:var(--blue)}
  .ropt.on .rdot::after{content:'';position:absolute;inset:2px;background:var(--blue);border-radius:50%}
  .ropt-txt{font-size:12px;font-weight:600;color:var(--ink-mid)}
  .fsub-btn{width:100%;margin-top:12px;padding:11px;font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:#fff;background:var(--grad);border:none;border-radius:10px;cursor:pointer;transition:opacity 0.15s,transform 0.1s}
  .fsub-btn:hover{opacity:0.9;transform:translateY(-1px)}
  .fsub-btn:active{transform:translateY(0)}

  /* MILESTONE CARDS */
  .milestone-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .ms-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:28px;transition:box-shadow 0.2s}
  .ms-card:hover{box-shadow:0 8px 32px rgba(15,23,42,0.08)}
  .ms-icon{width:48px;height:48px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .ms-icon svg{width:22px;height:22px}
  .ms-tag{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-light);margin-bottom:8px}
  .ms-amt{font-size:48px;font-weight:900;letter-spacing:-0.03em;line-height:1;background:var(--grad-r);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
  .ms-trigger{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px}
  .ms-desc{font-size:13px;color:var(--ink-muted);line-height:1.65;margin-bottom:16px}
  .ms-opts{display:flex;gap:8px;flex-wrap:wrap}
  .ms-opt{padding:4px 12px;font-size:12px;font-weight:600;color:var(--ink-mid);border:1.5px solid var(--border);border-radius:100px;background:var(--bg-soft)}

  /* SECTIONS */
  .sec{max-width:1200px;margin:0 auto;padding:64px 64px}
  .sec.mint-bg{background:var(--bg-mint);max-width:100%;padding:64px 0}
  .sec.mint-bg .inner{max-width:1200px;margin:0 auto;padding:0 64px}
  .sec.dark-bg{background:var(--ink);max-width:100%;padding:64px 0}
  .sec.dark-bg .inner{max-width:1200px;margin:0 auto;padding:0 64px}
  .spill{display:inline-flex;align-items:center;padding:7px 20px;border:1.5px solid var(--border-mid);border-radius:100px;font-size:12px;font-weight:700;color:var(--ink-mid);margin-bottom:16px;letter-spacing:0.02em}
  .stitle{font-size:clamp(26px,3vw,40px);font-weight:900;color:var(--ink);letter-spacing:-0.03em;line-height:1.15;margin-bottom:10px;text-align:center}
  .ssub{font-size:16px;color:var(--ink-muted);text-align:center;max-width:620px;margin:0 auto 40px;line-height:1.7}

  /* WHY REFER — STAT CARDS */
  .why-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .why-left .wl-tag{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
  .why-left .wl-title{font-size:clamp(26px,3vw,38px);font-weight:900;color:var(--ink);letter-spacing:-0.03em;line-height:1.15;margin-bottom:10px}
  .why-left .wl-sub{font-size:15px;color:var(--ink-muted);line-height:1.7;margin-bottom:0}
  .stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .sc{background:var(--bg-soft);border-radius:14px;padding:20px 18px;border:1.5px solid var(--border)}
  .sc-num{font-size:32px;font-weight:900;letter-spacing:-0.02em;background:var(--grad-r);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:4px}
  .sc-label{font-size:13px;font-weight:600;color:var(--ink-mid)}

  /* HOW IT WORKS */
  .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .step-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:22px 18px;transition:box-shadow 0.2s,transform 0.2s}
  .step-card:hover{box-shadow:0 8px 32px rgba(15,23,42,0.08);transform:translateY(-3px)}
  .step-icon{width:48px;height:48px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .step-icon svg{width:22px;height:22px}
  .step-num{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-light);margin-bottom:6px}
  .step-title{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin-bottom:8px}
  .step-body{font-size:13px;color:var(--ink-muted);line-height:1.6;margin-bottom:0}
  .step-reward{margin-top:16px;padding:14px;background:var(--bg-soft);border-radius:10px;border:1.5px solid var(--border)}
  .step-reward-amt{font-size:28px;font-weight:900;letter-spacing:-0.02em;background:var(--grad-r);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px}
  .step-reward-opts{display:flex;flex-direction:column;gap:4px}
  .step-reward-opt{font-size:12px;font-weight:600;color:var(--ink-mid);display:flex;align-items:center;gap:6px}
  .step-reward-opt::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0}
  .sbadge{display:inline-block;margin-top:14px;padding:5px 13px;font-size:11px;font-weight:700;border-radius:100px}
  .b-gray{background:#f1f5f9;color:var(--ink-mid)}
  .b-teal{background:#f0fdfa;color:var(--teal);border:1px solid #99f6e4}
  .b-note{font-size:12px;font-weight:600;color:var(--ink-muted);margin-top:10px;font-style:italic}

  /* NO NEED TO */
  .noneed-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .noneed-left .nn-title{font-size:clamp(26px,3vw,38px);font-weight:900;color:var(--ink);letter-spacing:-0.03em;line-height:1.15;margin-bottom:20px}
  .nn-list{display:flex;flex-direction:column;gap:12px}
  .nn-item{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--ink-mid);font-weight:500}
  .nn-x{width:22px;height:22px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
  .nn-x svg{width:12px;height:12px}
  .noneed-right .nr-box{background:var(--bg-soft);border:1.5px solid var(--border);border-radius:16px;padding:32px}
  .nr-icon{width:52px;height:52px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .nr-icon svg{width:24px;height:24px}
  .nr-title{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin-bottom:10px}
  .nr-body{font-size:14px;color:var(--ink-muted);line-height:1.7}

  /* MODULES */
  .mods-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .mod{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;transition:box-shadow 0.2s,transform 0.2s}
  .mod:hover{box-shadow:0 8px 32px rgba(15,23,42,0.08);transform:translateY(-3px)}
  .mod-ic{width:46px;height:46px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
  .mod-ic svg{width:21px;height:21px}
  .mod-name{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin-bottom:6px}
  .mod-desc{font-size:13px;color:var(--ink-muted);line-height:1.6;flex:1}
  .lm-btn{display:block;margin-top:18px;padding:10px;font-size:13px;font-weight:700;text-align:center;color:var(--blue);border-radius:8px;text-decoration:none;cursor:pointer;background:transparent;border:none;position:relative;transition:background 0.15s}
  .lm-btn::before{content:'';position:absolute;inset:0;border-radius:8px;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
  .lm-btn:hover{background:#f8fafc}

  /* CTA */
  .cta-band{background:var(--grad);padding:64px 64px;text-align:center;position:relative;overflow:hidden}
  .cta-band::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E")}
  .cta-pill{display:inline-flex;align-items:center;padding:7px 20px;border:1.5px solid rgba(255,255,255,0.4);border-radius:100px;font-size:12px;font-weight:700;color:rgba(255,255,255,0.9);margin-bottom:20px;letter-spacing:0.06em;text-transform:uppercase;position:relative}
  .cta-h{font-size:clamp(32px,4.5vw,58px);font-weight:900;color:#fff;letter-spacing:-0.03em;line-height:1.05;margin-bottom:14px;position:relative}
  .cta-p{font-size:17px;color:rgba(255,255,255,0.75);max-width:440px;margin:0 auto 36px;line-height:1.7;position:relative}
  .cta-main{display:inline-block;padding:16px 48px;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;color:var(--blue-dark);background:#fff;border:none;border-radius:10px;cursor:pointer;text-decoration:none;transition:opacity 0.15s,transform 0.1s;position:relative;letter-spacing:-0.01em}
  .cta-main:hover{opacity:0.94;transform:translateY(-2px)}

  /* RESPONSIVE */
  @media(max-width:960px){
    .hero-h1{font-size:clamp(36px,8vw,46px)!important}
    .hero{grid-template-columns:1fr;padding:40px 24px;gap:32px}
    .form-card{position:static}
    .sec{padding:48px 24px}
    .sec.mint-bg .inner,.sec.dark-bg .inner{padding:0 24px}
    .steps-grid{grid-template-columns:1fr 1fr}
    .mods-grid{grid-template-columns:1fr 1fr}
    .why-layout,.noneed-layout{grid-template-columns:1fr;gap:28px}
    .milestone-grid{grid-template-columns:1fr}
    .cta-band{padding:48px 24px}
      .stat-cards{grid-template-columns:1fr 1fr}
  }
  @media(max-width:600px){
    .steps-grid,.mods-grid{grid-template-columns:1fr}
    .frow,.ropts,.stat-cards{grid-template-columns:1fr}
    .announce{flex-direction:column;gap:8px}
  }
}