/* ─────────────────────────────────────────────────────────────────────────
   Affiliate programme — /affiliates

   The page has one idea and everything here serves it: three products that
   pay on three different clocks. So hue is mapped to time rather than chosen
   for variety — pink for the days-long track, violet for the months-long one,
   sky for the one measured in years. Hot to cool, fast to slow. A reader who
   never reads the labels still gets the argument.

   Type does three jobs and each has its own face, all three already loaded by
   the site: Sora carries the display, Plus Jakarta the prose, and Space
   Grotesk every number — rates, horizons, step markers, terms. Nowhere else on
   the site is Space Grotesk the voice of data; here it is, consistently, and
   that is what makes the page feel like an instrument rather than a brochure.

   Namespaced .zvv-ap- throughout so nothing here can reach the rest of the
   site, and nothing there reaches in.
   ───────────────────────────────────────────────────────────────────────── */

.zvv-ap-page {
    /* Time-mapped track hues. */
    --ap-booking:    #ff79c6;
    --ap-estate:     #a78bfa;
    --ap-investment: #38bdf8;

    --ap-violet: #7c3aed;
    --ap-ink:    #0b0718;
    --ap-ink-2:  #150c2e;

    /* Surfaces, flipped by the theme below. */
    --ap-bg:      #ffffff;
    --ap-bg-2:    #f7f5ff;
    --ap-fg:      #16112b;
    --ap-fg-soft: #5b5478;
    --ap-line:    rgba(124, 58, 237, 0.14);
    --ap-card:    rgba(255, 255, 255, 0.86);

    --ap-display: 'Sora', system-ui, sans-serif;
    --ap-body:    'Plus Jakarta Sans', system-ui, sans-serif;
    --ap-data:    'Space Grotesk', ui-monospace, monospace;

    background: var(--ap-bg);
    color: var(--ap-fg);
}

[data-bs-theme="dark"] .zvv-ap-page {
    --ap-bg:      #0b0718;
    --ap-bg-2:    #120a26;
    --ap-fg:      #f3efff;
    --ap-fg-soft: rgba(243, 239, 255, 0.62);
    --ap-line:    rgba(167, 139, 250, 0.18);
    --ap-card:    rgba(28, 18, 56, 0.72);
}

.zvv-ap-page main { font-family: var(--ap-body); }

.zvv-ap-shell {
    width: min(1180px, 100% - 2.5rem);
    margin-inline: auto;
}

/* ── Hero ─────────────────────────────────────────────────────────────────
   Dark in both themes on purpose: it is the one band of the page that behaves
   like an image rather than a document, and the tracks below read out of it. */
.zvv-ap-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ap-ink);
    color: #f3efff;
    padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}

/* Three slow-drifting fields of colour, kept well under the ink.
   At full strength this stopped being light in a room and became a gradient
   wallpaper — the stock look every one of these pages has. Held down to a
   third and blurred harder, the violet ground stays the subject and the colour
   is something happening inside it. */
.zvv-ap-aurora {
    position: absolute;
    inset: -25%;
    z-index: -1;
    filter: blur(130px);
    opacity: 0.34;
}

.zvv-ap-aurora span {
    position: absolute;
    display: block;
    width: 40vw;
    height: 40vw;
    min-width: 300px;
    min-height: 300px;
    border-radius: 50%;
}

/* The far corners stay dark, so the band has edges rather than bleeding into
   the header and the section under it. */
.zvv-ap-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 22% 30%, transparent 20%, rgba(11, 7, 24, 0.72) 100%),
        linear-gradient(180deg, rgba(11, 7, 24, 0.55), transparent 30%, rgba(11, 7, 24, 0.8));
    pointer-events: none;
}

