/* Format pages: client /cpl /cpc /revshare /pricing /how-it-works and partner /partners/cpl /cpc /revshare /payouts /affiliate-program.
   Shared blocks with the fp- prefix on top of main.min.css. */

.fp-mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
.fp-num { font-variant-numeric: tabular-nums; }

/* hero: text left, the format animation right (a still picture on phones) */
.fp-hero-row { row-gap: 36px; }
.info__content .fp-lede { font-size: 18px; line-height: 1.55; color: #425466; margin: 18px 0 0; max-width: 560px; }
.fp-cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fp-doclink { color: #4791ff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.fp-doclink:hover { color: #2f7ceb; }
.fp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; max-width: 560px; }
.fp-facts li { background: #fff; border: 1px solid #e8edf5; border-radius: 8px; padding: 14px 16px 13px; min-width: 0; }
.fp-facts b { display: block; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.03em; color: #0a2540; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-facts span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: #6b7c93; }
.info__content .fp-facts-note { font-size: 12.5px; line-height: 1.5; color: #8a99ad; margin: 10px 0 0; max-width: 560px; }
.fp-art { position: relative; width: 100%; max-width: 628px; margin-left: auto; aspect-ratio: 628 / 582; }
.fp-art picture, .fp-art > img { position: absolute; inset: 0; }
.fp-art img { display: block; width: 100%; height: 100%; }
.fp-art .fp-art__motion { position: absolute; inset: 0; }
.fp-art.is-live picture { visibility: hidden; }
@media (max-width: 991px) {
    .fp-art { margin: 8px auto 0; }
}
@media (max-width: 575px) {
    .fp-art .fp-art__motion { display: none; }
    .fp-art.is-live picture { visibility: visible; }
    .fp-facts { grid-template-columns: 1fr 1fr; }
    .fp-facts li:last-child { grid-column: 1 / -1; }
    .fp-facts b { font-size: 21px; }
    .info__content .fp-lede { font-size: 16px; }
    .fp-art { aspect-ratio: 728 / 675; max-width: 420px; }
}

/* section heading: no eyebrow, a plain lede under the h2 */
.fp-head { margin-bottom: 40px; max-width: 760px; }
.fp-head .h2 { text-wrap: balance; }
.fp-head p { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: #425466; }
.fp-head p a, .fp-text a, .fp-note a { color: #4791ff; text-decoration: underline; text-underline-offset: 3px; }
.fp-head p a:hover, .fp-text a:hover, .fp-note a:hover { color: #2f7ceb; }
.bg-darkblue .fp-head .h2 { color: #fff; }
.bg-darkblue .fp-head p { color: rgba(255, 255, 255, .75); }
@media (max-width: 767px) {
    .fp-head { margin-bottom: 28px; }
    .fp-head p { font-size: 16px; }
}
.fp-text { font-size: 16px; line-height: 1.6; color: #425466; }
.fp-text p { margin: 0 0 12px; }
.fp-text p:last-child { margin-bottom: 0; }
.fp-note { font-size: 13px; line-height: 1.55; color: #7a8aa0; margin: 16px 0 0; }
.bg-darkblue .fp-note { color: rgba(255, 255, 255, .55); }
.bg-darkblue .fp-note a { color: #8fbcff; }

/* data tables (main.min.css turns tables into blocks at tablet widths, undo it here) */
.fp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fp-table { display: table; white-space: normal; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fp-table th, .fp-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #e8edf5; font-size: 15px; line-height: 1.4; color: #0a2540; vertical-align: middle; }
.fp-table thead th { font-size: 12.5px; font-weight: 600; color: #6b7c93; letter-spacing: .02em; border-bottom-color: #dfe6ef; white-space: nowrap; }
.fp-table tbody th { font-weight: 600; white-space: nowrap; }
.fp-table td.r, .fp-table th.r { text-align: right; }
.fp-table tbody tr:last-child th, .fp-table tbody tr:last-child td { border-bottom: 0; }
.fp-table .fp-big { font-size: 18px; font-weight: 700; color: #0a2540; }
.fp-table .fp-sub { display: block; font-size: 12.5px; font-weight: 400; color: #7a8aa0; margin-top: 2px; }
.fp-card { background: #fff; border: 1px solid #e8edf5; border-radius: 8px; box-shadow: 0 12px 13px 7px rgba(231, 231, 231, .5); padding: 6px 8px; }
.bg-darkblue .fp-table th, .bg-darkblue .fp-table td { color: #fff; border-bottom-color: rgba(255, 255, 255, .12); }
.bg-darkblue .fp-table thead th { color: rgba(255, 255, 255, .6); border-bottom-color: rgba(255, 255, 255, .2); }
.bg-darkblue .fp-table .fp-big { color: #fff; }
.bg-darkblue .fp-table .fp-sub { color: rgba(255, 255, 255, .55); }
.fp-src { display: inline-flex; align-items: center; gap: 10px; }
.fp-src i { width: 30px; height: 30px; border-radius: 50%; background: #f2f5f9; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #5f6f86; }
.bg-darkblue .fp-src i { background: rgba(255, 255, 255, .1); color: #fff; }
.fp-src i svg { width: 15px; height: 15px; display: block; }
@media (max-width: 767px) {
    .fp-table th, .fp-table td { padding: 12px 10px; font-size: 14px; }
    .fp-table .fp-big { font-size: 16px; }
}

/* figures: a few measured numbers, each with its definition */
.fp-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.fp-figs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-figs li { border-top: 2px solid #4791ff; padding-top: 16px; min-width: 0; }
.fp-figs.or li { border-top-color: #ff6833; }
.fp-figs b { display: block; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.04em; color: #0a2540; font-variant-numeric: tabular-nums; }
.bg-darkblue .fp-figs b { color: #fff; }
.fp-figs strong { display: block; margin-top: 8px; font-size: 16px; font-weight: 600; color: #0a2540; line-height: 1.35; }
.bg-darkblue .fp-figs strong { color: #fff; }
.fp-figs span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: #6b7c93; }
.bg-darkblue .fp-figs span { color: rgba(255, 255, 255, .6); }
@media (max-width: 991px) {
    .fp-figs, .fp-figs.three { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 575px) {
    .fp-figs b { font-size: 32px; }
}

/* figures in the site's key style: icon in a tile, number, caption (darkblue sections) */
.fp-keys { row-gap: 40px; }
.fp-keys .fp-key-ico { width: 66px; height: 66px; border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.fp-keys .fp-key-ico svg { width: 42px; height: 42px; display: block; }
.fp-keys .key__item-num { font-size: 46px; white-space: nowrap; margin-bottom: 8px; }
.fp-keys .key__item-num small { font-size: .4em; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .6); }
.fp-keys .key__item-text { max-width: 270px; }
.fp-keys .fp-key-t { font-size: 15px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.fp-keys .fp-key-d { margin-top: 6px; font-size: 13.5px; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, .55); }
.fp-keys--stack { row-gap: 28px; }
.fp-keys--stack .key__item { display: grid; grid-template-columns: 66px 1fr; column-gap: 18px; align-items: start; padding-top: 0; padding-bottom: 0; }
.fp-keys--stack .fp-key-ico { grid-row: 1 / span 2; margin: 2px 0 0; }
.fp-keys--stack .key__item-num { font-size: 40px; line-height: 1.1; margin-bottom: 6px; }
.fp-keys--stack .key__item-text { max-width: none; }
@media (max-width: 1199px) {
    .fp-keys .key__item-num { font-size: 38px; }
}
@media (max-width: 767px) {
    .fp-keys { row-gap: 30px; }
    .fp-keys .fp-key-ico { width: 54px; height: 54px; border-radius: 15px; margin-bottom: 16px; }
    .fp-keys .fp-key-ico svg { width: 34px; height: 34px; }
    .fp-keys .key__item-num { font-size: 30px; }
    .fp-keys .fp-key-t { font-size: 14px; }
    .fp-keys .fp-key-d { font-size: 12.5px; }
    .fp-keys--stack .key__item { grid-template-columns: 54px 1fr; column-gap: 14px; }
}

/* rules: short definitions in a two-column grid */
.fp-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.fp-rules li { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid #e8edf5; border-radius: 8px; padding: 22px 22px 20px; min-width: 0; }
.fp-rules .fp-ico { width: 40px; height: 40px; border-radius: 10px; background: #edf4ff; color: #4791ff; display: flex; align-items: center; justify-content: center; flex: none; }
.fp-rules.or .fp-ico { background: #fff1eb; color: #ff6833; }
.fp-rules h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.35; font-weight: 600; color: #0a2540; letter-spacing: -.01em; }
.fp-rules p { margin: 0; font-size: 15px; line-height: 1.55; color: #5e718d; }
.fp-rules--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-rules--three li { flex-direction: column; }
@media (max-width: 991px) {
    .fp-rules--three { grid-template-columns: 1fr; }
    .fp-rules--three li { flex-direction: row; }
}
@media (max-width: 767px) {
    .fp-rules { grid-template-columns: 1fr; gap: 12px; }
    .fp-rules li { padding: 18px 16px; }
}

/* curve: share of first-year revenue by day (bars, numbers in the HTML) */
.fp-curve { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 220px; margin: 0; padding: 0; list-style: none; }
.fp-curve li { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.fp-curve .bar { position: relative; height: var(--h); background: rgba(71, 145, 255, .28); border-radius: 6px 6px 2px 2px; }
.fp-curve li.on .bar { background: #4791ff; }
.fp-curve .bar b { position: absolute; left: 0; right: 0; top: -24px; text-align: center; font-size: 14px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.fp-curve em { display: block; margin-top: 8px; text-align: center; font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.fp-curve-wrap { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; padding: 34px 24px 18px; }
.fp-curve-title { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.fp-curve-sub { color: rgba(255, 255, 255, .55); font-size: 13px; margin: 0 0 30px; }

.fp-table .fp-range { white-space: nowrap; }
.fp-table .fp-show-sm { display: none; }
@media (max-width: 575px) {
    .fp-table .fp-hide-sm { display: none; }
    .fp-table .fp-show-sm { display: block; white-space: nowrap; }
    .fp-table thead th, .fp-table tbody th { white-space: normal; }
}

/* compare formats: a table from 768 px, one card per format below */
.fp-compare th { min-width: 140px; }
.fp-compare td { min-width: 180px; color: #425466; }
.fp-compare thead th a { color: #4791ff; }
.fp-compare .now { background: #f6faff; }
.fp-compare thead th.now { color: #0a2540; }
.fp-compare-cards { display: none; }
@media (max-width: 767px) {
    .fp-compare-table { display: none; }
    .fp-compare-cards { display: grid; gap: 12px; }
    .fp-compare-card { background: #fff; border: 1px solid #e8edf5; border-radius: 8px; padding: 18px 18px 16px; }
    .fp-compare-card.now { border-color: rgba(71, 145, 255, .5); background: #f6faff; }
    .fp-compare-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: #0a2540; }
    .fp-compare-card h3 a { color: #4791ff; }
    .fp-compare-card dl { margin: 0; }
    .fp-compare-card dt { font-size: 12.5px; font-weight: 600; color: #7a8aa0; margin-top: 10px; }
    .fp-compare-card dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: #425466; }
}

/* links to the other side of the same format */
.fp-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fp-link { display: flex; flex-direction: column; background: #fff; border: 1px solid #e8edf5; border-radius: 8px; padding: 22px 24px 20px; color: #0a2540; transition: border-color .2s ease, box-shadow .2s ease; }
.fp-link:hover { border-color: rgba(71, 145, 255, .5); box-shadow: 0 12px 13px 7px rgba(231, 231, 231, .5); }
.fp-link b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.fp-link span { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: #5e718d; }
.fp-link em { margin-top: auto; padding-top: 14px; font-style: normal; font-size: 14px; font-weight: 600; color: #4791ff; display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 991px) {
    .fp-links { grid-template-columns: 1fr; gap: 12px; }
}

/* closing block on dark blue */
.fp-final { max-width: 760px; }
.fp-final .h2 { color: #fff; text-wrap: balance; }
.fp-final p { color: rgba(255, 255, 255, .75); font-size: 18px; line-height: 1.55; margin: 14px 0 26px; }
.fp-final .fp-final-extra { margin: 26px 0 0; font-size: 15px; color: rgba(255, 255, 255, .6); }
.fp-final .fp-final-extra a { color: #8fbcff; text-decoration: underline; text-underline-offset: 3px; }
.fp-final .fp-final-extra a:hover { color: #b3d1ff; }
@media (max-width: 767px) {
    .fp-final p { font-size: 16px; }
}

/* the road steps keep the site card; only the copy under the number is longer here */
.fp-road.or .road__item.active .road__item-num { background: #ff6833; border-color: #ffe1d6; }
.fp-road .road__item-content p { font-size: 20px; margin-bottom: 0; }
.fp-road .road__item-content .fp-step-text { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: #5e718d; letter-spacing: normal; }
@media (max-width: 767px) {
    .fp-road .road__item-content p { font-size: 18px; }
    .fp-road .road__item-content .fp-step-text { font-size: 15px; }
}