/* ============================================================
   /referrals — partner referral program page.
   Layers on top of lander.css (container, block, sec-h2, sec-sub,
   feat, faq-wrap, ftr are all inherited from there).
   ============================================================ */

:root{
  --ref-aqua:#43E5A4;
  --ref-purple:#A347EA;
  --ref-everglade:#1D4032;
  --ref-indigo:#502373;
  --ref-offwhite:#FCFBFA;
}

/* ---------- Primary CTA (fixed spec — do not restyle) ---------- */
.ref-cta{
  display:inline-block;
  background:#43E5A4;
  color:#0A0A0A;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  font-weight:bold;
  letter-spacing:0.2px;
  padding:16px 36px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  text-align:center;
  transition:filter .15s ease, transform .15s ease;
}
.ref-cta:hover{filter:brightness(1.06)}
.ref-cta:active{transform:translateY(1px)}
.ref-cta:focus-visible{outline:3px solid var(--ref-indigo);outline-offset:3px}

/* ---------- Hero ---------- */
/* Compact hero: this page has no portrait, so drop the lander's full-height frame. */
.hero.ref-hero{min-height:0;padding:28px 0 92px}
.ref-hero .hero-body{display:block;text-align:center;padding-top:56px}
.ref-hero .hero-copy{padding:0;gap:22px}
.ref-hero h1{max-width:840px}
.ref-hero .sub{max-width:620px}

/* Confetti terrazzo hero.
   Same asset the workspace Refer tab paints as its page canvas (7e-refer.png,
   see assets/textures/hs-bg-photos.css) — the two surfaces should feel like one
   place. It is a pale lilac→blue wash, so this hero inverts the lander's dark
   frame: canvas colour underneath as the no-image fallback, Everglade text on
   top. Mobile gets the narrower crop at the same 720px breakpoint the texture
   CSS uses. */