.zvv-ap-aurora-a { background: var(--ap-violet);     top: 4%;  left: -4%;  animation: zvv-ap-drift-a 26s ease-in-out infinite; }
.zvv-ap-aurora-b { background: var(--ap-booking);    top: 28%; left: 38%;  animation: zvv-ap-drift-b 32s ease-in-out infinite; }
.zvv-ap-aurora-c { background: var(--ap-investment); top: 2%;  right: -6%; animation: zvv-ap-drift-c 29s ease-in-out infinite; }

@keyframes zvv-ap-drift-a { 50% { transform: translate3d(9%, 12%, 0) scale(1.14); } }
@keyframes zvv-ap-drift-b { 50% { transform: translate3d(-11%, -8%, 0) scale(0.88); } }
@keyframes zvv-ap-drift-c { 50% { transform: translate3d(-7%, 14%, 0) scale(1.09); } }

.zvv-ap-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.6rem;
    padding: 0.4rem 0.95rem 0.4rem 0.7rem;
    border: 1px solid rgba(196, 181, 253, 0.28);
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.16);
    font-family: var(--ap-data);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #ddd3ff;
}

.zvv-ap-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
}

.zvv-ap-title {
    margin: 0;
    font-family: var(--ap-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 7.4vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.zvv-ap-line {
    display: block;
    /* Set up for the load sequence below; overridden when motion is reduced. */
    animation: zvv-ap-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.zvv-ap-line:nth-child(1) { animation-delay: 0.05s; }
.zvv-ap-line:nth-child(2) { animation-delay: 0.15s; color: rgba(243, 239, 255, 0.72); }
.zvv-ap-line:nth-child(3) { animation-delay: 0.25s; }

.zvv-ap-line-hot {
    background: linear-gradient(96deg, var(--ap-booking), #c4b5fd 46%, var(--ap-investment));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes zvv-ap-rise {
    from { opacity: 0; transform: translate3d(0, 0.5em, 0); }
}

.zvv-ap-lede {
    max-width: 46ch;
    margin: 1.7rem 0 0;
    font-size: clamp(1rem, 1.45vw, 1.15rem);
    line-height: 1.65;
    color: rgba(243, 239, 255, 0.74);
}

.zvv-ap-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2.4rem;
}

.zvv-ap-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.92rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--ap-body);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s, background 0.18s, border-color 0.18s;
}

.zvv-ap-btn i { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.zvv-ap-btn:hover i { transform: translateX(3px); }

.zvv-ap-btn-primary {
    background: linear-gradient(96deg, var(--ap-violet), #9d5cff);
    color: #fff;
    box-shadow: 0 10px 30px -10px rgba(124, 58, 237, 0.9);
}

.zvv-ap-btn-primary:hover,
.zvv-ap-btn-primary:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 42px -12px rgba(124, 58, 237, 0.95);
}

.zvv-ap-btn-ghost {
    border-color: rgba(196, 181, 253, 0.35);
    background: rgba(255, 255, 255, 0.04);
    color: #e7e0ff;
}

.zvv-ap-btn-ghost:hover,
.zvv-ap-btn-ghost:focus-visible {
    border-color: rgba(196, 181, 253, 0.7);
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.zvv-ap-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.8rem;
    margin: 2.6rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.86rem;
    color: rgba(243, 239, 255, 0.55);
}

.zvv-ap-hero-facts strong { color: #f3efff; font-weight: 700; }

/* ── Section furniture ── */
.zvv-ap-sec-head { max-width: 58ch; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }

.zvv-ap-sec-head h2 {
    margin: 0 0 0.7rem;
    font-family: var(--ap-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    letter-spacing: -0.028em;
    color: var(--ap-fg);
}

.zvv-ap-sec-head p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--ap-fg-soft); }

/* ── The payout clock ────────────────────────────────────────────────────── */
.zvv-ap-clock {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    background: var(--ap-bg);
}

/* The axis the three tracks are pinned to.
   It runs on the same three-column grid as the cards, so every tick sits dead
   centre over its own card at any width. Placing them at hand-picked
   percentages instead left each one a few pixels off its card — and a tick
   that does not quite stand over its card quietly undoes the only thing this
   section is trying to say. */
.zvv-ap-axis {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    height: 2.6rem;
    margin-bottom: 1.1rem;
}

.zvv-ap-axis-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 0.55rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ap-booking), var(--ap-estate) 46%, var(--ap-investment));
    transform-origin: 0 50%;
    animation: zvv-ap-draw 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

@keyframes zvv-ap-draw { from { transform: scaleX(0); } }

.zvv-ap-axis-tick { text-align: center; }

/* Each tick wears its own track's hue, so the axis is colour-keyed to the
   cards standing under it rather than uniformly violet. */
.zvv-ap-axis-tick::before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    margin: 0.2rem auto 0.5rem;
    border-radius: 50%;
    background: var(--ap-bg);
    border: 2px solid var(--tick, var(--ap-estate));
}

.zvv-ap-axis-tick-booking    { --tick: var(--ap-booking); }
.zvv-ap-axis-tick-estate     { --tick: var(--ap-estate); }
.zvv-ap-axis-tick-investment { --tick: var(--ap-investment); }

.zvv-ap-axis-tick b {
    font-family: var(--ap-data);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ap-fg-soft);
}

.zvv-ap-tracks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.zvv-ap-track {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.6rem 1.5rem 1.5rem;
    border: 1px solid var(--ap-line);
    border-radius: 20px;
    background: var(--ap-card);
    backdrop-filter: blur(8px);
    /* The reveal resting state; .is-in releases it. */
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s),
        border-color 0.22s,
        box-shadow 0.22s;
}

.zvv-ap-track.is-in { opacity: 1; transform: none; }

/* Each track is stepped down the page in the order it sits on the axis, so the
   row itself slopes the way the clock runs. */
.zvv-ap-track-estate     { margin-top: 1.6rem; }
.zvv-ap-track-investment { margin-top: 3.2rem; }

/* The hue band that ties the card to its point on the axis. */
.zvv-ap-track::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--track, var(--ap-estate));
}

/* The pointer-follow glow. Sits under the content, never over it. */
.zvv-ap-track::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
                color-mix(in srgb, var(--track, var(--ap-estate)) 22%, transparent), transparent 70%);
    transition: opacity 0.25s;
}

.zvv-ap-track:hover::after,
.zvv-ap-track:focus-within::after { opacity: 1; }

.zvv-ap-track:hover,
.zvv-ap-track:focus-within {
    border-color: color-mix(in srgb, var(--track, var(--ap-estate)) 55%, transparent);
    box-shadow: 0 22px 50px -28px color-mix(in srgb, var(--track, var(--ap-estate)) 85%, transparent);
}

.zvv-ap-track-booking    { --track: var(--ap-booking); }
.zvv-ap-track-estate     { --track: var(--ap-estate); }
.zvv-ap-track-investment { --track: var(--ap-investment); }

.zvv-ap-track-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.zvv-ap-track-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--track) 16%, transparent);
    color: var(--track);
    font-size: 1.15rem;
}

.zvv-ap-track-horizon {
    padding: 0.3rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--track) 40%, transparent);
    border-radius: 999px;
    font-family: var(--ap-data);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--track);
}

.zvv-ap-track h3 {
    margin: 0 0 0.35rem;
    font-family: var(--ap-display);
    font-weight: 700;
    font-size: 1.42rem;
    letter-spacing: -0.02em;
    color: var(--ap-fg);
}

.zvv-ap-track-lede { margin: 0 0 1.25rem; font-size: 0.92rem; color: var(--ap-fg-soft); }

.zvv-ap-rate {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.3rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--ap-line);
}

.zvv-ap-rate-num {
    font-family: var(--ap-data);
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--track);
}

.zvv-ap-rate-unit { font-size: 0.84rem; color: var(--ap-fg-soft); }

.zvv-ap-track-facts { margin: 0 0 1.1rem; }

