.aff-hero {
padding: 84px 0 0;
background-color: #FFEE00;
background-image: radial-gradient(65% 62% at 74% 52%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%);
overflow: hidden;
}
.aff-hero-copy {
max-width: 760px;
}
.aff-hero h1 {
margin: 0 0 18px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 34px;
font-weight: 800;
letter-spacing: -1px;
line-height: 1.06;
color: #2B292D;
}
.aff-lead {
margin: 0;
max-width: 620px;
font-size: 18px;
line-height: 1.55;
color: rgba(43, 41, 45, .72);
}
.aff-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 24px;
margin: 26px 0 0;
}
.aff-actions .btn {
margin: 0;
padding: 12px 26px;
font-size: 17px;
}
.aff-note {
margin: 16px 0 0;
font-size: 14px;
line-height: 1.5;
color: rgba(43, 41, 45, .72);
}
.aff-example {
margin: 32px 0 0;
padding: 20px 22px;
background: #fff;
border: 1px solid rgba(43, 41, 45, .14);
}
.aff-example-title {
margin: 0 0 14px;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(43, 41, 45, .72);
}
.aff-example-rows {
margin: 0;
}
.aff-example-row {
padding: 12px 0;
border-top: 1px solid rgba(43, 41, 45, .12);
}
.aff-example-row:first-child {
padding-top: 0;
border-top: 0;
}
.aff-example-row dt {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
color: rgba(43, 41, 45, .72);
}
.aff-example-row dd {
margin: 4px 0 0;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: -.4px;
line-height: 1.2;
color: rgba(43, 41, 45, .72);
}
.aff-example-row--out dd {
font-size: 28px;
letter-spacing: -.8px;
color: #2B292D;
}
.aff-example-note {
margin: 14px 0 0;
padding: 14px 0 0;
border-top: 1px solid rgba(43, 41, 45, .12);
font-size: 13px;
line-height: 1.5;
color: rgba(43, 41, 45, .72);
}
.aff-facts {
display: flex;
flex-direction: column;
margin: 38px 0 0;
padding: 20px 0 26px;
border-top: 1px solid rgba(43, 41, 45, .14);
}
.aff-fact + .aff-fact {
margin-top: 18px;
}
.aff-fact-value {
display: block;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: -.4px;
line-height: 1.2;
color: #2B292D;
}
.aff-fact-label {
display: block;
margin: 5px 0 0;
font-size: 14px;
line-height: 1.5;
color: rgba(43, 41, 45, .72);
}
.aff-band {
padding: 48px 0;
background: #fff;
}
#terms {
scroll-margin-top: 84px;
}
.aff-band--gray {
background: #F8F8FB;
}
.aff-eyebrow {
display: flex;
align-items: center;
margin: 0 0 20px;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(43, 41, 45, .72);
}
.aff-eyebrow:before {
content: "";
flex: 0 0 22px;
height: 5px;
margin-right: 10px;
background: #00ffff;
}
.aff-band h2 {
margin: 0 0 16px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 30px;
font-weight: 800;
letter-spacing: -.8px;
line-height: 1.08;
color: #2B292D;
}
.aff-sub {
max-width: 640px;
margin: 0 0 30px;
font-size: 17px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.aff-steps {
margin: 0;
padding: 0;
list-style: none;
counter-reset: aff-step;
background: #fff;
border: 1px solid rgba(43, 41, 45, .14);
}
.aff-step {
padding: 24px 22px;
border-top: 1px solid rgba(43, 41, 45, .12);
}
.aff-step:first-child {
border-top: 0;
}
.aff-step:before {
content: counter(aff-step);
counter-increment: aff-step;
display: block;
margin: 0 0 10px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1;
color: #2B292D;
}
.aff-step h3 {
margin: 0 0 8px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -.2px;
line-height: 1.3;
color: #2B292D;
}
.aff-step p {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.aff-list {
margin: 0;
padding: 0;
list-style: none;
}
.aff-list li {
position: relative;
margin: 0 0 18px;
padding: 0 0 0 26px;
font-size: 16px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.aff-list li:last-child {
margin-bottom: 0;
}
.aff-list li:before {
content: "";
position: absolute;
top: 11px;
left: 0;
width: 12px;
height: 3px;
background: #00ffff;
}
.aff-list b {
color: #2B292D;
font-weight: 700;
}
.aff-ideas-list,
.aff-terms-list {
max-width: 760px;
}
.aff-close p {
max-width: 560px;
margin: 0 0 14px;
font-size: 16px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.aff-close .aff-actions {
margin-top: 22px;
}
.aff-mail {
color: #0000ff;
word-break: break-word;
}
.aff-link {
display: inline-block;
font-size: 16px;
font-weight: 700;
line-height: 1.45;
color: #0000ff;
}
.aff-link:hover,
.aff-mail:hover {
color: #0000ff;
text-decoration: underline;
}
.aff a:focus:not(:focus-visible),
.aff .btn:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
@media (min-width: 768px) {
.aff-hero h1 {
font-size: 46px;
letter-spacing: -1.4px;
}
.aff-band {
padding: 60px 0;
}
.aff-band h2 {
font-size: 34px;
}
.aff-facts {
flex-direction: row;
}
.aff-fact {
flex: 1 1 0;
padding-right: 24px;
}
.aff-fact + .aff-fact {
margin-top: 0;
}
.aff-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.aff-step {
border-top: 0;
border-left: 1px solid rgba(43, 41, 45, .12);
}
.aff-step:first-child {
border-left: 0;
}
.aff-ideas-list {
display: flex;
flex-wrap: wrap;
max-width: none;
}
.aff-ideas-list li {
flex: 0 0 50%;
max-width: 50%;
padding-right: 40px;
}
}
@media (min-width: 992px) {
.aff-hero {
padding-top: 126px;
}
.aff-hero-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.aff-hero-copy {
flex: 0 1 640px;
padding-right: 48px;
}
.aff-example {
flex: 0 0 356px;
margin: 0;
padding: 24px 26px;
}
.aff-hero h1 {
font-size: 50px;
letter-spacing: -1.6px;
}
.aff-lead {
font-size: 19px;
}
.aff-facts {
margin-top: 56px;
padding: 22px 0 30px;
}
.aff-band {
padding: 76px 0;
}
.aff-band h2 {
font-size: 38px;
letter-spacing: -1px;
}
.aff-step {
padding: 28px 26px;
}
}
@media (min-width: 1200px) {
.aff-hero h1 {
font-size: 54px;
}
.aff-example {
flex: 0 0 384px;
}
}