/* Affiliates: sales page in front of the application. Builds on home.css and contact.css. */

.af-hero {
    position: relative;
    overflow: hidden;
    padding: 84px 0 72px;
    background: radial-gradient(120% 90% at 50% 0%, #2a5464 0%, #234857 45%, #1a3340 100%);
    color: #d3dee3;
    text-align: center;
}

/* Big brand circles drifting behind everything */
.af-bg {
    position: absolute;
    border-radius: 50%;
    animation: home-circle-float 11s ease-in-out infinite;
}

.af-bg1 { top: -140px; left: -120px; width: 380px; height: 380px; background: var(--home-orange); opacity: 0.95; }
.af-bg2 { top: 60px; right: -110px; width: 300px; height: 300px; background: #a8d1c3; animation-delay: -4s; }
.af-bg3 { bottom: -170px; right: -40px; width: 280px; height: 280px; background: var(--home-gold); animation-delay: -7s; }
.af-bg4 { bottom: 70px; left: 6%; width: 110px; height: 110px; background: var(--home-rust); animation-delay: -2s; }
.af-bg5 { top: 46%; left: 22%; width: 26px; height: 26px; background: #f1bd76; animation-delay: -5s; }

.af-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.af-hero .home-eyebrow { justify-content: center; color: var(--home-gold); }

.home-new.af-hero h1 {
    max-width: 900px;
    margin: 14px auto 0;
    color: white;
    font-size: clamp(42px, 6vw, 78px);
    line-height: 1.02;
    text-wrap: balance;
}

.home-new.af-hero h1 span { color: var(--home-gold); }

.af-lede {
    max-width: 640px;
    margin: 24px auto 0;
    color: #d3dee3;
    font-size: 19px;
    line-height: 1.65;
}

.af-lede strong { color: white; }

.af-actions { justify-content: center; }

.af-hero .home-button-ghost {
    border-color: rgb(255 255 255 / 70%);
    color: white !important;
}

.af-hero .home-button-ghost:hover {
    background: white;
    color: var(--home-ink) !important;
}

/* The referral code as a ticket, with wins floating around it */
.af-ticket-wrap {
    position: relative;
    width: min(640px, 100%);
    margin: 56px auto 0;
    padding: 46px 0 40px;
}

.af-ticket {
    position: relative;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    border-radius: 22px;
    background: #fffdf9;
    box-shadow: 0 34px 70px rgb(0 0 0 / 32%);
    transform: rotate(-2deg);
    text-align: left;
    color: var(--home-ink);
}

.af-ticket-stub {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 22px 0 0 22px;
    background: var(--home-orange);
    border-right: 3px dashed #fffdf9;
}

/* Ticket notches */
.af-ticket-stub::before,
.af-ticket-stub::after {
    content: "";
    position: absolute;
    right: -14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #234857;
}

.af-ticket-stub::before { top: -13px; }
.af-ticket-stub::after { bottom: -13px; }

.af-ticket-label { font-size: 22px; font-weight: 900; color: var(--home-ink); }
.af-ticket-sub { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--home-ink); }

.af-ticket-main {
    display: grid;
    gap: 12px;
    padding: 24px 28px;
}

.af-ticket-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--home-muted);
    font-size: 15px;
    font-weight: 700;
}

