/* =====================================================================
   refer-form-layouts.css  —  SAMPLE ONLY
   Homepage "Refer & Earn" section, form-on-the-side layouts (FL1–FL4).
   Mirrors the existing .contact split-card DNA from trucap.css.
   Reward = $500 to the referrer. Funnels to Referral.html.
   Reuses global .field / .two-col / .btn / .eyebrow. Namespaced .fl-.
   Not on any live page.
   ===================================================================== */

.fl-sec{padding:74px 0;background:#fff;}
.fl-sec.soft{background:var(--c-bg-soft);}
.fl-grid{display:grid;grid-template-columns:.92fr 1.08fr;align-items:stretch;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(11,13,49,.12);}
.fl-grid.form-right{grid-template-columns:1.08fr .92fr;}

/* ---- form card (white) ---- */
.fl-card{background:#fff;padding:42px 40px;}
.fl-card .head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.fl-card .head svg{width:22px;height:22px;color:var(--c-brand);flex:0 0 auto;}
.fl-card h3{font-size:21px;font-weight:800;color:var(--c-ink);margin:0;letter-spacing:-.01em;white-space:nowrap;}
.fl-card .fc-sub{font-size:14px;line-height:1.55;color:var(--c-muted);margin:0 0 22px;}
.fl-card form .btn{width:100%;justify-content:center;margin-top:4px;}
.fl-card .fineprint{font-size:12px;color:var(--c-muted);text-align:center;margin:14px 0 0;line-height:1.5;}

/* ---- info side ---- */
.fl-side{padding:46px 44px;display:flex;flex-direction:column;justify-content:center;}
.fl-side.dark{background:var(--c-ink-deep);color:#fff;}
.fl-side.blue{background:var(--c-brand);color:#fff;}
.fl-side.light{background:var(--c-bg-soft);color:var(--c-ink);border-left:1px solid var(--c-border);}
.fl-side .eyebrow{margin-bottom:16px;}
.fl-side.dark .eyebrow,.fl-side.blue .eyebrow{background:rgba(255,255,255,.14);color:#fff;}
.fl-side h2{font-size:clamp(26px,2.7vw,35px);font-weight:800;line-height:1.1;letter-spacing:-.015em;margin:0 0 14px;text-wrap:balance;}
.fl-side .lead{font-size:15px;line-height:1.6;margin:0 0 26px;max-width:40ch;}
.fl-side.dark .lead,.fl-side.blue .lead{color:#C9CCD6;}
.fl-side.blue .lead{color:rgba(255,255,255,.86);}
.fl-side.light .lead{color:var(--c-muted);}

/* reward chip / big amount */
.fl-reward{display:inline-flex;align-items:center;gap:16px;padding:18px 24px;border-radius:14px;margin-bottom:28px;}
.fl-side.dark .fl-reward{background:linear-gradient(150deg,#15184a,#0B0D31);border:1px solid rgba(255,255,255,.12);}
.fl-side.blue .fl-reward{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);}
.fl-side.light .fl-reward{background:#fff;border:1px solid var(--c-border);box-shadow:0 10px 26px rgba(11,13,49,.07);}
.fl-amt{display:inline-flex;align-items:flex-start;line-height:.9;font-feature-settings:"tnum" 1;}
.fl-amt small{font-size:24px;font-weight:700;margin-top:5px;margin-right:1px;}
.fl-amt b{font-size:52px;font-weight:800;letter-spacing:-.03em;}
.fl-side.dark .fl-amt{color:var(--rv-accent-d);}
.fl-side.blue .fl-amt{color:#fff;}
.fl-side.light .fl-amt{color:var(--c-brand);}
.fl-reward .rtxt{display:flex;flex-direction:column;gap:2px;}
.fl-reward .rtxt b{font-size:14.5px;font-weight:700;letter-spacing:-.005em;}
.fl-reward .rtxt span{font-size:12.5px;opacity:.78;}
.fl-side.light .fl-reward .rtxt b{color:var(--c-ink-strong);}
.fl-side.light .fl-reward .rtxt span{color:var(--c-muted);}

/* benefits checklist */
.fl-bens{display:grid;grid-template-columns:1fr 1fr;gap:13px 24px;margin:0 0 28px;}
.fl-ben{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;}
.fl-side.dark .fl-ben,.fl-side.blue .fl-ben{color:#E4E7F0;}
.fl-side.light .fl-ben{color:var(--c-ink-strong);}
.fl-ben .ck{width:22px;height:22px;border-radius:50%;background:#1F8A5B;color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.fl-side.blue .fl-ben .ck{background:#fff;color:var(--c-brand);}
.fl-ben .ck svg{width:13px;height:13px;}

/* mini steps */
.fl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);}
.fl-side.light .fl-steps{border-top-color:var(--c-border);}
.fl-step{display:flex;flex-direction:column;gap:8px;}
.fl-step .n{width:30px;height:30px;border-radius:50%;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.fl-side.dark .fl-step .n{background:var(--c-brand);color:#fff;}
.fl-side.blue .fl-step .n{background:#fff;color:var(--c-brand);}
.fl-side.light .fl-step .n{background:var(--c-brand);color:#fff;}
.fl-step p{font-size:12.5px;line-height:1.45;margin:0;}
.fl-side.dark .fl-step p,.fl-side.blue .fl-step p{color:#C9CCD6;}
.fl-side.blue .fl-step p{color:rgba(255,255,255,.85);}
.fl-side.light .fl-step p{color:var(--c-muted);}

/* =====================================================================
   Responsive — stack, form first
   ===================================================================== */
@media(max-width:880px){
  .fl-grid,.fl-grid.form-right{grid-template-columns:1fr;}
  .fl-grid.form-right .fl-card{order:-1;}
  .fl-side{padding:40px 30px;}
  .fl-card{padding:36px 28px;}
}
@media(max-width:520px){
  .fl-bens{grid-template-columns:1fr;}
  .fl-steps{grid-template-columns:1fr;gap:14px;}
  .fl-amt b{font-size:46px;}
}