.zvv-ap-track-facts dt {
    font-family: var(--ap-data);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ap-fg-soft);
    opacity: 0.75;
}

.zvv-ap-track-facts dd {
    margin: 0.2rem 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ap-fg);
}

.zvv-ap-track-detail {
    margin: 0 0 1.3rem;
    font-size: 0.87rem;
    line-height: 1.6;
    color: var(--ap-fg-soft);
}

.zvv-ap-track-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--track);
}

.zvv-ap-track-pick i { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.zvv-ap-track-pick:hover { color: var(--track); text-decoration: underline; }
.zvv-ap-track-pick:hover i { transform: translateX(3px); }

.zvv-ap-rates-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2.2rem 0 0;
    font-size: 0.84rem;
    color: var(--ap-fg-soft);
}

/* ── Steps ───────────────────────────────────────────────────────────────── */
.zvv-ap-steps {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    background: var(--ap-bg-2);
    border-block: 1px solid var(--ap-line);
}

.zvv-ap-step-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.zvv-ap-step-list li {
    position: relative;
    padding-top: 1.9rem;
    border-top: 1px solid var(--ap-line);
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.zvv-ap-step-list li.is-in { opacity: 1; transform: none; }
.zvv-ap-step-list li:nth-child(2) { transition-delay: 0.07s; }
.zvv-ap-step-list li:nth-child(3) { transition-delay: 0.14s; }
.zvv-ap-step-list li:nth-child(4) { transition-delay: 0.21s; }

/* The marker sits on the rule, so the four steps read as one run. */
.zvv-ap-step-n {
    position: absolute;
    top: -0.72rem;
    left: 0;
    padding-right: 0.6rem;
    background: var(--ap-bg-2);
    font-family: var(--ap-data);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ap-violet);
}

.zvv-ap-step-list h3 {
    margin: 0 0 0.4rem;
    font-family: var(--ap-display);
    font-weight: 700;
    font-size: 1.06rem;
    color: var(--ap-fg);
}

.zvv-ap-step-list p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ap-fg-soft); }

/* ── Terms ───────────────────────────────────────────────────────────────── */
.zvv-ap-terms { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--ap-bg); }

.zvv-ap-terms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.zvv-ap-term {
    padding: 1.4rem 1.3rem;
    border: 1px solid var(--ap-line);
    border-radius: 16px;
    background: var(--ap-card);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.zvv-ap-term.is-in { opacity: 1; transform: none; }
.zvv-ap-term:nth-child(2) { transition-delay: 0.06s; }
.zvv-ap-term:nth-child(3) { transition-delay: 0.12s; }
.zvv-ap-term:nth-child(4) { transition-delay: 0.18s; }

.zvv-ap-term-value {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ap-data);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ap-violet);
}

[data-bs-theme="dark"] .zvv-ap-term-value { color: #c4b5fd; }

.zvv-ap-term strong { display: block; font-size: 0.92rem; color: var(--ap-fg); }
.zvv-ap-term small { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--ap-fg-soft); }

/* ── Apply ───────────────────────────────────────────────────────────────── */
.zvv-ap-join {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem);
    background: var(--ap-ink);
    color: #f3efff;
}

.zvv-ap-join::before {
    content: '';
    position: absolute;
    inset: auto -10% -60% 40%;
    height: 60vh;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.5), transparent 70%);
    filter: blur(70px);
    pointer-events: none;
}

.zvv-ap-join-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.zvv-ap-join-copy h2 {
    margin: 0 0 0.9rem;
    font-family: var(--ap-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    letter-spacing: -0.028em;
}

.zvv-ap-join-copy p { margin: 0 0 1.6rem; line-height: 1.65; color: rgba(243, 239, 255, 0.72); }

.zvv-ap-join-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }

.zvv-ap-join-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: rgba(243, 239, 255, 0.82);
}

