/*===================================================
    // STAGE
    /==================================================*/

    .onboard-stage {
        position: relative;
        max-width: 1160px;
        height: 720px;
        margin: var(--margin-large) auto 0;
        animation: heroFade 1200ms ease 380ms both;
    }

    /* Phone is centred under the audience rule; arrows measure against this position */
    .onboard-stage .hero-phone {
        position: absolute;
        top: 72px;
        left: 50%;
        z-index: 3;
        margin-left: -150px;
    }

    .onboard-field,
    .onboard-arrows,
    .onboard-rule,
    .onboard-screens {
        transition: opacity 600ms ease;
    }

    .is-resetting .onboard-field,
    .is-resetting .onboard-arrows,
    .is-resetting .onboard-rule,
    .is-resetting .onboard-screens {
        opacity: 0;
    }


    /*===================================================
    // AUDIENCE RULE
    /==================================================*/

    .onboard-rule {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 4;
        display: flex;
        align-items: center;
        padding: var(--padding-xxsmall) var(--padding-xxsmall) var(--padding-xxsmall) var(--padding-small);
        border-radius: 999px;
        border: 1px solid var(--hairline-color);
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        white-space: nowrap;
        font-size: 12px;
        font-weight: 500;
        color: var(--ink-color);
        transform: translateX(-50%);
    }

    .onboard-rule-title {
        font-size: 10px;
        color: var(--ink-soft-color);
    }

    /* Chips grow in from zero width so the pill widens as filters are added */
    .onboard-rule-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--gap-xxsmall);
        max-width: 0;
        margin-left: 0;
        padding: var(--padding-xxsmall) 0;
        overflow: hidden;
        border-radius: 999px;
        background: #f1f4f8;
        opacity: 0;
        transition:
            max-width 700ms var(--ease-out),
            margin-left 700ms var(--ease-out),
            padding 700ms var(--ease-out),
            opacity 500ms ease;
    }

    .onboard-rule-chip.is-visible {
        max-width: 180px;
        margin-left: var(--margin-xsmall);
        padding: var(--padding-xxsmall) var(--padding-xsmall);
        opacity: 1;
    }

    .onboard-rule-key {
        color: var(--ink-soft-color);
    }

    .onboard-rule-count {
        margin-left: var(--margin-xsmall);
        padding: var(--padding-xxsmall) var(--padding-xsmall);
        border-radius: 999px;
        background: var(--primary-color-8);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--primary-dark-color);
    }


    /*===================================================
    // ARROWS
    /==================================================*/

    .onboard-arrows {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
    }

    .onboard-arrow {
        transition: opacity 700ms ease;
    }

    .onboard-arrow.is-faded {
        opacity: 0;
    }

    .onboard-arrow-line {
        fill: none;
        stroke: var(--primary-color);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-dasharray: 5 6;
    }

    #onboard-arrowhead path {
        fill: none;
        stroke: var(--primary-color);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Mask stroke draws the dashed line on; wide enough to uncover the arrowhead */
    .onboard-arrow-reveal {
        fill: none;
        stroke: #fff;
        stroke-width: 24;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        transition: stroke-dashoffset 1200ms var(--ease-in-out);
    }

    .onboard-arrow-reveal.is-drawn {
        stroke-dashoffset: 0;
    }


    /*===================================================
    // PEOPLE
    /==================================================*/

    .onboard-field {
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    /* Centred with negative margins, not transforms, so offsetLeft/Top give the true centre */
    .onboard-person {
        position: absolute;
        left: calc(var(--x) * 1%);
        top: calc(var(--y) * 1%);
        width: var(--size);
        height: var(--size);
        margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
        transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 1));
        /* Depth of field: large 60px is sharp, medium 1px, small 2px */
        filter: blur(calc((60px - var(--size)) / 24));
        transition:
            transform 1300ms var(--ease-in-out),
            width 1300ms var(--ease-in-out),
            height 1300ms var(--ease-in-out),
            margin 1300ms var(--ease-in-out),
            opacity 600ms ease,
            filter 800ms ease;
    }

    /* Members are resized, not scaled, so every outline stays a true 1.5px */
    .onboard-person.is-grouped {
        --member-size: 34px;

        width: var(--member-size);
        height: var(--member-size);
        margin: calc(var(--member-size) / -2) 0 0 calc(var(--member-size) / -2);
    }

    .onboard-person-bubble {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid var(--hairline-color);
        background: #fff;
        outline: 1.5px solid var(--hairline-color);
        outline-offset: 2px;
        animation: personFloat calc(6s + var(--i) * 0.37s) ease-in-out calc(var(--i) * -0.9s) infinite alternate;
        transition: outline-color 500ms ease, filter 600ms ease;
    }

    .onboard-person-bubble img {
        display: block;
        width: 100%;
        height: 100%;
    }

    @keyframes personFloat {
        from { transform: translateY(-4px); }
        to { transform: translateY(4px); }
    }

    .onboard-person.is-match .onboard-person-bubble {
        outline-color: var(--primary-color);
    }

    .onboard-person.is-match {
        filter: none;
    }

    .onboard-person.is-dimmed {
    }

    .onboard-person.is-dimmed .onboard-person-bubble {
        filter: grayscale(1);
    }


    /*=== New Starter ===*/

    .onboard-person.is-newcomer {
        --s: 0.6;

        opacity: 0;
    }

    .onboard-person.is-newcomer.is-visible {
        --s: 1;

        opacity: 1;
    }

    .onboard-person-label {
        position: absolute;
        top: 50%;
        left: calc(100% + var(--margin-xsmall));
        display: flex;
        flex-direction: column;
        padding: var(--padding-xxsmall) var(--padding-xsmall);
        border-radius: 10px;
        border: 1px solid var(--hairline-color);
        background: #fff;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--dark-dark-color);
        transform: translateY(-50%);
        transition: opacity 400ms ease;
    }

    .onboard-person-label small {
        font-size: 10.5px;
        font-weight: 500;
        color: var(--ink-soft-color);
    }

    .onboard-person.is-grouped .onboard-person-label {
        opacity: 0;
    }


    /*=== Team Ring ===*/

    .onboard-group {
        position: absolute;
        left: calc(var(--x) * 1%);
        top: calc(var(--y) * 1%);
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        opacity: 0;
        transform: scale(0.92);
        transition: opacity 700ms ease, transform 900ms var(--ease-out);
    }

    .onboard-group.is-visible {
        opacity: 1;
        transform: none;
    }

    /* Dashed border lives on its own layer so it can turn without turning the members */
    .onboard-group::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1.5px dashed var(--primary-color);
        animation: groupTurn 40s linear infinite;
    }

    .onboard-group-orbit {
        position: absolute;
        inset: 0;
        z-index: 1;
        animation: groupTurn 22s linear infinite;
    }

    /* Fixed point on the ring's edge that the label rides on */
    .onboard-group-anchor {
        position: absolute;
        top: 0;
        left: 50%;
    }

    .onboard-group-label {
        position: absolute;
        top: 0;
        left: 0;
        padding: var(--padding-xxsmall) var(--padding-xsmall);
        border-radius: 999px;
        border: 1px solid var(--hairline-color);
        background: #fff;
        white-space: nowrap;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--dark-dark-color);
        animation: labelUpright 22s linear infinite;
    }

    @keyframes groupTurn {
        to { transform: rotate(360deg); }
    }

    /* Counter-rotates against the orbit so the text always reads level */
    @keyframes labelUpright {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(-360deg); }
    }


    /*===================================================
    // PHONE SCREENS
    /==================================================*/

    [data-hero="onboarding"] .phone-screen {
        background: var(--surface-color);
    }

    [data-hero="onboarding"] .phone-status,
    [data-hero="onboarding"] .phone-bar,
    [data-hero="onboarding"] .phone-home {
        background: transparent;
    }

    .onboard-screens {
        position: relative;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .onboard-lock,
    .onboard-app {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        transition: opacity 600ms ease, transform 800ms var(--ease-out);
    }


    /*=== Lock Screen ===*/

    .onboard-lock {
        align-items: center;
        padding: var(--padding-medium) var(--padding-xsmall) 0;
    }

    .onboard-lock-date {
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-muted-color);
    }

    .onboard-lock-time {
        margin-top: var(--margin-xxsmall);
        font-size: 64px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.04em;
        color: var(--dark-dark-color);
    }

    /* iOS-style banner: frosted, borderless, header row of icon, app name and time */
    .onboard-notification {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: var(--margin-medium);
        padding: var(--padding-xsmall) var(--padding-small) var(--padding-small);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        opacity: 0;
        transform: translateY(-12px) scale(0.96);
        transition: opacity 500ms ease, transform 700ms var(--ease-out);
    }

    .onboard-notification.is-visible {
        opacity: 1;
        transform: none;
    }

    .onboard-notification.is-pressed {
        transform: scale(0.97);
    }

    .onboard-notification-meta {
        display: flex;
        align-items: center;
        gap: var(--gap-xsmall);
        margin-bottom: var(--margin-xxsmall);
        font-size: 10.5px;
        color: rgba(0, 0, 0, 0.45);
    }

    .onboard-notification-meta img {
        display: block;
        width: 18px;
        height: 18px;
        border-radius: 5px;
    }

    .onboard-notification-app {
        flex: 1 1 auto;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .onboard-notification-title {
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.3;
        color: #000;
    }

    .onboard-notification-text {
        font-size: 12px;
        line-height: 1.35;
        color: rgba(0, 0, 0, 0.85);
    }

    .is-app-open .onboard-lock {
        opacity: 0;
        transform: scale(0.96);
    }


    /*=== Pathway App ===*/

    .onboard-app {
        opacity: 0;
        transform: translateY(24px);
    }

    .is-app-open .onboard-app {
        opacity: 1;
        transform: none;
    }

    /*=== App Bar: goal rings and map marker, as in the app ===*/

    .onboard-goals {
        width: 26px;
        height: 26px;
        transform: rotate(-90deg);
    }

    .onboard-goal-track,
    .onboard-goal {
        fill: none;
        stroke-width: 3.5;
    }

    .onboard-goal-track {
        stroke: #e9edf2;
    }

    /* Hidden at zero so the round cap doesn't leave a dot */
    .onboard-goal {
        stroke-linecap: round;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        opacity: 0;
        transition: stroke-dashoffset 1400ms var(--ease-out), opacity 300ms ease;
    }

    .onboard-goal-progress {
        stroke: var(--primary-color);
    }

    .onboard-goal-rewards {
        stroke: var(--accent-color);
        transition-delay: 250ms;
    }

    .has-goals .onboard-goal {
        opacity: 1;
    }

    .onboard-app-marker {
        position: relative;
        justify-self: end;
        color: var(--dark-dark-color);
    }

    .onboard-app-marker .fa {
        font-size: 18px;
    }

    .onboard-app-badge {
        position: absolute;
        top: -7px;
        right: -8px;
        min-width: 15px;
        height: 15px;
        display: grid;
        place-items: center;
        padding: 0 var(--padding-xxsmall);
        border-radius: 999px;
        border: 1.5px solid var(--surface-color);
        background: var(--accent-color);
        font-size: 8.5px;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        transform: scale(0);
        transition: transform 500ms var(--ease-out) 700ms;
    }

    .is-app-open .onboard-app-badge {
        transform: scale(1);
    }

    .onboard-pathway-head {
        display: flex;
        align-items: center;
        gap: var(--gap-small);
        padding: var(--padding-small);
    }

    .onboard-pathway-cover {
        flex: 0 0 56px;
        display: block;
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: 16px;
    }

    .onboard-pathway-copy {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xxsmall);
    }

    .onboard-pathway-title {
        font-size: 18px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--dark-dark-color);
    }

    .onboard-pathway-status {
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink-soft-color);
    }

    .onboard-steps {
        list-style: none;
        padding: 0 var(--padding-small);
    }

    .onboard-step {
        display: grid;
        grid-template-columns: 40px 1fr 18px;
        align-items: center;
        gap: var(--gap-small);
        padding: var(--padding-small) 0;
        border-top: 1px solid var(--hairline-color);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 500ms ease, transform 700ms var(--ease-out);
        transition-delay: calc(var(--i) * 90ms + 250ms);
    }

    .is-app-open .onboard-step {
        opacity: 1;
        transform: none;
    }

    .onboard-step-icon {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #e6ebf1;
        color: var(--ink-soft-color);
        outline: 1.5px solid transparent;
        outline-offset: 3px;
        transition: outline-color 600ms ease;
    }

    .onboard-step:first-child .onboard-step-icon {
        background: var(--primary-color);
        color: #fff;
        outline-color: var(--primary-color-15);
    }

    .onboard-step.is-complete .onboard-step-icon {
        outline-color: var(--primary-color);
    }

    .onboard-step-icon .fa {
        font-size: 16px;
    }

    .onboard-step-title {
        display: block;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--dark-dark-color);
    }

    .onboard-step-text {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.35;
        color: var(--ink-muted-color);
    }

    .onboard-step-status {
        position: relative;
        width: 18px;
        height: 18px;
        color: var(--dark-light-color);
    }

    .onboard-step-status .fa {
        position: absolute;
        inset: 0;
        font-size: 16px;
        transition: opacity 400ms ease, transform 500ms var(--ease-out);
    }

    .onboard-step-status .fa-circle-check {
        opacity: 0;
        transform: scale(0.6);
        color: var(--primary-color);
    }

    .onboard-step.is-complete .fa-clock {
        opacity: 0;
    }

    .onboard-step.is-complete .fa-circle-check {
        opacity: 1;
        transform: none;
    }


    /*===================================================
    // RESPONSIVE
    /==================================================*/

    @media screen and (max-width: 1180px) {

        .onboard-stage .hero-phone {
            margin-left: -140px;
        }

    }

    /* Below tablet the field becomes a row of people above the phone */
    @media screen and (max-width: 960px) {

        .onboard-rule-count{display:none}

        .onboard-rule,.onboard-rule-title{
            font-size:9px;
        }

        .onboard-stage {
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--gap-medium);
        }

        .onboard-rule {
            position: static;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 100%;
            border-radius: 20px;
            white-space: normal;
            transform: none;
        }

        .onboard-arrows,
        .onboard-group,
        .onboard-person-label {
            display: none;
        }

        .onboard-field {
            position: static;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--gap-xsmall);
            max-width: 360px;
        }

        .onboard-person,
        .onboard-person.is-grouped {
            position: static;
            width: 40px;
            height: 40px;
            margin: 0;
            transform: none !important;
            filter: none;
        }

        .onboard-stage .hero-phone {
            position: relative;
            top: auto;
            left: auto;
            margin: 0;
        }

    }