.hero.ref-hero{
  background-color:#EFEAF7;
  background-image:url("/assets/textures/desktop/7e-refer.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}
/* Kill the dark hero's aquamarine floor glow — it muddies a light canvas. */
.hero.ref-hero::before{display:none}

.ref-hero h1{color:var(--ref-everglade)}
/* Indigo, not aquamarine: aqua on this pale wash sits near 3:1 and the CTA
   already owns that colour. Indigo clears 8:1 and reads as brand detail. */
.ref-hero h1 .accent{color:var(--ref-indigo)}
.ref-hero .sub{color:#2B4A3C}
.ref-hero-note{font-size:14px;color:#5A6B62;margin:4px 0 0}

/* Login chip was drawn for the dark hero — restate it for a light surface. */
.ref-hero .hero-login{color:var(--ref-everglade);border-color:rgba(29,64,50,.32)}
.ref-hero .hero-login:hover{background:rgba(29,64,50,.07);border-color:rgba(29,64,50,.5)}

/* ---------- Two-column "You get / They get" ---------- */
.ref-split{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:940px;margin:0 auto}
.ref-col{background:var(--ref-offwhite);border:1px solid #E4E9E4;border-radius:20px;padding:34px 32px}
.ref-col.them{background:#F2FBF6;border-color:#CFEFDF}
.ref-col h3{
  font-family:var(--font-ui);font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--ref-everglade);margin:0 0 20px
}
.ref-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.ref-col li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:#2A3B33}
.ref-col li svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px;color:var(--ref-aqua)}
.ref-col li b{color:var(--ref-everglade)}

/* ---------- How it works ---------- */
.ref-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:0 auto}
.ref-step{background:#fff;border:1px solid #E4E9E4;border-radius:20px;padding:32px 28px}
.ref-step .n{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--ref-everglade);color:var(--ref-aqua);
  font-family:var(--font-ui);font-weight:700;font-size:17px;margin-bottom:18px
}
.ref-step h3{font-family:var(--font-ui);font-size:19px;font-weight:700;color:var(--ref-everglade);margin:0 0 10px;line-height:1.3}
.ref-step p{font-size:15px;line-height:1.6;color:#4A5A52;margin:0}

/* ---------- Earnings illustration ---------- */
.ref-math{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:940px;margin:0 auto}
.ref-math-card{background:var(--ref-everglade);color:var(--ref-offwhite);border-radius:24px;padding:36px 34px}
.ref-math-card .cap{
  font-family:var(--font-ui);font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--ref-aqua);margin:0 0 20px
}
.ref-math-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid rgba(252,251,250,.14);font-size:15px}
.ref-math-row:last-of-type{border-bottom:none}
.ref-math-row .lbl{color:#B9CCC2}
.ref-math-row .val{font-family:var(--font-ui);font-weight:700;white-space:nowrap}
.ref-math-total{margin-top:20px;padding-top:20px;border-top:2px solid var(--ref-aqua)}
.ref-math-total .big{font-family:var(--hero-display);font-size:42px;font-weight:800;color:var(--ref-aqua);line-height:1;display:block}
.ref-math-total .per{font-size:14px;color:#B9CCC2;margin-top:8px;display:block}
.ref-math-foot{max-width:940px;margin:26px auto 0;font-size:13.5px;line-height:1.6;color:#5A6B62;text-align:center}

/* ---------- Tier comparison table ---------- */
.ref-table-wrap{max-width:1000px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ref-table{width:100%;border-collapse:collapse;min-width:720px;background:#fff;border-radius:20px;overflow:hidden;border:1px solid #E4E9E4}
.ref-table th,.ref-table td{padding:20px 22px;text-align:left;vertical-align:top;font-size:15px;line-height:1.55;border-bottom:1px solid #EDF1ED}
.ref-table thead th{
  background:var(--ref-everglade);color:var(--ref-offwhite);font-family:var(--font-ui);
  font-size:15px;font-weight:700;border-bottom:none
}
.ref-table thead th:first-child{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:#B9CCC2;font-weight:700}
.ref-table tbody th{
  font-family:var(--font-ui);font-weight:700;font-size:14px;color:var(--ref-everglade);
  background:#F7F9F7;white-space:nowrap
}
.ref-table tbody tr:last-child th,.ref-table tbody tr:last-child td{border-bottom:none}
.ref-table .rate{font-family:var(--font-ui);font-weight:700;font-size:20px;color:var(--ref-everglade)}
.ref-table col.is-featured{background:#F2FBF6}
.ref-tag{
  display:inline-block;font-family:var(--font-ui);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:360px;
  background:rgba(163,71,234,.12);color:var(--ref-indigo);margin-top:8px
}
.ref-table thead .ref-tag{background:rgba(67,229,164,.18);color:var(--ref-aqua);margin-top:6px}

/* ---------- Fine print ---------- */
.ref-fine-section{background:#fff;padding:80px 0 100px}
.ref-fine{max-width:860px;margin:0 auto;background:var(--ref-offwhite);border:1px solid #E4E9E4;border-radius:20px;padding:40px 44px}
.ref-fine h2{font-family:var(--font-ui);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ref-everglade);margin:0 0 18px}
.ref-fine ul{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:11px}
.ref-fine li{font-size:14px;line-height:1.65;color:#4A5A52}

/* ---------- CTA band override (fixed-spec button) ---------- */
.cta-band .ref-cta{margin-top:4px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .ref-split,.ref-steps,.ref-math{grid-template-columns:1fr}
  .ref-hero .hero-body{padding-top:36px}
}
/* Matches the 720px desktop→mobile swap in assets/textures/hs-bg-photos.css. */
@media(max-width:720px){
  .hero.ref-hero{background-image:url("/assets/textures/mobile/7e-refer.webp")}
}
@media(max-width:620px){
  .ref-fine-section{padding:56px 0 72px}
  .ref-col,.ref-step,.ref-math-card,.ref-fine{padding:26px 22px}
  .ref-math-total .big{font-size:36px}
  .ref-cta{width:100%;max-width:340px}
}