.af-sample {
    padding: 3px 9px;
    border-radius: 999px;
    background: #f3ede3;
    color: var(--home-muted);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.af-digits { display: flex; gap: 8px; }

.af-digits b {
    display: grid;
    flex: 1;
    max-width: 54px;
    aspect-ratio: 4 / 5;
    place-items: center;
    border-radius: 12px;
    background: #f3ede3;
    color: var(--home-teal);
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    animation: af-digit 0.5s ease both;
}

.af-digits b:nth-child(1) { animation-delay: 0.2s; background: #fbf3d9; }
.af-digits b:nth-child(2) { animation-delay: 0.3s; }
.af-digits b:nth-child(3) { animation-delay: 0.4s; background: #e2eee8; }
.af-digits b:nth-child(4) { animation-delay: 0.5s; }
.af-digits b:nth-child(5) { animation-delay: 0.6s; background: #fdf0e3; }
.af-digits b:nth-child(6) { animation-delay: 0.7s; }
.af-digits b:nth-child(7) { animation-delay: 0.8s; background: #fbf3d9; }

@keyframes af-digit { from { opacity: 0; transform: translateY(10px) scale(0.9); } }

.af-ticket-note { color: var(--home-muted); font-size: 14px; }

.af-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 10px;
    border-radius: 999px;
    background: white;
    box-shadow: 0 14px 30px rgb(0 0 0 / 22%);
    color: var(--home-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    animation: home-circle-float 7s ease-in-out infinite;
}

.af-float em {
    padding: 3px 9px;
    border-radius: 999px;
    background: #e2eee8;
    color: #234857;
    font-size: 12px;
    font-style: normal;
}

.af-fdot {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: var(--home-ink);
    font-size: 13px;
}

.af-zelle { background: var(--home-orange); }

.af-f1 { top: 0; left: -60px; }
.af-f2 { bottom: 0; right: -70px; animation-delay: -2.5s; }
.af-f3 { top: 8px; right: -40px; animation-delay: -5s; }

.af-perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    color: #d3dee3;
    font-size: 15px;
}

.af-perks li::before {
    content: "✓";
    margin-right: 8px;
    color: var(--home-gold);
    font-weight: 700;
}

/* How it works */
.af-steps { background: var(--home-teal); }
.home-new.af-steps h2 { color: white; }
.af-steps .home-eyebrow { color: var(--home-gold); }
.af-steps .ct-why-card { border-color: transparent; }
.af-steps .ct-why-card:hover { border-color: var(--home-gold); box-shadow: 0 18px 40px rgb(0 0 0 / 25%); }

/* Why it feels good */
.af-good {
    background: white;
}

.af-good-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.af-good-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 28px;
    border: 1px solid #dcebe4;
    border-radius: 20px;
    background: #f4faf7;
}

.af-good-icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 50%;
    background: #c6ddd3;
}

.af-good-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #234857;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-new .af-good-card h3 {
    margin: 0;
    color: var(--home-ink);
    font-size: 20px;
    line-height: 1.25;
}

.af-good-card p {
    margin: 8px 0 0;
    color: var(--home-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* Who it's for */
.af-who { background: white; }

.af-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 1020px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.af-chips li {
    flex: 0 0 calc((100% - 24px) / 3);
    box-sizing: border-box;
    text-align: center;
    padding: 12px 12px;
    border-radius: 999px;
    background: #faf8f4;
    border: 1px solid #ece2d4;
    color: var(--home-ink);
    font-size: 15px;
}

.af-chips li:nth-child(4n+1) { background: #fdf0e3; border-color: #f6dcc0; }
.af-chips li:nth-child(4n+2) { background: #e2eee8; border-color: #c6ddd3; }
.af-chips li:nth-child(4n+3) { background: #fbf3d9; border-color: #f1e1a8; }

/* Questions */
.af-faq { background: var(--home-cream); }

.af-faq-list {
    display: grid;
    gap: 12px;
    max-width: 780px;
    margin: 0 auto;
}

.af-faq details {
    padding: 20px 24px;
    border: 1px solid #ece6dc;
    border-radius: 16px;
    background: white;
}

.af-faq summary {
    cursor: pointer;
    color: var(--home-ink);
    font-size: 18px;
    font-weight: 700;
    list-style: none;
}

.af-faq summary::-webkit-details-marker { display: none; }

.af-faq summary::after {
    content: "+";
    float: right;
    color: var(--home-orange);
    font-size: 22px;
    line-height: 1;
}

.af-faq details[open] summary::after { content: "–"; }

.af-faq details p {
    margin: 12px 0 0;
    color: var(--home-muted);
    font-size: 16px;
    line-height: 1.6;
}

.af-faq a { color: var(--home-rust); }

@media (prefers-reduced-motion: reduce) {
    .af-bg, .af-float, .af-digits b { animation: none; }
}

@media (max-width: 1180px) {
    .af-bg1 { left: -220px; }
    .af-bg2 { right: -230px; }
    .af-bg3 { right: -150px; bottom: -200px; }
    .af-bg4 { left: -40px; }
}

@media (max-width: 960px) {
    .af-good-grid { grid-template-columns: 1fr; }
    .af-chips li { flex-basis: calc((100% - 12px) / 2); }
    .af-f1 { left: -10px; }
    .af-f2 { right: -10px; }
    .af-f3 { display: none; }
}

@media (max-width: 640px) {
    .af-hero { padding: 56px 0 56px; }
    .af-bg4, .af-bg5 { display: none; }
    .af-bg1 { width: 220px; height: 220px; left: -130px; top: -150px; }
    .af-bg2 { width: 160px; height: 160px; top: 120px; right: -90px; }
    .af-bg3 { width: 180px; height: 180px; right: -70px; bottom: -120px; }
    .af-ticket { grid-template-columns: 70px minmax(0, 1fr); }
    .af-ticket-label { font-size: 15px; }
    .af-ticket-sub { font-size: 9px; }
    .af-ticket-main { padding: 18px 16px; }
    .af-digits { gap: 5px; }
    .af-float { font-size: 12px; }
    .af-float em { display: none; }
    .af-good-card { grid-template-columns: 1fr; padding: 24px; }
    .af-chips li { flex-basis: 100%; }
}

.af-who .home-heading { max-width: 980px; }
.home-new .af-who h2 { text-wrap: balance; }

.af-who .af-who-lede {
    max-width: 640px;
    margin: 16px auto 0;
    color: var(--home-muted);
    font-size: 18px;
    line-height: 1.6;
}

.af-link b { letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }