*{box-sizing:border-box}
:root{
  --ink:#111827;
  --body:#23262a;
  --muted:#6e809b;
  --teal:#42c8c4;
  --teal-dark:#183e3c;
  --mint:#e8f6f5;
  --green:#19aa52;
  --orange:#ff7119;
  --max:1040px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--body);
  background:#fff;
  line-height:1.4;
  font-size:15px;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.shell{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.centered{text-align:center}

/* HEADER */
.site-header{
  background:#fff;
  border-bottom:1px solid #eee;
}
.header-inner{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-title{
  font-size:18px;
  color:#1f2227;
}
.site-header nav a{
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  font-size:14px;
}

/* HERO */
.hero{
  background:linear-gradient(115deg,#d9eeee 0%,#2fbdb7 58%,#143a38 100%);
  padding:34px 0 12px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.25fr);
  gap:28px;
  align-items:center;
}
.hero-workspace{
  width:100%;
  max-height:470px;
  object-fit:cover;
}
.affiliate-caption{
  color:#fff;
  font-weight:700;
  text-align:center;
  margin:9px 0 0;
  font-size:14px;
}
.hero-copy{color:#fff}
.hero-title-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 165px;
  gap:20px;
  align-items:center;
}
.hero h1{
  font-size:clamp(38px,4vw,52px);
  line-height:1.08;
  margin:0 0 18px;
  letter-spacing:-1px;
}
.hero-portrait{
  width:165px;
  aspect-ratio:2/3;
  object-fit:cover;
}
.hero-tagline{
  display:inline-block;
  background:rgba(24,62,60,.68);
  padding:3px 6px;
  font-weight:700;
  font-size:12px;
  margin:5px 0 24px;
}
.hero-lead{
  font-size:18px;
  line-height:1.55;
  font-weight:400;
  text-align:left;
  max-width:590px;
  margin:0 0 18px;
}

/* COMMON SECTION TYPOGRAPHY */
section{padding:42px 0}
.section-heading h2,
.webinar h2,
.next-step h2{
  color:var(--ink);
  font-size:clamp(30px,3vw,40px);
  line-height:1.12;
  margin:0 0 14px;
  letter-spacing:-.5px;
}
.section-heading p,
.subhead{
  color:var(--muted);
  font-size:15px;
  max-width:620px;
  margin:0 auto;
}

/* OPPORTUNITY */
.opportunity-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:56px;
  margin-top:38px;
}
.opportunity h3,
.support-copy h3{
  color:#1b1d21;
  font-size:22px;
  margin:0 0 10px;
}
.why-different>p{
  font-size:15px;
  max-width:560px;
}
.feature-block{margin-top:18px}
.feature-block h4,
.income-step h4{
  font-size:16px;
  margin:0 0 4px;
  color:#16181c;
}
.feature-block p,
.income-step p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}
.accent-point{
  display:grid;
  grid-template-columns:7px 1fr;
  gap:22px;
  align-items:stretch;
  margin:28px 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.5;
}
.accent-point::before{
  content:"";
  width:7px;
  min-height:58px;
}
.accent-point p{margin:0}
.accent-teal::before{background:#3ee0cf}
.accent-green::before{background:#16a249}
.accent-orange::before{background:#f97015}

/* WEBINAR */
.webinar{padding-top:30px}
.video-frame{
  width:min(100%,820px);
  margin:16px auto 26px;
  aspect-ratio:16/9;
  background:#000;
}
.video-frame iframe{
  width:100%;
  height:100%;
  border:0;
}
.button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:46px;
  padding:0 24px;
  border:3px solid #111;
  border-radius:12px;
  background:#20c668;
  color:#fff;
  text-decoration:none;
  font-size:15px;
}

/* INCOME */
.income{background:#e8f6f5}
.income-grid{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:68px;
  align-items:center;
  margin-top:40px;
}
.faq-image{
  width:100%;
  border-radius:14px;
}
.income-steps{
  display:grid;
  gap:36px;
}
.income-step{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:14px;
  align-items:start;
}
.step-number{
  color:#1caf58;
  font-size:36px;
  line-height:1;
}

/* SUPPORT */
.support-grid{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:54px;
  align-items:center;
  margin-top:14px;
}
.support-image{width:100%}
.support-copy{padding-top:6px}

/* HOW YOU GET PAID */
.paid{padding-top:30px}
.paid-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.paid-intro{
  max-width:500px;
  font-size:15px;
}
.underlined{text-decoration:underline}
.simple-list{
  margin:32px 0 0;
  padding-left:20px;
  font-size:15px;
  line-height:1.45;
}
.earnings-list{margin-top:28px}
.paid-image{
  width:100%;
  max-width:470px;
  margin:0 auto;
}

/* CTA + FOOTER */
.next-step{
  padding-top:8px;
  padding-bottom:54px;
}
.next-step p{
  font-size:15px;
  margin:0 0 38px;
}
.site-footer{
  padding:10px 0 26px;
  background:#fff;
}
.footer-associate{
  text-align:center;
  font-size:16px;
  margin:0 0 34px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:36px;
  align-items:end;
}
.footer-grid h3{
  margin:0 0 7px;
  font-size:16px;
}
.footer-grid p{
  margin:0;
  line-height:1.55;
  font-size:14px;
}
.footer-grid a{text-decoration:none}
.footer-social{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
}
.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  color:inherit;
  text-decoration:none;
}
.footer-social-link svg{
  display:block;
  width:22px;
  height:22px;
}
.copyright{
  text-align:center;
  color:#68717f;
  font-size:13px;
  margin:34px 0 0;
}

/* TABLET */
@media(max-width:900px){
  .shell{width:min(calc(100% - 32px),var(--max))}
  .hero-grid,
  .opportunity-grid,
  .income-grid,
  .support-grid,
  .paid-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .hero-grid{align-items:start}
  .hero-title-row{
    grid-template-columns:1fr 135px;
  }
  .hero-portrait{width:135px}
  .hero h1{font-size:clamp(34px,7vw,46px)}
  .hero-lead{
    font-size:18px;
    max-width:100%;
  }
  .income-grid,
  .support-grid{
    max-width:650px;
    margin-left:auto;
    margin-right:auto;
  }
  .faq-image,
  .support-image{
    max-width:380px;
    margin:0 auto;
  }
  .paid-image{
    max-width:440px;
    margin:0 auto;
  }
}

/* MOBILE */
@media(max-width:620px){
  body{font-size:14px}
  .shell{width:min(calc(100% - 22px),var(--max))}
  .header-inner{min-height:58px}
  .site-title{font-size:15px}
  .site-header nav a{font-size:13px}

  .hero{
    padding-top:16px;
    padding-bottom:10px;
  }
  .hero-grid{gap:20px}
  .hero-title-row{
    grid-template-columns:1fr 96px;
    gap:10px;
  }
  .hero-portrait{width:96px}
  .hero h1{
    font-size:clamp(30px,10vw,38px);
    margin-bottom:12px;
  }
  .hero-tagline{
    margin-bottom:16px;
    font-size:11px;
  }
  .hero-lead{
    font-size:17px;
    text-align:left;
    line-height:1.5;
  }
  .hero-copy .button{width:100%;}
  .affiliate-caption{font-size:13px}

  section{padding:34px 0}
  .section-heading h2,
  .webinar h2,
  .next-step h2{
    font-size:30px;
    margin-bottom:10px;
  }
  .section-heading p,
  .subhead{
    font-size:14px;
  }

  .opportunity-grid{margin-top:28px}
  .opportunity h3,
  .support-copy h3{
    font-size:21px;
  }
  .feature-block{margin-top:16px}
  .feature-block h4,
  .income-step h4{font-size:15px}
  .feature-block p,
  .income-step p{font-size:14px}

  .accent-point{
    gap:15px;
    font-size:15px;
    margin:22px 0;
  }
  .accent-point::before{
    width:6px;
    min-height:50px;
  }

  .income-grid,
  .support-grid{margin-top:28px}
  .income-steps{gap:28px}
  .income-step{
    grid-template-columns:30px 1fr;
    gap:12px;
  }
  .step-number{font-size:30px}

  .simple-list{
    font-size:14px;
    margin-top:24px;
  }
  .earnings-list{margin-top:22px}

  .next-step p{margin-bottom:28px}
  .button{
    width:100%;
    min-height:44px;
    font-size:14px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
  .footer-social{justify-content:flex-start}
  .footer-associate{
    font-size:14px;
    margin-bottom:28px;
  }
}