.zvv-ap-join-list i { color: #4ade80; }

.zvv-ap-form-card {
    padding: clamp(1.5rem, 3vw, 2.2rem);
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 24px;
    background: rgba(21, 12, 46, 0.78);
    backdrop-filter: blur(14px);
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}

.zvv-ap-form { display: grid; gap: 1.1rem; }

.zvv-ap-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.zvv-ap-field { display: block; border: 0; padding: 0; margin: 0; min-width: 0; }

.zvv-ap-field > span,
.zvv-ap-field > legend {
    display: block;
    margin-bottom: 0.45rem;
    padding: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(243, 239, 255, 0.86);
}

.zvv-ap-field > span small { font-weight: 500; color: rgba(243, 239, 255, 0.45); }

.zvv-ap-field input[type="text"],
.zvv-ap-field input[type="email"],
.zvv-ap-field select,
.zvv-ap-field textarea {
    width: 100%;
    padding: 0.78rem 0.95rem;
    border: 1px solid rgba(167, 139, 250, 0.24);
    border-radius: 12px;
    background: rgba(11, 7, 24, 0.6);
    color: #f3efff;
    font-family: var(--ap-body);
    font-size: 0.94rem;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.zvv-ap-field textarea { resize: vertical; min-height: 88px; }

.zvv-ap-field input::placeholder,
.zvv-ap-field textarea::placeholder { color: rgba(243, 239, 255, 0.34); }

.zvv-ap-field input:focus,
.zvv-ap-field select:focus,
.zvv-ap-field textarea:focus {
    outline: none;
    border-color: #a78bfa;
    background: rgba(11, 7, 24, 0.85);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.26);
}

.zvv-ap-field [aria-invalid="true"] { border-color: #fb7185; }

.zvv-ap-field select option { background: #150c2e; color: #f3efff; }

/* Track pills — the same three hues, so choosing here echoes the clock above. */
.zvv-ap-tracks-field { border: 0; }
.zvv-ap-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.zvv-ap-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(167, 139, 250, 0.26);
    border-radius: 999px;
    background: rgba(11, 7, 24, 0.5);
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(243, 239, 255, 0.8);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.18s;
}

.zvv-ap-pill:hover { transform: translateY(-1px); border-color: rgba(196, 181, 253, 0.6); }
.zvv-ap-pill input { position: absolute; opacity: 0; pointer-events: none; }
.zvv-ap-pill i { color: var(--pill, #a78bfa); }

.zvv-ap-pill-booking    { --pill: var(--ap-booking); }
.zvv-ap-pill-estate     { --pill: var(--ap-estate); }
.zvv-ap-pill-investment { --pill: var(--ap-investment); }

.zvv-ap-pill:has(input:checked) {
    border-color: var(--pill);
    background: color-mix(in srgb, var(--pill) 18%, transparent);
    color: #fff;
}

.zvv-ap-pill:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.3); }

.zvv-ap-submit { justify-content: center; width: 100%; margin-top: 0.3rem; }

.zvv-ap-fineprint { margin: 0; font-size: 0.78rem; text-align: center; color: rgba(243, 239, 255, 0.45); }

.zvv-ap-err { display: block; margin-top: 0.4rem; font-size: 0.8rem; font-style: normal; color: #fda4af; }

.zvv-ap-err-top {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(251, 113, 133, 0.4);
    border-radius: 12px;
    background: rgba(251, 113, 133, 0.12);
}

/* The honeypot. Removed from the page for everyone who is not a bot reading
   the markup — off-screen rather than display:none, which some bots skip. */
.zvv-ap-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.zvv-ap-done { text-align: center; padding: 1.5rem 0.5rem; }

.zvv-ap-done-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.16);
    color: #4ade80;
    font-size: 1.8rem;
    animation: zvv-ap-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes zvv-ap-pop { from { opacity: 0; transform: scale(0.6); } }

.zvv-ap-done h3 {
    margin: 0 0 0.6rem;
    font-family: var(--ap-display);
    font-weight: 700;
    font-size: 1.4rem;
}

.zvv-ap-done p { margin: 0 0 1.5rem; line-height: 1.6; color: rgba(243, 239, 255, 0.72); }

/* The site footer keeps a 3rem top margin, which is right for a page that ends
   on the body background and reads as a white stripe on one that ends — as
   this one does — on a dark panel. Two dark blocks with a gap of page showing
   between them. The apply panel already carries the breathing room in its own
   padding, so the footer butts straight onto it.
   The error pages arrived at the same place: see .zvv-error-page .zvv-footer. */
.zvv-ap-page .zvv-footer { margin-top: 0; }

/* ── Narrower ────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .zvv-ap-tracks { grid-template-columns: 1fr; }
    /* The stagger was the axis; without three columns there is no axis to
       slope against, so the cards sit level and the axis itself goes. */
    .zvv-ap-track-estate,
    .zvv-ap-track-investment { margin-top: 0; }
    .zvv-ap-axis { display: none; }
    .zvv-ap-step-list { grid-template-columns: repeat(2, 1fr); }
    .zvv-ap-terms-grid { grid-template-columns: repeat(2, 1fr); }
    .zvv-ap-join-shell { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .zvv-ap-shell { width: min(1180px, 100% - 1.75rem); }
    .zvv-ap-step-list { grid-template-columns: 1fr; }
    .zvv-ap-terms-grid { grid-template-columns: 1fr; }
    .zvv-ap-field-row { grid-template-columns: 1fr; }
    .zvv-ap-cta-row .zvv-ap-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Keyboard ────────────────────────────────────────────────────────────── */
.zvv-ap-page a:focus-visible,
.zvv-ap-page button:focus-visible {
    outline: 2px solid #c4b5fd;
    outline-offset: 3px;
}

/* ── Reduced motion ──────────────────────────────────────────────────────
   Everything that moves on its own stops; everything that was waiting to be
   revealed is simply present. The page still works, it just does not perform. */
@media (prefers-reduced-motion: reduce) {
    .zvv-ap-aurora span,
    .zvv-ap-line,
    .zvv-ap-axis-line,
    .zvv-ap-done-mark { animation: none; }

    .zvv-ap-track,
    .zvv-ap-step-list li,
    .zvv-ap-term {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .zvv-ap-btn,
    .zvv-ap-btn i,
    .zvv-ap-pill,
    .zvv-ap-track-pick i { transition: none; }
}

/* ── Not open yet ─────────────────────────────────────────────────────────
   The programme has no referral link, no click tracking, no commission ledger
   and no payout, and the page says so rather than describing them. These are
   the states that says it in. See app/affiliate_program.php.

   Quiet rather than alarming: this is a page somebody may still want to leave
   their address on, and a red banner reads as a fault. It has to be
   unmissable and calm at once — hence the tone of a note rather than a warning,
   at a size the eye reaches before the headline it sits under. */

.zvv-ap-notice {
    margin: 0 0 1.4rem;
    padding: 0.95rem 1.15rem;
    max-width: 46rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--ap-violet) 32%, transparent);
    background: color-mix(in srgb, var(--ap-violet) 9%, transparent);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ap-fg);
}

.zvv-ap-notice strong { color: var(--ap-violet); }

[data-bs-theme="dark"] .zvv-ap-notice strong { color: #c4b5fd; }

/* An unset figure, where a figure would be. Deliberately not styled as a
   number: it is a sentence standing in a place the eye expects a rate, and
   making it look like data is how "Not published yet" gets read as a value. */
.zvv-ap-rate-unset,
.zvv-ap-term-value.zvv-ap-term-unset {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ap-fg-soft);
    font-style: italic;
}

.zvv-ap-rate-unset { display: inline-block; line-height: 1.4; }

[data-bs-theme="dark"] .zvv-ap-term-value.zvv-ap-term-unset { color: var(--ap-fg-soft); }